Create a 3D perspective movement

October 13th, 2009 in Flash | 15 Comments

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;
}
  • Digg
  • del.icio.us
  • Reddit
  • StumbleUpon
  • Twitter


What you think ...

(15 Comments)

+ Add a Comment
  1. TheWebTuts
    Oct 13th, 2009

    Tutorial added to thewebtuts.com

  2. jayna
    Oct 16th, 2009

    You kinda suck, you gotta start from the begining. it would help SOOOO much better

  3. JULES
    Oct 16th, 2009

    REally cool, thxs. ;-)

  4. tutorial blog
    Oct 18th, 2009

    Thank for post

  5. Freddy
    Oct 19th, 2009

    Thanks for all your wonderful tutorials.

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

  6. china
    Oct 23rd, 2009

    very simple. but very good!

  7. Do’s and Don’ts of Photoshop Retouching « Choose Digital Media
    Oct 26th, 2009

    [...] Goto Tutorial… [...]

  8. Mr. k
    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!!

  9. Isman
    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

  10. Roopak
    Mar 11th, 2010

    its ok, but need to be more precise on animation like interection of animation with some more effect.

  11. Serge
    Mar 18th, 2010

    Thanks for this post, I was looking for information like this.

  12. Free I Share 分享资源 分享快乐 » Blog Archive » 45个高级Flash Actionscript应用
    Apr 19th, 2010

    [...] Create a 3D perspective movement [...]

  13. ComputerProgrammingTutorial
    Sep 28th, 2010

    This for the post. I enjoyed it a lot.

  14. 30 Mindblowing 3D Effect Tutorial. | Cool Flash Radar
    Dec 15th, 2011

    [...] Create a 3D Perspective Movement [...]

  15. Cheffybot
    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.

Leave a Comment

Name (required)

E-mail (required, will not be published)

Website