So there may not be an exorbitant amount of use-cases for displaying an image in HTML that was generated real-time in Flash, but I thought’s cool, so I’m sharing anyway. It makes the inner-geek in me smile.
Short background: I was looking into creating a Flash drawing app that consisted only of the canvas portion, with the rest of the UI in HTML. This is for many reasons including the size of Flex, the native OS components in the browser, speed, and hey, it forces separation of core app logic from the presentation logic, right? ;)
So I wanted a way to display thumbnails of the pages of my drawing. This was all proof of concept and I only have one page and one thumbnail. To do so, I used the URI Data scheme to set the data of a HTML
<IMG> element. The only modern browser (if you can call it that) which this doesn’t work with is IE6, an acceptable loss for proof-of-concept. Here is how it works in my proof of concept:
See the Studio proof of concept
First, I take a resized bitmap snapshot of my canvas anytime something on it changes, in this example, when it scrolls (I may post about the scrolling in another post, also cool geek stuff). This is done using the BitmapData.copy() method. Actually, I’m using my ImageUtils class which ensures it looks good when resized (more about that in another post). Then I turn the BitmapData object into a PNG with AS3CoreLib’s PNGEncoder. I now have the bytes for a PNG, so how do I get it to HTML without sending it to the server first? Well, I’ll tell you!!
I did a bit more playing around with it, giving the bitmap rounded corners in Flash before sending it to the browser, tried shadows too, but decided they didn’t look great in this interface, so left them out.
Really fun stuff. I hope this is inspiring, even if it isn’t useful in your situation. Next time I’ll talk about how the native browser scrollbar is scrolling the Flash content, though you may be able to guess easy enough.