flash piano

NEW - Free sound-effects WAV files

2006-06-27T16:26:00.000-07:00

Update: I am making available 15 sets of public-domain whacky sound-effects...
Check 'em out over at: www.starzhead.com/soundeffects/soundtutorial.html
And, if you have Flash7, take a look at the new tutorial I wrote on how to make these mouse-over and drag-and-drop sound-effect players...

BUILD THIS SIMPLE FLASH PIANO

2005-02-28T02:01:00.000-08:00

¤ MOUSE-OVER or CLICK the keys

¤ PLAY THIS MINI FLASH PIANO,
THEN LEARN HOW TO MAKE IT IN FLASH
FlashPlayer [v5 min] req.

USE THIS PROJECT AS A STARTER

2005-02-27T21:35:00.000-08:00

¤ While this little one-octave "moused-over or clicked" toy piano may not be terribly useful, its construction will serve as a beginning tutorial on basic button making, and how to add sounds in Flash.
¤ After this, you will be ready to add on to this project by building a timeline capable of playing a string of notes. Actionscript, although more complex, is another method for controling sound and buttons.
¤ If you think you are ready for Actionscript, go to: http://actionscriptflashpiano.blogspot.com for a tutorial on how to make this same Flash Piano using Actionscript.
¤ This project will teach you how to assign sound to Button Symbols on individual timelines. We will be using this prebuilt four-part button timeline:

¤ We will be adding sounds to both the "over" and "down" button states. Also in the "over" and "down" states, we will nudge the the keys slightly to indicate a "hotspot".

LETS START CONSTRUCTION

2005-02-26T14:16:00.000-08:00

which version of Flash is this?
¤ Everything explained here can be produced using Macromedia's Flash5, but it also works in Flash6 and Flash7. I actually designed the piano with Flash7 (MX 2004), but published it for the Flash5 player.

BACKGROUND + 13 TIMELINE LAYERS

2005-02-24T02:36:00.000-08:00

lets get started...
¤ Open and save a new Flash document, 141 px. X 90 px.
Choose a background any color but white.

¤ First, we set up our timeline with a total of 13 layers.
There is no shortcut for making multiple layers, so you'll need to repeat [ Insert | Timeline | Layer ] for each of the 13 layers.

¤ Rename your layers, from bottom to top, in this exact order. If you mix up this sequence some keys may hide others.
c3 d3 e3 f3 g3 a3 b3 c4 c3s d3s f3s g3s a3s

LETS DRAW ONE 15X80 WHITEKEY

2005-02-22T23:38:00.000-08:00

¤ select your rectangle tool,
¤ cancel-stroke/outline (from top of colorchart),
¤ and select white as fill.

¤ Draw the whitekeyon the stage, just to an approximate size.
Size your drawing to an exact 15x80 with Info screen [ Ctrl + I ].

¤ While whitekey is selected, copy to clipboard [ Ctrl + C ] for other buttons later.

¤ Move this first whitekey to the left edge of the stage. Buttons will be automatically aligned later so you need not worry about exact position.

¤ With this first whitekey still selected,
press [ F-8 ] to open Convert to Symbol screen.

¤ For Behavior, check: Button. This really doesn't need a name.

¤ The result is your first Button Symbol on frame 1 of layer c3.
Later we will add sound to "over" and "down" button states,
plus a downwards-nudge to indicate a "hotspot".

MAKE 7 MORE BUTTONS

2005-02-20T06:43:00.000-08:00

¤ We need to repeat the button making process another seven times to make the remainder of our still soundless whitekeys, but since we already have a copy on our clipboard, all we need to do is:

1) Make sure we are on the correct timeline layer. Work from the bottom, up. For now, just remember to skip the "sharps".
2) Paste a whitekey copy [ Ctrl + V ].
3) Convert to Button Symbol [ F-8 ], with Behavior set to Button.

¤ As you go, collect your buttons in rough order from left to right, but there is no need to be neat -- in the next step we will automatically align keys, from side-to-side and from top-to-bottom.

AUTOMATICALLY ALIGN EVERYTHING

