Follow

Overview

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. For more information, see:

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. For more information, see OVERVIEW Build an HTML5 Ad in Ad Builder .

Download and Install Swiffy to Flash

Go to: https://www.google.com/doubleclick/studio/swiffy/extension.html

Or: http://demo.mediamind.com/ScottRies/swiffy/swiffy.zip

Download Swiffy 1.1.1

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

In Flash:

  1. Open your existing FLA (300x250_dbanner.fla ).
  2. Remove Eyeblaster include and blank first frame.
  3. Save FLA.
  4. Go to Commands > Export as HTML5 (Swiffy).


    This will give you 300x250_dbanner.swf.html.

Edit the HTML5

Feel free to use any editor you wish to use for the edits below. Anything from Dreamweaver throuth to TextEdit will work.

At the top of the html doc that Swiffy exports you should find something similar to the below screenshot:


 

Procedure
  1. At the top of Swiffy file in the <head> you will need to add the highlighted bits:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy outputt</title>
<script src="https://www.gstatic.com/swiffy/v6.0/runtime.js"></script>

<script type="text/javascript" src="http://ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
  <link rel="stylesheet" href="styles/style.css"/>
  <script type="text/javascript">
        function initEB(){
            if (!EB.isInitialized()){
                EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd);
            }else{
                startAd();
            }
        }
        function startAd(){
            document.getElementById("swiffycontainer").style.visibility = "visible";
        }
        function handleBannerClick(){
            EB.clickthrough();
        }
    </script>


  
<script>
      //swiffyobject = …
</script>

At the bottom of the same file you should find something like the below screenshot:


 

  1. 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>
  1. Save your file as index.html.

Prepare the Assets

  1. Put your default image into a folder named images.
  2. Add the “style.css” file from the zip linked below to a folder named styles.
    https://platform.mediamind.com/Eyeblaster.ACM.Web/Creative/Workshop/Blocks/Downloadblock.aspx?ID=6137
  3. 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 the Ad

  1. Log in to the  MDX2.0 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=3rwNutDJM%2FiRlXEm1Jm07PsojxOgcFCHPj%2FLHrE7h%2F0i15idQi7DlA%3D%3D&AdID=28470338&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.”

 Also in this right bar is your official ad size, all assets used, Ad ID, Ad Format, the click thru URL, etc.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments