Close

How to Create HTML5 Ads with GreenSock and the Adobe Animate FlaExporter Extension 

In this tutorial you will learn how to use FlaExporter to simplify the process of creating HTML5 ads with GreenSock's GSAP TweenMax and Adobe Animate (Flash).

Overview

  • Using GreenSock with Adobe Animate (Flash)
  • Using ActionScript or JS for HTML5 ads
  • Automatically optimizing your assets with one click
  • Working with clickTags
  • Retina/High DPI asset setup
  • Handle multiple exits on buttons with onClick
  • Handle rollovers with onMouseOver/Out
  • Call JavaScript on the page from timeline code in the FLA
  • Show an ad preloaded
  • Test and validate the ad

For many years Adobe Flash was the standard way to create DoubleClick ads. Now that DoubleClick and Adwords only accept HTML5 ads, creative studios are forced to either learn to hand-code with new JavaScript libraries or deal with the slow performance of visual authoring solutions.  FlaExporter is a new way to publish high-performance HTML5 content directly from Adobe Flash or Animate without having to restructure your FLA files or learn new code libraries.


In this tutorial you will learn how to use FlaExporter to simplify the process of creating a GreenSock HTML5 ad with Adobe Flash or Adobe Animate.


The following topics are covered--

Getting Started

First click here to download the FlaExporter GreenSock Ad Template FLA.

If you haven’t already downloaded FlaExporter. It’s free!

You should be able to use this FLA and the included HTML file as a starting point for creating your own ad.

There are 2 folders with 2 sets of FLA files written in AS3, AS2, and JS.


The FlaExporter_DoubleClick_GSAP_Tutorial folder contains the standard 

DoubleClick FlaExporter template with some TweenMax examples.


The GSAP_AdStarter_FlaExporter_QuickStart folder contains 

a set of FLAs modified from the Greensock GSAP tutorial here.

http://greensock.com/animatecc-quickstart


The main change in the modified files is that the timeline code is standard AS3, AS2, or JS instead of Create JS.

It should require no learning curve for anyone somewhat familiar with AS3, AS2, or JS.


Learn more about FlaExporter Scripting in AS3, AS2 and JS.

http://www.fla-exporter.com/scripting-guide

Adding TweenMax Code To Your FLA Timeline

FlaExporter allows you to use ActionScript 3, ActionScript 2, or JavaScript in FLA files that will be published to HTML5.

The event handlers listed here will handle mouse and touch events for both desktop and mobile devices.  Multiple exits and click events are supported.


Here are some working examples that can be found in the template FLA files in the zip.

Note that the ActionScript code here is 100% valid and can be used in swf content as well.


ActionScript 3.0 ( AS3 )


this.addEventListener(MouseEvent.MOUSE_OVER, function (e:MouseEvent) {

      var mc = e.target;

      trace("Over "+mc);

      mc.gotoAndStop("Over");

      TweenMax.to(mc, .75, {scaleX:.57, scaleY:.57, ease:Elastic.easeOut});

});


this.addEventListener(MouseEvent.MOUSE_OUT, function (e:MouseEvent) {

      var mc = e.target;

      trace("Out "+mc);

      mc.gotoAndStop("Up");

      TweenMax.to(mc, .75, {scaleX:.5, scaleY:.5, ease:Elastic.easeOut});

});



ActionScript 2.0 ( AS2 )


onRollOut = function(){

      gotoAndStop("Up");

      TweenMax.to(mc, .75, {scaleX:.5, scaleY:.5, ease:Elastic.easeOut});

};


onRollOver = function(){

      gotoAndStop("Over");

      TweenMax.to(mc, .75, {scaleX:.57, scaleY:.57, ease:Elastic.easeOut});

};




JavaScript


onMouseOut = function(){

      gotoAndStop("Up");

      TweenMax.to(mc, .75, {scaleX:.5, scaleY:.5, ease:Elastic.easeOut});

};



onMouseOver = function(){

      gotoAndStop("Over");

      TweenMax.to(mc, .75, {scaleX:.57, scaleY:.57, ease:Elastic.easeOut});

};


Note that the TweenMax JavaScript on the page is being called directly from the FLA timeline. There is no need to use bridge code like ExternalInterface.


Including TweenMax

In the tutorial zip file you will find a file named GSAP_FlaExporter_DoubleClick_Template.html 

This file shows how to include the TweenMax JavaScript file.

You can easily add this snippet to your own HTML file like this--


<script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script>


If you see a JavaScript error that says  TweenMax is undefined you probably forgot to add this to your HTML file.

You can use ActionScript 3, ActionScript 2, or JavaScript to handle mouse over and roll over events.

The event handlers listed here will handle mouse and touch events for both desktop and mobile devices. Multiple roll over events are supported.


Flash Button symbol single-frame states(Up, Over, Down) are supported without needing any changes. Animated multi-frame rollovers can be created easily by adding onMouseOver/ onMouseOut event handlers inside your MovieClip.


