We know how to rock out. Photos from the 1st annual BLITZ Jam are up now: http://t.co/RIGgkUh7oZ

posted 13 days ago on twitter

close
blog_flash3dNav
blog_flash3dNav

Flash and 3D Spatial Navigation

Moving flash movieclips in a 3D space has been done many times before, there are a lot of flas or tutorials out there that you can take a look at. But these often lack in structure and most of them are set in good old AS1. So here’s a package of structured and comprehensive classes which can be used and extended easily.

Following are a few examples of what you can do with this package. Click the screenshots to launch the examples. You can download all example source .FLA’s and code here. Enjoy.

Flash 3D Example 1 In this basic example, the camera jumps from one point to any other you click. You can also go from point to point using the up and down arrow.
Flash 3D Example 2 This one is the same as example 1 but shows how easy you can extend the classes and add effects like blur in this case.
Flash 3D Example 3 Here the camera class is extended into a first person shooter game-like camera. Move the camera into space by pressing the arrow keys and click and drag your mouse to rotate the camera.
Flash 3D Example 4 The SpacePoint Class implements a polar method like the flash.geom.Point class which lets you place points at a chosen radius and angle around a center point like in this example.
Flash 3D Example 5 Movieclips can also contain image sequences as seen on the new BLITZ site for Linksys: http://www.wherelifeconnects.com
Flash 3D Example 6 Lets see how many of these can be rendered on screen before flash 8 starts choking. An AS3 port should be done pretty soon. We’ll keep you posted on the improvements on performance.

{ 75 comments }

Patrick M September 26, 2007 at 4:32 pm

Yeah the blog doesn’t take special characters lesserThan and greaterThan so look at that for statement and make sure its ok.

for(var i=0;i<linkageIds.length;i++){
var mc:MovieClip = this.attachMovie(linkageIds[i],”clip”+i,this.getNextHighestDepth(),{index:i});
mc.myButton.addEventListener(”onRelease”,Delegate.create(this,onButtonRelease));
}

rik September 27, 2007 at 3:42 am

haaa what an exciting challenge!! hahah

on the blur.fla I have removed the linkage from the “clip” movieclip, then created 3 new movieclips and made all of them have a linkage to this class:
com.blitzagency.ui.BasicButton

and calling them in the linkage window mc1, mc2, mc3 respectively.
I then created a button movieclip and inserted it inside each of the movieclips (mc1, mc2, mc3) giving it an instance name of myButton ( is that what I should do?)

after I wrote this in Main.as:

var linkageIds:Array = ["mc1","mc2","mc3"];
for(var i=0;i

ric September 27, 2007 at 3:48 am

var mc:MovieClip = this.attachMovie(linkageIds[i],”clip”+i,this.getNextHighestDepth(),{index:i});
mc.myButton.addEventListener(”onRelease”,Delegate.create(this,onButtonRelease));
}

when I launch it window pops up saying:

“A script in the movie is causing Flash player to run slowly…..”

and how to I add the button to the clip? And what exactly to you mean by clip? Clip as movieclip?

thanks soooooo much for your help!!!

wayne September 27, 2007 at 3:51 am

awesome
no errors, but… the script causes the swf to be unresponsive.

