Flex | Flash | Air | AS3
Create a 3D perspective movement
October 13th, 2009 in FlashIn 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