Flash drawing effect

April 6, 2010

Animations

  • Create a new document of size 400×400
  • Import an image to the stage. Make sure the image is size 400×300
  • Position the image on the top left corner
  • Convert the image into a movie clip. Name it “imageMC” and set the registation point to the center
  • Give the image an instance name of “drawingArea”
  • Open your Components library (Ctrl + F7). Drag one Slider to the stage. Position it however you want
  • Give the slider an instance name of “sizeSlider”
  • Apply the following settings ( see Fig 1)

Fig 1

  • Drag another slider to the stage.
  • Give it an instance name of “densitySlider”.  Apply the following settings ( see Fig2)

Fig 2

Step 2

  • Open the actions script panel and type the following:
/*
We need to create a BitmapData object in order to
work with pixels of a Bitmap object.
We want the wallCanvas to be transparent
at the beginning, that's why we use the 0x00ffffff
value as a parameter.
*/
var wallCanvas:BitmapData  = new BitmapData(stage.stageWidth,
stage.stageHeight - 100,
true, 0x00ffffff);

//Create a Bitmap object to refer to the  BitmapData object
var bitmap:Bitmap = new Bitmap(wallCanvas);

//Add the bitmap to the stage
addChild (bitmap);

//We listen for the mouse down event on the wall
drawingArea.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);

//We listen for the mouse up event for the whole stage
stage.addEventListener (MouseEvent.MOUSE_UP, mouseUpHandler);

//This is the color of the spray
var color:uint;

//This is the maximum radius of the spray
var maxRadius:Number;

//This is the density of the spray
var density:Number;

//This is called when the mouse is down on the wall
function mouseDownHandler (event:MouseEvent):void {
	//Add the EVENT_FRAME so we can draw in each frame
	addEventListener (Event.ENTER_FRAME, onEnterFrame);
}
 
//This is called when the mouse is released
function mouseUpHandler (event:MouseEvent):void {
	//We don't need the EVENT_FRAME, if the mouse is released (nothing to draw)
	removeEventListener (Event.ENTER_FRAME, onEnterFrame);
}

//This function is responsible for the whole drawing
function onEnterFrame (event:Event):void {

	//Get the size from the sizeSlider
	maxRadius = sizeSlider.value;

	/*
	Get the color from the myColorPicker.
	We add 0xff000000 to the color to make the pixel
	visible when we draw it (we draw the pixel in the for loop).
	*/
	color = myColorPicker.selectedColor + 0xff000000;

	//Get the density from the densitySlider
	density = densitySlider.value;

	/*
	The density defines how many loops we have.
	In other words, how many pixels are drawn in each frame.
	*/
	for (var i:int = 0; i < density; i++) {

		//Calculate a random angle
		var angle:Number = Math.random() * Math.PI * 2;

		// Calculate a random radius for the pixel to be drawn
		var radius:Number = Math.random() * maxRadius;

		//Calculate the x and y positions
		var xPos:Number = mouseX + Math.cos(angle) * radius;
		var yPos:Number = mouseY + Math.sin(angle) * radius;

		//Draw the pixel.
		wallCanvas.setPixel32 (xPos, yPos, color);
	}
}
, , , , , ,

Subscribe

Subscribe to our e-mail newsletter to receive updates.

Trackbacks/Pingbacks

  1.   Flash drawing effect | Flash tutorials | Flash video tutorials … by Flash Designers - April 6, 2010

    [...] Read the original here: Flash drawing effect | Flash tutorials | Flash video tutorials … [...]

  2. Movies, Music & Software Downloads. | Watch Movies Online - April 6, 2010

    [...] Flash drawing effect | Flash tutorials | Flash video tutorials | Flash actionscript | flash animatio… [...]

  3. Debranding and installing Flash Menus to Sony Ericsson phone - April 6, 2010

    [...] Flash drawing effect | Flash tutorials | Flash video tutorials | Flash actionscript | flash animatio… [...]

Leave a Reply