Adobe Exchange - Jamie Leduc

ANIMATION 35S (ANHR35S/MOHR35S)

“Animation offers a medium of story telling and visual entertainment which can bring pleasure and information to people of all ages everywhere in the world.” – Walt Disney. This course will allow students to enter the creative world of animation. The main goal of the course is to develop the student’s creative skills while exploring the principles of animation, stop-motion, character design, vector design, motion graphics, cell animation, lip syncing, compositing and video-rendering. This stand-alone ICT course is made up of the following 2 half credit ICT framework courses: 2D Animation (ANHR35S) and 3D Modelling (MOHR35S).

Course Outline: Animation Course Outline 2015

Course Assessment: Unit 1 - 35% of final grade Unit 2 - 35% of final grade, Hands-on Exam Activity - 20% of final grade Final Written Exam - 10% of final grade.

Local Computer Digital Portfolio, cloud back-up and USB Drive:

1. Create a new First Last name_Animation subfolder in your thawed drive, 2. Create Unit 1 sub-folder, Unit 2 sub-folder, Media sub-folder, Test sub-folder and Summative sub-folder Remember that the Data on the thawed drive may be deleted at any time, so back up your work daily!

3. Students should also set up a cloud drive (onedrive or dropbox) and back-up their work daily. Send a view invite to teacher: jleduc@wsd1.org

Recommended Course Material/Resources:

- USB: One 8 or 16 GB memory stick

- Pencils (drawing artist pencils are preferred)

- A large format Sketchbook is optional for those interested in going into Animation after high school Behance Portfolio: Cover: -Reflect theme of Course -Art Cover image 404 X 316 -Text "Animation Unit 1 2015" Settings: Creative Fields: -Apply 3 project theme-related "Creative Fields" Tags: - 15 theme generated tags (use key concepts) Project Description: - "this is my animation portfolio" Extra Information: -Brand: Digital Voices -Agency: Winnipeg School Division -School: Sisler High School Credits: -Add the cast and crew with roles Tools Used: -Identify all tools used in this unit: Adobe Flash CS6, Adobe Audition CS6, Behance, paper, pencils, light-table Content: -Embed all Unit 1 components

-Title each activity -Use the portfolio Text styles appropriately

Unit Plan:

Unit 1 is worth 35% of final student grade

Unit 2 - 35% of final grade,

Hands-on Exam Activity - 20% of final grade

Final Written Exam - 10% of final grade.

Ongoing Portfolio Development - 10%

Activities - 20%

Activity 1 - Exploration of Animation

Activity 2 - Principles of Animation (Frame by Frame Animation)

Activity 3 - Character and Concept Development

Activity 4 - Lip Sync

Activity 5 - Posing Characters (creating expression, gesture and emotions through line)

Activity 6 - Walk Cycle

Activity 7 - Digital Painting Backgrounds

Test - 5%

Activity 1 - Exploration of Animation

Intent:

apply optical illusion

manipulate frame rate

Task:

Students are to experiment with:

Part 1 - Hand Drawn Flip-book

1. theme: student choice of theme, but animation must have a minimum of 2 objects and some sort of background

2. Students are to plan their flip-book by creating a storyboard: 10-15 frames (1 picture for every 3 frames in flip-book)

3. Create a flip-book: 30-45 frames

4. Record your flip-book in action and upload to your vimeo channel

5. Embed Animation in your Unit 1 Animation Behance project

Assessment:

Storyboard: /2

animation flow/theme: /2

optical illusion: /5

Title slide: /1

total: /10

Part 4 - Digital Flip-Book:

Students will create a digital flip-book using their hand-drawn flip-book as a template or as reference.

1 Download one of the following old paper images (or find a paper image of your choice)

2 Open flash and set up a stage at 400 pixels by 400 pixels @ 24 fps

3 import the downloaded paper image into the library

4 Rename layer 1 as "old paper" and "insert frame at 48 frames

5 Lock "old paper" layer

6 Create a new layer, rename as "my art -----" layer(s)

7 Each object should be on a different layer

8 Each action must be on a keyframe

9 Save as: firstlastname_U1_A1d.fla

10 Export as: firstlastname_U1_A1d.mov and firstlastname_U1_A1d.swf

Work )

Key-terms:

-Key-Frame

-Vector

-Stroke

-Fill

-Stage

-Symbol

