42 – Buttons and Scripting

Objective:

  • Use JavaScript to control the Timeline or add interactivity to animations.
  • Place JavaScript code in frames on the Timeline.
  • Use the Actions panel to view JavaScript.
  • Add event listeners and stop actions.
Student-Friendly Objective:

  • I can use JavaScript to control the Timeline and add interactivity to animations.

Video Links:

Add Interactivity with Code Snippets in Animate CC

Using HTML5 Canvas in Animate CC: JavaScript Basics 

Topics Discussed:
  • HTML5
  • Code Snippets
  • JavaScript
  • Timeline
  • Layers
  • Event Listener
  • Stop Action
  • Button Symbols

Assignment:

  1. Open the “Pac-Man” animation created last week.
  2. Read the information in both of the above links to learn how to apply Code Snippets to create JavaScript stop actions and to control the position of the playhead during animation playback.
  3. Use the technique demonstrated in class on Friday and in the linked support pages to create a button called “Rewind” that replays your animation from the beginning.
  4. Use the same technique to create a second button called “Chase” that only plays the portion of your Pac-Man animation where Pac-Man chases the Blue Ghost off the stage.
  5. Save your work. Turn in your animation with functioning Rewind and Chase buttons, titled “Your Name – Pac Man Buttons.fla” to today’s Assignment Post “42 – Buttons and Scripting” on our Google Classroom page by the end of today.

Assigned: April 14th, 2017
Due Date: April 17th, 2017