How to Make a Piano in Flash

Written by timothy allen
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make a Piano in Flash
Flash can create pianos for use in online instruction. (piano image by Marianne pichot from

Adobe Flash is a "sky's the limit" kind of program when it comes to thinking up and implementing ideas for a website or application. From the most basic of website banner ads to highly sophisticated full-feature websites, there aren't many things you will see on the net that Flash can't do and lots more things you will see that ONLY Flash can do. Creating a Piano using Flash will take some forethought, dedication and a healthy dose of ActionScript programming, but it is a reasonable task.

Skill level:

Things you need

  • Adobe Flash CS2, CS3, CS4 or CS5
  • Sound editing program such as Adobe SoundBooth
  • Piano or keyboard
  • Microphone connected to a computer to record sounds

Show MoreHide


  1. 1

    Record your sounds using the computer-connected microphone. Don't worry about the length of each keypress, as later you will edit the sound down to a uniform length using the sound program. Record each note as a single file.

  2. 2

    Edit your notes for clarity in your sound recording program. Make sure each sound plays for the same amount of time for consistency. Normalise the audio volume of each file. Save each file in a folder where you will keep your Flash project.

  3. 3

    Click "File > Import > Import to Library" command on the menu to import all of your piano notes into your library to be ready for use.

  1. 1

    Use the toolbar to draw your keyboard however you would like to present it to your audience. Make sure as you draw that you separate the keys so that you can turn each of them into a movieclip symbol.

  2. 2

    Double-click on your key symbol and press the "Insert Layer" button on the timeline twice to insert two new layers above the current one.

  3. 3

    Lock the topmost layer by clicking the small dot under the lock column that corresponds to the layer, and name the layer "Actions". Left-click on the first keyframe and press "F9" to open the Actions panel. Insert a stop command:


  4. 4

    Right-click on the second frame of the second layer and choose "Insert Keyframe." Click to open your library window and drag out the sound you imported that is appropriate to the key you are working on. Place the sound directly on the stage. You won't see anything on the stage, but your layer in the timeline will indicate there is a wavefile there.

  5. 5

    Click to insert a keyframe in layer 3 and modify the look of your key to indicate it is being pressed. If you don't want to modify the look of your key, then simply select the second frame of the third layer and press "F5" to insert a new frame rather than a keyframe. (This step is optional.)

  1. 1

    Double-click on an empty area of the stage to return to the root level of your Flash movie. Continue repeating steps 2 through 5 in section 2 until all keys are done.

  2. 2

    Select the first keyframe at the root of your movie and press "F9" to open the actions panel. Modify this simple code for each of your keys to make your keyboard sound whenever a key is pressed:

    middleC.onRelease = function (){



  3. 3

    Press "Ctrl + Enter" to test your movie.

Tips and warnings

  • If you are interested in saving the file size of your .swf, instead of importing all of the sounds for your keyboard, use code to stream in the sound directly from the file.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.