AS3 & AS2: Using filters in TweenLite v.11.1

AS2 and AS3 – Most other engines are only developed for AS2 or AS3 but not both. — http://blog.greensock.com/tweenlite/

This is an overview of how to use filters via the popular animation engine TweenLite. For the purposes of this tutorial I’m simply using the “delay” property to time the overall animation flow. Check out the relevant forum for info on how to manage animation sequences using TimeLineLite. Here’s a Zip with the .fla.

The AS3 code:

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

TweenPlugin.activate([BlurFilterPlugin]);

/*
 * assumes you have graphic assets named couple1, couple2 on the stage
 * for pure AS3 apps, use the embed Flex meta tag to embed the asset
 * and wrap this code in a class file
 */

var _tweenSpeed1:Number = 0.55;
var _tweenSpeed2:Number = 1;
var _tweenSpeed3:Number = 0.33;
var _blurYamount1:uint = 60;
var _noBlur:uint = 0;

//init blur filter & position on hidden assets, using TweenLite
TweenLite.to(couple1, 0.33, {delay:0, y:200, blurFilter:{blurY:_blurYamount1}});
TweenLite.to(couple2, 0.33, {delay:0, y:200, blurFilter:{blurY:_blurYamount1}});

//remove blur as the hidden asset animates onto the stage
TweenLite.to(couple1, _tweenSpeed3, {delay:1, blurFilter:{blurY:_noBlur}, y:0, ease:Sine.easeOut, overwrite:false});

//move the asset off stage, as per storyboard, blur it again, as you move it
TweenLite.to(couple1, _tweenSpeed2, {delay:3, blurFilter:{blurY:_blurYamount1}, y:200, ease:Elastic.easeOut, overwrite:false});

//remove blur as the hidden asset animates onto the stage
TweenLite.to(couple2, _tweenSpeed1, {delay:3.5, blurFilter:{blurY:_noBlur}, y:10, overwrite:false});

//move the asset off stage, as per storyboard, blur it again, as you move it
TweenLite.to(couple2, _tweenSpeed2, {delay:6, blurFilter:{blurY:_blurYamount1}, y:200, ease:Elastic.easeOut, overwrite:false});

For Flash banners, for example, it’s often easier to use AS2, because a) Designers don’t know AS3, b) you’ll get that extra 1% or so of users who don’t have Flash Player 9 or 10 yet and c) some versions of Flash 9 player had an AS3 preload bug on IE on Windows that didn’t allow a file to preload itself properly. Why not just do the AS3 workaround with an empty wrapper SWF that preloads the main SWF? Depending on the situation, sometimes, for smaller files like banners, it’s easier to send the client 1 SWF with everything in it, than saying, “hey, do you have an external assets server that I can upload the extra SWFs to so the banner can load it in at run-time?” I’ve had cases where a client uses an Ad Server that they either don’t quite know how to fully use or that’s weirdly set to only accept 1 SWF. I’ve read about server load-balancing issues forcing Flash guys to dump everything into 1 SWF as well. Basically, if your client has those restrictions, as a Flash Developer, you’re stuck with these limitations and, usually, no amount of “hey, but look at how much more elegant my code is if i break the SWF up into several pieces” will help .

Anyways, here’s the AS2 code:

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

TweenPlugin.activate([BlurFilterPlugin]);

var tweenSpeed1:Number = 2;
var blurYamount1:Number = 60;
var noBlur:Number = 0;

//init blur filter & position on hidden asset
TweenLite.to(couple1, 0, {delay:0, _y:200, blurFilter:{blurY:blurYamount1}});
TweenLite.to(couple2, 0, {delay:0, _y:200, blurFilter:{blurY:blurYamount1}});

//remove blur as the hidden asset animates onto the stage
TweenLite.to(couple1, tweenSpeed1-1, {delay:2, blurFilter:{blurY:noBlur}, _y:0, overwrite:false});

//move the asset off stage, as per storyboard, blur it again, as you move it
TweenLite.to(couple1, tweenSpeed1, {delay:4, blurFilter:{blurY:blurYamount1}, _y:200, ease:Elastic.easeOut, overwrite:false});

//remove blur as the hidden asset animates onto the stage
TweenLite.to(couple2, tweenSpeed1-1.25, {delay:4.5, blurFilter:{blurY:noBlur}, _y:10, overwrite:false});

//move the asset off stage, as per storyboard, blur it again, as you move it
TweenLite.to(couple2, tweenSpeed1, {delay:7, blurFilter:{blurY:blurYamount1},_y:200, ease:Elastic.easeOut, overwrite:false});
Advertisements

4 thoughts on “AS3 & AS2: Using filters in TweenLite v.11.1

  1. Thanks- I like handy resources like this and need to do some banners with tweenlite this week! Am sure this will no doubt be a bit of a life saver so thanks for taking the time to share your knowledge and experiences.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s