Animation with ActionScripts
Tweens aren’t the only way to animate in Cool Motion; you can use ActionScription to change the position or shape of any object to substitute--in some cases--for motion tweens and shape tweens.
In this example we’re going to show how to script a loop that creates a neverending animation on a single frame, by advancing the X (horizontal) position of a movie clip symbol with each time that Cool Motion checks a frame (12 times per second at the default frame rate).
Start off by creating a movie clip on your main stage. You don’t need to name the instance, but you can if you’d like, just for the sake of forming good habits.
Select the movie clip and open the Actions panel. First we’re going to set the position of the movie clip in reference to the stage when the movie first loads; for that we’ll need an onClipEvent.
onClipEvent(load){
} We’re using the load function because we only want it to move to the starting position when the movie first opens, not every time it cycles over and over that single frame as it loops.
Now, we’ll add the code that tells Cool Motion how to position the movie clip when it loads:
onClipEvent (load)
{ this._x = 10;
} _x is the horizontal position of the object, counted in ascending pixels from the left edge of the stage. So what we’ve just told Cool Motion is that when the movie loads, it needs to take the current movie clip--referred to as this, thus pointing Cool Motion to the symbol that the ActionScripts are assigned to--and set its horizontal position so that its center point is 10 pixels from the left edge of the stage. It’s like Cartesian coordinates, when graphing on a plane using (x,y). We’ve just set x as 10.
All that the current script does is set the starting point, though. Now we need to add new scripts to move the symbol away from the starting point, one frame at a time. Since we’re only working with a single frame, but causing Flash to cycle over that same frame 12 times per second (12 fps standard frame rate for the web), that means that we need to tell Cool Motion to do something each time it passes over that frame again. For that we’ll need another onClipEvent.
onClipEvent (load)
{ this._x = 10;
}
onClipEvent (enterFrame) {
}
Using enterFrame does exactly what I described above: it checks the functions inside the onClipEvent each time the movie cycles over a new frame, or the same frame repeatedly.
We’ve set the when, now we need to set the what:
onClipEvent (load){
this._x = 10;
}
onClipEvent (enterFrame) {
this._x = this._x+5;
}
Before we said that this._x (the current symbol’s horizontal position) was at a point 10 pixels from the left side of the stage; now we’re telling Cool Motion that each time it enters that frame, it needs to check to take the position of the symbol and add 5 pixels to it, moving it 5 pixels to the right. That’s sliding 60 pixels per second, because rather than resetting, it instead builds on itself.
To simplify: Say we’re working on twelve frames instead of one. We’ll call the position of the symbol P.
Frame 1: P=10; P=P=5, or P=10+5, so P=15.
Frame 2: P=P+5, or P=15+5, so P=20.
Frame 3: P=P+5, or P=20+5, so P=25.
Frame 4: P=P+5, or P=25+5, so P=30.
Frame 5: P=P+5, or P=30+5, so P=35.
Frame 6: P=P+5, or P=35+5, so P=40.
Frame 7: P=P+5, or P=40+5, so P=45.
Frame 8: P=P+5, or P=45+5, so P=50.
Frame 9: P=P+5, or P=50+5, so P=55.
Frame 10: P=P+5, or P=55+5, so P=60.
Frame 11: P=P+5, or P=60+5, so P=65.
Frame 12: P=P+5, or P=65+5, so P=70.
So at the start of one second, position P was 10 pixels away from the left edge of the stage; at the end of one second/12 frames, P had cycled through the ActionScript so many times that P is now 70 pixels away from the left edge of the stage.
The previous script will work if you just want your object to move once; the Flash movie won’t recognize the far/right edge of the stage, so the object will just keep moving and the ActionScript will keep cycling long after it’s out of sight, unless we add some kind of conditions to determine when it should stop moving the symbol. For that we can use an if statement, inserted inside the onClipEvent(enterFrame) and nested outside of the this._x=this._x+5:
onClipEvent (load){
this._x = 10;
}
onClipEvent (enterFrame) {
if (this._x<=625)
this._x = this._x+5;
}
}
For the condition of my if statement, I’ve told Cool Motion that it’s only supposed to move my symbol to the right by 5 pixels if its current center point’s position is less than or equal to 625 pixesl from the left edge of the stage. This prevents the symbol from moving any farther beyond x coordinate 625.
Lastly, we need to tell Cool Motion what to do in all other existing conditions that don’t satisfy the if statement (in this case, in any point where this._x is greater than 625). To do this, add a new else statement below and outside of the if statement, but still nested inside the onClipEvent(enterFrame):
onClipEvent (load){
this._x = 10;
}
onClipEvent (enterFrame) {
if (this._x<=625) this._x = this._x+5;
}
else {
this._x = 10;
}
}
What that tells Cool Motion is that in all other conditions, when this._x is not less than or equal to 625, then this._x needs to return to x coordinate 10, taking the movie clip symbol back where it started.
