Object oriented programming

Objects & Classes

In flash Objects are items that can be manipulated. When you create a movie clip (or select an object and use the Convert to Symbol from the Modify menu-F8) in flash, you're creating an object. That object is now accessible through Flash's library palette.

Classes

Objects belong to a bigger category of things called classes. Classes let us know what kind of objects we're working with. When you create a movie clip, you're creating an object of the Movie Clip class. There are other types of objects you will use in flash: sounds, arrays, colors, keys, mouse, arrays, XML, etc. In flash you may even create your own objects.

Instances

When you place a movie clip from an item in the library, you are creating an instance of that movie clip. It's essentially a copy of what is on the library. When you create an object using (Convert To Symbol F8), Flash automatically places an instance of that movie clip in your work area.

If you drag different copies of the same object into the movie, you'll be creating separate copies or instances of the same library item. In the example above we created three different instances of the "ball" object. You'll notice that if you edit the library item by say changing the color, all three balls will change color because they are all related. This is part of what makes flash files so efficient. Instead of having remember how to draw three balls, Flash remembers how to draw one ball and copies that ball to three different places.

Instance Names

If you're going to do something with an object (a movie clip for example), it's a good idea to give the copy of the item in your movie a name so that you can refer to it. This is what we call an instance name. We name things so that we can tell the different between two copies of the same movie clip. You can change the instance names of an object by going to the properties palette and

If you don't name your movie clips Flash will automatically name them for you. Most of the time, this is not a problem, but when you need to refer or control a movie clip it's critical that each movie have it's own instance name and that the instance name be unique.

WARNING: Be careful that you don't give more than one object the same instance name as another or Flash will get confused and some of your scripts may not work.

Labels vs Instance Names

Be careful that you do not confuse symbol names with instance names. When you create a new symbol, you are asked to name that symbol so that it can be distinguished from other symbols. It's possible for symbol labels and instance names to be the same, so people sometimes assume that because they named the symbol they have named the instance.

Debugging Object lists

Launch Flash and draw a circle with the circle tool. Double click on the circle to select it and press F8. When you press F8, you will be converting your ball into a movie clip. When you do this, Flash will ask you for a name for your movie clip.

Remember, this name is not an instance name, but a label for your library. Now, open your library palette and you'll see that your movie clip is in there. Drag another copy of the ball onto the stage. You've just created two instances of the same movie Clip. You can drag as many copies of the clip as you want onto the stage.

When you're done dragging movie clips, preview your movie. While you're previewing your movie, go to the Debug menu and select LIST OBJECTS. The Output window should say something like this:

This is telling you that (in my case), I have three movie clips in my current movie. The first movie clip is currently called instance1. The output window is also telling me that the three clips are at _level0. Level 0 is the main level that all placed movie clips start in. We'll be getting into putting things in different levels way later, so just ignore that for now.

Since we didn't name these movie clips, Flash assigned them names (instance1, instance2 and instance3). We can also name these clips ourselves. You can do that in the properties palette.

Try naming one of the clips "ball1". Preview the movie again and LIST OBJECTS again. You'll see that we now have an object at _level0 named "ball1". Neat. You'll also notice that now there are two unamed movie clips labeled instanfce1 and instance2.

Methods & Properties

Once we create instances in flash that are named, it's easy to do things with them. To do stuff with clips, we need to understand about methods and properties. A property is a characteristic of an object, a method is how you tell an object to perform an action. Let's pretend our object is a person for a second (more exactly an object of the class person). A property of this person could be his/hair color, name, weight, height, etc. A method would be something for that person to do such as run, swim, jump, etc. The instance name could be your name.

In Flash, methods look just like functions, which we touched on during last week's lesson. they have parenthesis after them () (for example the infamouse stop() action). Properties usually have underscores before them (two examples are the _x and _y position of a movie clip).

You're probably already familiar with lots of methods that control movie clips. The stop() method, for example stops a movie clip from playing. The gotoAndPlay(); method moves the playhead to a specific frame or label and starts playing the movie clip from that point on.

Traversing movie clips

Another confusing part about using flash is the way that movie clips can live inside other movie clips. Whenever this happens, the artist must learn how to navigate through different movie clips. It's a good idea to use Flash's hierarchy navigation which sits underneath the layers and above your work area.

Double click on the ball library item to edit that clip's artwork. Notice that when we double click on a movie clip, other movie clips in our document gray out, plus we get a new timeline.

Every library item has it's own timeline. If you look underneath the timeline, you'll see that it says we're in Scene 1 and in the movie clip ball. Flash shows us our hierarchy in this area. We can have movie clips inside movie clips, so it's important to keep track of where we're at. Remember that we can put Actionscript in frames so it will be important to remember weather we're putting scripts in the main timeline or inside a movie clip.

Click on Frame 2 and hit F6. This will create a duplicate of the first frame on frame 2. Now change the color of the ball to red and preview the movie. Your three balls (or however many you've got on the page) will not blink rather quickly between blue and red colors (I made my first ball blue).

Two things are important to note about this. First, notice that although you only changed one ball, all three are blinking. Remember these balls are all instances of the same library item, so they are related to each other. When you double clicked on one of the balls, you were not really changing that particular ball, you were really changing the library item. Flash allowed you to work on that library item at the position of the clip you double cliked on.

The second thing you'll note is that Flash automatically re-plays a movie clip over and over forever. A movie clip's timeline replays automatically by default, so all three balls are cyclying through their timelines continuously.

We need to use our first method here to this movie clip from playing. Let's create a new layer (call it actions) and put a stop() action on frames 1 and 2 of this movie clip. Now play the movie again. Now your balls look like they did before. This is because the balls are all stopping at frame 1 of their individual timelines.

Starting to code

Even though the balls are different instances of the same library item, every instance can have different properties. One of the properties of an instance will allow an instance to display a specific frame.

Say you wanted to make one of the balls display the second frame (showing a blue ball right now) while the other balls remained red. We can do that with ActionScript. you've probably already used a command that sends the timeline to a different frame in your previous class. The method is gotoAndStop(), but if you've only worked in flat movies, the way to implement it is a little different.

We'll need to back up to the "Scene 1" level of the movie. We'll add a layer on the main timeline to put our ActionScript controlling one of the balls in. Create it and rename it "actions".

Also, if you haven't done so already give each instance of the library item "ball" an instance name such as ball1, ball2 and ball3.

On this actions layer, we'll need to tell the instance of ball called "ball1" that we want it to go to frame 2. Enter the following script on that frame:

ball1.gotoAndStop(2);

Now preview the movie. If everything worked well, one of your balls should be red. The other ones should stay blue. If something went wrong and you're getting an error in the output window, check your spelling of gotoAndStop(). Also, make sure you've placed the ActionScript in a keyframe and that you didn't accidentally click on a movie clip. Finally, make sure that you didn't put the action inside the "ball" library item.

Properties

Properties, like I mentioned before are characteristics of objects. A movie clip has many properties. Let's change a property called _visible of the "ball1" instance to make our movie clip invisible.

ball1._visible=0;

This makes our ball invisible. Any value other than 0 will leave the ball on the screen. We also could have used the boolean constants "true" or "false" which might make more sense;

ball1._visible=false;

Does the same thing, but is a little more readable.

You can see a movie clip's properties in the toolbox part of the actions palette. Double click on the item called properties and take a look at what's available. Things like _alpha (transparency), _xscale, etc. Spend some time playing around with the different properties.

Dynamic Textboxes

You can use a dynamic textbox to display variable values and properties of objects. This is very useful for debugging and for displaying information such as a score (which you will need for your first project).

Click on the text tool and create new text box on the work area. Look for the properties palette and you'll notice a popup that lets you select between a Static and a Dynamic text box.

You'll notice a few more options in the property palette as you go from Static to Dynamic. Look for an item called "Var" to "ball1._alpha". From this moment on, this textbox will display the alpha (transparency) of the "ball1". If the _alpha property of the "ball1" instance changes, then this dynamic textbox will reflect that information.

Now if you were doing something like keeping score, you wouldn't be accessing a property of a specific object, but some value of a variable. You would create a variable called "myScore" (probably at the beginning of your movie and keep on incrementing it as your balls hit things on the screen. In the Var area of the properties palette for the textbox, you would place the name of the variable.

Comments

You need to make sure you are using comments especially as you learn new stuff. All good programmers comment their code so that when they return to their program later on they know what they were trying to do. Comments in ActionScript are similar to their JavaScript cousins. You simply put a double slash // at the beginning of a line and everything after that on the same line becomes a comment. Remember, you can never be too rich, too thin or have too many comments.

Moving Movie Clips

For your game, you'll need to know how to move clips around so these balls can bounce around the screen. This is accomplished by using events. Events are things that happen while your movie is playing. Flash keeps track of all kind of things taking place while you work with it such as mouse clicks, mouse moves, rollovers and also the passing of time. If you're looking to move something programatically, the event you're most concerned about is the passing of time.

Flash, however, doesn't measure time in seconds. It measures time in frames. Flash's timer runs at a certain amount of frames per second that is defined in the Document Properties dialog box under the Modify menu.

In this case our movie is runing at 12 frames per second so Flash assumes that the movie clip will enter a new frame every 12th of a second. The number here in reality is a wish list for how fast you want the movie to run. In reality flash movies can run at slower speeds if the computer can't handle the frame rate.

Adding code to clips

Unlike frame scripts, whenever we want to add code to a movie clip, we'll need to let flash know what is going to trigger the execution of the code. Remember Frame scripts run whenever Flash reaches that frame. Movie clip code runs whenever an event tells the code to execute.

If we want to move an object, we can use the enterFrame event to tell flash to move an object every time a new frame is entered. Click on one of your balls and open the actionscript palette.

Type in the following:

onClipEvent(enterframe)
    {
        _x=_x+10;
    }

Preview the movie and you'll see our ball movie clip is moving to right slowly. We told this movie clip to increment the _x property (the horizontal position of the movie clip every time the clip entered a new frame. Which moves the clip to the right. Since the frame rate of this movie is set to 12 frames per second, my ball should be moving 12 times every 1 second.

Try changing the _x property to _y to try to make the ball move in the vertical direction. You'll notice that the ball moves down.

The Flash Coordinate System

This is when we start getting into a little bit of a designer's worst nightmare...math. Now if you remember your trigonometry, you remember that an x,y coordinate system (sometimes referred to as the Cartesian coordinate system) has four quadrants. on the top right quadrant where we did most of our work, we had positive x and y values. if our y value (vertical value) increased, we would be moving up.

In Flash's coordinate system case, positive _y increments mean down. This is a little weird and a result of how computer screens re-draw and how programmers have always drawn computer screens (like the western style of reading, they draw from the top left to the bottom right of the screen). Just remember that positive _y increments means down and negative _y increments mean up.

Making the ball bounce

Now we need to get the ball to change directions when it reaches the right side. We'll need to use a conditional statement (if). We can check to see if the _x property of a specific movie clip is at a certain value. So if the ball gets to the edge of the movie we can do something like reverse the ball's direction. Whenver you run into a programming problem you have to try to think like a computer and spell out the problem. That will help you figure out how to code it.

You can try writing something like this.

onClipEvent(enterFrame)
    {
        _x=_x+10;
        if (_x>550)
            {
                trace("we're at the edge of the screen");
            }
    }

This code will tell you when the movie clip reaches the edge of the screen, but how do you reverse the direction? You might think you can do it this way.

onClipEvent(enterFrame)
    {
        _x=_x+10;
        if (_x>550)
            {
                _x=x-10;
            }
    }

But alas you'll notice that doesn't work. The reason is that this code gets executed every time flash enters a new frame. When the clip reaches a position bigger than 550, it would move the clip to the left 10 pixels, but immediately following that it will move the clip back to the right 10 pixels and continue jiggling at the edge of the screen. We need to do two things. First, create a variable that keeps track of the speed that we want the ball to move and then reverse that number when the ball hits the right side of the screen.

The speed needs to be a positive number when the ball moves to the right and a negative number in order for the ball to move to the left. The speed will be the same. From math remember that any number multiplied times -1 will be the reverse of the number.

Your code should look something like this:

onClipEvent(load)
    {
        speedx=10;
    }

onClipEvent(enterFrame)
    {
        _x=_x+speedx;
        if (_x>550)
            {
                speedx*=-1;
            }
    }

This should be pretty easy to figure out though. We're now using a new onClipEvent handler called "load" this event happens once when the movie clip instance is about to be drawn on the screen (after it is finished loading from the library).

This is a great place to set some variable that we want to be created only once at the beginning of the movie clips life. If we would have put that on the enterFrame handler, the variable would reset itself everytime the clip entered a new frame, so it would always have the same value.

The main difference is that now we've added an if statement to see if the position of the ball exceeds the width of the movie. If it does, then we negate the value of the speedx variable, which in effect changes the direction of the movie.

Exercise

Try changing the movie clip so the ball bounce off every edge of the movie clip. To get really fancy try to figure out how to do it with balls of different sizes.

Notice the _x position of a movie clip is in reference to the clip's center. This is called the registration point and it's noticeable as a circle in the center of your clip when you click on it.

Making the mouse follow your cursor

The last thing you'll need to know before you're ready for the coding level 1 1 is how to make a paddle that can follow the mouse movements. This is very easy to accomplish. Simply create a shape for your paddle, convert it into a movie clip and attach the following script:

onClipEvent(enterFrame)
    {
        this._x=_root._xmouse;
    }

blog comments powered by Disqus