Here are some working examples that can be found in the template FLA files in the zip.

Note that the ActionScript code here is 100% valid and can be used in swf content as well.


ActionScript 3.0 ( AS3 )


var mc:MovieClip = this;

this.addEventListener(MouseEvent.MOUSE_OVER, function (e:MouseEvent) {

      mc.gotoAndStop("Over");

});


this.addEventListener(MouseEvent.MOUSE_OUT, function (e:MouseEvent) {

      mc.gotoAndStop("Up");

});



ActionScript 2.0 ( AS2 )


onRollOver = function(){

      gotoAndStop("Over");

};


onRollOut = function(){

      gotoAndStop("Up");

};




JavaScript


onMouseOver = function(){

      gotoAndStop("Over");

};


onMouseOut = function(){

      gotoAndStop("Up");

};






Handling Click Events and Exits

Handling Mouse Events and RollOvers

You can use ActionScript 3, ActionScript 2, or JavaScript to handle click events.

The event handlers listed here will handle mouse and touch events for both desktop and mobile devices.  Multiple exits and click events are supported.


Here are some working examples that can be found in the template FLA files in the zip.

Note that the ActionScript code here is 100% valid and can be used in swf content as well.


ActionScript 3.0 ( AS3 )


this.addEventListener(MouseEvent.CLICK, onClick);

function onClick(event:MouseEvent):void

{

        var clickTAG:String = loaderInfo.parameters.clickTAG;

        navigateToURL(new URLRequest(clickTAG)); //, "_blank" OR "_self"

}



ActionScript 2.0 ( AS2 )


onRelease = function(){

       getURL(_root.clickTAG);

};



JavaScript


onClick = function() {

    window.open(window.clickTag);

    gotoAndStop("collapsed");

};


Note that in this example JavaScript on the page is being called directly from the FLA timeline. There is no need to use bridge code like ExternalInterface.


Preview HTML5 allows you to test in your browser

Preview Window

Once your project .fla is ready to test and preview, you can use "Preview HTML5" to see your project as your audience will see it in the browser.  Simply select "Preview HTML5" from the "Commands" menu. The extension will convert your .fla file to HTML5 and open it in a new browser window using your default browser.  You can assign a keyboard shortcut to make exporting easier. When the preview window opens you can play any animation timeline or library symbol by selecting it by name from the Movies drop-down menu.

When the preview window opens you will see 3 drop-down menus--Scenes, Movies, and Textures.

  • The Scenes Menu allows you to play the animation timeline of an entire Scene.
  • The Movies Menu allows you to play any animation timeline or library symbol.
  • The Textures Menu allows you to view the generated images that will be used.

Publish HTML5 generates the files needed for web publishing

Once your project .fla is ready for publishing, you can use "Publish HTML5" to generate the files to deploy to the web. Simply select "Publish HTML5" from the "Commands" menu. The extension will convert your .fla file to HTML5 and write the files to the folder you select. These files are intended to be deployed to a web server. If you want to run your project locally you should use the "Preview HTML5" command instead. You can assign a keyboard shortcut to make publishing easier.

?

Automatically optimize assets to shrink file sizes 60-80%

Once your project .fla is ready to test and preview, you can use "Publish HTML5 (Optimizer)" to generate optimized files to deploy to the web. Simply select "Publish HTML5 (Optimizer)" from the "Commands" menu. The extension will convert your .fla file to HTML5 and write the files to the folder you select. These files are intended to be deployed to a web server. You can assign a keyboard shortcut to make optimizing easier.

Customizing Settings

Setting the clickTag variable


Open the including HTML file and change the value of the clickTag variable to the desired URL.


<script type="text/javascript">

var clickTag = "http://www.google.com"; </script>

</head>



Modifying the size of the ad


Open the including HTML file and change the width and height of the ad.size meta tag to your desired dimensions.


<meta name=”ad.size” content=”width=300,height=250”>



Using a customized preloader animation

Open the including HTML file and you will see a section of the document that begins with #spinner. Change this to use your desired preloader animation.

?

High DPI and Retina Assets

To create content that looks crisp on high DPI and retina devices simply use library symbols that created at 2x their size when used on the timeline. Then scale the symbol to 50% when the symbol instance is added to the timeline.


All of the assets in the template are created this way.

For example the dimensions of the background on the main timeline are 300x250 while the image inside is 600x500.  

What's Next?

Go here to learn more about working with FlaExporter--

http://www.fla-exporter.com/learn


Follow us on Twitter

@FlaExporter

After you publish your ad using FlaExporter - Publish HTML5 or FlaExporter - Publish HTML5 (Optimizer), zip up the published folder and upload the zip here.


https://h5validator.appspot.com/dcm


You will see that content published with FlaExporter automatically passes all of DoubleClick’s checks without any additional work.

?

Fla Exporter © 2016