Airline route map

programming flash
1

Hello everyone,

I am creating a routemap that resembles an airline route map. Please take a look at the following:

I have something that resembles this, but my ‘routes’ are just straight lines, dynamically drawn using the drawing API. Example (an *.swf and *.fla are attached to this post containing just this code):

mc = this.createEmptyMovieClip("drawing_mc", 1);
drawing_mc.speed = 1.1; // Any number above 1
drawing_mc.lineToX = drawing_mc.startX = 100;
drawing_mc.lineToY = drawing_mc.startY = 100;
drawing_mc.endX = 350;
drawing_mc.endY = 250;

drawing_mc.onEnterFrame = function(){

	// Determine endpoints for lineTo() function below
	this.lineToX = this.endX -
	               (this.endX - this.lineToX)/this.speed;
	this.lineToY = this.endY -
	               (this.endY - this.lineToY)/this.speed;

	// Remove previously drawn line
	this.clear();
	
	this.lineStyle(2, 0x000000);
	this.moveTo(this.startX,this.startY);
	this.lineTo(this.lineToX,this.lineToY);

}

My plan is to use curved lines with the curveTo() function. I am trying to do it in a similar fashion as in the example, redrawing the line on every EnterFrame() event. The problem I have is that I need to determine the location of the curve’s control point and end point to create every “sub”-curve until the line has reached its destination.

Is there an easy way of doing this?

I’ve looked into articles about the math behind this (bezier curves, quad curves, tangents and their intersections etc), and I’ve also read through the posts in this forum (a couple of them were really good, however not for my problem…)

Thanks for you time!

Kind regards,
Maurits

2

can masking of line can help you

3

Thanks for your input. I tried that and I didn’t get it to work because it seems (what I’ve found) that masking does not work when the mask consists of lines only.

Any other ideas?

Kind regards,
Maurits

4

don’t reject ideas before testing
here is sample from which you will see masking lines works perfectly when they are inside movie clip

and to inform you that ryanair did it almost most stupid way
animating it without AS

5

Hi gvozden,

Thanks for your input. Please note that I did try my best to test your idea but it didn’t work for me. I came up with the following when I was trying out your suggestion earlier today:

this.createEmptyMovieClip("mask",2);
mask.moveTo(200, 200);
mask.lineTo(200, 100);
mask.lineTo(100, 100);
mask.lineTo(100, 200);
mask.lineTo(200, 200);

this.createEmptyMovieClip("bg",1);
bg.moveTo(300, 300);
bg.beginFill(0xFF0000, 50);
bg.lineTo(300, 100);
bg.lineTo(100, 100);
bg.lineTo(100, 300);
bg.lineTo(300, 300);
bg.endFill();

bg.setMask(mask);

I kind of got stuck because if I made the “bg” mc a filled square it worked but without the fills it didn’t work. But it doesn’t really matter now, you’ve helped me a great deal so thank you very much!

Kind regards,
Maurits

6

no problem,

I think you can easily do dynamic what ryan did with static flash
you will have one movieclip per route and mask

7

I’ll do that, thanks!