: How to create animated GIFs of prototype mockups, like the ones on Dribbble? I'm sure you've seen Dribbblers upload animated mockups of their designs. Here's an example: I can create mockups

@Ann6370331

if you want to stick to Keynote and export it as a Quicktime format, I think it might not hurt to try:

GIF Brewery


GIF Brewery lets you convert brief clips from your video files into GIFs. Whether you want to create the newest cat GIF or provide a preview of a longer video, GIF Brewery is for you.

No longer must you extract frames from your movies and fiddle with layers in Adobe® Photoshop®. Instead, let GIF Brewery do all the tedious work for you.

In addition, GIF Brewery contains plenty of other features to express your creativity. You can add captions to recreate dialogue or add multiple image filters.

I really love all the instructions given from @Joonas though.

Vote Up Vote Down

@Karen819

You could also create the animation of the UI using Keynote. Its fairly simple and perfect for creating UI animations. I then used after effects to just place the video it into the Phone.

Step 1 : I first created the UI animation on keynote and made this: vimeo.com/108991829
Step 2 : I then placed the video into an iPhone after effects mockup that I found online and saved the .mov file. Following the instructions on this video:

Vote Up Vote Down

@Moriarity648

THIS IS A FREE ANIMATED MOCKUP .PSD FILE of a website scroll dow and a menu animation completely edit and animated in photoshop ridiculous easy to edit and play around, you can download the file for free here, i also have a tutorial video of how is easy to edit this freebie.

Vote Up Vote Down

@Ogunnowo857

Things you need to know to create something like this in After Effects:







How to make a Project and Compositions

When you start AE, you can press Cmd+N to create a new Project with one Composition inside it.

If you already have a Project open, pressing Cmd+N only creates a new Composition.

In this project, I used 2 compositions. GUI comp to hold the GUI and its animations. iphone comp to hold both, the background and GUI comp.

The second composition with GUI animations should be the same size as the screen, or at least have the same aspect ratio. Later, when you are going to place it on the screen, it might stretch to look odd if the aspect ratio is off.





Importing images to AE

After Effects has a pretty good system for importing .psd files, but I don't like to use it because if you misplace, move or rename the .psd file, after effects can't find it and you have to replace footage for every layer separately.

If you import a folder of images into the projects and you, for example. rename the image folder, you only have to replace one image footage and all the missing images are restored ( As long as all the missing images exist in the same folder ). Also this way there's less clutter.

How to import images to a project

Right-click inside the Project panel on the left choose: Import > Multiple files

...or you can just drag files into that panel

I used slicy to export my images out of photoshop.





What objects should you save as separate image files

Essentially you'll want to save all moving objects separately. You may also need to save a few static objects separately.

In this project I could've potentially saved the header and footer as one, but the header had a shadow that goes over the first button, so I had to save them separately.

Here's a breakdown of how I saved my image files in photoshop before importing them to AE.







Animating 101

Position animation:


Position animation:


Select your object in the list on the left side of timeline.
Press P
Click the stopwatch icon that is now below your selected layer. This automatically adds the first keyframe, where ever your time indicator is ( it's red line in the timeline ).

move the Time indicator forward in the timeline. Drag it or Cmd+{Arrow left or right} or Cmd+Shift+{Arrow left or right}
in the composition viewer, drag your object to the position where you want it to move ( You can also use Shift+arrow keys, just like in photoshop Or by dragging the number values. ).
Another keyframe appears in the timeline and now you have an animation.

You can play the animation by pressing space



Move the keyframes closer to eachother to speedup the animation or further away from each other to slow it down.

Continuing animations after a pause.

a scenario: You've animated something from A to B and you want to pause for X amount of milliseconds and then move from B to C.

When you've animated B, go forward in the timeline and click the keyframe icon on the left side, here:

It should look greyed out, so don't worry. That just means there is no keyframe in that position

Since keyframe #2 and the newly created keyframe #3 transform have the same values, there is now a pause between those two keyframes. Then you can continue animating normally, by moving forward in the timeline, and changing the values again.

Animating other things, like Rotation or Opacity

I just wanted to take this time to tell you that all of them work just like position animations ( ...minus the dragging ).

Just use the number sliders that show up when you press the hotkeys below.

Hotkeys for different transform methods:


P - Position
T - Opacity
R - Rotation
S - Scale
A - Anchor point


Just select object(s) and press one of these hotkeys and start animating. If you don't select anything, it reveals transform methods for each object in the comp.





How to slave objects to other objects

In the Comp panel you'll notice a Parent dropdown list on every object.

You can use it to define a parent for an object.



If you then move the Parent, you'll notice that the Child element now moves with it. Same goes for animations that you attach to the Parent element.

If you animate Parent object to rotate, the Child will follow...





Adding elasticity to your animation

So maybe you noticed that the button animation doesn't stop to a wall, instead it stops in a very elastic way.

After Effect Expressions can be used to achieve this ( It can do a lot more as well ).

To apply Expression script to an animation, Alt+{mouse click} the stopwatch and paste in the script.



The Expression I used in my button animation

The first 3 variables amp, freq, decay can be edited to get different results out of it.

You can apply this same script to movement based animations. For example, opacity animation is not affected.

Can also be found in here.

amp = .1;
freq = 1.0;
decay = 9.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}}
if (n == 0){ t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value}






