Hi All,

I have a requirement to load a flash advert, with a transparent background, on page load which expires after 8 seconds. There is a button to manually close the movie before the 8 second timeout which I have created on a separate layer, sitting on top of the Flash movie. I would like to incorporate the manual close button in to the Flash movie if possible (ExternalInterface perhaps..?).

The solution that I have so far relies for the most part on CSS and displays two divs set to 'display: block' on 'window.onload' with javascript. One being the overlay background of 100% width and height; the second div layer, which contains the Flash movie, is layered on top of the overlay background using a z-index with the Flash movie wmode set to transparent. When the User clicks the manual close button or when the setTimeout reaches 8 seconds both divs have the the CSS 'display' set to none.

Question 1: At present the manual close button is contained within a DIV layer on top of the Flash movie. This works fine but I would like to put this event in to the Flash movie but can't quite find the right syntax.

Here is the code for changing the div display to 'display: block' on load then 'display: none' with the close button div:

<!-- header content -->
<style>
/* Transparent grey background */
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.3;
opacity:.30;
filter: alpha(opacity=30);
}

/* Content box containing Flash movie */
.white_content {
display: none;
position: absolute;
top: 10%;
left: 25%;
right: 25%;
padding: 0px;
background-color: transparent;
z-index:1002;
overflow: auto;
height: 710px;
width: 600px;
margin: 0 auto 0 auto;
}
</style>

<script type='text/javascript'>
window.onload = function () {
document.getElementById('light').style.display='bl ock';document.getElementById('fade').style.display ='block';
setTimeout(function(){ document.getElementById('light').style.display='no ne';document.getElementById('fade').style.display= 'none' },8000);
}
</script>


<!--body content -->
<!-- Content box div containing flash movie -->
<div id="light" class="white_content">
<div id="closeButton"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='n one';document.getElementById('fade').style.display ='none'"><img src="closeButton.jpg" width="20" height="20" border="0" alt="Close"></a></div>
<!-- insert flash movie here-->
</div>

!-- Transparent grey overlay -->
<div id="fade" class="black_overlay"></div>


This does work but is it the best solution..? It will be added to an existing webpage and the requirements are to keep the code as simple and unobtrusive as possible.

Question 2: By setting the display to none, I'm assuming, the movie will still play in the background albeit hidden by the CSS 'display: none' property. I do have a slight concern that it may cause an unnecessary over-head although, once loaded, I suspect it may be no worse than having a banner ad playing on a page. Would this be an issue..?

Thanks in anticipation.