Flash Streaming Audio - Creating the player

topics: flash streaming audio, flash player , streaming media with flash

Launch Macromedia Flash Mx (or 5.0 version).

Create a new file

Movie properties

Why 1 fps (frame per second)???? Simply, we are not making a complex multimedia intro with graphics, interactions, sound, colors and naked chicks. We only want to stream an audio file, and the next step will be stretching Flash timeline to cover the entire song. Things get very easy if we have our frames duration curresponding to one real second of our song

Import the sound (from FILE menu, file-import). Depending on the file size, this operation can take more than a while.

Pre-compress your sound. (from WINDOW menu, window-library). Now that you have imported it, your audio file should appear in you movie library window. Double click on it

Do some test yourself, we have chosen MP3 (others are available) compression at 32 kbps, stereo (why should we have it in mono??).

Notice three things:

1. By applying precompression, we have reduced the file size from 46 MB to 1 MB, which means a 98% reduction
2. Our test song has a 261.7 seconds duration. This means that our song will require a 262 (+ 3 frames for buffering) frames timeline. (if we had a fps of 12, we would need 2600 frames!!!)
3. Even a 28.8 modem can download 1 Mb in 261.7 seconds. This means that we could ALREADY let users listen to it while downloading...

but that's not all...

By default, new Flash documents have a single layer. Add one (from menu INSERT, insert-layer). Now you should have two layers (of course..).
On top layer we'll have buttons and frame actions, on bottom layer we will put the sound.

Below there's our Flash timeline.

Let's keep 3 frames empty on layer 1 and add 3 keyframes on layer 2.
Those 3 keyframes will take care of the small buffering needed for the sound to play while downloading.

Action for frame 1, layer 2 (right click on frame - ACTIONS)

ifFrameLoaded (20) {
gotoAndPlay(4);
}

where frame # 20 is the number of frames that have to be downloaded before audio starts, and frame # 4 is the frame where sound begins (see image above)

Action for frame 3, layer 2 (right click on frame - ACTIONS)

gotoAndPlay(1);

Now select frame # 4 layer 1 . Check out the bottom of screen, for the Properties window (image below)

Since you have already imported it, your audio file (Karma police.wav in this example) appears in "sound" drop down menu.
From "Sync" menu, choose "Stream" , with a looping value of 0 (sound will play once)

On the lowest line, Flash reminds us the original sound properties. What you need to notice is the duration time (261.7 s)

Now scroll the horizontal timeline's scrollbar until you reach frame # 265 (which means 261.7 duration time + 3 frames for buffering) and place a keyframe on layer 1 (where sound file lays)

Place this action on frame # 265 layer 1

stop();

this will prevent your streaming audio from beginning again once played. Obviously, if want it to start it again, you can put this action on frame # 265 layer 1

gotoAndPlay(4);

instead of the "stop" action

Now we place three buttons: rewind, play, pause

Make some shapes, or letters, or whatever (in the example we have made something more realistic)

Select one, then from INSERT menu, insert-convert to symbol. A Dialog window will open

give your shape a name, select "Button" and click OK

Do this for each shape you want to turn into a button. At the end you'll have three buttons on the stage (rewind, play, pause)

Since there are not any motion-tween, your buttons can lay on the same layer.

Now let's give our buttons a reason to live. Give them an action

Action for "rewind" button (right click on it, ACTIONS from menu)

on (release) {
gotoAndPlay(4);
}

Action for "play" button (right click on it, ACTIONS from menu)

on (release) {
play();
}

Action for "Pause" button (right click on it, ACTIONS from menu)

on (release) {
stop();
}

Save your project (shall we tell you how?...uhm ok, from FILE menu, file-save)

Preview your shockwave streaming file by CONTROL menu, control - test movie

As you can see, shockwave export feature has broken our sound file in 4.7 KB pieces (as many as the total number of frames) , and that's the principle of streaming!

Export your shockwave flash streaming .swf file (from FILE menu, file- export), give it a name and click save button.