Jump to content
Search Community

stepping through timelineMax's?

mgason test
Moderator Tag

Recommended Posts

Hi,

first thanks for all of your help.

I am not sure if I am on the right track, before I code much more let me ask how you would go about this.

say I have a series of timelineMax's, tl1, tl2, tl3 etc, and I want to have a previous and next button.

the previous button should cause the current timeline to reverse and when the reverse is complete make the previous timeline play.

the next button should cause the current timeline to reverse and when the reverse is complete make the next timeline play.

 

Is there a smart way to do this?

Should I be nesting the timelines inside a main one?

 

The method I have tried is to have each timeline in a function.

My functions are in an Array.

A var keeps tack of the function in use

when I click next it reverses the current timeline, the onReverseComplete then calls the function with the next timeline.

same deal with previous

Here is my code, and the FLA is attached

This traces slide2 function has been called after reverse is complete but nothing appears?

import com.greensock.TweenMax;
import com.greensock.TimelineMax;
import com.greensock.easing.*;

var sW:int = stage.stageHeight;
var sH:int = stage.stageHeight;

var Pos:int = -1;

var funcArray = new Array(slide1, slide2);

var mcN:MovieClip = slide1Why_mc.questMark_mc;

var oldTimeline:TimelineMax;
var nextFunc:Function;

var timeline1:TimelineMax = new TimelineMax({onCompleteParams:[mcN.width, mcN.height, mcN.x, mcN.y], onComplete:reset, onReverseComplete:revComplete});
var timeline2:TimelineMax = new TimelineMax();

next_btn.addEventListener(MouseEvent.CLICK, nextItem);
prev_btn.addEventListener(MouseEvent.CLICK, prevItem);

function slide1():void{
oldTimeline = timeline1;
timeline1.append(TweenMax.from(slide1Why_mc.why_mc, 1, {autoAlpha:0, y:-200, ease:Sine.easeOut}));
timeline1.append(TweenMax.from(slide1Why_mc.tween_mc, 1, {autoAlpha:0, x:sW, ease:Sine.easeOut}), -0.5);
timeline1.append(TweenMax.from(slide1Why_mc.with_mc, 1, {autoAlpha:0, y:sH, ease:Sine.easeOut}), -0.5);
timeline1.append(TweenMax.from(slide1Why_mc.code_mc, 1, {autoAlpha:0, x:-300, ease:Sine.easeOut}), -0.5);
timeline1.append(TweenMax.from(mcN, 0.5, {autoAlpha:0, rotationX:-90, ease:Sine.easeOut}), -0.3);
}

function reset(w:Number, h:Number, X:Number, Y:Number){
mcN.transform.matrix3D = null;
trace(h);
mcN.width = w;
mcN.height = h;
mcN.x = X;
mcN.y = Y;
Pos = Pos + 1;
}

function slide2():void{
trace("slide2 called");
oldTimeline = timeline2;
timeline2.append(TweenMax.to(slide2Why_mc.head1Mask_mc, 1, {width:700, ease:Sine.easeOut}));
timeline2.append(TweenMax.to(slide2Why_mc.head1Point1Mask_mc, 1, {width:700, ease:Sine.easeOut}), 0.5);
timeline2.append(TweenMax.to(slide2Why_mc.head2Mask_mc, 1, {width:700, ease:Sine.easeOut}), 1);
timeline2.append(TweenMax.to(slide2Why_mc.head2Point1Mask_mc, 1, {width:700, ease:Sine.easeOut}), 0.5);
timeline2.append(TweenMax.to(slide2Why_mc.head3Mask_mc, 1, {width:700, ease:Sine.easeOut}), 1);
timeline2.append(TweenMax.to(slide2Why_mc.head3Point1Mask_mc, 1, {width:700, ease:Sine.easeOut}), 0.5);
timeline2.append(TweenMax.to(slide2Why_mc.head3Point2Mask_mc, 1, {width:700, ease:Sine.easeOut}), 0.5);
timeline2.append(TweenMax.to(slide2Why_mc.head3Point3Mask_mc, 1, {width:700, ease:Sine.easeOut}), 0.5);
}

function prevItem(e:MouseEvent):void{
if(Pos > 0){
oldTimeline.reverse();
Pos = Pos - 1;
}
}

function nextItem(e:MouseEvent):void{
if(Pos < funcArray.length -1){
oldTimeline.reverse();
Pos = Pos + 1;
}
}

function revComplete():void{
trace("called pos " + Pos);
funcArray[Pos]();
}

Link to comment
Share on other sites

I think this is a better method?

It works for a start!!

I store the timelines in an Array, keep a track of the current one. (just 2 in this sample)

When either button (previous/next) is clicked the current timeline reverses.

For all timelines when reverse is complete it calls a function that checks a direction var to see if next or previous was clicked.

It then plays the previous or next timeline in the array.

 

Any opinions on my method?

Am I making full use of TimelineMax's abilities, or can it make this even simpler?

 

