A Flash Developer Resource Site
|
Internet Commerce
Developer ChannelFlashKit.com
JavaScript.com JavaScriptSource Developer Jobs ScriptSearch StreamingMediaWorld Web Developer's Journal Web Developer's Virtual Library WebDeveloper.com Webreference Web Hosts XMLfiles.com
internet.com
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Audio
Adding a sample graphicIt'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.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Flash MX Audio Player
 |
 |
|