Flash CC Canvas export for banners, anyone tried it?

[somnamblst]

I whipped up a 300x250 out of curiosity, I either broke apart or converted to a Bitmap my copy, before converting to graphic symbols for classic tweening (Canvas does not like motion tweens), then downloaded all the js files to please AdWords, and after adding the clicktag var and onclick="javascript:window.open(window.clickTag)"  to the canvas div, zipped my files and it is only 79K

 

Has anyone submitted a zipped Flash CC canvas export to DCM? In the images folder is a json file. I could have swore I saw a DCM support doc that said no json

[somnamblst]

This is what the Doubleclick documentation says. Not sure what it means. The Canvas export puts a JSON file in the images folder with the sprite sheet.

 

 

 

• JSON: Files ending with .json are not allowed. (JSON files are not accepted by Studio for cross-domain reasons. JSON files must be rewritten as static JSONP file with a .js extension).

[OSUblake]

JSONP is a kind of hack to get around AJAX request to a different domain. But I think they just want you to rename the JSON file with a .js extension. I used to do this a lot for config files, but it's kind of an outdated method.

 

You can even call a function from that file if you need to pass in the actual JSON data to something. Here's a quick example of that. My demo is running on Plunker, but the JSONP (just a normal JS file) is on CodePen.

 

On Plunker http://plnkr.co/edit/SUjIIGyqeeWmsm8BjDxo?p=preview

<h1 id="msg"></h1>
    
<script>
  var msg = document.querySelector("#msg");
  
  function foo(data) {
    msg.textContent = "Hello " + data.name + "!";
  }
</script>
<script src="http://codepen.io/osublake/pen/0e8d0232eca426bdcd1f3af8d6703975.js?"></script>

On CodePen 

See the Pen 0e8d0232eca426bdcd1f3af8d6703975?editors=001 by osublake (@osublake) on CodePen

foo({ "name": "Somnamblst" });

[Jonathan]

Another solution is just copy / paste the JSON object inside that file and place it inside your main CreateJS JS file as a variable. Basically just having it reference the JSON object within the file without making a request for the external JSON file.

 

That JSON file is a reference for your image spritesheet. Since its is just a JavaScript object you can just copy that code out of the JSON file and paste into your main CreateJS JS file where the new SpriteSheet is created.

 

You would look for  something like this:  new SpriteSheet(). Then you could create a variable  above that or use the existing variable reference. And copy/paste from that JSON file output object, into that new variable. And then paste that new variable name into the new SpriteSheet(newVariable) constructor:

 

So lets say for example your JSON file contains this:

{"images": ["Smoke.png", "Fire.png", "Water.png", "Earth.png"]}

You would copy that and paste it inside a new variable where new SpriteSheet() is referenced or an existing variable referencing the external JSON file:

// SpriteSheet copy and pasted from the JSON output 
var spritesheet = {"images": ["Earth.png", "Wind.png", "And.png", "Fire.png"]};

// Created SpriteSheet
var ss = new SpriteSheet(spritesheet);

Again this is just an example of bringing your JSON object inside your main CreateJS JS file.  Im not sure what the variables create in your project.

 

If you can provide an example of your code. Like the main CreateJS file that references the JSON file and that has new SpriteSheet() constructor in it. As well as the output of the JSON file. I'm sure we can figure out where to past this JSON object for use in your SpriteSheet.

 

This way you wont need the external JSON file, since the JSON object will be inside your main exported Flash CC CreateJS JS file.

 

[somnamblst]

Thanks Blake and Jonathan,

 

I found another way, just uncheck create sprite sheet. Now my zipped file is only 69K. Now I had tinyPNGed my transparent assets, but i was doing that anyways just because i am my own K Weight Nazi.

 

http://stackoverflow.com/questions/31395269/one-line-of-code-converting-json-file-to-jsonp-with-js-extension

 

What really has me excited about going back to Flash for HTML5 is this solves the stupid font issue. It goes against my sense of propriety to not have text be text, and to have to create images of copy, especially for so many different sizes, (hello Arial,Helvetica, Open Sans).  

 

Plus everything I did in Flash was so much faster. I like having a timeline. Given that Adobe is back to focusing on Flash CC Canvas I think it bodes well for future dev.

 

For anyone who wants to try it, this works for the clickTag, just need a to add a cursor style.

 

<script type="text/javascript">

var clickTag = "https://www.google.com";

</script>

</head>

 

<body onload="init();">

 

<canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"  onclick="javascript:window.open(window.clickTag)"></canvas>

 

This is what Flash exports

 

<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	images = images||{};

	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
	exportRoot = new lib.fred_holiday_300x250_noJSON();

	stage = new createjs.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(lib.properties.fps);
	createjs.Ticker.addEventListener("tick", stage);
}
</script>

[Jonathan]

 

Thanks Blake and Jonathan,

 

I found another way, just uncheck create sprite sheet. Now my zipped file is only 69K.

Sometimes simple is always better

[Web Dizajner]

I found another way, just uncheck create sprite sheet.

 

