Kim Pimmel's profile

How to use GIFs & PNG sequences in Adobe Aero

How to use GIFs & PNG sequences
in Adobe Aero
In this tutorial we'll cover how to add and animate a GIF or PNG sequence in augmented reality, using Aero on an iPhone. 

Artists and content creators can bring their spaces to life with 2D animations in a custom world filter. You can use it to make a statement, tell a story, or just have fun! 
Add a GIF to your Aero Scene
This tutorial assumes a basic knowledge of Adobe Aero, how to add and place assets, and how to add behaviors

If you're on an iPhone, use your mobile browser to find a GIF, and then long press on the GIF to save it to your camera roll. If you're on a Macbook, Airdrop it to your phone. Once  the file is on your phone, it's a good idea to check it in the camera roll to make sure that the GIF actually animates - sometimes GIFs saved from the web will be static when downloaded.
Chill GIF by V5MT / Giphy
To add a GIF to your Aero scene, tap the blue plus icon and browse to your GIF in your camera roll or Creative Cloud filesThe file will show in your scene, and tap to place it. 
We can see that GIF isn't animating yet, so we'll use Behaviors to make it move. Tap the asset to select it, and go to the Behaviors tab. Add a 'Start' trigger, and then tap to add a new action - in this case we'll choose the 'Play Images' action from the list.
After choosing the Play Images action, we'll see the options, where we'll want to scroll down and set the GIF looping to Infinite. Press the checkbox to save. To view your scene, press Preview at the top of the screen to see the GIF animate!
Animating PNG Sequences
For creators looking to have higher quality animation for their original work, the PNG format has better fidelity than GIFs, and supports transparency.
Export your animation as a numbered sequence of PNGs (file001.png, file002.png, etc) . In the example below I created my animation as Fresco layers, then used Photoshop to Export Layers To Files. This will save out each Photoshop layer as a separate PNG file.
Compress your PNG sequence into a Zip file. This is the file we'll import into Aero.

Since PNG sequences are higher quality and can use more memory on your device, you should prepare your assets accordingly - keeping the size of your zip to under 50mb will ensure good results.
To access your Zip file with Aero, you can Airdrop it into the Files app on your phone, or add it to your Creative Cloud files. Once in Aero, tap the blue plus button, and browse to your Zip. 
Once you've placed your assets in your scene, you can use the same steps above to animate the sequence, and then tap Preview to view your scene.
The triangle PNG sequence animated in Aero
The animated PNG sequence used in a creative project
That's it - with this simple workflow you can use animations in augmented reality for storytelling, memes, or as an artwork in the world

Share your Aero creations with the #AdobeAero hashtag!
How to use GIFs & PNG sequences in Adobe Aero
Published:

How to use GIFs & PNG sequences in Adobe Aero

Published: