Skip to main contentSkip to toolbar Dashboard Home Updates 9 Posts All Posts Add New Categories Tags Media Library Add New Links All Links Add New Link Categories Pages All Pages Add New Comments 61 Appearance Themes Customize Widgets Menus Theme Options Editor Plugins 1 Installed Plugins Add New Editor Users All Users Add New Your Profile Tools Available Tools Import Export Settings General Writing Reading Discussion Media Permalinks Collapse menu About WordPress bASEARTS 91 Plugin Update, 8 Theme Updates 61 New Howdy, admin Log Out Help Screen Options Add New Post Enter title here Permalink: http://blog.basearts.com/2016/03/15/4499/ ‎Edit Add MediaVisualText bilinkb-quotedelinsimgulollicodemoreclose tags
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 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: Animation and SislerIDM -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
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
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
Part 2 - Character Traits and body structure sketches:
- Create a new Actionscript 3 stage at 1080 (h) by 720 pixels (v) @ 24 fps
- Rename the Scene "Traits"
- On a sheet of paper or using a graphic tablet in Flash jot down 5-8 character traits/descriptors for a cartoon character of your choice
- Provide the list under a title of "Traits"
- Create 5 very quick body structure sketches representing the five traits. Make each one a little different.
- Use guides to help set up a template (see demo below)
- 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.
Attention students! Avoid "Twinning." Twinning is when your character (or scene) is chock full of symmetry.
Part 3 - Refine Character Sketches:
- Ask yourself and 2-3 other students to give you feedback on what they like the most about each drawing. Compare feedback to your identified traits and approach.
- Create a Part 3 scene. Create 2 layers per character (one to be locked and the other for drawing over top off). Master layer mangement! You may want to set the colour of your existing drawing to a light blue.
- Combine feedback to draw 2 larger, more detailed character designs. Use quick colour fills at a 60% alpha (paint behind feature). Not a lot of detail.
- Save as: firstlastname_activity3.fla in your activity 3 folder
- 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 4 - Design Final Character using turnaround template
- Create a new FInal Character Scene
- Digital design an original final character face
- AddColour (wewill 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 5 - Create digital version of character from your turnaround
-Create a new turnaround scene
- Create a new 3 instances of digital character template using guides to match up body parts (Front, back and side)
- 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
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 locationPart 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
Soundtracks
The Animation Class' Playlist

PROJECT BY

Mr. Jamie Leduc
Winnipeg, Manitoba, Canada

ABOUT

ANIMATION 35S (ANHR35S/MOHR35S) “Animation offers a medium of story telling and visual entertainment which can bring pleasure and information to …Read More
Published: August 11, 2014

TOOLS USED

Audacity Light Table Paper Pencil
Word count: 2934 Draft saved at 9:15:18 pm. Toggle panel: Publish Publish Save Draft Preview Status: Draft Edit Edit status Visibility: Public Edit Edit visibility Publish immediately Edit Edit date and time Move to TrashPublish Toggle panel: Categories Categories All Categories Most Used Media and Technology Photography and Imaging Uncategorized Arts + Add New Category Toggle panel: Tags Tags Thank you for creating with WordPress. Version 4.4.2