Must be a better way...

Question

Hello Flash Community!
Thanks in advance for any help/advice.
So, what I'm looking for here is some high level advice as far as a better way to do things. I feel like so often with programming I'm just breaking my neck to get things working when I know there is a better way (presumably based in OOP) to go about things. I just need someone to look at what I've done and point it out to me.
So, here's what I've done so far: http://www.catherinemix.com
And it works pretty well as far as I'm concerned! The app dynamically loads as many images as my client (my mom ) puts on the server, resizes them dynamically, adds L/R arrow buttons dynamically based on how many images are involved, etc... But the downside to all that dynamic flexibility is that I haven't found a way to load the thumbnail images (and their respective full size images) one by one. Instead, I have to load them all together and keeping the user waiting that long is unacceptable to my mom. What I would love is for each thumbnail/full size combo to get its own preloader bar in the location it will eventually be embedded, but I haven't found a way to do that and account for an unknown number of images (as it is determined dynamically.)
Any ideas here? I would specifically like to know which functions y'all use when you need to load multiple files simultaenously (AttachMovie?)
I have posted the kluge-y code which handles all of the image gallery functions below.
Thanks! and Be Well
Graham
import fl.transitions.Tween;
import fl.transitions.easing.*;
var wait:PleaseWait = new PleaseWait();
wait.x = 400;
wait.y = 50;
addChild(wait);
var waitFadeIn:Tween = new Tween(wait, "alpha", Regular.easeOut, 0, 1, 1, true);
var titleText:TextField;
var textSprite:Sprite;
//thumbH is the ideal height for our thumbnails, and thumbW the ideal width
var thumbH = 120;
var thumbW = 170;
//loadH is the ideal height for our fullsize images, and loadW the ideal width
var loadH = 500;
var loadW = 600;
//some counter numbers
var thumbNum = 1;
var loadNum = 1;
//some Sprites which need to be accessed by more than one function
var darkStage:Sprite;
var loadSprite:Sprite;
//Let's instantiate some Arrays that we can load the images into.
//Since Arrays of Loaders can't be copied, we have to go through the process twice.
var thumbArray:Array = new Array();
var loadArray:Array = new Array();
firstLoad();
firstThumb();
function firstLoad():void {
    trace("firstLoad");
    var loadski = new Loader();
    loadski.load(new URLRequest("images/fulls/0.png"));
    loadski.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
    loadArray.push(loadski);
//Starting with the above Loader, this function will execute every time the Loader completes
function loadComplete(e:Event):void {
    trace("loadComplete");
    var loadski = new Loader();
    loadski.load(new URLRequest("images/fulls/" + loadNum + ".png"));
    loadArray.push(loadski);
    loadski.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
    loadski.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadError);
    loadNum++;
//Once the Loader goes too far by attempting to load an image that doesn't exist on the computer,
//it will thorw an IOError Event at which point the following function will execute.
function loadError(e:IOErrorEvent):void {
    trace("loadError");
    loadArray.pop();
    loadNum = 0;
    loadResize();
    //We use the pop function to remove the most recently added Loader instance, since we know it
    //contains a null reference (beacuse the IOError Event is asynchronous.)
    thumbArray.pop();
    //We reset the counter variable.
    thumbNum = 0;
    //Add the little arrows that allow the user to click to see more thumbnails (if there are more
    //than 8 images on the server.)
    removeChild(wait);
    addArrows();
    //Let's resize the images to thumbnail size and add them to the display list.
    thumbResize();
    addClickOnThumb();
function loadResize():void {
    trace("loadResize");
    for (var ex = 0; ex < loadArray.length; ex++) {
        //If the width of the image is greater than the ideal width, OR the height is greater than the ideal height...
        if ( loadArray[loadNum].content.width > loadW || loadArray[loadNum].content.height > loadH) {
            //And if the width of the image is greater than the height, apply Scaler 1...
            if ( loadArray[loadNum].content.width > loadArray[loadNum].content.height ) {
                //Scaler 1 is the ratio of the ideal width to the image width
                var scaler1 = loadW / loadArray[loadNum].content.width;
                trace(loadNum + " load scaler 1: " + scaler1);
                //Apply Scaler 1 to both the width and height of the image
                loadArray[loadNum].content.scaleX = loadArray[loadNum].content.scaleY = scaler1;
                //Otherwise, apply Scaler 2
            } else {
                //Scaler 2 is the ratio of the ideal width to the image height
                var scaler2 = loadH / loadArray[loadNum].content.height;
                trace(loadNum + " load scaler 2: " + scaler2);
                //Apply Scaler 2 to both the width and height of the image
                loadArray[loadNum].content.scaleX = loadArray[loadNum].content.scaleY = scaler2;
                trace("loadArray[loadNum].content.height = " + loadArray[loadNum].content.height);
                trace("loadArray[loadNum].content.width = " + loadArray[loadNum].content.width);
            //Otherwise... (that is, the image width and height are in both cases less than the ideal)
        } else {
            //And if the width of the image is greater than the heigh, apply Scaler 3
            if ( loadArray[loadNum].content.width > loadArray[loadNum].content.height ) {
                //Scaler 3 is the ratio of the ideal width to the image width
                var scaler3 = loadW / loadArray[loadNum].content.width;
                trace(loadNum + " load scaler 3: " + scaler3);
                //Apply Scaler 3 to both the width and height of the image
                loadArray[loadNum].content.scaleX = loadArray[loadNum].content.scaleY = scaler3;
            } else {
                //Scaler 4 is the ratio of the ideal width to the image height
                var scaler4 = loadH / loadArray[loadNum].content.height;
                trace(loadNum + " load scaler 4: " + scaler4);
                //Apply Scaler 4 to both the width and height of the image
                loadArray[loadNum].content.scaleX = loadArray[loadNum].content.scaleY = scaler4;
        loadArray[loadNum].content.x = - (loadArray[loadNum].content.width / 2);
        loadArray[loadNum].content.y = - (loadArray[loadNum].content.height / 2);
        loadNum++;
function firstThumb():void {
    trace("firstThumb");
    //Let's populate the first Array with Loaders that load the images Mom has put on the server.
    //We have to do this first Loader object by hand to get the Event.COMPLETE-based-loop going.
    var thumbski = new Loader();
    thumbski.load(new URLRequest("images/thumbs/0.png"));
    thumbski.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbComplete);
    //We add the MouseEvent.CLICK listener to the actual Loader instance so that, later on, in the
    //function enLarge, we can make use of the currentTarget parameter to correlate the Array index of
    //the thumbnail that the user is clicking on with that of the loadArray.
    thumbski.addEventListener(MouseEvent.CLICK, enLarge);
    thumbArray.push(thumbski);
//Starting with the above Loader, this function will execute every time the Loader completes
function thumbComplete(event:Event):void {
    trace("thumbComplete");
    var thumbski = new Loader();
    thumbski.load(new URLRequest("images/thumbs/" + thumbNum + ".png"));
    thumbski.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbComplete);
    //We add the IOErrorEvent listener so that as soon as this error is thrown, we will exit this loop
    //and proceed to the next logical step in the program can be taken.
    thumbski.addEventListener(MouseEvent.CLICK, enLarge);
    thumbArray.push(thumbski);
    thumbNum++;
function addArrows():void {
    //Let's determine how many batches there are. A batch is the minimum amount of thumbnail images
    //mom wants to show up onscreen at a time. In this case, she has decided on 8.
    var batches =  Math.ceil(thumbArray.length / 8);
    //The variable m is part of a kluge fix related to the calculation of startX (explained below.)
    var m = 0;
    //Pseudocode for this loop: If there are at least two batches, then...
    //We do this because less than 2 batches doesn't warrant arrows
    if (batches > 1) {
        for (var k = 1; k < batches; k++) {
            //triW is the desired width of our arrows
            var triW = 20;
            //startX is the x position of the start of our rightward facing triangle(s)
            //The formula says: Our x starting position should be a triangle width shy of the
            //far edge of the stage (multiplying it by k ensures it happens as many times
            //as there are batches, which is why we intialize k = 1.) Every subsequent iteration
            //of the formula has to add a triangle's width worth of distance, except for the
            //very first one, which is why it is multiplied by m, which is initially set to 0.
            var startX = (((stage.stageWidth - triW) * k) + (triW * m));
            //We want the arrows to sit perfectly between the two rows of thumbnails. Since the
            //max height of every thumbnail is thumbW, that would seem to be the natural choice
            //for the starting y position of the arrows. But, we actually have to use thumbW/2
            //because the thumbnails have already been offset by half of thumbW due to being
            //aligned vertically with each other.
            var startY = (thumbW / 2);
            //This is the rightward facing triangle
            var tri:Sprite = new Sprite();
            tri.graphics.beginFill(0xFFFFFF);
            tri.graphics.moveTo(startX, startY);
            tri.graphics.lineTo(startX, (startY + triW));
            tri.graphics.lineTo((startX + triW), (startY + (triW/2)));
            tri.graphics.lineTo(startX, startY);
            tri.graphics.endFill();
            tri.buttonMode = true;
            tri.useHandCursor = true;
            tri.addEventListener(MouseEvent.CLICK, moveLeft);
            addChild(tri);
            //This is the leftward facing triangle
            var tri2:Sprite = new Sprite();
            var startX2 = (startX + (triW * 2));
            tri2.graphics.beginFill(0xFFFFFF);
            tri2.graphics.moveTo(startX2, startY);
            tri2.graphics.lineTo(startX2, (startY + triW));
            tri2.graphics.lineTo((startX2 - triW), (startY + (triW / 2)));
            tri2.graphics.lineTo(startX2, startY);
            tri2.graphics.endFill();
            tri2.buttonMode = true;
            tri2.useHandCursor = true;
            tri2.addEventListener(MouseEvent.CLICK, moveRight);
            addChild(tri2);
            //Increase m (see above)
            m++;
//This function moves the entire Gallery MovieClip to the left 800 pixels.
function moveLeft(event:MouseEvent):void {
    var leftTween:Tween = new Tween(this, "x", Regular.easeOut, this.x, (this.x - 800), .5, true);
//This function moves the entire Gallery MovieClip to the right 800 pixels.
function moveRight(event:MouseEvent):void {
    var rightTween:Tween = new Tween(this, "x", Regular.easeOut, this.x, (this.x + 800), .5, true);
//This function resizes the loaded images to the desired thumbnail dimensions and adds them
//to the display list.
function thumbResize():void {
    //The highest level of organization of thumbnails is the batch. There are only as many batches
    //as the length of the thumbArray divided by 8 (the max amount of thumbnails in a batch, as determined
    //by mom.)
    for (var batch = 0; batch < Math.ceil(thumbArray.length / 8); batch++) {
        trace("batch " + batch);
        //This Sprite serves as the container that we use to position entire batches
        var batchSprite: Sprite = new Sprite();
        //The logic behind setting the x position of the batchSprite to 800 x batch should be self-evident --
        //we want each new batch to be 800 pixels to the right of the former one -- but the addition of (thumbW
        //divided by 1.5) is a kluge fix for how much space to give the batches on left margin.
        batchSprite.x = (thumbW / 1.5) + (batch * 800);
        addChild(batchSprite);
        //The second highest level of organization for our thumbnails is the row. Our grid of thumbnails is
        //two rows deep.
        for (var row = 0; row < 2; row++) {
            trace("     row " + row);
            //The third highest level of organization for our thumbnails is the column. Our grid of thumbnails is
            //four columns deep.
            for (var col = 0; col < 4; col++) {
                trace("          col " + col);
                trace("               thumb " + thumbNum);
                if (thumbNum < thumbArray.length) {
                    //The following is the logic structure for handling the resizing of images. The goal was to develop
                    //a system robust enough to allow my mom to put whatever size images she wanted on the server and the
                    //app would use them. The logic is explained at each step...
                    //If the width of the image is greater than the ideal width, OR the height is greater than the ideal height...
                    if ( thumbArray[thumbNum].content.width > thumbW || thumbArray[thumbNum].content.height > thumbH) {
                        //And if the width of the image is greater than the height, apply Scaler 1...
                        if ( thumbArray[thumbNum].content.width > thumbArray[thumbNum].content.height ) {
                            //Scaler 1 is the ratio of the ideal width to the image width
                            var scaler1 = thumbW / thumbArray[thumbNum].content.width;
                            trace("               scaler1 = " + scaler1);
                            //Apply Scaler 1 to both the width and height of the image
                            thumbArray[thumbNum].content.scaleX = thumbArray[thumbNum].content.scaleY = scaler1;
                            trace("               image width:" + thumbArray[thumbNum].content.width);
                            trace("               image height:" + thumbArray[thumbNum].content.height);
                            //Otherwise, apply Scaler 2
                        } else {
                            //Scaler 2 is the ratio of the ideal width to the image height
                            var scaler2 = thumbW / thumbArray[thumbNum].content.height;
                            trace("               scaler2 = " + scaler2);
                            //Apply Scaler 2 to both the width and height of the image
                            thumbArray[thumbNum].content.scaleX = thumbArray[thumbNum].content.scaleY = scaler2;
                            trace("               image width:" + thumbArray[thumbNum].content.width);
                            trace("               image height:" + thumbArray[thumbNum].content.height);
                        //Otherwise... (that is, the image width and height are in both cases less than the ideal)
                    } else {
                        //And if the width of the image is greater than the heigh, apply Scaler 3
                        if ( thumbArray[thumbNum].content.width > thumbArray[thumbNum].content.height ) {
                            //Scaler 3 is the ratio of the ideal width to the image width
                            var scaler3 = thumbW / thumbArray[thumbNum].content.width;
                            trace("               scaler3 = " + scaler3);
                            //Apply Scaler 3 to both the width and height of the image
                            thumbArray[thumbNum].content.scaleX = thumbArray[thumbNum].content.scaleY = scaler3;
                            trace("               image width:" + thumbArray[thumbNum].content.width);
                            trace("               image height:" + thumbArray[thumbNum].content.height);
                        } else {
                            //Scaler 4 is the ratio of the ideal width to the image height
                            var scaler4 = thumbW / thumbArray[thumbNum].content.height;
                            trace("               scaler4 = " + scaler4);
                            //Apply Scaler 4 to both the width and height of the image
                            thumbArray[thumbNum].content.scaleX = thumbArray[thumbNum].content.scaleY = scaler4;
                            trace("               image width:" + thumbArray[thumbNum].content.width);
                            trace("               image height:" + thumbArray[thumbNum].content.height);
                    //Here is where we center the images vertically...
                    thumbArray[thumbNum].content.x = - (thumbArray[thumbNum].content.width / 2);
                    //Here is where we center the images horizontally...
                    thumbArray[thumbNum].content.y = - (thumbArray[thumbNum].content.height / 2);
                    //Before placing them in their own container Sprite, so that their relative positions can be
                    //determined accurately (a task that would've been otherwise impossible after the
                    //adjustments to position made above.)
                    var thumby = new MovieClip();
                    thumby.addChild(thumbArray[thumbNum]);
                    //thumbW being the max possible length or width of any one thumbnail (this was done for visual
                    //consistency and codified in the logic tree above), placing two thumbnails thumbW
                    //apart (measuring from center point in either case) will put them edge to edge at best. This is why
                    //we add (thumbW / 8) as additional spacing.
                    thumby.y = (row * (thumbW + (thumbW / 8)));
                    thumby.x = (col * (thumbW + (thumbW / 8)));
                    thumby.buttonMode = true;
                    thumby.useHandCursor = true;
                    var fA:Array = new Array();
                    var dS:DropShadowFilter = new DropShadowFilter(5, 45, 0x000000, 0.33, 5, 5, 1, 1);
                    fA.push(dS);
                    thumby.filters = fA;
                    trace("thumby.width = " + thumby.width);
                    trace("thumby.height = " + thumby.height);
                    batchSprite.addChild(thumby);
                    thumbNum++;
function enLarge(event:MouseEvent):void {
    var indexNum:Number = new Number();
    indexNum = thumbArray.indexOf(event.currentTarget);
    trace("indexNum = " + indexNum);
    darkStage = new Sprite();
    darkStage.graphics.beginFill(0x333333, .9);
    darkStage.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
    darkStage.addEventListener(MouseEvent.CLICK, reMove);
    darkStage.buttonMode = true;
    darkStage.useHandCursor = true;
    (parent  as  MovieClip).addChild(darkStage);
    loadSprite = new Sprite();
    loadSprite.addChild(loadArray[indexNum]);
    loadSprite.x = (stage.stageWidth / 2);
    loadSprite.y = (stage.stageHeight / 2);
    loadSprite.addEventListener(MouseEvent.CLICK, reMove);
    loadSprite.buttonMode = true;
    loadSprite.useHandCursor = true;
    loadSprite.mouseEnabled = false;
    (parent  as  MovieClip).addChild(loadSprite);
    var urlRequest:URLRequest = new URLRequest("xmls/" + indexNum + ".xml");
    var titleURL:URLLoader = new URLLoader();
    titleURL.addEventListener(Event.COMPLETE, completeListener);
    titleURL.load(urlRequest);
    function completeListener(event:Event):void {
        titleText = new TextField();
        titleText.autoSize = TextFieldAutoSize.LEFT;
        var myFont:Font = new BOF();
        var ttFormat:TextFormat = new TextFormat();
        ttFormat.color = 0xFFFFFF;
        ttFormat.size = 18;
        ttFormat.font = myFont.fontName;
        textSprite = new Sprite();
        textSprite.addChild(titleText);
        (parent  as  MovieClip).addChild(textSprite);
        var titleXML:XML = new XML(titleURL.data);
        titleText.text = titleXML.toXMLString();
        titleText.setTextFormat(ttFormat);
        titleText.embedFonts = true;
        textSprite.y = 570;
        textSprite.x = ((stage.stageWidth / 2) - (titleText.textWidth / 2));
        textSprite.mouseEnabled = false;
        titleText.mouseEnabled = false;
function reMove(event:MouseEvent):void {
    (parent  as  MovieClip).removeChild(textSprite);
    (parent  as  MovieClip).removeChild(loadSprite);
    (parent  as  MovieClip).removeChild(darkStage);
function addClickOnThumb():void {
    var cot:ClickOnThumbnail = new ClickOnThumbnail();
    cot.x = 400;
    cot.y = 583;
    (parent  as  MovieClip).addChild(cot);

Answer 1

Hey Jim
Wow, that's great; thanks! Can I ask what settings you used to get the files so small?
Yes, I am familiar with Photoshop and image optimization issues, but I didn't realize that PNG was so much bigger than JPG and that I had so much file size I could shed before I would notice a degradation in image quality. Your advice will certainly help greatly, and I will certainly apply it to the thumbs as well. I think my mom will be very pleased.  : )
I look forward to hearing what collection of settings you used.
Thanks and Be Well
Graham