- 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
Scripting the Animation Controller
The Animation Controller clip takes on the tasks of tracking the mouse position and scrolling the different graphical layers accordingly. The script consists of three distinct sections, with the first running just once, the second running whenever the mouse moves, and the third running on each frame tick.
Placing the Movie Clip
The Animation Controller can be placed anywhere off-stage because it isn't meant to be seen. It's basically just a place to hang the animation script.
Select the Animation Controller layer.
-
Drag an instance of Animation Controller from the Library onto the movie, but off-stage, as shown in Figure 5 (X: 0, Y: –56.9).
In preparation for attaching the relevant scripts, open the Actions panel, set it to Expert mode, and drag it out to a reasonable size.
){kind=link}
Figure 5 Animation Controller.
The Animation Controller Movie Clip sits off-stage so that it is not visible as its drives the onscreen action.
Just Once: Initialization
This section of the animation control script is designed to run when the Movie Clip loads (an event that occurs just once). It sets up a few important variables and objects, and it declares custom functions that will be used in later steps. The script is nested inside an onClipEvent(load) handler.
With the Actions panel open and the Animation Controller clip selected, cut and paste the following lines of code into the Actions window:
onClipEvent(load) {
// Set Movie Constants
Width = 590;
ForegroundFactor = 4;
MidgroundFactor = 2;
BackgroundFactor = -1;
// Create Object Left|Right Pointers
ForegroundL = _root.Foreground1;
ForegroundR = _root.Foreground2;
MidgroundL = _root.Midground1;
MidgroundR = _root.Midground2;
BackgroundL = _root.Background1;
BackgroundR = _root.Background2;
// Functions for Swapping Pointers
function SwapForegrounds() {
Temp = ForegroundL;
ForegroundL = ForegroundR;
ForegroundR = Temp;
}
function SwapMidgrounds() {
Temp = MidgroundL;
MidgroundL = MidgroundR;
MidgroundR = Temp;
}
function SwapBackgrounds() {
Temp = BackgroundL;
BackgroundL = BackgroundR;
BackgroundR = Temp;
}
}
The first section of the script sets some movie-specific variables. Width refers to stage size—in this case, 590 pixels. Foregroundfactor, Midgroundfactor, and Backgroundfactor are all numbers that control the relative scroll speeds of each layer.
NOTE
Usually, all the scroll factors are positive. Because this is a cartoon example however, I've set the Backgroundfactor to -1, making the clouds move in the opposite direction to everything else. When you're done, experiment with different factor values to see what happens. A factor of 0 will freeze that layer.
Next, some pointer variables are created for each set of layer graphics (L for left, R for right). This is where the instance names that you added come in handy. Left and right pointers are created and initially are set to match whichever instances are actually to the left or right. The animation script will use these to control the position of all the graphics.
The final section of the script consists of three mostly identical functions. These simply switch the left and right pointers over for each layer, which is necessary whenever the positions of the graphics are switched during scrolling. Note that because these are functions, the code that they contain is loaded into memory but is not run until needed.
Mouse Movement: Setting Scroll Speed
This section of the animation script is a lot shorter and is nested inside an onClipEvent(mouseMove) handler. It is designed to note the horizontal position of the cursor whenever the mouse moves, and then calculate a scroll speed based on that position. Placing the cursor in the center of the stage results in a scroll speed of 0, and placing it on either side results in a positive or negative speed.
To set the scrolling speed according to mouse position, paste these lines below the code entered in the previous step:
onClipEvent(mouseMove) {
// Determine Scroll Speed by Mouse Position
ScrollSpeed = (_root._xmouse - (Width / 2)) / 100;
}