Stage3D & Flex Demo w/ Source

Posted: January 26th, 2012 | Author: | Filed under: ActionScript, Adobe, AIR, Development, Flash, Flex, Mobile | Tags: , , , , , , , | 17 Comments »

Back in the summer, I was lucky enough to get my hands on some early builds of Stage3D for mobile. I built some simple examples, including basic geometric shapes and simple 3D bubble charts inside of mobile Flex/AIR applications. I have been asked numerous times for the source code, and I’ve finally given in, and am sharing some source code.

I am not posting the full mobile application source code, since Stage3D for mobile is not yet available. However, I have ported the 3D bubble chart example to run in a Flex application targeting the desktop (Flash Player 11). The bubble chart example extends the concepts explored in the basic geometric shapes example.

Before you say “shoot, he didn’t give us the mobile code”, let me explain… When I ported the code from the mobile project to the desktop Flex project, all I changed was code specific to the mobile Flex framework. I changed <s:ViewNavigatorapplication> to <s:Application> and the corresponding architecture changes that were required, and I changed the list item renderers to Spark item renderers based on <s:Group> instead of mobile item renderers.   In the mobile item renderers, all my drawing logic was done using the ActionScript drawing API.  For simplicity in the port, I just used <s:Rect> to add the colored regions in the desktop variant.

That is all I changed!  

The stage3D code between the desktop and mobile implementations is identical.    You can see the desktop port in action in the video below:

Or, you can test it for yourself here:

The source code was intended to be exploratory at best… I was simply experimenting with hardware accelerated content, and how it can be used within your applications.   There is one big “gotcha” that you will have to watch out for if you want Stage3D content within a Flex application… Stage3D content shows up behind Flex content on the display list.   By default, Flex apps have a background color, and they will hide the Stage3D content.   If you want to display any Stage3D content within a Flex application (regardless of web, desktop AIR, or mobile), you must set the background alpha of the Flex application to zero (0).  Otherwise you will pull out some hair trying to figure out why it doesn’t show up.

The source code for the web/Flex port of this example is available at:

This also requires inclusion of the Away3D library, available at:

You can check out my original posts, showing Stage3D on mobile here:

You can also check out a video of this code running on a mobile device (Samsung Galaxy Tab 10.1) below:

Enjoy!

17 Comments on “Stage3D & Flex Demo w/ Source”

  1. 1 Emil said at 6:37 AM on January 27th, 2012:

    Does this mobile demo run on iPad?

  2. 2 Andrew said at 10:17 AM on January 27th, 2012:

    Stage3D is not available on mobile devices yet. Once it is available, yes, it will run on both iOS and Android.

  3. 3 Andrew said at 10:20 AM on January 27th, 2012:

    Correction: Stage3D is already available for the BlackBerry Playbook, and iOS and Android will be supported in the future.

  4. 4 Nauman said at 3:49 AM on February 2nd, 2012:

    Stage3D is available but the read only vector array (stage.stage3Ds) is always null.
    This is the issue in the 3D development yet, but i am hopeful for some good solution by Adobe

  5. 5 Andrew said at 4:37 PM on February 2nd, 2012:

    Stage3D is not yet enabled for mobile devices. This is why it is always null if you attempt to access it.

  6. 6 fox said at 3:11 AM on February 3rd, 2012:

    Hi Andrew,you said Stage3d is not available in Android and IOS yet.but i saw your application has already run in samsung galaxy tablet.does galaxy’s OS is BleckBerry?

  7. 7 Tomdog said at 11:23 AM on February 4th, 2012:

    Why you can use Stage3D in mobile devices in this vedio?

  8. 8 Andrew said at 10:22 AM on February 6th, 2012:

    That video shows a prerelease build of the Stage3D capability on Android. The device shown is a standard “off the shelf” Samsung Galaxy 10.1. Stage3D is is not yet publicly available.

  9. 9 Andrew said at 10:23 AM on February 6th, 2012:

    That video shows a prerelease build of the Stage3D capability on Android.

  10. 10 Richard said at 2:54 PM on February 20th, 2012:

    I’m using Flash Builder ver 4.6 and am trying to create a simple, bare-bones project using a Flex Mobile Project + away3D and am having the worst luck. I keep getting the following error (even with direct):

    Cannot access a property or method of a null object reference.
    at away3d.containers::View3D/updateBackBuffer()[C:\Program Files (x86)\InstalledSoftware\away3d-core-fp11\src\away3d\containers\View3D.as:460]
    at away3d.containers::View3D/render()[C:\Program Files (x86)\InstalledSoftware\away3d-core-fp11\src\away3d\containers\View3D.as:486]

    Is there any way you could post/send an example project that works with Flex + Mobile + Away3d ?

    Thanks

  11. 11 Andrew said at 2:56 PM on February 20th, 2012:

    Stage3D is not enabled for mobile projects. It has not been publicly released yet.

  12. 12 Richard said at 3:39 PM on February 20th, 2012:

    Thanks for the speed response…very helpful. Do you haven any ideas as to when it will be released?

    Thanks,
    Richard

  13. 13 Andrew said at 3:50 PM on February 20th, 2012:

    Sorry, the date isn’t public yet… All I can say is “soon”.

  14. 14 Patil said at 2:21 AM on February 22nd, 2012:

    Hi,

    Can you please tell me which version of Flex SDK and Away3D you are using to compile your demo app.

    Thanks

  15. 15 jack said at 3:40 AM on February 22nd, 2012:

    May be you should put that in the post above.

    “Stage3D is not enabled for mobile projects”

  16. 16 Andrew said at 12:06 PM on February 22nd, 2012:

    Jack, that is mentioned in the post above – “Stage3D for mobile is not yet available”

  17. 17 Andrew said at 12:09 PM on February 22nd, 2012:

    Patil, That uses the Flex 4.6 SDK with the latest version of Away3D. I did not keep track of the exact build number, but I am pretty sure it will work with the 4.0 beta version available at: http://away3d.com/download/

Leave a Reply

    •