This is the last part of our Flash 3D rotations tutorial. Please check other chapters of our tutorial to see how implementation of 3D engine is done.
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: ADDING DEPTH
Rolling newspaper animation requires implementation of depth (z axis). We have to roll our first image into the distance and when it almost disapperas it gets replaced with new image which then rolls to the front. We will add a variable called zDepth:
var zDepth:Number = 2000;
You can change value to any value but keeping it at 2000 will yield good results. We will now add zDepth to our 3DFlip functions. Please note that second image needs to be placed at 2000 depth before any animation starts. This way it waits at appropriate depth until it is triggered. Functions now look like this:
function flip3D(){
imageD.rotationX = -rotateX;
imageD.rotationY = -rotateY;
imageD.rotationZ = -rotateZ;
imageD.alpha = 0;
adNumber1.z = 0;
adNumber2.z = 0;
imageD.z = zDepth;
TweenLite.to(imageC, animationTime, {z:zDepth, alpha:1,delay:imageOnStage,rotationX:rotateX, rotationY:rotateY, rotationZ:rotateZ, ease:Linear.easeNone, onComplete:flip3DSecond, overwrite:0})
TweenLite.to(imageD,animationTime, {z:0, alpha:1,delay:imageOnStage + animationTime, rotationX:0, rotationY:0, rotationZ:0, ease:Linear.easeNone, overwrite:0})
}
function flip3DSecond(){
imageC.rotationX = -rotateX;
imageC.rotationY = -rotateY;
imageC.rotationZ = -rotateZ;
imageC.alpha = 0;
imageC.z = zDepth;
TweenLite.to(imageD, animationTime, {z:zDepth,alpha:1,delay:imageOnStage, rotationX:rotateX, rotationY:rotateY, rotationZ:rotateZ,ease:Linear.easeNone, onComplete:flip3D, overwrite:0})
TweenLite.to(imageC,animationTime, {z:0, alpha:1,delay:imageOnStage + animationTime, rotationX:0, rotationY:0, rotationZ:0, delay:0, ease:Linear.easeNone,overwrite:0})
}
When first part of our flip animation is completed we call the second one. We now set the depth of first image to 2000. Animation should now look like this:
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/wp-content/uploads/2011/08/3DFlipNewspaper1.swf” width=”570″ height=”350″ targetclass=”flashmovie”]
[/kml_flashembed]
Effect now looks a lot better but there is still something missing.
[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” /]
STEP 2: ADDING BLUR
Blur will add a final touch to our newspaper animation. It will make it look a lot more realistic. We have to set starting amount of blur for second image in first part of animation and for first image in second part of animation (just like with depth in previous step). We also have to change TweenLite to TweenMax since lite version doesn’t support blur effect. Our 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;
imageD.z = zDepth;
TweenMax.to(imageD,0, {blurFilter:{blurX:blurX, blurY:blurY, quality:2}});
TweenMax.to(imageC, animationTime, {blurFilter:{blurX:blurX, blurY:blurY, quality:2}, z:zDepth, alpha:1,delay:imageOnStage,rotationX:rotateX, rotationY:rotateY, rotationZ:rotateZ, ease:Linear.easeNone, onComplete:flip3DSecond, overwrite:0})
TweenMax.to(imageD,animationTime, {blurFilter:{blurX:0, blurY:0, quality:2}, z:0, alpha:1,delay:imageOnStage + animationTime, rotationX:0, rotationY:0, rotationZ:0, ease:Linear.easeNone, overwrite:0})
}
function flip3DSecond(){
imageC.rotationX = -rotateX;
imageC.rotationY = -rotateY;
imageC.rotationZ = -rotateZ;
imageC.alpha = 0;
imageC.z = zDepth;
TweenMax.to(imageC,0, {blurFilter:{blurX:blurX, blurY:blurY, quality:2}});
TweenMax.to(imageD, animationTime, {blurFilter:{blurX:blurX, blurY:blurY, quality:2}, z:zDepth,alpha:1,delay:imageOnStage, rotationX:rotateX, rotationY:rotateY, rotationZ:rotateZ,ease:Linear.easeNone, onComplete:flip3D, overwrite:0})
TweenMax.to(imageC,animationTime, {blurFilter:{blurX:0, blurY:0, quality:2}, z:0, alpha:1,delay:imageOnStage + animationTime, rotationX:0, rotationY:0, rotationZ:0, delay:0, ease:Linear.easeNone,overwrite:0})
}
Our animation is now complete. You can see final result below:
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://premiumcoding.com/wp-content/uploads/2011/08/3DFlipNewspaper2.swf” width=”570″ height=”350″ targetclass=”flashmovie”]
[/kml_flashembed]
CONCLUSION:
This concludes our 3D rotations series. We have covered everything from basics of Flash’s native 3D animations to 3D blur fix. We also developed a very simple 3D engine. As a final touch we added depth and blur to smooth animations a bit. Hopefully you found our series educational and entertaining and will soon develop some wacky 3D animations. Don’t forget to showcase them to us and stay tuned for more tutorials about Flash. Good luck!
You must be logged in to post a comment.