Flex | Flash | Air | AS3
3D rotation with Flash CS4
August 12th, 2009 in FlashLearn how to create a 3D rotation of an image by using the new rotation properties added in flash CS4 and actionscript 3. This example requires the Flash Player 10.
The image used in this lesson is taken from http://interfacelift.com/wallpaper_beta/details/1988/tarantula_tree.html
1. Create a new flash file (Actionscript 3.0) and save it as flip.fla.
2. Rename ‘layer 1′ to ‘picture’. On this layer, import an image to the stage. Convert it to a movie clip with its registration point at the center. Give the movie clip an instance name of ‘picture_mc’.
3. Create a new layer. Create two buttons with respective instance names of ‘right_btn’ and ‘left_btn’.
4. Create a layer ‘actions’ and with its first frame selected open the actions panel to add code.
5. We will use the Tweenlite engine so first go to http://blog.greensock.com/tweenliteas3/ to download the Tweenlite engine.
Extract the zip file and get the gs directory. Place this directory at the same level of your flip.fla file.
6. In order to use TweenLite we need to import it. Write the following statement:
import gs.*;
7. For each button add a click event listener :
right_btn.addEventListener(MouseEvent.CLICK,rotateRight); left_btn.addEventListener(MouseEvent.CLICK,rotateLeft);
8. Flash CS4 has introduced new 3D rotation properties with rotationX, rotationY and rotationZ. In this example we will use the rotationY property to make the image rotate along its Y axis.
To rotate the image to the right, we will turn the image anticlockwise so we will add a negative value of -180.
To prevent the user from clicking again on one of the rotate button while the rotation is made, first we remove the click event listeners to both buttons.
Next we use the Tweenlite engine to create a tween on the picture_mc’s rotationY property. When the tween has finished we re-add the click event listeners.
function rotateRight(e:Event):void{
right_btn.removeEventListener(MouseEvent.CLICK,rotateRight);
left_btn.removeEventListener(MouseEvent.CLICK,rotateLeft);
TweenLite.to(picture_mc, 1, {rotationY:picture_mc.rotationY - 180,
onComplete:function(){right_btn.addEventListener(MouseEvent.CLICK,rotateRight);
left_btn.addEventListener(MouseEvent.CLICK,rotateLeft);}
}
);
}
9. Do the same thing for the rotateLeft function except that now we add a positive value to the rotationY property to turn the image clockwise :
function rotateLeft(e:Event):void{
left_btn.removeEventListener(MouseEvent.CLICK,rotateLeft);
right_btn.removeEventListener(MouseEvent.CLICK,rotateRight);
TweenLite.to(picture_mc, 1, {rotationY:picture_mc.rotationY + 180,
onComplete:function(){left_btn.addEventListener(MouseEvent.CLICK,rotateLeft);
right_btn.addEventListener(MouseEvent.CLICK,rotateRight)
}
}
);
}
10. Here’s the final code, test the movie to see it in action.
import gs.*;
right_btn.addEventListener(MouseEvent.CLICK,rotateRight);
left_btn.addEventListener(MouseEvent.CLICK,rotateLeft);
function rotateRight(e:Event):void{
right_btn.removeEventListener(MouseEvent.CLICK,rotateRight);
left_btn.removeEventListener(MouseEvent.CLICK,rotateLeft);
TweenLite.to(picture_mc, 1, {rotationY:picture_mc.rotationY - 180,
onComplete:function(){right_btn.addEventListener(MouseEvent.CLICK,rotateRight);
left_btn.addEventListener(MouseEvent.CLICK,rotateLeft);}
}
);
}
function rotateLeft(e:Event):void{
left_btn.removeEventListener(MouseEvent.CLICK,rotateLeft);
right_btn.removeEventListener(MouseEvent.CLICK,rotateRight);
TweenLite.to(picture_mc, 1, {rotationY:picture_mc.rotationY + 180,
onComplete:function(){left_btn.addEventListener(MouseEvent.CLICK,rotateLeft);
right_btn.addEventListener(MouseEvent.CLICK,rotateRight)
}
}
);
}
Aug 16th, 2009
Nice easy effect with good clean result.. Thanks!
Aug 17th, 2009
Very coool tutorial, great effect …
Thx
Aug 18th, 2009
This is great thanks.
Is it possible to have it automated? Flip every 6 seconds and back?
I tried using and onload but couldn’t get it to work
Aug 18th, 2009
ALAN, use TIMER class with value 6000 and then associate the function with onComplete statement in Tweener.
Aug 20th, 2009
There is a glitch in the animation. If you click left rotate and then during the rotation quickly click on right rotation, the whole animation stops reacting, and you can now rotate in only one direction and very often the image stays in a half rotated state.
Aug 20th, 2009
@ Rayne :
Hi Rayne, thanks for pointing out the glitch.
We have updated the code, you need to remove the click event listeners to both buttons while the rotation is made.
Thanks again
Aug 20th, 2009
Awsome effect…
would it be possible to rotate the image clockwise & counter clockwise?
Aug 20th, 2009
disregard my previous comment.
Aug 24th, 2009
Thank you FUNKCJE
Aug 28th, 2009
[...] View Tutorial // [...]
Sep 3rd, 2009
Pretty Cool!
Sep 17th, 2009
what changes i need to do to using rollover?? cuz i find that when u use removeEventlistener, it removes the ROLLover as well and it will gives an error saying undefined properties.
but if i dun removeEventlistener the rollover mess with with rollout when the thing is flipping.
Sep 18th, 2009
Is there a way to create a shadow on the image as it is rotating? Just to add an effect so as the image is rotating, a shadow or blur appears on the back portion to create a more realistic perspective as it is rotating….Sorry for the explanation, tricky to describe.
Oct 29th, 2009
hey does anybody know how to rotate an image or a text in 3d space at least y rotation with respect to mouse movement in flash……..?????????????????????????????????????????????????????????????? plz help ria………
Nov 2nd, 2009
could not find gs
Nov 2nd, 2009
@ Carlos : Read STEP 5
Nov 16th, 2009
The new 3d rotation in flash cs4 is great… the only downside is rotating vector art… the slightest 3d rotation will convert the vector into bitmap. So far I have not found a work around for this.
Feb 18th, 2010
went to download the engine but couldn’t find any gs files. It is all in folders and there is only as files.
Feb 19th, 2010
any ways to have one image rotate/flip to another image or shape?