actionscript flash piano

NEW - Free sound-effects WAV files

2006-06-27T16:35: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...

ACTIONSCRIPT FLASH PIANO

2005-03-27T13:18:00.000-08:00

¤ MOUSE-OVER OR CLICK TO HEAR NOTE
[ this plays once on mouse-over and three times on mouse-press ]

¤ READ ON: learn how to make this with Actionscript2 in FLASH7

screen 17778 set-up timeline layers:
¤ Make a background any color except white: width=141 height=90.
¤ Make 2 layers; interface and actions.
¤ Make both 5 frames long by selecting frame 5 and hitting [ F-6 ].

screen 17779 draw the whitekey
¤ Select Rectangle, no-stroke, and White for your whitekey, then draw out a rough rectangle.
¤ Open the Info Panel [ Ctrl + I ], and set exact size to: width=15 height=80

screen 17780 convert whitekey into a Button Symbol
¤ With whitekey still selected, hit [ F-8 ], which opens Convert to Symbol screen.
¤ The name of the Symbol isn't important, but make sure to select "Button" for "Behavior".

screen 17781 delete Symbol from stage
¤ Deleting what you've just made may sound a bit strange, but that is how Symbols are placed in the Library. You're just deleting the whitekey from the stage, not the project.

screen 17782 draw the blackkey
¤ Draw this strokeless blackkey the same way you did the strokeless whitekey. It's size is: width=8 height=40. It is not a solid black, but the "first gray" [ #999999 ].

screen 17784 convert into symbol
¤ Press [ F-8 ] to Convert to Symbol the same way you did for whitekey.
Name it if you wish, but again, make sure to select "Button" for "Behavior".

screen 17785 delete Symbol from stage
¤ And again, hit [ Delete ] on Keyboard to place Symbol in Library.

screen 17787 the Library
¤ And just to prove that you didn't lose your keys, here they are in the Library. You will be pulling out copies, or Instances, in the next step.

screen 17790 drag out a Button Instance
¤ Drag out a copy of the whitekey Button Symbol, and place it near the left edge of the stage.

screen 17792 drag out 7 more whitekey Instances
¤ Drag out a total of 8 whitekey Instances. No need to be neat - we will automatically align the whitekeys later.

screen 17795 shift-click to select all
¤ Shift-click on each to select all 8 Button Instances

screen 17796 align | distribute widths
¤ [ align | distribute widths ]

screen 17797 align | make same height
¤ [ align | make same height ]

screen 17799 drag out a black key
¤ Open the Library again and drag out a Button Instance of the blackkey Button Symbol.

screen 17800 drag out 4 more black keys
¤ Drag out a total of 5 black keys. Placing them is a little bit trickier, but with a little magnification the blackkeys can be nudged into proper alignment.

screen 17801 and there you have 13 keys
¤ 13 Button Instances, but none have been named yet.

screen 17803 name the Button Instances
¤ One at a time, click on each Button Instance, and give it it's appropriate name in [ Properties ].
¤ Name whitekeys, left to right; c3 d3 e3 f3 g3 a3 b3 c4
¤ Name blackkeys, left to right; c3s d3s f3s g3s a3s

FREE SOUND FILE FOR NOTES

2005-03-26T21:17:00.000-08:00

¤ To obtain the .wav files needed for this first tutorial, you may get a free safe to download public-domain zip file: 13notes.zip 36kb

screen 17804

SOUND LINKAGE IN LIBRARY

2005-03-25T21:22:00.000-08:00

¤ Presumably you downloaded the zip file mentioned above, and now have all 13 notes unzipped and stored somewhere on your machine.
¤ The next step is to import these 13 files to Library [ File | Import to Library ]. You may import all 13 sounds at once.
¤ Sounds will remain in the Library, but instead of being referred to by filename; such as c3.wav, they are given a Linkage Name; such as c3.

screen 17808 linkage identifier
¤ Right-click on a sound file in the Library, then select Linkage.
¤ Check "Export for Actionscript" and "Export in First Frame" boxes.
¤ Remove the .wav extension from the name. Your sound now has a Linkage Identifier.

screen 17809

BASIC SCRIPT FOR SOUND OBJECT

2005-03-24T11:28:00.000-08:00

¤ This first Actionscript example is something we will build on. All this will do at this point is play one note, but what this will show is the basic creation of the Sound-Object, and linkage of a sound to it using the attachSound method.

1 The first line creates a sound-object named pianoSound.
2 The second line assigns the linkage-name to the Sound-Object using the attachSound method.
3 The third line enables the button for onMouseDown operation, (and later we will add onMouseOver operation).
4 The fourth line stops the movie on the last frame instead of letting it cycle. The first four frames of the movie are blank to assist loading.

LETS ADD EVERYTHING TO SCRIPT

2005-03-23T11:38:00.000-08:00

¤ Next we will expand our script by inserting the linkage names of the other notes.
¤ Buttons will now function with either mouse-over or mouse-press.

screen 17838
¤ comment A: I need to research this, but I think onPress and onMouseDown are the same.
¤ comment B: If you wanted note to play three times "onPress" (as in the working example) you would change the "1" in the fourth line from the end to "3". If you are curious, the "0" on that same line specifies a frame for the sound to start.

USE THIS PROJECT AS A STARTER

2005-02-26T13:21: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 using Actionscript2.

¤ As you can see, Actionscript is a flexible method for controlling sound with buttons. We have barely scratched the surface, as other things can be controlled, such as stereo panning and volume control. Dynamic text fields can easily be added based on Instance names, and "juke boxes" which display the name of the tune playing--plus the next one to play, are easy to assemble with Actionscript. [ reference: Foundation Actionscript for Flash MX 2004, by Sham Bhangal, Chapter 12 ]

¤ If you need a more basic (simpler) tutorial on adding sounds to buttons without the use of Actionscript, visit our related site: http://flashpiano.blogspot.com

¤ [ at a later date ] we will be adding code that will nudge the the keys slightly to indicate a "hotspot".