The Flash max-height issue

While working at Flint on the site for Paper Stone Scissors, I ran in to the little explored area of flash player 9’s maximum rendering area – the site uses JQuery to dynamically resize the flash HTML container to use browser scrollbars for long pages and unfortunately FP9 stops rendering graphics beyond 2880×2880 pixels… a bit of a problem where the site often scrolls to 4000px or more…

Redesign to use flash-based scrollbars wasn’t an option. After hours of messing around, I found a solution: use Javascript to keep the size of the flash within the renderable area, and fool the user in to thinking they are scrolling HTML content when they are actually scrolling the flash.

Do this by:
– Initially setting the size of the flash element to the desired full size (this sets the correct scrollbar size).
– While scrolling, use external interface to pass the scroll value of the browser in to flash.
Track the value in JS and in flash, and if the scroll value hits the maximum value:

  1. In Javascript – reset the size of the flash html element to the max renderable size
  2. In flash – as the browser scrolls, scroll the flash content container in the other direction (this keeps the flash content within the maximum render area)
  3. In Javascript – add padding to the top of the flash html element to keep the scroll position correct

I had a lot of trouble finding resources about this issue online, I hope this can help someone with the same problem.

Categories

Archives