Configurable fields are editable items within each Interactive Templates template that allow you to fully customise the content and experience of your playable ad.
Each specific template comes with a number of specific fields which are relevant to that design, and are listed on the page individual template pages.
All of the general fields which exist in all templates are detailed below.
The unit of measurement for almost all fields that take numerical values in Interactive Templates is rem: 1 rem will roughly equal 5% of the viewport's size.
Video
Video fields enable you to control the content as well as size controls of the video.
Field | Type/Options | Details |
Video | Video file (.mp4, .wav, .webm, .mkv etc.) | The video will be used throughout the playable experience. Videos are uploaded and stored in the Media Library. |
Video Anchor (default & landscape) |
| As a single video needs to support multiple resolutions, the anchor control can be used to define how your video scales. For example, if your video has some important gameplay elements at the top of the screen, you may which to choose the
The differences can be seen in the example below. |
Video Fit/Fill (default & landscape) |
| The video fit/fill control is a range from 0-1. You can change your value between 0 and 1 to find the best fit for your game. We recommend using this feature in conjunction with the video anchor settings.
You can see an example of this below. |
Video Anchor example
Video Fit/Fill example
Fit (0)
Fill (1)
Background
It's likely that your choices for scaling and anchoring your video will leave unfilled edges in some resolutions. The background options allow you to control what is used to fill such areas.
Field | Type/Options | Details |
Video Filler |
| The video filler option allows you to fill these areas with a blurred background, using the video as the content. |
Image (default and landscape) | Image file (.png, .jpg, .jpeg, etc.) | The image option allows you to fill these areas with a specific image background. |
Image Scaling (default and landscape) |
| The image scaling option allows you to choose how your background image fits the layout. Examples below. |
Background Image Scaling example
Hint/Tap Hint
The Hint sections allow you to control the image, size and position of the hint or hints to be used. You can also add optional hint text and relevant options (size, colour).
NOTE: The hint section will not appear in the Static End Card template. In the Choices template, the hint section will not have options for text or offset.
Luna provides a number of tested gestures in the Asset library. Find out more info here.
Sliders can be incremented by 1 at a time; to do so click the slider and then press left or right on your keyboard to begin changing the value.
Field | Type/Options | Details |
Image | Image file (.png, .jpg, .jpeg, etc.) | The image to use for each hint. If you are using a custom gesture and not an asset provided in the asset library, then we recommend the following:
|
Size (default and landscape) | Float value (Number value that allows decimals, negative values will default the value used back to 15) | This determines the size of the image, the higher the value the larger the image will be. The scale is done in |
Horizontal Offset (default and landscape) | Slider (Which changes a float value) | Moves the hint image along the x axis (horizontally). |
Vertical Offset (default and landscape) | Slider (Which changes a float value) | Moves the hint image along the y axis (vertically). |
Text | String (Letters, Numbers and Symbols) | The text to use in the hint. |
Text Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the hint text. |
Font Size | A float value (Number value that allows decimals, negative values will default the value used back to 1) | The size of the text, the larger the value entered the larger the text will be. The scale is done in |
Vertical Text Offset (default and landscape) | Slider (Which changes a float value) | The amount to offset the hint text, as a % of the screen.(There is no horizontal text offset, hint text is aligned in the centre of the screen) |
Flip | - | Select which way you wish to flip your hint image. |
Rotate | Slider (Which changes an float value) | Move the slider to determine what value in degrees you wish to rotate your hint image by. |
Hole Size | A float value (Number value that allows decimals, negative values will default the value used to 0) | This will determine how large the circular hole that is cut out of the mask is. The larger the number, the larger the hole. |
Horizontal Hole Offset (default and landscape) | Slider (Which changes a float value) | Moves the mask hole along the x axis (horizontally). |
Vertical Hole Offset (default and landscape) | Slider (Which changes a float value) | Moves the mask hole along the y axis (vertically). |
Overlay Color | Click on the color bar to open the color context menu and begin choosing a color. | This controls what color is used to overlay on top of the video. A hole will then be cut out of this color overlay to help highlight your hint.
By default this color will have 0 alpha, meaning it won't be visible. If you wish to make use of this mask/hole effect, select a color for the mask and adjust the alpha value to how transparent you wish the overlay to be. (A low alpha value will be highly transparent, and vice versa.)
To see where to set the alpha value in the color bar menu, click on the arrow below. |
Overlay Color Opacity example
End Card
This section controls all the major features of the end card, which shows at various stages of the playable depending on your choice of template.
Some templates like End Card Overlay will not contain this section and others like Static End Card will contain this section but not all the fields. Don't worry this is intentional.
Field | Type/Options | Details |
Type |
| The type field describes which elements will be included in the end card. |
Alignment |
| At what horizontal position on the screen the end card contents are displayed. |
Icon | Image file (.png, .jpg, .jpeg, etc.) | The icon shown in the end card, if nothing is chosen the device App Store icon will be displayed. |
Description | String (Letters, Numbers and Symbols) | The description text is displayed under the icon and above the CTA button. |
Call to Action | String (Letters, Numbers and Symbols) | The call to action text (i.e. the button text). |
Button Image Type |
| The type of button to be used for the call to action. |
Background Color | Click on the colour bar to open the colour context menu and begin choosing a colour. | The background colour and opacity of the end card. If using a background image, this colour is not used. |
Background Image (default and landscape) | Image file (.png, .jpg, .jpeg, etc.) | You may upload a custom image to use for the end card. As stated the previously, if your image includes text already on it be sure to make the End Card text color to be transparent. |
Background Scaling (default and landscape) |
| The image scaling option allows you to choose how your background image fits the layout. Examples here. |
Show End Card |
| Whether the end card shows at the end of the experience, or if it doesn’t show at all. The default behaviour is to have it show, you can turn it off for networks that have a separate end card or if you want the experience to not have it. |
End Card Alignment example
Asset Overlay
The Asset Overlay section allows you to set an image that is animated or static during the playable experience. Included in templates Tap to Play and Tap to Play or Loop.
Field | Type/Options | Details |
Image | Image file (.png, .jpg, .jpeg, .gif, etc.) | The animated or static image that will overlay your video during the playable experience. |
Hide Assets after step |
| Choose when the asset should be hidden. You can hide it after a certain number of steps or just don't hide it. |
Asset visibility |
| Choose when the asset should appear during the playable experience. |
Size | A float value | The size of the asset. The larger the value entered the larger the asset will be. |
Size (Landscape) | A float value | The size of the asset in Landscape mode. The larger the value entered the larger the asset will be. |
Horizontal Offset | Slider (Which changes a float value) | The position of the asset horizontally. From the top (0) to the bottom (1) of the device. |
Vertical Offset | Slider (Which changes a float value) | The position of the asset vertically. From the left (0) to the right (1) of the device. |
Offset (Landscape) | Slider (Which changes a float value) | The same functions as the Horizontal and Vertical offsets described above, but in Landscape mode. |
Speed | Slider (Which changes a float value) | The speed of the asset (when animated). A higher value will result in a faster animation of the asset. |
Banner
This section controls a marketing banner which can be placed in various positions in the playable.
Field | Type/Options | Details |
Text | String (Letters, Numbers and Symbols) | The text to use in the banner. Leave this blank if you don't wish to use the banner. |
Text Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the banner text. |
Font Size | A float value (Number value that allows decimals, negative values will default the value used back to 1) | The size of the banner text, the larger the value entered the larger the text will be. |
Vertical Offset | Slider (Which changes a float value) | The vertical position of the banner, from the top (0) to the bottom (1) of the device. |
Background Color | Click on the color bar to open the color context menu and begin choosing a color. | The background color of the banner. |
App Store Controls
The App Store Controls allow you to customise when the user is directed to the app store after engaging with your playable.
Field | Type/Options | Details |
Click Number to Open Store | Integer (A whole number, so no decimals. Negative values and 0 will default to 1) | Most template have their own click control clicks are required before the app store is opened. |
Open Store With End Card |
| The app store is opened as the end card is displayed. Please note, that it is recommended to make sure that you only choose this option if the end card is displayed within a few seconds of a user interaction. |
Whole End Card Is Clickable |
| Whether or not the whole end card is clickable. The default behaviour means only the button is clickable. |
Soundtrack
This section handles the inclusion of any audio you wish to have play in your creative, as well as the option to mute it or not. Note that there are a few fields here which may not be used for every Interactive Templates template.
Field | Type/Options | Details |
Soundtrack Audio | Audio file (.mp3, .wav etc.) | The audio to play in the background of your creative. Audio files are uploaded and stored in the Media Library. Audio will be looped automatically. |
Mute video |
| Toggle whether audio should be enabled or not. |
End Card Audio | Audio file (.mp3, .wav etc.) | The audio to play when the End Card is displayed. Audio files are uploaded and stored in the Media Library. Audio will be looped automatically. |
End Card Playback |
| Choose what audio to play between the soundtrack file, end card audio file or none at all. |
Advanced Settings
These settings provide additional controls which allow you to fine-tune the playable experience. Note that there are a number of fields here which may not be used for every Interactive Templates template.
Field | Type/Options | Details |
Content Filter Type |
| The content filters are a selection of overlays and filters which will be applied to the content (video of image) of the playable. All filters are controlled by the
content filter strength). |
Content Filter Strength | Slider (Which changes a float value) | The higher the value the stronger the content filter becomes. |
End Card Button Paddings | A float value for each box (Number value that allows decimals, negative values) |
|
End Card Button Animation |
| The animation for the end card button. The default value is |
End Card Description Font Size | A float value (Number value that allows decimals) | The size of the end card description text, the larger the value entered the larger the text will be. |
End Card Description Text Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the end card description text. |
End Card Call To Action Text Size | A float value (Number value that allows decimals) | The size of the end card call to action text, the larger the value entered the larger the text will be. |
End Card Call To Action Font Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the end card call to action text. |
End Card Icon Corner Radius | A float value (Number value that allows decimals) | The amount of corner radius to apply the icon. This means that if you icon is square, you can round-off the corners quickly in Creative Suite . |
End Card Icon Shadow Color | Click on the color bar to open the color context menu and begin choosing a color. | The color of the shadow to add behind the icon. |
End Card Icon Shadow Spread | A float value (Number value that allows decimals) | The mount of spread for the icon shadow. |
End Card Appearance Animation Type |
| The appearance animation type for the end card, which controls show the end card arrives on screen. Default value is Slide Up. |
End Card Appearance Animation Duration | A float value (Number value that allows decimals) | The duration of the end card appearance animation. Default is 0.25s. |
Default Font | Font file (.ttf only) | The default font to be used for all fields |
CTA Button Font | Font file (.ttf only) | The font to be used for the button text. (Overrides the default font) |
Horizontal Icon Position (default and landscape) | Slider (Which changes a float value) | Adjusts the App Icon's position horizontally (on the X axis), increasing the value of the slider will position the icon further right on the screen. |
Vertical Icon Position (default and landscape) | Slider (Which changes a float value) | Adjusts the App Icon's position vertically (on the Y axis), the larger the value the higher up the icon will be on the screen. |
Free Button Position |
| Whether or not the End Card button should be anchored (relative) to the App Icon's position, or not. |
Horizontal Button Position (default and landscape) | Slider (Which changes a float value) | Adjusts the End Card button's position horizontally (on the X axis), increasing the value of the slider will position the icon further right on the screen. |
Vertical Button Position (default and landscape) | Slider (Which changes a float value) | Adjusts the End Card button's position vertically (on the Y axis), the larger the value the higher up the icon will be on the screen. |
Icon Size (default and landscape) | A float value (Number value that allows decimals, a negative value will default back to 0) | The size of the App Icon in |
Low Power Mode Image | Image file (.png, .jpg, .jpeg, etc.) | You may upload a custom image to use when the user is in Low Power Mode on their phone, which could hinder the playable from fully playing. |
Low Power Mode Preview |
| You can preview the experience of Low Power Mode by pressing On. The default is not to preview the experience. |
Low Power Mode Content Filler Type | - | The image scaling option allows you to choose how your background image fits the layout. |
End Card Icon Corner Radius example
Icon with 0 Radius
Icon with 50 Radius