Get $500+ of the best After Effects files, video templates and music for only $20!
Introduction to Molehill
videos

Introduction to Molehill

on May 17th 2011 with 19 comments
Tutorial Details
  • Platform: Flash (Flash Player 11)
  • Screencast duration: 70 mins

Final Product What You'll Be Creating

Download Source Files
Demo View It Online

This tutorial introduces the newest features of a future release of the Flash Player codenamed ‘Molehill’ (the final name will be Stage3D). Molehill enables full GPU rendering within Flash, allowing immersive 3D to be delivered not only to the browser but also to all devices that support compiled applications written in actionscript and Flash.

In this tutorial I not only show you how to get this latest beta version of the Flash Player, but also how to set up your development environment to enable creation of applications that leverage this great new feature. We’ll get hold of a copy of the latest build of Away3D, which has been built specially to take advantage of Molehill, and look at how to use it to display some amazing fully textured high poly 3D models all within the Flash Player.

Note: To follow this tutorial you’re going to need to download and install the latest Flash Player Incubator build. You can grab it over on Adobe Labs.

Section 1: Setting up Molehill

Molehill has been released as a beta version on the Adobe Labs pages, allowing developers to get to grips with what is possible with all this new version has to offer. In this video I will show you how to get hold of it and also outline how to set up your development environment to allow you to get started with building full 3D Flash apps.

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

Section 2: Playing With 3D

In order to be able to display 3D stuff in Flash you need to have some 3D models. Thankfully, the open source suite Blender 3D has tons of stuff available and what better to use than a model from their latest open movie ‘Sintel‘.

Here I explain how to export your model and prepare the files ready to import them into your project. We’ll also look at getting started with coding our application to get our models loaded into our project as efficiently as possible.

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

Section 3: Putting it All Together and Finishing Off

Finally we need to start adding textures to our models which have been loaded into the application. Here I explain what we need to do as well as making use of a class provided in the Away3D demos. We’ll be navigating around our model once it is displayed in Flash, as well as displaying updated text to the screen to allow our users to track the loading process.

Don’t like ads? Download the screencast, or subscribe to Activetuts+ screencasts via iTunes!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Originally from a fine art background, it took me a while to get in to the world of digital media, but now that I have, Flash has become my tool of choice. I currently work as a freelance flash designer developer, amongst other things, and strive to create engaging and creative applications for the web.  

Plus Premium
 
 
Add Comment

Discussion 19 Comments

  1. Frank Mawn says:
    May 17, 2011 at 5:41 am

    The quality of the sound/videos is horrible. Sorry.

    Reply
  2. mehmet says:
    May 17, 2011 at 6:45 am

    Thanks for the tut Shane.

    Reply
  3. Shane says:
    May 17, 2011 at 7:42 am

    If you view it in chrome and click ‘download’ you still get to watch it in the browser, in the webkit native media player and the quality is mint :) Chrome rocks!

    Reply
  4. Ryan says:
    May 17, 2011 at 9:58 am

    Is there a way, maybe in the stats, that you can tell if it truly is running in the GPU?

    Reply
    • Shane says:
      May 17, 2011 at 12:14 pm

      Hi Ryan, As long as you have’ wmode’ set to ‘direct’ in the html wrapper and also hardware acceleration enabled in your flash player settings then it will be running in the gpu :)

      Reply
      • thomas says:
        May 27, 2011 at 2:36 pm

        Thanks man! It is hard to find beginner tuts for molehill!

        Will you be doing more?

        Even if you don’t thanks for the tutorials helps me a lot!

  5. mutiu says:
    May 18, 2011 at 2:32 am

    Thank you for this tut….

    getting the source files would be a great help

    Reply
  6. adrian says:
    May 18, 2011 at 11:45 pm

    This may be the very first tut on Molehill in internet, anyway i havent seen anything about it yet

    Reply
  7. Daniel says:
    May 19, 2011 at 3:36 am

    Great tutorial Shane,

    Followed you till the end but getting a error:

    “T:\AS3 Classes\away3d\animators\skeleton\SkeletonPose.as:59: 1119: Access of possibly undefined property parentIndex through a reference with static type Joint.”

    Any suggestions

    Thanks

    Reply
  8. chp says:
    May 30, 2011 at 10:56 am

    I was so looking forward to see this, but I can’t understand a word. It’s very hard for not-native speakers to follow. :(

    Reply
  9. Raweden says:
    June 17, 2011 at 6:53 am

    Great tutorial! but the sound, as many have mentioned is terrible also the keyboard quite annoying :/

    Reply
  10. Ilya says:
    July 22, 2011 at 11:00 am

    Hi, When I am trying to run the demo I am getting this error:
    Error #1056: Cannot create property viewPort on flash.display.Stage3D.

    Reply
  11. Wrong title says:
    October 23, 2011 at 10:35 am

    Should rename this to Introduction to Away3d 4 Broomstick rather than molehill, I’ve come here for lowlevel stuff, not 3d framework.

    Reply

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.