-fps

-frame

-fla

-swf

-mov

Assessment: Layers/art: /2 animation flow/theme: /2 optical illusion: /5 Title slide: /1 total: /10

backgound sample3

Activity 2 - Principles of Animation

The 12 basic principles of animation were developed by the 'old men' of Walt Disney Studios, amongst them Frank Thomas and Ollie Johnston, during the 1930s. Of course they weren't old men at the time, but young men who were at the forefront of exciting discoveries that were contributing to the development of a new art form. These principles came as a result of reflection about their practice and through Disney's desire to use animation to express character and personality. This movie is a take on those principles, applied to simple shapes. Like a cube.

Task:

Pat 1:

- Students are to Friday the 12 Principles of Animation under an Activity 2 title on their beHance Unit 1 project.

Part 2:

Students:

-MUST ONLY USE A STROKE ANIMATION TECHNIQUE WITH NO FILL!

-create an Actionscript 3 document with a stage of 1080 pixels by 720 pixels at 24 fps,

-are to create a short animation(s) demonstrating the Principle of Animation,

- must identify (using text tool) the principles in the animation,

- start the animation with a title slide followed: The Principles of Animation by your name"

-may use their characters from Activity 2, or use basic character designs,

-Save as: firstlastname_PrinciplesofAnimation.fla -Export movie as: firstlastname_PrinciplesofAnimation.swf and firstlastname__PrinciplesofAnimation.mov

-Upload firstlastname__PrinciplesofAnimation.mov under the Activity 2 Title on BeHance

Assessment: 3 MARKS - Principles of Animation identified 1 MARK - Saving Procedures

2 MARKS - Organization of scenes 12 MARKS - Supporting Animations 2 MARKS - Title slide total: /20

Teacher Example

Resources:

- http://minyos.its.rmit.edu.au/aim/a_notes/anim_principles.html

- The Illusion of Life (Book or App) http://the12principles.tumblr.com

- Disney Animate App

- NFB The Principles of Animation

Activity 3 - Character Design

Key Terms:

Circles

Construction lines

Guidleines

Volume

Placement of facial features

Stroke

When to use of pencil and pens

Task:

Part 1 - Character Traits and Rough sketches:

- On a sheet of paper or using a graphic tablet in Flash jot down 5-8 character traits/descriptors for a cartoon character

- Provide the list under a title of "Traits"

- Create 5 very quick head shots. Make each one a little different.

- Export Image to your Unit 1/Activity 3 folder as: firstlastname_Traits_ CharacterDesign.jpg

- Upload to Unit 1 Behance project and place under an Activity 3 title.

Part 2 - Refine Character Sketches: - Ask yourself and 2-3 other students to give you feedback on what they like the most about each drawing. Compare to your identified traits.

- Combine feedback to draw 2 large larger, more detailed character designs. Use quick colour (paint behind feature) - Export Image to your Unit 1/Activity 3 folder as: firstlastname_Refine_ CharacterDesign.jpg - Upload to Unit 1 Behance project and place under an Activity 3 title.

Part 3 - Design Final Character using turnaround template

- Create an Action-script 3 document with a stage of 1080 pixels by 720 pixels at 24 fps,

- Digital design an original final character face

- Add Colour (we will explore different approaches in class)

- Export image and save to your Unit 1/Activity 3 folder as: firstlastname_face_CharacterDesign.jpg

- Upload to Unit 1 Behance project and place under an Activity 3 title

Part 4 - Create digital version of character from your turnaround

-Using Flash,create a new A3 stage (1080 X 720 pixels)

-Using only the shape tool and paint brush tool, students are to create a digital version of turnaround character.

-Character must be in full colour.

-Each body-part (full legs, full arms, torso, etc) must be a "Graphic Symbol" and named appropriately

- Save to your Unit 1/Activity 3 folder as: explore

- Export Image to your Unit 1/Activity 3 folder as: firstlastname_CharacterDesign_turn.jpg - Upload to Unit 1 Behance project and place under an Activity 3 title.

Evaluation: /20

4 MARKS FOR - ORIGINAL CONCEPT DEVELOPMENT 4 MARKS FOR - DIGITAL CAPTURE/POST OF DRAWING

8 MARKS FOR - SCREENSHOT/POST OF LIBRARY DEMONSTRATING ALL SYMBOLS PROPERLY NAMED 4 MARKS FOR - SCREENSHOT/POST OF CHARACTER ON STAGE

