Animating two timelines

[scottjan9119]

Hi,

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"}));
}	

[Carl]

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
  {
  timeline2.play();
  }

function roomhide (event:MouseEvent):void
  {
  timeline2.reverse();
}  

 

 

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

 

willow.alpha=0;
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{
roomAnimation.play();
}

function hideImage(e:MouseEvent):void{
roomAnimation.reverse();
}	

[scottjan9119]

Fantastic. Thank you!

[scottjan9119]

This is what it looked like with the fix. Thanks again.

 

http://www.scottanthony.biz/Rings2.html

[Carl]

very cool. thx for sharing.

 

Carl