Jump to content
GreenSock

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

Animating two timelines

Recommended Posts

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

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

Link to comment
Share on other sites

very cool. thx for sharing.

 

Carl

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