Cool Flash Effect Tutorials!

Summary

In this tutorial you will learn how to resize an effect, in this case the Mask Transition Effect.

Here the final result:

Requirements

Flash 8, Flash CS3 or Flash CS4.

Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same in Flash 8 (with the AS2 version of the effect) or Flash CS4. This tutorial is a ActionScript 3 project. The Mask Transition Effect is also available as ActionScript 2 version.

Step 1 – Install the effect component

Purchase the Mask Transition Effect here. Please follow the install instructions and drag the component from the component panel into the libary of your .fla file.

Step 2 – Create layer

Create two layers on the main timeline and name them according to the screenshot below.

Step 3 – Import image

Select the first frame on the layer “img” and import an image with [press Ctrl-R] or “File” -> “Import” -> “Import on Stage…”.

Step 4 – Create image Movieclip

Select the just imported image, covert it to a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…” and name it “image”.

Step 5 – Set Movieclip instance name

Set the instance name of the Movieclip to “image”.

Step 6 – Create container Movieclip

Select the just created Movieclip, convert it to a Movieclip and name it “holder”.

Set the instance name of the container Movieclip to “holder”.

Step 7 – Add ActionScript

Go back to the main timeline, select the first frame on the layer “script” and open the Actions window with “Windows” -> “Actions” or F9.

Copy the following code inside the ActionScript window.

holder.image.width = 100;
holder.image.height = 100;

var effect = new MaskTransitionEffectAS3();
addChild(effect);	

effect.init(holder, 30, 5, 25, 25, MaskTransitionEffectAS3.ANIMATION_MODE1, MaskTransitionEffectAS3.DIRECTION_IN);

So, why do you need a container Movieclip here? You must not change the size of the Traget Movieclip (the first parameter you pass to the init function or the Movieclip you set inside the component inspector). This Movieclip always has to be scale 100% x 100%.

However you can change the size of Movieclips inside the Traget Movieclip, which of course also changes to size of the parent Movieclip leaving the x-scale and y-scale at 100%.

Thats why you change the size of the image inside the holder Movieclip before you apply the effect to the Movieclip “holder”. If you changed the size after calling the init function it would be to late since in that very moment the effect component creates itself using the current dimensions of the Traget Movieclip.

Download

Click here to download the fla of this tutorial. Note: The .fla does not includes the effect component. In order to make the fla work, you need to purchase the Mask Transition Effect here.

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