Chapters & Exercises

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10

Animation Projects

 

Animation Online Resources:

Adobe

 

Chapter 8: Interactive Navigation

Chapter Objectives:

  • Create button symbols
  • Add sound effects to buttons
  • Duplicate symbols
  • Swap symbols and bitmaps
  • Name button instances
  • Write ActionScript 3.0 code to create nonlinear navigation
  • Identify code errors with the Compiler Errors panel
  • Use the Code Snippets panel to quickly add interactivity
  • Create and use frame labels
  • Create animated buttons

Chapter 8: Exercise

  1. Read and Complete: Adobe Animate CC Classroom in a Book Chapter 1 Tutorial (Submit in the Network Drive When Complete)

 

Chapter 8: Project

Introduction

Buttons are a common feature within many interactive sites and apps. Buttons take the user to different areas of a webpage and many outside sites. In this project, you will create a Button symbols for website navigation. You will create buttons so that its appearance changes depending on how the user interacts with it, which means you’ll be defining its Up, Over, Down, and Hit keyframes.

Project Files

none

Required Submission Files

Your final deliverables are the source .FLA document CALLED: Project8(YOUR INITIALS) Place the finished .fla in the Network Drive

Grading Rubric (5 Points)

You will be graded according to the following criteria:

  • How creative and expressive are your buttons?
  • Are your buttons immediately understandable or recognizable as Navigation?
  • Have you used the Up, Over, Down, and Hit states of the button symbol effectively and correctly?
  • Did you name your layers?
  • Did you follow directions?

Instructions

Consider the different approaches you can take in creating buttons for navigation. You may want to use icons, or perhaps you want to be more illustrative. Also think of how you can incorporate visual feedback in the button. When the user moves their cursor over the button or when they click the button, how can you change the button’s appearance to provide feedback that’s effective and consistent with the overall design and concept?

You will create 4 buttons for navigation called: Home, About, Products, and Contact. Use type, colors to represent the buttons.

  1. Create a new HTML5 Canvas and set the stage to 500 x 300.
  2. Create a symbol for each buttons and choose Button as the type of symbol.
  3. Insert keyframes for each of the Up, Over, Down, and Hit states in the Button symbol.
  4. Consider using multiple layers in the button symbol to organize your artwork.
  5. Define the appearance of the button by creating or importing graphics into each of the keyframes. Your button must exhibit different visuals for the Up, Over, and Down states.
  6. Place an instance of your button from the Library onto the Stage in 4 named layers.
  7. Save and submit your project accordingly: .FLA document CALLED: Project8(YOUR INITIALS) Place the finished .fla in the Network Drive