Away3D Programming Tutorial - Effects

VIEW THE DEMO
DOWNLOAD THE CODE

In the last tutorial I showed you how to get up and running with Away3D and Flex. It was a lot of code for what amounted to a simple result, but I assured you that it was going to be worth it. Here you will see why. This tutorial will make use of the code established in the last tutorial to build an application that demonstrates the use of the Flash filters with Away3D objects, and you'll notice that we only introduce one new class, and a few new functions.

EngineManager.as

First of all we need to make some changes to the EngineManager. We have added 3 new properties: blurFilterEnabled, glowFilterEnabled and filterAnimationsEnabled. Each is a Boolean, and each represents an option that the end user can change on the application.

Each of the three properties has two matching functions, on "getter" and one "setter" function. We have made use of the Inspectable tag to allow the Flash or Flex GUI builder to have access to the function, and set the default value to reflect the initial value of the underlying property. We also use the Bindable tag to allow any changes made to the underlying property to be propagated to any control that is data bound to it.

Effects.mxml

You can see how these new functions are used by the mxml file. We can set the initial state of the EngineManager via these functions through XML tags, and other controls, like the check boxes we have added, can have their state bound to these functions as well.

EffectMeshObject.as

Now we start getting to the meat of the project. The EffectMeshObject class MeshObject, and set the underlying model to have it own canvas by setting ownCanvas = true. Any Object3D (which is what our model is) can make use of the standard Flash filters as long as ownCanvas is set to true.

ApplicationManager.as

ApplicationManager is where the bulk of the code that relates to the application is held. You will notice in the startupApplicationManager function we create a new instance of the EffectMeshObject class, and move it so it is centred on the screen. We then create two filters: GlowFilter and BlurFilter. Both of these classes are part of the Flash/Flex SDK, and are not specific to Away3D.

Next (if engineManager.FilterAnimationsEnabled is true) we call the functions addInreasingGlowTween and addInreasingBlurTween. These functions set up the Tweener library to modify the filters properties over a period of time. Tweening will be covered in another tutorial, but you can see how it works from the source code if you wish.

Once the filters have been created and animated with Tweener we add them to an array, and then add the array to the filters property on the 3D model.

And that's it. If you ignore the extra code to allow specific filters and their animations to be turned on and off, adding a filter to a Away3D object is as simple as setting ownCanvas = true, creating a filter, adding it to an array, and adding the array to the filters property.

Filters are a very easy way to add a cool effect to you Away3D application, and there are many more filters than the two I have employed here (see here for a list). For a practical example of using the Flash filters in 3D to create a fog effect (using Papervision) click here.

Find more Flash tutorials here.