Expandable Banner – How to make it and embed it into your HTML page without affecting the rest of the page.

Today I helped a friend who needed an expandable banner embedded into a news website. At first, I had the instinct to searching on Google and giving him an URL or something where he can read more about this. To my surprise, none of the info I got through search engines was relevant or complete for this specific subject.

This led me to create an example and now I want to share that example with those searching for how to make an expandable Flash banner.


	<div style="position:relative; width:600px; height:120px; z-index:1000; background-color:none;">
		<div id="expandableBanner" style="position: absolute; clip: rect(0px, 640px, 120px, 0px);">
			<object id="banner" width="640" height="240" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0">
				<param name="movie" value="ExpandableBanner.swf">
				<param name="quality" value="high">
				<param name="wmode" value="transparent">
				<embed width="640" height="240" src="ExpandableBanner.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">


<script type="text/javascript">
	function expand() {
		document.getElementById("expandableBanner").style.clip="rect(0px 640px 240px 0px)";
	function retract() {
		document.getElementById("expandableBanner").style.clip="rect(0px 640px 120px 0px)";


	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;
	import caurina.transitions.Tweener;
	public class ExpandableBanner extends Sprite
		public function ExpandableBanner()
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			//make the close button invisible
			closeButton.visible = false;
			//add the hand cursor on the content MovieClip
			theContent.buttonMode = true;
			//add event listener on the close button
			closeButton.addEventListener(MouseEvent.CLICK, retractBanner);
			//add event listener on the content MovieClip
			theContent.addEventListener(MouseEvent.CLICK, expandBanner);
		protected function expandBanner(event:MouseEvent):void
			//check if the close button is not visible and if ExternalInterface is available
			if(closeButton.visible == false && ExternalInterface.available)
				//call the "expand" JS function
				//expand the height of the mask
				Tweener.addTween(theMask, {height:240, time:1});
				//set visibility to true for the close button
				closeButton.visible = true;
		protected function retractBanner(event:MouseEvent):void
			//check if the close button is visible and if ExternalInterface is available
			if(closeButton.visible == true && ExternalInterface.available)
				//change the height of the mask back to 120px, when the tween is complete, call the function "callRetract"
				Tweener.addTween(theMask, {height:120, time:1, onComplete:callRetract});
				//make the close button invisible
				closeButton.visible = false;
		protected function callRetract():void
			//call the "retract" JS function

  Expandable Banner (56.6 KiB, 1,844 hits)