Summary

In this tutorial you will learn how to create a effect, where parts of the Movieclip are fading in. Different parts of the Movieclip will be masked and appear differently. Also you can control the size of those parts and the speed of the fading.

See the effect below:


Requirements

Flash 8, Flash CS3 or Flash CS4.
2 images (in this case 550×400, images available in the tutorial zip file)

Note: The screenshot in this tutorial is made in Flash CS3. It works exactly the same in Flash 8 and Flash CS4. This tutorial is ActionScript 2 (although no ActionScript is required).

Step 1 – Install the effect component

Download the Mask Transition Effect here. Please follow the installation instructions and drag the component from the component panel into the library of your .fla file.

Drag component into library

Step 2 – Import image

Import an image [press Ctrl-R] or “File” -> “Import” -> “Import on Stage…”.

Import image

Select this image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image”.

Convert image to Movieclip

Name the Movieclip

Step 3 – Place Image Movieclip and effect component on stage

Rename the layer where the image Movieclip is placed to “image”. Create a new layer, name it “effect” and select the first frame (the naming of the layers is only to keep things in order, you can leave the layer names default or choose other names).

Rename the existing layer

Create and name new layer

Give the Movieclip the instance name “my_image” (You can choose a different name if you want. Make sure that the instance name is unique). Without an instance name, the component is unable to detect the Movieclip.

Set instance name of the Movieclip

Select the first frame of the layer “effect”. Drag the Mask Transition Effect from your library onto the image Movieclip on stage. The component will snap automatically to the upper left corner of the image Movieclip.

Drag component onto Movieclip

Step 4 – Adjust setting

Click the component and open the component inspector panel [press SHIFT-F7] or “Window” -> “Component Inspector”. In the “Target Movieclip” select list “my_image” should be selected. All Movieclips with instance names in this frame are listed in the “Target Movieclip” select list. Since you have only one Movieclip, the component assumes that you want to apply the effect on the Movieclip “my_image”. For now leave the setting like this. Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie” and you’ll see that the image appears.

Settings inside the component inspector panel

Step 5 – Add background image

If you want to have a transition from one image to the another, you need to put an image in the background. Repeat Step 2 to create another image Movieclip, create a new layer, name it “background” and put the just created Movieclip there. Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie” and you will first see the background image and then the image Movieclip is fading in.

Add background image

Step 6 – Setting variants

The parameter are mostly self describing, but have a closer look at the “Animation Mode” select list. See all animation modes here. Use the settings of the following screenshot and test the movie.

Result

Play around with the settings. Find the one, which fits your demands.

Download

Click here to download the .fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.

You can also download the Mask Transition Effect here.

Here you can find a video tutorial of how to implement a different effect.