Flash Spray Effect
In this tutorial, I will show you how to create a spray effect in Flash. You can try the movie above to see how it looks. Change the color, density and size of the spray to see how the effect changes. Let's get started straight away.
Setting up the environment
1. Create a new document of size 400x400.
2. Import an image to the stage. Make sure the image is size 400x300.
3. Position the image on the top left corner.
4. Convert the image into a movie clip. Name it "imageMC" and set the registation point to the center.
5. Give the image an instance name of "drawingArea".
6. Open your Components library (Ctrl + F7). Drag one Slider to the stage. Position it however you want.
7. Give the slider an instance name of "sizeSlider". Apply the following settings.
8. Drag another slider to the stage.
9. Give it an instance name of "densitySlider". Apply the following settings.
10. Drag a color picker to the stage. Give it an instance name of "myColorPicker".
Moving into Actionscript
11. Open the actions 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);
}
}
You are done, test your movie! If you have any questions, please visit the forum. Have a nice day!
