In our first edition of 3D Flip tutorial we implemented a simple flip along X axis. Second edition showed how to apply a fix to a small bug with Flash 3D rendering. We will now make a step further and make a very simple 3D engine that will allow us to create unlimited 3D rotations just by changing values of three variables (x,y and z).
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: INTRO
First download source files from second edition of our tutorial so you have a basic idea of what we have done so far. Currently we only have one variable that defines 3D rotations (along X axis). We will now add two more (for y and z).
STEP 2: ENGINE IMPLEMENTATION
Add following variables at the start of your code (in variables section):
var rotateX:Number = 90;
var rotateY:Number = 0;
var rotateZ:Number = 0;
Note that variables are currently set so they produce the same 3D flip as seen in previous tutorials (along X axis). Now we have to change our 3D Flip functions so they are compatible with newly added variables. We have to define starting positions for all three rotations (imageD.rotationX = -rotateX). They have to be the negative of what rotations in variables are, to produce a continuous rotation. Now we have to change TweenLite animations to function with our variables. All you have to do is set all three rotation effects to work with variables (rotationX:rotateX). RotationX is a build in function and rotateX is our variable where we set the amount of rotation. Functions should now look like this:
function flip3D(){
imageD.rotationX = -rotateX;
imageD.rotationY = -rotateY;
imageD.rotationZ = -rotateZ;
imageD.alpha = 0;
adNumber1.z = 0;
adNumber2.z = 0;
TweenLite.to(imageC, animationTime, {alpha:1,delay:imageOnStage,rotationX:rotateX, rotationY:rotateY, rotationZ:rotateZ, ease:Quint.easeIn, onComplete:flip3DSecond, overwrite:0})
TweenLite.to(imageD,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0, rotationY:0, rotationZ:0, ease:Elastic.easeOut, overwrite:0})
}
function flip3DSecond(){
imageC.rotationX = -rotateX;
imageC.rotationY = -rotateY;
imageC.rotationZ = -rotateZ;
imageC.alpha = 0;
TweenLite.to(imageD, animationTime, {alpha:1,delay:imageOnStage, rotationX:rotateX, rotationY:rotateY, rotationZ:rotateZ,ease:Quint.easeIn, onComplete:flip3D, overwrite:0})
TweenLite.to(imageC,animationTime, {alpha:1,delay:imageOnStage + animationTime, rotationX:0, rotationY:0, rotationZ:0, delay:0, ease:Elastic.easeOut,overwrite:0})
}
Our implementation of simple 3D engine is finished. Check examples below to see some different 3D animations you can make by tweaking newly added variables.
CONCLUSION
Last example resembles our newspaper rotation but it isn’t quite there yet. To achieve the effect we want we have to add depth and blur. Our fourth edition of 3D flip tutorial will show just how to do that, so stay tuned. Good luck!
[download id=”59″]
You must be logged in to post a comment.