A while back when Vincent’s weblog was still up and running, a lot of international visitors found the expanding banner solution. For them, this article is now republished

Article by Vincent van der Meer

I was researching how to make my own script for an expandable Flash banner, which means the Stage expands when you hover over it. Such banners attract a lot more attention from visitors, and it’s very useful when you have display a lot of content or when you want to play a video. You can find such banners on (mostly busy/big) websites, like msn.com. It’s not very easy to find a method to do this on Google, so I figured I should post it myself. Let’s start with the Flash preparations.You can find my example here.

1. Flash

n Flash, make sure you Stage size is the size you want the expanded banner to be, like 468*180 pixels. When the cursor is not hovering the banner, you want to display the ”small” banner. In my example, I used the standerd 468 * 60 dimensions. Make sure there is nothing in the space that is not displayed when you banner is ‘inactive’.

Create an invisible (alpha = 0) movieclip, which I call ”clickable_mc”, and rescale it to the size of you ‘inactive’ banner. Add some actionscript with some onRollover and onRollOut function, and since it’s a banner you probably want to add the onRelease function to. OnRollover, skip or frame to the ‘active’ (expanded) state of your banner. In my example the banner expands with a short animation. Make sure that clickable_mc is the same size as the ”active” size. OnRollOut, animate your banner back to the inactive state. The most user-friendly (read: short) way to do this is to skip to the first frame or frame loop.

Now you should have a Flash banner that is 468 * 60 pixels, but expands to 468*180 when you hover it.

2. HTML

Ofcourse we need to display the banner in a website like it”s a regular 468*60 banner. When it expands, we want it to expand on top of the website content. I used SWFObject 2 to display the Flash banner in the website. The javascript functions I made, were placed in a .js file. Take a look at this code.

<script src="swfobject.js" type="text/javascript"></script>
<script src="expandingbanner.js" type="text/javascript"></script>\
<script type="text/javascript">
 var flashvars = {};
 flashvars.clickTag = "http://www.google.nl/";
 var params = {};
 params.wmode = "transparent";
 swfobject.embedSWF("banner.swf", "banner", "468", "180", "8.0.0", "expressInstall.swf", flashvars, params);
</script>

Most of the code is just SWFObject, which should be no secret to Flash developers. The only important things are to remember is that the Stage size equals the ‘active’ state, and that the parameter wmode is set to transparent. I also the clickTag variable, which is used commonly to define the URL the banner should go to when clicked on. This code is placed in the . Following is the HTML code. The container that is overwritten by SWFObject, is placed in another container that is triggered to call a javascript function when hovered. Also, onLoad is called a function to make sure the container is ready. Also note that you website is positioned below your banner. I did this by adding a padding-top, but you can also use margin, or a different solution. It depends on how your website is build.

<body onload="initBanner()">
<div id="bannercontainer" onmouseover="showBanner()" onmouseout="hideBanner()">
  <div id="banner">
     <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
  </div>
</div>
<div id="websitecontent" style="width: 600px; padding-top: 70px;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

3. Javascript

Next is the javascript in ‘expandingbanner.js’.

function initBanner(){
 var bannercontainer = document.getElementById("bannercontainer");
 bannercontainer.style.position = "absolute";
 bannercontainer.style.display = "block";
 bannercontainer.style.overflow = "hidden";
 bannercontainer.style.height = "60px";

function showBanner(){
 document.getElementById("bannercontainer").style.height = "180px";
}
function hideBanner(){
 document.getElementById("bannercontainer").style.height = "60px";
}

I am not getting into detail about this code. In short it expands the div in which your banner is contained.

After making this javascript, your banner should be up and running!

4. Files (download)

You can download a .fla, .js and an example .html file by clicking here. You can use this script under MIT license, which means you can use it freely. It’s appreciated to leave the copyright in the code.

Please let me know if this code is useful for you. Leave a comment or send me an e-mail! ;-)