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:
- Produce a new Animate HTML5 canvas. Name it “Your Name – Shapes in Motion″
- 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!)
- 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).
- 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.
- When you are finished, you should have four layers, each with a different Shape Tween transformation.
- 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