First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Tim Murray | Website: http://www.gmg.com.au

Adding a sample graphic

It's great to hear a sound, but we're going to add an image of the waveform for people to look at while the sound plays. This gives a visual indication of what the audio will sound like. We will look at a simple method for generating a waveform and add it to our sounds.

This section is not critical to developing the audio controllers, so feel free to skip it if you are not really interested. You can animate anything you like over the duration of the sound. Feel free to experiment!

In the Library, when you have your sound selected, the wave form for the sound is shown. My sound is stereo; yours may be mono (you may only see one wave). If you make sure that your stage is shown at 100%, you can resize the Library window (and the area that the waveform is shown in) to a size that you would like to show the wave at.

Do a Print Screen to copy the screen to the clipboard. Start your favourite paint program. Paste in the image of the screen. Crop the waveform to an appropriate size. Adjust the colours of your wave so that it is a black wave on a white background. Save your waveform image as a GIF with white as your background transparent colour (so that we can easily tint the waveform later). I saved it as sample.gif.

This is what I ended up with for my audio file:

Import your GIF into the Library ("File > Import to Library..."). Don't do the Ctrl+R thing this time. We don't want the image on the stage yet.

Now create two new layers above the media layer. Name them "sample grey" and "sample black". You should now have this in your timeline:

What we are going to do here is have a greyed-out waveform of our sample which will slowly turn black as the sample plays.

Select the sample grey layer and drag your GIF bitmap on to the stage. Put it roughly in the centre. Done that? Good. In order to tint the GIF, we first need to convert it to a graphic. So, with the GIF bitmap selected on the stage, do an "Insert > Convert to Symbol..." command (F8), name it "sample" and give it a Graphic behaviour. Like this:

Down in your Properties panel you should now see a Color combo box. Set this to Tint and pick a colour and a percent to tint. I chose grey at 100%. (I did name the layer "sample grey", but you may choose anything you like!)

With your sample symbol still selected (sorry for the alliteration), do an "Edit > Copy" command (Ctrl+C), select the "sample black" layer, and do an "Edit > Paste in Place" command (Ctrl+Shift+V). This will put a copy of the waveform sample symbol in the same position that we had in the "sample grey" layer. Set the Color of the newly pasted sample to a black Tint (or set the Color to None, which is what I did).

We need these GIF bitmaps to line up so that when we reveal the black sample using a mask, we don't get the waveform wobbling. Doing a Paste in Place solves this nicely, but you could also do it with your Align panel.

» Level Advanced

Added: 2004-02-17
Rating: 7.89 Votes: 64
(10 being the highest)
» Author
Tim is a co-director of the Glasson Murray Group, providing quality graphic design, illustration, 3D visualisation, interactive environments, virtual reality, multimedia and website services.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.