In this lesson, I will show you how to create a an interactive sketchpad on
which you and your users can draw. The sketchpad features an interface which
allows you to change the thickness and the color of the line.
With this tutorial, you will learn:
How to create simple buttons and tell them what to do via ActionScript,
How to easily duplicate them,
What are the drawing functions in ActionScript,
What are movie clip and button events and how to use them
and more.
Play around with the sketchpad below to see what you'll learn to create!
Creating the interface background
1. Open a new Flash document. Call the first layer
interface bkg. It is here that you'll draw the background that
delineates the interface for your flash sketchpad.
2. Select the Rectangle tool (R). Draw a
rectangle on the stage that is 100 pixels wide. The rectangle's height isn't
important, because you'll be adjusting it in a moment.
3. Select the rectangle by clicking on it with the Selection
tool (V). Open the Align panel (Window >
Align).
In the Align panel, turn on the "Align/Distribute to stage" button (see 1 on
the image below). Next, click on the "Match height" button (2) to make the
rectangle's height equal that of the stage.
To put the rectangle nicely on the right side of the stage, click the "Align
right edge" (3) and "Align top edge" (4) buttons. Your final result should look
like the one seen on the image below.
Lock the interface bkg layer.
Creating the buttons that will let the user choose the line thickness
4. Make a new layer and call it line thickness
buttons.
5. Again, select the Rectangle tool (R). In
the Properties panel, select black as outline color and white as fill color.
Select "hairline" as type of line.
6. Draw a rectangle (about 60 pix wide and 25 pix high) in
the upper portion of the interface background you just made awhile ago.
7. With the Selection tool (V),
double-click on the rectangle's white fill to select both the fill and the
outline.
8. Select Modify > Convert to Symbol. In
the dialog window that appears, select Button as type, call it line
thickness 0 and click OK.
9. Now, don't click anywhere and don't touch anything! :) If
your button is still selected (and it should be, check that in the Properties
panel - it should display a button icon on its left side), just press
Ctrl+C (Cmd+C on a Mac) to copy it.
Next, select Edit > Paste in Place. You have just pasted
a copy of the button exactly on top of the original.
Again, don't click anywhere. Hold Shift and press two or
three times the down arrow key on your keyboard to move the new
copy of the button below the original one.
Repeat this operation, making a third button. Your buttons should be
perfectly vertically aligned, like the image below shows you.
10. Double-click on any of the three buttons on the stage.
You'll enter inside the button symbol's timeline, which you can see by the
change that appears above the scene: the button's timeline is different than
that of the main stage and there is a sign telling you that, too. It bears the
symbol's name: line thickness 0.
11. Call the first layer background and lock
it.
12. Create a second layer (still inside the button) and call
it line.
13. Select the Line tool (N). Make sure
that the type of line is still set to hairline in the Properties panel. Hold
Shift and draw a horizontal line that fits inside the rectangle
below it.
You'll certainly notice that the line has appeared in all of the three
buttons situated on the stage. Dont be alarmed! :) That's perfectly normal.
Since you entered inside this button symbol, once you make a change inside
it, every single instance (copy) of it will be affected. That is because you
made copies (multiple instances) of the same button symbol. You will make
separate buttons for the other two types of line thickness in a moment.
As for now, don't lock the line layer.
Duplicating the buttons and swapping them on the main scene
14. Return to the main scene by clicking on the "Scene 1"
link above the timeline.
15. Open the Library (Window > Library).
You will see your button symbol inside it.
16. Right-click on the line thickness 0 button and
select Duplicate from the menu.
Call the new button line thickness 3.
17. Double-click on the newly created button inside the
Library. You will enter inside it.
18. Using the Selection tool (V), click
once on the thin line situated in the line layer to select it.
19. In the Properties panel, to the left of the line type
drop-down menu, write 3 inside the small field and hit Enter to
confirm. The type of line will automatically jump to "Solid".
Fine. you have just made the button for the second type of line
thickness.
20. Repeat the steps 16 through 19:
Right-click on any of the two button symbols inside the Library. Call the
new symbol line thickness 6.
Double-click on the new button.
Select the line inside it and make its thickness 6 in the Properties
panel.
Return to the main scene. You shall now see how easy it is to put the newly
made buttons on the scene, without having to pull them out of the Library and
set their position manually.
21. Click once on the middle button on the stage with the
Selection tool (V) to select it.
Don't double-click on it, because you will enter
inside it, and you don't want that.
22. Go to the Properties panel and click on the Swap
button.
In the dialog box that appears, select line thickness 3 and click
OK. You just changed the button on the main scene the easiest way possible. Now
ain't Flash cool? :)
23. Repeat this once again: select the third button on the
scene, click on the Swap button, select line thickness 6 and click OK.
You should now have three distinct buttons on the main scene, for different
kinds of line thickness your users will draw with.
This part of your sketchpad's interface is in place, but there is still one
more thing to do: giving them Instance names. You'll have to do this if you want
to tell the buttons what to do via ActionScript from the main timeline. This is
very practical, that's why I encourage you to do it in all your projects.
24. Select the first button by clicking on it once with the
Selection tool (V). Go to the left side of the Properties panel
and write line0 inside the Instance name field. Hit
Enter to confirm.
That's a zero at the end of the Instance name (line0), not the
letter O. It makes sense, because these buttons will serve for choosing a line
thickness. You can give it an Instance name other than the one I suggested, but
stick to the rules of assigning Instance names.
REMEMBER You can name your buttons any way you
like, but there are some rules to be followed. For example, you can call it
line0, but not 0line. Because an Instance name can
contain numbers, but cannot begin with a number. Also, you cannot use special
characters, like spaces, punctuation marks, hashes etc. Remember that
ActionScript is a case-sensitive programming language. An Instance name called
lineThicknessZero is not the same as
linethicknesszero.
25. Assign Instance names to the remaining two buttons: call
them line3 and line6, respectively.
Cool! Let's move on to the buttons which will serve for choosing the color
with which a user will draw.
Lock this layer.
Making the buttons for color selection
26. Make a new layer and call it color buttons.
27. One more time, select the Rectangle tool
(R). In the Properties panel, select hairline as line type.
Choose black as outline color and pure red (#FF0000) as fill colour.
Hold Shift, click and start dragging to draw a square. Make
a small square just below the existing buttons.
28. Select the square (both the outline and the fill). Hit
F8 (or select Modify > Convert to Symbol)
to convert it to a symbol. Select Button as type, call it red button
and click OK.
You will now duplicate this button, the same way you duplicated the line
thickness buttons in the previous section.
29. Go to the Library (Ctrl+L), right-click
on the red button symbol and select Duplicate. Call the new button
green button (or blue, yellow, whichever color you prefer).
30. Double-click the green button in the Library to
enter inside it. The graphics (the square) inside it will already be
selected.
31. Just go to the Tools or Properties panel, click on the
small fill colour selecting case, and choose the green colour.
32. Return to the main scene by clicking on the "Scene 1"
link above the timeline.
33. Click once on the small red button on the main scene to
select it. Again, like you did before,
copy it (Ctrl+C)
paste it in place (Ctrl+Shift+V)
move the copy by holding Shift and using the
arrow keys
click the Swap button and select green button, click OK
34. Select the red button, go to the Properties
panel and give it the Instance name colorRed.
Repeat the same thing with the green button - give it the Instance
name, like colorGreen for example.
You can make additional color buttons - as many as you like. For the sake of
not repeating the same thing, I'll proceed with the tutorial with just two color
buttons. You understand the principle, so it won't be a problem for you to add
more buttons and write additional code for them.
Lock the color buttons layer.
Inserting the ActionScript code that powers the drawing pad
26. Make a new layer and call it actions. Select
this layer's first keyframe by clicking on it.
27. Select Window > Actions (or press
F9) to open the Actions panel. Enter the following code inside
it:
Test your movie (Control > Test Movie). Draw something.
Be creative! Draw a masterpiece and send it over to the Louvre museum. :)
Now, if something doesn't function as intended, check out if you gave
Instance names to all of the interface buttons, and also that you wrote those
names exactly the same in your ActionScript code.
Everything should function smoothly. But! You may have noticed that the lines
that you are drawing are lagging behind the cursor. That is especially true if
you have made quick movements with your mouse. To correct that, go back to your
document.
28. Select Modify > Document.
Change the speed of your movie, by entering 30 in the Frame Rate field. Click
OK.
Test your movie again (Ctrl+Enter on a PC,
Cmd+Enter on a Mac). You should see the change immediately when
you start drawing in your flash movie.
Explaining the ActionScript behind the interactive sketchpad
Let me explain you now what each line of ActionScript exactly does.
The first two lines define two variables and their respective values.
lineThickness = 0; selectedColor = "0x000000";
The lineThickness variable is set up at the beginning to be used
later to define the starting thickness of the line a user will draw with. This
is a numerical value, which can range from 0 (the finest possible line) to 100
(enormous line). The next variable, selectedColor, defines the
starting drawing color, which is black in this case. This is a hexadecimal value
and has to be written between quotation marks.
Next, two movie clip events are defined, onMouseDown and
onMouseUp.
And just what are events? Events are things that happen while your SWF is
running and/or a user interacts with it. An event can be, for example, when a
user has clicked a button, moved his mouse, when a sound has finished playing, a
file has been loaded, etc.
In ActionScript, there are button events and movie clip events. Button events
are concerned mostly with the user interaction with them. Movie clip events are
far more powerful and include not only user interaction, but a plethora of many
other very useful things.
The onMouseDown movie clip event happens when the user presses
the mouse button, anywhere on stage. So, when a user clicks, this particular
event occurs. You can tell Flash what to do when this happens, which is exactly
what is going on in the line
_root.onMouseDown = startDrawing;
Let's go over each element and see what it does. The first ActionScript
keyword, _root, points to the main timeline, or the root level,
level 0, the flash movie itself. You cannot write an event like this:
onMouseDown = ...etc
A movie clip event has to be tied to a movie clip to function properly. So,
you could write
myMovieClipName.onMouseDown = ...etc
But, there is no need for you to create a separate movie clip that will be
associated with the onMouseDown event, because the
_root timeline is treated as a movie clip.
On the right side of the equals sign there is the word
startDrawing, followed by a semicolon. This is a name of a function
that comes later in the code. To sum it up, every time the user clicks her
mouse, this function (startDrawing) will be executed.
The next line is similar to the previous one:
_root.onMouseUp = stopDrawing;
Whenever a user releases the mouse button, a function will be executed - the
stopDrawing function in this case. Note that the
startDrawing and stopDrawing functions aren't built-in
ActionScript functions, I wrote them myself. I could have called them
beginDrawing, startToTrace, or any way I liked, I just
chose the names in this example as most intuitive and easy to remember.
Now comes the first function:
function startDrawing() { if
(_xmouse<455)
{ _root.lineStyle(lineThickness,
selectedColor); _root.moveTo(_root._xmouse,
_root._ymouse); _root.onMouseMove =
drawLine; } }
Inside the function, there is an if conditional statement. It
says that if the current position of the user's mouse (_xmouse) is
less than 455, the code lines between its curly braces can be executed. If it is
not (i.e. if the mouse x position is equal to or greater than 455), nothing will
happen.
Why this? Simply to make the functionality of the movie better. The x
coordinate at point 455 is where the interface (the background rectangle)
begins. So, even if a user could click on a button with no problems, I prefer to
tell Flash not to draw if the mouse has been pressed over the interface.
If you start drawing in the white area and continue moving your mouse inside
the interface area and come back inside the white zone, you will see that your
line isn't interrupted. I merely told Flash not to start drawing inside the
interface area - not to react to a click inside this zone, so that the clicks
will react only to the buttons.
Even if you ommited this conditional statement, you wouldn't draw over the
interface because the code has been set up to draw on the _root
level, or level zero, which is below all the other layers inside Flash.
Ok, let's see what happens when you start drawing inside the appropriate area
then.
The lines that get executed once the condition is true (_xmouse
is less than 455) are the following three:
The first one contains the obligatory method (command) that must be written
if you want to draw with ActionScript in Flash: the lineStyle
method. Before you can draw programmatically, you must define the
characteristics of the line.
So the parameters inside the lineStyle method, inside the
parentheses are the thickness of the line and its color. You can also define its
degree of transparency (its alpha property) if you want. If you omit it like I
did, Flash will consider the line as fully opaque - its alpha set to 100%. I
won't go into much detail here, if you want to know more on this method, read my
tutorial
on basic drawing with ActionScript.
Inside the parentheses, I have put two variables: lineThickness
and selectedColor. If you remember, these two are defined at the
outset of your ActionScript code. So, if the user hasn't clicked on any buttons
to change them, the thickness will be 0 and the color will be black.
The next line,
_root.moveTo(_root._xmouse,
_root._ymouse);
uses the moveTo method to move the starting point for drawing.
If you don't specify a starting point, Flash will take the default value where x
and y both equal zero (starting point 0, 0), which is the top left corner of the
stage.
And the starting point for drawing is the current position of the user's
mouse, the coordinates of which are read from the _xmouse and
_ymouse variables. These two are ActionScript keywords which are
used to detect the current position of the mouse inside the stage or a movie
clip.
What this basically does is, when a user clicks to start drawing, she will
start drawing from the point where the click occured.
Then comes another event:
_root.onMouseMove =
drawLine;
The onMouseMove event happens anytime the mouse is moved. So,
every time this happens, you tell Flash to execute a function - the
drawLine function.
function drawLine()
{ _root.lineTo(this._xmouse, this._ymouse); }
This function has a method inside it, the lineTo method. This
method draws a line from the previous point (the starting one, defined with the
moveTo method awhile ago) to the point defined between the
parentheses. Again, this point is equal to the current position of the mouse,
found through the _xmouse and _ymouse properties.
The keyword this is used instead of _root, to show
you that they mean the same. The this keyword points to the
timeline it is situated on. Since the ActionScript code is situated on the
keyframe on the main timeline, it equals _root.
The last function,
function stopDrawing() { delete
this.onMouseMove; }
defines what happens when the user has released her mouse. Remember the
line
_root.onMouseUp = stopDrawing;
from the start of your code? This event, onMouseUp, happens when
the user has released the mouse button anywhere on stage. So, the function
deletes the onMouseMove event and stops it from happening. And the
drawn line ends.
To resume:
The user clicks with her mouse inside the drawing area.
The onMouseDown event is fired, which in turn calls the
startDrawing function.
The startDrawing function sets the style (thickness and
color) for the line, moves the starting drawing point to the current position
of the mouse and defines the onMouseMove event.
The onMouseMove event calls the drawLine
function. Since this event is happening every fraction of a second the mouse
is moved, this function gets executed repeatedly, over and over again.
The drawLine function draws a line from the last point
registered, to the current position of the mouse.
The user releases her mouse button.
The onMouseUp event is fired, which in turn calls the
stopDrawing function.
The stopDrawing function deletes the onMouseMove
event and therefore stops the drawing process.
What this in fact does is that there aren't any curved lines being drawn
here. If you draw a nice curve with this small application, you really drew
dozens of small straight lines which are connected and so closely placed near
each other that they seem like a curve.
Whew! That was nice and cool, now wasn't it? All that remains to be explained
is the functionality of the buttons. These are simpler then the previous code.
But wait, before you continue, I just want to give you a small piece of
advice.
REMEMBER Everything IS easy once you learn how to
do it. Even surgery and rocket science, yes. In my vocabulary, the words
"problem" and "difficult" DO NOT EXIST. There are only solutions and easy things
you learned how to do.
On to the little interface buttons!
I'll explain just a single button from each group, because the logic is
exactly the same for the remaining ones.
Let's take the button that sets the line thickness to 3, for example.
The first thing you bump into in the code above is the Instance name of the
button - line3. So, when you say to Flash
line3.onPress = function() {
you tell it that when the button called line3 is pressed, a
function will be executed. Here you encounter the onPress button
event. Unlike the onMouseDown movie clip event, which happens at
the moment the mouse button is clicked anywhere on stage, this button event
happens only and exclusively when that particular button has been pressed.
Then the function is being run. The code inside the function consists of a
single line of code, which sets the value of the lineThickness
variable to 3. And it will stay this way until some other button defining the
line thickness has been pressed.
A button is pressed, a function which sets the value of the
selectedColor variable is executed and the color of the next line
that will be drawn is changed.
Ta-daaaa! That's it! You just learned what all the code does and a lot more.
Apply and use this knowledge in your Flash projects and keep on learning!
Oh yes... just one more little thing. The resulting SWF from this
tutorial has a file size of just 635 bytes!!! That's less than 1
KB!
You can download the source files for this project below. The second link is
for downloading the example seen on top of this page, with all the seven
colors.
