The heart and soul of any After Effects file is the composition. In this video, look at how to create the compositions for a variety of devices, with particular attention paid to frame rate and duration.
- [Instructor] Creating the composition for a prototype in After Effects present you with a rather interesting problem, what size do I use? The answer is any size, as long as it meets the aspect ratio of the device being used. If you've used prototyping software, such as Adobe XD or UXPin, just to mention two, you may have noticed they tend to show the assets in their interfaces at the 1x, 2x, or 3x device pixel resolutions. These are huge files, physically and basically file size.
This really isn't an issue when it comes to After Effects, because you will be prototyping motion and transitions with no interactivity, and you will not be demonstrating it on the device itself. In many respects your final product is more of a proof of concept than anything else. You show it to your stakeholders to tell them, here's what I'm thinking. Still, there are some common device sizes you may choose to use. With that in mind, let's get started. Having launched After Effects, I will now click on the Create New Composition button here, which opens the new composition dialog box.
The first thing I need to do is to name the comp. Because I'm using an iPhone, I'm just going to call it iPhone. The width of the iPhone and the height of the iPhone is a little bit different than you may be used to. The screen width is about 375 pixels, and the height is 667. Now I can lock the aspect ratio, just in case I need to shrink or grow the comp. Saved as how the work will be shown on a computer or on a screen, the pixel aspect ratio really becomes simple, square pixels.
Though your ultimate output will be a video or an animated GIF, do your sanity a favor and increase the frame rate to 60 frames per second. You can just click the spot down here and choose 60. A lot of micro interactions last no longer than half a second, and being able to work with 30 frames as opposed to say 15 frames for that duration gives you quite a few extra frames to work with. The resolution value determines how the comp will be displayed in After Effects.
Seeing as how these things are not exactly Hollywood action thrillers, keep it locked on full. Your final decision is duration. Depending on what you want to prototype, duration should be somewhere between five and 10 seconds, or if you're using frames, you can use the number of frames. So, if I've got 60 frames per second here and I want to go five seconds, well that's 300 frames. That should be more than enough. If you are showing transitions between screens, then you might want to think about 10 seconds.
Your final decision is down here, background color. I'm going to leave that one to you, but I usually stick with either white or black, depending on what is being prototyped. If you click OK the comp appears right here in the project panel. Here's a little teacher trick. If you need to show different scene sizes and devices, you just need a comp for each one. To do that, all you have to do is just drag down on top of the new comp button, and it makes a new comp, and then simply click on the new one, composition settings, and here you can add, let's say, an Android device.
I'm going to change the name to Android, and the width and height dimensions are 360 by 640. Notice how the aspect ratio changed that to 640. Once you click OK, you're good to go. At this point you might want to save the document, because we'll be using it for the rest of this chapter. There you have it, creating your prototype's composition is not terribly difficult. Keep in mind that frame rate I showed you, 60 frames per second, and to keep the duration low.
Finally, if you need to creating an iPad, Android Tablet, or even White Page prototype, use my littler teacher trick to save yourself some time.
- Prototyping motion
- Using the Graph Editor
- Working with shapes and masks
- Supporting tap, press, and swipe gestures
- Handling pinch and spread gestures
- Designing patterns
- Making navigation, buttons, and breadcrumbs
- Creating progress bars
- Working with modals, menus, and cards
- Zooming content
- Making a floating action button
- Handling text input and cursors