Draw Custom shapes with ActionScript 3.0.

Hello everybody.
In this tutorial we will draw something with ActionScript.After completing this tutorial you will be able to draw unique, random, custom and strange shape (backgrounds), all depends of your imagination. The sketch is easy customizable, you replace my shape with yours and you get different result.

Let’s see how.

1. Go to File – New select Flash file (ActionScript 3.0) and click Ok.

2. In the Properties panel set the color of the stage to black.

3. From the Tools panel select the oval tool. In the Properties panel set the stroke to none and pick a color. On the stage draw a circle. select the circle and in the Properties panel set the width and height to 50.

4.With the circle selected go to Window > Color this will open the Color panel. Set the color panel like in the picture.

You insert a new color handler (that little house shape) by placing the mouse between the existing one and click. When your mouse is between the two existing handlers a plus sign appear beneath him. You can change the color of a handler by double clicking on it.

5. With the circle selected hit F8 to convert it. Set its name to circle, Type to MovieClip and registration point to center and click Ok.

6. On the stage double click on the circle MovieClip to open it. Now we are inside the circle. Select the first frame in the layer 1 and hit F6 nine times, this will insert 9 keyframes.

7.Insert a new layer (Insert > Timeline > Layer) name it actions.Select the first frame of the actions layer hit F9 to open the ActionScript panel and type stop();.Hit F9 again to return to the stage.

8. Select the second frame of the layer_1 go to Window > Color, this will open the Color panel .In the color panel change the first two color from the right. Change the first color to a darker tone (ex dark red) and the next to the same color but a lighter tone. We make this to change the color of our circles.

9. Repeat the 7 step for the remaining frames. When you finish you should have in
layer_1 10 frames and on each frame a circle with different color.

10. Click on Scene 1 to go back to our main stage. Now on the stage you have the circle MovieClip select it and hit delete on your keyboard .This will delete the MovieClip from the stage it still exists in the Library panel.

11. Go to Window > Library, this will open the Library panel. Select the circle MovieClip, right click on it and select Linkage. In the Linkage panel select Export for ActionScript and set the name of the Class to Circle and click Ok. Another window will appear click Ok.

Now our graphical part should be finished. I know that seams to be a lot of steps by these are little steps. I separated the tutorial in more steps to be more readable.
Next let’s write the ActionScript code that makes all the magic.

12. Select the first frame of the layer 1 hit F9 to open the ActionScript panel. Copy and paste the code from below.


1. stage.addEventListener(MouseEvent.MOUSE_DOWN,prepareToDraw);
2. function prepareToDraw(event:MouseEvent):void {
stage.addEventListener(MouseEvent.MOUSE_MOVE,drawGraphics);
stage.addEventListener(MouseEvent.MOUSE_UP,stopDrawing);
}
3. function drawGraphics(event:MouseEvent):void {
var holder:Sprite = new Sprite();
addChild(holder);
var myCircle:Circle = new Circle();
myCircle.gotoAndStop(Math.floor(Math.random()*10));
holder.addChild(myCircle);
holder.x = mouseX;
holder.y = mouseY;
holder.scaleX = holder.scaleY = Math.random()*2+0.5;
holder.rotation = Math.random()*360;
holder.alpha = Math.random()+ 0.7;
}
4. function stopDrawing(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE,drawGraphics);
}


13. Remove the numbers before the lines and hit Ctrl + Enter to test your movie. And Voila! Nothing is happening. Relax nothing is wrong the code works fine. Click and hold down your left button of your mouse and move the mouse over the window. Now you are drawing, pretty cool.

Let’s view the ActionScript code:

-In line 1 we add a MOUSE_DOWN event to the stage. This event fires when our left button of the mouse is pressed. When this happens we call the prepareToDraw() function.

-Inside of prepareToDraw() function we add other two events to the stage a MOUSE_MOVE event (fires when our mouse moves) and a MOUSE_UP event (fires when our mouse is up, is not pressed).

-In line 3 we declared the handler for our MOUSE_MOVE event. This function tells us what is happening when our mouse is moving. Inside the function we create a container for our circle MovieClip and add this container ( var holder) to the display list. Make a object of type Circle (Circle is the class we declared for our circle MovieClip), instruct this object to gotoAndStop at a frame between 1 and 10 (10 represent the frames we have inside our circle MovieClip).
After we add our circle object (myCircle) to the container (var holder), set the coordinates of the holder to be equal with the coordinates of the mouse. Next we assign random values to some properties of our holder (scale, rotation and alpha).

-and finally in line 4 we declared the handler for our MOUSE_UP event. When the left button of our mouse is up we remove the MOUSE_MOVE event.

This is the end of our tutorial. I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

You can download the source file from:Draw Custom shapes with ActionScript 3.0.