Tag Archives: Animate

Computer Graphic Design

37 – Symbols, the Library and the Timeline, and Motion Tweens

Objectives:

  • Identify and produce the three types of Symbols: Movie Clip, Button and Graphic.
  • Identify the parts of the Timeline including the Playhead, Frames, Layers and Layer Controls.
  • Identify the relevant timeline icons, including a Blank Frame, a Keyframe, an Empty Keyframe, and Content Frames.
  • Produce an HTML5 animation using multiple Motion Tweens.

Student-Friendly Objectives:

  • I can create a Movie Clip, Button and a Graphic Symbol.
  • I can identify the parts of the Timeline including the Playhead, Frames, Layers and Layer Controls.
  • I can identify a Blank Frame, a Keyframe, an Empty Keyframe, and a Content Frame.
  • I can produce an animation using Shape Tweens
  • I can produce an HTML5 animation using multiple Motion Tweens.
Video Links:

 

Topics Discussed:
  • Starting a new HTML5 document in Animate CC using the Welcome screen.
  • Library
  • Symbols
  • Movie Clip Symbol
  • Button Symbol
  • Graphic Symbol
  • Timeline
  • Playhead
  • Empty Frame
  • Content Frame
  • Keyframe
  • Blank Keyframe
  • Layer

Assignment:

  1. Produce a new Animate HTML5 canvas. Name it “Your Name – Symbols and Motion″
  2. Use the Shape tools we worked with last week to draw a shape, then convert it to a Movie Clip Symbol using the technique demonstrated in class and in the video.
  3. Make a new Layer in the Timeline.
  4. Repeat the previous two steps to create a Button Symbol and a Graphic Symbol, each on its own Layer.
  5. Use the process demonstrated in class and in the video to create three Motion Tween animations, one for each layer.
  6. Move each shape in a different direction.
  7. When you are finished, you should have three layers, each with a different Motion Tween animation.
  8. Turn in the completed “Your Name – Symbols and Motion” file to today’s Google Classroom post by the end of today.

Assigned: April 3rd, 2017
Teacher Pacing Due Date: April 4th, 2017

Computer Graphic Design

36 – Introduction to Adobe Animate CC

Welcome to Adobe Animate CC!
Where Adobe Illustrator is the industry standard vector graphics drawing program, Adobe Flash has been the industry standard in rich media production for the past decade. Flash allowed its users to produce everything from basic animations to interactive multimedia experiences, to applications such as games.
However, over time the standards have changed. A new web standard called HTML5 has become the common language of web browsers, and poor old Flash had to be left behind in favor of an interactive media application redesigned to meet the HTML5 standard’s requirements. For this reason, Flash is being sunsetted (slowly removed) and Adobe Animate was born. Adobe Animate works a lot like Flash, but adds a lot of new features that are only possible in HTML5.
We are going to spend the next couple of weeks learning about Adobe Animate and exploring its relationship to Illustrator, and how both programs can help you to develop rich interactive multimedia experiences for the web.
Objectives:
  • Identify the elements of the Animate interface, including the Stage, Timeline, Panels and Tool Panel.
  • Produce Rectangle, Rectangle Primitive, Oval, Oval Primitive and Polystar shapes, and discuss their properties.
  • Explain the difference between Object-Drawn shapes drawn with and Merge-drawn Shapes.
  • Explain the difference between Shape Primitives and standard Shapes.

Student Friendly Objectives:

  • I can  identify the elements of the Animate interface.
  • I can produce shapes using the Animate tools.
  • I can explain the difference between a shape drawn with Object Drawing enabled and disabled.
  • I can explain the difference between a Shape Primitive and a standard Shape.

Video Links:

How to Create and Publish an HTML5 Canvas Document 

Topics Discussed:
  • Start a new document in Animate CC using the Welcome screen.
  • HTML5
  • Canvas
  • Stage
  • Timeline
  • Panels
  • Tool Panel
  • Rectangle Tool
  • Rectangle Primitive Tool
  • Oval
  • Oval Primitive Tool
  • Polystar Tool
  • Object Drawing

Assignment:

  1. Produce a single HTML5 Canvas. Name it “Your Name – Animate Week 1″
  2. Edit the properties of the Stage to make a 30fps, 800 x 600 pixel stage for animation. Change the color of the stage to any color you like (other than the default white).
  3. Use the Shape tools to draw examples of the following shapes:
    1. Rectangle
    2. Rectangle Primitive
    3. Oval
    4. Oval Primitive
    5. Polystar Polygon
    6. Polystar Star
    7. Two overlapping Object drawn shapes (representing the properties of Objects)
    8. Two overlapping Merge drawn shapes, where one shape takes a “bite” out of the other
  4. Upload the completed “Your Name – Animate Week 1.fla” file to the “36 – Animate Week 1” assignment post on the Google Classroom page the end of Thursday.

Assigned: March 29th, 2017
Due Date: March 30th, 2017