Easy transitions and tweens with the Transitions and Tween classes

This is the final tutorial in the series on scripted motion. I’m going to show you another way to create animations in your movies using the Transition and Tween classes. These classes are built into Flash MX 2004 Professional so you can take advantages of the effects they create by writing some simple ActionScript. This tutorial will show you classes and explain how to use them to create animations within your movies.

In the earlier tutorials in the series, I looked at creating motion in a straight line and in a circle, fades and rotations, adding inertia and gravity effects and creating a spring effect. You won’t need to have completed those tutorials before you start this one.

Unlike the other tutorials, you’ll need to have Flash MX 2004 Professional to be able to work through the examples here. All of the examples are shown in ActionScript 2.0. I’ve assumed that you know how to add ActionScript in the Actions panel.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the starter files you'll need as well as the completed files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Overview

Transition classes

We’ll start by looking at the Transition classes. These classes allow you to add ten different effects to your movies. Each effect has settings that you can adjust. You can also combine the transitions. The effects that you can use are:

Blinds
Fade
Fly
Iris
Photo
Pixel Dissolve
Rotate
Squeeze
Wipe
Zoom

In most cases, the names of each effect give you a description of the transition that they’ll create. I’ll work through each transition and to show you how you can customise the effect. You’ll be able to see sample code in the completed Flash movies. Just remember to uncomment the lines that you want to test.

You can see the Transition classes in your Flash MX 2003 First Run classes folder. On my computer, the location of the folder is C:\Program Files\Macromedia\Flash MX 2004\en\First Run\Classes\mx\transitions. It includes a folder called Easing. This contains Easing classes.

Transitions use the Easing classes to control the way each transition starts and ends. You can apply easing using the directions easeIn, easeOut or easeInOut. There is also an easing direction called none. The types of easing you can apply to transitions are:

Back
Bounce
Elastic

Sas Jacobs

Sas Jacobs Hello. I'm the Principal of Anything Is Possible, an Australian web development business specialising in web applications development and training. I'm interested in using Flash with dynamic content and I've presented at a number of International conferences on topics relating to applications development, XML and scripting components. I have recently released my second print book Beginning XML with DOM and Ajax to match the first one - Foundation XML for Flash. I have a business web site
and a personal web site.

See All Postings From Sas Jacobs >>

Reviews

Be the first to write a review

You must me logged in to write a review.