- Inside the Start File
- Putting Together the Pieces
- Scripting the Animation Controller
- On Every Frame: The Animation Script
- Mission Accomplished
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Putting Together the Pieces
Before we can get to any scripting, all the various symbols need to be laid out on the stage. The Background, Midground, and Foreground movie clips will then need to be given instance names so that they can be controlled with ActionScript.
Background
The Background layer of animation, in this example, contains some clouds that scroll across the sky. Because the sky is usually the farthest thing away in a scene, the clouds have been sized as the smallest objects in the movie. They will also move the slowest.
Select the Background layer.
Drag an instance of Background onto the stage. Position it by hand so that the rightmost cloud is sitting roughly halfway across the stage and close to the top. (If you want to use the Info panel for precise positioning, the coordinates in the example are X: –2152.0, Y: –11.9.)
Use the Instance panel to name this copy of Background as Background1.
-
Drag a second instance of Background onto the stage. Position it as shown in Figure 2. The two cloud halves should sit flush together (X: 312.0, Y: –11.9).
Use the Instance panel to assign the name Background2 to the second copy of Background.
){kind=link}
Why Two Copies?
To create the illusion of seamless motion, two copies of each graphic are used. That way, there's always one graphic in view and another off to the side ready to scroll on. The script attached to the Animation Controller clip will automatically move them in synchronization and make sure that they switch positions whenever necessary.
Figure 2 Name and position the Background.
The second copy of Background is positioned next to the first and is given the instance name Background2.
Midground
The Midground animation layer consists of some rolling hills and is designed to appear larger relative to the clouds in the background. They're fairly empty now, but the midground is a good place to add buttons or other animations, depending on whether you wanting to create a navigation scheme or interactive cartoon.
Select the Midground layer.
Open the Library, and drag an instance of Midground onto the stage. Position the graphic so that sits to the left of the stage, with the bottom of the hill aligned with the stage's lower edge (X: –2097.3, Y: 34.0).
Use the Instance panel to name this copy of Midground as Midground1.
-
Drag another copy of Midground onto the stage. Position it as shown in Figure 3 (X: -103.9, Y: 34.0).
Use the Instance panel to assign the name Midground2 to the second copy of Midground.
){kind=link}
Figure 3 Name the Midground.
The second copy of Midground is positioned next to the first and given the instance name Midground2.
Foreground (Almost Done!)
The Foreground layer is meant to look the closest and move the fastest. In this example, I've used the character White the Bull.
NOTE
Because White is quite narrow compared to the previous images (and much narrower than the stage), I've added a long 1-pixel line to his movie clip to make sure that it scrolls correctly. Your foreground image may be long and continuous, but, if not, you can use the line trick to maintain spacing.
Select the Foreground layer.
Drag an instance of Foreground onto the stage. Position it so that it sits completely off the left of stage, aligned with the lower edge (X: –2001.0, Y: 119.4).
Use the Instance panel to name the first copy of Foreground as Foreground1.
-
Place a second instance of Foreground on the stage. Position it as shown in Figure 4 (X: –1.1, Y: 119.4).
Use the Instance panel to assign the name Foreground2 to the second copy of Foreground.
NOTE
I've positioned the various layers differently for aesthetic reasons, but the scrolling script is quite flexible with regard to placement and layer sizing. Just make sure that each graphic is wider than the stage and that one copy is initially placed to the left of the stage. Also, although the copies of each graphic will be aligned automatically as soon as mouse movement triggers the animation, for a clean start, they should be pushed together manually.
){kind=link}
Figure 4 Name the Foreground.
The second copy of Foreground is positioned next to the first and given the instance name Foreground2.
Now that all the to-be-animated pieces are in place, complete the project by adding the Animation Controller.