Fix CreateJS in Adobe Animate HTML5 Ad for IE9/10 - html

I'm creating an HTML5 ad in Adobe Animate CC, which in itself is fine.
I'm trying to put in place browser fallbacks. When I test the ad, it displays fine except for in Internet Explorer <= 10.
What's odd is that, per this whitepaper by Cory Hudson, Ad Expertâ„¢, IE8 is the last browser in that progression that didn't support <canvas> and I do believe that.
Looking at IE9 and IE10 specifically, I find that the canvas element does show up, with the background color that I specified in Adobe Animate CC. There's just no elements or animations of any kind showing up in it.
CreateJS is advertised as supporting IE9+, but is there something specific that could be causing it to fail on IE9/10? I recognize that I'm dealing with Animate CC's generated JS code that uses CreateJS, but still any pointers would be helpful.

Man, I got the same problem!
I noticed that before last Animate's update, HTML5 works fine on IE <= 10, so I compared the files and get a hugh diference on the .HTML files.
One thing that was add on last update is "support HiDPI and Retina displays", so Adobe change the function "handleComplete" (in HTML file) and put some new lines on it.
One var of this function (pRatio) get a window attribute (window.devicePixelRatio), and on IE <= 10 this return undefined. There is our problem!
To HTML5 work, put this line before the line that set canvas.width, like this:
if(pRatio == undefined) pRatio = 1; //work on IE <= 10
canvas.width = w*pRatio*sRatio;
I think this will be fixed soon, but until that day, that's a solution.
Bye

Related

Overlap HTML elements using css

I am doing a project where I have to display video using Flash OSMF player. Also I have to display some text and image on top of the player.
It's working pretty cool in chrome and IE. When it comes to Firefox and safari the text element is hiding behind the video player. I have z-index CSS property to make it to the front but no luck it's still hidden in the background .
I have a live site http://www.tallenge.com/alcy-caluamba/all-categories1/general23/lecrae-i'm-turnt--choreography-by-alcy/vote
Since it is not working in Firefox I have changed the player only for Firefox and safari to html5 player in live site, so that it is displaying text as expected. For testing you can take player code(under medidplayer element) from chrome and replace it in Firefox - you will get the issue I have mentioned above.
Any help/suggestion would be greatly appreciated .
Thanks in advance ...
This problem can be related to the wmode setting of the Flash player object, see the Adobe documentation of this setting:
https://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html#main_Using_Window_Mode__wmode__values_
You can try using wmode="opaque" as a param of the Flash object:
<param name="wmode" value="opaque"/>
However according to the Flash docs in that mode the plugin is not able to take advantage of hardware acceleration.
Unrelated question, if you already used the HTML5 video tag as a fallback for Firefox, why Flash? I'll take the opposite direction HTML5 video tag by default, Flash as a fallback for old browsers.

Flash AS3 stage.colorCorrectionSupport always resolves to unsupported - what happened to stage.colorCorrection?

