Flash ActionScripting Beginner's Challenge: Basic Drawing Application

My End Result

Did you take on the challenge? I did, in an attempt to improve and upgrade the basic application that I created as an example. What I came up with was a paint application whose construction is broken down in the following lessons:

• Deconstructing the Paint Application I: Setup, Skins, Canvas Color, Help File
• Deconstructing the Paint Application II: The Brush Tool and the Flash Drawing API
• Deconstructing the Paint Application III: The Line Tool
• Deconstructing the Paint Application IV: The Oval Tool
• Deconstructing the Paint Application V: The Rectangle Tool
• Deconstructing the Paint Application VI: The Gradient Rectangle Tool
• Deconstructing the Paint Application VII: The Text Tool
• Deconstructing the Paint Application IIX: User Layers, Clear Layers
• Deconstructing the Paint Application IX: Brush Size and Opacity Sliders
• Deconstructing the Paint Application X: Color Palettes
• Deconstructing the Paint Application XI: Gradient Tool Options
• Using setTransform to Change Color and Opacity

The application features:

• Multiple skin colors to personalize the interface.
• The option to change the base canvas color.
• Two different working layers.
• A removable guide grid.
• Standard brush with user-set size, opacity, and color.
• Opacity and brush size settings that can be entered manually or set using a slider.
• Both a basic and advanced color palette, as well as the option to enter custom hex values for colors.
• A solid fill line tool with opacity, color, and thickness controls.
• A solid fill ellipse tool with opacity and color controls.
• A solid fill rectangle tool with opacity and color controls.
• A gradient rectangle tool with opacity and color controls for both starting and ending colors, as well as angle settings to control the gradient direction.
• A text tool that allows color changes, size changes, bold, and italics.
• A “clear layer” option that only deletes the contents of the current active layer, leaving the rest of the drawing intact.
• Custom cursors based on the tool used, which reflect the color and opacity chosen in certain instances while reverting to the basic mouse cursor when certain windows are active or when selecting tools.
• Menu button highlights to mark which tool is currently selected.
• A tabbed help content menu explaining each tool.

As you can see, it’s a bit more complex than the original version. Some of the functions that I used are:

swapDepths;

setRGB;

setTransform;

The Flash Drawing API tools, including lineTo, moveTo, curveTo, beginFill, and beginGradientFill;

createEmptyMovieClip;

Dynamic and Input text fields

;

Dynamic text properties;

Listeners;

_visible;

Mouse.hide( ) and Mouse.show( ) ;

A huge mess of onClipEvents; and,

An even bigger stack of if statements.

The great thing about using Flash for an application like this is that it’s very easy to share with others so that they can install it on their website. All they have to do is download the file, then upload it to their own server and embed the proper code into their web page:

<!--SkinsSkinsLayer:HEXADECIMAL000000Select a ToolColorBrush Size2Opacity100Gradient OptionsColor 1 Alpha0000FF100Color 2 AlphaFF0000100Angle (0-360)0Text OptionsGradient Options12--><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="800" HEIGHT="600" id="oekakiv1.1" ALIGN="">
<PARAM NAME=movie VALUE="http://www.yourdomain.com/yourfolder/oekakiv1.1.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#000000>
<EMBED src="http://www.yourdomain.com/yourfolder/oekakiv1.1.swf" quality=high bgcolor=#000000 WIDTH="800" HEIGHT="600" NAME="oekakiv1.1" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>

The only edits needed are to replace "www.yourdomain.com" with the URL of your website, and replace "yourfolder" with the name of the folder that you uploaded the swf file into.

Now that the initial challenge is over, the real challenge will begin: deconstructing the entire application, one tool at a time, to explain in detail how each was created and explore the Flash Drawing API. Or, if you just want to play around, go have a little fun and draw!