Andy Needham, motion graphics artist and animation director shows you how to create re-useable animations for the tap and swipe interaction using the Circle and CC Smear effects which are built in to Adobe After Effects. The CC Smear effect is used to smear a layer between two points and the effect is perfect for creating the look of the swipe animation.
- [Voiceover] To give a visual indication…of how the app will be interacted with,…we need to create some animations…for the tap and swipe actions.…These will be Pre-comps which we can reuse…in our main sequence.…So let's start by selecting our Pre-comps folder,…and we'll create a folder in it called "Interactions",…and in that folder we're gonna use this button here…to create new composition.…We don't need it to be this long,…so I'm going to change it to be just a second.…And we're gonna create the tap first,…so we'll call it "Tap",…and it will be 200 by 200.…
In this comp, let's just zoom in a bit.…We're gonna create a new solid.…Command or Control Y.…Now we'll make it the comp size if it's not already,…and we'll press "okay",…And what I want to do to this solid is…create a circle effect.…So in the Effects and Presets we're gonna choose circle,…and it's under "Generate".…We'll add that to our solid here,…and we want to add the green color.…We're doing it this way instead of creating color here…just in case we ever wanted to change this color.…
Author
Andy Needham
Updated
5/17/2018Released
6/6/2016In this course, Andy Needham shows how to create an app interface from scratch using Adobe Illustrator, and then take the finished design into After Effects for animation. This is a start-to-finish project, going from concept sketches to the final product (an animated GIF). The prototype will showcase the navigation and interactive aspects of the app interface and can be used for marketing or gathering client and user feedback.
- Sketching ideas
- Planning ahead: knowing your target output
- Designing screens in Illustrator
- Preparing artwork for After Effects
- Creating reusable components
- Building and animating screens
- Adding transitions and gesture animations
- Exporting the final sequence as an animated GIF
Skill Level Intermediate
Duration
Views
Q: This course was updated on 05/17/2018. What changed?
A: New videos were added that cover working with Sketch2AE.
-
Introduction
-
Welcome34s
-
-
1. App Plan and Pre-Production
-
The app creation33s
-
Sketch out ideas3m 8s
-
Choose the user journey1m 45s
-
-
2. Explore the App Screens
-
3. Prepare Assets for Animation in After Effects
-
Set up and import artwork5m 14s
-
Create reusable components4m 31s
-
Build the Dashboard tiles6m 26s
-
Build the Dashboard screens7m 25s
-
-
4. Animate in After Effects
-
Animate the Steps screen8m 29s
-
Animate the Friends screen7m 50s
-
5. Build and Export the Sequence
-
Export the final sequence4m 45s
-
6. Work with Sketch2AE
-
What is Sketch2AE?1m 36s
-
Install Sketch2AE1m 56s
-
Prepare artwork in Sketch4m 24s
-
-
Conclusion
-
Next steps1m 9s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Create tap and swipe animations