How to easily add 3D content to your flash game

Document directory

• Other products with additional requirements (third-party/lab/open-source)

The following Adobe products are required:

• Flash Player 11 Beta and playerglobal. SWC. Download the Flash Player for your OS (Windows, Mac, Linux) and the browser (Internet Explorer and others)-(download beta)

Other products with additional requirements (third-party/lab/open-source)

• Prerelease version flare3d 2.0 (download)
• Myfirst_flare3d sample file for this project (download)
  

During the Adobe max (October 2010) Conference, Adobe introduced the stage 3D code program named "molehill", a low-level technology that brought local 3D functionality into flash 11. Five months later, Adobe released a developer version of Flash Player Named "Incubator" that supports molehill. As a result, people entered a new era of Developing high-quality 3D content using flash.

Stage 3D brings fast 2D and 3D rendering technologies to many platforms and uses corresponding stage3d APIs. This is a set of low-level APIs, they can take full advantage of GPU and produce quick rendering in the browser.

Mixamo and flare3d are excited to announce a workflow that can be used as a user role, automatically generating equipment, applying animation effects, and bringing them into flash with a few clicks. The workflow is simple and quick.

Game Engine workflow content creation

Any animation role created using mixamo can be conveniently published and displayed in a browser using the flare3d high-quality interactive Renderer. The animation effects provided by mixamo can be automatically applied to roles created by users in mixamo or the roles they upload.

To provide animation effects for a 3D role, the corresponding model must be "driven" by an underlying skeleton ". Tasks that support animation in mesh networks are included in the assembly process. They include creating a skeleton, binding the mesh network to the corresponding underlying skeleton, and setting controls to generate animation effects for the role. If users choose to upload their own equipped roles, they can select and customize any mixamo animation effects and automatically apply them to roles. Non-equipped mesh networks can also be uploaded and automatically provided by mixamo auto-rigger. This will generate a skeleton that can be applied and Support Animation effects.
If you do not have any roles that can be uploaded, mixamo can sell a set of animated roles and a set of avatar creation tools. In addition to the human role of mixamo, it also provides four-legged animals, including Dragons, dogs, horses, and other animals.

Users can download roles in. fbx or. Dae format, which can be used in flare3d. Flare3d supports the Collada file format (. Dae, Collada 1.4.1), which is one of the main file formats output by mixamo. Mixamo animations can be loaded and displayed in flare3d using several lines of ActionScript statements. For example, if you download the Carl role of mixamo from mixamo.com as a Collada file, you only need to enter:

scene.addChildFromFile( "Carl.dae" );


Figure 1. mixamo role displayed in the browser

F lare3d not only supports playing animations, but also supports blending by using traditional flash methods such as play (), stop (), gotoandplay (), and gotoandstop) pause, play forward/backward, and frame rate change. You can use tags to play special animations, such as run, walk, idle, and talk.

You can perform an interactive demonstration test here (you need to install the beta version of Flash Player 11
To watch the demo ):

Http://flare3d.com/demos/max/mixamo.html

Mixamo can be easily used to generate 3D role animations, which provide great potential for the full-running avatar works, sports games, MMO games, simulation and virtual communities in flash. By using Adobe's stage 3D technology, mixamo and flare3d can draw a large number of roles using thousands of polygon and energize your work through animations, textures, and interactive lighting.

Figure 2. More than 1000 skin planting roles running in flare3d

End-to-End Use Cases

To see how simple it is to run an animation role in flash, let's discuss an end-to-end use case.

1. Obtain a role

You can use your own 3D role model or select one of the many role models found in the online market. Mixamo provides a large number of licensed free device roles that can be freely modified and used in flash. If you have obtained an equipment role (an animated role) in any way, you can jump to step 3. otherwise, if your role is only a mesh without any equipment (most of the online purchases), step 2 will guide you through the corresponding process of configuring it. After you log on to mixamo, click the corresponding label, and then click the large button: upload your own character. In this way, you will jump
Upload character page. Click the upload button. The page prompts you to select the role file to be uploaded. Browse to the role you want to upload and select it.

2. Equip your role (assuming the role is still not equipped)

