Responsive UI - Custom bounding box

Overview

Currently, a symbol is exported from Animate as an HTML element with a bounding box that will be defined around all the elements created inside its timeline.

If there are animations inside the symbol's timeline then the bounding box calculations will be based on the state of all the animations where the elements are farthermost from their initial state.

Then if there are a lot of animations that are stretching the bounding box it is impossible to fix its size.

If the size of the bounding box is not fixed then there might be unnecessary offsets around the symbol.

If the elements are wrapped inside a flex container there might be a bigger offset than expected and visible in Animate.

Here the animation of the arrow stretches the bounding box of the button and there is a bigger offset between them.

Custom AABB

А new option inside the Properties tab has been added with the name "Use custom AABB" (custom axis-aligned bounding box).

When this option is enabled the bounding box of a symbol can be controlled and fixed.

Note: This option is available just for symbols and not for symbol instances.

Custom AABB workflow

When the "Use custom AABB" checkbox is enabled for a symbol, Animate will enter inside the symbols' timeline. Then new guide layer with the name "__PRYSM_AABB__" will be generated inside and a new black rectangle will be added to this layer.

Note: If a guide layer with the name "__PRYSM_AABB__" already exist inside the symbol's timeline then Animate will just enter inside the symbol and select all the elements on this layer.

This special guide layer will define the custom size of the bounding box.

The size of the box may be defined with:

  • One shape on this layer - The size of the box is the size of the shape.
  • Multiple shape elements - The size of the box will be the bounding box of all the shapes on this layer.
  • A movie clip - The size of the box will be the bounding box of the movie clip.

Note: All the other types of elements used for defining the size of the custom bounding box won't work!

Workflow with a shape AABB

Note: "__PRYSM_AABB__" must have just one keyframe span with shape element!

To stop using the custom bounding box of a symbol simply uncheck the "Use custom AABB". The layer "__PRYSM_AABB__" will be preserved. Enabling the option again won't create a new layer and instead will use this one.

Note: If "__PRYSM_AABB__" layer exists inside the symbol's timeline but the "Use custom AABB" option is disabled for this symbol then a custom bounding box won't be applied!

Note: If "__PRYSM_AABB__" layer does not exist inside the symbol's timeline but the "Use custom AABB" option is enabled for this symbol then a custom bounding box won't be applied!

Workflow with a movie clip AABB

A movie clip used for a custom AABB allows you to animate the width and height of the box. When using a movie clip as an AABB the "__PRYSM_AABB__" layer can have multiple frame spans and they can be animated through tweens. The following conditions must be met for the AABB to work.

  • The movie clip must exist on the first frame span.
  • The same movie clip must exist in all frame spans of the guide layer.
  • There can't be empty frame spans.
  • There can't be frame spans with elements different from the movie clip of the first frame span.
  • The movie clip must have the same metadata in all frame spans.

Note: The animation of the movie clip AABB affects only the width and height of its parent movie clip. The element and its children are positioned based on the position of the AABB clip in the first frame. Note: The movie clip AABB affects the size of its parent. Therefore, its animation is defined in the timeline of its parent. Note: The transform origin of the movie clip that defines the AABB is not respected.

Edit custom AABB size

To edit the size of the custom bounding box size of the symbol you can:

  • Enter manually inside the symbol's timeline and resize the shape/s on the "__PRYSM_AABB__" layer.
  • Use the "Edit AABB" button from the properties tab - when clicked Animate will enter in the symbol's timeline and select all the shapes on the "__PRYSM_AABB__" layer.

Add a custom AABB

Select the symbol that will have a custom bounding box.

Check the "Use custom AABB" options from the Properties tab.

Then edit the shape that will define the size of the bounding box.

AABB axis limitation

With this option, you can select which axis of the custom AABB element will be applied to the movie clip size.

  • Both - Default. Movie clips will be exported with the size of the custom AABB element.

  • Width - Movie clip will be exported with a width that is the same as the width of the custom AABB element. The height of the movie clip will be the same as it is in Animate without the custom AABB height applied.

  • Height - Movie clip will be exported with a height that is the same as the height of the custom AABB element. The width of the movie clip will be the same as it is in Animate without the custom AABB width applied.