This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Away3D Basics 2 - The View and the Scene

Away3D Basics 2 - The View and the Scene

When you look out through a window in your house, you only see what is visible from your point of view, not what is occluded by the walls. The viewable area is decided by the size and shape of the window, so you'll see a "cropped" view of what's outside. This is exactly how the View works in Away3D as well. It is the "window" that we view our 3D world through.

No matter what you want to do in Away3D, there's some things that you'll always need to set up. The "Basic" tutorials will explain the Scene, View, Camera, Primitives, Textures and explore some of the possibilities. Each example in the series will be organized as Actionscript Classes so they can be used in both Flash and Flex.

If you are new to 3D on computers, you might want to read our introduction that explains the core 3D concepts. This tutorial also contains the source for 6 other Away3D projects that may be worth checking out. To run the example files, you will first need to set up Away3D on your computer. When you have the Away3D source files and your software is set up, you can open, explore and export the examples in this tutorial by just placing them in your project directory.

To see your 3D content, we need two things. A Viewport (View) and a Scene. This tutorial explains how to use these.

The View

The name of the View class in Away3D is View3D. To create a new View, we use this code:

var view:View3D = new View3D();
addChild(view)

Note that the view is added to the stage like any other display object in Flash. This means that you can stack things both behind and above the view using the methods you are already used to in Actionscript.

By default, the View is not cropped in any way. It fills the entire Flash movie, so the size of your Flash movie is effectively the size of the View. Classic television has an aspect ratio of 4:3 (width:height). New High Definition TVs use the 16:9 aspect ratio. By changing the width and height of your movie, you also decide the size and aspect of the output image as well.

You should be aware that even if the View3D class extends the Sprite class, it does not implement methods for setting width and height properties. The Flex contextual help will tell you that these properties exist, but since they're not (currently) implemented, they have no effect. You can set these as much as you want, but the View will always fill the width of your SWF. You can easily get around this by setting the "clipping" property (explained later).

You can also set the x and y position of your view, but this is a major point of confusion to those new to Away3D. Setting the x/y of the view not only moves the View on the stage, but it also changes the coordinate system inside your View. To avoid any problems, you should always set the x and y properties to the half of your View's width/height. Our example movies here on Flashmagazine are 465 by 400 pixels. To make sure the View is always centered, we use the following parameters when creating our View3D:

var view:View3D = new View3D({x:232, y:200});

You can also set these properties after creating the View:

var view:View3D = new View3D();
view.x = 232;
view.y = 200;

As mentioned initially, every view comes with a default Scene and Camera. You can change these in the same way, either passing them in the constructor or setting them later.

Nothing will be displayed in the View until you tell it to update using the render() method:

view.render();

You typically call this command from within an EnterFrame or Timer handler. Be careful though. If you set your movie to update too often (too short Timer interval or too high Framerate) the result will actually be reduced performance/speed. There's no precise way to do this so it may require a little testing to get it optimal on all machines. As a general rule, keep things at "normal" speeds such as 25 or 30 fps. This is enough for most purposes.

Setting "view.clipping" is effectively the same as setting the width and height of the view would have done (if implemented). By using this property on multiple Views, we can view the same scene from multiple angles:

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: ExMultipleViews.as ExMultipleViews_view.as

To save some typing and follow general Object Oriented practice, we've created the View as a separate class. The Scene is created in the main class so we can pass it as a parameter to the four View's. This way, they can all show the same scene, but from different angles just as a 3D modeling software would. To get more View's, we just create a new ExMultipleViews_view.as instance.

This movie employs a trick to work around the x/y problem of the View3D class. Each of the views are placed inside a Sprite. We use the Sprite for the positioning so that we can keep the correct x/y properties for the View3D (half of viewport width/height). Note how this affects the clipping rectangle as well (see ExMultipleViews_view.as). Another trick that can be useful is to split complex scenes into several views, one for the background, one for the main models and maybe more. That way, you more or less have Layers just as in Flash.

