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
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
How to swap assets in After Effects
How do I update/replace a layer with a new design?
Working with sound in After effects
Apps UI motion design tutorials
Here are some useful resources for all of you who are making apps:
-
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)
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:
- Facebook- Origami
- Price: Free
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.
Build and customize native prototypes directly on device.
http://www.relativewave.com/form/examples/
For more tools:
http://www.creativebloq.com/web-design/top-10-prototyping-tools-2016-21619216
Microinteractions: The Secret of Great App Design
Button UX Design: Best Practices, Types and States
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:
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/learn-after-effects-cs6/3d-camera-tracker/