How Do I Draw with Code?: Chapter 12 - ActionScript 3.0 Quick Reference Guide
by David Stiller, Rich Shupe, Darren Richardson, Jen deHaan
This excerpt is from The ActionScript 3.0 Quick Reference Guide. If you're ready to give your Flash projects a considerable performance boost, learning ActionScript 3.0 is a must. This Quick Answer Guide is designed specifically to help Flash designers and developers make the leap from ActionScript 2.0 to the new object-oriented ActionScript 3.0 quickly and painlessly. You'll learn key differences between the two language versions, allowing you to more easily leverage ActionScript 3.0 using Flash CS4 and other Adobe technologies like Flex and AIR.
Table of Contents
- 12.0 Introduction
- 12.1 Creating a Display Object Dynamically
- 12.2 Referencing an Object’s Graphics Property
- 12.3 Defining a Line Style
- 12.4 Drawing a Line
- 12.5 Drawing a Curve
- 12.6 Defining a Fill Style
- 12.7 Drawing a Rectangle
- 12.8 Drawing a Rectangle with Rounded Corners
- 12.9 Drawing a Circle
- 12.10 Creating a Gradient Fill
- 12.11 Using a Drawn Shape as a Dynamic Mask
- 12.12 Caching Vector as Bitmap
- 12.13 Applying a Simple Bitmap Filter
In addition to importing assets, or creating them in the Flash authoring environment, you can include assets in your projects by drawing them dynamically with ActionScript at runtime. Much of the last half of this book will take advantage of this approach to minimize the number of custom assets required, and let you generate content exclusively with code. For that reason, this section starts off with a brief introduction to drawing with code.
A code-only approach doesn’t easily offer the artistic range afforded if you can use imported or hand-drawn assets, but significant tradeoffs include increased flexibility and reduced file size. Indeed, an entirely new creative horizon becomes available with code-generated art, and using ActionScript combined with previously created assets is, of course, the best of both worlds.
You have two primary methods of drawing with code: manipulating
vectors with the Graphics class, and
manipulating pixels with the BitmapData
and/or related classes. This chapter will primarily focus on the former,
but will also discuss a few simple pixel-based techniques, such as bitmap
caching and basic filters.
Note
To effectively demonstrate some of the concepts in this chapter, you need to use a display object or two. Part I, “ActionScript 3.0 Introduced” and Part II, “ActionScript and the Flash CS4 Authoring Tool” of this book covered the creation and use of display objects throughout, and you’ll look at some of those concepts again in Chapter 13, How Do I Work with the Display List?. For clarity, however, the first recipe in this chapter reviews the process of creating a display object into which you can draw, since you need a display object for the subsequent recipes.
Use the new keyword to create
an instance of a class that is part of the DisplayObject class hierarchy,
and then add it to the display list.
Display objects and the display list are covered in more detail in Chapter 13, How Do I Work with the Display List?. However, in case you haven’t yet read the first half of this book, you’ll find it handy now if you know just enough about the display list to create an empty display object to serve as a canvas on which you can draw with code. The combination of creating a new display object and drawing on it with the techniques discussed here lets you create code-only movie clips, sprites, buttons, and more.
All display objects can be created using the new keyword. The following two examples create
a movie clip and sprite, respectively:
var mc:MovieClip = new MovieClip(); var sp:Sprite = new Sprite();
Neither the movie clip nor the sprite, however, is ever visible to
the user unless you add them to the display list. To add a display
object to the display list, use the addChild() method. The following, for example, adds the previously created
sprite to the display list:
addChild(sp);
In this scenario, the sprite would be visible because you added it to the display list, but the movie clip would not be visible. (So far, the sprite has no content but is still technically viewable as an empty canvas. The remainder of this chapter will show how to draw into the sprite.) The movie clip, however, cannot be seen even if it already has content, until you add it to the display list.
