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.


HTML:

<body>
	<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">
			</object>
		</div>
	</div>
</body>

JavaScript:

<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)";
	}
</script>

ActionScript:

package
{	
	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()
		{
			super();
 
			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
				ExternalInterface.call("expand");
 
				//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
			ExternalInterface.call("retract");
		}
	}
}

  Expandable Banner (56.6 KiB, 1,844 hits)