Results 1 to 6 of 6

Thread: How to create a flip letter effect in Adobe Flash.

  1. #1
    Join Date
    May 2009

    How to create a flip letter effect in Adobe Flash.

    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 ?

  2. #2
    Join Date
    Apr 2008

    Make your letters Ready.

    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.

  3. #3
    Join Date
    May 2008

    Create a new “actions” layer.

    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.*;

  4. #4
    Join Date
    Jan 2008

    Add MOUSE_OVER listener.

    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);

  5. #5
    Join Date
    May 2008

    Create tween using Tweenlite.

    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., 1,
    05. {rotationY:letter.rotationY - 360,
    06. onComplete:function() {letter.addEventListener(MouseEvent.MOUSE_OVER,flip);
    07. }
    08. }
    09. );

  6. #6
    Join Date
    May 2008

    Final code for flipping the letters.

    Following is the final code to flip your letters.

    01. import gs.*;
    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. }
    08. function flip(e:MouseEvent):void{
    09. var letter:MovieClip = e.currentTarget as MovieClip;
    10. letter.removeEventListener(MouseEvent.MOUSE_OVER,flip);
    11., 1,
    12. {rotationY:letter.rotationY - 360,
    13. onComplete:function(){letter.addEventListener(MouseEvent.MOUSE_OVER,flip);
    14. }
    15. }
    16. );
    17. }

Similar Threads

  1. Is it possible to create a page flip book from PDF files.
    By Ardiana in forum Windows Software
    Replies: 6
    Last Post: 27-12-2011, 01:19 PM
  2. html program to create image flip
    By Jalabala in forum Software Development
    Replies: 3
    Last Post: 19-11-2009, 12:38 PM
  3. How to create a controllable slideshow with adobe flash cs3
    By Rebella in forum Software Development
    Replies: 2
    Last Post: 16-05-2009, 08:48 PM
  4. Create a desktop shortcut for 3D Aero Flip
    By Baker in forum Customize Desktop
    Replies: 3
    Last Post: 28-03-2009, 10:28 AM
  5. Replies: 0
    Last Post: 10-10-2008, 01:17 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts