Using JavaScript Code to Stop the Playhead
ACA Objective 4.7
If you test the project at this point by choosing Control > Test, you’ll see how well everything has come together. But the animation loops continuously and the actual text message blips by too quickly. You need to stop that playhead so the viewer can read the message.
Working with code in Animate CC
Whether you’re working with ActionScript or JavaScript in Animate CC, the initial workflow is basically identical. Code can be placed on the timeline on specific frames to instruct the project to perform instructions in various ways. The two main panels you’ll deal with when writing simple code are the Actions panel and the Code Snippets panel. You access both from the Window menu.
Actions Panel
The Actions panel is a simple code editor where you write all your frame scripts (Figure 4.47). It doesn’t matter what sort of code you’re writing in the Actions panel—both JavaScript and ActionScript are supported.
)
Figure 4.47 The Actions panel
Of course, you can use ActionScript only in an ActionScript-based project and JavaScript only in an HTML5-based project. Frame scripts are the pieces of code you bind to certain frames along the timeline. On the left side of the panel is a sidebar, which makes it easy to jump around to different pieces of code located on different objects and frames.
Code Snippets Panel
Working in the Code Snippets panel (Figure 4.48) is a great way for those who are new to working with code to learn how to do some fundamental things in Animate CC projects. The snippets included are divided into three main categories: ActionScript, HTML5 Canvas, and WebGL. These correspond to the target platform you’re working with.
Figure 4.48 The Code Snippets panel
Within these three main categories are a number of additional, functional categories. Every target platform represented has snippets for manipulating the playhead: either stopping the timeline from playing or jumping around to different frames.
Using JavaScript to stop your animation
VIDEO 4.23
Stopping the Playhead
Next you’ll stop that playhead and give your text more screen time with a little JavaScript. The first thing you need to do is decide where to place the code. You’ll use frame 144 because that’s the frame you need to stop the playhead on—but which layer?
It’s best practice in Animate CC to create a layer called Actions where all your frame scripts will be placed. Not only does this make it easy to find any of your code, but it also keeps the code separate from your visual assets that exist in other layers.
Create a new layer and name it Actions.
Insert a blank keyframe on frame 144 (the 6-second marker) by choosing Insert > Timeline > Blank Keyframe.
The only other thing you have to do is write some code in the last frame of your Actions layer to stop the playhead.
With the final frame of the Actions layer selected, open the Actions panel and place the cursor at line 1 (Figure 4.49). Type the following code within the panel:
this.stop();
Figure 4.49 Code entered in the Actions panel
)
){kind=link}
It’s important to understand what this does. In the code, this refers to the present Stage—the main Stage. The instruction stop() tells the playhead on that Stage to stop moving immediately and stay in place, effectively stopping the animation. That’s it! You could certainly use the Code Snippets panel to do this, but it is so simple that typing the code is the more direct route.
Notice on frame 144 that the keyframe has changed. In place of the empty circle, the keyframe now bears a stylized lowercase a that lets you know there is code on that keyframe.