Moving and Changing Movie Clips in Flash MX
See all Sams Teach Yourself on InformIT Design & Creative Media Tutorials.
Movie clip instances have properties that you can examine and change. By using these properties, you can change the screen location of a clip, rotate it, scale it, and even hide it.
In this hour, you will:
-
Learn how to change the position of a movie clip
-
Find out how to determine the cursor location
-
Learn how to rotate a movie clip
-
Learn how to scale a movie clip
-
See how a movie clip can be made invisible
Position
Every element in the Flash work area has a position. This position is measured in pixels. The upper-left corner of the screen is at 0, 0. That is, it is horizontal position 0 and vertical position 0.
If you use Flash's default movie dimensions, the bottom-right corner will be at 550, 400. That is, horizontally 550 pixels from the left side and 400 pixels down from the top.
Every spot in the work area can be identified as a position. For instance, the exact center of the area is 225, 200. Figure 7.1 shows the work area with several spots labeled.
Figure 7.1 The work area with several positions.
Another name for the horizontal coordinate of a position is x. The vertical coordinate of a position is y. A position is then expressed in x, y coordinates.
NOTE
In many programming languages, you need to use integers to express x and y coordinates; not in Flash. You can use floating point numbers to precisely position movie clips. For instance, a movie clip might lie at 218.45, 143.9.
To examine the position of a movie clip, you need to use the _x and _y properties. For instance, if you have a movie clip named myClip, you could use the following lines to send the x and y coordinates of that clip to the Output window:
trace(myClip._x); trace(myClip._y);
You can also see the location of a movie clip by selecting it in the work area and bringing up the Info panel. You can do this by choosing Window, Info or by using the keyboard shortcut Command+I on the Mac or Ctrl+I in Windows. Figure 7.2 shows this panel.
Figure 7.2 The Info panel shows the position of the movie clip selected. The second X and Y readings at the bottom show the mouse location.
To change the position of a movie clip when the movie is running, all you need to do is set the _x and _y properties of the movie clip. Here is an example:
myClip._x = 200; myClip._y = 250;
You can alter the _x and _y properties in the same way that you alter variables. You can use +=, -=, ++, and -- to make changes based on the original value of the property. For instance, to move a movie clip five pixels to the right, you could do this:
myClip._x += 5;
If you want to move a movie clip one pixel down, you could do this:
myClip._y++;
If you want to refer to the _x or _y property of the current movie clip, the one that contains your code, you can refer to _x or _y without a prefix, or you can use this as the object reference. So either of these will work to increase the horizontal position of a movie clip, if the code is attached to that clip:
_x++; this._x.++;
NOTE
Because using _x and _y by themselves affects the current movie clip, what do they affect if you use them in the main timeline? As you might be able to predict, they change the position of the entire movie, shifting it so that all the elements are offset by _x and _y. There's not much use for this functionality, however.