Apply a Mask and Add a Title with ActionScript

The LoadImage class can be modified to accept a parameter for the image URL:

package {
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	
	public class LoadImage extends Sprite {
		public var imageURL:String;
		private var loader:Loader;
		
		public function LoadImage(imageURL:String) {
			loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.INIT, initListener);
			loader.load(new URLRequest(imageURL));
		}
		
		private function initListener (e:Event):void {
			addChild(loader.content);
		}
	}
}

An ImageTitle class creates a text field with a title parameter:

package {
	import flash.display.*;
	import flash.text.*;
	
	public class ImageTitle extends Sprite {
		public function ImageTitle (title:String) {
			var title:String;
			var titleText:TextField = new TextField();
			var format:TextFormat = new TextFormat();
			format.font = "Arial";
			format.size = 20;
			format.color = 0xFFFFFF;

			titleText.text = title;
			titleText.setTextFormat(format);
			titleText.autoSize = TextFieldAutoSize.LEFT;
			
			addChild(titleText);
		}
	}
}

The ImageView class creates a rounded corner rectangle, ImageBorder, that forms the border around a masked image. The image is loaded. Then, another rounded corner rectangle, ImageMask, is created on top of the image and the slightly larger border rectangle. This smaller rectangle is used as a mask for the image, creating the effect of an image with rounded corners. A title bar is created with a shadow, titleBarShadow, which is simply a black rectangle with an alpha transparency setting of 50%. The title bar, titleBar, is added on top of the shadow with dimensions slightly smaller than the shadow and a gradient fill oriented at 90 degrees. Finally, the title, ImageTitle, is added.

package {
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*
	
	public class ImageView extends Sprite {
		public function ImageView () {
			var imageURL:String = "assets/image.jpg";

			// Set variables for image masks
			var fillType:String = GradientType.LINEAR;
			var colors:Array = [0xFFFFFF, 0xCCCCCC];
			var alphas:Array = [1, 1];
			var ratios:Array = [0, 255];
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(320, 240, 90, 0, 0);
			var spreadMethod:String = SpreadMethod.PAD;

			// Create imageBorder
			var imageBorder:Sprite = new Sprite();
			imageBorder.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);  
			imageBorder.graphics.drawRoundRect(2, 0, 324, 244, 40);
			imageBorder.graphics.endFill();
			addChild(imageBorder);
			
			// Load the image and instantiate it as "image1"
			var image:LoadImage = new LoadImage(imageURL);
			addChild(image);
			image.x = -26;
			image.y = -100;

			// Create imageMask
			var imageMask:Sprite = new Sprite();
			imageMask.graphics.beginFill(0xFFFFFF, 1);  
			imageMask.graphics.drawRoundRect(4, 2, 320, 240, 36);
			imageMask.graphics.endFill();
			addChild(imageMask);
			
			// Apply imageMask to image
			image.mask = imageMask;
			
			// Create title bar shadow
			var titleBarShadow:Sprite = new Sprite();
			titleBarShadow.graphics.beginFill(0x000000,.5);
			titleBarShadow.graphics.drawRect(0, 150, 328, 60);
			titleBarShadow.graphics.endFill();
			titleBarShadow.alpha = .5;
			addChild(titleBarShadow);
			
			// Create the title bar
			var titleBar:Sprite = new Sprite();
			var titleBarGradMatrix:Matrix = new Matrix();
			titleBarGradMatrix.createGradientBox(324, 56, (90 / 180 * Math.PI), 2, 152);
			titleBar.graphics.beginGradientFill(fillType, [0x99CCFF, 0x336699], alphas, ratios, titleBarGradMatrix, spreadMethod);
			titleBar.graphics.drawRect(2, 152, 324, 56);
			titleBar.graphics.endFill();
			titleBar.alpha = .9;
			addChild(titleBar);
			
			// Create title text
			var title:ImageTitle = new ImageTitle("Image Title");
			addChild(title);
			title.x = 12;
			title.y = 156;
			
		}
	}
}
Advertisements

About this entry