controlling animation timing

[jpd1466]

Hey all. I'm new to OOP and AS3 but I'm diving in head first. I have what is probably a simple question if anyone can help me out with a simple answer. I'm doing my company website. When a mouse event sends you to my services page I have 4 seperate blocks of text that fade in. So far I have the first 2 texts blocks fading in at the same time. I want to stagger the timing so the second block of text starts its fade in a fraction of a second later, and so on with the remaining text blocks. Below is the code I've used to fade them in at the same time. Is there an easy way to adjust this code to achieve the desired effect.


//services text fade in
var servicesText1Tween:Tween = new Tween(servicesText1, "y", Regular.easeOut, 148.9, 140.9, 1, true);

var servicesText1Fade:Tween = new Tween(servicesText1,"alpha",Regular.easeIn,0,1,2,t rue);


var servicesText2Tween:Tween = new Tween(servicesText2, "y", Regular.easeOut, 244.7, 236.7, 1, true);

var servicesText2Fade:Tween = new Tween(servicesText2,"alpha",Regular.easeIn,0,1,2,t rue);



Many many thanks.

[absolutezero342]

I'm going to introduce you to a class that will save your life in terms of animation...first off, forget the built-in Tween class because it's terrible compared to this option. It's called Tweener and you can get it for AS2 & AS3. You can set all tween properties (x, y, alpha, rotation, etc.) in one function call and you can specify easing functions to apply to the MC AND the time and even a delay before executing like you referred to. You can also specify what should happen during certain events pertaining to your animation, such as when it starts, when it ends, etc.

PHP Code:

Tweener.addTween(some_mc, {x: 50, y: 100, alpha: 0.5, time: 3, delay: 5, transition: "Strong.easeIn", onComplete: myFunction});


or you can create an Object that holds all those props and pass that to "addTween", like this:

PHP Code:

var tweenProps:Object = new Object();
//add some props to tweenProps
//...
Tweener.addTween(some_mc, tweenProps);


And since I'm feeling so nice today, I'm going to refer you to the BulkLoader class which can control the loading of multiple MC's, FLV's, mp3's, etc. in one easy, concise package!

Here are the links:

http://code.google.com/p/tweener/

and...

http://code.google.com/p/bulk-loader/

and TweenLite is like Tweener, same stuff basically, but maybe you'll like it better...I use Tweener cause I'm used to it.

http://blog.greensock.com/licensing/

[jpd1466]

Hey Thanks. I'm going to check it out and report back.

[jpd1466]

Hey absolutezero342 thanks for the Tweener tip. I used it to add delays to in my code and it works great and is pretty easy to use so far. For anyone out there using MC Tween you should try the Tweener class instead. I have another issue I'm trying to solve. I'm trying to apply the Blur Filter effect to my target object that I am also tweening.

I've imported and initialized the class;

import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();

but I don't really know where to go from here to get it to work. I tried a few things but nothing has worked so far.

Here's my code

import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
FilterShortcuts.init();

redDot.alpha = 0;

//red dot moves diagonally and down
Tweener.addTween(redDot, {x:100, y:100, alpha:1, time:2, transition:"easeInOutQuad"});
Tweener.addTween(redDot, {delay:4, x:175, y:200, time:3, transition:"easeInOutQuint"});

animation.alpha = 0;

//animation button fades up from blur
Tweener.addTween(animation, {x:118, y:200, delay:6, alpha:1, height:100, width:300, time:1, transition:"easeInOutQuint"});

Thanks again.

[jAQUAN]

Just use TweenLite or TweenMax instead of all that tweener crap.
http://blog.greensock.com/

[absolutezero342]

I'm not opposed to using either of the ones you mentioned, but do they easily handle filters? If so, please give an example.

[jAQUAN]

import com.greensock.*;
import com.greensock.easing.*;

var myMovieClip:MovieClip = someClip;
var mySeconds:Number = 1;
TweenMax.to(myMovieClip, mySeconds, {x:100, y:100, alpha:1, blurFilter:{blurX:20}, ease:QuadInOut});


http://blog.greensock.com/tweenmax/
scroll down to the plugin explorer to get a better idea.