Flash Reference Guide

Flash 8 comes with a whole set of transitions you can use for your Flash applications. But what if you are designing solutions for clients that do not want to support Flash 8, but rather prefer Flash 7 or even Flash 6? You still need to use transitions and visual effects. This guide will focus on how to create visual effects for Flash 6 to allow you freedom in your animation.

Your presentation requires you to move from one screen to another. How do you do it elegantly? The trick lies in applying a transition. In this guide article you will learn how to create transitions with ActionScript and apply them programmatically to any point within a movie. By the end of the article you will be able to apply 18 different types of transitions.

Setting the Stage

The Transition movie requires a lot of script. That's the bad news. The good news is that most of the script is repeated (you'll see why later) which makes the scripts you create very flexible.

Figure 1 The transition effects are all controlled through ActionScript. The effect is triggered when a user presses a button.

The entire movie is controlled through the use of ActionScript. Each button on the right is a script that in turn activates the transitional effect upon an image on the left of the screen.

The transition script itself is embedded as an initialization script within the main movie. You will also be able to dynamically change the transitioning image to another image completing the transition from one image to another.

To begin working on the Transition project you must create a movie. Name it transistions.fla.

The movie has four layers. Each layer is only one frame long. All of the transitions will be programmatically created, so there is no need for lengthy animations.

The scripts layer is the top-most layer. Frame 1 of this layer will contain the script that will be the engine that runs the entire movie. The buttons layer separates all of the buttons from the graphics on the stage. This makes it much easier to control the scripts for each button later in the movie. The text and background layers are the two final layers.

To the middle of the left-hand side of the movie there is a white dot placeholder for a movie. This placeholder identifies a movie with a blank first frame. This movie is an instance of the movie place_holder.

Open the Library (CTRL+L, PC, or Command-L, Mac) and expand the Movies folder. There are six movies in this folder: img Holder, img selector, place_holder, slice, slice_holder and preset sector. These movies will be the triggers for our transitions.

Figure 2 The Movies Folder in Library contains the movies that will have scripts applied.

Initializing the Movies

ActionScript can trigger events in a movie only when it can navigate to that movie by name, so the first thing you need to do is name the movies. The first movie to be named is the white slice_holder movie. Select the movie, choose Windows > Properties, then name the movie "holder." This will be used to identify the movie with ActionScript later on.

Figure 3 The Properties panel allows you immediate access to the common features of a movie clip. Here the slice_holder movie has the name "holder" added to it.

From within the Library, right-click the slice_holder movie, then choose the Properties option. All of the properties for this movie are now available. In the Identifier text field, name the movie holder. In the Linkage options area, select the Export for ActionScript and Export in First Frame checkboxes. The properties can now be interacted effectively with ActionScript. Every instance of the slice_holder movie will now be identified with the same name.

Figure 4 The Properties panel allows you to change the identifier and other features of the slice_holder movie directly within the Library.

Locate the slice movie in the Library, right-click on it, and open its properties. Identify the movie as pic and select the Export for ActionScript and Export in First Frame checkboxes.

From the Library, double-click the img holder movie to open it into edit view. This movie controls which image is having the transition effect applied to it. There are three key frames to this movie. Each key frame has an image. The first has the image of the green leaves, the second has the water and the third has the fire image.

Select frame 1 from the Timeline. From the Properties panel, label this frame as img1. Select frame 2 and label the name of the frame as img2. Finally, label frame 3 img3.

To complete the functionality of this img holder movie, add the following ActionScript to frame 1:

gotoAndStop(_parent.type);

The function of this script allows the parent movie to correctly navigate to a specific frame. Once it reaches the frame it will stop playing the movie.

Figure 5 The images in img holder movie will be called with ActionScript later in the movie. To get the correct image, each frame with a new image must be identified together with a short script at the beginning of the movie.

When the main movie is complete, a user sees effects being applied to an image on the stage. The effect is an illusion. The image on the screen is replaced with a movie that actually does the transition effect on the screen.

From the Library, open the movie slice. The slice movie is comprised of two elements: a rectangle mask and the movie img holder. A mask will assist with the illusion. Draw a rectangle on the stage 100 pixels high and 5 pixels wide. An instance of img holder movie is dragged onto the stage. Name it img. Convert the rectangle to a mask and apply it to the img holder.

Extend the timeline to 50 frames. Make a new Key Frame at frame 50. Add a motion tween between frame 1 and 50. Select frame 50 and move the img holder movie 100 pixels to the left side of the rectangle.

Before we complete working with this movie, a small amount of script must be added. Select frame 1 and add the following script:

if (!once) {
 once=true;
 frame=_name.split("_");
 frame=frame[1];
 gotoAndStop(frame);
}

Essentially, this script allows Flash to navigate to the correct label within the img holder movie and attach it to the mask. The key code here is the _name.split method. This method breaks a string into specified parts. In this case, the part is the name that is going to be passed to it from the main movie. This prevents any confusion within the program over which image should be presented.

Scripting the Image Selection Buttons

From the Library, open the img selector movie. Add the following script:

on (release) {
 _level0.setUp(frame);
}

