The Flash MX Drawing API
Marc Majcher
flash-drawing-API@majcher.com
http://www.majcher.com/blabla/FlashDrawingAPI/
November 19, 2003
The Flash MX Drawing API
The Flash MX Drawing API
The Flash MX Drawing API
The Flash MX Drawing API
or
Making Programmer Art Hurt Less
Introduction
Hi, I'm Marc, and I'm a Flash Nerd.
What Is It?
Drawing API? What?
What Is It?
Drawing API? What?
API = Application Programming Interface
What Is It?
Drawing API? What?
It's a set of functions that allows you to draw
stuff in Flash, using ActionScript instead of
the drawing tools.
Why Use It?
Why draw with code?
Why Use It?
Why draw with code?
It allows you to generate more dynamic graphics.
Why Use It?
Why draw with code?
It allows you to generate more dynamic graphics.
It lets you drive your interfaces with data.
Why Use It?
Why draw with code?
It allows you to generate more dynamic graphics.
It lets you drive your interfaces with data.
It's fun!
Why Use It?
Why draw with code?
It allows you to generate more dynamic graphics.
It lets you drive your interfaces with data.
It's fun!
It obscures the shocking truth.
Why Use It?
The Old Way
Why Use It?
The Old Way
Create a line symbol, duplicate, position, resize...
Why Use It?
The Old Way
Create a line symbol, duplicate, position, resize...
That Sucks.
Why Use It?
The Old Way
Create a line symbol, duplicate, position, resize...
That Sucks.
Slow, clunky, hard to maintain. But it's all we had.
Why Use It?
The New Way
Use Flash MX built-in drawing methods.
Why Use It?
The New Way
Use Flash MX built-in drawing methods.
Fast, easy, no library clutter.
How Does It Work?
How Does It Work?
How Does It Work?
How Does It Work?
Flash uses a "virtual pen" to draw in a MC
How Does It Work?
Enough Jibba-Jabba! Let's see some code!
Flash Drawing API
Draw using the methods of a MovieClip
Flash Drawing API
Draw using the methods of a MovieClip
Use _root, or whatever's handy, or create a new one
Flash Drawing API
Draw using the methods of a MovieClip
var canvas = _root.createEmptyMovieClip("example", 999);
Flash Drawing API
Set Line Style
Flash Drawing API
Set Line Style
line width, color, alpha
Flash Drawing API
Set Line Style
line width, color, alpha
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.lineStyle( 2, 0xFF9900, 100 );
Flash Drawing API
Move the pen
Flash Drawing API
Move the pen
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.lineStyle( 2, 0xFF9900, 100 );
canvas.moveTo( 100, 100 );
Flash Drawing API
Draw a line (Finally!)
Flash Drawing API
Draw a line (Finally!)
Draws from current position to (x,y)
Flash Drawing API
Draw a line (Finally!)
Draws from current position to (x,y)
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.lineStyle( 2, 0xFF9900, 100 );
canvas.moveTo( 100, 100 );
canvas.lineTo( 300, 250 );
Flash Drawing API
Draw a line (Finally!)
Draws from current position to (x,y)
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.lineStyle( 2, 0xFF9900, 100 );
canvas.moveTo( 100, 100 );
canvas.lineTo( 300, 250 );
Flash Drawing API
Drawing Curves
Flash Drawing API
Drawing Curves
Little bit trickier, but basically the same.
Flash Drawing API
Drawing Curves
Little bit trickier, but basically the same.
Draws from current position to (x,y), with a control
point.
Flash Drawing API
Drawing Curves
Little bit trickier, but basically the same.
Draws from current position to (x,y), with a control
point.
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.lineStyle( 2, 0xFF9900, 100 );
canvas.moveTo( 100, 100 );
canvas.lineTo( 300, 250 );
canvas.curveTo( 200, 100, 350, 200 );
Flash Drawing API
Drawing Curves
Little bit trickier, but basically the same.
Draws from current position to (x,y), with a control
point.
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.lineStyle( 2, 0xFF9900, 100 );
canvas.moveTo( 100, 100 );
canvas.lineTo( 300, 250 );
canvas.curveTo( 200, 100, 350, 200 );
Flash Drawing API
Drawing Curves
Flash uses quadratic bezier curves
Flash Drawing API
Fills and Gradients
Flash Drawing API
Fills and Gradients
It's pretty darn easy.
Flash Drawing API
Fills and Gradients
Set fill color and alpha
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.beginFill( 0x0022CC, 80 );
canvas.lineStyle( 2, 0xFF9900, 100 );
canvas.moveTo( 100, 100 );
canvas.lineTo( 300, 250 );
canvas.curveTo( 200, 100, 350, 200 );
canvas.lineTo( 100, 100);
canvas.endFill();
Flash Drawing API
Fills and Gradients
Set fill color and alpha
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.beginFill( 0x0022CC, 80 );
canvas.lineStyle( 2, 0xFF9900, 100 );
canvas.moveTo( 100, 100 );
canvas.lineTo( 300, 250 );
canvas.curveTo( 200, 100, 350, 200 );
canvas.lineTo( 100, 100);
canvas.endFill();
Flash Drawing API
Fills and Gradients
Gradients are pretty much the same, only with more stuff.
Flash Drawing API
Fills and Gradients
Gradients are pretty much the same, only with more stuff.
canvas.beginGradientFill( fillType, colorArray, alphaArray, ratioArray, matrix );
Flash Drawing API
Fills and Gradients
Gradients are pretty much the same, only with more stuff.
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.beginGradientFill( "linear", [ 0xFF0000, 0x0000FF ],
[ 100, 100 ], [ 0, 0xFF ], { a:200, b:0,
c:0, d:0, e:200, f:0, g:200, h:200, i:1} );
canvas.lineStyle( 2, 0xFF9900, 100 );
canvas.moveTo( 100, 100 );
canvas.lineTo( 300, 250 );
canvas.curveTo( 200, 100, 350, 200 );
canvas.lineTo( 100, 100);
canvas.endFill();
Flash Drawing API
Fills and Gradients
Gradients are pretty much the same, only with more stuff.
canvas.beginGradientFill( "linear", [ 0xFF0000, 0x0000FF ],
[ 100, 100 ], [ 0, 0xFF ], { a:200, b:0,
c:0, d:0, e:200, f:0, g:200, h:200, i:1} );
Flash Drawing API
Cleaning up your mess
Flash Drawing API
Cleaning up your mess
canvas.clear();
Flash Drawing API
Cleaning up your mess
canvas.clear();
animation, removing boggy redraw, OCD, etc...
The Good Stuff
And now, the fun stuff.
The Good Stuff
And now, the fun stuff.
Unfortunately, I'm out of time. Bye!
The Good Stuff
Drawing shapes
Rectangles...
The Good Stuff
Drawing shapes
Polygons...
The Good Stuff
Drawing shapes
Circles and wedges...
The Good Stuff
Drawing shapes
Circles and wedges...
The thing about circles in Flash is, they're not really circles.
The Good Stuff
Drawing shapes
Circles and wedges...
The thing about circles in Flash is, they're not really circles.
If you haven't noticed it by now, don't worry about it.
The Good Stuff
Custom Drawing Methods
You can add your own methods to MovieClip object
The Good Stuff
Custom Drawing Methods
You can add your own methods to MovieClip object
MovieClip.prototype.drawRect = function(x, y, w, h) {
this.moveTo(x, y);
this.lineTo(x + w, y);
this.lineTo(x + w, y + h);
this.lineTo(x, y + h);
this.lineTo(x, y);
}
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.lineStyle( 8, 0x000066, 100 );
canvas.drawRect( 100, 100, 300, 200 );
The Good Stuff
Custom Drawing Methods
You can add your own methods to MovieClip object
var canvas = _root.createEmptyMovieClip("example", 999);
canvas.lineStyle( 8, 0x000066, 100 );
canvas.drawRect( 100, 100, 300, 200 );
Go Nuts
So, time to do cool stuff.
Go Nuts
So, time to do cool stuff.
Go Nuts
So, time to do cool stuff.
Go Nuts
So, time to do cool stuff.
Go Nuts
So, time to do cool stuff.
The End
Game Over
The End
Game Over
Thanks, see you next time!
Marc Majcher
flashfanatic@majcher.com
http://www.majcher.com/shock/
http://www.majcher.com/blabla/