2005-02-15T02:49:00.000-08:00

¤ We've got our keys stacked up in proper order from the left to right, but lets get our whitekeys more neatly aligned, from side-to-side and from top-to-bottom:

¤ [ shift-click ] on each of the 8 instances to select all of them.

¤ first; [ Modify | Align | Distribute-Widths ]

¤ and second; [ Modify | Align | Vertical-Center ]

GET YOUR FREE SOUND FILES HERE

2005-02-14T04:06:00.000-08:00

¤ To obtain the 13 notes needed in this project, you may download a free public-domain zip file directly from me: 13notes.zip 36kb

IMPORT THESE SOUNDS TO LIBRARY

2005-02-13T05:44:00.000-08:00

Sounds used in the project are imported to, and kept in the Library. [ File | Import to Library ]

PREPARE "OVER" BUTTON STATE

2005-02-11T06:03:00.000-08:00

¤ Double-clicking on an already selected Button Instance will open it's speical four part timeline consisting of up, over, down, and hit. Later, to close this special timeline, double-click anywhere on the stage.

¤ We will be assigning the same sound to both over and down states, but we will work on the "over" state first.

¤ Click on the "over" state to select it. Gray box will result.
¤ Make it a Keyframe [ Modify | Timeline | Keyframe ].
Black box will result.

NUDGING OUR BUTTON

2005-02-10T01:22:00.000-08:00

¤ While still selected, we will nudge our button downward just slightly to give the appearance of being "active" or "hot". Two downward nudges with the down-arrow key should be enough offset.

NOW WE FINALLY ADD SOUND

2005-02-09T17:18:00.000-08:00

¤ If you have already downloaded the 13 sound files and added them to this project's Library, all you need do is select the appropriate file from the drop-down list in [ Properties ].

¤ At this point, the "over" state has been made into a keyframe, is still selected, and is ready to receive it's sound.
¤ The simple act of selecting the file adds it to this button's "over" state keyframe:

THEN DO SAME FOR "DOWN" STATE

2005-02-06T01:26:00.000-08:00

¤ The whitekey should remain "nudged" while we repeat the process of 1) selecting the "down" state
2)and making it a keyframe [ Modify | Timeline | Keyframe ].

¤ We add the same sound as we used for the "over" state.

LETS TEST THIS FIRST BUTTON

2005-02-05T23:59:00.000-08:00

¤ To close the special 4 state button and return to the main-timeline, double-click somewhere on the stage.
¤ We should now have one working button with a sound and a nudge, so to test it, go to [ Control | Enable Simple Buttons ]

When finished testing this first button, go back and make sure to uncheck [ Control | Enable Simple Buttons ]

ADD 7 MORE SOUNDS

2005-02-04T01:36:00.000-08:00

¤ Repeat the process (of selecting, making a keyframe, nudging, adding a sound) for each of the remaining seven whitekeys, for both the "over" and "down" button states.
¤ Our remaining 7 whitekey buttons are still soundless, but almost finished, so it is a simple matter of
1) being on the correct timeline layer,
2) selecting and making a keyframe in the special button timeline, and
3) selecting the proper sound for the button.

TIME TO MAKE THE BLACK KEYS

2005-01-08T01:37:00.000-08:00

¤ We'll be doing exactly the same process for the 5 blackkeys as we did for the 8 whitekeys. The only difference is that you'll have to position the blackkeys by hand to get them accurately spaced between the whitekeys. Flash has a convenient snapping feature that will help with an even height, but you will still need to space the blackkeys out from side-to-side by eye.

¤ Add sounds to "over" and "down" button states the same way you did for the whitekeys, and of course, you will nudge the key slightly downwards in the "over" and "down" keyframes.

WHERE TO GO FROM HERE...

2005-01-07T01:40:00.000-08:00

¤ Or, it is a place to start building a more complex piano. One that can play a tune and perhaps a set of chords. ...that may be where we are going with this project. Stay tuned... Post a comment if you want to add something or ask a question.
¤ And if you want to see how to make this same Flash piano with Actionscript, go to: http://actionscriptflashpiano.blogspot.com