All About MCs

[ LiB ]

I'm going to spend a lot of this chapter discussing MCs (Movie Clips). Movie Clips have special built-in variablesI'll refer to them as properties . MCs also have built-in definable code blockswe'll call these methods .

Mastering the manipulation of properties and methods is the key to understanding Movie Clips thoroughly. Before moving on to any demos, let's revisit MC structure while discussing the concept of scope. Scope, in Flash, refers to what can be "seen" from a symbol or timeline. It can also refer to area where the variable is known and can be referenced. The definition of scope isn't any clearer than that in the Flash documentation, and the truth is that you won't fully understand scope until you are through with this section. See Figure 4.3.

Figure 4.3. Movie Clip scope

graphic/04fig03.gif


As you can see from Figure 4.3, Movie Clips can be embedded within one another. These Movie Clips have special relationships to each other once they are arranged in a hierarchical structure. I'll be referring to this hierarchy as I discuss scope.

What does all this mumbo-jumbo mean? Allow me to offer an example to compliment the visual in Figure 4.3. Let's say you have a master Movie Clip. This could easily be your main time line . Remember that your main Timeline behaves like a giant Movie Clip itselfthis is why I can refer to it as a master Movie Clip. Anyway, let's say you created two Movie Clips, MC1 and MC2. Let's also assume that MC2 has another embedded Movie Clip called MC3.

NOTE

TIP

Sometimes when designing a really complicated hierarchy, you might lose the thread and tangle yourself trying to memorize where everything goes. Use scrap paper if you need to. It will keep you organized and sane. You'll be surprised how much time it can save you.

Now that you understand the basics of scope, you should be comfortable with the fact that if you are within scope , you can access built-in variables or properties of any other Movie Clip in your project. This means that one Movie Clip can read and write to variables of another Movie Clip if the Movie Clip knows how to access it through proper scope.

Suppose that you wanted MC1 to reference MC3. MC1 can't do so directly; it has to ask its parent, which is the main Timeline, to reference MC2. From MC2, you can then get to MC3. How would you represent this in code? Instead of using pseudo code, have my comments assist you.

 // This code is in the MC1 Movie Clip. // If MC1 were to refer to a Movie Clip not // within its domain or scope, then it would // have to use a specific reference to it. _root.MC2.MC3.someVar = 50; 

What you just experienced there was dot notation . First, allow me to explain what dot notation is. Dot notation is when you use an object to refer to another object or property of that object. For example, in the preceding listing, the object that we are using to access is root . root represents the main Timeline, and through this alias, it can be treated like a Movie Clip (as I said before). Anyway, every time you use a dot (a period) after this alias, you can reference another object that is embedded within it. In this example, MC2 is embedded in _root , so it's safe to write _root.MC2 to reference MC2 from anywhere . Since we are looking for a variable (a.k.a. property when speaking about objects such as Movie Clips) that belongs to another object that's embedded within MC2, all you have to do is reference the object with another dot just like I did in the listing.

After that nice explanation, you now can see that the listing is taking a variable (or property) declared in another Movie Clip and assigning it a value. This could easily be the number of ammo left in your fighter jet or the number of energy reserved for your shields .

Now, what is really happening here? _root is a special keyword that is used to refer to the main Timeline from anywhere, or whatever scope. MC2 was built on _root , so to refer to MC2, we can say _root.MC2 . To refer to MC3 that was built on MC2, refer to MC2 as _root.MC2.MC3 . Get it? This is dot notation.

MC Properties

As I mentioned before, Movie Clips have built-in properties variables that you can modify to change the appearance of the Movie Clip.

Let's set up a small scene. Start a new Flash project. Create three layers and name them Background, Buttons , and Labels, respectively. As the background, draw a square and decorate it if you want to, but don't waste too much time with this.

For the Buttons layer, open up the stock button Library windowselect Window, Common Libraries, Buttons. Drag out four buttons and place them wherever you think is nice. Use your artistic senses for that one. On the third layer, the Labels layer, use the Text tool to label the buttons. I labeled them Left, Right, + and -. Make sure the text boxes are in Static Text mode in the Properties panel.

I saved what I did as file GDA_PROG4.3a.fla on the CD. Work with that file if you want to continue with what I put together for you.

Create a new layer and name it Movie Clip. I saved this file as GDA_PROG4.3b.fla before taking the screenshot in Figure 4.4.

Figure 4.4. Setting up a scene

graphic/04fig04.gif


Create a small graphic, like a circle, in the Movie Clip layer. Select it with the Arrow tool and then press F8 to convert it to a Movie Clip. As you can see from Figure 4.5, I have named it Circle. Make sure to select Movie Clip from the Behavior option.

Figure 4.5. Converting to an MC

graphic/04fig05.gif


