Resizing Flash HTML5 Canvas files for Retina Displays?

1

Hi, I recently started playing with HTML5 Canvas in Flash CC; it’s kind of nice to still use the Flash IDE which I worked with for many years, but I’m having a few issues that I can’t seem to resolve… I’m hoping someone here might be able to help.

I want to build a banner at double size, and then scale it down so that images are crisp on Retina displays.

<body onload="init();" style="background-color:#D4D4D4"> <canvas id="canvas" width="600" height="500" style="background-color:#000; width: 300px; height: 250px;"></canvas> </body>

should work; I’ve seen a working example of it here: http://filez.byhook.com/html5_examples/150k_CreateJS/ and it’s also described the same way here: http://www.iab.com/wp-content/uploads/2015/10/Now-I-Know-My-HTML5_EventPresentation.pdf

But when I create a simple file at 600x500 px in Flash, publish it, and add the 300x250 width and height to the HTML file, it doesn’t resize. Example file attached.resizeRetina.zip (258.8 KB)

The weird thing is, if I Inspect Element in Chrome or Firefox, it still shows the style with the old 600x500 width and height; I can edit it within “Inspect Element” and the resize does work, but I’m unclear how to make the change stick in the actual HTML file. Does anybody have any tips/tricks/ideas?

It seems like such a simple thing, but somehow I just can’t quite figure it out. Thanks so much for any suggestions!

2

Not sure if this is the problem you’re having, but once you make the changes to the HTML file and save it, you should also uncheck the “overwrite HTML file” option in the publish settings so every time you publish it doesn’t wipe out your HTML changes.

3

No, that’s not the problem. I’m just trying to figure out how to resize the canvas within an HTML file and actually have it work in the browser. <body onload="init();" style="background-color:#D4D4D4"> <canvas id="canvas" width="600" height="500" style="background-color:#000; width: 300px; height: 250px;"></canvas> </body> does not seem to work even though it should.

4

What’s the difference between that and what you changed in the console to make it work?

5

I have just started getting back into it, but someone on the GSAP forum posted this

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

I opened your FLA, the script you used should be in your HTML document, not your Flash Canvas file.

6

I forgot I even had any actions in there; the code for smoothing vector graphics seems to cause conflicts with scaling the canvas in the browser. It works fine without it…

I guess this is what’s causing the conflict:
// force the canvas back to the original size using css canvas.style.width = width+"px"; canvas.style.height = height+"px";

1 Like
7

Finally got around to building a 600x500 with all vector content. This is working for me. Resizing the canvas div with style=“background-color:#FFFFFF; width:300px; height:250px” is working for me.

8

Yeah, I realized that it works fine once I removed the other code I had included for better vector graphics on Retina, because that code was also resizing the canvas and basically overriding the HTML style.

I did figure out a way to use both though, so banners with images can be built at double size, and vector graphics can still look good even on 3x pixel ratios. With AdHelper, if you build a banner out at double size you can use this:

.highDPI(enabled=true, nominalScale=2)

" * The nominalScale param allows you to author content at higher resolution, and have AdHelper scale it appropriately
* for the device. For example, you may find it easier to author a 728x90 banner at 1456x180 (2x scale) so that
* bitmaps and cacheAsBitmap are high resolution, then specify a nominalScale of 2 to display it at the intended
* size of 728x90."

So that seems like the easiest way to have the most control. Learning all kinds of new stuff this week!

9

Cool. The GSAP folks were kind enough to create a subforum for banner animation because the regular GSAP forum was getting inundated with questions that had more to do with vendors like Doubleclick, Sizmek, clickTags, etc.Some bvery knowledgeable folks on that forum from a coding perspective.

And they have been in close contact with the major players because it helps them when the GSAP libraries are excluded from file weight. Like AdWords finally caved on external links.