This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Using Away3D with Flex

Using Away3D with Flex

A common question about 3D engines is how to use them with the Flex framework. In this tutorial, we'll show you how to build your own Away3D Flex Component that will play nicely when the user changes the size of their browser or other components.

This tutorial assumes basic some knowledge about the Flex framework, Actionscript 3 and Away3D. It will take you through the process of making a visual Flex component containing an Away3D viewport that will work well with the Flex framework.

Figuring out what we need

The clever way to add Away3D content to Flex applications is to make a reusable MXML component that you can drag and drop into any application. Making a component in Flex is quite easy but we have to build our component off an existing class. What class do we use?

Away3D's visual class is View3D. This is where the 3D content is displayed and interactivity captured. The View3D class is a pure Actionscript 3 class that extends the Sprite class, so it has nothing to do with Flex. If we tried to add View3D using the addChild method in our Flex project, Flex would show Error #1034 in the Console and the compilation would stop. To add any DisplayObject class to a Flex application, it must extend the UIComponent class. This mammoth class with more than 9000 lines of code and comments adds a lot of the functionality that the Flex framework need to work it's magic. All the other visual components in Flex are based on this class and we should start here as well. Extending the UIComponent class is however not enough as this class knows nothing about Away3D.

To make our Flex component respond to events that happen in the framework, there are a few rules we need to follow. Adobe has a fairly good page on how to make Flex components. According to the page you have to implement the methods commitProperties(), createChildren(), measure(), layoutChrome() and updateDisplayList() to make it all work. This may sound daunting but, adding only createChildren and updateDisplayList will do the trick.

Building the component

We start making the MXML Component by selecting the folder we want it in and select File -> New -> MXML Component. Type in a suitable Filename such as AwayView, select UIComponent from the dropdown and click ok.

We'll have to add Away3D using Actionscript, so type <mx:Script and then close that tag. This makes Flex add a little extra such as the CDATA tag around where we'll type our code. We'll start by adding a View3D to the screen:

override protected function createChildren():void
{
    super.createChildren();
    view = new View3D();
    addChild( view );
    view.addEventListener(Event.ADDED_TO_STAGE, update);
}

When Flex starts building the visual contents of your application, it will check for the existence of the createChildren method. Everything that builds the visual appearance of your components goes in here. We start by calling the super-method and then go on to create our 3D view and add this to the stage. Note that we set the "view" to be a public variable so we can reach it outside the application. Using this we can control the 3D scene, add models, change cameras and more so this will be the only public property of our class.

When createChildren is called, our UIComponent will have it's dimensions stored in the values unscaledWidth and unscaledHeight. We use these variables in a separate method that we name update.

private function update(e:* = null):void
{
    view.x = unscaledWidth/2;
    view.y = unscaledHeight/2;
    view.clipping = new RectangleClipping({minX:-unscaledWidth/2,minY:-unscaledHeight/2,maxX:unscaledWidth/2,maxY:unscaledHeight/2});
    view.render();
}

This sets the center of our 3D view and sets up a RectangleClipping - a mask around the contents of our scene. If we did not add this clipping, our Away3D scene would fill the entire Flex application and we want to be able to control this. We've also added a view.render() command that will update the view as we scale the component.

The next method we need is updateDisplayList. This is called by Flex every time the layout changes and components may need to adjust their width and height. If these properties change, we'll want to adjust x, y as well as the clipping to reflect the new dimensions. We do this by calling update again and as well as the super method to make sure our UIComponent knows it's dimensions.

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    update();
}

That's it for the component. Now we can start using it in an example application.

Testing the component

In this sample application (click to open) we've added the Away3D component and the Away3D logo. Scaling the browser window will scale both the 3D view and the image. You can also grab the handle on the Divisor to give more space to either the 3D content or the logo.

This should be all you need to integrate Away3D with the Flex framework. If you need to do this for Papervision or another third party library, you can follow the method outlined here and the same goes for any kind of custom actionscript content. Click here to view or download the source for the Away3D Flex component.

Feel free to post feedback and links to applications where you've used the component in the comments.

 

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 dezomer on 02/10 at 03:48 PM

hi,

this could be very helpfull for me if it would work

i use felxBuilder 3 SDK 3.5

TypeError: Error #1009: Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht möglich.
  at away3d.containers::View3D/updateScreenClipping()[E:\PROJECT_DME\AWAY3D\src\away3d\containers\View3D.as:868]
  at away3d.cameras::Camera3D/update()[E:\PROJECT_DME\AWAY3D\src\away3d\cameras\Camera3D.as:305]
  at away3d.containers::Scene3D/update()[E:\PROJECT_DME\AWAY3D\src\away3d\containers\Scene3D.as:197]
  at away3d.containers::Scene3D/onUpdate()[E:\PROJECT_DME\AWAY3D\src\away3d\containers\Scene3D.as:63]
  at flash.events::EventDispatcher/dispatchEventFunction()
  at flash.events::EventDispatcher/dispatchEvent()


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

