Flash AS3 Tutorial: 3D rotations part 3
Posted on 07.43 by YUDIES EXPLORER
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):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})
}
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})
}
[amazon_carousel widget_type="SearchAndAdd" width=600" height="200" title="" market_place="US" shuffle_products="True" show_border="False" keywords="flash tutorial, learn flash" browse_node="" search_index="Books" /]
Langganan:
Posting Komentar (Atom)
No Response to "Flash AS3 Tutorial: 3D rotations part 3"
Leave A Reply