Here a variable called frame is being created. It is calling an action in the same level as the movie and will be triggered when a user releases their mouse.

On the main stage, drag three instances of the img selector movie over the text of Leaves, Water, and Fire along the top of the movie. These buttons will control which image will be displayed on the screen.

Select the movie over the word Leaves and add the following script:

onClipEvent (load) {
 frame="img1";
}

By leveraging the code already embedded in the button, all we need to do is call the img selector variable frame and tell it which frame to change the image to. Here the frame will be img1.

Select the movie over the word Water and add the same script. This time change the frame="img1"; to frame="img2";. Do the same for Fire and change the reference to img3.

Figure 6 The choice of image is now controlled through ActionScript.

The final step is to initialize the slice holder movie on the main stage. Initializing the movie will allow Flash to associate the transition effect with the movie.

Add the following script to the slide holder movie on the stage:

onClipEvent (enterFrame) {
 _level0.render();
}
onClipEvent (keyDown) {
 if (Key.getCode() eq "45") {
  _level0.readPre();
 }
}

Line 2 renders the correct image into the movie. The script _level0.readPre will apply the correct transitional effect. The image is now prepared to have transitions applied to it. Preview you work. Change the image on the screen by choosing either Leaves, Water, or Fire. At this time there are not transitions. All you are doing is changing the images on the stage.

Setting up the Transitions

Select Frame 1 of the scripts layer. Here you can control how the movie is presented and which image will be the first on the stage. The script is:

_quality = "BEST";
preset(_level0.pre0);
setUp("img1"); 

The first line, _quality, controls the playback quality of the movie. Here the quality is set to "BEST." The setting can also be changed to LOW, MEDIUM, or HIGH. If the audience viewing this movie is using a slow computer I recommend changing the quality to LOW. This will make the image and text appear grainy; however the animation is rendered much faster and more efficiently. You will have to weigh whether it is worth loosing image quality to have faster playback.

The second line tells Flash to the transition pre0 to the image on the stage. In this case, pre0 is not an transitional effect, it is a static movie.

Finally, the img1 identifies the default image to be displayed on the stage.

The next section of script identifies the order in which properties will be manipulated as the transitions:

function readPre () {
 var choice=new Array()
 choice.push(_level0.waveLength);
 choice.push(_level0.sangle);
 choice.push(_level0.dist);
 choice.push(_level0.drift);
 choice.push(_level0.picDrift);
 choice.push(_level0.rotate);
 choice.push(_level0.optX);
 choice.push(_level0.optY);
 choice.push(_level0.optXs);
 choice.push(_level0.optYs);
 choice.push(_level0.optR);
}

The above array identifies the parameters that can be applied to different effects. The parameters are:

These are the effects that will be applied to the final transition. The next step is to organize when each effect will be played back by Flash. The organization and placement of each effect is achieved with the following script:

function preset (choice) {
 _level0.waveLength = choice[0];
 _level0.mwaveLength.reset();
 _level0.sangle=choice[1];
 _level0.msangle.reset();
 _level0.dist=choice[2];
 _level0.mdist.reset();
 _level0.drift=choice[3];
 _level0.mdrift.reset();
 _level0.picDrift=choice[4];
 _level0.mpicDrift.reset();
 _level0.rotate=choice[5];
 _level0.mrotate.reset();
 _level0.optX=choice[6];
 _level0.moptX.reset();
 _level0.optY=choice[7];
 _level0.moptY.reset();
 _level0.optXs=choice[8];
 _level0.moptXs.reset();
 _level0.optYs=choice[9];
 _level0.moptYs.reset();
 _level0.optR=choice[10];
 _level0.moptR.reset();
}

This gives us 11 variables to modify. This will become more relevant when the effects are being created later in our script.

Up to this point it looks like we have a great list variables. The only catch is that all of the variables, such as optR and picDrift, are meaningless. What we need to do now is associate those variables with real methods and properties within Flash. This is achieved with the following script:

function setUp (type) {
 var stage=_level0.holder;
 for (i=1; i<51; i++) {
  stage.attachMovie("pic", "p_"+i, i);
  pic = stage["p_"+i];
  pic.type=type;
  pic._x = (i*2.9)-(25*2.9);
  nangle += waveLength;
  angle = sangle+nangle;
  scale = dist*Math.sin(angle);
  pic._yscale = 100-scale;
 }
}
function render () {
 var nangle;
 var stage=_level0.holder;
 stage._rotation=_level0.rotate;
 for (i=1; i<51; i++) {
  pic = stage["p_"+i];
  nangle += _level0.waveLength;
  _level0.sangle+=_level0.drift;
  var angle = _level0.sangle+nangle;
  var scale = _level0.dist*Math.sin(angle);
  pic._x = ((i*2.9)-(25*2.9))-(scale*optX);
  pic._y = scale*optY;
  pic._xscale = 100+(scale*optXS);
  pic._yscale = 100-(scale*optYS); 
  pic._rotation = (scale*optR);
if (int(_level0.picDrift) == 0) {
   myFrame=i;
  } else {
   pic.frame-=int(_level0.picDrift);
   myframe=pic.frame;
   if (myframe<1) {
    myframe=50;
   } else if (myframe > 50) {
    myframe=1;
   }
   pic.frame=myframe;
  }
  pic.gotoAndStop(myframe);
 } 
}

