You are on page 1of 6

ImageViewer.

as

Take -2

class
{

ImageViewer

// Movie clip references. private var container_mc:MovieClip; private var target_mc:MovieClip;

// Movie clip depths. private var containerDepth:Number; private static var imageDepth:Number = 0; private static var maskDepth:Number = 1; private static var borderDepth:Number = 2;

// Border style. private var borderThickness:Number; private var borderColor:Number;

// Constructor Public function ImageViewer (target:MovieClip, depth:Number, x:Number, y:Number, w:Number,

h:Number, borderThickness:Number, borderColor:Number) { // Assign property values. target_mc = target; containerDepth = depth; this.borderThickness = borderThickness; this.borderColor = borderColor;

// Set up the visual assets for this ImageViewer. buildViewer(x, y, w, h); }

// Creates the clips to hold the image, mask, and border. // This method subcontracts all its work out to individual // clip-creation methods. private function buildViewer (x:Number, y:Number, w:Number, h:Number):Void { createMainContainer(x, y); createImageClip();

createImageClipMask(w, h); createBorder(w, h); }

// Creates the container that holds all the assets. private function createMainContainer (x:Number, y:Number):Void { container_mc = target_mc.createEmptyMovieClip("container_mc" + containerDepth, containerDepth); // Position the container clip. container_mc._x = x; container_mc._y = y; }

// Creates the clip into which the image is actually loaded. private function createImageClip ():Void { container_mc.createEmptyMovieClip("image_mc", imageDepth); }

// Creates the mask over the image. private function createImageClipMask (w:Number, h:Number):Void

{ // Only create the mask if a valid width and height are specified. if (!(w > 0 && h > 0)) { return; }

// In the container, create a clip to act as the mask over the image. container_mc.createEmptyMovieClip("mask_mc", maskDepth);

// Draw a rectangle in the mask. container_mc.mask_mc.moveTo(0, 0); container_mc.mask_mc.beginFill(0x0000FF); // Use blue for debugging. container_mc.mask_mc.lineTo(w, 0); container_mc.mask_mc.lineTo(w, h); container_mc.mask_mc.lineTo(0, h); container_mc.mask_mc.lineTo(0, 0); container_mc.mask_mc.endFill();

// Hide the mask (it will still function as a mask when invisible). // To see the mask during debugging, comment out the next line. container_mc.mask_mc._visible = false;

// Notice that we don't apply the mask yet. We must do that // after the image starts loading, otherwise the loading of

// the image will remove the mask. }

// Creates the border around the image. private function createBorder (w:Number, h:Number):Void { // Only create the border if a valid width and height are specified. if (!(w > 0 && h > 0)) { return; }

// In the container, create a clip to hold the border around the image. container_mc.createEmptyMovieClip("border_mc", borderDepth);

// Draw a rectangular outline in the border clip, with the // specified dimensions and color. container_mc.border_mc.lineStyle(borderThickness, borderColor); container_mc.border_mc.moveTo(0, 0); container_mc.border_mc.lineTo(w, 0); container_mc.border_mc.lineTo(w, h); container_mc.border_mc.lineTo(0, h); container_mc.border_mc.lineTo(0, 0);

// Loads the image. public function loadImage (URL:String):Void { // Load the JPEG file into the image_mc clip. container_mc.image_mc.loadMovie(URL);

// Here comes an ugly hack. We'll clean this up // when we add proper preloading support, in "Take 3": // After one frame passes, the image load will have started, // at which point we safely apply the mask to the image_mc clip. container_mc.onEnterFrame = function ():Void { this.image_mc.setMask(this.mask_mc); delete this.onEnterFrame; } } }

You might also like