Surrounding Text with a Background

At times, your design calls for the text to be surrounded by a background that follows the text size, featuring a little padding. The problem is that because the text is dynamic, the background must change with it.
For that exact reason we came up with the background feature. Interested? Read on.

Background Anatomy

The background is a rectangle that derives its dimensions from the generated text. You can control the color, transparency, the padding around the text area, and choose how rounded the corners should be. Another important property is the ability to hide the text that generated the background. This allows you to separate the animation of the text and the background by creating two text layers, and using one of them for just the background.

Referencing the image above, the padding can be controlled in 4 directions as distance from the generated box, in pixels (top, right, bottom, and left). The roundness of corners is also in pixels (top left, top right, bottom right, and bottom left).

How to Create a Text Background

Usually all visuals are designed and animated in After Effects by the After Effects artist, and the IDM you upload contains all visual elements needed. This is not the case for these backgrounds. Instead the steps are:

1. Preview the background with shape layers in After Effects, but package the scene without the shapes.
2. The After Effects artist passes on the background settings to the Storybuilding Suite user.
3. Storybuilding Suite user re-applies the background settings in the storyboard.

You can watch a complete workflow to see how to set up this feature by watching the following video. The rest of the article describes how to use Storybuilder and After Effects with some extra tips.

Watch the Text Background Video

Total running time: 8:34

At the bottom of this article you can find the scene used for this video tutorial as an IDM file. You are welcome to download this scene to your computer, then upload it to your account, and use it to follow the tutorial.

Let's start at the end of the process: adding a text background to a text placeholder in a storyboard.

Setting up Backgrounds in Storybuilder

Adding a background to a text placeholder is pretty straightforward. Simply follow these steps:

1. With a storyboard open in the storybuilder, and a scene selected containing at least one text placeholder, click the pencil icon to load the Advanced Text Placeholder Options panel.
2. At the top of the panel, check the checkbox next to the word background.
3. The background editor opens as shown in the image above. Here you can do the following:
   1. Set the color of the background as well as its transparency using the alpha input field.
   2. Set the margin around the text. Using the slider moves all sides by the same amount. If you want to change one side, you can input different numbers in the text input field. The order of the numbers is top, right, bottom, and left.
   3. Set the roundness of the corners of the rectangle. Move the slider for a uniform value, or numerically change the values by using the text input field. The order of the numbers is top left, top right, bottom right, and bottom left.
   4. Finally, if you don't want to show the text, but just use it to generate the size of the background, you can tick the Hide Text checkbox.

This is it. Very straightforward.
If you'd like to try it yourself, and you are looking for a suitable scene, you can find one at the bottom of this article to download. Once you have the IDM file on your computer, you can upload it yourself to a scene library in your account. This scene matches the scene used in the video tutorial above, in case you want to follow.

Previewing Backgrounds in After Effects

Slightly more challenging is the task of previewing what the background will look like on the Idomoo platform. But here's a good way of achieving this. Follow these steps:

1. Add a shape layer to your composition containing the text placeholder. You can do this by using the menu at the top of the screen. Click Layer > New > Shape Layer.
2. Once you have your shape layer, add a rectangle by clicking opening the properties for your new layer and from the add menu clicking on Rectangle.
   
3. Open the twirly arrow for the Rectangle you just created. You should now see the properties for Size and Position.
4. Add the following expression to the position property:
   

   textLayer="text layer";
   x=thisComp.layer(textLayer).sourceRectAtTime().left+thisComp.layer(textLayer).sourceRectAtTime().width/2;
   y=thisComp.layer(textLayer).sourceRectAtTime().top+thisComp.layer(textLayer).sourceRectAtTime().height/2;
   [x,y]
   		

5. On the first line, change the layer name from "text layer" to the name of the text layer you want the background to be generated from.
6. Add the following expression to the size property:
   

   textLayer="text layer";
   w=thisComp.layer(textLayer).sourceRectAtTime().width;
   h=thisComp.layer(textLayer).sourceRectAtTime().height;
   gap=0;
   [w+gap*2,h+gap*2]
   		

7. Here too, on the first line, change the layer name from "text layer" to the name of the text layer you want the background to be generated from.
8. Parent the shape layer to the text layer, while the text layer position is 0,0. This is so the shape layer will follow the movement of the text layer.
9. Add a fill to the shape layer By clicking Add > Fill.

This concludes the setup. You can now control all the settings of the background:

• Control the color of the shape by using the fill color you added in the last shape.
• Control the margin by changing the gap value in the size property expression.
• Control the roundness of the corners by controlling the roundness setting of the rectangle.

Once you are happy with the look of the shape, you can pass on these values to the person doing the Storybuilder work.