Cool Flash Effect Tutorials!

Summary

In this tutorial you will learn how to create a cube transition effect on mouse rollover.

Here the final result:

Requirements

Flash CS3 or Flash CS4.

Note: The screenshot in this tutorial is made in Flash CS3. It works exactly the same in Flash CS4.

Step 1 – Install the effect component

Purchase the Cube 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 a new layer

To keep things tidy you should create a new layer on the main timeline and give it a name. Do this as shown on the screenshot below.

Step 3 – Create background

Now you create a background with a gradient. Although this is not necessary to make the effect work it shows that the effect also works with transparent content (more on that later).

Select the first frame in the “bg” layer and draw a shape with the rectangle tool on the canvas. Select the rectangle and adjust the colour settings to have a nice gradient (you can also use any other colour).

Step 4 – Create button

The cube effect should react dynamically to the users mouse state (rollover / rollout). It is best practice NOT to add the event listener to the effect itself and instead use a “blank” button.

Click the first frame in the layer “btn” and draw a rectangle with the size of the canvas (colour does not mater since the button won’t be visible). Select the rectangle and convert it to a Button with [press F8] or right click on the MovieClip -> “Convert to Symbol…”.

Set the name of the button to “btn” and make sure that the type is “Button”.

Double-click the button. Now drag the first keyframe “Up” to the last frame “Hit”. This makes sure, that the button will be interactive but not visible.

Get back to the main timeline and set the instance name of the button to “btn”.

Step 5 – Create start Movieclip

The effect needs the have two Movieclip where the visual informations are taken from. You’ll now create the Movieclip the transition will start with.

Click on the first frame on the layer “img1″. Import an image with the size of the canvas by pressing [press Ctrl-R] or “File” -> “Import” -> “Import on Stage…”.

Now convert this image to a Movieclip and name it “img1″.

Set the instance name of the just created Movieclip to “img1″.

Step 6 – Create End Movieclip

The End Movieclip will contain text instead of an image. The achieve this you will need a slightly different approach.

Select the first frame of the layer “img2″ (ok, bad naming, feel free to correct that ) and draw a rectangle with the size of the canvas. You want to make sure that the End Movieclip has the same dimensions as the Start Movieclip. Thats why you first draw an invisible shape with the same size as the Start Movieclip.

Select the shape and set the alpha value to 0 (the shape is still there but invisible).

Convert the shape to a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…” and name it “img2″.

Double-click the just created Movieclip, create a new empty layer and put some text on that newly created layer.

Head back to the main timeline and set the instance name of the Movieclip to “img2″.

Step 7 – Add rollover ActionScript

Select the layer “script” and open the “Actions” window with “Windows” -> “Actions” or [press F9].

If you simply want to have a transition on rollover (and no back-transition on rollout) copy the following lines into the code window.

btn.addEventListener(MouseEvent.ROLL_OVER, _onOver);

function _onOver(e:MouseEvent){
 var myFilter:CubeTransitionEffectAS3 = new CubeTransitionEffectAS3();
 myFilter.mouseEnabled = false;
 myFilter.mouseChildren = false;
 addChild(myFilter);

 myFilter.init(img1, img2, 75, "l->r", 2, "easeInOutCubic", false);
}

In the first line you add the rollover event listener to the button. In the function “_onOver” (line 3) you first create an instance of the CubeTransitionEffectAS3 before you disable the mouse interactivity of the component (line 4 and 5). Remember, the button you created earlier is taking care of the mouse effects and you don’t want the effect to interfere on that.

In line 9 finally you initialize the effect (documentation of the parameter here). The important part are the first two parameter. You define that the transition starts with “img1″ and ends with “img2″.

Export your fla file. As you see, the effect component works perfectly with the transparent background of “img2″.

Step 8 – More complex ActionScript

OK, with the previous code the rollover works just fine. But what if you also want to have a rollout function that reverses the transition from “img2″ to “img1″? To achieve that you need a more complex code. Delete the script and insert the following:

btn.addEventListener(MouseEvent.ROLL_OVER, _onOver);
btn.addEventListener(MouseEvent.ROLL_OUT, _onOut);

var running = false;
var goIn = false;
var goOut = false;

function _onOver(e:MouseEvent){
 if(!running){
 _createAnimation("in");
 running = true;
 }else{
 goIn = false;
 goOut = true;
 }
}

function _onOut(e:MouseEvent){
 if(!running){
 _createAnimation("out");
 running = true;
 }else{
 goIn = true;
 goOut = false;
 }
}

function _inAnimationDone(e:Event){
 e.target.removeFilter();
 img1.visible = false;

 if(goIn){
 _createAnimation("out");
 }else{
 running = false;
 goOut = false;
 }
}

function _outAnimationDone(e:Event){
 e.target.removeFilter();
 img2.visible = false;

 if(goOut){
 _createAnimation("in");
 }else{
 running = false;
 goIn = false;
 }
}

function _createAnimation(dir:String){
 var myFilter:CubeTransitionEffectAS3 = new CubeTransitionEffectAS3();
 myFilter.mouseEnabled = false;
 myFilter.mouseChildren = false;
 addChild(myFilter);

 if(dir == "in"){
 myFilter.init(img1, img2, 24, "l->r", 2, "easeInOutCubic", false);
 myFilter.addEventListener(CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
 }else if(dir == "out"){
 myFilter.init(img2, img1, 24, "r->l", 2, "easeInOutCubic", false);
 myFilter.addEventListener(CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
 }
}

It’s important to know, that you can NOT reverse the direction of the transition during the effect is running. Instead you can “remember” the action of the user, wait until the effect is done and apply the revers transition.

The variables “goIn” and “goOut” (line 5 and 6) are used for that purpose. You set them when the functions “_onOver” and “_onOut” (line 8 and 18) are executed. But only if the var running is true, if it’s false (line 9 and 19), you start the transition right away (line 10 and 20).

The function “_createAnimation” (line 52) is your helper function the start the animation depending of the direction “dir” you passed as parameter.

Notice that after calling the “removeFilter” method (line 29 and 41) both the Start Movieclip and the End Movieclip are set to visible (out of the effect). Thats why you set the Movieclip visibility – the transition started with – to false (line 30 and 42).

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 Cube Transition Effect here.

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