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 1 - A simple Away3D class explained

Away3D Basics 1 - A simple Away3D class explained

This tutorial is the first in a series about Away3D, a powerful real-time 3D engine for Flash or Flex. This tutorial explains a very simple Away3D class line by line so that those that still use Actionscript 2 or have a designer background will be able to understand what is going on in the rest of the tutorials.

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. 3D is processor intensive, so all the examples use a file called Cover.as that you must also download to your project directory to be able to run the examples.

3D on computers use cliches that we are used to from the movies. The four things we will always need is a Stage, a Camera, a View and something to look at. Thanks to a lot of "default" properties, you only need to set up a view to get get started with Away3D.


A minimal Away3D class

The following is a minimal class that makes use of the default camera and stage in Away3D. If you understand what happens in the file listing below, just skip ahead to the next tutorial about the View. For those that are not too familiar with reading Actionscript 3 (AS3) code, read on and we'll explain this line by line.

 

 

package {
	import away3d.containers.View3D;
	import away3d.primitives.Sphere;
	import flash.display.Sprite;
	public class Basic01 extends Sprite {
		public function Basic01() {
			var view:View3D = new View3D({x:200,y:200});
			addChild(view);
			var sphere:Sphere = new Sphere();
			view.scene.addChild(sphere);
			view.render();
		}
	}
}

 

 

Line 1: AS3 requires that all classes must be in a package. For simplicity, we are using an unnamed package (also called the default package).

Line 2-4: To be able to use Away3D, we need to import the classes containing the functionality we are going to use, as well as the standard Sprite class.

Line 5: This is the name of our example class. This class "extends" the Sprite class, meaning that our class can do everything a Sprite can.

Line 6: A function that has the same name as the class is called the "constructor" function. Every time a new instance of this class is created, the contents of this function (Basic01) will be executed.

Line 7-8: Here we create a new View(3D). This is our viewport into the virtual 3D world. The x and y parameters tell Away3D where to set the centre of our 3D world. We then add this view to our class, so it will appear on the Flash stage.

Line 9-10: Here we create something to look at - a simple sphere. Next, we add this sphere to the default 3D Scene in our View (Just as other DisplayObjects in Flash, only what is added to the Scene is visible). Since we don't pass in any parameters for the X, Y and Z position, the sphere will be created in the center of our view (X=0, Y=0, Z=0).

Line 11: Away3D allows you to decide when to render the View. Rendering is the process of converting the virtual 3D content into a 2D viewable image. Rendering is a CPU intensive process and being able to decide when to update is extremely useful. A great use is to only render the View when the user has the mouse over the Flash movie.

The result is something like this:

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

movie: ExBasicClass.as

This was the simplest possible 3D scene I have been able to create in Away3D. You could of course compress this a little more by removing the comments, placing curly brackets on the same line and removing whitespace lines, but I find code easier to read this way.

If you are new to AS3, you may wonder where Away3D appears on stage and how you can manipulate it? Since this class extends the default Sprite class, it will behave almost like a MovieClip. Sprites are essentially MovieClips without a timeline. Since the Class is based on Sprites, it can easily be moved around the stage using the X and Y coordinates, rotated using the rotation property and so on.

If you use Flash and set this example file as your "Document Class" (or "Default Application" in Flex), a copy of this "extended Sprite" will be added to the Stage. If you add other Sprites, Movieclips or components using the "addChild" method inside this class, they will be added to this Sprite and not the Stage itself. If you want something to show above your 3D world, you just add it to the DisplayList after you add the View. You can also toggle the display order using the setChildIndex or swapChildren methods, just as for any other DisplayObject.

Next, let's expand a bit on what we've learned this far by looking closer at the View. From here on, we'll assume that you know AS3 or have a way to look up things you wonder about Actionscript 3 programming.

NOTE: If you have never used the Doument class in Flash, make sure you also read this tutorial and scroll down to the CS3 heading. This will explain how you use the actionscript class files in these tutorials together with Flash.

 

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 efactorial on 01/27 at 11:32 PM

Hi, I am new to away3d.  While going thru these great tutorials, I found an error and wanted to share.

I just downloaded the source code 2.2 and tried the above minimal class example.  I got an error in

View3D.as, Line 202:
inv = camera.invViewMatrix;

1067: Implicit coercion of a value of type away3d.core.math:Matrix3D to an unrelated type flash.geom:Matrix3D.