@dezomer Are you running the files from this tutorial unmodified? I’ve tested the files with Away3D for fp9/SDK 3.4 and Away3D for fp10/SDK 4.0.

In your Flex debugger, you should be able to see what objects are present at the time of the crash. Could you check if the component that contains the View3D has the “stage” property set to something other than “null”?

J


Posted by dezomer on 02/11 at 12:38 AM

i solved it like this

if (this.stage !=null){
view.render();
}

and this is absolute the only thing i changes ..

sorry 3.5 was not right i use SDK 3.4 too i think that the problem is that the stage is not yet finished

it’s the same when i work with a package   public class MainView3D extends Sprite
  {

***** the function is called and stage is also null !
private function MainView3D(){

loadComplete();
}

strange ...


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

That really is strange as when createChildren() is run, there should already be a stage and update() shouldn’t be called before that.

I’ll update the files to handle this case.

J


Posted by mrselfdestruct on 02/28 at 03:40 PM

Hi,

I’m beginner with away3d and your tutorials are very helpful. But the integration with flex gives some errors.
I’m working with Flashbuilder 4 and away3d 3.4

in the AwayView.mxml:
-Error #1046: Type was not found or was not a compile-time constant: View3D.
-Flash Error #1180: Call to a possibly undefined method View3D.
-Flash Error #1180: Call to a possibly undefined method RectangleClipping.

I have running the files from this tutorial unmodified.

Many thanks in advance!


Posted by alex_s on 03/08 at 01:58 PM

Thanks for the great tutorial, Jens!

How would one combine flex elements with away3d objects?

for example, if I wanted to load <mx:BarChart onthe the face of a cube?

woudl I have to create the <mx:BarChart 100% code rather than drag and drop onto the stage?

many thanks.
Alex


Posted by Jens C Brynildsen on 03/19 at 10:46 PM

@mrselfdestruct That really looks like Flex Builder can’t find the Away3D source files? You have the files downloaded and linked into your project?

@alex_s Yeah. This is an ever returning issue. It’s been discussed many times (as in this thread http://groups.google.com/group/away3d-dev/browse_thread/thread/2aa8257735def602/f0b9eb4d2e65415c?lnk=gst&q=Flex#f0b9eb4d2e65415c) but I don’t have a good answer for you.

If you use plain MovieClips it’ll work fine, but Flex components causes problems. Feel free to post the solution back here if you find one?


Posted by rctdeclan on 11/01 at 05:20 PM

Hi, I’m trying to make multiple views. I’ve tried adding the x and y values to the view.x and view.y like so:

view.x = unscaledWidth/2+x;
view.y = unscaledHeight/2+y;
view.clipping = new RectangleClipping(-unscaledWidth/2,                                  unscaledWidth/2,                                  -unscaledHeight/2,                                  unscaledHeight/2);
scrollRect = new Rectangle(x,                          y,                          unscaledWidth,                            unscaledHeight);

And it works fine, but you said I should always said the view’s x and y properties to half the width of the parent container. If I don’t add the current x and y values to the view, and the parent container isn’t at (0,0), my clipping doesn’t work properly.

How can the x and y values of the view change the views 3d-position system? (as described in this tutorial http://www.flashmagazine.com/Tutorials/detail/away3d_basics_the_view_and_the_scene/ )

Thanks in advance!

Declan


Posted by Jens C Brynildsen on 11/02 at 10:30 AM

Hi Declan,
I know this does not make sense but it’s just how it is. This is really just historical luggage. I’ve brought up the issue with the Away3D Team many times, but they decided against changing this since it would affect a lot of existing content. In other words - consistency is the reason.

As long as you wrap it in a Sprite (as described in the linked tutorial) all should work well.


Posted by rctdeclan on 11/03 at 10:09 AM

I have wrapped it in a Sprite, but the view’s position isn’t relative to the sprite! So if I move the sprite, the view stays at the same place. I think the view uses its relative position as an absolute position. I’ll try to draw a rectangle in the View3D class and i’ll do some tests!

Declan


Posted by Bertie on 12/30 at 01:24 PM

Thanks to the great tutorials on this website I can make interactive 3d models with Flash Builder and away3d.
The next step is to publish the swf’s of these models on a website. That’s a problem for me at this moment.

Is it possible to load several swfs (of several interactive 3d models) into one main swf?

An example:
I have made the following as3-files:
Two 3d buttons with away3d (swf_with_button_1.as and swf_with_button_2.as) and a main file (main.as).

What I would like to have is the following:
swf_with_button_1.swf and swf_with_button_2.swf are loaded into main.swf. So on your screen you see two 3d buttons.
swf_with_button_1.swf is on the left side of the screen and is small.
swf_with_button_2.swf is in the middle of the screen and is large.

When you hit the button on the left side, the two buttons (or swfs) are switching with a tween.
So swf_with_button_2.swf goes to the left side of the screen and becomes small and swf_with_button_1.swf goes to the middle of the screen and becomes large.

Is this possible?
I’m using away3d with Flash Builder and I have tried many things to make it work. But all I got is a white screen.
Is there maybe a tutorial that explains how to do something like this?

Submit a comment

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