Alex Rindo.com

This tutorial covers creating a standard Image viewer with a custom context menu that gives you the option to save the image and open it in another tab. It also includes ability to use the arrow keys to navigate the image gallery.

First create a new .fla file and resize the stage to 500×350 and make the background color black. I use this size to make sure it fits in my wordpress theme, but the code works regardless of the size of the stage. The .fla file should be published to Actionscript 3.0 and flash player 9 or higher.

Draw two arrow icons and convert them into movieclips, make sure that the registration point is at the center of the arrow. Leave them anywhere on the stage, we’ll position them later with actionscript. Name the arrows prev and next.

Create a new textfield and give it an instance name of percent_txt, embedd numerals and punctuation. Draw a white rectangle thats 100*22, convert it into a movieclip and give it an instance name of progressbar. Select both the the textfield and the rectangle and make them into a new movieclip with an instance name of preloader.

To keep it simple I’ve named my images from 1 to 5 and saved them all as .jpg files in subdirectories in my images folder. I pass the name of the subdirectory to the .swf file via flashvars. I use Kimli flash embedd so the embedd code becomes: [ kml_flashembed movie="/wp-content/uploads/image_viewer.swf?gallery_id=cow" height="350" width="500" / ]

The line of code you should watch is “http://yourdomain.com/images/”+gal_id+”/”+pic_nr+”.jpg” Where gal_id is the variable that gets passed from the flashvars and pic_nr is the current image number. If you want the original source files just send me an email at alexrindo@gmail.com

The code:

//imports

import flash.display.*;
import flash.net.URLRequest;
import flash.net.FileReference;
import flash.net.FileFilter;

//

//glowfilter varibles

var color:Number=0xFFFFFF;
var blurX:Number=15;
var blurY:Number=15;
var strength:Number=1.9;
var quality:Number=BitmapFilterQuality.HIGH;
var glow1=new GlowFilter(color,0.8,blurX,blurY,strength,quality);

//

var gal_id=”";
var fi:FileReference = new FileReference();

//Flashvar

function loaderComplete(myEvent:Event) {
var flashVars=this.loaderInfo.parameters;

if (flashVars.gallery_id!=undefined) {
gal_id=flashVars.gallery_id;
}

var url:String= “http://yourdomain.com/images/”+gal_id+”/” + pic_nr+”.jpg”;
var urlReq:URLRequest=new URLRequest(url);
ldr.contentLoaderInfo.addEventListener(Event.INIT, completed);
ldr.load(urlReq);
}

this.loaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

//

var pic_nr = 1;
var pic_number:uint = 5;
var ldr:Loader = new Loader();
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);

function completed(e:Event):void {
ldr.x=stage.stageWidth/2-ldr.content.width/2;
ldr.y=stage.stageHeight/2-ldr.content.height/2;
prev.x = (stage.stageWidth - (stage.stageWidth/2+ldr.content.width/2))/2;
next.x = ldr.content.width + ((stage.stageWidth-ldr.content.width)*3/4);
prev.y = next.y = stage.stageHeight/2
preloader.x = (stage.width - (prev.x + (stage.width - next.x)))/2 + prev.x
addChild(ldr);
ldr.filters=[glow1];
}

prev.addEventListener(MouseEvent.CLICK, prev_image);
next.addEventListener(MouseEvent.CLICK, next_image);

function next_image(e:MouseEvent) {

if (pic_nr<pic_number) {
pic_nr++;
var url=”http://yourdomain.com/images/”+gal_id+”/”+pic_nr+”.jpg”;
var urlReq:URLRequest=new URLRequest(url);
ldr.load(urlReq);
}
}

function prev_image(e:MouseEvent) {

if (pic_nr>1) {
pic_nr–;
var url=”http://yourdomain.com/images/”+gal_id+”/”+pic_nr+”.jpg”;
var urlReq:URLRequest=new URLRequest(url);
ldr.load(urlReq);
}
}

stage.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown);

function reportKeyDown(event:KeyboardEvent):void {

var url:String;
var urlReq:URLRequest;

if (event.keyCode == Keyboard.RIGHT) {
if (pic_nr<pic_number) {
pic_nr++;
url=”http://yourdomain.com/images/”+gal_id+”/”+pic_nr+”.jpg”;
urlReq = new URLRequest(url);
ldr.load(urlReq);
}
}

if (event.keyCode == Keyboard.LEFT) {
if (pic_nr>1) {
pic_nr–;
url=”http://yourdomain.com/images/”+gal_id+”/”+pic_nr+”.jpg”;
urlReq = new URLRequest(url);
ldr.load(urlReq);
}
}
}

var cm = new ContextMenu();
cm.hideBuiltInItems();
var save_image_as:ContextMenuItem = new ContextMenuItem(”Save Image As…”);
var show_image:ContextMenuItem = new ContextMenuItem(”Show Image”);
save_image_as.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, save);
show_image.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, showImage);
cm.customItems.push(save_image_as);
cm.customItems.push(show_image);
this.contextMenu = cm;

function save(evt:ContextMenuEvent):void {
var file=”http://yourdomain.com/images/”+gal_id+”/”+pic_nr+”.jpg”
var filereq:URLRequest=new URLRequest(file);
fi.addEventListener(Event.COMPLETE, completeHandler);
fi.addEventListener(ProgressEvent.PROGRESS, progressHandler);
fi.download(filereq,gal_id + pic_nr + “.jpg”);
}

function showImage(e:ContextMenuEvent):void {
var file=”http://yourdomain.com/images/”+gal_id+”/”+pic_nr+”.jpg”
var filereq:URLRequest=new URLRequest(file);
navigateToURL(filereq)

}

function progressHandler(event:ProgressEvent):void {
ldr.visible = false
var percent:Number = Math.round((event.bytesLoaded/event.bytesTotal)*100)
if(percent != 0){
preloader.visible = true
preloader.progressbar.width = percent
preloader.percent_txt.text = percent + “  % “
}
}

function completeHandler(event:Event):void {
preloader.visible = false
ldr.visible = true
preloader.progressbar.width = 0
preloader.percent_txt.text = 0 + “  % “
}

The final result: