sfmultimedia.net

sfmultimedia :: actionscript salons :: drawing api

/

Actionscript Salon #7: The Drawing API

This month we're gonna have some fun! The Actionscript Drawing API allows us to create drawings on the fly at runtime with no buttons, no movieclips, no…nothing. It's pretty simple stuff to learn, but like many an artist's tool, it's one thing to draw a stroke…it's quite something else to paint a picture. So once we've got the hang of it we're going to spend some time looking at beautiful examples of runtime drawing in action.

My thanks to many artists, developers and contributors for providing examples of their work. Each example is credited below.

Relevance/availability: The Drawing API was introduced in Flash MX (Player 6) and continues to be built upon in current versions of the player. Variations of these concepts can be used in AS1, As2 or AS3.

Presentation slides (swf)

Primitive Shapes. Marcus Dickinson (aka Warangel) graciously created these simple examples of primitive shapes drawn using the API.

View swfs:

Line

Polygon

Circle

Dotted Line

Polygon filled with gradient

 

Rectangle

Arc

 

Download the .as files (Zip 4k)

Check out Marcus' site: Diaries of War

Rounded rectangle. Another primitive, courtesty of Yuki at FlashMXFiles.

The AS file is part of the primitives zip above.

Preloader. Another Marcus Dickinson creation. A preloader created totally in code.

Download the as file (2k)

Sinewave. A fun animation showing just how dynamic a dynamically drawn image can be!

Download the .as file (5k)

Games. These games are built almost entirely in code and thus are only a few kilobytes each.

Asteroids. by Marcus Dickinson and Rob Penner.

Download the asteroids.as (12k)

Snake. by Me. For convenience and simplicity, there are some library items here...but the game is basically driven by the Drawing API.

Download the Snake.fla (43k)

Drawing Pad. A simple toy for allowing a user to draw a picture, then replay the drawing.

Download the .as file (3k)

SlitherMask. An example of an animated mask.

Download the .fla (325k)

Dynamic Mask. From Tonk at tonk.tk, a mask which is both animated and interactive.

Download the .fla (246k)

Other Drawing API examples:

Keith Peters' bit-101 lab is always full of great experiments using the API.
http://www.bit-101.com/lab.html

The artist/programmer Eric Natzke is remarkable for his "interaction less ordinary". His live presentations are always inspiring.
http://www.natzke.com (looked at the shapeshift example)

A Natzke creation (look closely at the shadows in the book):
http://welcome.hp.com/country/us/en/msg/corp/flashdreamworks.html

Nice examples of using math to build primitive and not-so-primitive shapes.
http://www.formequalsfunction.com/downloads/drawmethods.html

Just a nice example:
http://www.cleoag.com/labs/flashmx/003/3dsplines1.swf

Grant Skinner created this organizational tool. Individual notes and lines are created with the drawing API.
http://www.gskinner.com/gmodeler/app/run.asp

Todd Yard's PenPad really takes advantage of the API to create a useful drawing tool.
http://www.27bobs.com/components/PenPad_online.html

Keith Peters always loved to get people into friendly competitions. Here are examples from a competition he suggested at were-here using the Drawing API.
http://mx.coldstorageonline.com/files/