Virtual Flash Drums Tutorial

This Flash / ActionScript tutorial covers the basic steps to get you started on your own virtual Flash drumset like the one seen here, complete with custom colors and drag and drop decals.

Here are the main topics covered in this Flash tutorial.

1. Custom Colors
2. Drag and Drop
3. Audio
4. Visibility (Show/Hide)

The visibility feature can be seen on the Flash guitar player here. (Click "Show Stage")

To begin with, to create a dazzling drumset you are obviously going to need some good artwork!

There are lots of options for artwork. You can try searching sites like iStock for cheap vector drums and decals, you can draw or trace your own in Flash or Illustrator, or you could model your drums in a 3D software and render them out in vector. Just make sure the kit is angled so that you have enough room on the drum heads to turn into substantial oval buttons.

Custom Colors

The first thing you are going to have to do with your drum graphic is to isolate the area that you will use to change the drum shell colors. Just cut out the colored areas of the drums and paste them into a new layer called 'Shells'. Name the original layer with the drums 'Hardware'.

Add five more layers and arrange them so that your layers look like this.

• Actions
• Preloader (recommended)
• Cymbals
• Hardware
• Shadows
• Shells
• BG (if you want a stage)

If you use a Preloader, move all of your graphics to Frame 2.

(The next part is for those who are artistically inclined and want to add dynamic shadows, but it is not necessary.)

Next you will add shading. Copy everything from the Shells layer and paste it into the Shadows layer. Use the wand tool to highlight and delete everything that is not a shadow from the Shadows layer so that all you have left is and appropriate shadow area. Use this drum set as an example. Color the shadows a gray such as #8c8c8c and give them an alpha value of about 45%. Convert the shadows to a graphic to keep them nice and tidy. Now, when you dynamically change the colors of the shells underneath, you will also change the shadows.

Finally, cut the cymbals out and paste them into the cymbals layer so they can be animated. You will need to repair the cymbal stands (create solid lines where the cymbals used to be) so that you don't have gaps when you're cymbals are crashing.

I'll leave it up to you to create the cymbal animations.

Phew! Okay, now let's move on to the code to create some rocking colors.

Highlight everything in the shells layer and convert it into a movie clip called shells_mc. Give it a bright starting color so that you can see the shadows clearly.

Create six or eight color swatches and convert them to buttons. Then add the following code to each button. Ultimately you can put all of the button code into a nice clean Actions frame, but since there is so much tweaking to achieve the perfect set of colors, it is easiest to have them like this for now.

on (release)
{
	var drumColor = new Color("_root.shells_mc");
	drumColor.setRGB(0x004C93);
}

This is pretty self explanatory. You are creating a variable called drumColor, applying it to shells_mc and then setting the color to the same color you chose for the swatch. Depending on your ultimate arrangement of the layers and movie clips within movie clips, you may or may not need the _root.

Now publish the file and click the swatches. Cool!

Drag and Drop (Decals and Audio)

Next we are going to add the drag and drop feature for the decals and attach some sounds. Why am I combining decals and drum sounds? The decals in this game have swoosh sounds and are activated on rollover just like the drums. We will use a nice clean piece of code to combine everything for efficiency. Hint: Think of the cowbell in the example drumset. It drags and drops and has audio when you hover. It is basically a glitzy decal.

Import some vector graphics for your decals, cowbells, etc. and convert them to buttons with unique names.

Audio (Import)

You will need to import some audio into your fla. There are plenty of sites online where you can get free drum sounds. Most of them have no strings if you are not redistributing or reselling them. Once you have imported them into your flash file, double click the file in the library. When the Sound Properties window opens, click Export for Actionscript and make sure you enter an appropriate Identifier to name the sound, like 'bass' or 'snare'. Export in First Frame should also be checked.

Turn the drum heads into buttons.

You can remove all of the drum heads and put them into their own layer and then convert each one to a button. Or you can create transparent oval buttons over the heads. Name the buttons appropriately (snare_btn).

You will create code that will greatly reduce repetition in a moment, but first do the following. In your main Actions layer, add the following code:

WireObject(snare_btn, "snare", "s", false);
WireObject(floorTom_btn, "floor", "f", false);

etc,...for all of your drums and symbols.

Basically, (button name, "sound name", "keystroke letter", movable);

Do this for all of the drum heads and cymbals. Make sure the button names, sound names and keystrokes are unique.

Now go ahead and do the same for all of your decals, except that we will use true instead of false for the last field, indicating that the decal is movable. And obviously you don't need to indicate a keystroke for sound on a decal.

WireObject(decal001_btn, "swoosh", "", true);
WireObject(decal002_btn, "swoosh", "", true);

Try writing a line for your color swatches.

By now you should have a nice long list of items. Time to wire the events to the buttons. Comments are in the code to explain them.

function WireObject(button:Button, soundName:String, letter:String, draggable:Boolean):Void
{
	Key.addListener(button); //Add a listener to the key event (KeyDown, KeyUp, etc...)
	var sound:Sound = new Sound(); //Create a new Sound object
	sound.attachSound(soundName); //Attach to the new Sound object to passed sound file
	button.onRollOver = function():Void //Wire the onRollOver event
	sound.start(); //Play sound

	button.onKeyDown = function():Void //Wire the onKeyDown event
	{
		var key:Number = Key.getAscii(); //The key most recently pressed
		if (letter.toLowerCase().charCodeAt(0) == key || letter.toUpperCase().charCodeAt(0) == key) //Check to see if the key pressed is the one assigned to the button, regardless of case
		{
			sound.start(); //Play sound
		}
	}

	if (draggable) //If the object is draggable, perform the appropriate mouse functions
	{
		button.onPress = function():Void //Wire the onPress event
		{
			startDrag(button); //Drag object
		}
		button.onRelease = function():Void //Wire the onRelease event
		{
			stopDrag(); //Stop dragging object
		}
	}
}

At this point, you should have a completely functioning virtual Flash Drumset with colors, sound, and decals. Try animating the cymbals and adding pedals, etc.

Visibility

There is one extra feature which is used in another game which I would like to mention. You can see it in this guitar dress up game called myGuitar. It is a function which turns the stage visibility on and off.

Create a button named stage_btn for the toggle, and name your actual stage graphic stage_mc.

In your preloader frame add this code

onEnterFrame = function()
{
	stage_mc._visible = false; //sets the initial value of the stage to invisible
}

Then on your main Actions frame/frame 2 add

stageVisible_btn.onRelease = function()
{
	//check if stage is visible
	if (stage_mc._visible == true) // if it is make it invisible
	{
		stage_mc._visible = false; // set the stage visible to false;
	}
	else //otherwise make it visible
	{
		stage_mc._visible = true; //set the stage visible to true;
	}
}

That's it! Now all of your decals and extra bonus items have a drag and drop feature, and your drums have audio which can be triggered by either hovering over the drum heads or the keyboard. Instead of duplicating paragraphs of code, we wrote one simple line for each item and then added a clean piece of code to tie it all together.