Dynamize Text

Once created driven by our AdServer, the texts will change based on established parameters (Geolocation, weather, date/time, cookies, retargeting…).

To dynamize texts you have 4 methods at your service :

To dynamize a text:

  1. you have to name your object : Select your object, then go to the properties panel and give it a name
  2. select frame1 on your timeline
  3. press f9 on your keyboard (or go to the Action Panel)
  4. after your data initialisation you can use the following methods

setText

The setText function allows you to insert a text in an element.

ADventori.Display.setText(element, data, fontName);

This function needs two mandatory parameters:

  • element: The target Object where the text will be inserted
  • data: The data that will be sent in this element

There is one optional parameter:

  • fontName: The name of the custom fonts, go to the section “Customize your font ” to know more about it

Example

Download the example

adaptText

The adaptText function allows you to adapt the text size to its container.

ADventori.Display.adaptText(element, minFontSize, objectWidth, objectHeight, fontName);

This function needs four mandatory parameters:

  • element: The target Object where the text will be inserted
  • minFontSize: The text’s minimum size
  • objectWidth: the width of your object (you’ll find it in the object’s properties panel)
  • objectHeight: the height of your object (you’ll find it in the object’s properties panel)

There is one optional parameter:

  • fontName: The name of the custom fonts, go to the section “Customize your font ” to know more about it

Example

Download the example

setAndAdaptText

The setAndAdaptText function allows you to combine the two previous functions.

ADventori.Display.setAndAdaptText(element, data, minFontSize, objectWidth, objectHeight, fontName);

This function needs five mandatory parameters:

  • element: The target Object where the text will be inserted
  • data: The data that will be sent in this element
  • minFontSize: The text’s minimum size
  • objectWidth: the width of your object (you’ll find it in the object’s properties panel)
  • objectHeight: the height of your object (you’ll find it in the object’s properties panel)

There is one optional parameter:

  • fontName: The name of the custom fonts, go to the section “Customize your font ” to know more about it

Example

Download the example

verticalAlign

The verticalAlign function allows you to vertically align the text in its container.

ADventori.Display.verticalAlign(element, objectHeight, objectYPosition);

This function needs three mandatory parameters:

  • element: The target Object tag where the text is contained
  • objectHeight: the height of your object (you’ll find it in the object’s properties panel)
  • objectYPosition: the Y position of your object (you’ll find it in the object’s properties panel)

Example

Download the example

Customize your font

Adobe Animate cc allows you to manage web fonts with Adobe typeKit and Google Fonts. Nevertheless for a digital advertising campaign, we do not recommend to call fonts online (security problems, scalability. …).

We also recommend that you don’t choose too heavy fonts (recommended weight <50 ko) and favor loading your fonts locally.

Export your HTML Template, edit it and add the following code just before the closing tag </head>:

<style>
    @font-face { 
        font-family: 'fontName'; 
        src: url('fontPath/fontName.woff2');
        font-weight: normal; 
    }
</style>
<link rel="preload" as="font" href="fontPath/fontName.woff2" type="font/woff2" crossorigin="anonymous">

After completing this step, reload the HTML Template (Publish Settings-> Advanced-> Import New).

Once the fonts are loaded, you can apply the custom font to the textField (s):

ADventori.Display.setFont(element, fontName);

You can also add the name of your font to the methods of adding text:

ADventori.Display.setText(element, data, fontName);

ADventori.Display.adaptText(element, minFontSize, objectWidth, objectHeight, fontName);

ADventori.Display.setAndAdaptText(element, data, minFontSize, objectWidth, objectHeight, fontName);

Example

<style>
    @font-face { 
        font-family: 'FrancoisOne-Regular'; 
        src: url('fonts/FrancoisOne-Regular.woff2');
        font-weight: normal; 
    }
</style>
<link rel="preload" as="font" href="fonts/FrancoisOne-Regular.woff2" type="font/woff2" crossorigin="anonymous">

ADventori.Display.setText(this.textField1,ADventori.data.wording, 'FrancoisOne-Regular');

Download the example