Issues?

For last year or so Flash was harsh on me :) For years before I never had real problems with Flash but recently(for last year) I just keeping stumbling upon various ones that make my life harder. I decided to start posting about them and if I find/make solutions for them I will be posting them too.

Flash wmode

What it is? It is a parameter that defines how Flash is embedded and rendered in HTML page. Default value is window, with it Flash is positioned and rendered above everything else. It is fastest and most stable mode out there. But of course such behavior is not sufficient in some cases.Sometimes you need to show some HTML above flash, or need flash being more tightly integrated in to a page where something is shown above it or something should be shown trough it(Flash being transparent). Well here come two other modes called opaque and transparent. First allows showing stuff above flash and second adds transparency to it. As a result rendering becomes slower. But there are even worse things. Those modes relay more on browsers which results in various Flash+browser bugs surfacing… Actually wmode aside from window mode are a whole treasure chest of bugs it seems…

Wmode and Input

First problem I run on to with wmode was input. On one site for which I was developing Flash components to be more precise. There was a need for a drop down menu shown over the site the site with pretty complex design. Obviously that was calling for a wmode=transparent settings. And one of those menus contained an input field. And site audience was targeted at east Europe including Russia… So imagine my confusion when I found out that in Firefox and some of other browsers with wmode=opaque|transparent settings work incorrectly with non English character input (my guess is ones whose code is outside of 1 byte range, UTF-8/UTF problems or something). And for non Latin family languages that means ALL input is messed up. So here below are two exactly equal input fields but with different wmodes. Transparent to the left and window to the right. Go ahead and try imputing non English alphabet character in to it(I hope you have some).

As far as I can say it is common for IE/Firefox and for some builds of Chrome too. In Opera it inputs English symbols as if I haven’t changed input language and I guess there is nothing you can do here. Haven’t tested in Safari.

Fixes/workarounds?

After googling for some time it become apparent that this problem is known, and has its bug reports in Adobe JIRA and also has some workarounds… But I did not found any that satisfied me… It just that they involved JavaScript. And I don’t like doing such “external” to flash fixes because often they bring in new problems like cross browser glitches or conflicts with some other JS in pages, also you not always have access to JS.

So after playing for an evening I found another solution. Not perfect but still better then nothing:

This is same file but with little bit of AS3 code added.

Here is the code:

Input.addEventListener(TextEvent.TEXT_INPUT,change);
function change(e:TextEvent)
{
e.preventDefault();
if (e.text.length != 2)
{
e.currentTarget.replaceSelectedText(e.text);
}
else
{
var b1:uint = e.text.charCodeAt(0);
var b2:uint = e.text.charCodeAt(1);
if (b1 < 256 && b2 < 256)
{
var code:uint = (b1<<8)+b2;
e.currentTarget.replaceSelectedText(String.fromCharCode(code));
}
else
{
e.currentTarget.replaceSelectedText(e.text);
}
}
}

 

 

What it does? Well I quickly noticed that for any symbol whose code is larger then 256 you get two symbols instead of one. Also I read that from Adobes words it was fault of browsers of not passing keyboard data correctly. My guess was that instead of getting 2 byte UTF flash for some reason were getting two wrong 1 byte UTF-8 symbols.

I spent 15 minutes finding a way to prevent default input behavior and tuning it to my needs. You can see in code that I register to input event and then use preventDefault() to cancel input. After that I check what kind of input am I getting, two bytes or not. If two bytes and their codes are below 256 I concatenate them in to 2 byte UTF symbol and input it, otherwise I input original symbols. One 1 byte symbol, or if it was pasting I probably got more then 2 bytes and pasting works just fine.

It works as far as I can say… There is one issue with this “fix” though. And it is when you try to paste two symbols whose codes are below 256. I did not come up with any approach to see if I need to concatenate those two symbols or not :( In that particular case you will probably get garbage instead of two symbols. But it is better then nothing.

P.S

I am not shore but on my home machine this bug does not happen… After trying to understand why found out that I have Flash 10.1 here… I guess it ended up here along with Flash CS5 trial. Anyways if that’s the reason then soon this problem hopefully will be non existent. I guess by end of the year 10.1 will be dominant version of Flash and this “fix” will be less useful.