Return to Snippet

Revision: 80623
at March 23, 2020 05:59 by chrisaiv


Updated URL
https://www.chrisjmendez.com/2002/10/23/as3-placing-an-overlay-over-an-image/

Updated Code
https://www.chrisjmendez.com/2002/10/23/as3-placing-an-overlay-over-an-image/

Updated Description
https://www.chrisjmendez.com/2002/10/23/as3-placing-an-overlay-over-an-image/

Revision: 9162
at October 23, 2008 14:37 by chrisaiv


Initial Code
var errorMc:MovieClip;

var assetLoader:Loader = new Loader();
	assetLoader.name = "assetLoader";
	assetLoader.contentLoaderInfo.addEventListener( Event.ACTIVATE, httpStatusHandler, false, 0, true );
	assetLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, loaderCompleteHandler, false, 0, true );
	assetLoader.load( new URLRequest("http://farm3.static.flickr.com/2068/2226178289_3f9556c08f_b.jpg") );

var appStage:Stage = stage;
	appStage.addEventListener( Event.ADDED, addedHandler, false, 0, true );
	appStage.addEventListener( Event.REMOVED, removedHandler, false, 0, true );

function displayMessage( notice:* ):void
{
	errorMc = new MovieClip();
	errorMc.mouseChildren = false;
	errorMc.name = "messageMc";
	errorMc.graphics.beginFill(0x000000, 0.5);
	errorMc.graphics.drawRect( 0, 0, appStage.stageWidth, appStage.stageHeight );
	errorMc.graphics.endFill();

	var tf:TextFormat = new TextFormat();
		tf.font = "Verdana";
		tf.size = 16;
		tf.color = 0xffffff;
		tf.rightMargin = 10;
		tf.leftMargin = 10;

	var displayTxt:TextField = new TextField();
		displayTxt.width = errorMc.width;
		displayTxt.height = errorMc.height;
		displayTxt.wordWrap = true;
		displayTxt.selectable = false;
		displayTxt.text = notice.toString();
		displayTxt.setTextFormat( tf );

	errorMc.addChild( displayTxt );
	appStage.addChild( errorMc );
}

function httpStatusHandler( e:* ):void
{
	trace( e );
	displayMessage("httpStatusHandler:" + e );
}

function centerBitmap( bmp:Bitmap ):void
{
	var centerPoint:Point = new Point( appStage.stageWidth / 2, appStage.stageHeight / 2 );
	
	bmp.x = centerPoint.x - ( bmp.width / 2 );
	bmp.y = centerPoint.y - ( bmp.height / 2 );
}

function getAspectRatio( width:Number, height:Number ):Number
{
	if (width > height) 
		return ( width / height );
	else 
		return ( height / width );
}

function adjustImageSize( bmp:Bitmap ):void
{
	var aspectRatio:Number = getAspectRatio( bmp.width, bmp.height );

	if( bmp.height > bmp.width && bmp.height > appStage.stageHeight ){
		bmp.height = appStage.stageHeight;
		bmp.width = bmp.height / aspectRatio;
	} else if ( bmp.width > appStage.stageWidth ) {
		bmp.width = appStage.stageWidth;
		bmp.height = bmp.width / aspectRatio;
	}
	centerBitmap( bmp );
}

function loaderCompleteHandler( e:Event ):void
{
	var bmp:Bitmap = e.currentTarget.content
	adjustImageSize( bmp );
	appStage.addChild( e.currentTarget.loader );
}

function addedHandler( e:Event ):void
{
	if ( e.target.name == "assetLoader") {
		if ( appStage.getChildByName("messageMc") != null) {
			var error:DisplayObject = appStage.getChildByName("messageMc");
			if ( appStage.contains( error ) ) {
				appStage.swapChildren( appStage.getChildByName( e.target.name ) , error );
			}
		}
	}
}

function removedHandler( e:Event ):void {
	trace( "removedHandler: " + e.target.name );
}

Initial URL


Initial Description
So here's the scenario, suppose your loading an image, swf, etc but if any other kind of error occurs in your application, you want an error message to display above the image.  There are many different way to accomplish this task so I thought it would be helpful to show a more unconventional technique using Event.Added

Initial Title
AS3: Placing an Overlay Over an Image

Initial Tags
error

Initial Language
ActionScript 3