This chapter is from the book
This chapter is from the book
This chapter is from the book
Changing Movie Clip Properties
Properties are bits of information about an object. A property can be the object's position, how wide it is, what color it is, or how transparent it is. We're going to create a movie, piece by piece, that builds on what we've learned so far and allows the user to change a movie clip's properties. You'll learn several ways to alter a movie clip's properties and a cool way to use startDrag to make little sliders.
Figure 3–7 shows what your finished product will look like.
)
Figure
3–7 Finished movie
Let's start.
Open chapter3/drag_props1.fla.
Click on the fish.
Open the Actions panel.
Enter the following code:
onClipEvent(keyDown) { if(Key.getCode() == Key.LEFT) { this._x = this._x - 3; } }Control
Test Movie. You can move the fish to the left by
pressing the left arrow key. It works if you hold the key down as well.
Again, I'm throwing a few new things at you at once. Let's go over them one at a time.
onClipEvent(keyDown)
This is a movie clip's answer to on(keyPress "[some key]"). Notice we don't spell out which key is being pressed in the first line, which on(keyPress) required us to do. If the user presses any key on the keyboard, this keyDown is called.
if (Key.getCode() = = Key.LEFT)
Here's a new object called Key. It's an object that Flash comes with. It isn't an object like a movie clip—it's an object ActionScript can see, but it doesn't appear in any movie. If you want to do anything with the keyboard and a movie clip, you'll probably be using the Key object in some way. If you're new to objects, the whole concept may seem a little weird to you, but keep plugging away and it'll sink in eventually (it takes everyone a while to get it the first time).
One of the methods associated with the Key object is getCode(), which returns the character code of the last key pressed. Each key on your keyboard has a numeric character code. For example, the code of the left arrow is 37. If you press the left arrow, the Key.getCode() sees your left arrow press and translates it to a 37.
Fortunately, this doesn't mean you have to know all the character codes in order to write ActionScript. The Key object also has some properties that provide us with shortcuts. These shortcuts are in the form
Key.KEYNAME
For example, Key.LEFT returns the character code of the left arrow (37). Key.SPACE returns the character code for the space bar (32).
So if(Key.getCode() == Key.LEFT) sees if the character code of the last key pressed (Key.getCode()) is the same as the character code of the left arrow key (Key.LEFT). We could've written
if(Key.getCode() == 37)
and gotten the same result, but (1) no one wants to remember all those character codes, and (2) it's a lot easier to debug when you use words instead of numbers.
See the double equals sign? That's how we signify equality in an if statement. We use a single equals sign when we want to assign a value to a variable.
_x
A movie clip's horizontal position is its _x property. It's measured from the left edge of the movie to the movie clip's center. A movie clip's center is determined by wherever the little crosshairs are when you're viewing that movie clip's symbol. When you use _x, you have to be clear which _x you're talking about. That's why we used this._x, because Flash needs to know which movie clip's horizontal position you want.
Now let's add the rest of the arrows:
onClipEvent(keyDown)
{
if(Key.getCode() == Key.LEFT)
{
this._x = this._x - 3;
}
else if(Key.getCode() == Key.RIGHT)
{
this._x = this._x + 3;
}
else if(Key.getCode() == Key.UP)
{
this._y = this._y - 3;
}
else if(Key.getCode() == Key.DOWN)
{
this._y = this._y + 3;
}
}
There are two new things to notice here: the else if statement and the _y property. We use else if instead of this:
if(Key.getCode() == Key.LEFT)
{
this._x = this._x - 3;
}
if(Key.getCode() == Key.RIGHT)
{
this._x = this._x + 3;
}
if(Key.getCode() == Key.UP)
{
this._y = this._y - 3;
}
if(Key.getCode() == Key.DOWN)
{
this._y = this._y + 3;
}
because Flash can process else ifs faster than it can check all four if statements each time. It's not a huge speed difference, but it helps a little, and it's just good programming style—there's no reason to check if the right key was hit if we already know the left one was.
As you might have guessed, _y is the vertical position of the movie clip, measured from the top of the movie.
If you haven't already, test the movie and use all four arrow keys.
Good—we have a moving fish. Let's add a cool slider. The first slider will control the fish's _alpha property, which sets how transparent the object is. An _alpha of 100 means the object is completely opaque, and an _alpha of 0 means that the object is completely transparent. An object's default alpha setting is 100.
Open chapter3/drag_props2.fla.
Notice there are some new pieces on the stage: some extra text, a slider bar, and a slider, shown in Figure 3–8. Also, notice that each instance has a different name. This is necessary—otherwise, Flash doesn't know which instance is what.
Figure
3–8 drag_props2.fla stageGo to the first frame of the actions layer, and go to Window
Actions. Make sure you're entering a frame
action.Enter the following code:
// Get boundaries and position of the slider bar alphaBounds = alphaBar.getBounds(_root); _root.alphaBarXMin = alphaBounds.xMin; _root.alphaBarXMax = alphaBounds.xMax; _root.alphaBarYMid = alphaBar._y; // Set slider position on slider bar alphaSlider._x = _root.alphaBarXMin; alphaSlider._y =_root.alphaBarYMid;
)
Figure
3–8 Whoa! I hear you say. What's all this? What we're doing here is positioning the little slider (called alphaSlider) exactly where we want it on the slider bar (called alphaBar). Why do this? Why not just place it where we want to on the stage and not worry about all this? Well, we could certainly do that, but since the slider is always going to be on the slider bar, this code lets us experiment with placing the slider bar, thus not having to spend a bunch of time repositioning the slider. This is especially helpful if you have a lot of movie clips that depend on the placement of another movie clip. It just takes out the guesswork.
Let's start dissecting this chunk of code.
alphaBounds = alphaBar.getBounds(_root);
If we're going to position the slider on the slider bar, we have to figure out where the slider bar is. The getBounds function returns four values: xMin, xMax, yMin, and yMax, which correspond to the left, right, top, and bottom edges of the movie clip in question. We're getting the edges of the movie clip alphaBar, which is the slider bar, in relation to the whole movie (_root). It may seem like odd syntax, but it works.
But if getBounds() returns four values, not just one, how do we get to those four values? We assign all four values to alphaBounds. This isn't a variable, though it looks like one. The line of code creates a small object called alphaBounds. The object alphaBounds we just created has four properties:
- alphabounds.xMin
- alphaBounds.xMax
- alphaBounds.yMin
- alphaBounds.yMax
So, we just created an object out of thin air! This isn't a movie clip object—it won't show up anywhere in the movie. It's a different beast, but still an object.
Global Variables
The next block of code creates some global variables.
_root.alphaBarXMin = alphaBounds.xMin; _root.alphaBarXMax = alphaBounds.xMax; _root.alphaBarYMid = alphaBar._y;
We've dealt with variables before, but those were all local variables (all variables are either local or global). That is, they worked as long as they were inside their little curly braces, {}. Outside of their braces, they have no meaning. For example,
onClipEvent(enterFrame)
{
x = 5;
}
onClipEvent(keyDown)
{
trace(x);
}
This wouldn't work. If you ran this movie, the keyDown function has no idea what x is, and the output window would be blank. To make x visible, change the code to
onClipEvent(enterFrame)
{
_root.x = 5;
}
onClipEvent(keyDown)
{
trace(_root.x);
}
Pressing a key would then result in a little output window with a 5 in it. Adding _root makes x a global variable, which means that it can be seen by every action in the movie, no matter where the action is.
We're creating _root.alphaBarXMin, _root.alphaBarXMax, and _root.alphaBarYMid as global variables because we're going to be using them later. We're not using yMin or yMax because, as it ends up, we don't need them—vertical-wise, we only want to know where the vertical center of the slider bar is, not where vertical edges are. We get the vertical center by looking at _y, not yMin or yMax.
Positioning the Slider
Here's where we set the slider in its proper position.
// Set slider position on slider bar alphaSlider._x = _root.alphaBarXMin; alphaSlider._y =_root.alphaBarYMid;
There isn't anything terribly new here. We're setting the _x and _y positions of the alphaSlider object, and we're setting them according to a couple of global variables.
Making the Slider Slide
Let's add some movement to this little slider guy. We want the slider to move, but only in a certain way and under certain conditions:
The slider only slides along the slider bar.
The slider moves only if the user presses down the mouse button while on top of the slider.
When the user lifts the mouse button up, the slider stops moving.
Let's tackle these one at a time. First, let's make sure the slider only moves along the slider bar. Fortunately, the startDrag function gives us an easy way to do that.
Click on the slider object.
Open the Actions panel.
Enter this code:
onClipEvent(mouseDown) { startDrag(this, true, _root.alphaBarXMin, _root.alphaBarYMid, _root.alphaBarXMax, _root.alphaBarYMid); }Control
Test Movie.
We've added some attributes to the startDrag function. Here's the syntax:
startDrag(movieClipName, true/false, left edge, top edge, right edge, bottom edge)
All those edges define a box that limits where the object can be dragged. Once the user's mouse moves outside that box, the object follows the mouse cursor as best it can, but stays within its box. To define the edges of the box, we used the global variables that were set by the first frame's actions. Notice the top edge and bottom edge are the same variable. That's because we want the slider to move in a straight line back and forth—we don't want any vertical slider movement.
So the slider isn't going anywhere it shouldn't, but you can't stop the sliding. When the mouse button goes up, the slider is still moving. We can fix that with:
onClipEvent(mouseUp)
{
stopDrag();
}
You don't need to specify which object doesn't get dragged anymore. Since only one object can be dragged at a time, stopDrag disables whatever dragging is currently going on.
There's one more thing we need to do to make this slider move correctly. We only want it to slide when the user clicks on the slider itself, not anywhere in the movie. To accomplish this, we're going to bring back the getBounds function. Type the following code into the slider's object actions:
onClipEvent(mouseDown)
{
// Get the boundaries for the slider
bounds = this.getBounds(_root);
// See if the user clicked inside the slider
if((_root._xmouse <= bounds.xMax) &&
(_root._xmouse >= bounds.xMin) &&
(_root._ymouse <= bounds.yMax) &&
(_root._ymouse >= bounds.yMin))
{
startDrag(this, true, _root.alphaBarXMin,
_root.alphaBarYMid, _root.alphaBarXMax,
_root.alphaBarYMid);
}
}
onClipEvent(mouseUp)
{
stopDrag();
}
Go ahead and test the movie.
With this latest modification, every time the user presses the mouse button, this code creates a little invisible object called bounds that holds the boundaries of the slider itself. Once that's done, the code looks at two new properties called _xmouse and _ymouse. These properties are the horizontal and vertical positions of the user's mouse. We added _root, so we get those coordinates in relation to the movie as a whole. We then check to see if the user's mouse coordinates are within the bounds of the slider. If they are, then dragging begins. If not, then nothing happens.
See the double &&? That's how we say AND in an if statement. For example, if we want to see "if A and B are true" the code looks like
if(A && B)
Both A and B must be true for the whole expression to be evaluated as true.
Still with me? If so, congrats—you're learning a lot, quickly. Onward!
What we want the slider to actually do is change the _alpha property of the fish. As it turns out, we can't place this change of _alpha inside the onClipEvent(mouseDown), because that chunk of code is only executed the first time the user presses down on the mouse button. We want this _alpha property to be changed continually as long as the mouse cursor is in the movie.
Here's how we do it:
onClipEvent(enterFrame)
{
xPos = _root._xmouse;
percentage = 100 * ((_root.alphaBarXMax -
xPos)/(_root.alphaBarXMax - _root.alphaBarXMin));
_root.fish._alpha = percentage;
}
Add this code to the Actions panel with onClip-Event(mouseDown) and onClipEvent(mouseUp). Now test the movie (see Figure 3–9).
)
Figure
3–9 Making the fish disappear
There's only one problem left. Did you notice it? Once you let go of the mouse button, the slider stays in place, but the _alpha property still changes if you keep moving the mouse! Somehow, we have to tell the code to stop changing _alpha when the user stops dragging. We can do this by creating yet another variable called _root.alphaDrag, which will be either true or false. If it's true, _alpha can change. If it's false, then _alpha won't change.
Here's how to implement it.
Because we're thorough little coders, we create the variable in the frame action of the actions layer. Add this line to the existing variables:
_root.alphaDrag = false;
Now, go back to the slider's actions, and make the code look like this:
onClipEvent(mouseDown) { // Get the boundaries for the slider bounds = this.getBounds(_root); // See if the user clicked inside the slider if((_root._xmouse <= bounds.xMax) && (_root._xmouse >= bounds.xMin) && (_root._ymouse <= bounds.yMax) && (_root._ymouse >= bounds.yMin)) { startDrag(this, true, _root.alphaBarXMin, _root.alphaBarYMid, _root.alphaBarXMax, _root.alphaBarYMid); _root.alphaDrag = true; } } onClipEvent(mouseUp) { stopDrag (); _root.alphaDrag = false; } onClipEvent(enterFrame) { if(_root.alphaDrag) { xPos = _root._xmouse; percentage = 100 * ((_root.alphaBarXMax - xPos)/(_root.alphaBarXMax - _root.alphaBarXMin)); _root.fish._alpha = percentage; } }
About the Code
Let's look at what we did. In the first function, we added _root.alphaDrag = true right after startDrag. That announces to the rest of the movie, "The alpha slider is being dragged by the user!" In the mouseUp section, the user has released the mouse button, and _root.alphaDrag = false announces, "The user is not dragging the alpha slider!"
In the enterFrame section, we check if the user is dragging the alpha slider or not. If so, then _root.alphaDrag is true, and the statements changing the _alpha property are executed. If _root.alphaDrag is false, then the user isn't dragging the slider, and nothing changes.
Congrats! You made a working slider that not only moves like a slider should, but actually does something! If you understand what you've just done, that's an accomplishment, and you're well on your way to creating some fantastic Flash movies.
Now let's make this little movie something a little bigger and more fun to use.
Open chapter3/drag_props3.fla (see Figure 3–10).
Figure
3–10 The final layoutDon't panic. We've done all the hard work already. To make these sliders work, and do what we want them to, it's a matter of copying, pasting, and tweaking.
Click on the first frame in the actions layer, and open up the Actions panel.
Enter the following code:
// Set variables alphaBounds = _root.alphaBar.getBounds(_root); _root.alphaBarXMin = alphaBounds.xMin; _root.alphaBarXMax = alphaBounds.xMax; _root.alphaBarYMid = _root.alphaBar._y; heightBounds = _root.heightBar.getBounds(_root); _root.heightBarXMin = heightBounds.xMin; _root.heightBarXMax = heightBounds.xMax; _root.heightBarYMid = _root.heightBar._y; widthBounds = _root.widthBar.getBounds(_root); _root.widthBarXMin = widthBounds.xMin; _root.widthBarXMax = widthBounds.xMax; _root.widthBarYMid = _root.widthBar._y; rotateBounds = _root.rotateBar.getBounds(_root); _root.rotateBarXMin = rotateBounds.xMin; _root.rotateBarXMax = rotateBounds.xMax; _root.rotateBarYMid = _root.rotateBar._y; _root.alphaDrag = false; _root.heightDrag = false; _root.widthDrag = false; _root.rotateDrag = false; // set slider positions _root.alphaSlider._x = _root.alphaBarXMin; _root.alphaSlider._y =_root.alphaBarYMid; _root.heightSlider._x = (_root.heightBarXMin + _root.heightBarXMax)/2; _root.heightSlider._y =_root.heightBarYMid; _root.widthSlider._x = (_root.widthBarXMin + _root.widthBarXMax)/2; _root.widthSlider._y =_root.widthBarYMid; _root.rotateSlider._x = (_root.rotateBarXMin + _ root.rotateBarXMax)/2; _root.rotateSlider._y =_root.rotateBarYMid;
Remember, don't panic. All we're doing is copying the code from the alpha code and pasting it four times. Then, we're tweaking it some so that we have four separately named sliders and slider bars. There's only one small difference—the latest sliders are positioned in the middle of the bar instead of on the end.
Click on the slider under the _yscale heading. The slider's name is heightSlider.
Enter the following code (it should look familiar):
onClipEvent(mouseDown) { // get the boundaries for the slider bounds = this.getBounds(_root); // see if the user clicked inside the slider if((_root._xmouse <= bounds.xMax) && (_root._xmouse >= bounds.xMin) && (_root._ymouse <= bounds.yMax) && (_root._ymouse >= bounds.yMin)) { startDrag(this, true, _root.heightBarXMin, _ root.heightBarYMid, _root.heightBarXMax, _root.heightBarYMid); _root.heightDrag = true; } } onClipEvent(mouseUp) { stopDrag(); _root.heightDrag = false; } onClipEvent(enterFrame) { if(_root.heightDrag) { xPos = _root._xmouse; percentage = 200 * (( xPos - _root.heightBarXMin)/(_root.heightBarXMax - _root.heightBarXMin)); //trace(percentage); _root.fish._yscale = percentage; } }Control
Test Movie.
)
Figure
3–10 The _yscale slider affects the height of the fish, and it's expressed as a percentage. So a _yscale of 0 is a perfectly flat image, and a _yscale of 200 stretches the image vertically to twice its original height.
Now let's do the same to the _xscale slider.
Click on the _xscale slider. It's called widthSlider.
Open the Object Actions panel.
Enter the following code:
onClipEvent(mouseDown) { // Get the boundaries for the slider bounds = this.getBounds(_root); // see if the user clicked inside the slider if((_root._xmouse <= bounds.xMax) && (_root._xmouse >= bounds.xMin) && (_root._ymouse <= bounds.yMax) && (_root._ymouse >= bounds.yMin)) { startDrag(this, true, _root.widthBarXMin, _root.widthBarYMid, _root.widthBarXMax, _root.widthBarYMid); _root.widthDrag = true; } } onClipEvent(mouseUp) { stopDrag(); _root.widthDrag = false; } onClipEvent(enterFrame) { if(_root.widthDrag) { xPos = _root._xmouse; percentage = 200 * (( xPos - root.widthBarXMin)/(_root.widthBarXMax - root.widthBarXMin)); root.fish._xscale = percentage; } }Test the movie.
The _xscale slider affects the width of the fish in much the same way _yscale affects the height. It's also expressed as a percentage. Now, let's finish the final slider.
Click on the slider under the _rotation heading.
Open up the Object Actions panel.
Enter the following code:
onClipEvent(mouseDown) { // Get the boundaries for the slider bounds = this.getBounds(_root); // see if the user clicked inside the slider if((_root._xmouse <= bounds.xMax) && (_root._xmouse >= bounds.xMin) && (_root._ymouse <= bounds.yMax) && (_root._ymouse >= bounds.yMin)) { //trace("rotate on"); startDrag(this, true, _root.rotateBarXMin, root.rotateBarYMid, _root.rotateBarXMax, root.rotateBarYMid); _root.rotateDrag = true; } } onClipEvent(mouseUp) { stopDrag (); _root.rotateDrag = false; } onClipEvent(enterFrame) { if(_root.rotateDrag) { xPos = _root._xmouse; percentage = ( xPos - _root.rotateBarXMin)/(_root.rotateBarXMax - _root.rotateBarXMin); rotation = (percentage * 720) - 360 _root.fish._rotation = rotation; } }Test that movie.
The _rotation property affects, well, the rotation of an image. It is expressed in degrees. Positive degrees are in the clockwise direction, and negative degrees are in the counterclockwise direction. All images have a default _rotation of zero.
Check out chapter3/drag_props_done.fla to see the finished movie with all the code in place.
A Note About _xscale and _yscale
If you spin the fish part way, and then change the _xscale and _yscale, you'll notice that they don't quite affect the width and height of the viewing image—they change the height and width of the symbol in its original orientation. You have to try this to really understand it.
A Challenge
Create a single movie clip that contains the bar and the slider. Drag four of those instances to the stage and use those instead of the symbols that are there now.