/**
* ImageViewer, Version 3.
* An on-screen rectangular region for displaying a loaded image.
* Updates at:
http://www.moock.org/eas2/examples/. *
* @author: Colin Moock
* @version: 2.0.0
*/
class ImageViewer {
// The movie clip that will contain the all ImageViewer assets.
private var container_mc:MovieClip;
// The movie clip to which the container_mc will be attached.
private var target_mc:MovieClip;
// Depths for visual assets.
private var containerDepth:Number;
private static var imageDepth:Number = 0;
private static var maskDepth:Number = 1;
private static var borderDepth:Number = 2;
private static var statusDepth:Number = 3;
// The thickness of the border around the image.
private var borderThickness:Number;
// The color of the border around the image.
private var borderColor:Number;
// The MovieClipLoader instance used to load the image.
private var imageLoader:MovieClipLoader;
/**
* ImageViewer Constructor
*
* @param target The movie clip to which the
* ImageViewer will be attached.
* @param depth The depth in target on which to
* attach the viewer.
* @param x The horizonatal position of the viewer.
* @param y The vertical position of the viewer.
* @param w The width of the viewer, in pixels.
* @param h The height of the viewer, in pixels.
* @param borderThickness The thickness of the border around the image.
* @param borderColor The color of the border around the image.
*
*/
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;
imageLoader = new MovieClipLoader();
// Register this instance to receive events
// from the imageLoader instance.
imageLoader.addListener(this);
// Set up the visual assets for this ImageViewer.
buildViewer(x, y, w, h);
}
/**
* Creates the onscreen assets for this ImageViewer.
* The movie clip hierarchy is:
* [d]: container_mc
* 2: border_mc
* 1: mask_mc (masks image_mc)
* 0: image_mc
* where [d] is the user-supplied depth passed to the constructor.
*
* @param x The horizonatal position of the viewer.
* @param y The vertical position of the viewer.
* @param w The width of the viewer, in pixels.
* @param h The height of the viewer, in pixels.
*/
private function buildViewer (x:Number,
y:Number,
w:Number,
h:Number):Void {
// Create the clips to hold the image, mask, and border.
createMainContainer(x, y);
createImageClip();
createImageClipMask(w, h);
createBorder(w, h);
}
/**
* Creates a movie clip, container_mc, to contain
* the ImageViewer visual assests.
*
* @param x The horizonatal position of the
* container_mc movie clip.
* @param y The vertical position of the
* container_mc movie clip.
*/
private function createMainContainer (x:Number, y:Number):Void {
container_mc = target_mc.createEmptyMovieClip("container_mc" + containerDepth, containerDepth);
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. Note that this method does
* not actually apply the mask to the image clip because a clip's
* mask is lost when new content is loaded into it. Hence, the mask
* is applied from onLoadInit().
*
* @param w The width of the mask, in pixels.
* @param h The height of the mask, in pixels.
*/
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).
container_mc.mask_mc._visible = false;
}
/**
* Creates the border around the image.
*
* @param w The width of the border, in pixels.
* @param h The height of the border, in pixels.
*/
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 a .jpeg file into the image viewer.
*
* @param URL The local or remote address of the image to load.
*/
public function loadImage (URL:String):Void {
imageLoader.loadClip(URL, container_mc.image_mc);
// Create a load-status text field to show the user load progress.
container_mc.createTextField("loadStatus_txt", statusDepth, 0, 0, 0, 0);
container_mc.loadStatus_txt.background = true;
container_mc.loadStatus_txt.border = true;
container_mc.loadStatus_txt.setNewTextFormat(new TextFormat(
"Arial, Helvetica, _sans",
10, borderColor, false,
false, false, null, null,
"right"));
container_mc.loadStatus_txt.autoSize = "left";
// Position the load-status text field
container_mc.loadStatus_txt._y = 3;
container_mc.loadStatus_txt._x = 3;
// Indicate that the image is loading.
container_mc.loadStatus_txt.text = "LOADING";
}
/**
* MovieClipLoader handler. Triggered by imageLoader when data arrives.
*
* @param target A reference to the movie clip for which
* progress is being reported.
* @param bytesLoaded The number of bytes of target
* that have loaded so far.
* @param bytesTotal The total size of target, in bytes.
*/
public function onLoadProgress (target:MovieClip,
bytesLoaded:Number,
bytesTotal:Number):Void {
container_mc.loadStatus_txt.text = "LOADING: "
+ Math.floor(bytesLoaded / 1024)
+ "/" + Math.floor(bytesTotal / 1024) + " KB";
}
/**
* MovieClipLoader handler. Triggered by imageLoader when loading is done.
*
* @param target A reference to the movie clip for which
* loading has finished.
*/
public function onLoadInit (target:MovieClip):Void {
// Remove the loading message.
container_mc.loadStatus_txt.removeTextField();
// Apply the mask to the loaded image.
container_mc.image_mc.setMask(container_mc.mask_mc);
}
/**
* MovieClipLoader handler. Triggered by imageLoader when loading fails.
*
*
* @param target A reference to the movie clip for which
* loading failed.
* @param errorCode A string stating the cause of the load failure.
*/
public function onLoadError (target:MovieClip, errorCode:String):Void {
if (errorCode == "URLNotFound") {
container_mc.loadStatus_txt.text = "ERROR: File not found.";
} else if (errorCode == "LoadNeverCompleted") {
container_mc.loadStatus_txt.text = "ERROR: Load failed.";
} else {
// Catch-all to handle possible future errorCodes.
container_mc.loadStatus_txt.text = "Load error: " + errorCode;
}
}
/**
* Must be called before the ImageViewer instance is deleted.
* Gives the instance a chance to destroy any resources it has created.
*/
public function destroy ():Void {
// Cancel load event notifications.
imageLoader.removeListener(this);
// Remove movie clips from Stage.
container_mc.removeMovieClip();
}
}
