Create a Classic 3D effect -Parallax- with Flash CS4

CATEGORIES: Flash, Tutorials | Lee Brimelow | August 11, 2009

Flash users have been asking for 3D support in Flash for years. Adobe has finally listened to the community and, with the release of Flash CS4, we can now play in that elusive third dimension. In this tutorial, we’ll create a classic 3D effect that’s known as parallax. In the past, this type of effect required a large amount of complicated ActionScript to pull off.

If you’d like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.

1 [OPEN THE FLA]
Download the tutorial file from www.layersmagazine.com and open 3D.fla in Flash CS4. The new 3D features are only accessible in Flash CS4 and will also only run in Flash Player 10. The Timeline contains a single layer named “back,” which contains the artwork for the sky in our scene. In the Library (Window>Library), you’ll see three movie clips that contain the artwork that we’ll use to build a typical neighborhood scene. Each of these clips will be set in 3D space to achieve the parallax effect.

2 [ADD THE HOUSES]
To achieve the parallax effect we’ll need to place each layer of the scene at a different Z position based on how far away they are from the camera. Click on the New Layer icon at the bottom-left of the Timeline. Double-click the name of the new layer and rename it “scene.” Now drag out a copy of the houses movie clip from the Library panel and place it so that the bottom-left corner of the clip is positioned at the bottom-left corner of the Stage. This row of houses will be the object that’s furthest away from the camera.

3 [POSITION THE HOUSES]
Now we’ll position the houses in 3D space. Select the clip on the Stage and twirl down the 3D Position and View section of the Property inspector. Change the Z property to 500. This pushes the clip away from the camera and as a result, makes it smaller. Now we need to scale the clip so that it’s approximately the same size as it was originally. With the clip selected, go to the Transform panel (Window>Transform) and scale the Width and Height of the clip to 160%. Now drag the clip back down to the bottom-left corner of the Stage.

4 [ADD AND POSITION THE GRASS]
Now we’ll follow the same steps to add some grass to the scene. Drag out a copy of the grass movie clip to the Stage. This grass will be across the street from the houses and thus, will be closer to the camera. Set the Z position of the grass to 200. This positions it away from the camera but not quite as far away as the houses. Scale the clip to 120% the same way you did for the houses and position it so that it’s at the bottom-left of the Stage.

5 [ADD AND POSITION THE TREE]
The last step in constructing our 3D scene is to add a tree that’s even closer to the camera than the grass. Drag out a copy of the tree movie clip to the Stage. For this clip we actually set the Z position to a negative value so that it’s very close to the camera. Select the clip on the Stage and then set its Z property to –200. Position it so that it’s somewhere offstage to the right. When we animate the scene we’ll reveal the tree.

6 [ADD SOME DEPTH OF FIELD]
Flash CS4 doesn’t have any actual camera controls like depth of field but we can fake it by adding some blur. Select the tree movie clip and then twirl down the Filters section of the Property inspector. Click on the Add Filter icon in the bottom-left of the panel and choose Blur. You should automatically see the resulting blur effect on the tree. Change the Quality of the filter to High. Adding the blur to the tree gives the illusion that the camera is focused on the houses.

7 [CREATE THE CONTAINER MOVIE CLIP]
Now that you’ve positioned the three movie clips, you’ll need to put them all inside a single container movie clip. Press Command-A (PC: Ctrl-A) to select the three movie clips and then choose Convert to Symbol from the Modify menu. Choose Movie Clip from the Type drop-down menu, give it a name of “scene,” and click OK. Now get the Selection tool (V) and move the container movie clip around the Stage. Cool, huh? You can now see the parallax effect live on the Stage. The tree is moving faster than the grass, which is moving faster than the houses.

8 [AN IMPORTANT BUG]
There’s a known bug that exists in Flash CS4 that you need to be aware of when you’re using 3D. If you have a movie clip that contains 3D elements, you won’t be able to go into Edit in Place mode anymore. Double-click on the scene movie clip to see what I mean. You’ll now be in Edit mode where all of the 3D elements are nowhere near the way you positioned them. For this reason, you need to make sure that you wait until you’re done positioning your elements before wrapping them in the container clip.

9 [SEE THE STACKING ORDER]
A great way to visualize the 3D stacking order of elements is by rotating your scene using the 3D Rotation tool. Hit the W key to select the tool and then rotate your scene around any of the axes to see the stacking order. One of the things that the new 3D support doesn’t do is Z-sorting. As you rotate the scene around, you may notice that the tree is always in front of the other objects even when it shouldn’t be. Just be aware of this limitation as you construct your 3D scenes.

10 [ANIMATE IN 3D]
Creating 3D animation is accomplished using the exact same methods that you use for 2D animation. Select the scene movie clip, Control-click (PC: Right-click) on it, and select Create Motion Tween. This enables the movie clip for animation and places a second’s worth of frames on the Timeline. To make the clouds background appear throughout the animation, Control-click (PC: Right-click) on frame 30 of the back layer and select Insert Frame. With the playhead at frame 30, move the scene clip to the left a little ways to create a new keyframe. Test the movie (Command-Return [PC: Ctrl- Enter]) to see the animation effect.

11 [ADD INTERACTIVITY]
The 3D effect can just as easily be controlled at runtime using ActionScript. Undo the actions you did in Step 10, then create a new layer and name it “actions.” Select the clip and give it an Instance name of “scene” in the Property inspector. Select the first keyframe in the actions layer and open the Actions panel (Window>Actions). Type in the ActionScript 3 code shown above. This creates an enter frame event where the scene clip is continuously repositioned on the X-axis based on the position of the mouse. Test the movie and move your mouse around to see the effect.

12 [ADD CONSTRAINTS]
You’ll notice that when you test your movie that there’s nothing stopping the scene clip from moving completely out of the frame. Type in the highlighted ActionScript code above into the Actions panel. This code tests for the boundaries of the scene clip and only moves it if it’s inside the bounds. Test the movie now and you shouldn’t be able to go beyond the bounds of the scene. What you now have can serve as the start of a game, as many games use this parallax technique.

More on Flash 3D

While Flash Player 10 includes the first native 3D features for Flash, the Flash community has been working on their own ActionScript-based 3D engines for a while now. Papervision3D (http://blog.papervision3d.org) is by far the most popular open-source library for Flash 3D development, and its features go far beyond the new native 3D support. With Papervision3D you can import 3D models, apply materials and shaders, and also use a variety of 3D primitive objects such as spheres and cubes. Away3D (www.away3d.com) is another popular 3D engine with a similar set of features.

It’s important to note that the new native 3D support was not created to compete with these amazing open-source libraries and, in fact, Adobe is adding special features to the Flash Player specifically to help them run faster. Flash Player 10 includes many low-level features, such as the ability to draw triangle meshes and the new Pixel Bender shader language—both are extremely useful for 3D engines. Away3D has already released a new Flash Player 10 version that takes advantage of these new features, and Papervision3D is currently in development on their next release, as well.

So this brings up the obvious question of when should you use which 3D technology. The new native 3D support in Flash Player 10 and Flash CS4 is primarily for simple 3D effects such as transitions. This allows designers to create 3D animation on the Timeline without having to do any ActionScript. Open-source libraries such as Papervision3D require a fairly high-level knowledge of ActionScript 3 and, thus, makes it inaccessible to most Flash designers. It’s also important to remember the limitations of the native 3D as discussed in Step 9 of this tutorial.

If you’re looking to build fully immersive 3D experiences like the Absolut micro-site www.absolut.com/iaaw built using Papervision3D, then you’ll have to buckle down and get good at ActionScript, as sites like this require an intense amount of coding. This site makes use of many advanced 3D features that are only available in Papervision3D and would be next to impossible to build using the native 3D features in Flash CS4 and Flash Player 10.

Back to Top

Get the latest tips, tricks and news delivered straight to your inbox.

• 
• Dragging an Object Between Documents
• TV Scanline Effect
• Trick to the Glossy Effect
• 3D Text
• Changing Type on a Path
• more tips