An Example

When you interrupt a tweened motion, preventing erratic and undesirable behavior of subsequent tweens can be a little tricky. In this example we show how to get smooth and predictable response of multiple tweens. Click on the image below to open the applet in a new window.

Download

Download the well-commented source files corresponding to the applet above:

Controlling Tweens

Please see the comments to to Timeline code in the file tweencotrol.fla contained in the package to see how to manage multiple tweens governing the motion of the cards and the cards' response to mouse actions. The basic ideas are as follows.

  • When a tween has to be interrupted, always use Tween.stop() method. Otherwise, tween events TweenEvent.MOTION_CHANGE and TweenEvent.MOTION_FINISH keep firing even after your tween variable has been assigned a new Tween.
  • Explicitly remove all listeners to tween events after stopping a tween. Otherwise the listeners linger even after the tween is gone and may cause trouble.
  • Store the value of tweened property in a variable to use it for the subsequent tween to keep motion smooth.

Objects with alpha=0 Remain Responsive to the Mouse Action

Another trick presented in the applet that you might find useful, is creating a transparent object that is invisible yet mouse-resposive. The cards in the upper row respond to ROLL_OVER and ROLL_OUT events. In order for ROLL_OUT event NOT to be executed due to a card's rotation rather than due to the user moving away the mouse, we put the first two cards into Sprite containers of the size of the cards. We draw backgrounds in those containers with alpha 0. This way, the containers are not visible but mouse enabled. The listeners to ROLL_OUT and ROLL_OVER are attached to containers rather than to cards. Thus, unless the user moves the mouse away from a card's area, ROLL_OUT will not be executed.

The CardRotator Custom AS3 Class

In our example we use the custom CardRotator class that flips and depth-sorts any card, placed anywhere on the Stage, and under any perspective projection settings. The class is not central to the tween control issue; it just provides a nice example. The CardRotator class was introduced and discussed in our tutorial: Z-Sorting of a 3D Card and the Projection Center in Flash CS4.

Blurring of 3D Objects

You may notice that the 3D cards are less sharp that they 2D couterparts stored in the Library. This is because of the well-known blurring effect for 3D objects. There are ways to work around it and soon we will post a version of the CardRotator class that sharpens 3D objects. The upcoming version is based on the technique from our tutorial: Simple and Sleek Solution to Blurring of 3D Objects in Flash Player 10.

Back to AS3 How-Tos and Tips              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.