And what about requirements when you must have example max 10 files in ZIP and you have example more than 8 picture?

[somnamblst]

First of all I would say that many bitmaps is possibly too many. In the MAX banner video, they say 5 to 8 server requests is ideal, and did mention a combo create/preloader/easel js file that he did not get around to covering. I had no luck finding it

 

While the documentation does say 10 files, I reached out to our Google contact because I version banners up to 11 times for different logos. Because  obviously only one logo per banner was actually being called, but it made preparing assets for DCM simpler.  He put my sample way more than 10 files zip in DCM and there was no rejection based on number of files.

 

Nor has anything come back from AdWords dinged for too many files. It is probably more of a self policing thing.

[ohem]

I kind of want to try Flash CC canvas for my next banner project since the Flash IDE/timeline is so familiar.

 

I just started testing things out though, and I'm having trouble getting basic rollovers to play a frame label in a specific movie clip.  

 

Having a rollover/out make an alert pop up works fine, but for some reason it's not working to play frame labels within a child movie clip.  I was looking through this: http://createjs.com/html5ads/#MouseInteractions and I'm not sure what I could be doing differently.

 

Does anybody have any suggestions as to how best to implement this functionality?  Test file is attached.

 

Code is below: 

var frequency = 3;
stage.enableMouseOver(frequency);


this.myBtn.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()
{
	this.redBox.gotoAndPlay("expand");
}


this.myBtn.addEventListener("mouseout", fl_MouseOutHandler);

function fl_MouseOutHandler()
{
	alert("Moused out");
}

FlashCanvas_Test.zip

[ohem]

While experimenting with Flash CC Canvas, I also wanted to find a way to prevent things from getting pixelated on retina displays.  One option is building the banners at double the size, and scaling down in the HTML, which totally gets the job done.  But for banners with all vector elements, I found another solution.

 