During upload, mixamo auto-rigger can automatically detect unassembled models. If you have uploaded a role without skeleton, you will be taken to a page where you can position it on the front. After you complete this operation, click the rig button and you will be prompted to place a tag on your knees, wrists, elbows, and headers (see figure 3 ). After several tags are placed, auto-rigger will generate a skeleton bound to the role's mesh, which allows you to preview, test, and adjust the device online in real time. Once you are satisfied with the automatic configuration adjustment results, you can use the real-time animation System of mixamo to generate animation effects for the role.

Figure 3. mixamo auto-rigger

3. Apply animation Effects

After your role is equipped, your role will be placed in your role set and can be used when you start to create an animation. You can enter a keyword in the search field to search for the animation effect suitable for your game. You can select an animation and edit it in the mixamo sequence editor. After editing, you can adjust the Animation Parameters and add clip to your sequence. You can select an animation processing role at any time when editing the sequence. Once an action is applied to a role, you can use the file format you like to download the role with animation effects. In the flare3d and molehill pipelines,. Dae
(Collada 1.4.1) file format is the best choice.

Figure 4. mixamo sequence Editor)

4. Set the flare3d Environment

Currently, you can use flare3d to generate an animated role in flash. Some programming code is required to use flash to display 3D objects. In the following steps, we assume that a name named
Walking_1.dae. This can be any Dae file you want, but we will use this name for this script example.

Remember, the developer tools can be used directly only after the beta version of stage 3D, and they need manual configuration. This is a complex task, so we will guide you through the corresponding basic steps. The corresponding workflow is as follows:

• Create a new flash project and configure it as appropriate.
• Organize components and understand where they should be placed in the project. (For example, the. Dae file ).
• Link the corresponding ActionScript to the project.
• Release.

Install software

You need to install the following programs:

• Flash builder: run the setup program and then follow the relevant instructions. The default options can meet the requirements.
• Flex SDK: the software has been packaged into a zip file, so you need to decompress it to a specific directory of your system. In this article, we will decompress it to "C: \ flex_45_molehill.
• Player 11 Beta: Adobe uses a simple setup program for this product. You only need to run it and then follow the corresponding instructions.
• Globalplayer. SWC: browse to the directory where you decompress the flex SDK and search for the following paths:
  "C: \ flex_sdk_45_mole \ frameworks \ libs \ player \ 10.2 ". Use the new playerglobal. SWC to replace the current playerglobal. SWC (note that the name of the new file is long and you rename it playerglobal. SWC ). You can download new players directly at the bottom of the page (here.

Figure 5. The new file must be renamed playerglobal. SWC.

• Flare3d 2.0 files are libraries. Place these files in easy-to-obtain locations. Because we will soon see where to use them.

Note:In this case, make sure that flash 11.0 or later is installed in your browser. If no installation is available, the following tutorial will not work, so it is best to confirm it now. Click here to view your current flash version.

5. Create a new flash Project

Start flash builder and select File> New> ActionScript project.

Figure 6. Create a New ActionScript Project

Next, provide a name for your new project. For example, enterMyfirst_flare3d(See figure 7 ).

Figure 7. Select flex SDK version 4.5.1 In The New ActionScript project dialog box

Click Finish to see the following situation:

Figure 8. Flash builder view after you create a new ActionScript Project

Check the panel on the left. This is the corresponding package explorer. Here you can see the hierarchical structure of the project. Here, you have two related folders: place the source code "src" and save the compiled Flash application "bin-Debug ". Expand the "src" folder and its default package, and double-click myfirst_flare3d.as. This is the main class in the project. It indicates that the code in this file will be executed first when the application is started. In the following steps, we will write some necessary code for loading a 3D model.

Now, we need to make the final configuration settings. Go to package explorer, right-click the project name on the root entry, and select Properties. On the left-side pane, select <G id = "1"> compiler </G>. Here you need to define two settings. Configure the flex SDK to be used, and then add the additional compiler parameter to indicate that flex must compile the application for Flash Player 11.

Figure 9. Use installed flex SDK version 4.5.1 In Project Properties

1. Click Configure flex SDK to add the new SDK to the project and select it in the list. Click OK.

Figure 10. Add a compiler parameter to identify the Flash Player version

2. Jump to the additional compiler parameter and add the following code at the end:

-swf-version 13

Add flare3d

As mentioned above, flare3d is a library and you need to reference it to the project. To achieve this, go to the Project Properties screen. In the left-side pane, select the ActionScript build path. Click Add SWC, And Then browse to flare3d _. SWC In the Lib folder that contains the flare3d classification.

Figure 11. Add the flare3d library to The ActionScript build path

6. Import content to flash Builder

Write ActionScript code

This is a simple step. Here, you only need to open "myfirst_flare3d.as" in package explorer, and then use the following code to replace the current code:

package { import flare.basic.Scene3D; import flash.display.Sprite; import flare.basic.Viewer3D; import flare.core.Pivot3D; import flare.loaders.ColladaLoader; 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 ); } } }

Pay attention to the following code:

model = scene.addChildFromFile( "./assets/walking_1.dae", null, ColladaLoader );

Here, flare3d loads a 3D model from the corresponding assets folder. This folder contains the 3D Collada file.

Important:If you do not have an assets folder, you need to create an assets folder to make the code meaningful. You can right-click bin-debug, select new, and then select folder to create it. Name the new folder
Assets.

Figure 12. Add an assets folder to the bin-Debug folder.

Place the Collada file you want to load here.

7. Create stage 3D content

Before running your project, you must add several lines of text to the corresponding HTML file. Right-click myfirst_flare3d.html and select open with> text editor.

Add Params. wmode = "direct" in row 49th ";

In row 87th, add: <Param name = "wmode" value = "direct"/>

In row 90th, add: <Param name = "wmode" value = "direct"/>

Now, you can view your project in the browser.

Run the application

Click the run button on the toolbar. The browser will start, and then you will see that your flare3d project is running.

Figure 13. To view the running status of your flare3d project, click the run button

Your default browser will start and display the loaded files. Remember to check whether the started browser is running flash 11 or later.

Figure 14. Use the Flash Player 11 browser to run your flare3d Application

You can download the source code here. To load the file in Flash builder, decompress the ZIP file and select import flash builder project from the File menu.

Next reading

For more tutorials, demos, and information about how to use mixamo, flare3d, and stage 3D, visit the relevant resource page of mixamo.com.

Mixamo, flare3d and Future Prospects

As you can see, even in the early stages, flare3d supports displaying mixamo roles and animations in a browser through simple workflows. Both mixamo and flare3d are constantly looking for ways to improve developers' efficiency so they can concentrate on creating content, games, and applications, you do not need to write time-consuming tasks that can be automatically completed.

MixamoIt provides the first online 3D role animation service and provides 3D game developers with the ability to customize and create professional quality role animations at unprecedented speeds. In addition, mixamo recently released a revolutionary auto-rigger that can equip a role within one minute and generate animated effects for it within several seconds. This technology combination allows mixamo users to move more quickly when creating products. Because mixamo can output non-private file formats, and the user has control. The role of automatic mixamo equipment can be further modified by 3D painters/professionals to meet specific standards.
During development, the animation producer can adjust or change the downloaded animation at any time. Mixamo is designed to improve the capabilities of third-party painters to achieve their vision goals faster and more economically by supporting real-time advanced editing at a more professional level.

Flare3dIs a platform for creating 3D content for flash. It can take full advantage of the molehill GPU rendering function. The content generated for flash through flare3d does not require any additional plug-ins. There are indeed some factors that allow developers to benefit from using flare3d to generate content. For example, it is not easy to use stage 3D without the assistance of a 3D framework, and it requires knowledge of many specific 3D concepts beyond the knowledge of most Flash developers. Flare3d can simplify complexity. Hundreds of lines of code are required to display 3D objects in Flash using the stage3d API.
With flare3d, you only need two lines.

In addition, flare3d plans to release an IDE named flare studio in the near future, which makes it easier but more effective to develop and process stage3d content.

Flare Studio provides users with the ability to publish mixamo 3D animations to any platform that supports flash, including PC, Mac, IOS, Android, and rim playbook.

Mixamo is still building its own custom content library and developing technologies supporting auto-rigger.

For more information about mixamo or flare3d, visit their website http://www.mixamo.com and flare3d.com, and stay tuned for the release of flare3d IDE.

Stage 3DThe original code name is "molehill", which is a new method/model for 2D and 3D rendering developed by Adobe and supported by a new stage3d API.

For more information, visit stage 3D on Adobe Labs.