Using the Tween Class, Part II

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:

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 page, I will cover how to tween objects.

Onwards!

1 | 2