Posted by Jens C Brynildsen on 01/28 at 10:42 AM

Hi efactorial,
Which software do you use? I’ve tested this on CS3, CS4 and Flex 3 and I’m unable to reproduce your error.

Could it be that you’re using Flex 3 and are trying to compile the SWF to Flash Player 10?

J


Posted by efactorial on 01/28 at 05:01 PM

I was using Flash Develop 3.0.0 and CS4.  I even tried to paste the code directly into the frame in CS4 and CS3 and still got the error.  Actually in CS3, the error message was different.

Here is the code I put in the time frame:
import away3d.containers.View3D;
import away3d.primitives.Cube;
import flash.display.Sprite;
 
// create a viewport
var view:View3D = new View3D({x:250,y:200});
addChild(view);

// create a sphere and put it on the 3D stage
var cube:Cube = new Cube();
view.scene.addChild(cube);

// render the view
view.render();


Error in CS4:
1067: Implicit coercion of a value of type away3d.core.math:Matrix3D to an unrelated type flash.geom:Matrix3D.

Error in CS3:
Error: Error #2099: The loading object is not sufficiently loaded to provide this information.
  at flash.display::LoaderInfo/get width()
  at away3d.core.clip::Clipping/screen()
  at away3d.containers::View3D/get screenClip()
  at away3d.cameras::Camera3D/update()
  at away3d.containers::Scene3D/update()
  at away3d.containers::Scene3D/onUpdate()
  at flash.events::EventDispatcher/dispatchEventFunction()
  at flash.events::EventDispatcher/dispatchEvent()
  at away3d.containers::View3D/notifySceneUpdate()
  at away3d.containers::View3D/render()
  at Untitled_fla::MainTimeline/frame1()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
  at away3d.core.render::SpriteRenderSession/clear()
  at away3d.containers::View3D/render()
  at Untitled_fla::MainTimeline/frame1()


Posted by hiyh on 01/31 at 10:38 PM

I’m really new to scripting and I have yet to get these to work.  I installed the away3d files and I believe i’m doing everything they tell me to and flash tells me the the file can’t be nested.  what am I doing wrong???


Posted by Jens C Brynildsen on 02/01 at 02:02 PM

Hi Kyler,
Did you follow the instructions in this tutorial? http://www.flashmagazine.com/Tutorials/detail/using_actionscript_projects_in_flex_or_flash/

I’ll help you if you can tell me a bit more about your setup. What editor do you use (Flash/Flex/FlashDevelop/FDT) and how did you set up the class?

J


Posted by hiyh on 02/01 at 04:39 PM

