I’ll admit, that dorky little drawing over there doesn’t look like much; that’s what you get with two minutes, a graphics tablet, and not enough coffee. But the application that made it is the focus of our very first Flash Beginner’s Challenge: the
basic drawing application. Some people call it a paint shop, and another familiar term is
oekaki, but what it boils down to is that you create a canvas in Flash that allows users to draw freehand on-screen, with full control over their colors, opacity, and brush size.
This is a very simplified version of the application, but it should be challenging enough for someone who’s been working with ActionScripting on a beginner to intermediate level.
Your Goal: either create a similar application, or demonstrate the scripting that drives it.
Key Lessons:
Flash Coloring Book with setRGB
Creating Tabbed Content in Flash with swapDepths
ActionScripting Basics: Mouse.hide ( ) and Mouse.show ( )
Hiding and Unhiding Movie Clips using _visible and !
Necessary Application Features:
The ability to paint freehand on-screen, controlled by whether the left mouse button is down or not.
User-determined brush sizes.
A method for the user to enter custom colors by numeric value, either RGB (0-255) or hexadecimal.
User-determined color opacity.
Menu integrity – the paint cannot overlap/obscure the menu.
A Clear/Erase All option.
A Help screen that explains the controls.
Bonus Extras:
A color window that displays the currently active color.
Added opacity adjustments on the color window, with a pattern underneath to show transparency.
A cursor that shows the current brush shape and size, but reverts to the normal mouse when over the menu.
A color picker that displays more than 24 shades (without using built-in scripts; you must code it yourself).
Any other enhancements/improvements that you can think of.
Hint:s check your Flash Help files for references to createEmptyMovieClip, lineStyle, moveTo, and lineTo. We haven’t covered these in our lessons yet, but you should be able to figure them out on your own.
Things to Remember:
If you find yourself doing a lot of drawing and artwork and wondering how to implement it as something the user can manipulate, you’re going in the wrong direction. This is a very code-intensive challenge and all user interaction should use minimal static graphics.
ActionScripting is case sensitive. You have no idea how many times I’ve gotten stuck wondering why the debugger was flipping out on me before I finally realized that I’d typed onClipEvent as onclipEvent for the millionth time.
Related:
Concatenating Strings (from Basic Date Functions)
Basic Password Protection (assigning a text variable)
So take a look at how the example works, and then dive in and give it a shot. If you have any trouble or have any questions, don’t hesitate to e-mail me or post to the forum with either your questions or your results. Got the smarts to figure it out? Then go ahead and show it off.
Stumped? Don’t worry, I’ll be posting the results after giving you some time to stew over it.
