# Airline route map

**URL:** <https://forum.kirupa.com/t/airline-route-map/184061>\
**Category:** flash\
**Created:** [April 1, 2006, 2:32pm UTC](https://forum.kirupa.com/t/airline-route-map/184061 "2006-04-01T14:32:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![maurits](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@maurits](https://forum.kirupa.com/u/maurits)\
**Post date:** [April 1, 2006, 2:32pm UTC](https://forum.kirupa.com/t/airline-route-map/184061/1 "2006-04-01T14:32:40Z")

</div>

Hello everyone,

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

> **[Cheap flights in Europe | Low-cost European flights | Ryanair.com](https://flights.ryanair.com/en-gb/)**
>
> Ryanair takes travelling seriously. From priority boarding, to additional checked bag allowance, to fast track facilities - We are Always Getting Better! Book your flights to 200+ destinations today!

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):

```auto
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

---

<div class="post-metadata">

**Author:** ![gvozden](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gvozden/32/1084_2.png) [@gvozden](https://forum.kirupa.com/u/gvozden)\
**Post date:** [April 1, 2006, 2:44pm UTC](https://forum.kirupa.com/t/airline-route-map/184061/2 "2006-04-01T14:44:25Z")

</div>

can masking of line can help you

---

<div class="post-metadata">

**Author:** ![maurits](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@maurits](https://forum.kirupa.com/u/maurits)\
**Post date:** [April 1, 2006, 4:36pm UTC](https://forum.kirupa.com/t/airline-route-map/184061/3 "2006-04-01T16:36:07Z")

</div>

> [@gvozden](#):
>
> can masking of line can help you

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

---

<div class="post-metadata">

**Author:** ![gvozden](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gvozden/32/1084_2.png) [@gvozden](https://forum.kirupa.com/u/gvozden)\
**Post date:** [April 1, 2006, 9:36pm UTC](https://forum.kirupa.com/t/airline-route-map/184061/4 "2006-04-01T21:36:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![maurits](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@maurits](https://forum.kirupa.com/u/maurits)\
**Post date:** [April 1, 2006, 9:50pm UTC](https://forum.kirupa.com/t/airline-route-map/184061/5 "2006-04-01T21:50:51Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![gvozden](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gvozden/32/1084_2.png) [@gvozden](https://forum.kirupa.com/u/gvozden)\
**Post date:** [April 1, 2006, 9:55pm UTC](https://forum.kirupa.com/t/airline-route-map/184061/6 "2006-04-01T21:55:32Z")

</div>

no problem,

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

---

<div class="post-metadata">

**Author:** ![maurits](https://avatars.discourse-cdn.com/v4/letter/m/dec6dc/32.png) [@maurits](https://forum.kirupa.com/u/maurits)\
**Post date:** [April 1, 2006, 10:12pm UTC](https://forum.kirupa.com/t/airline-route-map/184061/7 "2006-04-01T22:12:21Z")

</div>

> [@gvozden](#):
>
> no problem,
> 
> I think you can easily do dynamic what ryan did with static flash  
> you will have one movieclip per route and mask

I’ll do that, thanks!