Macromedia Flash MX 2004 ActionScript 2.0 Tutorial and Free Online Training Course
In this section, you will learn about:
- Animating with code
- Dragging and dropping movie clips
Animating with Code
Drawing with Code
In making our asteroids game, we relied on clip art for graphics. In Flash, you can also use ActionScript to draw directly on the stage at run-time. With a little practice, you can use some simple methods to draw all kinds of objects, just as you would have drawn them using the Pen tool. You can then use the same MovieClip methods we used before to animate your drawings.
As an alternative to our laser graphic, we’ll show you how to draw one using code. You can then use the duplicateMovieClip method to create a string of laser fire, or any of the other methods you’ve learned to animate the drawing. For example, you can use the onEnterFrame method to move the drawing across the stage, just as we did with our original laser movie clip. To try this out, make a copy of your Asteroids game without the laser movie clips, or create a new Flash document.
To keep our code neat, we’re going to create a function for drawing the laser beam. In the Actions panel, add a new function called drawLaser(), with the following code:
function drawLaser() {
this.createEmptyMovieClip(“Laser”, 0);
Laser.lineStyle(3, 0xffff00, 100);
Laser.beginFill(0xffff00, 100);
Laser.moveTo(267, 150);
Laser.lineTo(267, 140);
Laser.lineTo(270, 140);
Laser.lineTo(270, 150);
Laser.lineTo(267, 150);
Laser.endFill();
}
The first line creates a new, empty movie clip on the root using the createEmtpyMovieCLip method. This method is very similar to attachMovie and duplicateMovieClip, except it creates an empty clip. The arguments specify a name for the movie clip (“Laser”) and a target level (0, or the root).
The remainder of the lines draw a small rectangular laser beam 3 pixels wide and 10 pixels long. This is done using drawing methods available to the MovieClip object. First, the lineStyle method defines the stroke of the drawing: 3 pixels in width, the hexadecimal color (yellow), and then the alpha value (100%). The beginFill method is paired with the endFill method in the last line of code to fill the object being drawn with the same hexadecimal color (the first argument) and an alpha of 100% (the second argument).
The moveTo and lineTo methods actually draw the object. The moveTo method picks up the pen and moves it to a position on the stage, without drawing. Positioning is calculated using the x and y coordinates (x,y) based on the parent movie clip’s registration point. Since our parent movie clip is actually the root, we can use the stage, with (0,0) being the upper left-hand corner. As you move to the right, the x-coordinate increases; as you move down, the y-coordinate increases. Moving to the left and up decreases both coordinates. Using moveTo, we’ve positioned the imaginary pen at the bottom of our ship’s windshield.
The lineTo method draws a line from the last specified point to the new points given. In other words, the moveTo statement positions the first point, which will be connected with the point specified in the first lineTo statement—like connect-the-dots. You continue to add and connect dots with the rest of the lineTo statements.
In our example, the line is drawn 10 pixels straight up from the position given in the moveTo statement. The lineTo method is then used again to draw another line from the new position (267,140) 3 pixels to the right. We continue moving the pen on the stage using the lineTo method until we’ve created a rectangle. We then use the endFill method to complete the rectangle’s fill.
Using these basic drawing methods, you can draw just about anything imaginable. And because the object isn’t drawn until run-time (and not until the function is called), file size is kept to a minimum. While it involves more code than using Flash’s drawing tools, these methods are actually extremely efficient for creating spectacular Flash movies with very small file sizes. And as you become more practiced, you’ll find that drawing and animating this way provides you more flexibility than you have using Flash’s basic animation tools.
Tip:
You can also draw curves using the curveTo method, which has 4 arguments: the first 2 are the x and y coordinates of the control points, and the second 2 are the x and y coordinates of anchor points.
Now that you have the basis for a laser beam, you can duplicate and animate it using the same methods we used before. For example, the following shoot() function duplicates the movie clip and stagger the appearance of each duplicate so the laser fire appears as a long dashed line from the ship:
function shoot() {
drawLaser();
var newY = -30;
//The numLasers variable is declared and set to 1 outside the function
while (numLasers < 10) {
duplicateMovieClip(_root.Laser, “Laser” + numLasers, numLasers);
setProperty(eval(“_root.Laser” + numLasers), _y, newY);
newY -= 30;
numLasers++;
}
}
This function creates 9 duplicates of the short laser beam, resulting in one long, dashed beam. The first line calls the drawLaser() function, which creates the first movie clip and draws the first beam. We then use the duplicateMovieClip method to make 9 duplicates of the Laser movie clip. Each duplicate is positioned 30 pixels higher on the stage than the last. We do this by declaring a new variable, newY, which stores the number of pixels we want to move each duplicate movie clip. Then, in the loop, we use the setProperty method to change the ._y property of the duplicate clip to the value of newY. Then newY is decremented by 30 (-=30).
To test the movie, call the function at the bottom of your code, just outside the shoot() function. Type:
shoot();
Then save and test the movie. You should see a laser beam something like the following:
You’d then create another function for removing the movie clips so the laser disappears. You can even stagger their removal, or you can use a completely different method for animating the laser, like the onEnterFrame method we used earlier to move a single small laser beam across the stage. Remember that using the broadcaster/listener event model, you can programmatically control any of the movie clips without having to attach an event handler to a physical instance of a clip.
Dragging and Dropping Movie Clips
The ability to drag and drop is one that you’ll employ in a lot of your movies. The startDrag and stopDrag methods of the MovieClip object give users the ability to drag just about anything they want around on the stage. When they drop an object, you can have any number of things happen—for example, a child could drag new clothes onto a cartoon character, or a user could drag new shopping items into a basket. These methods are very simple, and to demonstrate them we’re going to again use a copy of our Asteroids game, adding a “target” graphic that the user can drag around. What you do with the target is up to you—we’re just going to show you how to drag and drop it.
We’ve created another movie clip for the target. It has a simple white circle with a cross-hair (2 black lines). The movie clip is named “target_clip”, and we’ve placed it on the staged and named the instance “target_mc”:
The target movie clip doesn’t do anything—there’s no animation involved—but it could do something, if you wanted. Now, we’ll use the startDrag and stopDrag methods to let the user control its location:
- Make sure the target_mc movie clip is selected and open the Actions panel.
- Add the following code:
on (press) {
this.startDrag();
}
on (release) {
this.stopDrag();
}
The startDrag method has 4 arguments, none of which we need to use. By omitting the arguments, we let the user’s mouse movement direct the movement of the movie clip. Notice that the startDrag action is contained in an on(press) event handler, and the stopDrag method is contained in an on(release) handler. When the user presses the mouse button, the startDrag action is executed. The object is dragged as long as the user continues to press the button. When the user releases the mouse button, the stopDrag action is executed, effectively “dropping” the target.
- Save and test the movie. There’s no need to click the play button—we haven’t added any code that prevents the drag and drop actions from happening before the play button is clicked. Move the target around on screen to see how it behaves.
