Best Practice for animating a map route

[MDiddy 1 Likes (Newbie)]

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

Thanks!

[X10 0 Likes (Newbie)]

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.

X10

[Carl 11,324 Likes (Superhero)]

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);
addChild(line);

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:

http://bit.ly/ibpGLY

[MDiddy 1 Likes (Newbie)]

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
	{
		clearPath();
		_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.setDashes(dottedArray);
		DashedLine.lineTo(path.graphics, dot.x, dot.y);
	}
	}

[Carl 11,324 Likes (Superhero)]

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