There are three main use cases where you will need to design your layout to be responsive:
Each use case has its own best practices and strategies for dealing with these variables.
Variable content can be accommodated within the scope of your After Effects layout. Adjustments to padding between objects in your layout—text boxes and image placeholder fields—and careful consideration of how these items should be arrayed can allow for variances in this kind of content.
Variances in target screens require the use of responsive anchors (supported in 5.0 of You.i React Native) within your AE layout to allow your final screens to adapt as needed. Choosing whether to use responsive anchors that scale or size a layout requires an awareness of how these different tools behave, and which one is the most appropriate given the scenario.
Responsive anchors rely on the use of null objects in After Effects. A null object functions like a visible layer in your composition, so can parent any layer, but it is invisible. In a layout with multiple layers, a null object allows a user to parent all those other layers to itself, so that once the null object is scaled or sized, the other layers will follow the scaling or sizing of the null object.
In a simple composition with many layers, this can be a useful tool, but it can cause various issues where a composition is more complex. Additionally, if the original layout is in landscape view, responsive anchors may not be sufficient to reflow a layout to portrait view. Responsive anchors are best applied to lists, where there is a difference of either width or height that you’re trying to bridge.
The goal of anchors is to create a framework by which your layout will automatically scale and reposition content to fit a screen with a different aspect ratio. Scaling anchors work as their name implies: they scale a layout up or down relative to the positioning of the anchors.
Sizing anchors allow you to extend the view of a layout—much like opening a container—to reveal more or less of a layout’s contents, depending on how you’ve set up your layout and your intention in adapting it to a certain screen size or orientation. In most cases, where the aspect ratios do not vary that greatly, carefully chosen sizing anchors will allow you to adapt your layout without negatively impacting the images or text.
Refer to the table below for an overview of different anchors and the actions they perform.
| Anchor Name | Anchor Point Position | Description | Usage |
|---|---|---|---|
| Sizing | The Sizing anchor relays screen size to a composition’s layout to properly scale and position layout components. The Sizing anchor resizes its linked content, rather than scale it, e.g reveals more instead of making it larger or smaller. | Dynamic layouts | |
| Proportional Scaling
|
Top left, top, top right
Left, center, right Bottom left, bottom, bottom right |
Scales height and width in a directly corresponding manner. Proportional scaling calculates the new dimensions based on the average difference between width and height.
|
An asset that can scale up or down proportionally, maintaining the aspect ratio between width and height
|
| Proportional Width Scaling
|
Top left, top, top right
Left, center, right Bottom left, bottom, bottom right |
Proportional Width Scaling calculates the new dimensions based on difference of width.
|
Calculates the proportional scale of an asset based on difference of width between the original and resized composition.
|
| Proportional Height Scaling
|
Top left, top, top right
Left, center, right Bottom left, bottom, bottom right |
Proportional Height Scaling calculates the new dimensions based on difference of height.
|
Calculates the proportional scale of an asset based on difference of height between the original and resized composition.
|
Best practice is to first try applying sizing anchors to your layout. If you’re unable to accommodate changes in screen size using the parameters of your layout, or applying a sizing anchor isn’t sufficient, you may need to resort to scaling anchors; not all compositions require layout adjustments, and these may not yield the desired results. In such a case, you may want to try using scaling anchors to set responsive properties for compositions and layers. You may find that you will need to play around with adjusting scaling options for the objects in your layout individually in order to achieve your desired result. Anchors that apply a scaling attribute globally to an entire layout may limit your ability to produce the behavior you are seeking to create in the finished product.
Variances in platform are best tackled by using the asset root locator to organize and fetch the appropriate assets required by specific target platforms. An example would be an app deploying on both 10-foot and mobile platforms: using an image asset designed for a 10-foot experience on a mobile screen creates unnecessary memory demands on the mobile device. The asset root locator is designed to solve this issue by only using the assets that are sized and optimized for the target platform.
You.i TV recommends that when you are working on a layout in After Effects, best practice is to begin by anticipating the need to accommodate variable content, then if the need arises to work towards accommodating for screen and then platform variances, to adjust and employ the suggested strategies for tackling these variances.