Embedding HTML in an AS3 Project (no Flex Framework)

[v0.1] [check for latest version here]

Though rare, the occasion can sneak up on you when you need HTML inside a [full] Flash project. As one “Yahoo Answer-er” put it, “Its like pouring the glass inside the orange juice.” (found here) That notwithstanding, I needed just such a solution when my website client asked me to include in his site some HTML content that he had subscribed to. His site, as all that I do, was being built as a Full Flash site.

After much searching, I found two promising postings, one by Brian Deitte (here), and the other by Alistair Rutherford (here). Still both of these solution were for Flex projects, as the key class in one inherited from Canvas, and the key class in the other, from Container. While very impressed at their clever solutions, I didn’t want to import the Flex Framework just for this.

So, I set out to imitate their solutions, but without the Flex Framework.

Before I continue, let me say Thank You to both of them for their postings. I especially enjoyed the use Alistair gave to the ExternalInterface class, ‘injecting’ JavaScript into the document from within the AS3 code.

Well, here is an example of the class in action. [v0.1 is not working in FF - we’re hunting down the issue] Right-click in the top left corner of the beige border-panel to view source code.

Some points and notes about the whole matter:

1- The AS3IFrame class inherits from Sprite. Changing the x and y will move both the Sprite and the iFrame (naturally). So, the AS3IFrame’s x and y can be tweened (with a reletive degree of success). Alpha can not be tweened of course. Theoretically, the size could be tweened as well, but you’d have to tween both the AS3IFrame (by clearing the graphics class and redrawing to a new size of course) while simultaneously tweening the values of the iFrame width’s and/or heights. I haven’t tested this, but I imagine it should work more or less.

2- This may be obvious to many, or not, so I’ll explain this important fact here: The HTML (iFrame) portion is a DIV section that is floating in front of the Flash movie. It isn’t actually embedded in the Flash Movie, so it isn’t really “drawn” onto the Sprite. It’s being drawn directly over the position of the Sprite. So there’s an illusion of sorts here. This is important to understand because it means that you can not have Flash “draw” anything on top of the HTML content - since it is always floating in front of the Flash content altogether. This is also why you can’t tween the alpha, and why tweening the x and y is unlikely to be as smooth as pure Flash - though on my PC it isn’t so bad.

3- AS3IFrame.visible = false will make both the Sprite (backing) and the iFrame invisible.

4- AS3IFrame.iFrame.visible = false will make only the iFrame invisible, but not the Sprite

5- Some sites, once you click on a link, ‘take over’ the browser window, replacing your entire page (example: www.yahoo.com), while most other sites do not act this way.

6- Oh, oh.. important point: The class doesn’t work, for some reason that I haven’t investigated, when using the html wrapper that Flex Builder produces. I always use my own anyway - it’s included in the downloadable zip file (when you’re looking at the source code). (It uses SWFObject v2.) If you know why this is the case, or better yet have a solution, please feel free to leave a comment.

7- If I’ve missed something, by all mean let me know.

Thanks,
Rodney

This entry was posted on July 01st, 2008 and is filed under AS3, Intermediate, Of Particular Interest. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

One Response to “Embedding HTML in an AS3 Project (no Flex Framework)”

rpx
1. July 2008 at 12:39
To my dismay, discovered that the example (v0.1) doesn’t run in FF. I had only tested in IE and Opera (with no issues). Working on solution.

FlexMerge

Embedding HTML in an AS3 Project (no Flex Framework)

Search

Pages

Archive

Categories

Blogroll

Meta