1. Code
  2. Effects

Create an iPhone-like Flip Effect in Flash Using ActionScript 3.0


In this tutorial, we'll recreate the Flip Effect used in the iPhone's UI using Flash CS4 and ActionScript 3.0.

Final Result Preview

Let's take a look at the final result we will be working towards (click on the 'i' button):

Step 1 - Brief Overview

Here's basically what we're going to do. We'll need two Display Objects to flip, one in front that will be on the stage and visible at the beginning, and one that we are going to reveal when the effect is finished; this Object will be in the Library. In this example I'm using MovieClips, but you can use any of the Display Objects (Button, Component, Bitmap, Sprite, Shape, etc.).

We'll create an ActionsScript 3 Class for the effect, then some code in the .fla to customize the effect as we want.

Step 2

Create a new ActionScript 3.0 document (File > New...). It may be necessary to use the Flash CS4 version; we're going to export for Flash Player 10 due to the rotationY property being unavailable in older versions. There are a few tricks to get Flash CS3 to export Player 10 contents, you can search the web about doing so if you don't have CS4.


Step 3

Set the Stage size to 320 x 480px (that's the iPhone resolution but you can use any size you want), then set a background color. I'm using #111111.


Step 4

Rename the first layer to UI, then create another one and name it Code. Block the Code layer to avoid placing unwanted objects on it.


Step 5

Start creating your First View. This is the view that will be seen by default, you can use and draw anything you want.


Step 6

Convert it to a MovieClip (F8) and set its instance name to firstView.


Step 7

Create the Second view. This is the view that will be visible when the effect is finished.


Step 8

Convert it to a MovieClip, name it SecondView and check the Export for ActionScript checkbox (remember that this view won't be on stage, we'll call it from the Actions Panel).


Step 9

Now we have to create an Object which activates the effect; a Button will do the job. Create a button, set its position and name it infoButton. This button will be in the First View. In my example i've created the button inside the FirstView MovieClip. You can put it wherever you want, just remember where it is so you don't get confused in the code.


Step 10

In the Second View, create another button and name it doneButton. This button will flip the view back.


Step 11

Save your work and let's get into the code!

I'm assuming you already have a basic understanding of ActionScript 3.0. If you have a keyword specific doubt please refer to the Flash Help.

Create a new ActionScript file (File > New...).

Step 12 - Importing Required Classes

Now that you have your AS File ready, start writing:

The first three classes handle all the animation we will be using on the effect. In this case, I'm using a Strong easing to get a more iPhone-like flip, but you can modify this to get a different effect.

The other three classes handle the display elements, the Timer object that we'll use to check the progress of the animation and the last one handles any events that we may use.

Step 13 - Extending the Class

Extending the Sprite class will make our class inherit all of the methods, properties and functions the Sprite has. In this case we use it to get access to the addChild() method.

Step 14 - Declaring Variables

Declare variables to use outside the main function (flip), they get their values from the 'constructor function' and have self-explanatory names.

Step 15 - The Constructor Function

The constructor function represents the class containing the template from which new object instances are created. This is the function we need to use to call the class.

Step 16 - The Animate Function

This function is in charge of animating the First View. It reduces the size of the First View and checks the side parameter to start the animation.

Step 17 - Checking For The Right Position

This function will check the rotationY property to control the animation of the Second View.

Step 18 - Animating the Second View

This function animates the Second View. It's almost the same as the first animation function.

Step 19

Save your ActionScript file as ''.


Step 20 - Using the Class

In your Flash file, open the Actions Panel and write:

Step 21

Save your work and check that everything is all right. Take a look at the instance names, test your code, search for errors, or maybe even alter the graphics.


Test your movie to see this cool effect in action!

Make sure that everything works as you expected; if not get back to the code or the .fla to take a look. If you can't find the error, you can Debug your movie by pressing Shift + Command + Return, or going to Debug > Debug Movie.

Remember: you have a lot of options to make the effect just like you want. Play with the parameters, the Display Objects and if there's something you think is missing, you can always edit the class!

I hope you liked this tutorial, thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.