by
Jesse Marangoni aka TheCanadian | 29 December 2005
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.
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.
-
Create a new document and drag a combo box component onto
the stage from the components panel. Give it the instance name cb.
-
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);
-
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!
|