Reusing and retargeting animations for various screen sizes

Using Adobe Animate, we can adapt our existing projects for various additional screen dimensions through the interface. We'll examine how to convert a widescreen project to better fit a mobile device resolution.

Published August 10, 2023

Download files

00:01

Introduction

Using Animate, we can adapt our existing projects for various additional screen dimensions through the interface.

Let's have a look at how to convert this widescreen project to better fit a mobile device resolution.

00:16

Reviewing stage size and mobile adaptation goals

At the moment, we can tell in the Properties panel that this is a 1280 by 720 animation which works fine for desktop, but maybe we need to adapt this to some mobile dimensions.

There're two ways to go about doing this.

One way is to go through and scale our content

00:32

Resizing projects using scale content

and using Scale Content, we can go ahead and change this to something like 640 in width and the height will automatically adapt.

And as you can see, it retains the aspect ratio.

If I recenter this, fitting in window, we can see that it looks exactly the same because all these assets have been drawn with vectors.

However, we can also untick Scale Content

01:06

Resizing without scaling and repositioning elements

and then we have the ability to unlink both width and height.

Then perhaps you want to change this to 640 by 960.

If we fit in a window now, we can see that it's very different in terms of how things are laid out.

We'll go ahead and unlock all of these layers, go back to like the first frame here and actually select the different objects we might want to reposition and then just pull them down to exactly where we would want them.

So now we've got the hippo and the land down below and we have the sky with the moon and the clouds up above.

We can even go ahead and scale these particular objects using the Free Transform Tool and reposition them as so.

All right let's undo that and go back to the previous state of our project and note that there's also an additional way to scale the content

02:04

Using anchors to adapt layouts in advanced settings

while pinning or anchoring content as it's scaled.

So, the way we do this is to go into Advanced Settings... through the Properties panel and here if we choose to change this from 1280 to 720 to 640 to 960 once again, you'll notice that we also have the ability to pin or anchor content.

Now if you choose to Scale Content the Anchor is become disabled.

So, make sure you're not scaling your content.

And then just pin it.

So, I'm going to pin to the lower right here and then hit OK.

All right let's go ahead and fit in window and we'll clip content outside the stage to see exactly how that looks.

02:57

Comparing approaches for responsive stage resizing

As you can see there are a number of good approaches to resizing and adapting content to various stage sizes.

What you learned:

Convert an existing animation to fit different screen sizes and resolutions
Change the Frames per Second (FPS) of an animation
Pin or anchor an animation while changing the dimensions of the animation

Presenter: Joseph Labrecque

Cookie Settings

General information

Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage and local shared objects, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.

If enabled:

We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud

If disabled:

We won’t be able to remember you from session to session so the experience may not be tailored to your interests
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you

General information

Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.

If enabled:

We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud

If disabled:

We won’t be able to remember you from session to session so the experience may not be tailored to your interests
We’ll still count your use of our site and services
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you

View transcript