The Scene

The Scene works just like the Stage in Flash. Anything on the Scene can be displayed to the user and manipulated. Before you can use the scene, you must create it. You can do this two ways. The simplest is just to use the Default scene that comes with every view.

var view:View3D = new View3D({x:232, y:200});

This will create a new View with a Scene. You can access the scene using "view.scene". You can also create a scene and then pass that Scene to the view.

var myScene:Scene3D = new Scene3D;
var view:View3D = new View3D({x:232, y:200, scene:myScene});

This is what we did in the example above showing multiple views of the same Scene, allowing multiple views to use the same Scene. This also makes for little less typing since you can reference the scene using the "myScene" variable directly rather than "view.scene".

Once you have your Scene in place, you'll want to add content to it. 3D objects in Away3D are either attached to the Scene or an ObjectContainer3D that is already/later put on the Scene. ObjectContainer3D allows you to attach several objects together so you can move them together as a group as well as separately.

To place an object on the Scene, we must create it first. Let's create a Sphere with a radius of 50:

var mySphere:Sphere = new Sphere({radius:50});

Just as with DisplayObject's in Flash, 3D objects can be created without being added to the DisplayList. To make our Sphere visible, we have to add it to the stage using the addChild method. If we used the Default view, we'll do it this way:

view.scene.addChild(mySphere);

If we want to add this to the custom scene we created earlier, we do it this way:

myScene.addChild(mySphere);

The Scene works just as all other 3D Objects in Away3D, meaning that you can move it around, rotate and scale it. If you want to remove an Object from the Scene, you use the removeChild method as you would for MovieClips or other DisplayObjects in Flash:

myScene.removeChild(mySphere);

You can also listen for changes to the scene and mouse clicks using EventListeners. You apply and remove these just as you would do to any other DisplayObject in Flash:

myScene.addEventListener(Object3DEvent.SCENECHANGED,someFunction);
myScene.removeEventListener(Object3DEvent.SCENECHANGED,someFunction);

This is just about all you need to know about the Scene since it's so simple in use. Just treat the Scene as you would with the Stage in Flash and you are ready to go. Next up - Cameras in Away3D.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by macrocosm on 12/13 at 03:03 PM

There was an error on compile with your code above Basic02.as ...had to change lines 89 and 100 from update() to updateScene() to get it to render.  And Basic02_view.as doesn’t seem to compile anything, just a white screen with no errors, im using the latest away3d core, compiling in flashDevelop with flexSDK.


Posted by Jens C Brynildsen on 12/14 at 10:10 AM

Hi macrocosm,
Did you download http://www.flashmagazine.com/articlefiles/away3d/Cover.as as well? I can’t the exact reason for the problem since you didn’t paste the error, but Basic02.as is the file you should compile. It uses four instances of Basic02_view.as, one for each of the views.

Did that help?

J


Posted by saro on 12/23 at 07:34 AM

hi macrocosm,
see Basic02_view.as is a class file which receive the width,height,x and y coordinates and scene which you are going to render, actually you are creating the instance of that class inside the Basic02.as class so you cannot call the Basic02_view.as file to render,
do following step;
1.you should download cover.as file which is available above this tutorial,which is used for mouse hide options not more than you expected
2.you should download Basic02.as and Basic02_view.as
also available,
3.put these all file into single folder and create one .fla file in the same folder and put Basic01.as file as a document class,
4.now run, i hope you have away3d2.0 and assign the classpath of the away3d to your flash in publish settings,
5.if you have error still, do following,

i.open Basic01.as and there you can see view01.View.render for all,
change it to view01.view.render for all view01,view02 and so forth

still you have error, mail me i will send you full detail,with compiled code
Mail : .(JavaScript must be enabled to view this email address)


Posted by Fruity on 03/03 at 10:54 AM

Seems the code for clipping have changed in Away3d. The new code should be:

var myClip:RectangleClipping = new RectangleClipping({minX:-(2),minY:-(2),maxX:(2),maxY:(2)});
View.clipping myClip

Posted by Fruity on 03/03 at 10:57 AM

I had problems with this one due to RectangleClipping Being changed.

Seems the new way of doing it is is :

View.clipping = new RectangleClipping({minX:-900,minY:-300,maxX:
400,maxY:300});


Posted by Jens C Brynildsen on 03/03 at 11:43 PM

@Fruity Yeah. It changed with the 2.3 release. I should have adjusted it when the change occurred. I’ve now updated the files. Sorry about that.

J


Posted by Fruity on 03/04 at 01:18 AM

Sorry about my double post. And thanks for great tutorials.


Posted by jimmy0103 on 03/11 at 04:32 AM

hi, i got a problem on using EventListeners.
i have create a view and scene, and some 3d objects
use addChild into scence.
but i cannot add mouse click on the 3d objects.


Posted by Jens C Brynildsen on 03/13 at 01:10 PM

Hi Jimmy,
Listen for clicks on the material of the object instead? You can find an example in this tutorial: http://www.flashmagazine.com/Tutorials/detail/away3d_basics_6_-_bitmap_materials/ under “Using a MovieClip as a texture”. Same thing for all materials.

J


Posted by justaddice on 07/09 at 10:09 AM

Hi,
I got Basic01 working using Flash CS4, Away3D 3.3.3. I’ve also got Cover.as in my src folder. However I am getting:

TypeError: Error #1006: value is not a function.
  at away3d.core.utils::Cast$/material()
  at away3d.core.utils::Init/getMaterial()
  at away3d.core.base::Mesh()
  at away3d.primitives::AbstractPrimitive()
  at away3d.primitives::Cube()
  at Basic02()

Please can you advise?

Cheers.


Posted by Jens C Brynildsen on 07/14 at 12:39 PM

@justaddice I just tried to reproduce this (qassuming you meant Basic02), but it works without any errors for me? I’ve also used 3.3.3 and CS4. Could you elaborate a bit?

J


Posted by forrex on 07/24 at 04:31 AM

I’m also getting the error justaddice is.

First I got this error for many lines:
“1119: Access of possibly undefined property cam through a reference with static type Basic02_view.”

In the Publish > Actionscript 3 settings I turned off Strict mode.

Once I did that it published with the same error as justaddice got:

TypeError: Error #1006: value is not a function.
  at away3d.core.utils::Cast$/material()
  at away3d.core.utils::Init/getMaterial()
  at away3d.core.base::Mesh()
  at away3d.primitives::AbstractPrimitive()
  at away3d.primitives::Cube()
  at Basic02()

Not sure where to go from here to debug that…


Posted by Jens C Brynildsen on 08/08 at 08:41 PM

@forrex What Flash IDE version do you use (CS3 or CS4)? What Away3D version do you use?

The code works without problems here.

J


Posted by shaman4d on 09/11 at 07:34 PM

Good article. But why you told anything about that view need to add as child to stage? I mean

view=new View3D;
addChild(view);


Posted by Jens C Brynildsen on 09/14 at 05:38 PM

@shaman4d Good point! Adding it now.

J


Posted by TimD on 11/08 at 10:44 PM

I get an error that Number3D is undefined—and I do not find it in away3D > core > math   I am using v3.6 with Flash CS5—- also, I do not find Basic02.as or Basic02_view.as—I only find ExMultipleViews.as and ExMultipleViews_view.as—can you advise?


Posted by Jens C Brynildsen on 11/08 at 10:51 PM

@TimD It sounds like the path to Away3D is incorrect. I’m guessing that you’re using Flash CS5? If so, did you use Option 1 or option 2 in this setup: http://www.flashmagazine.com/Tutorials/detail/installing_away3d_for_flash_flex_or_flashdevelop/

J


Posted by TimD on 11/09 at 01:33 AM

I used option 1—the 2 required folders are in the same folder as the fla file—as are the two AS files I downloaded from above.  That worked fine for the basic class tutorial previous to this one—but not here.  I am using Flash CS5 and the fla document class is set to be ExMultipleViews. 

When run I get a series of errors like this for different lines:

“C:\Documents and Settings\OHE\My Documents\flash\Flash_3D\3D_files\ExMultipleViews.as, Line 77   1180: Call to a possibly undefined method Number3D.”

Then one like this:

“C:\Documents and Settings\OHE\My Documents\flash\Flash_3D\3D_files\ExMultipleViews.as, Line 96   1061: Call to a possibly undefined method update through a reference with static type away3d.containers:Scene3D.”

I made no alterations to the AS files—but when I follow the path and find the “math” folder, I do not find a Number3D.as file—am I missing it?

Thanks…


Posted by Jens C Brynildsen on 11/09 at 09:35 AM

@TimD The only other reason I can think of is the Flash file being set to publish to Flash 9, but I doubt that is the case. This really seems like a path problem. Could you try option #2 as well?

J


Posted by TimD on 11/09 at 01:11 PM

Nope—still get the same errors when I use that option as well—and besides that, the second option would not work for our purposes


Posted by Jens C Brynildsen on 11/09 at 02:32 PM

Ok. You are sure that the folder named “away3d” that contains all the Away3D classes are in the folder “C:\Documents and Settings\OHE\My Documents\flash\Flash_3D\3D_files\” ?

If so, I’m afraid I cannot help you without having a look at your computer and that’s not really doable… This is really all that is required, so it must be something with your Flash setup. Have you tried using a new document / fresh copy of the Away3D files?

J


Posted by TimD on 11/09 at 03:13 PM

I am sure—I went back and downloaded v3.4—and installed that (option 1)—now it works fine—somehow this tutorial is not compatable with v3.6—thanks for your help


Posted by russdogg on 12/21 at 12:45 AM

I found the same problems at Tim. Undefined method Number3D and undefined method update in away3d.containers:Scene3D.

Through some internet research i found that Number3D has been done away with in the latest version of away3D, and instead its been suggested you should use the native flash 10 supported “Vector3D”(import flash.geom.Vector3D;).

For the second issue, I looked in the Scene3D class and couldnt find the “update” method it is calling, so I’m assuming that has been replaced with something new in flash 10 as well?


Posted by Jens C Brynildsen on 12/21 at 09:36 AM

@russdogg I’ll try to get this updated over the holidays. The error affects a lot of the tutorials and code, so it will take a few hours to get it all fixed. I just don’t have those now just before xmas.


Posted by Jens C Brynildsen on 03/14 at 10:48 PM

The reference to Basic02_view.as has now been corrected to ExMultipleViews_view.as. Sorry about that one. I changed all the example files from having names such as “BasicXX.as” to something more descriptive but must have missed that one. Also - all Number3D’s in linked class files are turned into Vector3D and compile as they should in Away3D 3.6.

J


Posted by headmazta on 04/18 at 10:56 AM

“Note that the view is added to the stage like any other display object in Flash. This means that you can stack things both behind and above the view using the methods you are already used to in Actionscript.”

I think it doesn’t work that way. Stage3D layer will always be UNDER the Stage2D layer. So, when you add a MovieClip, then add a View3D, the View3D will always be under that MovieClip. IMHO..


Posted by Jens C Brynildsen on 06/13 at 12:51 PM

@headmazta In Away3D 3.6 this is still correct. For those that are using Away3D 4 I have published an updated this tutorial:

http://www.flashmagazine.com/Tutorials/detail/away3d_4_basics_-_the_view_and_the_scene/

Currently, there are people using both 3.6 and 4.0 so I have tutorials for both versions. I’ve not finished converting all the Away4 tutorials though as this takes a lot time.

Submit a comment

Only registered members can comment. Click here to login or here to register