turnaround sheet created in class

Activity 4 - Lip Syncing

Intent:

Lip sync, lip-sync, lip-synch (short for lip synchronization) is a technical term for matching lip movements with sung or spoken vocals. The term can refer to any of a number of different techniques and processes, in the context of live performances and recordings. Matching dialogue to a character’s mouth in order to create the illusion of speech is known as lip-syncing. This effort often consumes more time than any other animation task because you need to make adjustments on nearly every frame. In fact, lip-syncing short animations (even only 1–2 minutes long) can involve hours of tedious labor.

This article explains how to make lip-syncing in Adobe Flash Professional CS5 as painless as possible by utilizing the SmartMouth extension to automatically analyze audio content and assign corresponding mouth shapes. That’s right: you can sit back and relax your hands, back, neck, and eyes while SmartMouth processes the audio in the time that it takes the audio to play back, and then matches each frame using a speech algorithm. You’ll also learn how use the free FrameSync extension to quickly make manual adjustments and tweaks to your character animation.

Introduction to lip-syncing in Flash

The basic unit of speech is known as a phoneme. The mouth shape and facial contortions that correspond to phonemes are known as visemes. Animators generally refer to phonemes and visemes interchangeably, even though they are technically different concepts. The standard set of about seven phonemes/visemes (mouth shapes)—not including a closed mouth—are sufficient to create the illusion of speech on an animated character. The SmartMouth Flash extension includes a sample set of those shapes.

This small set of phonemes corresponds to a wide array of spoken sounds. The full range of sounds that are covered by this small set of mouth shapes are listed in Table 1.

Animation elements for successful lip syncing:

- Body language (eyes, eye broughs, gestures, body positioning)

- Dialoque

- Tracking audio wave frequency and matching mouth symbols

Tips: keep it simple, elaborate, restrained and exaggerated

awesome resource: http://minyos.its.rmit.edu.au/aim/a_notes/anim_lipsync.html

http://minyos.its.rmit.edu.au/aim/a_notes/mouth_shapes_01.html

Task:

Saving:

Save as: firstname_U1 A4.fla Export as: firstname_U1 A4.mov

Export as: firstname_U1 A4.swf

Posting:

Now upload your video to your Behance Account/Unit 1 Project

Be sure to:

Title the videos “Activity 4– lip sync ” describe each video as:

Unit 3, Activity 4 lip sync Animation properties (frames and fps) add 3-5 tags

Use resource on bottom of the page

Teacher Tutorials:

Activity 5 - Posing Characters (creating expression, gesture and emotions through line)

Task: Students are to.... - create a new A3 document with a stage properties of 1080 pixels (w) by 720 pixels (h) @ 24 fps

- create a new layer called "guide lines" and draw 2 lines which will divide the stage into three horizontal planes, The top two areas will be much smaller than the bottom. Take a look at the example provided.

Part 1 - Quick Action Poses/Emotional Poses

- jot down 8 different action poses/emotions (4 under the top line and 4 under the bottom line). Your character does not need to be humanoid. - using the brush tool with an inky tip, quickly depict each emotion/action poses above the text location Part 2 - Refine 3 poses - On the bottom of your stage refine three of your poses. - Add more line to give the character a more human-like approach

- Add rough facial expressions - Optional: Add solid colour (paint behind option), try 30-50% opacity

Activity 6 - Walk Cycle

Intent:

In animation, a walk cycle is a series of frames or illustrations drawn in sequence that loop to create an animation of a walking character. The walk cycle is looped over and over, thus having to avoid animating each step again. - wikipedia

Task:

Students are to....

- create a new A3 document with a stage properties of 1080 pixels (w) by 720 pixels (h) @ 24 fps

- create a full walk-cycle using your activity 3 character or a new paint brushed character

- character will not move "x, Y" position, just the background

- must demonstrate the following ports:

Part 1 - Walk Cycle

Students are to ...

- Read pages 147-152 of the "How to cheat in Flash" on-line resource,

- create a new character level and add your character symbol (or multiple layers for a new character)

Part 2 - Background and ground line

- Read pages 156-157 of the "How to cheat in Flash" on-line resource. You do not need to make your backgrond as complex.

- create 3 new background level.

- One will be groundline,

