All geek questions in one place

Access converted SWF with swiffy

I tried adding the exit URL and metrics from doubleclick studio from converted swf from swiffy to an HTML5 file. Can someone tell me the most efficient way to do this? What does the code look like in an HTML5 ad? Where is the best place to add code? What tags to use? The swiffy generated code looks like a mess to me.

<!doctype html> <html> <head> <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script> <link rel="stylesheet" type="text/css" href="exit.css"> <script src="exit.js"></script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Swiffy Output</title> <script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script> <script> swiffyobject = {"as3":true,"frameRate":25,"frameCount":342,"backgroundColor":-1,"frameSize":{"ymin":0,"xmin":0,"ymax":1800,"xmax":19400},"fileSize":52767,"v":"7.3.0","internedStrings":["::::::6Y:","::::: <<shortend from here>> </script> <style>html, body {width: 100%; height: 100%}</style> </head> <body style="margin: 0; overflow: hidden"> <div id="swiffycontainer" style="width: 970px; height: 90px"> </div> <script> var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject, {}); stage.start(); </script> </body> </html>
0
source share
1 answer

This is an addition / improvement in this answer .

So, you will have several files in your HTML5 folder (which you will pack in zip for upload to Doubleclick Studio at the end of the build process)

  • index.html
  • styles.css
  • backupimage (* .gif / *. jpg)
  • ajax-loader.gif (I use this as a placeholder when items are still loading)
  • object.js (where the converted Swiffy code will be)
  • script.js (where the magic happens)

A backup image is an image that you should only show if Creative is not loading and ajax-loader.gif is widely available on the Internet. So, we will focus on the other 4 files.

index.html

 <html lang="en-US"> <head> <meta charset="UTF-8"> <title>[ Creative Name ]</title> <meta name="ad.size" content="width=300,height=250"> <link rel="stylesheet" type="text/css" href="styles.css" media="all"> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script> <!-- Make sure that this is the most recent runtime.js from the Swiffy Conversion file --> <script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script> <script src="object.js"></script> <script src="script.js"></script> </head> <body> <div id="swiffycontainer" class="loading"></div> <div id="bg-exit"></div> </body> </html>

styles.css

 * { border:0; padding:0; margin:0; } body, html { width:100%; height:100%; overflow:hidden; background:#fff; width:100%; height:100%; position:relative; } #bg-exit { position:absolute; z-index:999999; left:0; top:0; width:100%; height:100%; overflow:hidden; cursor: pointer; } #swiffycontainer { position:absolute; z-index:100; width:100%; height:100%; overflow:hidden; } #swiffycontainer.loading { background: url("ajax-loader.gif") center center no-repeat; }

objects.js

Copy any result using swiffy conversion and paste {} as shown below.

 var swiffyobject = { "as3":false,"frameRate":24,"frameCount":114,"backgroundColor":-1,"frameSize":{" .... blah blah blah blah }] };

scripts.js

 var stage; var clickTag; if (!Enabler.isInitialized()) { Enabler.addEventListener( studio.events.StudioEvent.INIT, enablerInitialized ); } else { enablerInitialized(); } function enablerInitialized() { if (!Enabler.isVisible()) { Enabler.addEventListener( studio.events.StudioEvent.VISIBLE, adVisible ); } else { adVisible(); } } function adVisible() { document.getElementById('swiffycontainer').className = ""; document.getElementById('bg-exit').addEventListener('click', exitHandler, false); stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject, {}); stage.start(); } function exitHandler(e) { Enabler.exit('Exit'); }

The implementation of the above works for me and all my ads using the above code was approved by Google QA and is now sold in trade, so I am sure of my answer - although again this is simply an improvement from this answer .

+1
source

Source: https://habr.com/ru/post/983727/

More articles:


All Articles