Using the Tween Class, Part II, Page 2

In the previous page, you learned how to add a tween to a Flash Component, but in this page you will learn the more popular method of tweening objects.

Tweening Objects
In the first tutorial, I dealt only with how to tween the properties of movie clips (which are objects). However, the Tween class can be used with the numeric properties of all objects. Here I will show you how to tween the blur properties of an instance of the GlowFilter class in the exact same manner as you tweened movie clips in the first part.

Download tweenFilter Source

You can find all of the code on the first frame of the actions layer.

import mx.transitions.Tween;

import mx.transitions.easing.*;

import flash.filters.GlowFilter;

Again, this is where we import the Tween, easing and GlowFilter classes into our file.

var gf:GlowFilter = new GlowFilter(0x356D83, 100, 5, 5, 5, 3, false, false);

Creates an instance of the GlowFilter object, see Applying and Animating the Filter Effects for more info on using the filter classes.

var gfBX:Tween = new Tween(gf, "blurX", Elastic.easeOut, 5, 5, 1, true);

var gfBY:Tween = new Tween(gf, "blurY", Elastic.easeOut, 5, 5, 1, true);

Here is where we construct the tweens. Instead of passing a MovieClip as the object parameter, we are using a GlowFilter instance. And for the property to Tween, we use the blurX and blurY properties of our glow filter.

kText.onRollOver = function() {

gfBX.continueTo(30, 2);

gfBY.continueTo(30, 2);

};

kText.onRollOut = function() {

gfBX.continueTo(5, 2);

gfBY.continueTo(5, 2);

};

Here is where we tween the filters when the text is rolled over or out. We call the continueTo method for each instance of the tween so that it, well, will continue to the value passed as the finish parameter from the current value.

gfBX.onMotionChanged = function() {

kText.filters = [gf];

};

Recall from the filter tutorial that even though we may modify one of the properties of a filter instance, we must reapply it to a movie clip or text field on the stage. We use the onMotionChanged event handler to call the function which reapplies the filter to the kText movie clip every time the tweened property changes.

The important thing to remember here is that all classes inherit from the object class. You can tween any numeric property, from a simple object to the letterSpacing property of a TextFormat object. I hope you learned more about working with the Tween and easing classes. If you have any questions, there will be a lot of people willing to help you in the kirupaForums.

Good Luck!

Jesse Marangoni TheCanadian

 

1 | 2