Using the Tween class in Flash CS3 and ActionScript 3

To reduce visual clutter for the user or to save room on the screen, it is useful to hide controls when they are not being used. To make an effect that's visually appealing, we can use the Tween class to make the panel move smoothly into sight. In this tutorial we will see two different approaches to the mechanics of the "slide" followed by an example in which the sliding panel contains actual controls so we can address the issue about referencing user interface elements that are part of another movieclip (the panel) on the stage. We include a final example to show how the Tween class can enhance the snapping motion associated with drag and drop interaction.

Download

Download all four fla files for this tutorial in the following compressed folder.

Notes

All of our examples use the following two explicit import statements. These will allow us to create tweens in the script and have them use fancy easing functions for starting and/or stopping.

import fl.transitions.Tween;

import fl.transitions.easing.*;

The Flash CS3 help files on "Tween class" and "fl.transitions.easing" package will provide more complete information on the class methods and properties as well as on the other options for easing functions to create simple but cool motion effects within your Actionscript code.

Back to Basic Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.