Here the most important event is the linking of the transitions being created to a movie on the main stage. The link is made absolute with the line stage.attachMovie("pic", "p_"+i, i). This reference links intrinsically to slice movie in the Library with the identifier pic. To make the code easier, pic is now turned into a variable in the following line and can allow us to mathematically identify what the names are in the array.

The math needed to calculate specific values opens with nangle += wavelength. Here the calculation for wavelength is being identified. The distance an image will move is calculated with scale = dist*Math.sin(angle). Here we have the value of scale equal to dist multiplied by the angle of Sin.

The true value of wavelength is identified as the value of wavelength + nangle. But what is the numerical value of wavelength? Remember the array created earlier? Well that comes in very handy with this section of script that controls the order of transitional effects themselves:

pre0=[0,0,0,0,0,0,0,0,0,0,0];
pre1=[-0.15,0,12.5,0.005,0,0,0,1,0,0,0];
pre2=[-0.05,0,90,0.001,-2,0,0.001,0,0,0,1]
pre3=[-2,0,100,0.04,0,90,0.001,0,0,1,0.01]
pre4=[-0.1,0,100,0.0006,0,-91,-0.8,-1,0.3,0.3,-0.01]
pre5=[-0.07,0,100,-0.002,0,0,0.2,1,0,1,1]
pre6=[-0.03,0,100,0.002,0,0,0,0.04,0,1,0]
pre7=[-1,0,13,0.005,0.06,-90,0,1,0,0,0]
pre8=[-1.3,0,100,0.004,0,0,1,1,1,1,1]
pre9=[-0.2,-6,100,0,-2,0,0.4,0.2,0,0,-0.2]
pre10=[-0.1,0,100,0.004,-2,0,-1,0.7,0,-0.7,1]
pre11=[-0.04,0,41,-0.005,0,0,-1,0.3,-0.2,-1,1]
pre12=[-0.05,0,100,0.002,0,0,0,0,0,0,1]
pre13=[-2.4,0,18,0.01,0,0,0,1,0,1,0]
pre14=[-3.2,0,100,0.00345,0,0,-0.85,1,0,-0.4,0]
pre15=[-0.6,0,5.6,0.03,0,0,0,0.06,0,1,0]
pre16=[-1.1,0,12.5,-0.005,0,-180,0,1,0,-1,0]
pre17=[-0.5,0,100,0.003,0,0,-0.1185,1,-1,-1,0]
pre18=[-0.3,0,100,0,1,0,-0.08,0.2795,0,0.17,0.7]

Each line will be associated with a specific button. If we take pre9 we can break down the effect that will be applied as:

The final effect will be to apply a snaking, undulating effect to the slice movie on the stage. Each of the 19 effects is linked directly to the readPre array, which in turn has each item (such as wavelength, dish and optX) mathematically calculated in the render function. The result is a highly customizable set of transitional effects.

Complete the script on frame 1 with a simple:

stop();

Adding the Interaction

The final step is to allow users to choose which effect they would like applied to the final movie. The Transition buttons on the left hand of the stage do this. Each title, including the Reset button, has an invisible button on it. The invisible button is an old trick, but a good one, of hiding code on the stage.

From the Library, open the movie "preset selector." Select the button and add the following script:

on (release) {
 _level0.preSet(_level0["pre"+num]);
}

Select the button over the word Reset. In the Actions Panel, add the following to the button:

onClipEvent (load) {
 num=0;
}

The script is telling Flash to dynamically create a value of preset as pre + the variable num. For the reset button we see that the value is 0 (num=0). Hence, Flash must look for pre0. That script added to frame 1 has pre0=[0,0,0,0,0,0,0,0,0,0,0]; which resets all of the values of the effects for the image to zero. Basically, nothing will happen.

Go back to the main movie and select the button over Marching. Add the following script:

onClipEvent (load) {
 num=4;
}

Preview the movie. Select the Marching button. The image should now animate. If you do not like the animation, click the Reset button.

Every button can be associated to a preset value. To do this, add the same script applied to the Marching button with the exception of changing the value of num.

Here are the transitions with the correct num.

How it Works

The transitions are all mathematically calculated at the opening of the movie with the ActionScript. These scripts are triggered by the buttons on the stage to affect the slice movie instance. The result is a transitional effect.

How To Improve

For this project you are using static graphics. Each of the movies in each one of the frames in the img holder movie could be a short animation themselves. You can have more than three. All you need to do is add additional frames to img holder and label each new frame.

You have probably noticed that the transitioned image is a specific size. If you want to replace the image with a larger image you will immediately notice that it is being cut short in size. This size of the movie on the screen is controlled by the rectangle mask in the slice movie. Increasing the size of the rectangle will allow for larger images to be transitioned effectively in the final movie.

Finally, the transitions can be easily pulled from this movie and applied to other movies to move users from one scene to the next.