DesignProjectX

Title

Description

Body <p>The <code>LoadImage</code> class can be modified to accept a parameter for the image URL:</p> <pre> 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); } } }</pre> <p>An I<code>mageTitle</code> class creates a text field with a <code>title</code> parameter:</p> <pre> 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); } } }</pre> <p>The ImageView class creates a rounded corner rectangle, <code>ImageBorder</code>, that forms the border around a masked image. The image is loaded. Then, another rounded corner rectangle, <code>ImageMask</code>, 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, <code>titleBarShadow</code>, which is simply a black rectangle with an alpha transparency setting of 50%. The title bar, <code>titleBar</code>, 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, <code>ImageTitle</code>, is added.</p> <pre>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; } } } </pre>

Section Tutorials Contact Journal About Home

Category Applications Design History Ideas Technology

Tags

Date