Star Trek Movie Website Nav Menu: How Do I Draw Lines Between Moving Objects

[Sweetj77 0 Likes (Newbie)]

Hello,

 

New to GreenSock and love the products. Can any help me figure out how to draw lines between two randomly moving objects like the navigation menu buttons on the Star Trek Movie website at:

 

http://www.startrekmovie.com/

 

Any help would be greatly appreciated

 

Thanks,

 

SweetJ

[Carl 9,066 Likes (Superhero)]

i created a basic example.

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.Event;
import flash.display.Sprite;


TweenMax.to(b1, 4, {x:"200", repeat:-1, yoyo:true, ease:Quad.easeInOut});
TweenMax.to(b2, 3, {x:"-100", repeat:-1, yoyo:true, ease:Quad.easeInOut});
TweenMax.to(b3, 2, {x:"50", repeat:-1, yoyo:true, ease:Quad.easeInOut});

addEventListener(Event.ENTER_FRAME, updateLines);


var graphicsContainer:Sprite = new Sprite();
addChild(graphicsContainer);


function updateLines(e:Event):void{
graphicsContainer.graphics.clear();
graphicsContainer.graphics.lineStyle(.5, 0x0000, .5, false, "none");
graphicsContainer.graphics.moveTo(b1.x, b1.y);
graphicsContainer.graphics.lineTo(b2.x, b2.y);
graphicsContainer.graphics.lineTo(b3.x, b3.y);
}

 

note the tweens aren't using any random values, but the sequence will rarely look the same as each tween runs at different rates. I figured the more import piece was drawing the lines.

 

the trick is to have a mechanism (in this case ENTER_FRAME) that constantly clears the lines and draws new ones. you could also use an onUpdate callback on one of the tweens.

 

I used the as3 drawing/graphics api (google it to learn more of the methods) to clear and re-draw the lines.

 

cs4 fla attached (use your own greensock classes)

 

hopefully this helps you get started.

 

-c

linesConnectMovingObjects.zip

[Sweetj77 0 Likes (Newbie)]

Thank you so much! That is exactly what I'm looking for. Much appreciated

 

J