Familiarity with ActionScript 3.0
Required Adobe products
- Flash Player 11 beta and playerglobal.swc. Download the Flash Player for your OS (Windows, Mac, linux) and browser (Internet Explorer and others) – (Download beta)
Additional required other products (third-party/labs/open source)
During Adobe Max (October 2010), Adobe introduced Stage 3D code named “Molehill”, a low level technology that brings native 3D capabilities to Flash 11. Five months later, Adobe released a developer version of Flash Player with support for Molehill called "Incubator", and so began a new era of high-quality 3D content in Flash.
Stage 3D brings fast 2D and 3D rendering to many platforms and uses the Stage3D API, a collection of low level API’s that leverage the GPU and produce fast rendering in the browser.
Mixamo and Flare3D are excited to announce a workflow that can take a user’s character, automatically generate a rig, apply animations, and bring it into Flash with a few clicks. This workflow is straightforward and fast.
Content creation to game engine workflow
Any animated character created with Mixamo can be easily published and visualized in a browser through Flare3D’s high quality interactive renderer. Mixamo provides animations that are automatically applied to either characters created by the user on Mixamo, or characters they have uploaded.
In order to animate a 3D character, the model needs to be “driven” by an underlying skeleton. The task of making the mesh ready for animation falls under the rigging process, which includes building a skeleton, binding the mesh to the underlying skeleton, and setting up controls to animate the character. If users choose to upload their own rigged character, they can select and customize any Mixamo animation and automatically apply it to the character. A non-rigged mesh can also be uploaded and automatically rigged by the Mixamo Auto-Rigger, which generates a skeleton ready for animations to be applied. If a user doesn’t have a character to upload, Mixamo has a set of animation-ready characters for sale, as well as an avatar creation suite. In addition to Mixamo’s human characters, there are quadruped characters with quadruped motions including dragons, dogs, horses and more.
The user can download the character in an .fbx or .dae format, ready for use with Flare3D. Flare3D supports the Collada file format (.dae, Collada 1.4.1) which is one of the primary file formats Mixamo outputs to. Mixamo animations can be loaded and displayed in Flare3D using a few lines of ActionScript. For example if you download Mixamo’s Carl character as a collada file from Mixamo.com, you would simply type:
scene.addChildFromFile( "Carl.dae" );
Figure 1. A Mixamo character displayed inside a browser.
Flare3D not only plays animations but also supports animation blending, pause, play forward/backward as well as changes on frame speed using Flash traditional methods like play(), stop(), gotoAndPlay(), gotoAndStop(), etc. Labels can be used to play particular animations like: run, walk, idle, talk, etc.
You can test an interactive demo here (you will need to install the Beta version of Flash Player 11 to view the demo): http://flare3d.com/demos/max/mixamo.html
Mixamo’s ease of use in the generation of 3D character animation unleashes a great potential for avatar creation, sport games, MMO´s, simulations and virtual communities running entirely in Flash. Thanks to Adobe’s Stage 3D technology, Mixamo, and Flare3D can draw hundreds of characters with thousands of polygons, with animations, textures and lights interactivity, giving life to your creations.
Figure 2. 1000+ skinned characters running in Flare3D.
To see how easy it is to have animated characters running in flash, let’s examine a basic end-to-end use case.
You can start with your own 3D character model or pick from the large variety of character models that can be found in online marketplaces. Mixamo offers a series of royalty free rigged characters that can be modified and used freely in Flash. If one way or another you have a rigged character (thus a character that can be animated) you can skip to step three. Otherwise, if your character is just a non rigged mesh (most common case for assets purchased online), step 2 will guide you through the process of rigging it. Once you have logged in to Mixamo, click the characters tab and then click the large button that says Upload Your Own Character. This will take you to the Upload Character page. Click the Upload button, and you will be prompted to select the character file for upload. Navigate to the character you would like and select it.
RIGGING THE CHARACTER (IF NOT ALREADY RIGGED)
Unrigged models are automatically detected by the Mixamo Auto-Rigger at the time of upload. If you have uploaded a character without a skeleton, you will be taken to a page where you can orient it to be facing forward. When this is complete, click the Rig button and you will be prompted to place markers for the knees, wrists, elbows, and head (see Figure 3). After placing a few markers, the Auto-Rigger generates a skeleton bound to the character’s mesh, allowing you to preview, test, and adjust rigging online in real time. Once you are satisfied with the results of the auto-rigging, the character may be animated using Mixamo’s real-time animation system.
Figure 3. The Mixamo Auto-Rigger.
Now that your character has been rigged, it will be in your character collection and avalible when you start building animations. You can enter a keyword into the site search to find an animation that fits your game. You can select that animation and begin editing it in the Mixamo Sequence Editor. Once there you can tweak the animation’s parameters as well as add clips to your sequence (see Figure 4). At any time during the sequence editing, you can select which character is being animated. Once motion is applied to the character, you may download the animated character in a preferred file format. In the Flare3D and Molehill pipeline, .dae (Collada 1.4.1) would be the best choice.
Figure 4. The Mixamo Sequence Editor.
SETUP THE FLARE3D ENVIRONMENT
At this point the animated character is ready to be generated in Flash using Flare3D. In order to display a 3D object in flash, some programming will be required. For the following steps, let’s assume that we have downloaded a file from Mixamo called walking_1.dae. This could be any dae file you would like but for the scripting example we will be using this name.
Remember, until Stage 3D is out of beta, the developer tools are not ready for direct use, and they need to be configured manually. This can be a tricky task so we will guide you through the basics. The workflow will be as follows:
- Create a new Flash Project and configure it properly.
- Organize assets and learn where to put them in the project. (for example .dae files).
- Hook up the ActionScript to the project.
You will need to install the following programs:
- Flash Builder: run the setup and follow the instructions. Default options will be sufficient.
- Flex SDK: this software is packaged into a Zip file so you need to extract it into a specific directory in your system. For this guide we will extract it in “C:\flex_45_molehill”
- Player 11 beta: Adobe provides a simple setup for this product. Simply run it and follow the instructions.
- globalplayer.swc: navigate to the directory where you extracted the Flex SDK and search the following path: “C:\flex_sdk_45_mole\frameworks\libs\player\10.2”. Replace the current “playerglobal.swc” with the new (Notice that the new file has a long name, rename it to playerglobal.swc) The new player can be directly downloaded here at the bottom of the page.
Figure 5. The new file must be re-named to playerglobal.swc.
- Flare3D 2.0 files are libraries. Keep these files handy. Soon we will see where to use them.
Important: At this point you want to make sure that Flash 11.0 or higher is installed in your browser. If it is not, the following tutorial will not work so it is good to make sure of this now. You can see what version of flash you currently are running here.
CREATE A NEW FLASH PROJECT
Launch Flash Builder and select File > New > ActionScript Project
Figure 6. Create a New ActionScript Project.
The next step is to give a name to your new project. For example, type MyFirst_Flare3D in the text box (see Figure 7).
Figure 7. Select Flex SDK version 4.5.1 in the New ActionScript Project dialog box.
Click finish and you should see something like this:
Figure 8. Flash Builder, after you have created a new ActionScript project.
Look at the left panel, this is the package explorer, and this is where you can see the project hierarchy. Here you have two relevant folders, “src” where the source code is allocated and “bin-debug” where your compiled Flash app is stored. Expand “src and the default package within it, and double click MyFirst_Flare3D.as. This is the main class in the project which means that the code in this file will be executed first when the application is launched. In the follwing steps we will write the necessary code to load a 3D Model.
Now we need to set up the final configurations. Go to Package explorer and over the root item (the project name) right click and select properties. Select ActionScript Compiler in the left panel. Here you need to define two settings. Configure the Flex SDK that will be used and add Additional compiler arguments to indicate that Flex must compile our app for Flash Player 11.
Figure 9. In Project Properties, use the Installed Flex SDK version 4.5.1.
- Click Configure Flex SDK, add the new SDK to the project and select it in the list. Click OK.
Figure 10. Add a compiler argument to identify the Flash Player version.
- Go to Additional compiler arguments and at the end, add the following line:
As we said Flare3D is a library, and you need to reference it into the project. To do this, go to the project properties screen. Select ActionScript Build Path in the left panel. Click Add SWC button, and browse to the Flare3D_.swc in the lib folder included in Flare3D distribution.
Figure 11. Add the Flare3D library to the ActionScript Build Path.
BRING THE CONTENT INTO FLASH BUILDER
Writing ActionScript code
This will be a simple step. Here you only need to open “MyFirst_Flare3D.as” in the Package explorer and replace the existing code with the following
public class MyFirst_Flare3D extends Sprite
private var scene:Scene3D;
private var model:Pivot3D;
public function MyFirst_Flare3D()
scene = new Viewer3D(this);
scene.camera.setPosition( 200, 200, -300 );
scene.camera.lookAt( 0, 50, 0 );
model = scene.addChildFromFile( "./assets/walking_1.dae", null, ColladaLoader );
Notice the following line:
model = scene.addChildFromFile( "./assets/walking_1.dae", null, ColladaLoader );
Here Flare3D is loading a 3D Model from the assets folder. This folder contains the 3D Collada file.
Important: If you don’t have an assets folder you will need to create one for the code to make sense. You can create it by right clicking bin-debug and selecting new and then selecting folder. Name the new folder assets.
Figure 12. Add an assets folder in the bin-debug folder.
Put the Collada file that you want to load here.
AUTHOR THE CONTENT FOR STAGE 3D
Before running your project, you willl have to add a few lines of text to the html file. Right click MyFirst_Flare3D.html and select Open With > Text Editor.
At line 49, add: params.wmode=”direct”;
At line 87, add: <param name=”wmode” value=”direct”/>
At line 90, add: <param name=”wmode” value=”direct” />
Now you’re ready to view your project in a browser.
Click on the run button in the toolbar. The browser will be launched and you will see your Flare3D project running.
Figure 13. To see your Flare3D project running, click the Run button.
Your default browser will be launched showing the loaded file. Remember to check that whatever browser is launching is running Flash 11 or higher.
Figure 14. Browser using Flash Player 11 runs your Flare3D application.
You can download the source code project here. To load it in Flash Builder you need to extract the zip content and select Import Flash Builder Project from the File menu.
Mixamo, Flare3D, and the future
As you can see, even at this early stage, Flare3D allows Mixamo characters and animations to be displayed in a browser with a simple workflow. Both Mixamo and Flare3D continue to look for ways to enable and empower developers so that they can focus on creating content, games, and applications rather than time consuming tasks that can be automated.
Mixamo offers the first online 3D character animation service and provides 3D game developers the power to customize and create professional-quality character animations at unprecedented speeds. In addition Mixamo has recently unveiled is revolutionary Auto-Rigger which can rig a character mesh in less than a minute and animate it in a few seconds. This combination of technology allows Mixamo users to move much faster while working on productions. Because Mixamo outputs to non-proprietary file formats, control remains with the user. A character auto-rigged with Mixamo can be furthur modified by a 3D artist/professional to meet specific criteria. Animation downloaded can be tweaked or changed by an animator at anytime during development. Mixamo aims to empower 3d artist to realize their vision faster and cheaper at a more professional level by allowing real-time high-level editing.
Flare3D is a platform for creating 3D content for Flash and takes advantage of the Molehill GPU rendering. Content generated with Flare3D for flash doesn’t require any additional plug-ins. There are some good reasons why a developer would benefit from using Flare3D to generate content. For example, using Stage 3D without the aid of a 3D framework is not easy and requires a specific knowledge of many 3D concepts that exceede the knowledge of most Flash developers. Flare3D transforms the complex to simple. Showing a 3D object in Flash with the Stage3D API requires hundreds of lines of code. With Flare3D, only two are necessary.
Flare3D is also planning to release an IDE called Flare Studio in the near future which will make developing and handling content for Stage3D easier and more powerful.
Flare Studio provides the opportunity for users to publish Mixamo 3D animations to any Flash enabled platform including PC, Mac, iOS, Android and RIM Playbook.
Mixamo continues to build up its library of customizable content as well as develop the technology behind the Auto-Rigger.
To learn more about Mixamo or Flare3D, visit their sites at http://www.mixamo.com and Flare3D.com and stay tuned for the release of Flare3D’s IDE.
Stage 3D, previously codenamed "Molehill" is a new method/model of 2D and 3D rendering developed by Adobe and supported with a new Stage3D API. Learn more about Stage 3D on Adobe Labs.