Category: Class Notes

Class 6 – Coding Motion

Expressions in After Effects:

Wiggle expression:

Type wiggle(2,50).

This expression states that twice a second the text should wiggle 50 pixels on the x & y axis – the first number is how many times a second, the 2nd is the amount of pixel movement.

Adding effect sliders to control the expressions:
Loop expression:

 

http://www.mtmograph.com/motion/

 

SVG animation – Available tools:

Body Moving extension:

https://github.com/bodymovin/bodymovin

or download directly from adobe

Tutorial and installation instructions:

Check out some of the examples on CodePen, they might just blow your mind.

Check out some of the examples on CodePen, they might just blow your mind.

https://codepen.io/airnan/post/the-after-effects

Export to IOS

http://www.marcuseckert.com/squall/

 

 

What is SVG animation?

 

 Adobe Animate ( what used to be Flash)

https://helpx.adobe.com/animate/how-to/create-2d-animation.html

Adobe Animate

SVG animation without AE ( Only illustrator):

 

Expressions & Scripting  Resources:

Here are some amazing sites to check out that will help you get the hang of expressions.

Motion Script – Dan Ebberts’ AE Expressions and Scripting Resource
Redefinery – Excellent free and very useful scripts

Class 5 – Tracking in AE

This lynda tutorial covers everything in depth – feel free to watch it all or parts of it:

https://www.lynda.com/After-Effects-tutorials/Welcome/379033/502586-4.html

Adobe Premiere Pro to After Effects Workflow – Tutorial

 

After Effects Basic Tutorial – MOTION TRACKING
Face Tracking

 

 

 

 

Screen Replacement

You can use this app to create track points with green screen  or just use an image like this one:

 

Basic Method:

 

Advanced -Tracking with Mocha

 

 

 

Additional tracking options:

Corner pin tracking – Screen replacement

 

3d Camera tracking

3D Camera Tracking Tutorials:

Fast 2 minutes overview – including shadow catcher and lights:

Here is a frame from the video to show how to create a shadow catcher and light:

Screen Shot 2014-10-27 at 9.13.10 PM

In-depth tutorial:

Mask out element to look like they are behind:

 

Masking out people from the frame to help solve camera:

http://tv.adobe.com/watch/no-stupid-questions-with-colin-smith/after-effects-advanced-3d-camera-tracker-for-hard-to-track-clips/

http://tv.adobe.com/watch/learn-after-effects-cs6/3d-camera-tracker/

Keyframing – Class 3

Class 3 –  Presentation

Keyframe types

 

 

Graph Editor

 

 

Change Anchor point

Basics – Move and snap anchor point:

 

 

Advanced:

 

 

Wiggler
Advanced:

it’s match better to wiggle with code (expressions) in after effects:

 

Import from Illustrator
Import from Photoshop – workflow

 

 

Sketch workflow

 

Parenting

Pre – Comps

Null Object

( I know this guy has weird tutorials but he does cover it all..:)

Motion Sketch
Screen replacement:
Extra readings:

Fitting After Effects Into A UX Workflow

http://thekineticui.com/motion-design-is-the-future-of-ui/

http://babich.biz/motion-in-ux-design/

 

 

 

 De Cock has developed four simple rules for UI animation that take into account the current limitations of real-time rendering.
  1. Animate exclusively opacity and transform properties (animating other properties, like width or height, requires too much processing power and can slow things down)
  2. Keep animations fast (usually around 300ms)
  3. Animate things independently
  4. Always use custom easings
AE Scripts for easing

http://aescripts.com/flow/

 

http://aesweets.com/easy/#what-is-easy

http://aescripts.com/after-ease/

Advanced:

https://www.lynda.com/After-Effects-tutorials/Welcome/378042/499684-4.html

Jedi Principles of UI Animation

 

 

 

 

 

 

Save

Class 02 – Motion Design for interfaces, part 01

What is animation? How do we use it to create a character?

The way an object moves can tell us about his personality –

it’s “body language”, how fast/slow it moves,  Material ( flexible/hard), Weight ( light / heavy)

 

Animation is all about space and time – watch this TED talk:

 

Disney’s 12 Principles Of Animation:

Class 02 – Link to Presentation:

“How Tinder got inspired by Disney?”

Extra reading:
Shape layers and masks:
  1. Masks in AE:

2. Shape layers from illustrator:

https://helpx.adobe.com/after-effects/how-to/create-shape-vector-layers-animation.html

Shape layers techniques:

 

 

Keyframing  Guide:

Extra:

 

 

 

Advanced:

 

 

WEEK 1: class notes

Practice files:

Class Dem0:

Maintaining an organized folder structure:

 

screen-shot-2016-09-13-at-9-26-36-pm

Use After Effects Auto Save to Give You Backups in Case of Crash/Client Changes

Unlike in Adobe Premiere Pro, Auto-Save is not turned on by default in After Effects.  I tend to save every 5-10 minutes and increase “maximum project versions”.  The Auto Save files are in the Auto-Save folder, which is saved in the same location as the project.

In Preferences > Auto-Save check “Automatically Save Projects”:

Check "Auto Save"

Auto-Save Location

 

 

Full tutorial:

Importing assets:

File -> Import:

2016-09-13-22-19-31

 

Right Click – > Import:2016-09-13-22-19-48

Double click inside project window:2016-09-13-22-20-02

 

After Effects Foundations:

or

https://helpx.adobe.com/after-effects/how-to/aftereffects-create-first-project-cc.html?set=after-effects–get-started–essential-beginners

Green Screen Tutorial

( Keylight Effect – we used a different one but this one is the best for green screen)

 

How to make a GIF with After Effects and Photoshop:

Think about compositions, timing, transitions and loops.

GIF AE to Photoshop Tutorial:

Short Version –

You can add text to the GIF.

Medium version:

 

 

Suppppppper long by a talented artist, you can skip through:

 

Here is how you should export / render your movies in After Effects CC and up:

 

 

Inspiration:

https://ello.co/ellogifs

http://5secondfilms.com/

http://giphy.com/

http://the12principles.tumblr.com/