On-the-fly conversion of Flash to image for iOS
In this brave new world of smart phones and tablet PCs, the firm I work for is focusing a lot of energy these days on how to roll out its historical content onto these devices.
The problem is, over the years, we've made a lot of Flash banners. And iOS, the OS behind iPhone and iPad, doesn't support Flash.
I was charged with coming up with a solution. What's a quick way of generating static image equivalents of thousands of Flash banners?
I came up with a solution involving JS and PHP. The concept is this: as users browse our content on Flash-supporting PCs, a secret PHP script is loaded in a hidden iFrame that takes a screenshot of the page (yes, it can do this).
Data regarding the banner's position and dimensions is passed to the script by Javascript in the query string.
Works a treat. Though users don't realise it, they're helping us create a cache of images that are alternatives to Flash banners.
We did hit one snag, though. As I said, JS passes PHP the coordinates of the banner but of course these coordinates are relative to the viewport not the window, but PHP's screenshot is of the window, i.e. toolbars and all.
There is no way in PHP to capture the contents of a window only the window, complete with toolbars and other periphirals.
IE actually provided a solution to this problem. It defines window.screenLeft and window.screenTop respectively, the left and top position of the viewport relative to the window. Hurrah! But no Firefox doesn't define these properties. Other browsers do, but give them other meaning, so no dice.
But there is a solution. A very hacky, almost whorish solution, but it works. I'll write a separate blog post in the next few days detailing the technical steps of this conundrum, in case it helps anyone else.
Comments (0)