Bonzai Studio's creative composition workspace enables you to build creative that adapts to different display screens.

In the following section, you can follow the build process to create a creative in the ScrollX format.

Work with Assets

To build the creative using multimedia assets, you can import image or video assets from your content library.

To import assets

On the workspace, click the Assets icon. The Assets menu appears.
Click the Upload icon to navigate to your desired folder and select your assets. The selected assets appear on the Assets menu.
Drag the asset on the canvas.

While working with images, we recommend you to do the following:

Use compressed high-resolution images for the initial device design
Image format supported are JPG, PNG, and GIF
Separate layer of images provides better animation options.
Save image files in PNG format to retain the transparent elements in the image.
Bonzai Studio supports a maximum image size of 2 megabytes (MB) per image.

While working with videos, we recommend you to do the following:

Video duration should be within 6 and 30 seconds.
Video aspect ratio should be either 4:3 or 16:9.
Video file should be encoded in the H.264 codec.
Video format supported is MP4 format.
Video file size:
- For programmatic creative's, the maximum video file size allowed on DSPs is 5 megabytes (MB).
- Across publishers, the maximum video file size supported is 2 megabytes (MB). Please check with your publisher on the optimal video file size.
- On the Studio, the maximum video file size is 20 megabytes (MB) per video.

To ensure the creative is responsive

We recommended you to avoid using a single JPEG image.

A single creative image hinders the responsive feature of the ScrollX creative.

The default Image Fill option on Studio is ‘Shrink to Fit’. The option ensures that the image maintains the aspect ratio and the aspect never expands outside of its container or get distorted.

However, a white space appears above and below the image asset in the ScrollX creative.

To remove the white space, you can select ‘Expand to Fill’ Image fill option. This setting crops the edges of the creative.

In the following image, we can see the LEARN MORE button almost touches the edge of the ad container.

If we select the Image Fill option as 'Distort', the image resizes to touch the border of the image container. This may distort the image as seen in the preview screen below.

Using a single creative image ensures that you would experience any of the above-mentioned scenarios.

Use layered creative images on the ScrollX

We need to separately add the background and the foreground images.

In the sample creative below, separate background and foreground image (transparent png) are dropped on the Canvas.

Arrange your assets and then apply the following image fill settings to the images:

The Image Fill option for the background image is set to Expand to fill.

The Image Fill option for the foreground image is set to Shrink to fit.

Preview of the creative on different screens

Animate images on a ScrollX ad

Once you have learned to how to align the individual images on the Bonzai Studio Canvas, it is easy to add animation to the images.

Add animation from the timeline given at the bottom of the Studio.

Just make sure that the position of the images on their last keyframes are as per your creative design.

In the above example, we have added animation to the table, cup and the steam.

Please have a look at the ScrollX ad - Preview

(In the preview window, please scroll down to see the ad).

How to trigger animation in the ScrollX ad only when it comes in view?

By default, the Bonzai ScrollX ad already has an action incorporated that starts the animation timeline when the ad is 10% in view.

You can change the settings as listed below:

Select the ScollX page then follow these steps:

Add action from the right hand panel
Select event - ‘Ad in view’
Set the viewability level on which you want to trigger the animation (we have set 50% in this example).
Add action - Start Timeline
Select the Main Timeline
Select the option Fire only once if you want the animation to be triggered only once every time the ad is loaded on the page
Click on the save button to save the action

How to trigger autoplay video in mute in ScrollX ad?

You can trigger an autoplay video asset when the ad is in view and also put the video to play in loop. The video play settings can be found on the right hand panel when the video is selected on the canvas.

Here’s a preview of an autoplay video ad that plays on mute - https://goo.gl/ihDsbT

The vertical video controls (countdown timer and sound icon) are provided by the

Bonzai Studio and cannot be changed. Do reach out to your Bonzai Customer Success team to help you with a JS code to change them.

Notes - image fill options

For an image, there are Image fill properties which help decide how the image should work when resized.

Shrink to fit (Default setting) - This option specifies that at no point the image should get skewed and will always maintain the original aspect ratio. So the container holding the image will resize but the image will reside within the container always maintaining the aspect ratio.

Expand to fill - This option specifies that the original image should resize to fill the new container size without distorting the image, maintaining the aspect ratio. This option leads to some part of the image getting cut off.

Distort - This option specifies that the original image should resize to fill the new container by distorting the image if required.

In the example below, a 300x250 responsive ad is served into a 600x250 ad container.

The 300x250 responsive ad -

Here’s how the unit would adapt into a 600x250 ad container as per various image fill options. (the background color of the 600x250 ad is red)