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

 

Apps UI motion design tutorials

Here are some useful resources for all of you who are making apps:

  1. Creating a UI/UX Motion Study in After Effects

http://www.digitaltutors.com/tutorial/1801-Creating-a-UI-UX-Motion-Study-in-After-Effects

Digital tuts + : You can sign up for free


2. Transitions:

Lynda tutorials ( free with nyu account)

lynda.com – Learn how to prototype an app interface using Adobe Illustrator, and then take the finished design into After Effects for animation.

lynda.com  – learn how to create an animated promo video that helps visualize how a mobile app will be used on a real device, using this screen replacement workflow in After Effects.


 

Alternative tools for motion prototyping

There are some other awesome tools that let you add motion to your app designs out there. This is mostly for traditional apps but feel free to explore them. The benefit is that you work with motion modules and that they are interactive:

Origami was originally developed by Facebook to help the team build and design products. Now it’s available for free: you can register as an Apple developer, then download and install Xcode with Quartz Composer to get Origami to run on a Mac

  • Flinto
    This mobile app prototyping tool for the Mac allows you to rapidly link screens and apply animated transitions. It has many animation-transition properties that can be fine-tuned to get motion just right. Iterating in this screen-flow prototyping tool is easy by dragging and dropping new screens on top of old ones.
  • Principle
    This prototyping tool for mobile apps, also for the Mac, allows you to use a timeline to keyframe animated transitions.

Proto.io
This browser-based app includes some sophisticated animation abilities. Through the use of “interactions” and “states,” a designer can prototype complex motion and can even create keyframe-like animations.

Form ( now owned by Google)

Build and customize native prototypes directly on device.

http://www.relativewave.com/form/examples/

How To Integrate Motion Design In The UX Workflow

For more tools:

http://www.creativebloq.com/web-design/top-10-prototyping-tools-2016-21619216

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/