From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Good to know

 HTML5 Studio has got some additional features that every user might find convenient for use and time-saving while working on your ads. 

  • Snapping

     

    Component alignment snapping feature allows you to position your component in accordance with the grid so the arrangement of your ads is precise. To do so, hold your left mouse button on your component while dragging it across the dashboard.  If component alignment snapping prevents you from positioning your component from the required place, you can just disregard the snapping. 

     Using component alignment snapping 

     

  • Drag and Drop on Top of Builder Mode

     

    The most convenient and time-saving method of uploading an image or a video to the Builder 3.0 is by dragging the asset on top of the builder and dropping it as per the video below. 

     

    Dragging and dropping an image on top of new builder workflow

     

      

    Dragging and dropping video file on top of new builder workflow

     

  • Contextual Menu

     

    You can open the contextual menu by pressing the right mouse button anywhere in the builder.

    Align

     

    You can align components by leveraging the Align option. To do so, press the right mouse button on the component that you want to align and select Align from the given contextual menu and choose whether you want to position your component in the Centre, to the Left or to the Right, at the Top, in the Middle, or at the Bottom of the dashboard. 

     

    Using Align within contextual menu workflow

     

    Quick clickTag

     

    You can quickly add a clickTag on top of almost any component inside the builder. To begin with, you have to make sure that you have at least one clickTag added to your Banner Settings. Afterward, click the right mouse button on the component, to which you want to add a clickTag, and select "Add"->"ClickTag"->(clickTag name) from the contextual menu.

     Quickly adding a clickTag via contextual menu

     

  • Initially Hidden Components

     

    Component visibility option allows you to hide or display the selected component. The hidden component is not visible until it is triggered by a specific action (for example, a click, a press, a mouse in). You may want to have a component hidden if, for example, it has animation 'fade from 0% to 100%', and the trigger is needed before the animation starts.

    The components are visible by default. To hide a component, follow these steps:

    1. Select a component from the components menu. For example, if you want to hide an image until it is uncovered by clicking a button, select Image.

    visbility comp 2

    2. In the image settings tab, click Size & Position (1), uncheck the Visible feature (2), and click Save on the top menu panel.

     visibility check 2

     3. Select the component on which the action is going to be performed. For example, if you want your image to become visible upon an action on a button, select Button component.

     visibility video

    4. In the settings tab, click Actions -> New Action and select which user action will trigger the further action. For example, select Click if you want to see an action upon clicking a button.

    visibility action

    5. From the drop-down menu, select an action, for example, Change Visibility.

    visibility change

     6. If you selected Change Visibility, you will be asked to specify the Action (1), for example, Show, and then select the Target (2), which in this case is the image (Adform banner). You have now instructed to change visibility (show Adform banner) upon clicking on a button. Click Save on the top menu panel.

    visibility target

     7. You can now click Preview to see how your image becomes visible upon clicking a button.

    visibility preview

     

    Initially Hidden Component applied on stage