First Two Labs, Object-Oriented

Because of the Christmas Card project, I wasn't able to present a lab I did cover with my undergraduate class, in which we rebuilt the first two projects -- the bouncing ball and the scene scroller -- in object-oriented style.

Since either or both these projects may be useful to your final work, and since you may now be more comfortable with OO design than with the older methods, I'm posting the lab writeup from the undergraduate class here.

Source files are identified at the bottom of this page.

Task

Here's how to rewrite the first two projects -- the ball-in-box animation and the endless scene scroller -- using classes and objects instead of the older techniques we used previously. A few things work differently this way.

1: Creating a class

The first difference you need to negotiate has to do with files. We used multiple files last week (the JPEGs for the background graphics were stored in an external directory), but up to now we've put all our code within the main movie source file (.fla).

With object orientation, code goes outside the movie file, residing instead in an external ActionScript source file (.as). THE NAME OF THIS FILE IS CRUCIALLY IMPORTANT, since it enables the linkage between the class and the instances we will create from it within our Flash movie. The name of your external file must exactly match the name of the Flash Symbol within your Library. For the bouncing ball, we're using a Symbol (Movie Clip) named Ball. Therefore you need to create a new file in Flash (File>New) called Ball.as.

2: Matching a Movie Clip to a class

We need to make a few adjustments to the Ball Movie Clip in order to link it to its class. Open the Library window and right-click on the Ball clip. Select the Properties button from the pop-up menu. Then click the "Advanced" button. You should see a dialog box like this:

Make sure the check box labeled Export for ActionScript is checked. Checking this box automatically establishes a link between this Movie Clip and any .as file whose name matches it.

3: Writing the code for your class

Return to the file called Ball.as in Flash. This is simply a text file, and when you have finished writing it, the contents will look at lot like the script we installed directly on the Ball Movie Clip two weeks ago.

There are some differences, though. For one, everything we put here will be contained within a class definition. The form of a class definition is:

class someName extends Movie Clip{

    //definition of global variables
	
    //definition of functions
	
    //constructor
    function someName(){
	
    }

}

Where you see "someName" above, you may substitute any non-reserved word that is the name of your class. In the first part of this lab, we'll use Ball.

Global variables contain values that will be used by more than one function in the class. Our old friends xDir, yDir, xChange and yChange fall in this category. Remember that in the old-school lab, we set initial values for them in the onClipEvent(load) handler. Here we don't assign their initial values (that's done in the constructor, below), but we do declare the name and type of each variable, like so:

var xDir:String;
var yDir:String;
var xChange:Number;
var xChange:Number;

You haven't seen variable declarations before this. They're not as important in ActionScript as they are in C++ or Java, but we do need them when we're working with objects.

Where you see "definition of functions," you'll write any functions needed by this class. In the last two weeks we've learned how to write functions on the first frame of a layer, and in the onClipEvent(enterFrame) handler of a Movie Clip. In OO scripting, those functions go inside the class definition. Instead of the onClipEvent(enterFrame) handler, we write the function:

function onEnterFrame(){

}

Finally, we have the constructor. Every class must have one. It is again similar to the onClipEvent(load) handler: this is where you set up the initial values for your variables and call any functions needed at startup.

You don't need to invoke the onEnterFrame() function. It's invoked automatically in response to the enterFrame system event.

Bouncing Ball project

Using memory (preferably) or the solution code from the Bouncing Ball project, see if you can write the contents of the onEnterFrame() script and the various other missing pieces of this project.

Scene Scroller project

This one is a bit more challenging. Our solution from last week involves a cheat: it replaces a Movie Clip with a JPEG graphic, which actually wipes out the code associated with that Movie Clip. Because of the way the Flash player handles looping on a single-frame movie, the code is reloaded at the playback rate, so the animation works.

But this solution won't work for objects, which are handled differently. To improve our design, we'll need to add a little complexity. Instead of loading the JPEG to replace one of the panel Movie Clips, we'll first load an empty Movie Clip over each panel, and then load the JPEG in to replace the empty clip. Though it may seem a bit shaggy, this is actually a very common trick in Flash design.

If you look at your start file, you'll see the two panel clips, bgA and bgB, have been predefined for you. Each is an instance of the Movie Clip Background from the Library. We've already checked the right boxes for Background, so all you need to do is create the file Background.as and write its class definition.

One detail you'll need to know about, though: in order to do our improved image loading, we need to bring in an empty Movie Clip, which is a new trick. The simplest way to explain this is to give you the entire constructor code for the Background class:

function Background()
    {
        imageHolder = this.createEmptyMovieClip("imageHolder", 
            this.getNextHighestDepth());
        imageHolder.loadMovie(randomImage);
    }

As you can see, we first create a variable called imageHolder. This variable will be declared in the declarations section with the type MovieClip -- yes, variables in ActionScript may contain entire objects!

Next we assign to imageHolder the result of the createEmptyMovieClip() method, which as you probably surmise is an empty Movie Clip. We use the function getNextHighestDepth() to ensure that the empty clip sits above the image holder, rather than replacing it.

Now for that term randomImage. We'll be using a get function to assign the value of this term. So above your constructor, enter the following code:

function  get randomImage():String{
        var rNum:Number;
        var imageName:String;
        rNum = Math.floor(Math.random()*10);
        imageName = "pix/bg" + rNum + ".jpg"
        return imageName;
    }

A get function is treated like a variable in subsequent code, but as you can see, it performs all the familiar calculations we use to select an image from our fileset at random.

With these bits to start, can you now figure out the rest of the contents of Background.as?

Source files

Source files for these projects can be found on student-iat.ubalt.edu in the IDIA610Shared folder. As usual, you must use the SDE login to access this folder. The files are in folders called bouncingBall-OO and sceneScroller-OO, respectively.