Rafe Kemmis

This is my dog Boskydell. Click on a thumbnail to see it in all its full-sized glory. Drag the thumbnails to the left to view more.

How It Works

This flash movie is written completely in Action Script v3. The picture filenames and picture descriptions are read from an external XML file. After the pictures are loaded,  various tween effects are applied to them in order to achieve the bounce easing and the alpha fading.

The Action Script

import fl.transitions.Tween;
import fl.transitions.easing.*;

var imageLoader:Loader = new Loader();
var imageXml:XML;
var imageXmlList:XMLList;
var imageAlphaTween:Tween;
var imageEaseTween:Tween;

// create and position description text field
var description:TextField = new TextField();
description.x = 25;
description.y = 510;
description.autoSize = TextFieldAutoSize.LEFT;
addChild(description);
var descriptionFormat:TextFormat = new TextFormat();
descriptionFormat.color = 0xFFCC00;
descriptionFormat.size = 24;
descriptionFormat.align = "center";
var font:ArialRoundedMTBold = new ArialRoundedMTBold();
descriptionFormat.font = font.fontName;
description.embedFonts = true;

// create and position container to hold thumbnails
var thumbContainer:MovieClip = new MovieClip();
addChild(thumbContainer);
thumbContainer.x = 25;
thumbContainer.y = 25;
var nextX:Number = 0;
thumbContainer.buttonMode = true;
thumbContainer.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);
thumbContainer.addEventListener(MouseEvent.MOUSE_UP, stopScroll);
// load list of images
var xmlLoader:URLLoader = new URLLoader(new URLRequest("images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, imgListLoaded);

function imgListLoaded(event:Event):void
{
        // cast to XML
        imageXml = XML(event.target.data);
        // get child "image" nodes
        imageXmlList = imageXml.children();
        
        for(var i:Number = 0; i < imageXmlList.length(); i++)
        {
                imageLoader = new Loader();
                imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
                imageLoader.load(new URLRequest(imageXmlList[i].attribute("thumb")));
                thumbContainer.addChild(imageLoader);
                imageLoader.x = nextX;
                nextX += 160;
                imageLoader.name = imageXmlList[i].attribute("source");
                imageLoader.addEventListener(MouseEvent.CLICK, onImgClick);
        }
}

function onImgClick(event:MouseEvent):void
{
        imageLoader = new Loader();
        imageLoader.load(new URLRequest(event.target.name));
        imageLoader.x = 25;
        imageLoader.y = 150;
        imageLoader.scaleX = 0.75;
        imageLoader.scaleY = 0.75;
        addChild(imageLoader);
        
        // set description text
        for(var j:Number = 0; j < imageXmlList.length(); j++)
        {
                if(imageXmlList[j].attribute("source") == event.target.name)
                {
                        description.text = imageXmlList[j];
                        description.setTextFormat(descriptionFormat);
                }
        }
        
        // add tween
        imageAlphaTween = new Tween(imageLoader, "alpha", None.easeNone, 0, 1, 1, true);
        
}

function startScroll(event:MouseEvent):void
{
        
        thumbContainer.removeEventListener(MouseEvent.MOUSE_OUT, repoContainer);
        var rect:Rectangle = new Rectangle(-thumbContainer.width,25,thumbContainer.width*2 + stage.stageWidth);
        thumbContainer.startDrag(false,rect);
}

function stopScroll(event:MouseEvent):void
{
        stopDrag();
        thumbContainer.addEventListener(MouseEvent.MOUSE_OUT, repoContainer);
}

function repoContainer(event:MouseEvent):void
{
        if(event.stageY < 25 || event.stageY > 125 || event.stageX < thumbContainer.x || event.stageX > thumbContainer.x + thumbContainer.width)
        {
                thumbContainer.removeEventListener(MouseEvent.MOUSE_OUT, repoContainer);
                var repoTween:Tween = new Tween(thumbContainer, "x", Elastic.easeOut, thumbContainer.x, 25, 2, true);
        }
}

function imageLoaded(event:Event):void
{
        // tween on load
        var tempAlphaTween:Tween = new Tween(event.target.loader, "alpha", None.easeNone, 0, 1, 2, true);
        var tempEaseTween:Tween = new Tween(event.target.loader, "y", Elastic.easeOut, -125, 0, 2, true);
}

©2007 Rafe Kemmis