Programming Depth: Interactive Movement - Flash 3D: Animation, Interactivity, and Games - page 101

Exercise 4.2: Parallax Scrolling Under User Control
This exercise walks you through a similar process for scripting parallax scrolling using
bitmap art. The completed version is provided in the Chapter 4 folder on the CD. To see
the finished results, play 4_2_parallaxControl_DONE.swf (Figure 4.14). Move the
cursor back and forth across the Stage to change the direction of the scroll.
Figure 4.14 Finished parallax scrolling (4_2_parallaxControl_DONE.swf)
Step 1: Getting started
Open the file 4_2_parallaxControl.fla in the Chapter 4 folder on the accompany-
ing CD. This Flash movie contains the artwork you need to complete this exercise. The
Timeline contains four layers: background , middleground , walker , and foreground .
The walker layer contains the walk cycle from Chapter 3. The boy will remain in this
position on the Stage. The illusion of movement and depth will be achieved by animat-
ing the environment around him.
Before you start coding, let's deconstruct how the bitmap images were created in
Photoshop. As discussed in Chapter 3, for parallax scrolling, the artwork's width must
be at least twice the width of the Flash Stage. Get into the habit of figuring out the
Stage size you will use. The default size is 550 5 400 pixels. Other common Stage sizes
are 640 5 480 pixels and 800 5 600 pixels. This exercise uses the default settings.