Category Archives: Computer Graphic Design

Computer Graphic Design Assignments and Information

Adobe Animate: Shape Tweens

Objectives:

  • Produce an HTML5 animation using Shape Tweens .

Student-Friendly Objectives:

  • I can apply a Shape Tween to a drawn Shape.
  • I can produce an HTML5 animation using multiple Shape Tweens.

Video Links:

Understanding Tweens:
https://tv.adobe.com/watch/learn-flash-professional-cs4/getting-started-11-understanding-tweens/

Creating Shape Tweens:
https://helpx.adobe.com/animate/using/shape-tweening.html/

Understanding Frames and Keyframes:
https://tv.adobe.com/watch/learn-flash-professional-cs5/gs02-understanding-frames-and-keyframes-/

Topics Discussed:

  • Starting a new HTML5 document in Animate CC using the Welcome screen.
  • Timeline
  • Playhead
  • Empty Frame
  • Content Frame
  • Keyframe
  • Blank Keyframe
  • Layer
  • Shape Tools
  • Shape Tween

Assignment:

  1. Produce a new Animate HTML5 canvas. Name it “Your Name –  Shapes in Motion″
  2. Use the Shape tools to draw a shape. You may use Merge Drawing or Object Drawing, but I highly recommend you use Object Drawing. (Note: Do not use the Oval or Rectangle Primitives!)
  3. Use the process demonstrated in the video to create a Shape Tween that moves and transforms the shape. (i.e. change the shape, color or size and move the shape to a different part of the stage).
  4. Create a new layer and repeat this process with a different shape. Do this two more times, using a different motion and transformation each time.
  5. When you are finished, you should have four layers, each with a different Shape Tween transformation.
  6. Turn in the completed “Your Name – Shapes in Motion” file to today’s Google Classroom post by the end of today.

Assigned: April 18th, 2019
Teacher Pacing Due Date: April 19th, 2019

Adobe Animate: Symbols, the Library and the Timeline

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.

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.

Video Links:

Using Symbols:
https://tv.adobe.com/watch/learn-flash-professional-cs5/gs04-using-symbols/

Understanding Frames and Keyframes:
https://tv.adobe.com/watch/learn-flash-professional-cs5/gs02-understanding-frames-and-keyframes-/

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″
  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. Turn in the completed “Your Name – Symbols” file to today’s Google Classroom post by the end of today.

Assigned: April 15th, 2019
Teacher Pacing Due Date: April 16th, 2019