Follow

Overview

To help ease the transition from Flash to HTML5, Adobe included a feature in Flash that will allow you to export HTML5 assets directly from Flash CC.  For more information, see Adobe's Offical Article.

Special Notes

  • Canvas support is not universal. A majority of features are supported across the latest versions of the main browsers, but you should review CanIUse.com for any special features you wish to use before proceeding. CanIUse.com is a great resource for checking HTML5 feature support. for more information, see http://caniuse.com/#search=canvas.
  • You may also notice that some Flash filters are not supported for HTML5 output that are normally available via SWF output.

Convert Your Sizmek Flash Ads

Flash side process:

  1. Open your FLA in Flash CC
  2. Remove the blank first frame and Sizmek include code
  3. Go to Commands > Convert to HTML5 Canvas
  1. You will be prompted to create a new FLA. Give it a name and Save.This will create a new FLA specifically for the conversion.
  2. Next go to File > Publish Settings
  1. You can make any edits you like here.
    • Popular options:
      1. Can tick on the Other Formats > JPEG Image to create a back up image.
      2. Can set it to Loop
  2. Click Publish to create the HTML5 files in the same folder as your new FLA

HTML5 Edits

There are two basic edits needed for all Sizmek ads.

HTML5 Include Code:

At the top of your HTML doc you will need to add the following line. This covers all of the basic tracking and security code needed.

<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"></script>

 

The script is added on line 11 in the screenshot below.

Add the Click-through Code

  1. Inside the javascript file, you will need to add our clickthrough code. The Flash CC conversion process automatically creates a click function near the bottom of the doc. Look for "this.frame_0 = function()" to find it.
  2. Within that function you should replace the existing click code with the following:
this.clickthrough_btn.addEventListener("click", clickThroughFunc.bind(this));

function clickThroughFunc(){
    EB.clickthrough();
}

In the screenshot below it is shown on line 22 thru 29.

Prepare Assets

  1. Put your default image into the folder named "images".
  2. Create a zip of all your assets and check that it has the same file structure as Figure.

You now have a Workspace ready to go (CC_conversion.zip).

Create Ad

  1. Log in to the platform and go to Manage > Ads > + New > Create New Ad.
  2. Give your ad a name and pick Ad Format: HTML5 Standard Banner.

To Apply Your Assets

  • Look to the right of Workspace Folder and click Select.
    This will then let you upload your assets to a folder of your choice within your account. To upload, click + New, Creative Asset, select your zip file and click Upload. Once it is up, click the Select button at the bottom right.
    If you have trouble, the Help Center has a full walkthrough for Uploading Assets.

To Pick your Default Image

  1. Click Select then look inside your images folder you just uploaded.
  2. Add the click-through URL then click Save. This should complete your ad.
    http://platform.mediamind.com/Eyeblaster.Preview.Web/Default.aspx?previewID=%2FOv0kUB1qa7iQ%2F0i5EeYWb%2B9vWgA3Fss2TDmWSw%2BINyleyFO1mXHZg%3D%3D&AdID=28517591&lang=en-US

QA your HTML5 Ad

For Standard Banners, QA is fairly simple. To tell if the ad is working correctly there are 2 things to look for. Does the landing page window open? Is the click being tracked?

  1. Click the Preview button at the bottom right of the Ad Creation window or select your ad from the Ad list and click Preview.
  2. Within the platform preview, you should be able to click the button and see your landing page open if you assigned a URL during the ad build process.
  3. To see if it is trackable, look in the Interactions Monitor in the right bar. When you click the button, you should see it say "Click."

Also in this right bar is your official ad size, all assets used, Ad ID, Ad Format, the click-through URL, etc.

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

Comments