Once you have converted your graphic to a Movie Clip, make sure it's selected. Access your Properties panel by pressing Ctrl+F3 or Command+F3. You should have a screen similar to that in Figure 4.6.

Figure 4.6. Properties of your new MC

graphic/04fig06.gif


In order to be able to control this MC from ActionScript, it must have a namelet's name it circle01. Type this name in where it says Instance Name in the Properties panel. Remember that every symbol that is on your stage and main Timeline is only an instance of whatever is in the Library. Every instance is independent from every other, and you have to reference them individually from ActionScript. This is why we have to name this instance.

NOTE

TIP

If you find that I am talking about properties that are not on your Properties panel, make sure the object that I'm talking about is selected. Remember that the Properties panel will only show properties for whatever is selected.

Here's the fun part. Ready for some interaction? Access the Actions Panel for the button that you labeled Left.

Write in the on handler in the following way:

 on (release) { } 

Now that we finished preparing the button so it can execute anything inside the on release block, we can then type in some code. Take a look at the following listing.

 on (release) {   circle01._x -= 10; } 

Ignoring the fact that you are using dot notation to access a property in your Movie Clip (circle01), you can assume that 10 is being subtracted from this variable every time the button is released.

You already know that the symbol circle01 is on the _root (the main Timeline) because you created it there. You also created this buttonthe one you are coding inon the main Timeline. As this is true, you don't have to refer to _root because you're already there. This also being true, you can directly access circle01 by merely calling out its instance name.

So where did this _x variable come from? It's one of many special built-in properties that Movie Clips include. If these properties are modified, you can change color , position and or orientation, therefore changing the Movie Clip's appearance.

As _x governs the x position of the Movie Clip, subtracting 10 from it will move it 10 pixels to the left. See Figure 4.7 for how the generic coordinate system works on the stage in Flash.

Figure 4.7. Flash's coordinate system structure

graphic/04fig07.gif


The main stage begins at [0, 0]. This is the upper left-hand side. The size of my movie is 550x400 so my highest displayable coordinates are 550x400, but of course, you can go past these.

Go to the button you labeled Right. Right-click or Command+click the button and type in the following listing:

 on (release) {   circle01._x += 10; } 

I think it's a good time for you to check out how much progress you have made. Go to Control, Test Movie after saving it. Try clicking the Left and Right buttons. You'll see your symbol, circle01, being manipulated. How cool is that?

Now I'm going to show you how to scale the instance on the stage. Find the button you labeled + and type the following listing in it. This is now the button's script that scales the instance by 10 percent.

 on (release) {   circle01._xscale += 10;   circle01._yscale += 10; } 

Access the Actions Panel for the button you labeledand type in the following listing in it.

 on (release) {   circle01._xscale -= 10;   circle01._yscale -= 10; } 

If you would like to see what I did, check out the file GDA_PROG4.3b.fla on the CD.

You have just compiled a fully interactive program that responds to your commands. Starting to sound good, doesn't it?

As for the two new properties that I asked you to type in, _xscale and _yscale , they scale the Movie Clip independently. They accept a percent value. A normal uniform scale would be 100 percent. You can set the _xscale property to 50 percent to make the object narrow. If you were to set the _yscale to 200 percent, you would make the object twice as tall. Mess around with the code and with the values and make sure you understand what's going on.

There are two more properties that accept a pixel value. These are _height and _width . As opposed to the scale properties, these properties contain the current width and height of the current Movie Clip. Any other values that are assigned to these properties will modify the MC to fit those new values.

NOTE

TIP

You can scale your object using dif ferent properties. Replace the _xscale and _yscale properties with _height and _width in our last exam ple. You can scale your object through these properties as well but there is one differencethey accept pixel values instead of a percent value. Experiment and make new buttons. Don't forget to try every thing that I have introduced up to this point.

The _rotation property is an interesting case. It accepts values in degrees and it rotates your MC for some cool effects. For instance, if you were to assign your Movie Clip _rotation property a value of 45, it would tilt the visual to a 45-degree angle.

Another Movie Clip property that I would like to touch upon is the _alpha property. This one also takes a percent value from 0100. It allows you to make an MC transparent. A value of 100 percent makes the Movie Clip completely opaque and a value of 0 makes the clip completely disappear. Once you get the hang of ActionScript, you'll be able to fade and cross-fade objectshow cool is that?

onClipEvent Handlers

Movie Clips contain special event handlers similar to the on event handler in buttonsthey execute their block of code right after an event happens. I will go through the most common cases of these handlers in the following subsections and I will also explain how to set them up and use them through a few cool demos.

The Rotating Propellers Demo

Let's check out another example. This one is called GDA_PROG4.4.fla. I will be modifying some of the properties of MCs while introducing onClipEvent handlers. See Figure 4.8 for a shot of the demo.

Figure 4.8. Moving propellers

graphic/04fig08.gif


This demo might look a little more complicated than the ones before, but don't be fooled. You can dig into it yourself and see that it's a bunch of neatly stacked layers and grouped objects. You'll also notice that the only symbol there is the propellers. This Movie Clip is the only part of the project that contains any code whatsoever. Check out the followin listing for the code.

 onClipEvent(load) {   degrees = 0; } onClipEvent(enterFrame) {   degrees -= 20;   this._rotation = degrees; } 

You can view this listing in the project yourself by right-clicking or Command-clicking on the propeller and selecting Actions from the pop-up menu. This will open the Actions Panel, and you'll notice two code blocks. Each code block denotes a onClipEvent handler. Let's look at the first handler.

 onClipEvent(load) {   degrees = 0; } 

As its argument, it has the load flag in between its parentheses. This tells Flash to execute the following block after the clip loads. In this case, all that the script is doing (when it loads) is initializing the degrees variable. Notice that this degrees variable is created on-the-fly . It's not a local variable, as you did not use the var keyword. It is a global variable in the scope of the Movie Clip. What this means is that the degrees variable will be able to be seen and modified by any function or handler within this clip. If it were a local variable, it would only be seen by the onClipEvent(load) handler.

The following block:

 onClipEvent(enterFrame) {   degrees -= 20;   this._rotation = degrees; } 

NOTE

NOTE

You'll understand function variable scope better when we go over cus tom functions later in this chapter.

executes the block of code on every frame. As you can see from the variable modification in the block, 20 is being subtracted from degrees on every frame. This value (degrees) is then assigned to the Movie Clip's _rotation property (also executed every frame because it's in the same block).

NOTE

NOTE

I want you to notice something that might have slipped by.You already know that this code makes the propeller rotate by subtracting 20 from a current value on each frame and assigning it to the _rotation property. So what's the problem? Actually there is no problem because Flash is so nice.

But what happens when the number is past -360? That's right, the propeller keeps rotating.This means that Flash knows how to translate any amount that is a rela tive number of degrees when it is being assigned to _rotation , even if it's past -360.This means that if the number is -1080, then the propeller has rotated three times counterclockwise. Any overflow on the number will cause the number to go back to zero and everything will be neatly taken care of.

The Scrolling Street Light Demo

Let's check out another example. This time, let's do a little error preventing. I have put together another project file that scrolls a streetlight and then loops it to the other side of the screen when it is out of view. This creates the illusion of driving up a street. This project can easily be modified to your liking; heck, you can even add buildings in the background and make them scroll, too. It'll be a good exercise. See Figure 4.9 for a visual.

Figure 4.9. The Scrolling Street Light demo

graphic/04fig09.gif


I added a little twist to the code. Before discussing that, though, check out the demo GDA_PROG4.5.fla on the CD.

After you've finished observing what the program does, let's see where the code is stored. You probably think that the code is stored in the Street Light Movie Clip, but I actually have all the code stored in the main Timeline. If you like, go ahead and check the Action Panel while the light is selected. It's a blank screen.

As you can see from Figure 4.10, I created a layer named Actions with an empty keyframe with an "a" over it. That's our code. Let's check it out in the following listing.

Figure 4.10. The empty Actions layer

graphic/04fig10.gif


 onEnterFrame = function () {   post._x -= 10;   if (post._x < -post._width)     post._x = 550; }; 

This small piece of code moves that heavy light post across the screen and then loops it. Allow me to explain the first line before the block begins.

Remember when I said that the main Timeline is really a bigger Movie Clip where everything is stored? Well, the main Timeline happens to have many Movie Clip properties, too. You can also set up an event handler such as the ones we previously used. The declaration of this even handler is written a bit different though. Read on.

As you will learn in the next section, an event handler is really a special case of a function. To declare the function that does the same thing as the onClipEvent(enterFrame) handler in a regular Movie Clip, you have to write the following in the main Timeline:

 onEnterFrame = function () { }; 

In the main Timeline, this handler is called onEnterFrame . It executes its block of code on every frame just like its smaller brother, onClipEvent(enterFrame) . Don't allow yourself to get confused over the fact that the assignment operator is being used. All this line is doing is defining the built-in method called onEnterFrame with the following block of code.

NOTE

TIP

A method is a special built-in function that is specifically associated with an object such as a Movie Clip. Methods are technically blocks of codes that can be called (or executed) independently. In this case, a handler executes the code after a certain event.

One thing that I did during the setup was assign our street light an instance name. I named it post . This is the name I use to refer to it in ActionScript. (In case you forgot : name your instance in the Properties panelmake sure you have your symbol selected and then enter the name in the Instance Name box.)

You already know that if you modify the _x component of any Movie Clip, you will end up changing its horizontal position. That's exactly what I am doing here in the following line:

 post._x -= 10; 

I am specifically referencing post , which is the symbol's instance name. I'm also modifying its _x axissubtracting 10, on each frame, from it.

That's clear enough, but what is the next piece of the block doing?

 if (post._x < -post._width)   post._x = 550; 

Simply restated it says: "If post's x position is less than its -width , then move the post to 550." The statement is understandable, but what's with this negative width stuff? See the diagram in Figure 4.11.

Figure 4.11. The negative width statement

graphic/04fig11.gif


When I created the street light, I drew all the graphics to the lower-right of the Movie Clip's registration point. This was completely intentional. This way, if scrolling left, when the street light hit the 0 position on its x-axis, it would still be completely visible. This would be impossible if the registration was centered.

Now suppose the street light went any negative amount on its x-axis. This would cause all or part of it to be off-screen . I can guarantee that it won't be onscreen if its width is out of the screen. If anything more than -width were to be used, you would still be able to see that darn light and our effect would be ruined.

So when the light is completely off the screen, we assign 550 to its x value. This causes the light post to place itself on the right side of the screen. As its registration is still on its upper left, it is not seen on the stage until a few frames pass by as the program continues to subtract 10 to continue the scrolling effect. Yes, there is a whole bunch of detail in this simple program, but like I said before, this will become second nature to you.

The Bouncing and Scaling B-Ball Demo

It's time for yet another demo. They always put a smile on my face when I read a book what about you?

Check out Figure 4.12. It's a shot of the Bouncing and Scaling B-Ball demo.

Figure 4.12. Bouncing and Scaling B-Ball demo

graphic/04fig12.gif


Find the file GDA_PROG4.6.fla on the CD and test the movie. You'll find code similar to the last example here. You should already be getting the hang of digging into other people's projects and understanding how the whole thing is put together.

The program basically scales a basketball while looping it left on the screen. You already know how to loop the image. You even know how to scale, but how did I make this one work?

Check out the following listing.

 onLoad = function() {   scaleFactor = 10; }; onEnterFrame = function () {   // Make the ball move left   ball._x += -10;   // Wrap the ball around the screen   if (ball._x < -ball._width)     ball._x = 550;   // Scale the ball evenly   ball._xscale += scaleFactor;   ball._yscale += scaleFactor;   // Reverse the scale direction   // if certain conditions are met   if (ball._xscale > 100)     scaleFactor *= -1;   if (ball._xscale < 20)     scaleFactor *= -1; }; 

This code was found on the main Timeline. (I found it easily because I wrote it!) I put the code on its own layer. I named the layer Actions, just like in the previous example. Then I put all the code on the first frame in the empty keyframe there.

You can see a new function in the code. It's similar to the onClipEvent(load) handler. Check out how I declared it.

 onLoad = function() {   scaleFactor = 10; }; 

In the main Timeline, the handler is called onLoad . The previous block of code was assigned to the onLoad handler but what does this block of code do? It initializes a variable that keeps track of the scale factor. It executes only when the whole Flash movie is loaded.

The following onEnterFrame function, which executes at every frame, does quite a few things. I'm going to break it down piece by piece for you.

 // Make the ball move left ball._x += -10; // Wrap the ball around the screen if (ball._x < -ball._width)   ball._x = 550; 

You are familiar with this code. You already learned how to scroll the ball left. In this case, you do so by subtracting 10 on every frame. There is then a conditional testing to see if the ball is out of the screenif it is, the ball then wraps it around to the right side and continues.

 // Scale the ball evenly ball._xscale += scaleFactor; ball._yscale += scaleFactor; 

In the following two lines, you are modifying the _xscale and the _yscale properties. This will help you achieve that bouncing effect. My goal was to scale it in and then out enough to create a feeling of perspective. If you ended the code here, you would be infinitely enlarging the ball. Let me show you how to avoid this to complete the effect.

 // Reverse the scale direction // if certain conditions are met if (ball._xscale > 100)   scaleFactor *= -1; if (ball._xscale < 20)   scaleFactor *= -1; 

The first test compares to see if the _xscale is greater than 100 percent. When this condition becomes true, our scaleFactor variable is inversed. As we initialized it to a value of 10, scaleFactor then becomes -10. What happens when you add a negative value? You are essentially subtracting it. This will cause the ball to scale downnice trick, eh?

The next conditional statement checks to see if the scale is too small. In this case, I checked to see whether it's smaller than 20 percent. If it is, I then inverse the scaleFactor so that the successive executions of the block will scale the ball back up.

As this is an ongoing thing and becasue the onEnterFrame function executes its block on every frame, you'll find the ball bouncing lefteternally. Got all that? I knew you didI was just checking.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net