Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sweetj77

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

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

J

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.
×