Rolling Newspaper Effect
Posted on 07.34 by YUDIES EXPLORER
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: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})
}
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})
}
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})
}
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})
}
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!
Langganan:
Posting Komentar (Atom)
No Response to "Rolling Newspaper Effect"
Leave A Reply