surfjoe
asked on
Animated line showing route from one button to the next in flash 8
I am creating an interactive map with hot spots of 10 locations, I would like to create an animated line that would join up the dots from previous hotspot (button) clicked to current button clicked. This would show the path from one location to the next. How would I go about coding this using action script - can this be done using the drawing API in flash8 ?
Any information or pointers would be great.
Thanks
Any information or pointers would be great.
Thanks
It should be possible but I can only give a rough idea on how it would be done since I myself haven't touched the drawing API (but i know what it can do from reading tutorials and stuff). Basically you'd have some sort of global object that would keep track of the last button clicked (particularly the location). When the next button is clicked, you'd have a call to the global object to check if a previous button was clicked and if so, draw a line from 1 point to the other. Another thing I would suggest is to store the line MCs in an array so that you can delete them later on when needed (like when you implement a "clear lines" button).
What you'll be needing is a class (let's call it LineController) that would have functions which the buttons on stage would call.
class LineController{
private var prevx:Number;
private var prevy:Number;
private var newx:Number;
private var newy:Number;
private var prevclick:Boolean; //used to determine if there was a click before
private var lineArray:Array; //container for all our lines
private var lineCounter:Number; //used for counting how many lines we have
function LineController(){
prevclick = false;
lineArray = new Array();
lineCounter = 0;
}
function btnClicked(int x, int y):Void{
if(!prevclick){
prevx = x;
prevy = y;
prevclick = true;
}else{
newx = x;
newy = y;
DrawLine();
}
}
function DrawLine():Void{
//using the coordinates stored, we draw the line from prev points to new points then add the movieclip to the array
//increment the lineCounter
lineCounter++
//this one is for assuming you want a connect the dots function instead of connect 2 dots only
prevx = newx;
prevy = newy;
}
function ClearLines():Void{
for(var i = 0; i<lineArray.length; i++){
lineArray[i].unloadMovie() ;
}
}
}
1st fram of your _root timeline, you'd have something like this:
_global.lcontrol = new LineControl();
Then your buttons would have this:
on(release){
_global.lcontrol.btnClicke d(this._x, this._y);
}
You'll just have to fill in the drawing part since I'm not that familiar with it ^-^; Chances are that you'll also have to be careful with the array since I have a feeling that it could get buggy...
--trigger-happy
What you'll be needing is a class (let's call it LineController) that would have functions which the buttons on stage would call.
class LineController{
private var prevx:Number;
private var prevy:Number;
private var newx:Number;
private var newy:Number;
private var prevclick:Boolean; //used to determine if there was a click before
private var lineArray:Array; //container for all our lines
private var lineCounter:Number; //used for counting how many lines we have
function LineController(){
prevclick = false;
lineArray = new Array();
lineCounter = 0;
}
function btnClicked(int x, int y):Void{
if(!prevclick){
prevx = x;
prevy = y;
prevclick = true;
}else{
newx = x;
newy = y;
DrawLine();
}
}
function DrawLine():Void{
//using the coordinates stored, we draw the line from prev points to new points then add the movieclip to the array
//increment the lineCounter
lineCounter++
//this one is for assuming you want a connect the dots function instead of connect 2 dots only
prevx = newx;
prevy = newy;
}
function ClearLines():Void{
for(var i = 0; i<lineArray.length; i++){
lineArray[i].unloadMovie()
}
}
}
1st fram of your _root timeline, you'd have something like this:
_global.lcontrol = new LineControl();
Then your buttons would have this:
on(release){
_global.lcontrol.btnClicke
}
You'll just have to fill in the drawing part since I'm not that familiar with it ^-^; Chances are that you'll also have to be careful with the array since I have a feeling that it could get buggy...
--trigger-happy
Okie surfjoe let's make a simple point to point
supose u have 2
but1
but2
Supose the start point begins from but1
on the frame
var startpoint_x = but1._x + (but1._height/2)
var startpoint_y = but1._y + (but1._width/2)
now, on the button make a event
on(release)
{
this.createEmptyMovieClip ("new_line", 1)
with (new_line)
{
lineStyle (1, 0xFFFFFF, 50); // define the line
moveTo (startpoint_x,startpoint_y ); // put the start of the line at the position
lineTo ( but2._x + (but2._height/2), but2._y + (but2._width/2)); // draw the line
}
}
supose u have 2
but1
but2
Supose the start point begins from but1
on the frame
var startpoint_x = but1._x + (but1._height/2)
var startpoint_y = but1._y + (but1._width/2)
now, on the button make a event
on(release)
{
this.createEmptyMovieClip ("new_line", 1)
with (new_line)
{
lineStyle (1, 0xFFFFFF, 50); // define the line
moveTo (startpoint_x,startpoint_y
lineTo ( but2._x + (but2._height/2), but2._y + (but2._width/2)); // draw the line
}
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
here is an tutorial that will do what you want:)
The Drawing API
http://www.kirupa.com/developer/actionscript/tricks/drawing_api.htm
Regards,
Ramy