The HTML Overlay component combines HTML seemlessly with Flash. Now you can add HTML content to your projects with one line of code. Just drag and drop the HTML Overlay component onto the stage, set the html and it's ready to go. All the code has been written for you to be able to control it with ActionScript or JavaScript.
How it Works (taken from the help documentation)
In this section we refer to two components. One is the HTML Overlay component instance and the other is the HTML overlay element. The instance refers to the component instance on the Stage at design time. The element refers to a div element that we create when the HTML Overlay overlay() method is called. Once you call overlay method the html overlay instance becomes an html element (it can be controlled through ActionScript).
To use this component open the component panel and drag and drop a instance to the stage. Position it where you want the HTML element to show up. Type in the html and instance ID in the component parameters or set them with the instanceName.html property. The ID is the id of the element that will be created in the HTML DOM. This parameter is required. Open the actions panel and add call the overlay method instanceName.overlay().
You can set any css styles of the HTML element by entering them in styles parameter. View the example applications to see various styles applied. Some css styles directly affect the size and position of the html element. Keep this in mind and use the heightOffset and widthOffset properties if the element shifts in size or position. Typical css properties that cause shifting are border, margin, vertical align and padding.
Shifting can affect one browser and not the other.
This component uses a special publish setting. Before publishing open the Publish Settings window and in the HTML tab set the Template to "HTML Overlay". Set the Window Mode to Transparent Windowless or Opaque Windowless. You are then ready to preview it in a browser (press F12).
When the page loads the HTML element will be created and placed in the same size and location as the HTML Overlay instance.
Features
Full CSS Styles support
Populate HTML Overlay element with an element off HTML page
Overflow handling
zIndex
Control HTML Element via Flash with:
- MoveBy
- MoveTo
- ResizeBy
- ResizeTo
- Set Style
- Set HTML
- Show
- Hide
Extendable via JavaScript - add your own methods or code
Requirements
Flash MX 2004
Firefox 1.0, Netscape 7+ or Internet Explorer 6+
(browsers must support the FSCommand and JavaScript)
Notes
Help Documentation is not available yet
Comes with 7 fully documented example projects
Known issues page
Special Bonus
Full Screen Flash Project
Comes with a Flash full page stretching example and HTML template. The included template allows you to publish flash projects that stretch full screen without scaling. This example shows you how to dynamically reposition elements and achieve a liquid layout. No longer can html geeks lord liquid table design over flash users. Works with or without HTML Overlay component.
Queue Class
This queue class allows you to queue functions up to be executed at regular intervals. It is generic enough to use with any projects you might have. It is easy to use and comes with a commented example file.

![[]](modules/ecommerce/cart/images/cart_empty.png)
