Create a 3D perspective movement

In this tutorial, we’re going to create a 3D perspective movement that allows the user to move towards the content or away from it with the keyboard’s arrows. This tutorial uses the z property, new in Flash CS4.

View DemoDownload Source

1. With Flash CS4, create a new flash file (Actionscript 3.0) and save it as 3D_Movement.fla.

2. Rename “layer 1” to “content”. Create three balls by importing images and convert each to a movie clip. Select all of them and convert the whole selection to a movie clip and give it an instance name of “content_mc”.

3. Create a new “actions” layer and with its first frame selected open the actions panel.
First, loop through all the objects contained in “content_mc” in order to set for each ball movie clip a different value for its z property. Have in mind that the more the value is high, the more the ball is far from us.

for(var i:int =0; i < content_mc.numChildren; i++) {
	var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
	mc.z = i*300;
}

4. Next add a KEY_DOWN event listener that will be handled by the keyDownHandler function.
In the keyDownHandler function we check whether the up key (keyCode = 38) or the down key (keyCode = 40) is pressed and also add limits conditions for the content_mc’s z property. If the conditions are fulfilled, we change the value of content_mc’s z property.
If the Up key is down that means that we want to approach the content and in that case we need to decrease the value. If the Down Key is pressed this is the contrary.

stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler);

function keyDownHandler (e:KeyboardEvent):void {
	if(e.keyCode == 38 && content_mc.z > -1100) 
		content_mc.z -= 25;
	if(e.keyCode == 40 && content_mc.z < 500) 
		content_mc.z += 25;
}

5. Here’s the final code, test the movie to see it in action.

for(var i:int =0; i < content_mc.numChildren; i++) {
	var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
	mc.z = i*300;
}

stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler);

function keyDownHandler (e:KeyboardEvent):void {
	if(e.keyCode == 38 && content_mc.z > -1100) 
		content_mc.z -= 25;
	if(e.keyCode == 40 && content_mc.z < 500) 
		content_mc.z += 25;
}

17 thoughts on “Create a 3D perspective movement

  1. Freddy

    Thanks for all your wonderful tutorials.

    @ JAYNA : It’s you that kinda suck, be grateful and stop bitching

  2. Pingback: Do’s and Don’ts of Photoshop Retouching « Choose Digital Media

  3. Isman

    Hi,

    I have downloded the source file and run it, it was good, but when I have add another image and make it content_mc video clip (after deleting the first one), it was not working ??

    I don’ know why !! can you help me with this ??

    Thanx

  4. Pingback: Free I Share 分享资源 分享快乐 » Blog Archive » 45个高级Flash Actionscript应用

  5. Pingback: 30 Mindblowing 3D Effect Tutorial. | Cool Flash Radar

  6. Cheffybot

    “Adobe Flash CS4+ 3d navigation”

    Fantastic, I have been playing around with the 3d capabilities of Flash CS5 but so many tutorials are extremly asenine. Thank you for the functionality with simplicity. You also get a fantastic view point when you add the x and y krycodes in the same function.

    Many thanks.

  7. Pingback: 45+ Advanced Tutorials of Adobe Flash ActionScript | JS Tips

  8. jackie

    hi
    my code is the same with yours,but it throw an error : typeerror error #1009 cannot access a property
    help me

Leave a Reply

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