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!

Tutorials

  • Working on Mobile Interstitial Ad

    This tutorial will give you a better perspective on how you can put Studio's Mobile Interstitial template to use, and how you can amend it by using the Studio File browser and Studio Code editor. 

    Firstly, you need to have few images prepared. To do so, click on the following URL links:

    Image1

    Image2

    You can download them and keep them under your computer files. To begin with, open Studio platform and find the template on which you going to work. To do so, choose Mobile (1) from the drop-down menu that suggests All Categories and select Builder Mode: Mobile Interstitial (2) as per the image below. 

    Selecting the template

    Mobile


    If you take a look at the top-left corner, you will see several icons suggesting different options. Select the File Browser (1) one and you will be provided with the list of files that you will be able to edit. To enable code editor, you need to click on index.html (2) and a window of code editor will populate at the bottom of the screen (3).

    Using file browser and code editor

    Mobile html

     

    The assets folder has a logo.png file in it. By hovering with your mouse on it, you will see how an icon of three dots appears. By clicking on those three dots you will be able to Rename, Download, Reupload, or Delete the file. The most convenient way is to update the file, therefore, click on the Reupload File option and select the logo that you have earlier saved on your system. The same can be done with any other .png image. 

     Replacing images in the file browser

    png


    You are able to edit any element through the code editor. At this point, try updating the background color of the ad by amending the background-color property of the Body element. To do so, try adding an HTML color of #dddddd, which is light grey. You can find more color codes in here. Editing can be done with any other element in the banner. 

    Changing banner background color

     color

    As mentioned earlier, you are able to change any element through the code editor, which means that you can also change the text as well. Try seeking for the following lines in the Studio code editor and change the text to whate you need. 

    <div id="i13">Ad dimensions depend on the screen size</div>
    <div id="i11">Mobile interstitial</div>

    Changing banner text in the .html file

    html last

    Send us feedback about Adform's HTML5 Toolkit by clicking the feedback icon Horn in the left bottom corner. It will allow us to get better and meet your needs as well!

    Note that Studio has more templates like this which you can edit easily as well.

     

  • Tutorials on Rich Media Creation

     

    The following videos will demonstrate how to utilize HTML5 Studio's features to create rich media banners that are engaging and appealing:

     

    Standard Banner

     

    The following tutorial video depicts how Adform's HTML5 Studio tools are used to create a Standard Banner:

     

    Standard Video Banner

     

    The following tutorial video depicts how Adform's HTML5 Studio tools are used to create a Standard Video Banner:

     

    Expandable Video Banner

     

    The following tutorial video depicts how Adform's HTML5 Studio tools are used to create an Expandable Video Banner:

     

     

    The following tutorial video depicts how Adform's HTML5 Studio tools are used to create a Responsive Carousel Banner:

     

    3D Box Banner

     

    The following tutorial video depicts how Adform's HTML5 Studio tools are used to create a 3D Box Banner:

     

    3D Box Video Banner

     

    The following tutorial video depicts how Adform's HTML5 Studio tools are used to create a 3D Box Video Banner: