Join Andy Needham for an in-depth discussion in this video Animate the Friends screen, part of After Effects: Creating a Mobile App Interface.
- View Offline
- [Voiceover] Let's animate the friends screen.…If you haven't got it open just go over…to the project panel and find it in the comps,…and let's have a look at what we want to do.…We're gonna use an expression,…and we're gonna come to that in a second,…but let's first think about what we want to happen.…Something quite simple like we've had before,…which will obviously fit in with the other animations…that we're creating, so maybe you're gonna scale up…the photo and just have it drop down and fade in slightly.…That effect across the whole screen…will look pretty neat, I think.…
We're also gonna animate the back button coming in,…and because that's a pre-comp it'll also animate…in our steps composition as well.…We can just do that once and we'll…just have the add friend icon animate in too.…Seeing as the friends icon and the back button…are pretty simple, we'll just get those out of the way.…We're going to the back button and if I go up…to where we can see it I just simply want to…go ahead, 10 frames, maybe less, seven frames.…
In 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