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/

 

 

 

 

Tutorials

After Effects Tutorials:

www.adobe.com/support/aftereffects

https://mattrunks.com/en/tutorials/free

Screen Shot 2014-11-03 at 3.39.48 PM

 

Lynda:

After Effects: Creating a Mobile App Interface

https://www.lynda.com/After-Effects-tutorials/After-Effects-CC-Essential-Training-2015/371399-2.html

Skillshare:

https://www.skillshare.com/classes/design/Animating-With-Ease-in-After-Effects/2128437497

 

 


Motion Design Tutorials:

https://uxinmotion.net/blog/

 

 

 

Save

Save