by Ron Edelen | Publisher: Infinite Skills | Release Date: March 2016 | ISBN: 9781771375382

In this Web Animation Prototyping with After Effects training course, expert author Ron Edelen will teach you about the tools and techniques needed to create web animation prototypes with After Effects. This course is designed for users that already have web design experience.You will start by learning about the principles of animation, then jump into learning about the role of design in UX animation. From there, Ron will cover from Photoshop to After Effects, animation basics in After Effects, and applying animation principles in After Effects. Finally, this video tutorial features example projects, including animating a mobile bank retailer locator, animating a travel and tourism microsite, and animating a touchscreen installation.Once you have completed this computer based training course, you will have learned how to create web animation prototypes using After Effects. Working files are included, allowing you to follow along with the author throughout the lessons.

1. Introduction
   • Introduction And Course Overview 00:03:31
   • About The Author 00:01:54
   • Overview Of Web Animation 00:04:22
   • The Benefits Of After Effects 00:03:05
2. Animation Fundamentals
   • Animation As A User Experience 00:03:09
   • The Principles Of Animation Part - 1 00:05:22
   • The Principles Of Animation Part - 2 00:03:02
   • Best Practices For Interactive Animation 00:04:26
3. Role Of Design In UX Animation
   • Design For Animation Part - 1 00:01:56
   • Design For Animation Part - 2 00:04:54
4. Photoshop To After Effects
   • Photoshop To After Effects Part - 1 00:02:44
   • Photoshop To After Effects Part - 2 00:02:36
   • Photoshop To After Effects Part - 3 00:04:33
   • Photoshop To After Effects Part - 4 00:04:57
5. After Effects Overview
   • The Components Of After Effects 00:03:50
   • Importing Files Into After Effects 00:03:29
   • The Power Of Nesting 00:04:35
6. Animation Basics In After Effects
   • Animating Position 00:07:58
   • Hotkeys And Layer Masks 00:04:12
   • Animating Scale 00:03:33
   • Animating Anchor Point And Rotation 00:07:34
7. Applying Animation Principles In After Effects
   • Easy Ease 00:06:09
   • Finesse And Timing Part - 1 00:04:31
   • Finesse And Timing Part - 2 00:05:08
8. Example Project: Mobile Web Layout
   • Preview Of Mobile Design Prototype 00:03:37
   • Designing In After Effects 00:05:27
   • Advanced Animation - Importing Video 00:04:07
   • Advanced Animation - Adding Depth Part - 1 00:05:35
   • Advanced Animation - Adding Depth Part - 2 00:05:53
9. Example Project: Microsite For Tourist Destination
   • Overview Of Design 00:06:14
   • The Spoiler 00:06:50
   • Clean-Up Photoshop Import 00:05:29
   • Import Video 00:06:08
   • Camera And Layer Setup 00:06:49
   • Layer Depth Adjustments 00:04:31
   • Step And Repeat 00:05:11
   • Build-On Animation 00:06:12
   • Title Reveal Part - 1 00:06:29
   • Title Reveal Part - 2 00:04:16
   • Title Reveal Part - 3 00:04:41
   • Component Animation 00:05:06
   • Setting Up Paralax 00:07:13
   • Animating The Scroll 00:06:37
   • Finalize And Render 00:05:06
10. Example Project: Motion Sketching A Touch Installation
    • Prototyping A Touch Installation 00:06:44
    • Motion Sketching - Exploration And Design 00:04:18
    • Motion Sketching - Animation Part - 1 00:05:55
    • Motion Sketching - Animation Part - 2 00:05:44
    • Motion Sketching - Rendering 00:02:19
11. Conclusion
    • Adding After Effects Prototyping To Your Workflow 00:05:17
    • Helpful Resources 00:04:10
    • Staying Ahead Of The Next Big Thing 00:04:23