This is first part of our Flash 3D Flip tutorial. In this part we will make a simple 3D flip accross X axis. Next part will involve creation of a simple but convenient 3D engine that will be able to rotate your objects along all axis. You will simply enter rotation values via XML file. Similar 3D engine is used in our WordPress 3D Banner Plugin.
TABLE OF CONTENTS
- Flash AS3 Tutorial: 3D Flip effect Part I
- Flash AS3 Tutorial: 3D Blur Fix
- Flash AS3 Tutorial: Unlimited 3D rotations
- Flash AS3 Tutorial: Rolling Newspaper effect
STEP 1: PREPARING ASSETS IN FLASH
Open Flash and create a new document in AS3. Go to File/Import/Import to stage and import two images. They should be of the same size to achieve a smooth effect. Convert them both to MovieClips (right click and then Convert to Symbol). Name first one adNumber1 and second one adNumber1. Be sure to name instances of movie clips also. You can name them with your names also but these are the names used in source files.
Leave both images on the stage as they are, no positioning is needed since we will do that with actionscript.
STEP 3: POSITIONING
It is time to put our 3D flip effect to life. First you have to import Tweenlite classes that will take care of our animation.
import com.greensock.*;
import com.greensock.easing.*;
When you import images, rotation point is set at 0 (both x and y coordinates). That means our rotation wouldn’t be around the center like we would like but around left border of the image. To move rotation point to the center we will create new sprite objects and add images into them. Apply the following code:
var imageC:Sprite = new Sprite();//containers for rotation X and Y
var imageD:Sprite = new Sprite();//containers for rotation X and Y
addChild(imageC);
addChild(imageD);
imageC.addChild(adNumber1);
imageD.addChild(adNumber2);
We have defined two sprite objects, add them to stage and then inserted both images into them. Now we have to move our images along x and y axis for half of their width and height to set the rotation point to the center of the sprite:
adNumber1.x = – adNumber1.width/2;
adNumber1.y = – adNumber1.height/2;
adNumber2.x = – adNumber2.width/2;
adNumber2.y = – adNumber2.height/2;
Set inital rotation for both images to 0:
imageC.rotationX = 0;
imageD.rotationX = 0;
To set the position of your images on the stage (the exact position that you actually see) you have to apply x and y to sprite objects (not images):
imageC.x = stage.stageWidth – imageC.width;
imageC.y = stage.stageHeight – imageC.height/2
imageD.x = stage.stageWidth – imageC.width;
imageD.y = stage.stageHeight – imageC.height/2;
Please note that this can be anything you like, in our example we set them to the center of the stage. Both sprites have to be set at the same position.
STEP 4: APPLYING THE 3D EFFECT
We are finally at the fun part. We will implement two functions that will take care of our 3D effect.
We will first define two more variables that will take care of animation time and time each image is in still position (time that image is not moving):
var animationTime:Number = 2;
var imageOnStage:Number = 3;
We will now set initial position for second image. It has to be set at 90 or -90 degrees and opacity set to 0. First function will rotate first image for 90 degrees (until it is not visible anymore) and then set it’s opacity value to 0. After first part of rotation is completed second one begins. Animation of the second image rotates it to 0 degrees (note that starting position of second one was set to -90). First function has now done it’s job. Second function now sets initial position of first image to -90 degrees and sets opacity to 0. Tweenlite animations now do exactly the same job as in first function (only images are now in different order). After first part of tween is completed we call first function again and so on. Functions will keep calling each other and our 3D flip will repeat infinitely.
function flip3D(){
imageD.rotationX = -90;
imageD.alpha = 0;
TweenLite.to(imageC, animationTime, {alpha:1,delay:imageOnStage,rotationX:90,ease:Quint.easeIn, onComplete:flip3DSecond, overwrite:0})
TweenLite.to(imageD,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0, ease:Elastic.easeOut, overwrite:0})
}
function flip3DSecond(){
imageC.alpha = 0;
imageC.rotationX = -90;
TweenLite.to(imageD, animationTime, {alpha:1,delay:imageOnStage, rotationX:90,ease:Quint.easeIn, onComplete:flip3D, overwrite:0})
TweenLite.to(imageC,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0,delay:0, ease:Elastic.easeOut,overwrite:0})
}
CONCLUSION
Our 3D flip effect is now completed but we’re far from done. If you look carefully you will notice that images are a bit blurry. That happens because of the way Flash renders 3D. In second part of our tutorial I will show you how to solve this issue. Third part of the tutorial will implement a simple 3D engine that will rotate images along all three axis (x,y,z). So stay tuned for more 3D effects! If 3D rotation is not working check if you have Flash player version 10 set as export player. Go to File/Publish Settings and select tag named Flash. Set player to version 10 if it is currently set to 9.
[download id=”51″]
You must be logged in to post a comment.