Alex Rindo.com

This is an updated version of the original from the flash math creativity book. It was originally done by Keith Peters (http://www.bit-101.com). I’ve divided it into three separate classes to make it more expandable. Email me if you want the original source.

Main.as (Document Class)

package
{
import flash.display.MovieClip;
import flash.display.Shape;
import flash.events.Event;
import flash.geom.Point;

public class Main extends MovieClip
{
private var skeetQuantity:int = 10
private var foodStartingPoint:Point = new Point(280,210)
private var food:Food;

public function Main()
{
addTheFood()
createNewSkeets()
}

private function addTheFood()
{
food = new Food()
food.x = foodStartingPoint.x
food.y = foodStartingPoint.y
}

private function createNewSkeets()
{
for (var i:int = 0; i < skeetQuantity; i++)
{
var skeet:Skeet = new Skeet(food)
skeet.x = Math.random()*500+20;
skeet.y = Math.random()*360+20;
skeet.startEating()
addChild(skeet)
}
addChild(food)
}
}
}

Skeet.as

package
{
import flash.display.Shape;
import flash.events.Event;
import flash.geom.Point;

public class Skeet extends Shape
{
private var capacity:int = 10
private var speed:int = 10
private var ate:Number = 0
private var full:Boolean = true

private var angle:Number;
private var xDistance:Number;
private var yDistance:Number;
private var restingPosition:Point = new Point(0, 0)

private var food:Shape

public function Skeet(_food:Shape)
{
food = _food
drawSkeet()
}

private function drawSkeet()
{
graphics.lineStyle(1,0xFFFFFF,1)
graphics.lineTo(0, 6)
graphics.drawEllipse( -3, 6, 6, 9);
}

public function startEating()
{
addEventListener(Event.ENTER_FRAME, eat)
}

private function eat(e:Event)
{
if (full == true)
{
xDistance = restingPosition.x - this.x;
yDistance = restingPosition.y - this.y;
ate -= .2;

if (ate < 1)
{
full = false;
}
}
else
{
xDistance = food.x - this.x;
yDistance = food.y - this.y;
}

angle = Math.atan2(yDistance, xDistance);
this.rotation = angle * 180 / Math.PI + 90;

//trace("food and skeet hit " + "full " + full)

if (food.hitTestPoint(this.x, this.y, true) && !full)
{
food.scaleX -= .005;
food.scaleY -= .005;

food.x += xDistance / 30;
food.y += yDistance / 30;

ate++;

if (ate > capacity)
{
full = true;
restingPosition.x = Math.random() * 200 - 100 + this.x;
restingPosition.y = Math.random() * 200 - 100 + this.y;
}
}
else
{
this.x += this.xDistance / speed;
this.y += this.yDistance / speed;
}

this.scaleX = 0.4 + ((ate * 10) / 100);
}
}
}

Food.as

package
{
import flash.display.Shape;
import flash.events.Event;
import flash.geom.Point;

public class Food extends Shape
{
private var yTarget:Number = 210

public function Food()
{
drawFood()
addListeners()
}

private function drawFood()
{
graphics.beginFill(0×000,1)
graphics.lineStyle(2,0xFFFFFF,1)
graphics.drawCircle(0, 0, 35)
graphics.endFill()
}

private function addListeners()
{
addEventListener(Event.ENTER_FRAME, checkFoodQuantity)
}

private function checkFoodQuantity(e:Event)
{
if (this.scaleX < 0.1)
{
this.scaleX = this.scaleY = 1;
this.x = Math.random() * 500 + 20;
this.y = 400;
yTarget = Math.random() * 300;
}

this.y += (yTarget - this.y) / 10;
}
}
}

}

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: