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:
package Classes
{
/* Import required classes for animation */
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
/* Import required classes */
import flash.display.*;
import flash.utils.Timer;
import flash.events.*;
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
//We need to extend the class so we can use the addChild() method.
public class Flip extends Sprite
{
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
private var firstView:DisplayObject; private var secondView:DisplayObject; private var initFromSide:String; private var duration:int; private var flipTween:Tween; private var addSecondView:Boolean; //This is used when the Second View IS already on stage and not in the Library, just in case. private var added:Boolean = false; private var timer:Timer = new Timer(1);
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.
/* Flip starter function, with some parameters so you can customize your Flip like you want, remember these are the same as the variables */
public function Flip(frontObject:DisplayObject, backObject:DisplayObject, timeInSeconds:int, flipFromSide:String, secondViewIsInLibrary:Boolean):void
{
firstView = frontObject;
secondView = backObject;
duration = timeInSeconds;
initFromSide = flipFromSide;
addSecondView = secondViewIsInLibrary;
animateFirstView(); //This function animates the first part of the flip.
timer.addEventListener(TimerEvent.TIMER, checkFlip); //We check if it's time to animate the Second View
}
Step 16 - The Animate Function
private function animateFirstView():void
{
flipTween = new Tween(firstView,"scaleX",Strong.easeIn,1,0.5,duration/2,true);//This lines are in charge of the scale animation,
flipTween = new Tween(firstView,"scaleY",Strong.easeIn,1,0.5,duration/2,true);//They reduces the view to the half of its size
if (initFromSide == "left") //If the animation starts from left, we animate from the left!
{
flipTween = new Tween(firstView,"rotationY",Strong.easeIn,0,90,duration / 2,true);//This is a key line, it modifies the rotationY property to make the flip
timer.start();// We start the timer to check when we can change the MovieClips
}
else if (initFromSide == "right")
{
flipTween = new Tween(firstView,"rotationY",Strong.easeIn,0,-90,duration / 2,true);
timer.start();
}
}
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.
private function checkFlip(e:TimerEvent):void
{
if (initFromSide == "left" && firstView.rotationY >= 90)//If the animation was started from left and the First View is ready to switch
{
timer.stop(); //We stop checking when to switch views
firstView.visible = false; //Hides the First View
if (addSecondView && ! added)//If the Second View needs to be added from Library and has not been added
{
secondView.x = firstView.x; //Sets Second View position
secondView.y = firstView.y;
addChild(secondView);//Add Second View
added = true;//Set added to true to avoid adding a lot of Second Views
}
else
{
/* If Second View is in stage */
secondView.x = firstView.x;
secondView.y = firstView.y;
}
animateSecondView();//Animates Second View, the same way the first one is animated, hides the Second View and unhides the First View when done
}
else if (initFromSide == "right" && firstView.rotationY <= -90)
{
timer.stop();
firstView.visible = false;
if (addSecondView && ! added)
{
secondView.x = firstView.x;
secondView.y = firstView.y;
addChild(secondView);
added = true;
}
else
{
/* If Second View is in stage */
secondView.x = firstView.x;
secondView.y = firstView.y;
}
animateSecondView();
}
}
Step 18 - Animating the Second View
This function animates the Second View. It's almost the same as the first animation function.
private function animateSecondView():void
{
flipTween = new Tween(secondView,"scaleX",Strong.easeOut,0.5,1,duration/2,true);
flipTween = new Tween(secondView,"scaleY",Strong.easeOut,0.5,1,duration/2,true);
if (initFromSide == "left")
{
flipTween = new Tween(secondView,"rotationY",Strong.easeOut,-90,0,duration / 2,true);
firstView.visible = true;
}
else if (initFromSide == "right")
{
flipTween = new Tween(secondView,"rotationY",Strong.easeOut,90,0,duration / 2,true);
firstView.visible = true;
}
}
}
}
Step 19
Save your ActionScript file as 'Flip.as'.
Step 20 - Using the Class
In your Flash file, open the Actions Panel and write:
import Classes.Flip; //Imports the class, you have to change 'Classes' with your own classes folder.
var flipped:Boolean = false; //We use this variable to know if the First View was already flipped.
var secondView:SecondView = new SecondView(); //Creates a SecondView Object, the one in the Library
var flip:Flip; //This is an instance of our Flip class
function callFlip(e:MouseEvent):void
{
if (! flipped) //If the FirstView isn't already flipped
{
firstView.infoButton.visible = false; //Hides the button so the user can't repeat the effect when its flipping.
flip = new Flip(firstView, secondView, 2, "left", true); //This is the main line, it calls the class indicating wich MovieClips flip, the time the effect will take, wich side to start from, and if the second MovieClip is in the Library.
addChild(flip); //We have to add the class to get the addChild() method to work, this is a very common problem when using addChild() inside a class, now you know! ;)
flipped = true; //Set flipped to true to know that the First View was already animated
secondView.doneButton.visible = true; //Unhide the buttons so we can use them again
secondView.buttonBar.visible = true; //This is just the upper bar in the Second View
}
else if (flipped) //If flipped is true it's time to flip the secondView, you can set new parameters to get a totally diferent animation!
{
secondView.doneButton.visible = false;
flip = new Flip(secondView, firstView, 2, "right", true);
addChild(flip);
flipped = false;
firstView.infoButton.visible = true;
secondView.buttonBar.visible = false;
}
}
firstView.infoButton.addEventListener(MouseEvent.MOUSE_DOWN, callFlip); //Adds the listeners to the buttons
secondView.doneButton.addEventListener(MouseEvent.MOUSE_DOWN, callFlip);
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.
Conclusion
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!
