Using the Tween Class, Part II

by Jesse Marangoni aka TheCanadian   | filed under Flash and ActionScript

In the previous section, 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

Part 2 of the Tween class tutorial, here I will show you some more ways to control your tweens, as well as give you a trick or two to create some interesting effects. This tutorial will be building off of the original, which can be found in Part I of this tutorial. By the end of this, you will have produced something similar to this:

[ hover over the letters to see the Tween effect ]

More Methods and Event Handlers

Before we go on to the fun stuff, I’m going to show some more ways to manipulate your scripted tweens. All of the methods, properties and event handlers are well documented in the Component Language Reference which can be found in Flash or online at the Macromedia LiveDocs. Rather than copy the help file word for word, you can give it a read and deconstruct the following example. It’s heavily commented and if you read the first tutorial, this should be fairly straight forward.

Download FLA for Flash 8

 
Tweens and Components
The original use of the easing classes (Bounce, Back, Elastic, None, Regular and None) was for components, but Macromedia created the Tween class so you could use these easing equations with any object. The easing classes can be used with the Accordion, ComboBox, DataGrid, List, Menu, and Tree components. In this section I will show you how to easily use the six easing classes with these components.

1. Create a new document and drag a combo box component onto the stage from the components panel. Give it the instance name cb.

2. Open the actions panel for the first frame and enter the following code:

import mx.transitions.easing.*;
cb.dataProvider = TextField.getFontList();
cb.setStyle("openEasing", Elastic.easeOut);
cb.setStyle("openDuration", 2000);
cb.setStyle("selectionEasing", Elastic.easeOut);
cb.setStyle("selectionDuration", 2000);

3. That’s it, test your movie and you can see the ComboBox with some nice elasticity.

Code Explanation Time:

import mx.transitions.easing.*;

This line imports the easing classes for use by Flash. You’ll notice that you do not need to import the Tween class as you would if you were tweening an object.

cb.dataProvider = TextField.getFontList();

This line has nothing to do with applying easing to components. It simply populates the ComboBox with data so the effect can be seen.

cb.setStyle("openEasing", Elastic.easeOut);
cb.setStyle("openDuration", 2000);
cb.setStyle("selectionEasing", Elastic.easeOut);
cb.setStyle("selectionDuration", 2000);

Here is where we actually apply the easing to the component. Using the setStyle method, we must choose both the property to change and the value to change it to. The properties we want to change are those which affect the way the component opens (openEasing), how long it takes to open (openDuration), the animation when an item is selected (selection Easing) and finally how long the selection animation takes (selectionDuration).

You aren't done yet. In the next section, I will cover how to tween objects.

Onwards!

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