Web Design Tutorials: Photoshop, HTML, Flash, PHP

Flash Tutorial – 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. You can 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 400×400.

2. Import an image to the stage. Make sure the image is size 400×300.

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.

Source: tutorials.flashmymind.com

you may also like:

  • Flash Tutorial – Create an Advanced Image Gallery
    In this tutorial we will learn how to make an Flash Image Gallery using Action Script 2.0 with Smooth Transitions and Description for your images. This will be an Advanced Flash Gallery, but very easy...
  • Flash Tutorials – How to create an Advanced Image Gallery
    In this tutorial we will learn how to make an Flash Image Gallery using Action Script 2.0 with Smooth Transitions and Description for your images. This will be an Advanced Flash Gallery, but very easy...
  • Flash Tutorial – Loading Multiple Images
    This tutorial will show you how to load multiple images with ActionScript 3. We will also add a simple preloader to each image. Click the “Start Loading” button to see the images appear! After this tu...
  • Flash Tutorial – Magnifying Glass Effect
    This tutorial will teach you how to create a magnifying glass effect with ActionScript 3. 1. Create a new document (size should be the same as the image’s size you’ll be using). 2. Import your i...
  • Creating Flash Menu
    Though website design is a prerogative of professionals, still there is a lot that anyone could do only if he knew how to. Making a menu for a flash website is one of these things. To make one you nee...

Leave a Reply

Powered by WordPress | Designed by Elegant Themes