by Prof. Hopkins

FIRST CLASS: JAN. 27: Welcome back! Happy new semester.

tumblr_nmr2wsqrcl1tcuj64o1_400

tumblr_nmi9j5Oqs81tcuj64o1_400

Above animations from Florian de Looji

Hey students.. Let’s spring into action with animation this semester! 

I’m thrilled to be teaching this course as we work our way through the history of animation, learning how to generate frame-by-frame motion and paths, adding sound to our animations, using grids to design the stage, using the 5 basic questions to guide our design process and applying animation effects to objects.

In this course, we are focusing on using Animate for our animations. We will use Photoshop + Illustrator and import as symbols. We will cover both the conceptual + technical skills and requirements of animations.

Please click here for our syllabus and always refer to this blog for our assignments, video tutorial requirements and due dates.

Things to go over today:

  1. Syllabus
  2. Schedule (see below)
  3. Introductions + special interests
  4. Adobe Tutorials
  5. Homework: 12 Laws of Animation

This is our tentative schedule – but again, absolute deadlines + assignments are always going to be posted here. So check back regularly as I build this site.

WEEK ONE: Syllabus, intro, introductions, online tutorials, blog, HOMEWORK.

WEEK 2: HISTORY, STORYBOARDING, THEORY. Two intro projects: Thaumascope and flip book Homework: online tutorials

WEEK 3: Wireframe, mockup, begin + tutorial videos (Animate)

in class lecture: commercial project

in class lesson + technical demo: intro to Animate + creating effects

WEEK 4, 5, 6: COMMERCIAL PROJECT: logo + web ads + banner

Using Photoshop/Illustrator + Animate.

WEEK 7, 8, 9: ARTISTIC PROJECT: Animate your favorite painting: Make an object come to life, jump, simple things by using the drawing tools + onion skinning in Animate.

WEEK 10, 11, 12, 13, 14, 15: CHARACTER PROJECT: Character Animation with Action Scripting. Creating and Editing Bones

Walk cycles

 

This slideshow requires JavaScript.

List of Flash/Animate animated television series

Fun videos to watch: 

Frame by frame on gallery wall

11 Paper Place (created on Blender, the open-source 3D animation suite)

Google Doodles

 

HOMEWORK: See next blog post + bring a good pen and a small post it pad.

by Prof. Hopkins

Final Portfolio / Critique Day: DEC 3

Requirements for Final Critique Day: Tuesday, Dec. 3

BEGINNING OF CLASS CRITIQUE  on your Character Animation Project AND hand in of your final portfolio files to the server.

No exeptions. No time to save files. Walk in, on time… be ready or points will be deducted from your final portfolio grade for lack of professionalism. (10 points will be deducted for failure to meet this beginning of class deadline)

Critique will begin promptly at 8:30 a.m.

Final Portfolio Requirements: (This counts as your Final Exam)

Animation Projects:

Your folder of files should have the following projects saved with all accompanying files – Each project should have a .fla file and a .swf file in the folder.

Please label the folders as follows:

  1. Commercial Animation Project – logo + banner
  2. Creative Animation Project
  3. Character Animation

Design Statement:

1-2 page (typed) designer statement answering the following questions in paragraph format: (save as designstatement.docx in your folder)

What did you learn this semester? (Technical + conceptual)

How is your view of animation  and Animate different after taking this class?

What aspect of the animation process did you enjoy the most/the least?

Is there anything specific that you would have liked to have gone over?

How can you improve your design skills for the future?

What do you see as the future of animation?

How can I improve http://www.professorhopkins.com? Do you use it?

Anything else you would like to tell me?

FINAL CRITIQUE WILL BE ON Tuesday, Dec. 3

Also – if you have changed any of your projects, please list what you have done to improve them within your Designer Statement so that I know you made changes.

 

by Prof. Hopkins

Tuesday, Nov. 19: Building your Character

This slideshow requires JavaScript.

  • Begin building your character in Illustrator or directly in Animate..
  • Tutorial on the bone tool

Things to think about:

  1. What is your visual narrative?
  2. Are you telling a story? Completely a task?
  3. Who is  your character? Think about character development – personality
  4. What are the emotions that you are  illustrating?

Character development resources: 

I love this link with two detailed character questionnaires (Marcel Proust Character Questionnaire)

Obviously, for this project you have to think about your character visually –

What do they look like? Facial features? Hair? Color palette?

What kind of clothes do they wear?

Do they have accessories/props?

A sidekick?

How old is your character?

But you should also think about them, mentally..

What do they care about?

What is the one word you would use to define them?

What is their name?

by Prof. Hopkins

Inverse Kinematics: Bone Tool

 

This slideshow requires JavaScript.

Inverse Kinematics:

The bone tool gives you inverse kinematics (IK) capabilities within Animate. IK is a way of animating objects using bones chained into linear or branched armatures in parent-child relationships. When one bone moves, connected bones move in relation to it. Inverse kinematics lets you easily create natural motion. To animate using inverse kinematics, specify the start and end positions of bones on the Timeline. Animate automatically interpolates the positions of the bones in the armature between the starting and ending frames.

WATCH THIS FIRST: https://www.youtube.com/watch?v=v84zAJi704k

Adobe Animate Bone Tool tutorial

GREAT Adobe tips

https://theblog.adobe.com/mysteries-of-the-bone-tool/

LOOK AT THIS: http://www.adobe.com/devnet/flash/articles/character_animation_ik.html

Tips: 

  • Break up the body into different layers
  • Bones can be placed on shapes or movie clips
  • To animate: Series of poses
  • start and end are the same
  • last frame: right click: insert pose
  • control points
  • armature layer: click on: options: wire, solid, line
  • fine tuning: property inspector for speed, pin, (keep in one place) spring, ease (quality of movement)
  • Property Inspector: rotation: enable (full range of motion) constrain: set degree of motion
  • click on individual bones: spring (force of motion); damping (heaviness of how fast it stops)
  • ALSO: when you are working on an embedded bone tool layer, you can’t see the motions until you export them to view!
by Prof. Hopkins

Updated Schedule

Nov. 5: Work day + intro to character animation project

Nov. 12: Critique on Creative Animation + brainstorming character animation

Nov. 19 + 26: work days for Character Animation

Dec. 3: Final Portfolio Day! (and last class) We will critique all three projects + Designer Statement due.

by Prof. Hopkins

Character Animation!

ab846d30210759.56180b1f326f6

Tristan DiMaria

d468515410c48d05c27389e38228a315

Mischa Petrick

2ff2e515528715.561b4b1a954fetumblr_nv96heTNMn1rauecro1_1280

Moonwalk

Inspiration/Research

Simple and beautiful

Bird flying

Man Whistling

Boy walking

man walking

Character walk cycles:

Pig walking

Walk cycles

Tumblr walking

Misc Examples:

Jean Jean Arnoux

Coca Cola

Step by step Tutorial: How to walk cycle

Assignment: Design and execute a Character Animation of at least 240 frames.

Can be a person, animal, abstract combination of the two – anything!

Show demonstrated knowledge of the bone tool and Inverse Kinematics, Onion Skinning, and all technical concepts in Flash so far. (keyframes, shapes, motion tweens, etc.)

Must include a walk cycle

Great animation videos on Youtube.

WATCH THIS TUTORIAL

Due Date: Dec. 3. (LAST CLASS + Final Portfolio DUE)