Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

Create a Basic Drawing Application in Flash

by

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in August, 2009.

In this tutorial, we'll create a Drawing Application with basic functions and an easy to use interface. Feeling artistic? Then let's go..


Step 1: Overview

This application will feature a series of tools such as pencil, eraser, text tool, and also the possibility to save your drawing in png format using the Adobe's PNG Encoder.


Step 2: Setting Up

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600x350px and the frame rate to 25fps.

””

Step 3: Board

Draw a 600x290px white rectangle and convert it to MovieClip. Set its instance name to "board" and align it to the top-left of the stage.

This will be the area on which we'll be able to draw.


Step 4: Tools Panel

Create a 600px wide 60px high gray (#DFDFDF) rectangle and align it to the bottom of the stage. This will be our background for the Tools Panel.


Step 5: Tool Icons

I'm not going to cover the creation of the tools icons since that isn't the intention of the turorial, still, you can see how they are made in the Fla file included in the Source.

As you can see in the image, we're going to use two icons, one in a gray tone and the other one in color.

Convert the gray pencil icon to a Button (F8) and name it "pencilTool", double click to edit it and add a KeyFrame (F6) in the "over" state. Here's where we're going to put the color version of the icon.

Lastly, add another KeyFrame in the "hit" state, and draw a 30x30px square to act as the button's hit area.

Repeat this process with all your tool icons, don't forget to give them the correct instance names (eraserTool, textTool, saveButton, clearTool).

In order to display the active tool icon, we're going to use the color version of the icon and place it in the same position of the button we created before. The instance names will be "pencil", "eraser" and "text".

We'll hide these icons later using ActionScript.


Step 6: Save Dialog

When we use the save option we're going to display a "save successful" message.

Create a 600x350px black rectangle with 50% alpha to use as a background.

Add a black rounded rectangle in the center with the save button icon and some text indicating that the save has been completed.

Create a close button and align it in the top-left of the rounded rectangle, name it "closeBtn". As you can imagine, this button will close the Save Dialog.

Convert all the elements to a single MovieClip and mark the "Export for ActionScript" checkbox. Set the Class textfield to "SaveDialog".

We'll instantiate this class when the user presses the SaveButton and the save is completed.


Step 7: Size Panel

The Size Panel is the area where you can change the size of the pencil, eraser and text tool. You can do that by clicking in the panel area or the oval inside it.

Select the Rectangle Primitive Tool, set the corner radius to 4 and create a #EFEFEF 80x50px rectangle. Convert it to a MovieClip and name it "sizePanel".

Open the Filters panel and add a Drop Shadow with the following values:

Now use the Oval Tool to create a 5x5px black circle and center it in the Size Panel, convert it to MovieClip and set its instance name to "shapeSize".


Step 8: Default Colors

We'll create a default color palette instead of using the Color Picker Component.

Create a 22x22px circle using the Oval Tool, set its color to #EEEEEE and convert it to MovieClip. Add the same Drop Shadow Filter we used in the Size Panel.

Draw a second circle of 16x16px and use black for the color this time. Center the circles and repeat this process changing the last circle color to the following:

Align them to end up with something like this:

Convert all the colors to a single MovieClip, name it "colors" and be sure to set the Registration Point to the Top-Left, since we're going to get pixel data using the Bitmap Class.


Step 9: Adobe PNG Encoder

In order to use the Save function we'll need the Adobe PNG Encoder wich is part of the as3corelib that you can find in Google Code.

To use this class outside of the package it comes with as default, we need to change one line. Open the PNGEncoder.as file and change the line "package com.adobe..." to just "package". This will let us call the class in the directory where the Fla file is.


Step 10: Main Class

A single Class will handle this application. Open the Properties Panel in the Fla file and set the Document Class as "Main".

Create a new ActionScript Document and save it as "Main.as" in the same directory where the Fla file is.


Step 11: Import Required Classes

These are the classes we're going to need in this app. Remember to check the Flash Help (F1) if you're unsure of a specific class.


Step 12: Extending the Class

We're extending the MovieClip class since we use this class' specific properties and methods.


Step 13: Variables

These are the variables we'll use. They're all explained in the code comments.


Step 14: Main Function

The main function will take care of setting the Text Format of the Text Tool, converting the Colors MovieClip to Bitmap Data so we can extract the Pixels RGB Value, adding the listeners and hiding the active icons.


Step 15: Tools Actions

The tools actions are each split into four functions.

The first one will set the tool to its Active state, the second and third ones will handle the Mouse Events (like Drawing or Erasing) and the fourth one will stop those Events.


Step 16: Pencil Tool

These functions handle the Pencil Tool, read the comments in the code for a better understanding.

The set to active function:

The Start function; this function is called when the Board MovieClip is pressed.

The Draw function; called when the user presses the Board MovieClip and moves the mouse.

Stop function, executed when the user releases the mouse.


Step 17: Eraser Tool

The Eraser Tool is pretty much the same as the Pencil Tool, except that we don't use any color other than White.

As you can see, the code is the same except for the White color changes.


Step 18: Text Tool

The Text Tool has only two functions; one in charge of setting it to active, and the other one for handling the text writing. Let's take a look:

This one was easy, remember that you can change the size and color using the shapeSize and the Colors MovieClips.


Step 19: Save Option

The save option handled by the saveButton will make use of the Adobe's PNGEnconder Class to save the artwork as a PNG file.


Step 20: Clear Tool

The Clear Tool will add a white screen in front of all the elements in order to leave the board ready to draw again.


Step 21: Get Colors Value

To get the value of the colors we're using in the Colors MovieClip, we convert it to a BitmapData Object and use the getPixel method to obtain the RGB value of the pixel clicked.

We'll add the chooseColor listener in the addListeners function later in the code.


Step 22: Active Tool

Earlier, we declared a variable to set the active or current tool in use, and we call this function to remove the corresponding listeners in order to have just one active tool.

Basically, the function checks the "active" variable in a switch loop, then depending on its value removes the listeners it has.

We also need to highlight the active tool and hide the other ones:


Step 23: Shape Size

We click the Size Panel or the ShapeSize MovieClip to change the size of the Pencil, Eraser and Text Tool. The size is changed in intervals of 5, and is reset when the size is bigger or equal to 50. Take a look at the code:


Step 24: Add Listeners

A function to add all the listeners.


Step 25: Test

Test your app by pressing cmd+return and check if everything is working as expected.

Use all the tools, colors and functions and start drawing your scene!


Conclusion

This Flash Movie can be easily adapted as a kids drawing application, it has a friendly user interface and basic tools that can teach how the mouse works whilst having some colorful fun in the process.

You can also explore the rest of the as3corelib and read its documentation to learn some new ActionScript features.

Thanks for reading!

Advertisement