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
Animating the waveformWe're now going to add a mask to the "sample black" layer and reveal it as the sound is streaming from the first frame to the last. This will result in a waveform that starts out grey and swipes to black as the media plays. Select the "sample black" layer and insert a layer. Name the new layer "sample mask". Select the "sample mask" layer and use the "Modify> Layer..." command to call up the Layer Properties dialog and select the Mask Type for the layer like this:
Select OK and we're nearly there.
Click and drag the "sample black" layer. When you get it right, the dotted green oval will go dark green.
And release the drag so that it is under the "sample mask" layer.
Now anything that is drawn on the "sample mask" layer will reveal anything that is indented under it (with the dotted green page icons). So, to reveal the black waveform, we are going to Shape Tween a box in the mask layer to slowly cover (and thus, reveal) the black waveform. Let's do it. Select the "sample mask" layer. Select the Rectangle Tool (R) and draw a rectangle. Double-click on the rectangle frame and delete it (it's not really useful to us for this). Click to select the rectangle fill (it will get dots on it). Click and drag the top left corner of the rectangle until the drag outline snaps to the top left corner of the waveform sample.
Now select the Free Transform Tool (Q) and drag the bottom right corner of the rectangle so that it snaps to the bottom right corner of the waveform sample. If you lock the masked layers (click on the dots under the padlock in the timeline) you will only see the black waveform. If you unlock the layers again and drag the right hand side of the rectangle to about half its width, you will see left half black and right half grey when you lock them again.
OK. Unlock the layers and drag the right hand side of the rectangle back again. Now add a keyframe in the last frame of your "sample mask" layer and select frame 1. In your Properties panel for frame 1 choose a Shape Tween. Free Transform the right hand side of the rectangle to the left until you can't see the rectangle any more (you may need to zoom in to do this properly - try Ctrl+Shift-rolling your mouse wheel to zoom in). Transforming the rectangle like this should give it a width of zero. Now lock the mask layers again. If you click and drag the playhead you should hear the sound you imported playing and the waveform will transform from grey to black as you scrub back and forth.
I have also added a playhead indicator using shape tweening, but I will leave that as an exercise for you to try at home! Save now. Have a break. Next up we are going to do some coding!
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Flash MX Audio Player
|
 |
 |
|