Accessibility

Director Article

Tweening FX with the Chrome Library Set of 3D Behaviors for Shockwave 3D

Karl Sigiscar

Sylis Business Solutions

Using the timeline in 3D Studio Max, Lightwave or any other 3D tool, graphic artists and animators can tween material properties to achieve visually compelling effects. Now you can do the same without code in Director MX. Using the Chrome Lib behaviors, you can tween the diffuse color, the emissive color, the blend level (transparency), and the shininess of materials (shaders). You can also tween the fog color and the fog distance as well as the light color, the camera's field of view, the model's transform position/rotation, and the pixel aspect ratio.

An overlay is a bitmap attached to the camera and displayed in the foreground. A backdrop is a bitmap attached to the camera and displayed in the background. When the camera moves in the world, the overlays and backdrops remain at the same position. You can tween overlays and backdrop properties such as their location, rotation, scale and blend as you would 2D sprites . Additionally, you can change their image overtime to create animations. In other words, the Chrome Lib allows you to do on top of a W3D scene everything you can usually do with two-dimensional (2D) sprites in the score.

In this article, I will show you a number of effects you can effortlessly achieve with the Chrome Library set of behaviors. The Tweening FX behaviors are easily identifiable in the Chrome Library set of behaviors, as their icon bears a triple dot on the upper left corner.

Requirements

To complete this tutorial you will need to install the following software and files:

Macromedia Director MX



Sample Files



Download the free W3D files from TurboSquid.com

The Scene Fade Behavior with the olograma.w3d File

To start, you must first download, unzip, and copy the Chrome Library set of behaviors to the Director 3D Libs folder. On Windows, this is c:\program files\Macromedia\Director MX\Libs\3D. On Macintosh, this is Hard Drive | Applications | Macromedia Director MX | Libs | 3D.You can download the behaviors using the link at the beginning of this article. After installing the Chrome Library, select Window > Library Palette then 3D > Chrome Lib > 3D.

You re going to apply a fade in effect to the 3D scene by overlaying a black bitmap that automatically adapts to the size of the camera rectangle and by changing its blend over time (from 100 to 0; opaque to transparent). The lower the overlay blend value, the more visible the scene.

  1. Create a new movie.
  2. Import the goldfish_hq.w3d file into the internal cast.

  3. Drag and drop the oragrama cast member from the internal cast to the stage or to the score.

    The goldfish before the Scene Fade behavior has been applied to it

    Figure 1. The goldfish before you have applied the Scene Fade behavior to it.

  4. Drag and drop the Scene Fade behavior from the Chrome Lib onto the W3D sprite.

    The Scene Fade behavior

    Figure 2. The Scene Fade behavior

    The Scene Fade Parameters dialog box appears.

    The Scene Fade Parameters dialog box

    Figure 3. The Scene Fade Parameters dialog box

  5. Select fadeIn as Fade Type and black as Fade Color then click OK.

    Press Play in the toolbar or press the Enter key on the numeric keypad.

  6. Select Control > Play to play the movie.

    The movie starts and a black opaque overlay the size of the screen appears, hiding the goldfish. Then, the overlay blend decreases until the overlay becomes fully transparent.

The Light Color Tweening Behavior with the suv_ford_hq.W3D File

Next, you'll apply a light color tweening effect to a sports utility vehicle (SUV) to simulate the color of the sunrise.

  1. Create a new movie.
  2. Import the suv_ford_hq.w3d file into the internal cast.

  3. Drag and drop the suv_ford_hq.W3D sprite from the internal cast to the stage or to the score.

    The Ford SUB before the Light Color Tweening behavior has been applied

    Figure 5. The Ford SUV before the Light Color Tweening behavior has been applied

  4. Drag and drop the Light Color Tweening behavior from the Chrome Library onto the W3D sprite.

    The Light Color Tweening behavior

    Figure 6. The Light Color Tweening behavior

    The following Light Color Tweening Parameters dialog box appears.

    The Light Color Tweening Parameters dialog box

    Figure 7. The Light Color Tweening Parameters dialog box

  5. Uncheck Begin with the start color. Using the sliders, set red end color (255, 0, 0) as show in Figure 7 above. Click OK.

    Note: You can also enter the values directly in the Behavior tab of the Property inspector.

  6. Press Play in the toolbar, select Control > Play, or press Enter on the numeric keypad.

    The Ford SUV with the Light Color Tweening behaviour applied to it

    Figure 8. The Ford SUV with the Light Color Tweening behavior applied to it

    The applied behavior has the effect of the sun rising on the SUV. As you tween the color of the scene light, the SUV becomes red.

