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:
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
Step 2 – Import image
Import an image [press Ctrl-R] or “File” -> “Import” -> “Import on Stage…”.
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”.
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).
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.
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.
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.
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.
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.
Play around with the settings. Find the one, which fits your demands.
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.