Using TweenLite

Using TweenLite

You’ll add the TweenLite classes to your project folder, just as you did with the classes that you developed in Chapter 3, but you will be accessing TweenLite through ActionScript alone.

Chapter 5 Sharing Your Animation

1. Download the latest ActionScript 3.0 (AS3) version of TweenLite from www.greensock.com/tweenlite/

or copy it from the Chapter 5/assets folder on the CD included with this book.

2. Unzip the greensock-as3.zip file and copy the com folder into your website directory. This will make the

TweenLite classes available to your Site class.

3. Open your Site.as file in Flash. Add the following import statements after the existing import statements:

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

The asterisks (*) instruct the compiler to include any classes within the preceding package that are refer- enced in the ensuing code. This method of importing

classes is slightly imprecise but is very handy when you The asterisk only instructs the compiler to import classes within a need to reference several classes from a single package.

package. Classes within subpack- 4.

ages will not be imported (e.g., Start by adding a simple fade-in for your content. Add

import com.yoursite. the following highlighted code to the onContentLoaded utils.* will not import

method:

com.yoursite.utils. text.TextUtils ).

private function onContentLoaded(e:*):void { preloader_mc.visible = false; if(e.type == IOErrorEvent.IO_ERROR){

trace(e.text); }else { contentLoader.alpha = 0; TweenLite.to(contentLoader, .75, {alpha:1});

The highlighted code is added to the else statement to ensure that the code only executes when there is no load error. The first line sets the alpha of the contentLoader to 0, rendering the content entirely transparent. The next line animates the contentLoader over a period of .75 seconds, tweening the alpha prop- erty to 1 (100% opaque).

5. Save your script and test your movie. Click on the menu items. Note the subtle fade-in that occurs on the loaded

content when you click each item.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Now let’s utilize the TweenLite class further and create a sequenced animation.

1. Update the loadTitle method with the following high- lighted code:

private function loadTitle(titleStr:String):void { var startY:Number = title_mc.y; TweenLite.to(title_mc, .25, {y:startY+

➥ title_mc.height, ease:Quad.easeIn, ➥ onComplete:function(){ title_mc.txt.text = ➥ titleStr; }});

TweenLite.to(title_mc, .75, {y:startY, ➥ delay:.25, overwrite:false}); }

The first line stores the y position of the title_mc instance so that the position can be returned to at the end of the animation. The second line tweens title_mc over a duration of .25 seconds, moving the title down to

a position equal to its current position plus its height. An ease-in is applied rather than the default ease-out. An onComplete method is assigned to the content that previously populated the loadTitle method. The net result is that the title_mc object slides behind the con- tent rectangle and then updates the title’s content (in private, so to speak). Finally, title_mc is tweened again, this time over a period of .75 seconds. The y position is returned to its original value. A delay is added to match the first tween of title_mc , and overwrite is given a value of false . Setting overwrite to false prevents the second tween from overwriting (and destroying) the first tween.

2. Save your script and test your movie. When you click on a menu item, the old title should now slide down

behind the content rectangle and slide back into posi- tion with the new title (Figure 5.36).

Figure 5.36 The title sliding down below the content area.

Chapter 5 Sharing Your Animation

3. Now create a similar effect on the description, this time using 3D rotation. Update the loadDescription method

with the following highlighted code: private function loadDescription(

➥ captionStr:String):void { TweenLite.to(description_mc, .25, ➥ {rotationX:90, onComplete:function(){ ➥ description_mc.txt.htmlText = captionStr; }});

TweenLite.to(description_mc, .75, ➥ {rotationX:360, delay:.25, overwrite:false}); }

This code is similar to the code used to animate the title except it utilizes the rotationX property rather than the y property. This subtle difference results in a very different animation (Figure 5.37).

Figure 5.37 The description rotating in 3D space.

4. Save your script and test your movie. Your description should now flip around in 3D space and update the

description text in the process. You may notice that your description text remains blurry after completing its animation. This blurriness is partially due to the fact that Flash converts the content into a bitmap in order to render 3D effects (Figure 5.38).

Figure 5.38 The 3D rotation causes the text to remain blurred.

5. Update the loadDescription method with the following highlighted code: private function loadDescription( ➥ captionStr:String):void {

TweenLite.to(description_mc, .25, ➥ {rotationX:90, onComplete:function(){

➥ description_mc.txt.htmlText = captionStr;}});

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

TweenLite.to(description_mc, .75, ➥ {rotationX:360, delay:.25, overwrite:false ,

➥ onComplete:function(){

var position:Point = new ➥ Point(description_mc.x, description_mc.y);

description_mc.transform.matrix3D =

➥ null;

description_mc.x = position.x; description_mc.y = position.y;

This new code runs when the tween has completed. It stores the current position, removes any 3D properties applied to the object, and then restores the object’s position. As a result of the removal of the 3D proper- ties, the text is now clear when the animation com- pletes (Figure 5.39).

Figure 5.39 The text no longer has a blur after being rotated.

Now that the basic animation is in place, there are just a few more items to wrap up.