Actionscript Cookbook

Chapter 4. Drawing and Masking

Introduction

The ActionScript Drawing API, introduced in Flash MX, allows you to draw inside movie clips at runtime. The handful of primitive Drawing API methods let you draw almost any imaginable shape, as demonstrated in this chapter’s recipes. The Drawing API uses a pen metaphor, akin to a CAD line plotter, in which an imaginary pen is moved around the drawing canvas. The pen’s stroke attributes can be customized, and the pen can draw lines or curves. Shapes can be empty or filled. Note that the coordinates are relative to the movie clip’s registration point. Use the MovieClip. _x and MovieClip. _y properties to reposition the entire clip on the Stage.

The Drawing API is a subset of the methods of the MovieClip class, and therefore most of the recipes in this chapter are implemented as custom methods of the MovieClip class. You should add these custom methods to an ActionScript file named DrawingMethods.as (or download the final version from the URL cited in the Preface) and include it in your own projects.

All paths and shapes drawn with the Drawing API are drawn inside the movie clip from which the methods are invoked. For this reason the createEmptyMovieClip( ) method is often used in conjunction with any runtime drawing. The createEmptyMovieClip( ) method does just what its name implies—it creates a new, empty movie clip nested within the movie clip on which it is invoked:

// Create a new movie clip named myMovieClip_mc with a depth of 1 inside of _root.
_root.createEmptyMovieClip("myMovieClip_mc", 1);

You can specify the pen style with the MovieClip class’s lineStyle( ) method and draw lines and curves with the lineTo( ) and curveTo( ) methods. The pen can be repositioned without drawing anything by calling the moveTo( ) method.

Many of these recipes use the custom Math.degToRad( ) method from Recipe 5.12 to convert angles from degrees to radians. Your DrawingMethods.as file should include Math.as from Chapter 5 by using this statement on the first line:

#include "Math.as"

Also see Recipe 5.13 and Recipe 5.14 for an explanation of how to calculate X and Y coordinates using trigonometry, which is called for in some of this chapter’s recipes.