Previewing HTML5 Banners

The A5 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.

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 and 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

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

To upload any file into a project (including your zip banner content):

  1. Open the project you want to upload files to.
  2. Click on Files from the row of tabs at the top, then click Upload and choose whether you want to Sendplus.
  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

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

Installing the Screen Recorder

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

Please note that this browser plugin is only available 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.

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

  • 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 that 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 annotations 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

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

Items in this section