Create a 3D perspective movement
October 13th, 2009 in Flash | 15 CommentsIn 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.
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;
}
Oct 13th, 2009
Tutorial added to thewebtuts.com
Oct 16th, 2009
You kinda suck, you gotta start from the begining. it would help SOOOO much better
Oct 16th, 2009
REally cool, thxs.
Oct 18th, 2009
Thank for post
Oct 19th, 2009
Thanks for all your wonderful tutorials.
@ JAYNA : It’s you that kinda suck, be grateful and stop bitching
Oct 23rd, 2009
very simple. but very good!
Oct 26th, 2009
[...] Goto Tutorial… [...]
Dec 5th, 2009
the frame cover 50 percent of the page what kind of web design technique are they using??? some body tell me please!!
Jan 13th, 2010
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
Mar 11th, 2010
its ok, but need to be more precise on animation like interection of animation with some more effect.
Mar 18th, 2010
Thanks for this post, I was looking for information like this.
Apr 19th, 2010
[...] Create a 3D perspective movement [...]
Sep 28th, 2010
This for the post. I enjoyed it a lot.
Dec 15th, 2011
[...] Create a 3D Perspective Movement [...]
Jan 7th, 2012
“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.