Unlock the full potential of your ad designs with the Assets feature, your gateway to a world of captivating visuals and dynamic content. Seamlessly integrate videos and images of various formats—PNGs, GIFs, JPGs, and more—directly from the Assets tab. With responsive styling and positioning options, your creative vision knows no bounds. Effortlessly layer and arrange assets to achieve the perfect composition, ensuring your ads captivate and engage your audience across every platform and device.
Example
In this example, we use both video and image assets, as well as showcasing click interactions and timeline animations.
The first scene contains a full height video with image assets in front of it that can be clicked away. The second scene shows a normal format video as well as further background assets etc.
As with all examples, you can request us to copy them over to your company so you can look at how they are built in detail.
Images
Images are generally quite simple - Drag them into the workspace and change the responsive&sizing options.
Use cases
CTA's
Backgrounds
General graphics that can be animated with the timeline
Texts
Responsive options
These options allow you to change the responsive behavior of your asset inside the ad, meaning how it will position itself and scale on devices of different aspect ratios.
Image sizing
Contain - This will always contain the whole asset inside the module's dimensions. Using the positioning options below, you can set the direction in which the image will orient itself when the aspect ratio changes (E.x. if you want it to stick to the top, you'll select the top option or the bottom right if it's a footer for the right bottom)
Cover (fit) - This will always try to fit the whole asset over the whole module while keeping the image's original aspect ratio. This is often used for backgrounds where it's unlikely that a crucial part can get lost due to big differences in aspect ratio.
Size in width - This will always keep the aspect ratio but fill the whole width of the module
Size in height - This will always keep the aspect ratio but fill the whole height of the module
Stretch - This will stretch the asset over the whole module without caring for aspect ratio. This is only a good option when the background won't look off when it is being stretched in a dimension.
Properties & Clickout
As for the Background module, the image module allows you to change different properties like the opacity seperately in the "Properties" tab.
Also, you can set up a clickout link for the image module as usual.
Interactions
Triggers:
The Image module offers the default interaction triggers seen here:
"On click": This triggers when a user clicks/taps on the element
"On swipe left": This triggers when a user swipes left on the element
"On swipe right": This triggers when a user swipes right on the element
"On swipe up": This triggers when a user swipes up on the element
"On swipe down": This triggers when a user swipes down on the element
"On longpress": This triggers when a user holds a tap for some time
"On module load": This triggers when the module is loaded - so when the scene in which it is shows
Actions
The Image module offers the default interaction actions:
"Play animation": Play an animation with specific length
"Play custom animation": Play an animation (Can be customized in the timeline with as many animations & custom animations as you like)
"Stop animation": Stop a running looped animation
"Shake screen": Shake the screen for a specific duration
"Random scene change": Change to a random scene
Videos
On top, you can drop a video asset of your choice and replace it later as well.
Use cases
Display flashy videos to draw user attention
Use videos over the whole background to create an animated background
Autoplay video
Enabling this will start the video automatically. Note that this doesn't work in some scenarios - for example the battery saving mode of ios.
Video loop
Enabling this will loop the video automatically once it finishes.
Play muted
Enabling this will start the video in muted playback.
Automatic height
This is enabled by default, but disabling it will enable you to change the video dimensions freely. If the area changes to be different than the video's original aspect ratio - black bars will be added in the "contain" sizing mode. These black bars can be filled with a background graphic with one of the other settings.
Custom video poster
Here you can add an asset that is shown instead of the first frame of the video when it is not playing initially.
Video sizing & positioning
For the video sizing, you can choose from these 3 options:
"Contain" = The video will be contained within the module boundaries - with the "automatic height" setting enabled, this means it will use the maximum height without distorting the aspect ratio of the video
"Cover (fit)" = The video will be contained but will always try to fill out the module size - even if that means that things will get cut out on the sides (Aspect ratio doesn't change, but it fills the whole area)
"Fill" = The video will fill out the size of the module and stretch the contents so everything is still in view - This is probably not viable for most cases, as it stretches the contents
The position option is regarding the responsiveness of the ad. The module will orient itself towards the position set here when the container changes aspect ratios for larger / different devices.
Video background
Here you can add an asset + size/position it. This asset will show instead of the black bars around a video if you're not using the automatic height mode + contain setting.
Video controls settings
The next 2 tabs are for video controls and their visibility.
Inside the video controls tabs, there are asset drop-zones where you can place custom assets for:
Fullscreen button
Volume button
Mute button
Pause button
Replay button
Also, it lets you align the controls differently - spread, left, right or center-align them with the dropdown.
The next 2 color fields let you change the fore- & background color of the default video controls.
Of course you can also fully disable different elements inside the video controls.
Custom play button
You can add an asset that will be used as a play button graphic (When the video is not playing).
Video progress bar color
By clicking on the colored field, you can open a color picker with which you can change the video progress bar's color.
Moving video controls manually
Lastly, you can double-click the video inside the editor to switch to its' scope. This will allow you to move & resize the video controls containing module itself to fine-tune the positioning/sizing yourself!
Properties & Clickout
As for the Background module, the video module allows you to change different properties like the opacity seperately in the "Properties" tab.
Also, you can set up a clickout link for the video module as usual.
Interactions
The video offers all standard triggers & actions that the Background module offers as well. Furthermore, the video module offers:
Triggers
Video finished = Triggers when the video finishes
Video start = Triggers when the video starts
Video blocked = Triggers when the video is blocked - for example by ios energy saving mode
Play video = Triggers when a user hits the "Play" button
Pause video = Triggers when a user pauses the video
Resume video = Triggers when a user resumes the video
Replay video = Triggers when a user replays the video
Video timestamp = Triggers at a specific timestamp
Mute video = Triggers when a user mutes the video
Unmute video = Triggers when a user unmutes the video
Reset video = Triggers when the video is reset via interaction
Enter fullscreen = Triggers when a user enters video fullscreen
Leave fullscreen = Triggers when a user leaves the video fullscreen
Video VTR (0%) = Triggers at 0% video progress
Video VTR (25%) = Triggers at 25% video progress
Video VTR (50%) = Triggers at 50% video progress
Video VTR (75%) = Triggers at 75% video progress
Video VTR (100%) = Triggers at 100% video progress
Actions for other modules
The video module offers several actions that other modules can trigger via an interaction:
Play video = Start playing a video
Pause video = Pause a running video
Reset video = Reset a playing video