Actionscript 3.0 Program Flow

Question

I tried trial and error by tracing strings so I could understand the program flow of actionscript(or any similar language in general) but to no avail; I couldn't understand it at this point or maybe it because I didn't eat my breakfast. Please explain to me why the trace statements showed in the output first?

Here's the code of the first Frame

import flash.events.MouseEvent;
import flash.events.Event;

trace("I'm in line 3!");

stage.addEventListener(Event.ENTER_FRAME, generateURLs);
imageThumb.invButton.addEventListener(MouseEvent.MOUSE_OVER, showBar);
imageThumb.invButton.addEventListener(MouseEvent.MOUSE_OUT, hideBar);

trace("I'm in line 8");
// Generates the image URLs and inject them to the imageURLs array
var imageURLs:Array = new Array();
function generateURLs(e:Event):void {
    trace("I'm inside the generateURLs function!");
    var url:String = new String();
     for(var i:int = 0; i <= 31; i++) {
        url = new String('pokemon/img_' + i);
        imageURLs.push(url + ".jpg");
        trace(imageURLs[i]);
     }
     stage.removeEventListener(Event.ENTER_FRAME, generateURLs);
}


trace("I'm in line 24");

function showBar(evt:MouseEvent):void {
    trace("I'm inside the ShowBar function!");
    imageThumb.bar.gotoAndPlay('over');
}
function hideBar(evt:MouseEvent):void {
    trace("I'm inside the hideBar function!");
    imageThumb.bar.gotoAndPlay('out');
}

trace("I'm in line 34");

Second Frame:

trace("We're not in Frame 1 anymore!");

Last Frame:

stop();
trace("STOP!!!");

AND THE OUTPUT

I'm in line 3!
I'm in line 8
I'm in line 24
I'm in line 34
I'm inside the generateURLs function!
pokemon/img_0.jpg
pokemon/img_1.jpg
pokemon/img_2.jpg
pokemon/img_3.jpg
pokemon/img_4.jpg
pokemon/img_5.jpg
pokemon/img_6.jpg
pokemon/img_7.jpg
pokemon/img_8.jpg
pokemon/img_9.jpg
pokemon/img_10.jpg
pokemon/img_11.jpg
pokemon/img_12.jpg
pokemon/img_13.jpg
pokemon/img_14.jpg
pokemon/img_15.jpg
pokemon/img_16.jpg
pokemon/img_17.jpg
pokemon/img_18.jpg
pokemon/img_19.jpg
pokemon/img_20.jpg
pokemon/img_21.jpg
pokemon/img_22.jpg
pokemon/img_23.jpg
pokemon/img_24.jpg
pokemon/img_25.jpg
pokemon/img_26.jpg
pokemon/img_27.jpg
pokemon/img_28.jpg
pokemon/img_29.jpg
pokemon/img_30.jpg
pokemon/img_31.jpg
We're not in Frame 1 anymore!
STOP!!!

What I'm trying to do is to trigger an event when the stage is loaded; It generates some URL of images and inject them into an array then trace it back.

It is very crucial for me to understand the flow, I don't want to move forward without understanding this. Thank you.

Answer 1

Well I hope I can break it down for you enough:

Your program starts then it runs line 3 producing the output:

I'm in line 3!

Then it gets to the following section:

stage.addEventListener(Event.ENTER_FRAME, generateURLs);
imageThumb.invButton.addEventListener(MouseEvent.MOUSE_OVER, showBar);
imageThumb.invButton.addEventListener(MouseEvent.MOUSE_OUT, hideBar);

The important thing to release here is that the above code does infact not trigger anything, instead it register a listener (some function that you have defined) to be executed when a certain event occurs. For example, the first line stage.addEventListener(Event.ENTER_FRAME, generateURLs); attaches an event listener that will fire as soon as the first frame is entered and execute your generateURLs function.

Then the program interprets line 8 and executes it:

I'm in line 8

After that you are defining the generateURLs function followed by another trace which outputs:

I'm in line 24

After that you are again defining some functions (showBar, hideBar) followed by another trace statement resulting in the:

I'm in line 34

OK now the important thing to release here is all you have done is registered some event listeners to listen to your events. However, none of your events have been fired yet which is why you haven't seen any of the trace calls execute from any of your functions. However because this is the last line on Frame 1 the program now fires the Event.ENTER_FRAME, which you have registered to listen to which in turn calls your generateURLs function resulting in the pokemon/img_XX.jpg output.

The rest is self explanatory from here if you understood what I have said so far.

Hope this helps.