From Adrien-Luc Sanders
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 with the following 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.
Sponsored Links
Learn Animation in FlashHigh quality videos, focusing on Cartoons & generally good animationwww.CartoonSmart.com
Easy Relationship DrawingCreate Ecomaps and Genograms. See Examples. Try it Free!www.Smartdraw.com
3D Drawing SoftwareGreat free information on 3D Drawing Software3DdrawingSoftware.Info
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. Watch this page and this site in the coming weeks for each new lesson. Or, if you just want to play around, go have a little fun and draw!
