Tag Archives: Animate

Computer Graphic Design

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

Computer Graphic Design

41 – Animate CC: Working with Sound

Objective:

  • Utilize sound in Animate CC movies.
  • Import sound to the Stage or the Library.
  • Open the Sound Properties window to change the compression of a sound.

Student-Friendly Objective:

  •  I can import and use sound in my Animate CC animations, and use the Sound Properties window to change the compression level of sounds.

Tutorial Link:

How to Use Sounds in Animate CC

Required Files:
Topics Discussed:
  • Import
  • Extend Timeline
  • Keyframes
  • Layers

Assignment:

  1. If you have not yet completed the “Pac-Man” animation we started last week, you should do so before attempting this assignment.
    1. Refer to Lesson 39 if you still need to know how to make Pac-Man’s mouth open and close while he moves.
    2. Refer to Lesson 40 if you need to know what the Pac-Man animation should look like when you’re finished and ready to start today’s Lesson.
  2. Locate the audio files at the top of this posting. You will find “pacman_beginning.wav” and “pacman_chomp.wav”
  3. Access today’s tutorial link and read through the information on Using Sounds in Animate CC on the Adobe website. Use the information provided to embed these audio clips into your animation. Extend the timelines to accommodate the “pacman_beginning” audio file length. Try to match the “pacman_chomp” sound to when Pac-Man eats the dots by moving the clips in the timeline to match the keyframes on the Dots layer.
  • If you don’t have dots for Pac-Man to eat, add some!
  • Remember you’ll need to use keyframes to get Pac-man to eat the dots.

Save your work. Turn in your animation (now with embedded sound) titled “Your Name – Pac Sounds.fla” file to today’s Google Classroom  assignment post by the end of today.

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