var linkageIds:Array = ["mc1","mc2","mc3"]
for(var i=0;i

wayne September 27, 2007 at 3:54 am

sorry some has not come through.

var linkageIds:Array = ["mc1","mc2","mc3"]
for(var i=0;i

wayne September 27, 2007 at 4:08 am

i have put it online, if you get 5, its probably me
check out http://www.isbg.co.uk/patrickm/main.as

wayne September 27, 2007 at 4:11 am
wayne October 2, 2007 at 11:02 am

any more help would be appreciated, still struggling and about to pull an all nighter!

wayne October 11, 2007 at 1:36 pm

Hi Patrick
i have gone back to basics, scrap my last 6 posts i added code meant for someone else i think!! ha

However
mc inside the mc arrays shows as button but does not get next depth??

private function onButtonRelease(eventObj:Object):Void{
index = eventObj.target._parent.index;

I promise ill never bother you again :-)

Patrick M October 11, 2007 at 1:41 pm

I’m not sure what the problem is, can you post your source files so i can have i look at it ?

wayne October 11, 2007 at 2:13 pm
Amar December 2, 2007 at 7:23 pm

Hi Patrick,

I am a newbie with actionscripting…I was wondering how I could possibly modify the blur file using the as files for multiple mc’s, I understand that there was some of this discussed on the board however, after following the posts I did not see a post from urself regarding this

Thank you

Hunter December 2, 2007 at 9:46 pm

Hi,

I really like this system and I’m trying to implement something similar for some 3d particle effects in a game. I have built an engine around PV3D but I think, considering the requirements of my system, the PV3D library is overkill and I could do things more simply and smoothly with a simple 3d positioning system. All I need is a scene (collection of “3d” objects with x, y, z coords) and a camera (x, y, z, tx, ty, tz) as in your examples.

I’ve been trying to port this system to AS3 but running into trouble with the math involved. For some reason my port works “sort of” but does some weird things with rotation… where it seems to rotate the viewer at the axis of the clipping plane rather than the actual camera position so that you sort of hover above and below a target object that should be on the same plane (”ground”) as you are. I can upload code or link to a demo if that would help to clarify.

Could someone point me to a good place to learn the camera transform system that doesn’t require a lot of matrix understanding? I’d just like to be able to analyze the transformation/rotation so I can debug the system myself.

Thanks!

Hunter

Patrick M December 5, 2007 at 12:33 pm

Hunter, check this : http://labs.blitzagency.com/?p=377
Its pv3d using real movieclips so there’s no pv3d rendering involved.

If you want to debug your rotation issue check this tutorial by senocular : http://www.kirupa.com/developer/actionscript/rotation_center.htm

chris March 5, 2008 at 2:26 am

hello! i would love to work with your fla’s. they’re done very very nicely!
but there’s one problem:
everytime i open the fla’s in my Flash CS3 and then try to watch the preview, it says:

symbol=tracer,layer=layer2,picture=picture1,line=line3 “spacecamera” couldn’t be loaded
symbol=main,layer=guide,picture=picture1,line=line1 “demos.sequence2.main” couldn’t be loaded

could you answer me via mail? would be nice.
sincerely yours, chris

Roto April 27, 2008 at 4:56 pm

Hi,

Awesome work! I was wondering if anyone had created a version that could be used with actionscript 3 ??

Cheers
Roto

andrew May 2, 2008 at 7:27 pm

I too was wondering if anyone had created a version of basic that could be used with action script 3?

Chris June 26, 2008 at 5:39 pm

Very nice example.

We would like to extend your classes and use for a commercial project, are we free to do so and what are the licensing terms of this code if any? Open Source?

Thanks again,

Chris

Giorgio Natili July 12, 2008 at 6:46 am

Hi,

I have done a porting in AS3, can I publish it?

rich April 29, 2009 at 8:34 am

hi, anyone has update on an AS3 version?

Cid May 21, 2009 at 7:14 am

Amazing, that what i’m looking for since a moment

niko September 5, 2009 at 3:25 pm

Hello,
Very interesting and it’s cool to share it , i search now how to use this method to use an object with the mouse .The mouse controls the object and the object (for exemple) write something in the same time .
I hope i will find soon.
thanks for the exemples :p

bob January 4, 2010 at 9:30 pm

Hi, the system is really cool. I just want to ask how to center all the clips by default. Since it is randomly assigning location for the clips, the clips is scattered all over the movie window. I just want to see all clips by default by centering it. or how can i know which clip is infront, so i can see all succeeding clips.

toby February 8, 2010 at 1:23 pm

hey so ive been editing the blur. lately and have been having difficulties placing the button within a new clip so that you can navigate each point by clicking, any help in this matter would be greatly appreciated

Alex Righetto March 15, 2010 at 1:25 pm

Thanks for the good work. I’m trying to create a backround butto, in order to reset the view. any ideas?