How to create a flip letter effect in Adobe Flash.

[Brooks]

Hello, I have recently installed Adobe Flash Player in my computer. I am learning some basic steps to make flash files. I have many things to learn but for now i just want to know that how to create a flip letter effect in Adobe Flash. Can anybody help me with this ?

[Eric B]

First of all you have to decide for the letter that you want to apply as flip action. Now create a new flash file by using whatever software you use for doing it and save it as flipLetter.fla. Then rename “layer 1″ to “letters” and select the text tool to type your static text. Keep your text selected and go to menu and select Break apart to break up your text into separate letters. Now convert each letter in to movie with the help of registration point at the center. It does not matter if you do not give instance names. Give a proper position to your letters.

[Macarenas]

After you have created your letters then create a new action layer. After you have created the layer, open the action panel. You can use Tweenlite engine which is easily available on world wide web. I suggest you to download the Tweenlite engine to go further. gs directory is useful to go further. After getting to it write import command for gs directory.

import gs.*;

[Sam.D]

Next step would be to add MOUSE_OVER listener to the code. Next loop through all the objects in the stage in order to add to each letter a MOUSE_OVER listener that will be handled by the flip function.
CODE :
1.for (var i:int =0; i < numChildren; i++) {
2. var mc:MovieClip = getChildAt(i) as MovieClip;
3. mc.addEventListener(MouseEvent.MOUSE_OVER,flip);
4.}

[Raine]

In the flip function, we declare a local variable named “letter” typed as MovieClip to store which letter has processed the event.
Then we remove the MOUSE_OVER listener that we’ll re-add when the letter has finished flipping.
To make your letters rotating you have to set the rotationY property of letters. You have to use Tweenlite to create a tween. Remove 360 degrees to make a full rotation. After you finished with tween then add MOUSE_OVER listener again.
Code for adding it.
01.function flip(e:MouseEvent):void{
02. var letter:MovieClip = e.currentTarget as MovieClip;
03. letter.removeEventListener(MouseEvent.MOUSE_OVER,flip);
04. TweenLite.to(letter, 1,
05. {rotationY:letter.rotationY - 360,
06. onComplete:function() {letter.addEventListener(MouseEvent.MOUSE_OVER,flip);
07. }
08. }
09. );
10.}

[Glenny]

Following is the final code to flip your letters.

01. import gs.*;
02.
03. for (var i:int =0; i < numChildren; i++) {
04. var mc:MovieClip = getChildAt(i) as MovieClip;
05. mc.addEventListener(MouseEvent.MOUSE_OVER,flip);
06. }
07.
08. function flip(e:MouseEvent):void{
09. var letter:MovieClip = e.currentTarget as MovieClip;
10. letter.removeEventListener(MouseEvent.MOUSE_OVER,flip);
11. TweenLite.to(letter, 1,
12. {rotationY:letter.rotationY - 360,
13. onComplete:function(){letter.addEventListener(MouseEvent.MOUSE_OVER,flip);
14. }
15. }
16. );
17. }