Two and a half years ago Adobe announced that FlashPlayer 10 would support color correction. Admittedly the implementation was really basic because it would always assume all content to be sRGB encoded and would convert that content to the current display profile in use on the system. This was the introduction blog post by John Nack.
All AS3 needed to activate this feature is:
stage.colorCorrection = ColorCorrection.ON;
...and yes you do need stage access for this to work and no that is not the problem.
So back when it was new I wrote a little wrapper to display images in Internet Explorer and Chrome so that they would render correctly for folks with extended gamut displays and also used this in a flash based video player with the same purpose.
Revisiting either today I find that what I know to have worked no longer does. What changed in the meantime is FlashPlayer's version and most likely the browser versions, too. I tried OS X, Win 7, Win XP, icc v2 and icc v4 display profiles on all of these, different browser versions, flash player versions to no avail.
You'll say that I must have done something wrong but the example page Adobe published a while later and which I lknow to have worked for sure also fails nowadays. If you look at the Flash applet you'll find it saying:
stage.colorCorrectionSupport: unsupported
If it sais supported for your system please comment the OS, browser and version and FlashPlayer version. Otherwise I'm looking for any clues to what happened to this feature.
At least the Adobe staff participating on their boards seems to be clueless. Quote: Because this feature seems to be disabled by default in most major browsers, I'm thinking that it was an experimental web standard proposal that died or something. We're not doing a whole lot here, it's mostly dependent on the browsers passing us the right data and doing the right color conversion math. We're pretty far down the chain of events.
I know for a fact that this worked at some point of FlashPlayer's evolution. So the following might help in solving what's going on:
does the Adobe example still work for anyone caring to look?
if this were about a deprecated browser feature why doesn't it work on old browsers anymore?
did it stop working on any particular FlashPlayer? (I tried several but could no longer make it work)
Notes:
color correction did not work with wmode transparent for some reason (but opaque was fine)
color correction originally also sometimes failed when using alpha bleding transitions
UPDATE: The feature still seems to work when wmode is set to "window". Of course that is very limiting. If you have a lightbox etc. on a page the Flash content will always stay on top of it etc. - so that's bad.
With wmode="window" the example also worked for me on OSX 10.6 (only version I tested thus far) and Win XP 32 bit. It still failed with all win 64 bit versions I tried but those systems have multiple screens so maybe I'll have to retry with a single screen since the first comment below suggests it worked on Win 7 64.
On the systems this worked I tried Firefox, Safari, Internet Explorer and Chrome. All worked the same except that when using Chrome the built-in Flash player always gives stage.colorCorrectionSupport: unsupported while disabeling the built-in FP and using the system's Flash player works as in the other browsers.
So the questions above can be narrowed to why does this no longer work for any other wmode especially "opaque" - which did work before and which is what Adobe uses in their on-line version of the sample file...
UPDATE 2: Flash Player's newer wmodes "gpu" and "direct" make the feature fail on the systems / browsers named above where wmode "window" worked out.
UPDATE 3: After finding the wmode = "window" angle I decided to post a follow-up on the Adobe forum I quoted from initially. That lead to this whole issue being acknowledged as a bug in Flash player at: https://bugbase.adobe.com/index.cfm?event=bug&id=3596843 So I guess there won't be an answer to the question of what happened to stage.colorCorrection but hopefully it will sort itself out.
UPDATE 4: O.k. here is the mandatory bit of stupidity... When I said that I remembered wmode "opaque" to have worked before I errored. Upon reviewing this further I found that a long time ago I had put wmode="normal" in one of my JS files and since normal does not exist older versions of Flash Player used the standard wmode window so that was why it worked back then. More modern Flash Players have other defaults e.g. direct where color management fails and so it failed for me. So I think this never worked with any wmode other than "window" but I'm curious what the future might bring for this...
(yeah this is an old question, but I was product manager for Flash Player 10, so I thought I'd answer)
It works with window mode because Flash Player gets the rectangle in the browser and gets pretty much full control of the rendering stack and doesn't have to deal with compositing with items it doesn't know the color status of.
When you switch to something like wmode transparent, you go into a pretty crazy back and forth process compositing with the rendered elements above and below it. When you go into wmode GPU, the rendering stack is largely handed over to the GPU (not surprisingly). In both cases, Flash Player loses some control of the rendering stack and at that point things like color correction aren't possible.
The primary reason for this feature in Flash Player 10 was to enable interactive e-publishing in Flash Player (like inDesign SWF export) as well as support for applications that could help in a print-oriented tool chain.

Canvas Drawing with browser compatibility

In my application, I created Canvas and started to draw lines, rectangles and drawing with pencil. Everything works good on Firefox and Chrome(with latest versions). The Problem with IE only. While I draw on canvas with pencil, it was not draw at mouse pointing spot (drawn little bit top of the cursor point). I used IE version 10 only. Need to add any code for browser compatibility issue on IE 10??
Note: It was working on IE 9 but, If I changed browser version to IE 10 Compatibility View, It was showing This Browser doesn't support Html 5. Try with higher version
Thanks in Advance...
IE-10 compatability view makes IE-10 compatable with earlier version of IE. Canvas does not work with versions before IE-9. Using explorercanvas at http://code.google.com/p/explorercanvas/downloads/list allows canvas to be used with earlier versions.
Does your script work in IE-10 with compatability not switched on? It should do.

Current state of HTML5 video in 2013

I've been using flash video for embedded videos on my site. My old 2.2.x android plays them fine but I'm noticing a lot of new android devices as well as apple devices will not play my videos because flashplayer is fading, so I'm investigating the solution - and HTML5 video seems to be the new thing.
I've just spent 2 hours searching google and read a lot of stuff but most of it is from 1, 2, or 3 years ago -- and judging from what I've read it looks like using the html5 video tag still requires each video to be converted to multiple formats, and full screen is some sort of vendor specific extension -- different on each browser which happens to support it.
So my question is whether HTML5 video tag is a full replacement for the flash player now, or is it still a kludgiferous scheme requiring browser specific hacks for half a dozen most popular browsers -- in 2013?
Does it work on PC's, Macs, Androids, and iPhones?
caniuse.com is a great resource for pretty good data to answer this question.
As of now...
~92% of web users' browsers support the HTML video tag. The main one that doesn't is Opera Mini (about 4.5%). For those users, you can use a Flash fallback, which is actually not too much work. There are a handful of very simple solutions that will handle this for you, like videoJS, jPlayer and JWPlayer.
For now, you do need to encode in two, possibly three formats. About 92% of users support MPEG-4/h.264. Opera Mini and IE8 do not support it.
Only about 71% of users can support full-screen HTML video, so for Android and iOS (mainly), all versions, the best you can do is set the video to fill 100% of the browser window. If full-screen is that important, then you'll want to use Flash.
So, in short, yes, HTML5 video does require a little extra work, but at this point, it's not that hard to get right, and it's a standard that's moving in the direction of better stability and uniformity. YouTube, for example, uses it (with fallbacks), if that's any indication that it's ready for prime time.

Flash embed with html overlay, wmode="direct"

I'm trying to place html elements over a flash video which must be rendered with wmode="direct" (video occupies entire window with html UI to be laid over it, anything other than direct makes CPU usage surge).
I've tried using an iframe to include the flash video, but I'm still unable to place any elements over it. Is there a workaround to achieve this?
According to Adobe's wmode browser support matrix, all major browsers at current versions on Mac already support this use case. On Windows support is spotty, only IE 9+ is claimed to work.
Like you, I'm trying to find out if/when Adobe plans to extend HTML overlay support for wmode=direct in Windows browsers. The linked page only talks about Chrome up to 10 and FF up to 4, so more progress may have already been made since the doc was last updated.
If I find out something useful I'll add it to this answer, until then it's probably safest to assume you need IE 9+ on Windows to support direct+overlay.
We are finding that most browsers support HTML overlay when wmode="direct" - however no browser is able to support transparency overlayed on top of the flash. Not even PNGs can alpha blend correctly. Any pixels that have an alpha channel and ignore as if there was no pixel at all.
When creating UI to layer over the top of flashs we have to "blanket out" the SWF - or - use rectangular DOM elements (ie, no rounded corners)
Furthermore - IE 9 on Windows 7 and older version simply fail to overlay anything over the flash. Iframes seem to pierce the SWF, but HTML elements do not.