- Creating a New HTML5 Canvas Document
- Laying Out the Background Elements
- Drawing the Flowerpot
- Editing the Flower Graphic Symbol
- Animating the Flower Stalk with Inverse Kinematics
- Designing and Animating the Flower Head
- Create a Personalized Text Message
- Using JavaScript Code to Stop the Playhead
- Publishing Your Project for HTML5 Canvas
- Challenge!
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Using JavaScript Code to Stop the Playhead
ACA Objective 2.4
If you test the project at this point by choosing Control > Test from the application menu, you’ll see how well everything has come together. But the animation loops continuously and the actual text message blips by too quickly to digest as it exists on only one frame out of 65. 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 application menu item.
Actions Panel
The Actions panel is a simple code editor where you write all your frame scripts (Figure 4.36). It doesn’t matter what sort of code you’re writing in the Actions panel—both JavaScript and ActionScript are completely supported.
)
Figure 4.36 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. Additionally, you have 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.37) is a great way for those who are new to working with code to learn how to do some fundamental things within Animate CC projects. The snippets included are divided into three main categories: ActionScript, HTML5 Canvas, and WebGL. These correspond to whichever target platform you’re working with.
Figure 4.37 The Code Snippets panel
Within these three main categories are a number of additional, functional categories. Every target platform represented has snippets to manipulate the playhead: either stopping the timeline from playing or jumping around to different frames. Take a look at the possibilities that snippets provide.
Using JavaScript to stop your animation
Now 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 65 because that’s the frame you need to stop the playhead upon—but which layer?
Video 4.21 Stopping the Playhead
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 65 by choosing Insert > Timeline > Blank Keyframe from the application menu.
The only other thing you need to do is write some code within frame 65 on your Actions layer to stop the playhead.
With frame 65 of the Actions layer selected, open the Actions panel and place the cursor at line 1 (Figure 4.38). Type the following code within the panel:
this.stop();
Figure 4.38 Code entered in the Actions panel
)
It’s important to understand what this does. In the code, this refers to the present Stage—the main Stage. The instruction stop() is a method that tells the playhead on that Stage to stop moving immediately and stay there, 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 it in is the more direct route.
Notice on frame 65 that the keyframe has changed. In place of the empty circle, you now have a symbol that lets you know there is code on that keyframe.
){kind=link}