Actually two slightly different variations that seem to achieve the same thing; not sure if one version is better than the other (they're so similar) but thought I'd share these for anyone who's interested:

 

http://www.unfocus.com/2014/03/03/hidpiretina-for-createjs-flash-pro-html5-canvas/

https://forums.adobe.com/message/7864791#7864791

 

Still no luck getting rollover states to work though...

[somnamblst]

Hi ohem,

 

I looked at the sample canvas banner FLA created by Grant Skinner on github. The rollover CTA is a button rather a movieclip.

 

https://github.com/CreateJS/html5ads/tree/master/AdHelper

 

Regarding retina displays, adhelper.js can handle that. 

 

http://createjs.com/html5ads/#HighDPISupport

 

I just opened and converted an existing Flash banner to Canvas. The copy looked like cat barf. I am happy to report that you can select that dynamic text, and it appears as it was meant to (font), break apart twice, and voila, instant font fix. So existing banner FLAs are ripe for Canvas conversion.

[ohem]

Thanks for that example!

 

It's really important for my work to have animated rollover states though...

 

I know this isn't GSAP related but I wonder if anybody here knows how to get that working with Flash CC Cavas? ( This is the only forum I know of to discuss banners!) 

 

It was so easy to add animated rollover states with ActionScript back in the old days of Flash banners, and even with Javascript and GetElementByID on regular HTML5 banners it's never a problem... I'm just not sure why targeting a frame label in a movie clip isn't working.  

 

According to this it should be easy enough http://createjs.com/html5ads/#FrameNumbersLabels

[somnamblst]

Try Kirupa. Unlike actionscript.org, Kirupa is still very interested in creating tutorials for the post Flash world, and who better than the Kirupian gurus?

 

http://forum.kirupa.com/t/given-that-adobe-has-discontinued-edge-animate-to-focus-on-flash-cc-canvas/633963

[ohem]

Thanks!  I did actually manage to find a working solution this morning, though I have no idea why the other version wasn't working when it was straight from the CreateJS Banner whitepaper. 

 

This works:

 
this.myBtn.addEventListener("mouseover", over.bind(this));
 
function over()
{
  this.redBox.gotoAndPlay("expand");
}


 
this.myBtn.addEventListener("mouseout", out.bind(this));
 
function out()
{
  this.redBox.gotoAndPlay("contract");
}

Figured it out based on this: https://forums.adobe.com/thread/1525741?start=0&tstart=0

EDIT: and this explanation is helpful too: http://stackoverflow.com/a/24744144/5071610

 

 

Weirdly, this code (also mentioned in the white paper and generated from Flash itself) doesn't seem to be needed at all?

var frequency = 3;
stage.enableMouseOver(frequency);

[somnamblst]

_{Thanks! I tried to get an AS2 rollover movieclip button to work yesterday and gave up. I wondered what that frequency code was for.}

 

_{This blog post has some AS to JS conversion examples.}

 

http://blogs.adobe.com/flashpro/converting-your-flash-ads-to-html5-canvas/

 

And some useful utilities, HTML5 Canvas Size Report and Filter Finder

 

https://blogs.adobe.com/flashpro/behind-the-scenes-of-html5-canvas-rendering-performance/

[ohem]

_{Thanks! I tried to get an AS2 rollover movieclip button to work yesterday and gave up. I wondered what that frequency code was for.}

 

_{This blog post has some AS to JS conversion examples.}

 

http://blogs.adobe.com/flashpro/converting-your-flash-ads-to-html5-canvas/

 

And some useful utities HTML5 Canvas Size Report and Filter Finder

 

https://blogs.adobe.com/flashpro/behind-the-scenes-of-html5-canvas-rendering-performance/

There's an explanation of the frequency thing here: http://createjs.com/docs/easeljs/classes/Stage.html#method_enableMouseOver

 

It seems like it should be necessary to enable rollovers, though somehow it's still working for me without it.

[somnamblst]

Out of curiosity I converted an existing Flash banner with lots of fairly tedious to recreate staggered classic tweens (text fly in effect) I originally found on Flashkit. Just selecting the dynamic text and choosing break apart (twice) returned the text to the original font it was rendered in.

 

Deselected CDN for the JS files and create spritesheet, the lockup was the only bitmap (6k not tinyPNGed), and it is just 78K zipped.

 

 

 

It seems like it should be necessary to enable rollovers, though somehow it's still working for me without it.

 

There are a couple things that don't seem necessary. Having a traditional Flash button symbol is all you need to enable a cursor, instead of 

 

stage.enableMouseOver()

 

or

 

this.childMC.cursor = "pointer";

 

I think I am going to stick with 

 

<script type="text/javascript">

var clickTag = "https://www.google.com";

</script>

 

onclick="javascript:window.open(window.clickTag)"

 

because you can see it, whereas clickTags in an FLA file are hidden, and sometimes we forget

[Web Dizajner]

Just put two things in the head section of html

 

<head>

<meta name="ad.size" content="width=300,height=250"> // put your dimensions

<script type="text/javascript">var clickTag = "http://www.google.com"; </script>  // this default URL you will change later in platform

</head>

 

and just wrap with a href Canvas element in the body section of html

 

<body onload="init();" style="margin:0">

<a href="javascript:window.open(window.clickTag)"><canvas id="canvas" width="300" height="250"></canvas></a>

</body>

 

I also remove background and margin from body and canvas element to be sure about look and to be prettiest for preview.

 

And additional change URL of libs, use Google, Sizmek and etc libs to lower size.

 

Dont use spritesheet option because generated JSON. You can use if you are sure that it is acceptable for publisher.

 

I also additional change path of images in JS, I like to have all files in root folder.

[ohem]

For Sizmek, clicktags are done differently.  You can add this in Flash/Animate CC; just make sure "clickthrough_btn" matches the instance name of your clickthrough button:

this.clickthrough_btn.addEventListener("click", clickThroughFunc.bind(this));
		function clickThroughFunc()
		{
			EB.clickthrough();
		}

And you also need this in the head of your HTML (as with all Sizmek HTML5 banners): 

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

[ohem]

Ack!  I thought I had the perfect solution for rollover/out animations in Flash CC Canvas, but just discovered that once the banner is in an iframe, the mouse out event is not detected.

 

Here's my code, which works great without an iframe:

this.clickthrough_btn.addEventListener("mouseover", over.bind(this));
 
function over()
{
  this.cta.gotoAndPlay("over");
}

this.clickthrough_btn.addEventListener("mouseout", out.bind(this));
 
function out()
{
  this.cta.gotoAndPlay("out");
}

And I found this, but can't seem to get it working with my code: http://stackoverflow.com/questions/1058085/iframe-onmouseout-capture

 

 

Does anybody here have any suggestions about this?  Mouse over works, but mouse out isn't detected once the ad is in an iframe.

[Dipscom]

I wish I could help but haven't touched Flash CC in months...

[somnamblst]

If you are currently creating your text as images you will love it. Any font you want, just break apart your text.

[OSUblake]

Ack!  I thought I had the perfect solution for rollover/out animations in Flash CC Canvas, but just discovered that once the banner is in an iframe, the mouse out event is not detected.

 

Have you tried mouseenter and mouseleave?

http://plnkr.co/edit/8BoFYG9Y6lpn4ZMz4fBh?p=preview

[ohem]

Have you tried mouseenter and mouseleave?

http://plnkr.co/edit/8BoFYG9Y6lpn4ZMz4fBh?p=preview

Mouseenter and mouseleave don't seem to work at all in a Flash Canvas file.

[OSUblake]

I'm not sure what events are available for a flash canvas file, but if you know where the mouse position, you can figure out if it's inside something.

 

http://lamberta.github.io/html5-animation/examples/ch07/01-mouse-events.html

/**
 * @param {object} rect Object with x, y, width, and height properties
 * @param {number} x    X Coordinate position to test
 * @param {number} y    Y Coordinate position to test
 * @returns {boolean}
 */
function containsPoint(rect, x, y) {
  return !(x < rect.x || x > rect.x + rect.width ||
           y < rect.y || y > rect.y + rect.height);
}