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.

buy button

12.0 Introduction

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.


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.

12.1 Creating a Display Object Dynamically


You want to create a display object that will serve as an empty canvas for drawing.


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:


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.

See Also

the section called “13.2 Creating a New Display Object” for more information on creating a display object.

Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13

Next Pagearrow