Jump to content


Best Practice for animating a map route

Moderator Tag

Recommended Posts

Hi I'm looking for a little direction here. I'm not a big animator and I'm creating a map with a few points of interest and I want to animate the route connecting these points. Obviously its a little tricky because the route has to follow certain roads. The map isn't going to be used for navigation purposes so it doesn't need to be super exact. Just wondering what the best approach is to start? I was looking at bezierThrough but it seems like thats more for moving an object rather than highlighting a path.


Any suggestions would be great


Link to comment
Share on other sites

Hi MDiddy,

Not the complete solution to your question, but something I think will help (if I've understood what you're asking) is Carl Schoof's post on navigating using TimelineLite and labels:

http://www.snorkl.tv/2011/01/navigate-a ... d-tweento/


Am sure others will chip in to provide more details.


Link to comment
Share on other sites

I started to whip up a simple demo, but it turned into a full blog post:


The basic concept is that you can use the AS3 Drawing API to sort of follow around a MovieClip that you are tweening. The MovieClip can be invisible if you want.


here is some basic code that you can slap into an FLA that has a MovieClip with theinstance name: mc on the stage:


import com.greensock.*;
import flash.events.MouseEvent;

var line:Shape = new Shape();
line.graphics.lineStyle(5, 0xFF1C30);
line.graphics.moveTo(mc.x, mc.y);

TweenMax.to(mc,1,{x:400, y:20, onUpdate:drawLine});
TweenMax.to(mc,1,{y:250, delay:1, onUpdate:drawLine});

function drawLine():void
line.graphics.lineTo(mc.x, mc.y);


Full Blog Post, Demo Swfs and Source Files here:


Link to comment
Share on other sites

Wow thanks alot for this. I knew it had to be simpler than I was imagining. A couple of wrinkles I'm trying to overcome now:


Adding curved segments to the path

Using a dashed line for part of the path


I tried incorporating this class: http://sebastian.formzoo.com/2010/11/06 ... s-for-as3/ for dotted lines, but since its based on making its own sub lines, the path just comes out looking solid.


I switched around your code a bit to run the onUpdate inside of each individual tween so that I could pass params for each segment. I assumed by moving the onUpdate to the individual tweens, I get the bezier values as they change, but the more I think about it - I may need to add a couple more points and adjust some of these values to get a curve parts to show:


//XML to describe path:


//_points is an array of objects that represent this data.
// I have a setter for the points array in my custom class:

public function set points(value:Array):void
		_points = value;
		t.data = value;
		for (var i:uint = 0; i<_points.length; i++) {
			var vo:Object = _points[i] as Object;
			//vo.isSolid:Boolean that identifies whether the segment is a solid line
                               //vo.dotted:Array (Array of dashes/gaps for the DottedLine class)
			if(vo.isBezier) {	
				t.append(TweenMax.to(dot, vo.duration, {bezierThrough:[{x:vo.pt.x, y:vo.pt.y}], onUpdate:drawSegment,onUpdateParams:[vo.isSolid, vo.dotted]}));
			} else {					
			    t.append(TweenLite.to(dot,vo.duration, {x:vo.pt.x, y:vo.pt.y, onUpdate:drawSegment, onUpdateParams:[vo.isSolid, vo.dotted]}));

private function drawSegment(solidBool:Boolean, dottedArray:Array):void{		
		if(isSolid) {
		path.graphics.lineTo(dot.x, dot.y);
	} else 
		DashedLine.lineTo(path.graphics, dot.x, dot.y);

Link to comment
Share on other sites

very cool. I don't know how well I would have done with dotted curves.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.