Friday, June 26, 2009

Artifacts in Flash on Mac (FF3, AS3, Javascript, swfAddress)

In the past week or so, the Basement pushed Creative Alliance's new website live. It was a fun little project. I really enjoyed messing around with the orbiting particles... they made fun a fun and playful environment.

One thing I did not enjoy, however, was a little bug. It is somewhat hard to explain, but I will give it a shot then follow it up with a video.

Basically, when you click on things, random sized boxes/rectangles appear on the screen. The client called them artifacts. Since I couldn't recreate them on my end, I requested more information from the client... computer specs, screen shot, etc.

The main spec difference they sent back was that they were using a Mac. And instead of sending a screenshot, they did one better and sent the following video:

Sure enough, when testing on our Mac I could get them to appear. (So much for that small hope that the client's computer was possessed). Sooo, ummm, crap, that the ef are those boxes?

I started taking everything out of the site to see if it was something I was doing. I removed the particles, I removed the content box, I removed the background glow... no nada. Artifacts would still appear. grrrr Finally I disabled swfAddress. Ding Ding Ding. No artifacts. That gave me enough to research online and figure out what was going on.

Turns out, it wasn't swfAddress's fault. In fact, its any javascript call that uses ExternalInterface. For some reason when you call ExternalInterface, little boxes like to appear on your screen and they will do their best to drive you batty.

Luckily, the latest version of SWFAddress takes care of this issue. I'm not going to pretend like I know why or how... but I will tell you that version 2.3 does remove the issue. I think it was specifically taken care of in version 2.2, but I did not test it out.

So if you stumble across this post due to crazy boxes appearing on your Flash site on a Mac. Upgrade your SWFAddress and that should do the trick. If you are making your own ExternalInterface calls, then you may want to look into using a URLRequest and pass the code using navigateToURL(request, "_self");. I haven't personally tried that one, but when doing a little research for this blog post, I stumbled across BigSpaceShip's post which seems to cover the topic quite well... and now I have to wonder why I didn't see this post when I was struggling???? haha. Oh well.


Josh Tynjala said...

This also happens with Flex applications that use the built-in history management that comes with the framework.

Ickydime said...

@Josh, any way to get into the built-in code and alter the ExternalInterface call? Or know of any other work arounds?