Using ExternalInterface and JS to make an Expandable Flash Banner

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:

JavaScript:

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,876 hits)