Displaying Flash generated images in HTML <img/>, realtime

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 take the ByteArray that the PNG encoder class gives me and I encode it with Base64Encoder, prepend “data:image/png;base64,” to it, then send it out to javascript using ExternalInterface to call a JS function already on the page. That function receives the base 64 encoded string and sets it to the “src” property of the little thumb image down at the bottom of the page. You can see every time you scroll it updates. No biggie right, but if you right-click on it you’ll see that it is just an HTML image, right-click on the canvas and see that it is a Flash movie. No server round-trips, 100% Flash/Javascript realtime interaction. Tada!

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.

5 Responses to “Displaying Flash generated images in HTML <img/>, realtime”

  1. Judah Says:

    Cool! Thanks for sharing!

  2. sitron Says:

    yep! cool stuff! and working like a charm!
    (horizontal scroll of the flash part doesn’t work on my mbp)

  3. karfau Says:

    really nice idea!
    (reading the title let me know that it was something about ByteArray ;) )

    (I know, proof of concept, but whe I click on the thumb it disappears an never comes back. is this something that has any relevance to the post/topic? Tested it with ff, gc, opera @ winxp)


  4. Jacob Wright Says:

    karfau, this proof of concept was testing a lot of things out, including some JS layout code I did with jQuery. Clicking on the “pages” at the bottom delete’s them until there are no more. I did that so I could test if the layout works when the scrollbar disappears and that the pages center when there are only a few. That first page is the one that gets the image updates, if you delete that (by clicking on it) then they don’t happen.

  5. FlexDownloads Web Admin Says:

    Nice blog posts on flex and PHP Jacob.

    We just started a Flex website for Free and Premium Components and if you are interested, you can register and become a seller. Free components are more than welcome as well.

    The way we stumbled across your website ad posts was we were working on enhancing our Flex+PHP flexdownloads.com website and saw you very active in that area.