- One will be the sky

- One background object of your choice

Part 3 - Perspective shadow

- Read pages 97-101 of the "How to cheat in Flash" on-line resource,

- create a new shadow level

- apply a shadow to the character throughout the entire animation

Part 4 - Subtle Gestures

- Read pages 65-66 of the "How to cheat in Flash" on-line resource, Consider using a blinking eye or whisltling lips!

- create a new gesture level

- Apply a subtle principle

Activity 7 - Digital Painting Background Scenes

Intent:

Digital Painting is a method of creating an art object (painting) digitally and/or a technique for making digital art in the computer. As a method of creating an art object, it adapts traditional painting medium such as acrylic paint, oils, ink, etc. and applies the pigment to traditional carriers, such as woven canvas cloth, paper, polyester etc. by means of computer software driving industrial robotic or office machinery (printers). As a technique, it refers to acomputer graphics software program that uses a virtual canvas and virtual painting box of brushes, colors and other supplies. The virtual box contains many instruments that do not exist outside the computer, and which give a digital artwork a different look and feel from an artwork that is made the traditional way. (source wikipedia)

Task:

Part 1 - Sketch a background design.

The design should be approximately 3 times the length of your desired animation scene and 2/3 taller tha the scene. This will give you the ability to zoom and pan.

Part 2 - Digital Paint and Design the scene

- Crete the following concept layers:

- Backgound scenery

- 3-4 objects layers (i.e., a house, a tree, etc). Think about Walt Disney's Multi-plane camera. Save these with a transparent background. The

canvas size should be in ratio to the background. Export image and save to your Unit 1/Activity 3 folder as: firstlastname_back scene.png,

firstlastname_object_scene.png, firstlastname_object_scene.png,and firstlastname_object_scene.png,

- In Adobe Flash recreate a moving scene using your created Adbe Photoshop Scenery items (move to library). Animate your background using a pan, a zoom in and a zoom out. Your animaiton should be 10-20 seconds.

Document Setup and Saving:

Photoshop Canvas:

W - 3240 pixels by H 1500 pixels, 100 resolution

- Save to your Unit 1/Background Activity folder as: firstlastname_bacground.fla - Export Image to your Unit 1/Background Activity folder as: firstlastname_background.jpg

- Upload each image to Unit 1 Behance project and place under a Background Activity title.

Flash Stage:

Create an Actionscript 3 document with a stage of 1080 pixels by 720 pixels at 24 fps,

- Save to your Unit 1/Background Activity folder as: firstlastname_bacground.fla - Export Image to your Unit 1/Background Activity folder as: firstlastname_background.jpg

- Export movie to your Unit 1/Background Activity folder as: firstlastname_background.swf and firstlastname_background.mov - Upload to Unit 1 Behance project and place under a Background Activity title.

Hint:

Follow instructions in presentation

Flash Resource

click here to use tis awesome resource! >>> View this online resource

UNIT 1 TEST REVIEW

KEY-TERMS, TOOLS, FILE EXTENSIONS & ANIMATION CONCEPTS

- The Illusion of Life - Principles of Animation:

Squash and stretch Anticipation Staging Straight Ahead Action and Pose to Pose Follow Through and Overlapping Action Slow In and Slow Out Arc Secondary Action Timing Exaggeration Solid drawing Appeal

- Optical Illusion

- fps - frame per second (frame rate) 24 fps for a featured animation

- Tools panel

- Brush Tool (paint fill)

- Pencil Tool (stroke)

- Shape Tool

- Thaumatrope (2 frames)

- Phenakistscope (8-16 frames)

- Zoetrope

- Lip Sync

- Key Frame compared to a frame

- Tween (beTWEEN key frames)

- Timeline (layers)

- Flipbook

- Storyboard

- Concept art

- Reference

- Onion Skin

- Vector vs raster graphics

FILE EXTENSIONS:

SWF - shockwave

mov - quicktime movie

fla - Flash Project

png - Portable Network Graphic

Free Audio:

Hey students! Always credit URLs!

Sound Effects and Soundbeds

http://offers.adobe.com/en/na/audition/offers/audition_dlc/AdobeAuditionDLCSFX.html?

cq_ck=1407955238126&wcmmode=disabled

Soundtracks

http://www.bensound.com/royalty-free-music/2

http://incompetech.com

The Animation Class' Playlist