Drawing in Flash with ActionScript

You’re probably used to using the drawing tools in Flash to create artwork. Like me, you’re probably familiar with the Pen, Line, Rectangle and Oval Tools within Flash but did you know that Flash includes a drawing API that lets you dynamically create shapes using ActionScript?

Within this tutorial, I’ll introduce to you to the drawing API and show you how to draw simple shapes. We’ll create squares, rectangles, triangles, circles and ellipses, all using ActionScript. You’ll learn how to change the style of lines and add solid and gradient fills.

I’ve used ActionScript 1.0 for the examples in the tutorial and you’ll need at least Flash MX to complete the exercises here. I’ve assumed that you’ve got some experience at working with ActionScript and that you know how to add code in the Actions panel.

You can download the finished files from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

$2.89
- OR -

Overview

Background

Drawing with ActionScript was first introduced within Flash MX and it’s called the drawing API. You can draw within any movie clip by writing the appropriate code. You can draw lines and fills as well as creating curves.

When you’re working with the drawing API, you start with a movie clip. This can be an existing movie clip on the Stage or you can create a new blank movie clip with ActionScript. After you’ve got your movie clip, you’ll follow a similar process each time you draw and the steps are shown below.

  1. Set the line style.
  2. Set the starting point for the line.
  3. Create the line or curve.
  4. If necessary, add a fill or gradient.

You’ll use the following methods in the drawing API.

  • moveTo()
  • lineStyle()
  • lineTo()
  • curveTo()
  • beginFill()
  • beginGradientFill()
  • endFill()
  • clear()

 

Sas Jacobs

Sas JacobsHello. I'm the Principal of Anything Is Possible, an Australian web development business specialising in web applications development and training. I'm interested in using Flash with dynamic content and I've presented at a number of International conferences on topics relating to applications development, XML and scripting components. I have recently released my second print book Beginning XML with DOM and Ajax to match the first one - Foundation XML for Flash. I have a business web site
and a personal web site.

See All Postings From Sas Jacobs >>

Reviews

Be the first to write a review

You must me logged in to write a review.