Placeholders hold a place for future content. If you don't need a change at every render, feed the content in Storybuilding Suite. If you do need a change at every render, feed the content during final rendering, in the csv, or by using API.
There are two elements to the content you work with. These are:

  • The data:
    This is the name of the customer, the price they are paying, a video of the product, or an icon of the current weather.
  • The style:
    This is what the data looks like. What font, or color the text has, or how the text or media is arranged inside the placeholder. You define the style in After Effects. You can later change it in the Storyboard or through Scene API.



Text Placeholder Behavior

The Data

In After Effects you type. The text you type doesn't matter as you replace it for each render. Even if you build the text out of parts that won't change combined with text that will, you type them all as one sentence.
Later, in Storybuilding Suite or API, you create a structure that represents the way you receive the data. Looking at the example below, you define the dollar symbol once and won't not need to send it each time. You then define the dollar amount as one parameter, and the cents amount as a second parameter. During video generation you send the dollar amount and the cents amount and Idomoo does the rest for you.


Split the text into a static part and two data parameters.



The Style

In After Effects you setup the style of the text as you like. You can combine different fonts, sizes and colors of different character. You do so by marking parts of the text and changing the properties in the character panel.
However, and this is important, when packaging the scene only the properties of the first character are taken.
You recreate the style in the Storybuilding Suite or by using Scene API. For the example above, you already split the text into three parts. You can give each part its own style properties.
The properties in your control are:

  • Font
  • Color
  • Highlight (color behind text)
  • Underline
  • Strikethrough
  • Superscript
  • Subscript

Using all these controls you can create rich text styles in a single placeholder.



Text Bounding Boxes

The text that replaces the text you had in After Effects most likely has a different length. The price in the example above might be $23.99, for example. So what happens if the text is shorter or longer than what you had in After Effects? This is where the bounding box comes in. You define the bounding box in After Effects when creating the layer. It differs between point text layers and paragraph text layers:



For point text layers, on the left, the bounding box is the eight square dots around the edges of the layer. You make the bounding box bigger or smaller by typing more or less text. For paragraph text layers, on the right, the bounding box is the box you draw while editing the text. You drag its edges to make it bigger or smaller.

There are three things you can do inside the bounding box:

  1. Align the text in relation to the bounding box
  2. Scale or wrap the text inside the bounding box
  3. Choose how the words run in the bounding box: left-to-right or right-to-left


Bounding Box Alignment

Align the text to the bounding box any which way you'd like:

  • Align horizontally: left, center, right.
  • Align vertically: top, middle, bottom.
  • By default, the horizontal alignment is taken from the After Effects layer. The vertical alignment is by default bottom for point text layers, and top for paragraph text layers.
    ☞ Note that the top vertical alignment will not match After Effect's vertical position on some fonts.


Bounding Box Wrapping

In combination with alignment you can also decide what to do if the text is wider or taller than the bounding box. There are 5 options to play with. Combining the options creates very advanced behaviors for long text:

  1. Shrink Text - if the text is wider than the bounding box, the font size shrinks to fit. If you turn on the breakline option, font size shrinks to fit bounding box height instead of width.
    ☞ This is default for point text layers.
  2. Breakline - when the text reaches bounding box width, the text breaks to another line at the last space. If there is no space (one long word) there is no line break.
    ☞ This is default for paragraph text layers.
  3. Minimum Font Size - you can set a minimum font size so when shrink is on, it won't reduce the font size below this value. This means the text might leave the bounding box or is truncated.
  4. Truncate - if the text is too long this shortens the amount of text by replacing the last space with an ellipsis.
  5. Truncate String - if you don't want to use an ellipsis this feature allows you to use any other text string, for example: [more].



These are examples of the wrapping behaviors. Each box is a bounding box. The alignment is Left and Top for all placeholder.



Using the bounding box alignment, wrapping behaviors, and all the stylistic choices, you can see how much power you have without having to go back in to After Effects for corrections.


Media Placeholder Behavior

The media placeholder is an interchangeable placeholder. In After Effects, a layer will either be an image, or video, or solid. Once you create the IDM file, that layer is now a media placeholder. The media placeholder can have an asset of either an image, video, or any color. This is decided by sending the data you want for the placeholder.

The Data

For media placeholders the data is simpler than for text placeholders. You simply send a url to an image or video, or a set of numbers for colors, and that's it.

The Style

The stylistic choices for media placeholders deal with the relationship between the placeholder and the asset. Assets relate to the resolution of the placeholder. The layer's resolution in After Effects determines the resolution of the placeholder. Videos also relate to the duration of the placeholder as it was set in the After Effects layer. Using a media placeholder with a color asset results in the color filling the placeholder.

Media Scaling and Alignment

You might use images or videos that are not the same resolution or aspect ratio as the placeholder. Using Storybuilding Suite or Scene API choose how you want the image to scale with these options:

  • Fit (default) - scales the asset, down or up, to reach the edge of the placeholder. The whole asset fits inside the placeholder. If the asset is not the same aspect ratio as the placeholder, transparency is used where needed.
  • Fill - same as fit, but fills the placeholder completely. If the asset is not the same aspect ratio as the placeholder, the asset is cropped where needed.
  • Custom - choose any scale through Scene API, or choose not to scale the asset at all when using Storybuilder.

Now you've scaled the media, choose how you want the image to align to the placeholder:

  • Horizontally - choose from left, center (default), or right.
  • Vertically - choose from top, middle (default), or bottom.

Using these features decide what's important in the final result. For example: seeing the whole image, or covering the whole placeholder. When cropping, do you want to make sure the top is visible? Align to the top. Or the bottom? Align to the bottom.
Here are examples:

Video Duration Behavior

The video asset can be shorter or longer than the placeholder. Longer videos are cut to the duration of the placeholder. For shorter assets you can choose:

  • Cut (default) - the video ends when the asset ends.
  • Loop - the video starts again when it reaches the end.
  • Hold - the last frame of the video is held till the end.




Next Installing Idomoo Scene Tools
Back Placeholder Layers