Flash Flip Letter Effect RiaCodes

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.

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”

Keny September 30, 2009 at 1:15 am

Great effect, very useful
Thanks very much

Muzik Dinle September 30, 2009 at 11:48 pm

Thanksss very much

tirath October 1, 2009 at 12:48 pm

Awesome effect
Thanks so much for posting & sharing it
Keep up good work
God bless you

thata October 2, 2009 at 5:46 am

it’s great

Kirsten October 4, 2009 at 4:24 pm

Really cool
Thank you for all the tuts

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

Raju Singh October 9, 2009 at 9:33 pm

Thank you for all tutorial which is here .

parul October 26, 2009 at 12:45 pm

is the great effect

Tyler November 6, 2009 at 8:57 pm

please will lay out this lesson with pictures!

Bad November 27, 2009 at 11:19 am

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

ranacseruet January 3, 2010 at 8:29 am

Nice tutorial. But does rotationX and rotationY is supported in flash cs3?

Ditch January 23, 2010 at 2:07 pm

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 !

yoc January 25, 2010 at 2:36 pm

Does it work with CS3 ?!
In my case, it’s not working but there isn’t errors…

Projektowanie February 5, 2010 at 1:04 am

ok guys, how to make the letters to link sth? PLZ help!

wintes February 26, 2010 at 10:34 pm

Nice tutorial. Great effect.
Thanks very much

learning March 8, 2010 at 2:29 pm

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

flashfan March 10, 2010 at 6:31 am

if u could pleas upload screenshots would be more easier to understand

flashfan March 10, 2010 at 6:45 am

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

Kim Tetzlaff April 8, 2010 at 9:44 am

Great Tutorial

Fefe July 1, 2010 at 3:45 pm

please include all the source in your zip ..it’s boring to check files. !

Jack August 1, 2010 at 12:29 pm

Yeah, source files would come in handy, anyway the tut is on high level. Thanks bud.

Jack August 1, 2010 at 12:30 pm

I’m a noob sometimes, source files, I found them!

Alex October 16, 2010 at 4:08 am

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!