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 5: Advanced Motion Tweening

Chapter Objectives:

  • Use the Motion Editor to refine and create complex animation
  • Understand when to use the Motion Editor
  • Change the Motion Editor view
  • Edit a property curve
  • Copy and paste a property curve
  • Use eases to create more realistic motion
  • Add different eases to different property curves
  • Modify or remove an ease
  • Understand the difference between a property curve and an ease curve

Chapter 5: Exercise

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

Chapter 5: Project

Introduction

Motion tweens are often used to create transitions between images in slideshows. These transitions provide elegant, sometimes cinematic, ways to show successive images. For example, you might see the first image fade out while the second image fades in, or you might see the second image slide in from the left or right to cover the first image. In this project, you will create a transition between images.

Project Files

  • takeoff.jpg
  • astro.jpg
  • You can download the assets here

Required Submission Files

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

Grading Rubric (5 Points)

You will be graded according to the following criteria:

  • How smooth is the transition between images?
  • Is the transition too distracting, and does it get in the way of the content?
  • How creative is the transition, and does it support the content of the images?
  • Are the images shown in the most effective, best possible light?
  • Did you name your layers?

Instructions

Be creative with your approach, and think about what changes to apply to an instance in order to create the transition. If you want to fade the image, you’ll change the Alpha values in the color effect. If you want to move an image onto the Stage, you’ll change the position of the instance between the first and last keyframes. Consider also what meaning a transition suggests. How do you convey a long passage of time? How do you create a transition with drama?

Create the transition from the space-shuttle image to the astronaut image:

  1. Create a new HTML5 Canvas: 550px x 400px
  2. Import two bitmap images into Animate.
  3. Apply a motion tween to both of the images.
  4. Position the instances, or change the appearance of the instances between keyframes, to create a smooth transition between the first and the second images.
  5. Manage the distance between keyframes to control the timing of the transition.
  6. Think about what feeling is conveyed by your transition, This can be done by using scale and alpha transparency.
  7. Make sure you give enough time so the viewer can appreciate the first image before the second image appears.
  8. The movie should be 8-10 seconds long.
  9. Save and submit your project accordingly: .FLA document CALLED: Project5(YOUR INITIALS) Place the finished .fla in the Network Drive

Example: