[MX2004] Drawing lines animation, such as an airline route network

programming flash
1

Hello everyone!

Currently I am working on a map that will animate the drawing of a line between two points as soon as the user hovers over the end point. A good example of this can be seen on the home page of Jet2.com (the map of Europe).

It seems I am having difficulty with drawing the line dynamically. Of course, just drawing a still line between two points is easy, just use MoveTo() and LineTo(). However, having the line expand in an animation is quite difficult for me.

Here is what I’ve come up with so far:


// Create the clip
this.createEmptyMovieClip("drawing_mc",1);
 
// Declare variables
var startX = startY = 100;
var endX = endY = 300;
var speed = 10;
 
// Position the drawing pen and set line style
drawing_mc.moveTo(startX,startY);
drawing_mc.lineStyle(1,0x000000);
 
// Dynamically draw the line
drawing_mc.onEnterFrame = function(){
endX = 300;
endY = 300;
currentEndPointX += (endX-_x)/speed;
currentEndPointY += (endY-_y)/speed;
 
// Start the shape
_root.drawing_mc.lineTo(currentEndPointX,currentEndPointY);
}

Could you please help me in getting this piece of code to work?

Thanks in a million!

Maurits