Ya I have flash cs4 and I just copied the fils into the flash directory like it said in the install tutorial.
it says package can not be nested and give the { on the second line as the source.


Posted by iamiuru on 02/03 at 09:26 PM

i am getting the same thing as hiyh:
Packages cannot be nested. Source {

Folders are in the proper directory (I just did the earth tutorial and I am using the same folder).

Exporting Flash Player 9, AS3.


Posted by iamiuru on 02/03 at 09:32 PM

Uggh. Damn I rushed this one, thought it was sturctured the same as the earth tutorial. After I set up the document class everything worked fine. New to AS3, will be more careful next time.

Works fine.


Posted by Jens C Brynildsen on 02/26 at 02:56 PM

@efactorial you shouldn’t get those errors? Would you mind downloading the latest version (2.3) and try again? http://away3d.com/downloads/

J


Posted by ctaminian on 04/06 at 08:14 AM

Hey guys, I’m a total noob to away3D but NOT AS3!

I have created a new document, referenced my away3D src files through the publish settings and used my .as file’s name in the document class…

Whenever I typed the SAME code above I get many errors…however when I copy and paste the code from your .as file, the thing works!!!???! What is going on?!?!

This is what I type:

package {
import away3D.containers.View3D;
import away3D.primitives.Sphere;
import flash.display.Sprite;

public class Charlie extends Sprite
{
public function Charlie()
{
var View:View3D = new View3D({x:250,y:200});
addChild(View);
       
var sphere:Sphere = new Sphere();
View.scene.addChild(sphere);
       
View.render();
}
}
}

These are the errors I get:

1046: Type was not found or was not a compile-time constant: View3D.

1046: Type was not found or was not a compile-time constant: Sphere.

1180: Call to a possibly undefined method View3D.

1180: Call to a possibly undefined method Sphere.

5001: The name of package ‘away3d.primitives’ does not reflect the location of this file. Please change the package definition’s name inside this file, or move the file. D:\dev\libs\as3\3d\away3d\src\away3D\primitives\Sphere.as

5001: The name of package ‘away3d.containers’ does not reflect the location of this file. Please change the package definition’s name inside this file, or move the file. D:\dev\libs\as3\3d\away3d\src\away3D\containers\View3D.as

Anyone out there…..PLEASE help, this is so simple yet stupid! Why is this happening to me :(


Posted by Jens C Brynildsen on 04/12 at 09:37 PM

@ctaminian You will get those errors if Flash can’t find the Away3D source code. As for why it works when doing a copy/paste - I really have no idea.

J


Posted by obirajt on 04/30 at 07:34 PM

sorry but this is another chaotic tutorial about away3d…......I’m FlashCS3 user. where put the first code??????: (“package {
  import away3d.containers.View3D;
  import away3d.primitives.Sphere;
  import flash.display.Sprite;
  public class Basic01 extends Sprite {
      public function Basic01() {
        var view:View3D = new View3D({x:200,y:200});
        addChild(view);
        var sphere:Sphere = new Sphere();
        view.scene.addChild(sphere);
        view.render();
      }
  }
}”)
into first frame as action????
Which document class do I have to use?? Basic01 or Cover?
If this is tutorial for beginners You should explain what to do, step by step….. I don’t see sphere, only errors:
1131: Classes must not be nested.
1159: The return statement cannot be used in package initialization code.

so its very nice effect hahahahahahahahahahaha. I’m so sorry I can imagine this sphere in my mind only…........


Posted by Jens C Brynildsen on 05/01 at 08:36 AM

Hi Obirajt,
I’m sorry that you have a problem here. If you just read the Flash-part of this tutorial, you’ll find exactly what you need:
http://www.flashmagazine.com/Tutorials/detail/using_actionscript_projects_in_flex_or_flash/ These tutorials are laid out using Class files to make them possible to use across more tools that just Flash.


If you look in this tutorial:
http://www.flashmagazine.com/Tutorials/detail/create_the_earth_and_heavens_in_less_than_an_hour_with_away3d/ You’ll see how to work with Away3D using only timeline code as well. You can use the approach you want, but keep in mind that 3D requires programming, so you will have to learn a little more than just timeline scripting to make what you want.

J


Posted by phoenix on 09/25 at 07:49 AM

Hello, I found the problem too. I copied your code then paste to my file (on the first frame) and I got this error ==> “1037: Packages cannot be nested.” on layer1 frame1 line1 (line1 = package {)
  This make me cannot start learning anything, please suggest me how to do? I will look forward for your suggestion…
(Note: I used flash CS3 and away3D-2.3.3)


Posted by Jens C Brynildsen on 09/28 at 02:17 PM

@phoenix you can’t just paste a package onto the first frame in the timeline. Please see what I answered Obirajt (above) for an explanation of how to do this.

J


Posted by irati on 11/10 at 03:59 PM

Hi!
I’m just starting with Flex and Away3d and I tried this tutorial, but when the browser opens it shows nothing.
I am using Flex 3 (with the last sdk, 3.4), Away3D 3.4.0 and firefox with flash 10 installed.
I have no error in compilation but as I said I cannot see the sphere in the browser.
Any help or suggestion?


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

@irati
It’s hard to tell from what you write here. There are a few things that could go wrong when using Flex - for instance if you start off by making a “Flex project” instead of an “Actionscript project” in Flex/Flash Builder. Also - if you’re using 3.4 and compile for FLash 10, make sure you use the Flash 10 version of Away3D. Can’t really tell more based on what you write here.

If you want to use Away3D with the Flex framework, I’d suggest you check out a specific tutorial like this one? http://www.switchonthecode.com/tutorials/getting-started-with-adobe-flex-and-away3d

J


Posted by Zangief on 12/18 at 03:19 PM

I’m tryng to make this thing work for two days and I always have this error (656): col: 77 Error: Type was not found or was not a compile-time constant: Vector.

I’m using FlashDevelop, Help please.


Posted by Jens C Brynildsen on 12/18 at 05:04 PM

@Zangief From the error, it sounds like you are trying to use Flash 10 version of either Away3D or Away3D Lite without having set FlashDevelop to target Flash Player 10 in the project settings.

Since I’m on a Mac these days, I don’t use FlashDevelop as much as I’d like to (it’s the fastest Flash IDE I know of) but I’m sure that the good people over at the FlashDevelop forum (http://www.flashdevelop.org/community/) can help you with this.

J


Posted by tomov on 01/07 at 09:10 PM

I also got the “Packages cannot be nested” error before checking the other tutorial, here’s one way to get over it:


import away3d.containers.View3D;
import away3d.primitives.Sphere;
import flash.display.Sprite;

[SWF(width=“500”, height=“400”, frameRate=“60”, backgroundColor=”#FFFFFF”)]
function Basic01()
{
  // create a viewport
  var View:View3D = new View3D({x:250,y:200});
  addChild(View);
 
  // create a sphere and put it on the 3D stage
  var sphere:Sphere = new Sphere();
  View.scene.addChild(sphere);
 
  // render the view
  View.render();
}

Basic01();


Posted by christiang69 on 01/08 at 09:07 PM

Hi, I was having a problem cause I could not paste this code into a flash in flashbuilder and make it work, but when I downloaded your Basic01.as file, it worked fine. So I did an experiment, I took the info inside that file, copied It, pasted it in another file and called it basic1.as, and the result was this error message:

C:\****\basic1.as: Error: A file found in a source-path ‘basic1’ must have the same name as the class definition inside the file ‘Basic01’.
Build halted with errors (fcsh).
Done (1)

So I changed the name of the classes to basic1 and it didn’t work either, it gave me the following error:

Build halted with errors (fcsh).
(fcsh)
Done (1)

Now, this is my first time working with flashdevelop, since I have always worked with flash, I don’t know if there are any hidden codes or rules to flashdevelop, but it’s just that when ctaminian explained that when he copied the code it worked and when he typed it, it didnt, I wanted to test why this could happen, and the name thing is what I noticed.

Is this a bug, or am I not noticing something?


Posted by Jens C Brynildsen on 02/06 at 10:14 PM

@tomov Yup. You can’t put a class straight on the Flash timeline so that’s a good way to get around it. I would however recommend that you don’t write code on the Flash timeline. This is the AS2 way of doing things and there’s several advantages to keeping code in separate text files. Check this tutorial to see how to use Class files in Flash or Flex: http://www.flashmagazine.com/Tutorials/detail/using_actionscript_projects_in_flex_or_flash/


@christiang69 According to the error you pasted, it looks like you have renamed the file from “Basic01.as” to “basic01.as” (with a small b)?

If that is the case, that is also what is causing the error. Just rename the file to make it work.


Posted by raivispurins on 06/29 at 07:32 PM

Hello, I just couple weeks ago started to learn 3D andines that works with AS and Flash,so I found your tutorials realy helpful, but at the same time I came around one problem. As I folowed this tutorial, I created as class, that holds all imports, viewrender and etc. Everything works fine, except one thing, the sphere, that I created is small, I only can imagine, that it realy exist on stage. Same problem where with other tutorials like the view and Scene.


Posted by killazceee on 07/15 at 03:50 PM

great tutorial , really easy to understand , but i have a problem , it might be only me , but everytime y open or preview my .swf file with 3d objects (Away3d) , everything is small and can barely see em , what could it be?


Posted by Jens C Brynildsen on 08/08 at 11:16 AM

@killazceee There was one problem with the release version of Flash Authoring that caused such a problem. If you make sure to update to the latest version of the Debug Player that should go away. You can find updates here: http://www.adobe.com/support/flash/downloads.html


Posted by simonlucas on 06/21 at 05:47 PM

Good tutorial . I think it’s very clear and I’m looking forward to completing the series which seems well structure and to build up concepts at a good pace. Finding this series swayed me when deciding between Proscenium, PaperVision and Away3D.

One comment is that for this to work you will need to be using the FP10 version of Away3D as there does not appear to be a ‘Sphere’ primitive in version FP11, amongst other changes.

Another thing was that it would not compile in Flash CS6…

If you see an error:

“ReferenceError: Error #1065: Variable _init is not defined.”

you will need to make sure you are targeting Player 10.1 (in my case I switched to Flash CS5.5)


Posted by Jens C Brynildsen on 07/04 at 03:01 PM

Glad that you like it and yeah:
for the latest version of Away3D you should use the updated tutorial series: http://www.flashmagazine.com/Tutorials/category/away3d4/

J

Submit a comment

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