Flash Flip Letter Effect

This tutorial shows you how to create a flip letter effect. Each letter will flip 360 degrees when the user hovers it.
This tutorial uses actionscript 3 and the Flash Player 10’s 3D features.

View DemoDownload Source

1. With Flash CS4, create a new flash file (Actionscript 3.0) and save it as flipLetter.fla.

2. Rename “layer 1” to “letters”. Select the Text tool and type your static text on the stage. Set the text properties as you like.
With the text still selected, select in the top menu Modify>Break apart to break your text into separate letters.
Convert each letter to a movie clip with registration point at the center. No need to give them instance names.
Position the letters as you like.

3. Create a new “actions” layer and open the actions panel.
We’ll use the Tweenlite engine so first go to http://blog.greensock.com/tweenliteas3/ to download it.
Extract the zip file and get the gs directory. Place this directory at the same level of your flash file.

4. In order to use the TweenLite engine write the following statement:

import gs.*;

5. Next loop through all the objects in the stage (which in our case are only our letters) in order to add to each letter a MOUSE_OVER listener that will be handled by the flip function.

for (var i:int =0; i < numChildren; i++) {
 	var mc:MovieClip = getChildAt(i) as MovieClip;
	mc.addEventListener(MouseEvent.MOUSE_OVER,flip);
}

6. 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.
Use Tweenlite to create a tween on the letter’s rotationY property. To make a full rotation we remove 360 degrees. (or you can add 360 degrees, depends on which direction you’d like the letter to rotate).
When the tween has finished we re-add the MOUSE_OVER listener.

function flip(e:MouseEvent):void{
	var letter:MovieClip = e.currentTarget as MovieClip;
	letter.removeEventListener(MouseEvent.MOUSE_OVER,flip);
	TweenLite.to(letter, 1, 
				 {rotationY:letter.rotationY - 360,
				 	onComplete:function(){letter.addEventListener(MouseEvent.MOUSE_OVER,flip);
				 			}
				}
	);
}

7. Here’s the final code, test your movie to see it in action.

import gs.*;

for (var i:int =0; i < numChildren; i++) {
 	var mc:MovieClip = getChildAt(i) as MovieClip;
	mc.addEventListener(MouseEvent.MOUSE_OVER,flip);
}

function flip(e:MouseEvent):void{
	var letter:MovieClip = e.currentTarget as MovieClip;
	letter.removeEventListener(MouseEvent.MOUSE_OVER,flip);
	TweenLite.to(letter, 1, 
				 {rotationY:letter.rotationY - 360,
				 	onComplete:function(){letter.addEventListener(MouseEvent.MOUSE_OVER,flip);
				 			}
				}
	);
}

29 thoughts on “Flash Flip Letter Effect

  1. Pingback: Adobe Flash: 35+ Animated Trainings | oOrch Blog

  2. Bad

    I have a problem with line 11 (TweenLite.to(letter, 1,), it says: undefined property…
    Can you help me please?

  3. Ditch

    Ok it must be great to see… But the tuto is not really well done… You should put some picture with what we have to do and WHERE… Thx !

  4. learning

    i got no error msg but its not flipping =\
    im using flash CS4..
    and what is gs by the way?
    is it “greensock-as3”??

  5. flashfan

    i am not able to convert each letter to movieclip
    and one it was successful but all the letter were rotating at the same time i mean the whole word get filpped

  6. Alex

    Works only for me at the moment I put it on a “bottom” layer..so i mean the rest has to be on top, then it works great. Have the feeling some should be improved to make it flawless for sure.
    Thank you any way!

  7. benek

    I can’t find the “gs directory” in the zip files… Could someone explain me wher is it or what is it ?
    Thank

  8. Pingback: 35 Beautiful Animated Trainings from Adobe Flash | ExceptionHandle.com

  9. Pingback: Professional Trainings of Animations in Adobe Flash « CSS Tips

Leave a Reply

Your email address will not be published. Required fields are marked *