Working with HTML5 Banners

Previewing HTML5 Banners

Previewing HTML5 Banners{nav}

The Adstream Platform has the ability to preview HTML 5 Banners. When you go to a banner ad either in Projects or Library, you’ll see a still frame of the banner.

mceclip0.png

Above the still frame there is a link Click here to open live preview. This will open a new tab where you can see the Banner with all the animations how it would appear on a website. There is a mceclip1.png replay option in the top left corner so you can preview the animation again.

Preparing a Banner so it can be previewed

Preparing a Banner{nav}

All that’s required is that you create a zip package of the folder containing all your banner resources, with the index.html in the main (root) folder. Then upload this zip.

Uploading Files

Uploading Files{nav}

To upload any file into a Project (including your zipped banner content):

  1. Open the project you want to the upload files to.
  2. Click on Files from the row of tabs at the top, then click Upload and choose whether you want to upload by sendplus{/s}.
  3. If you don't, choosing upload will open a new window onto which you can drag and drop your required assets.
  4. You can also use your computer’s file picker to select all the files you need by clicking Add Files.
  5. If you’ve made a mistake you can use the X to remove the asset from the list of files to be uploaded.
  6. Once you’ve got all the assets you need in the list click Start Upload and your progress will be tracked in the bar below.
  7. You can cancel the upload by clicking the  button.

Annotating HTML5 Banners

Annotating HTML5 Banners{nav}

Once an HTML5 banner file has been uploaded it is possible to add annotations{{Annotations}} to the file, just as you would a video or image file. Through adding annotations and comments directly onto the file you can communicate efficiently throughout the entire approvals{{Approvals}} process.

Installing the Screen Recorder

Installing the Screen Recorder{nav}

The first step in the process is to download a browser plugin to allow you record the dynamic banner.

Please note that this browser plugin is only availble for the Google Chrome and Mozilla Firefox browsers.

To download the plugin you must open the live preview of the banner, which you can do by clicking just above the static preview on Click here to open live preview.

Screen_Shot_2017-06-20_at_12.38.00.png

The very first time you view a live preview (which opens in a new window), you will see a link to Install Screen Recorder above the preview, which will start the plugin installation process.

Recording & Annotating the Banner

Recording & Annotating the Banner{nav}

  • Once the plugin is installed you will see an option to Start Recording next to the Replay option.

Screen_Shot_2017-06-16_at_15.04.00.png

  • When you start recording you will be given the choice to either record your entire screen or just a specific window - in this situation, choose to record the window which is showing the banner.
  • Whilst the recording is running, use the Replay button to ensure the entire banner is captured by the recording and then when you're done, click Stop.
  • Next you will have options to Re-record if you'd like to try again or, Save & Annotate if you're ready to start annotations.
  • Upon clicking Save & Annotate you will be taken to the regular annotation{/s} tool, so go ahead and make any annotations or leave comments in the usual way, and once you're finished annotating, click Save.
Top Tip: Pull the tab away from the window and resize it to trim away the space around the ad before choosing the window to record. This way, your recording will be just the banner and not the whole window.

Screen Recordings Tab

Screen Recordings Tab{nav}

Once you've made a recording of a banner it will be saved in the Screen Recordings Tab, which can be found underneath the static preview of the file. Here you will not only see any recordings, but also have the option to download, edit or delete them.

Screen_Shot_2017-06-20_at_12.39.28.png

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments