Using Swiffy to make Sizmek HTML5 Standard Banners

Size: px

Start display at page:

Download "Using Swiffy to make Sizmek HTML5 Standard Banners"

Amy Hodge
7 years ago
Views:

1 Using Swiffy to make Sizmek HTML5 Standard Banners Table of Contents: Foreword Page 1 Resources Page 2 Swiffy Installation Page 2 Flash conversion Page 2 HTML5 edits Page 3 Prepare assets Page 5 Upload and Ad ID creation Page 5 QA Page 6 Foreword: Swiffy is a tool that will let you convert basic Flash files to HTML5 directly from the Flash interface. It should be noted that this is not an exact science and Flash assets may lose functionality. For more sophisticated ads, we recommend building from scratch using any tools you are comfortable with and then applying our normal Workspace code to them to make Sizmek ready ads. Other tools available include, but are not limited to, Adobe Edge, Hype, Google Web Designer, Adobe Dreamweaver and any standard hand coding tools your developers are comfortable with. For more information on the Sizmek Workspace process, please visit our Help section or contact your local Sizmek Creative Team for a training session. Workspace Overview: us/articles/ Overview- HTML5- Workspaces HTML5 API: us/articles/ Sizmek- HTML5- API As an alternative, you do have the option to use our HTML5 Ad Builder Tool to recreate your ads directly in the platform. We provide training for this as well. us/articles/ OVERVIEW- Build- an- HTML5- Ad- in- Ad- Builder- for- HTML5-

It should be noted that this is not an exact science and Flash assets may lose functionality.

2 Resource links: Demo Flash file Converted Swiffy HTML5 files Preview link for Flash ad Preview for Swiffy HTML5 ad Help section Download and install Swiffy to Flash: Go to: Or: Download Swiffy Install using Adobe Extensions Manager. Be sure to use the matching Extensions Manager for the version of Flash you will use. In Flash: Open your existing FLA (300x250_dbanner.fla ) Remove Eyeblaster include and blank first frame Save FLA Go to Commands > Export as HTML5 (Swiffy) This will give you 300x250_dbanner.swf.html

1.1 Install using Adobe Extensions Manager. Be sure to use the matching Extensions Manager for the version of Flash you will use.

3 HTML5 edits: Feel free to use any editor you wish to use for the edits below. Anything from Dreamweaver thru to TextEdit will work. At the top of the html doc that Swiffy exports you should find something similar to the below screenshot: Edit the following: 1) At the top of Swiffy file in the <head> you will need to add the green bits: <!doctype html> <html> <head> <meta charset="utf- 8"> <meta http- equiv="x- UA- Compatible" content="ie=edge"> <title>swiffy output</title> <script src=" <script src=" ds.serving- sys.com/burstingscript/ebloader.js" type="text/javascript"></script> <link rel="stylesheet" href="style.css"/> <script type="text/javascript"> function initeb(){ if (!EB.isInitialized()){ EB.addEventListener(EBG.EventName.EB_INITIALIZED, startad); else{ startad(); function startad(){ document.getelementbyid("banner").style.visibility = "visible"; function handlebannerclick(){

bits: <!doctype html> <html> <head> <meta charset="utf- 8"> <meta http- equiv="x- UA- Compatible" content="ie=edge"> <title>swiffy output</title> <script src="https://www.gstatic.com/swiffy/v6.

4 EB.clickthrough(); </script> <script> swiffyobject = At the bottom of the same file you should find something like the below screenshot: Edit this to match the below in <body>: </script> <style>html, body {width: 100%; height: 100%</style> </head> <body onload="initeb();" style="margin: 0; overflow: hidden"> <div id="swiffycontainer" style="width: 300px; height: 250px" onclick="javascript:handlebannerclick();"> </div> <script> var stage = new swiffy.stage(document.getelementbyid('swiffycontainer'), swiffyobject); stage.start(); </script> </body> </html> Save your file as index.html

overflow: hidden"> <div id="swiffycontainer" style="width: 300px; height: 250px" onclick="javascript:handlebannerclick();"> </div> <script> var

5 Prepare assets: Put your default image into a folder named images Add the style.css file from the zip linked below to a folder named styles ock.aspx?id=6137 Create a zip of all your assets and check that it has the same file structure as below: You now have a Workspace ready to go (SizmekSwiffyDemo.zip). Create ad: Log in to the platform and go to Manage > Ads > + New > Create New Ad Give your ad a name and pick Ad Format: HTML5 Standard Banner

web/creative/workshop/blocks/downloadbl ock.aspx?

6 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: Click Select then look inside your images folder you just uploaded. Add the clickthru URL then click Save. This should complete your ad. NutDJM%2FiRlXEm1Jm07PsojxOgcFCHPj%2FLHrE7h%2F0i15idQi7DlA%3D%3D&AdID= &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? Click the Preview button at the bottom right of the Ad Creation window or select your ad from the Ad list and click Preview. 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. 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.

If you have trouble, the Help Center has a full walkthrough for Uploading Assets. To pick your default image: Click Select then look inside your images folder you just uploaded.

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

HTML5 Standard Banner

Sizmek Formats HTML5 Standard Banner Build Guide Table of Contents Overview... 2 Supported Platforms... 3 Demos/Downloads... 3 Known Issues... 3 Recommended Specs... 3 Implementing an HTML5 Standard Banner...