The Emissive Color Tweening Behavior with the tortoise_hq.w3d File

Now, you will apply a visual effect to the tortoise model by changing its emissive color overtime.

  1. Create a new movie.
  2. Import the tortoise_hq.w3d file to the internal cast.

  3. Drag and drop the tortoise sprite from the internal cast to the stage or to the score.

    The tortoise without the Emissive Color Tweening behavior applied to it

    Figure 9. The tortoise without the Emissive Color Tweening behavior applied to it

  4. Set the background to black in the 3D Model tab of the Property Inspector.

  5. Drag and drop the Emissive Color Tweening behavior from the Chrome Lib onto the W3D sprite.

    The Emissive Color Tweening behavior

    Figure 10. The Emissive Color Tweening behavior

    The following Emissive Color Tweening Parameters dialog box appears.

    The Emissive Color Tweening Parameters dialog box

    Figure 11. The Emissive Color Tweening Parameters dialog box

  6. Using the sliders, select a purple start color (255, 128, 255) and a yellow end color (255, 113, 0), as shown in Figure 11 above. Click OK.

    Note: You can also enter the values directly in the Behavior tab of the Property Inspector as shown in Figure 12 below.

    The Property inspector showing start color settings of the Emissive Color Tweening behavior

    Figure 12. The Property inspector showing the start color settings of the Emissive Color Tweening behavior

    Now press Play in the toolbar, select Control > Play, or strike the Enter key on the numeric keypad.

    The movie starts and the tortoise emissive color tweens from purple to yellow.

    Emissive Color Tweening start: purple

    Figure 13. Emissive Color Tweening start: purple

    Emissive Color Tweening end: yellow

    Figure 14. Emissive Color Tweening end: yellow

The Fog Tweening Behavior with the tyrannosaurus_rex_hq.w3d File

Next, you will apply a visual effect on the T-Rex model by changing the fog distance overtime.

  1. Create a new movie.
  2. Import the tyrannosaurus_rex_hq.w3d file into the internal cast.

  3. Drag and drop the T-Rex W3D sprite from the internal cast to the stage or to the score.

    T-Rex before applying the Fog Tweening behavior

    Figure 15. T-Rex before applying the Fog Tweening behavior

  4. Drag and drop the Fog Tweening behavior from the Chrome Library onto the T-Rex sprite.

    The Fog Tweening behavior

    Figure 16. The Fog Tweening behavior

    The following Fog Tweening Parameters dialog box appears.

    The Fog Tweening Parameters dialog box

    Figure 17. The Fog Tweening Parameters dialog box

  5. Check Fog Distance tweening at the bottom of the dialog box. Click OK.

    Press Play in the toolbar, select Control > Enter, or press the Enter key on the numeric keypad.

    The movie starts and the mist hides the T-Rex. Then, the fog becomes less thick over time and the dinosaur gradually appears.

    The realtime fog tweening animation playing.

    Figure 18. The real-time fog tweening animation playing.

    The T-Rex in the mist.

    Figure 19. The T-Rex in the mist.

    The Chrome Library acts as a 3D timeline that allows you to blend shader properties, model transform, the field of view of the camera, the fog color, the fog distance, backdrops, overlays and many other aspects of a 3D scene.

    Remember there are many tweening behaviors you can experiment with in the Chrome Library. You’re just a drag and drop away from achieving great looking effects!

If you liked this article and want to learn more about the Chrome Library set of 3D behaviors, read my other article Chrome Library Set of 3D Behaviors for Shockwave 3D.

About the author

Karl Sigiscar has been a multimedia and web developer since 1997. He developed edutainment CD-Roms with Director as well as dynamic websites. In late 2000, Karl joined the Director 8.5 beta program. Since then, he has delved deeper into the many possibilities of Shockwave 3D (bipeds, havok physics, particles, LOD). In 2002, Karl developed the Shockwave 3D architecture of the game Mogi Mogi for NewtGames as well as new ideas with a focus on 3D interactive model visualization, which are highly interactive (and responsive) product presentations, such as the Audi A8 in 3D with Gedas France. He designed the Chrome Lib set of 3D behaviors first to help graphic artists test their scenes by themselves in Director, then as a personal project with a focus on tweening FX. Karl thinks he has tweened everything possible: the color, the transparency, the fog color, the fog distance, the field of view and so on…

Now Karl works at Sylis Business Solutions, a software engineering company, as an ActionSctipt/Java developer.