A Tutorial: NextWeb: Visualization- Digital drawing apps with Flash and AS3 Sandro Alberti; salberti@siggraph.org If you like this, please help us support the promotion of computer graphics and interactivity:
SETUP Hardware/software: You'll need a laptop/tablet, with Flash CS4 or greater (since this uses the Flash Graphics class, available in ActionScript 3). Files: Folder called 'start' and included files; save this on your Desktop. Download the files in ZIP format Materials: None. INTRO This tutorial is inspired by the Bic Wall, a virtual surface where you can make your own Bic-pen-inspired 'graffiti' artwork: www.thebicwall.com It's programmed in Flash, and digitally recreates the look of lines made by a Bic ballpoint. The user draws on an infinite wall in real-time, which also displays the work of other connected users. In this tutorial, we will look at the Flash Graphics class, and how it allows us to 'draw' on a virtual canvas. We also will touch on the concepts of 'radian' and 'arctangent', and how they are used to provide interesting and realistic animation of the pen that turns about as it draws on the canvas. See the final project here STEP 1 Create a new movie clip symbol. In this symbol, add an image of a pen (could be photorealistic or a vector-drawn shape; your choice). The most important part is that the pen has to be positioned so that its tip is right on the registration point of the movie clip. The angle of the pen is optional, as long as the pen tip is on the registration point. STEP 2 Set up the pen. Place it on the stage and name the instance 'pen'. Also, place an empty movie clip on the stage at 0px (name the instance 'drawing'). In the actions for the frame, add: var capturing:Boolean = false;
var var var var
initx:Number = pen.x; inity:Number = pen.y; angle:Number; radian:Number = 0;
Now add a couple of event listeners. To check when the mouse is pressed and released, and one to keep track of ongoing frames: stage.addEventListener(MouseEvent.MOUSE_DOWN, startHandler); stage.addEventListener(MouseEvent.MOUSE_UP, stopHandler); drawing.addEventListener(Event.ENTER_FRAME, capturingHandler);
STEP 3 Start the drawing process. The 'drawing' movie clip will be used as the zone into which the user will draw (with a line style of 2-pixel-thick gray; here we set it up to move to the tip of the pen when the mouse button is clicked: mouseX, mouseY) function startHandler (event:MouseEvent):void { drawing.graphics.lineStyle(2,0x444444); drawing.graphics.moveTo(mouseX,mouseY); capturing = true; }
STEP 4 Each frame, we check to see if the mouse is drawing. If so, we draw and also work out the angle of the pen: function capturingHandler (e:Event):void { if (capturing) { drawing.graphics.lineTo(mouseX,mouseY); } angle = Math.atan2(mouseY-inity,mouseX-initx)/(Math.PI/180); //angle is random between 180 and -180 degrees, //or negative 3.14 to positive 3.14, divided by 3.14 divided by 180 //arctangent based on current mouse position and 1/5th distance from 0,0 (init) pen.rotation = angle; pen.x = mouseX; pen.y = mouseY; initx =mouseX/5; inity = mouseY/5; }
If the mouse is not drawing (when one lets go of the mouse button): function stopHandler (e:Event):void { capturing = false; }
NEXT This tutorial provides a basic introduction to what could become the Bic Drawing Wall. Some obviously missing features include the ability to change pen color and saving your drawing so that it continues to appear in the future, allowing other people to combine their artwork with yours:
Flash Graphics class: Find out more about the methods that allow you to draw on a virtual canvas. These include setting colors and line thicknesses, image/gradient fills, pen position, bezier curves, shapes, and the more advanced IGraphicsData shape definitions. Communicating between Flash and a database: This is an essential part of being able to save anything between ongoing Web sessions and visitors. Radian and 'atan2' arctangent: Useful for creating dynamic representations dealing with angles. The atan2 function is useful in many applications involving vectors in Euclidean space, such as finding the direction from one point to another. A principal use is in computer graphics rotations.