Easing....

So this is another thing that can make the animation seem a lot less linear, just like the Expression script above.

I used Ease Ease in that "touch indicator circle" to make it look at bit more human like movement.

You can select one or multiple keyframes and right-click one of them.

Then from the list: Keyframe assistant > Easy Ease


I often use Easy ease, because I'm lazy...

Pics or didn't happen...

Here's a simple position animation demonstrating how easing and this particular expression script can have a huge impact on the animation.







Placing animated comp/footage into a screen

So after the GUI is animated, it's time to place it on the screen of the device.


Place GUI comp inside iPhone comp, just like you place images inside a composition.
Double click iPhone comp in the Project panel
Select GUI comp
From the top menu Effects > Distort > Corner pin
Then just drag each corner to match the device screen corners.








Exporting to .gif

AE doesn't have native method for doing this, but do not worry, there are ways.

I prefer to do this:


Click a composition in the Projects panel
Composition > Add to render queue Cmd+Ctrl+M
Then at the bottom where timeline normally sits, you choose what to export and where.


I usually export a lossless .mov
If you click the "Render settings", you can choose a framerate, otherwise it'll use the Comp framerate

Then just press render on the upper right corner or that panel.
Find the exported file and open it up in photoshop.
Save for web Cmd+Shift+Alt+S


Save as .gif



It's honestly not that bad...





Exporting as a video file

So even though the above method shows you how to export a lossless file, it's not the way you should export video files.

You do that like this:


Save your project file.
Click a composition in the Projects panel ( if you have more than one )
Composition > Add to adobe media encoder queue Cmd+Alt+M
Drag a preset from the right column to the left column
Press play.
If you don't choose export folder, by default it goes right next to the project file.






How to replace footage

So AE can't find your files? Do this:


Right click one of the missing footage in the Project panel
From the list Replace footage > File...
Locate your footage and stuff






Other useful hotkeys


U - Reveals all used keyframes in the comp (if you have nothing selected). Really useful when you need to move multiple keyframes at once, for example.
U (Double tap) - Reveals everything that was changed.
E (Double tap) - Reveals all used Expressions.
J - Moves to the previous keyframe.
K - Moves to the next keyframe.
space - Plays comp
I or home key - Moves current time indicator to the beginning on the timeline.
Cmd+K - Current composition settings.
Cmd+I - Import files.
Alt+{Arrow keys left and right} - Select keyframe(s) and press the hotkeys to move them around.
Alt+Shift+{Arrow keys left and right} - Select keyframe(s) and press the hotkeys to move them around.






The project files can be found here.

Vote Up Vote Down

@Murray976

There are two ways to do this.


Recreate/Mockup the desired animations in an animation program (of which After Effects is one) and then export that as an animated gif. Obviously (as you've realised) this will involve also creating "fake" touches and other interactions to demonstrate what's going on.
Create a functional prototype and then record the output from your device via AppleTV or similar through the HDMI output as it's being passed to your television.


Both are incredibly time consuming and journey's in their own right.

But option 2 has ENORMOUS advantages over option 1. Not least of which is that you'll learn some basic programming.

Far greater than that, though, is that with some very basic interactive programming ability you'll be able to iterate through variations and alternative approaches far faster than someone using Animation software.

And you'll have something that's truly interactive to demonstrate your design. Plus the artwork has actually been tested in an interactive environment on the device, so is already sure to be pixel and colour perfect.

But wait, I know. You're scared. It's going to be hard, right?

Not if you've got an iPad.

Codea is the cheapest, fastest way to make trivial (and VERY complex) animations and interactivity in the simplest, cleanest scripting language on earth... Lau.
codea.io
If you don't have an iPad, get one.

Until then, get on with learning processing.org as you'll be able to make similarly interesting mockups within that:
processing.org/
Processing uses another script language called Javascript. It's similarly simple, but not nearly as elegant as Lua.

Vote Up Vote Down

@Twilah924

If you look in the comments on that particular post, the guy says he used Adobe After Effects www.adobe.com/uk/products/aftereffects.html

Vote Up Vote Down