import com.greensock.TweenMax;
import com.greensock.TimelineMax;
import com.greensock.easing.*;

var sW:int = stage.stageHeight;
var sH:int = stage.stageHeight;

var forward:Boolean;//do we want next or previous slide/timeline
var currentTL:int;//position in timeline array for current timeline

var tLArray:Array = new Array();

var mcN:MovieClip = slide1Why_mc.questMark_mc;

next_btn.addEventListener(MouseEvent.CLICK, nextBtn);
prev_btn.addEventListener(MouseEvent.CLICK, prevBtn);

var t0:TimelineMax = new TimelineMax({onCompleteParams:[mcN.width, mcN.height, mcN.x, mcN.y], onComplete:reset, onReverseComplete:nextItem});
t0.append(TweenMax.from(slide1Why_mc.why_mc, 1, {autoAlpha:0, y:-200, ease:Sine.easeOut}));
t0.append(TweenMax.from(slide1Why_mc.tween_mc, 1, {autoAlpha:0, x:sW, ease:Sine.easeOut}), -0.5);
t0.append(TweenMax.from(slide1Why_mc.with_mc, 1, {autoAlpha:0, y:sH, ease:Sine.easeOut}), -0.5);
t0.append(TweenMax.from(slide1Why_mc.code_mc, 1, {autoAlpha:0, x:-300, ease:Sine.easeOut}), -0.5);
t0.append(TweenMax.from(mcN, 0.5, {autoAlpha:0, rotationX:-90, ease:Sine.easeOut}), -0.3);

t0.pause();
tLArray.push(t0);

var t1:TimelineMax = new TimelineMax({onReverseComplete:nextItem});
t1.append(TweenMax.to(slide2Why_mc.head1Mask_mc, 0.5, {width:700, ease:Sine.easeOut}));
t1.append(TweenMax.to(slide2Why_mc.head1Point1Mask_mc, 0.5, {width:700, ease:Sine.easeOut}), 0.2);
t1.append(TweenMax.to(slide2Why_mc.head2Mask_mc, 0.5, {width:700, ease:Sine.easeOut}), 0.5);
t1.append(TweenMax.to(slide2Why_mc.head2Point1Mask_mc, 0.5, {width:700, ease:Sine.easeOut}), 0.2);
t1.append(TweenMax.to(slide2Why_mc.head3Mask_mc, 0.5, {width:700, ease:Sine.easeOut}), 0.5);
t1.append(TweenMax.to(slide2Why_mc.head3Point1Mask_mc, 0.5, {width:700, ease:Sine.easeOut}), 0.2);
t1.append(TweenMax.to(slide2Why_mc.head3Point2Mask_mc, 0.5, {width:700, ease:Sine.easeOut}), 0.2);
t1.append(TweenMax.to(slide2Why_mc.head3Point3Mask_mc, 0.5, {width:700, ease:Sine.easeOut}), 0.2);

t1.pause();
tLArray.push(t1);

init();

function reset(w:Number, h:Number, X:Number, Y:Number){
mcN.transform.matrix3D = null;
mcN.width = w;
mcN.height = h;
mcN.x = X;
mcN.y = Y;
}


function prevBtn(e:MouseEvent):void{
if(currentTL > 0){
tLArray[currentTL].reverse();
forward = false;
}
}

function nextBtn(e:MouseEvent):void{
if(currentTL < tLArray.length -1){
tLArray[currentTL].reverse();
forward = true;
}
}

function nextItem():void{
if(!forward){
	//trace("reverse");
	currentTL = currentTL - 1;
}else{
	//trace("forward");
	currentTL = currentTL + 1;
}
tLArray[currentTL].play();
}

function init():void{
t0.play();
currentTL = 0;
}

Link to comment
Share on other sites

Yeah, you're getting the idea alright. I tweaked the logic a bit and attached a new fla. Here are the improvements:

 

1) You can click prev/next buttons anytime (even during the transitions) and it'll work (previously you had to wait until the transition finished). It even works if you had, for example, 10 slides and the user clicked "next" 5 times quickly - they'd end up seeing slide 5 instead of 2 (I think this is a good thing)

 

2) I sped up the outro animations (the reversed ones) using timeScale because usually users are anxious to get to the next content instead of watching a slow outro animation of the current slide.

 

3) I cleaned up the code that set the matrix3D back to null (you can set the transform.matrix instead of having to do width/height/x/y)

 

There are probably a few other things I tweaked, but you had the general idea down. There are a LOT of ways you could do this, actually. One of my favorites is to create a "Slide" class that has animateIn() and animateOut() methods that return TimelineLite instances. That way, when you need to transition, you can just call one of those methods. And it helps to segregate the animation code too so it's not as confusing with 800 lines of code representing all of your animation for the entire project on one frame. But again, there are tons of ways to organize things and the important thing is that you're comfortable with the way you did it. It's gotta make sense to you.

 

I hope this helps.

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.
×
×
  • Create New...