Alex Rindo.com

I’m working with another flash developer (Alen Cvitkovic) to create an advanced and fully customizable image gallery.

You can find the latest project code at: http://code.google.com/p/flashview/

You can view the gallery at: http://alexrindo.com/gallery/

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:

An updated version of the starfield hack 33 in flash hacks. I rewrote the code to Actionscript 3.0. The swf file is only 986 bytes.

function mover(e:Event){
e.target.y += e.target.speed;
e.target.scaleY += 0.1;
e.target.speed++
if(e.target.y > 250){
e.target.y = 0
e.target.speed = Math.random()*10
e.target.scaleY = 1
}
}

function starField(x:Number,y:Number,n:Number){

for(var i:Number = 0; i < n; i++){
var star:MovieClip = new MovieClip()
var dot:MovieClip = new MovieClip()
star.addChild(dot)
star.rotation = Math.random() *360
star.x = x;
star.y = y;
dot.graphics.lineStyle(0,0xFFFFFF,100)
var offset:Number = Math.random()*10
dot.graphics.moveTo(0,10+offset)
dot.graphics.lineTo(0,15+offset)
dot.speed = Math.random()*35
dot.addEventListener(Event.ENTER_FRAME,mover)
addChild(star)
}
}

starField(200,200,520);

FLCL

FLCL stand for FLIctonic KLIpple Waver Syndrome. An adolescent psychological skin hardening syndrome. A common affliction where children grow horns from trying too hard. FLCL is just one of those things you have to experience. The single coolest anime ever created by human beings.

Sayonara Zetsubou Sensei

The mutant offspring of Seinfeld and an Ingermar Bergman movie, SZS is about a chronically depressed teacher that constantly tries to attempt suicide. The class he teaches consists of an assortment of girls with various personality disorders. There’s no plot whatsoever, the shows premise consists mainly of taking a japanese phrase or idiom and applying it , often to the extreme, to real life situations.

Cowboy Bebop

The best , and probably only, space musical. It’s very hard to place it in a genre because every episode differs greatly from the last. The soundtrack is awesome and and the entire series has a very retro 70s feel to it. It’s almost impossible not to like this series.

Darker than Black

If Heroes was an anime, it would probably be a lot like Darker Than Black. More mature than most other anime, it has an incredibly intricate plot line that can be hard to follow. The art is smoother than I’ve seen in almost any other anime.

Neon Genesis Evangelion

Truly epic. A brutal psychological drama with a multitude of Christian references, but at its heart a powerful human story.  It unravels a bit at the end due to budget constraints, but it’s still the best mecha-anime ever made.

NHK ni youkoso

A story about a recluse, an akiba-ke game developer, a girl with some sort of god complex and a huge goverment conspiracy to turn people into NEETs and hikikomoris.

Azumanga Daioh

It has absolutely no real plot, but that’s what makes it so awesome. This is japanese gag-comedy at it’s finest. The characters are also incredibly awesome, just the warped genius of Osaka makes this worth watching.

Death Note

Death Note is one the most unique and mind-blowing anime in recent history. The anti-hero protagonist is given the note book of a death god and the power to eliminate anyone by just writing down their name. It develops into a intricate cat and mouse game with more plot twists that you can shake a stick at.

Haruhi

Probably the anime with the most devoted fan base ever (with the possible exception of lucky star). On the surface it may seem like an ordinary anime but the show goes a lost deeper than you’d expect. It’s a sci-fi high school comedy that only barely scratched the surface of the plot in its first season.

Abenobashi

This show makes FLCL seem coherent. It’s incredibly fast paced and the art style is hectic at best and crude at its worst but it’s still very entertaining and has an awesome seeiyu cast.

Sources:

http://tech.yahoo.com/blogs/null/106116

http://findarticles.com/p/articles/mi_hb6675/is_/ai_n26452913

http://www.edge-online.com/news/activision-sues-alleged-cod-pirate

http://en.wikipedia.org/wiki/Norway

I had no idea this would get that many diggs… I was planning on just asking about manbearpig like everyone else..

Barack Obama: 353

John Mccain: 185

I’ll update this page soon.