You can't move a mask with ActionScript, but there is nothing to prevent you from controlling the movie clip the mask is in or, for that matter, controlling a movie clip that is being masked. Take a look at draggable_final.swf in the Chapter_09/Assets folder. Try dragging the circle around the Stage. Not impressed? Position the circle over the fighter's head and then drag the slider in the lower-right corner. That's all done with masking and ActionScript. Believe it or not, this effect is not difficult to create, just time consuming. So, where do you start with a project like this? Your goal is to create a mask you can drag around the Stage. You already know that you can't attach actions to anything in the masking layer, so that isn't an option. To create a draggable mask, you're going to have to embed the mask in a movie clip. The movie clip needs to be draggable, so you'll also need a button in the movie clip. So what is the inventory of elements you'll need for your movie clip? You'll need the following:
You already know this is going to be embedded in a movie clip, so that's a good place to start. Exercise 9.4 Setting Up the Base Movie Clip few elements of this file already have been created for you, but you have to do all the assembly and coding.
Well, that's not too exciting. However, it will get better. Exercise 9.5 Adding a Button to the Masked Movie Clip You know this movie clip needs to be draggable. To make it draggable, you need to add a button to it.
There's one more thing you need to do before you return to the main timeline. You need to add ActionScript to the button to make it draggable. Adding ActionsActions! But we haven't gotten to that chapter yet! Don't worry. This won't be that bad, and you need to get comfortable with ActionScript anyway. Whenever you want to drag an object around in your movie, that object has to have a button embedded inside it. Why? Because buttons are what react to mouse events, such as press, release, rollover, and so on. (There is an Action called mouseMove that doesn't require a button, but that's for a later chapter.) You've already embedded a button in your movie clip. Now you just need to tell it what you want it to do. Exercise 9.6 Making the Masked Movie Clip Draggable You want to be able to drag the draggableMovie clip around the Stage. The logical time to start the dragging action would be when you click (press) the movie clip. When you release the movie clip, it should drop, or stop moving, on the Stage. Fortunately Flash has two functions tailor-made to handle these events: startDrag() and stopDrag(). You still should be working in draggable.fla.
Okay, your movie is draggable, but you see only the one bit of the movie that's under the mask. That's no fun. You'll fix that next. Controlling a Masked Movie with ActionScriptYou need to be able to control the movie clip that's under the mask inside the draggableMovie clip. First, you need to address the housekeeping issues. Whenever you want to talk to a movie clip to tell it to do something, it needs to have a unique name. When you drag the Draggable movie clip, the Smackdown movie clip just moves along in synch with it, so the picture under the mask never changes. What you want the Smackdown movie clip to do is move in the direction opposite that in which the Draggable movie clip is moving. What? Well, think about it for a minute. If both movie clips are moving in the same direction, the picture is never going to change. However, if they're moving in opposite directions, you'll see the changing scenery . (See Figure 9.10.) Figure 9.10. To have your mask reveal different portions of the movie underneath it, you need to have the copy of the movie clip being masked move in the direction opposite draggableMovie.
This might sound like a complex interaction, but it's really not. The relative positions of the two movie clips need to be continuously updated. However, because you're working with a movie clip, you can do that by using the onClipEvent(enterFrame) action. The onClipEvent(enterFrame) action fires continuously as long as the movie clip exists on the Stage. So how are you going to make the two movie clips move in opposite directions? You can do the following:
How do you check the X and Y positions? Every object on the Stage has certain properties that you can access using ActionScript. The properties you use to get to the X and Y positions are _ x and _ y. To get the X and Y positions of specific movie clips, you need to give Flash directions, through dot syntax, on where to find them. To keep things simple, start your path with the root level of your movie (_root), and then attach the instance name and property you want to access. So, to get to the X position of draggableMovie (which has an instance name of Draggable), you enter the following: _root.Draggable._x To get to the X position of the Smackdown movie clip (which has the instance name of Smackdown) inside the Draggable instance, you enter the following: _root.Draggable.Smackdown._x That's all there is to it. Now, let's get those movie clips moving. Exercise 9.7 Controlling the Masked Movie Clip Before you can start controlling your movie clips with actions, you have to assign them instance names . You still should be working in draggable.fla, or you can use the file draggable1.fla from the Chapter_09/Assets folder on the CD.
Okay, that should be working for you. You can drag the movie clip around and reveal what's under the mask. Want to take it a step further? How about if you set the movie up so that Smackdown is in the main timeline and the draggable movie clip enables you to magnify portions of it? To do that, you'll need to add another instance of the Smackdown movie clip to your movie. Tip If you're having problems at this point, verify that you have given instance names to both the draggableMovie and Smackdown movie clips. Rememberspelling counts! Exercise 9.8 Adding a Background and Slider Control You'll add both a background layer and a slider that will be used to control magnification. You still should be working in draggable.fla, or you can use draggable2.fla from the Chapter_09/Assets folder on the CD.
The first thing you need to decide is how to use the value returned by sliderVal. Why does sliderVal return a value between 0 and 1? It does so because it makes the returned value easily adaptable to any kind of measurement system you want to use. In this case, you'll set it up so that the maximum magnification is 5X. So, how do you convert the number returned by sliderVal to a value that you can use to scale your movie clip? First you need to understand how to scale a movie clip. Just as you can set the X and Y positions of a movie clip using the _x and _y properties, you can use the _xscale and _yscale properties to scale a movie clip. The scale for anything you place on the Stage starts out with an _xscale and _yscale of 100. Anything above 100 increases the size; anything below 100 decreases the size . You want to be able to make your movie clip anywhere from normal size (100) up to five times that size (500). To convert the value returned by the slider, you need to perform a little calculation. We need to go back to basic math for a moment. Any number multiplied by 0 is going to return a value of 0. That's not an acceptable value for your purposes. The minimum value that you want to have is 100. So right off the bat, you know that you need to add 100 to whatever value is returned. Because you've already established that the maximum scale value is going to be 500, by what number do you multiply the number in sliderVal? Your first thought might be 500, but remember that you'll be adding 100 to the value. The answer? Just multiply sliderVal by 400 and then add 100 to that. That way, your number always is between 100 and 500. Your equation will look like this: scaleFactor = (_root.sliderVal*400)+100; In the next exercise, you add the code to scale the movie clip that's being masked. Exercise 9.9 Scaling the Smackdown Movie Clip Under the Mask All you have to do is add two lines of code to adjust the scale.
What's happening here? When Flash scales this movie clip, the upper-left corner, which is the 0,0 point, stays the same. The movie scales out and away from that point, essentially changing the position of the rest of the image on the Stage. You have to account for that by adjusting the code where you set the X and Y values of the Smackdown movie clip. Exercise 9.10 Adjusting the Motion of the Scaled Movie Clip You know that when you move the slider, the movie clip is changing. At the bottom of the slider track, the movie is its original size. At the top of the slider track, the movie is five times its original size. You need to multiply the X and Y positions of the movie clip by a number between 1 and 5. You get that number by dividing the scaleFactor by 100. Why? Remember that the scaleFactor was set up to accommodate the necessary changes to _xscale and _yscale, both of which needed to start at 100 and go no higher than 500. Because the movie is changing by a factor of 5, if you want to use the scaleFactor value, you have to divide it by 100.
If the masked movie clip is scaling, but not staying in place, make sure that the mask (frame and button) you set inside the draggableMovie clip is centered on the upper-left corner of the Stage. The draggableMovie movie clip can be anywhere on the Stage on the main timeline. Drag the mask around and try changing the scale by using the slider bar. You might notice one little glitch as you approach the edges; you'll see a little twitch and the Background image show through when you increase the magnification. The easiest way to fix that is to constrain the movement of the draggable button to the confines of the Flash movie. You'll be taking a look at constraining drag-and-drop interactions in Chapter 17 when you build your slider. |