3D rotation with Flash CS4

3D rotation with Flash CS4

Learn 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.

View DemoDownload Source

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)
										}
								}
	);
}	

35 thoughts on “3D rotation with Flash CS4

  1. Alan

    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

  2. Rayne

    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.

  3. admin Post author

    @ 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

  4. Pingback: AS3 3D rotation in Flash CS4 | FREE flash tutorials | The Dude

  5. Nick

    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.

  6. WES

    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.

  7. saswot

    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………

  8. Khanh

    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.

  9. Tim

    went to download the engine but couldn’t find any gs files. It is all in folders and there is only as files.

  10. Greg

    @CARLOS, Greensock has updated their package names. Instead of
    import gs.*;
    it should now be
    import com.greensock.*;

    Also, I recommend consolidating the listener attachment/removal code to a single function and then call that function as needed. This should be the new code block:

    import com.greensock.TweenLite;

    function attachListeners() {
    this.right_btn.addEventListener(MouseEvent.CLICK, rotateRight);
    this.left_btn.addEventListener(MouseEvent.CLICK, rotateLeft);
    }

    function detachListeners() {
    this.right_btn.removeEventListener(MouseEvent.CLICK, rotateRight);
    this.left_btn.removeEventListener(MouseEvent.CLICK, rotateLeft);
    }

    function rotateRight(e:Event) {
    detachListeners();
    TweenLite.to(picture_mc, 1,
    { rotationY: picture_mc.rotationY – 180,
    onComplete: function() { attachListeners(); }
    });
    }

    function rotateLeft(e:Event) {
    detachListeners();
    TweenLite.to(picture_mc, 1,
    { rotationY: picture_mc.rotationY + 180,
    onComplete: function() { attachListeners(); }
    });
    }

    attachListeners();

  11. Richard

    Is there a way you could say how you got the image to stay in one place for the rotation? I built it just like you showed but it rotates on the farthest left side, when I just need it to rotate on the middle of the image. Also I’d like to show you my code because I’m trying to use it in a slide show however it only rotates the background so maybe point which is the correct object i need to rotate.

  12. Nazar

    there is error in script when i copy and paste in my page i working in adobe cs3(AS 3.0 ) please suggest me if you can help me for this

  13. GOWTHAM

    It’s not working for me.. Plz guide me.

    There is no directory called “gs”. We want to set classpath or any linkage is want to give for movie clip ??

    Reply soon

  14. GOWTHAM

    hello nazar,adrian…
    i found the solution.
    Downloaded folder named “greensock-as3″.Go inside of it, again u have “greensock-as3″.Cut that second “greensock-as3″ and paste it where u have fla file. Then, need to set the classpath. i.e., browse ur newly copied “greensock-as3″ folder. Atlast, change the actions in flash as “import com.greensock”,

    Now, use see change by press ctrl+enter. It’s working…

  15. Rio

    Hello, i wonder how to set rotation point and projection point in flash CS4 especially for the 3D rotation???

  16. Feb 10th, 2011

    #
    GOWTHAM
    Feb 10th, 2011

    hello nazar,adrian…
    i found the solution.
    Downloaded folder named “greensock-as3″.Go inside of it, again u have “greensock-as3″.Cut that second “greensock-as3″ and paste it where u have fla file. Then, need to set the classpath. i.e., browse ur newly copied “greensock-as3″ folder. Atlast, change the actions in flash as “import com.greensock”,

    Now, use see change by press ctrl+enter. It’s working…

  17. miguel

    Hi,

    This works perfect, I’ve a little problem, I have a button on the first view, when I click the button I need to flip (appear) a swf I’ve loaded, so the effect is “to appear” just when the button is clicked, I don’t know if I’ve explained mysekf rigt.

    If anybody has a clue I’ll be very gratefull, have a nice time.

  18. san

    I want to rotate an circular image in clockwise motion using flash which contain links and I need to stop the rotation when a user move the mouse over it. Please give code for it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>