Animation

Unit Description: Animation: Duration approximately 18 days

Students will learn how to correctly plan and create animations in a variety of forms and formats. Student will explore different software environments and understand compositional concepts and techniques related to animation. Technical knowledge related to online animation will be introduced.

Throughout the course the societal and environmental effects of the elements connected to the various units will be discussed and will influence the student’s end products.

Animation is a method in which pictures are manipulated to appear as moving images. In traditional animation, images are drawn or painted by hand on transparent celluloid sheets to be photographed and exhibited on film. Today, most animations are made with computer-generated imagery (CGI). Computer animation can be very detailed 3D animation, while 2D computer animation can be used for stylistic reasons, low bandwidth or faster real-time renderings. Other common animation methods apply a stop motion technique to two and three-dimensional objects like paper cutouts, puppets or clay figures.

Commonly the effect of animation is achieved by a rapid succession of sequential images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the phi phenomenon and beta movement, but the exact causes are still uncertain. Analog mechanical animation media that rely on the rapid display of sequential images include the phénakisticope, zoetrope, flip book, praxinoscope and film. Television and video are popular electronic animation media that originally were analog and now operate digitally. For display on the computer, techniques like animated GIF and Flash animation were developed.

~ https://en.wikipedia.org/wiki/Animation

How Computer Animation Works

• Reading

• Questions

Where in society do we see animation used?

Recreation

• • • Movies

    • Television

    • Online Media

    • Video games

    • ...

Advertising

• • • Online advertising

    • Education and Training

    • Simulation software

    • Web applications

    • Training software

    • ...

Business

• • • Process simulation

    • Job / Application Training

    • Software Training

    • ...

Science / Engineering / Medicine / Technology

• • • ...

What do we know about current and past animation techniques...Disney, Pixar..... ?

• • cell by cell animation

  • programmed animation

  • computer designed (non-programmed)

Software

• • Adobe Animate (Formerly Flash)

  • Scratch

  • Google Web Designer

  • ...

Online Animation Tools

• https://www.piskelapp.com/

Making a Personal Animated Gif with Adobe Photoshop

• Research

Animated Poetry GIFs

• Poetry Animated GIF Exercise

Scratch

• What is "Scratch "?

  • Official Site

  • Getting-Started-Guide-Scratch2.pdf

• Parts of the Screen

  • Stage

  • Scripts

  • Blocks Area

  • Sprites

  • Scripts

  • Costumes

  • Sounds

  • ...

• Online Scratch Editor

  • Official Site

• Terminology

  • Sprite

  • Script

  • Broadcasts

  • ...

• Scratch Tutorials and Information

  • http://wiki.scratch.mit.edu/wiki/Scratch_2.0

  • http://scratched.media.mit.edu/sites/default/files/Scratch2.pdf

  • http://info.scratch.mit.edu/Support

  • http://www.youtube.com/watch?v=fNFKfzWHBhw

  • http://info.scratch.mit.edu/Video_Tutorials

  • http://scratch.mit.edu/projects/blahdeblah/104408

  • http://learnscratch.org/

  • http://williamtuttlelee.googlepages.com/scratchtutorial.pdf

  • Scratch Cards

  • Change Colour

  • Move to a Beat

  • Key Moves

  • Say Something

  • Glide

  • Follow the Mouse

  • Dance Twist Interactive Whirl

  • Animate It

  • Moving Animation

  • Surprise Button

  • Keep Score

• Scratch Exercises

  • Scratch Exercise 1

  • Scratch Exercise 2

  • Scratch Exercise 3

  • Scratch Exercise 4

  • Scratch Exercise 5

Rich Media: Google Web Designer

• Design Animations with HTML5 and CSS

• https://www.google.com/webdesigner/

Flash

• • Parts of the screen

    • Stage

    • Tools

    • Timelines

    • Colour Swatch

    • ...

  • File Formats

    • .fla

    • .swf

  • Terminology

    • Key Frame

    • Frame Rate

    • Motion Tween

    • Shape Tween

    • Symbol

    • ...

• Flash Tutorials

  • http://bestwebdesignz.com/tips/flash-cs4-tutorial/flash-cs4-tutorial/

  • http://www.1stoptutorials.com/Flash-Beginners-Tutorial-Course.html

  • http://www.youtube.com/watch?v=hSKmbEQVyQ8

  • http://flash.editme.com/HowTos

  • http://www.baycongroup.com/flashCS4/index.html

• Tween Exercises

  • Motion Tweens

  • Shape Tweens

  • Tweens with Text

• Symbols

• The Library

• In-Class Tweening Challenges (see handout)

• Google Ads Information

  • • Ad Sizes

      • Skyscraper 120W X 600H or 160W X 600H

    • Skyscraper 120W X 600H or 160W X 600H

    • Letterboard 720W X 90H

      • Square 250 X 250 or 200 X 200

      • Rectangle 300W X 250H or 336W X 280H

    • Frame Rate

      • 15 - 20 fps

    • Animation Duration

      • 15 seconds max.

  • Online Information

    • Ad Specs and Policies

• Flash Exercises

  • Exercise 1

  • Exercise 2

  • Exercise 3

  • Exercise 4

  • Exercise 5

3D Animation

• https://imgur.com/gallery/YoTy1

Animation Education and Careers

• Animation Career Information

Animation Review

• Animation Theory Reading and Notes

• Animated GIFs using Photoshop

• Scratch Animation and Scripting Processes

• Flash Animation: Timelines, Tweens, Properties, etc.

Animation Quiz

• • Quiz

  • Finish Animations

  • Submit Missing Assignments for Grading