Jump to content

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

Animating two timelines

Recommended Posts


I'm messing around with timeline and not sure if my logic is right, since I'm not a coder, but....

This is what I'm trying to do:

Create a point on a map that when you rollover it, a label appears that will tell you the name of the location. rollout and it dissapears.


My thinking was that if I created 2 timelines, 1 can tween the point and the other could tween the label to appear, but I can't get the label tween to start up.


Here is the example: http://www.scottanthony.biz/Rings.html



Here is the code:

import com.greensock.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
test.buttonMode = true;
var timeline:TimelineMax = new TimelineMax({repeat:-1});
var timeline2:TimelineMax = new TimelineMax();

timeline.insertMultiple([new TweenMax(this.test.ring2, 2, {scaleX:5, scaleY:5, alpha:0, ease:Circ.easeOut}),
					 new TweenMax(this.test.ring3, 2, {scaleX:5, scaleY:5, alpha:0, ease:Circ.easeOut})], 0.5, TweenAlign.START, 0.75);

test.addEventListener(MouseEvent.ROLL_OVER, roomshow);
test.addEventListener(MouseEvent.ROLL_OUT, roomhide);

function roomshow (event:MouseEvent):void
timeline2.append(TweenMax.to(willow, 1, {alpha:"1"}));

function roomhide (event:MouseEvent):void
timeline2.append(TweenMax.to(willow, 1, {alpha:"0"}));

Link to comment
Share on other sites

hello scott,


nice example.


2 problems


1: your timeline2 will not automatically play when you append something to it,so you must explicitly tell it to play like timeline2.play()

2: every time you rollover test your roomShow function will be adding new tweens each time, so if you rollover test 30 times... timeline2 will have 30 tweens in it.


instead do this


set up timeline2 at the top of your script to include the tween at the start but have the timeline paused


var timeline2:TimelineMax = new TimelineMax({paused:true});
timeline2.append(TweenMax.to(willow, 1, {alpha:"1"}));

function roomshow (event:MouseEvent):void

function roomhide (event:MouseEvent):void



also since you only have one tween, you may not need to use TimelineLite at all. A simple single TweenLite would suffice


var roomAnimation:TweenLite = TweenLite.to(willow, 1, {alpha:1});

test.addEventListener(MouseEvent.ROLL_OVER, showImage);
test.addEventListener(MouseEvent.ROLL_OUT, hideImage);

function showImage(e:MouseEvent):void{

function hideImage(e:MouseEvent):void{

Link to comment
Share on other sites

very cool. thx for sharing.



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.