Flex | Flash | Air | AS3
Flash Flip Letter Effect
September 29th, 2009 in FlashThis 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);
}
}
);
}
Sep 30th, 2009
Great effect, very useful
Thanks very much
Sep 30th, 2009
Thanksss very much
Oct 1st, 2009
Awesome effect
Thanks so much for posting & sharing it
Keep up good work
God bless you
Oct 2nd, 2009
it’s great
Oct 4th, 2009
Really cool
Thank you for all the tuts
Oct 5th, 2009
[...] Flash Flip Letter Effect [...]
Oct 9th, 2009
Thank you for all tutorial which is here .
Oct 26th, 2009
is the great effect
Nov 6th, 2009
please will lay out this lesson with pictures!
Nov 27th, 2009
I have a problem with line 11 (TweenLite.to(letter, 1,), it says: undefined property…
Can you help me please?
Jan 3rd, 2010
Nice tutorial. But does rotationX and rotationY is supported in flash cs3?
Jan 23rd, 2010
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 !
Jan 25th, 2010
Does it work with CS3 ?!
In my case, it’s not working but there isn’t errors…
Feb 5th, 2010
ok guys, how to make the letters to link sth? PLZ help!
Feb 26th, 2010
Nice tutorial. Great effect.
Thanks very much
Mar 8th, 2010
i got no error msg but its not flipping =\
im using flash CS4..
and what is gs by the way?
is it “greensock-as3″??
Mar 10th, 2010
if u could pleas upload screenshots would be more easier to understand
Mar 10th, 2010
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