- 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)
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); } }






Trackbacks/Pingbacks
[...] Read the original here: Flash drawing effect | Flash tutorials | Flash video tutorials … [...]
[...] Flash drawing effect | Flash tutorials | Flash video tutorials | Flash actionscript | flash animatio… [...]
[...] Flash drawing effect | Flash tutorials | Flash video tutorials | Flash actionscript | flash animatio… [...]