Fading Seamless Sound Loops
Being the music enthusiast that I am, I have always rang on the tradition of including music with my sites. This has also been a sort of letdown because technical difficulties always got in the way. But we'll get into that in a bit. The point of this tutorial is to explain the basics of how sound is handled within the flash enviornment. After we get past that, we are going to work in flash to create a seamless loop that fades in music when turned on, and fades out when turned off.
Here is the final result of what we are going to create:
http://www.solaris.bluesfear.com/mov...ndlooping.html
The first hurdle we go over is the seamless part. I for one have spent days pulling my hair out because for some strange reason my music loops with a "pause". I tried everything, I edited the space out in a sound editor, and exported to MP3, but for some reason, the space remained.
Heres the thing. Flash reads everything you import into the program. Hence the reason for compression capability. When flash sees an MP3 file, it usually means its a short sound, or is one that isn't meant to be looped. It adds space to the beginning (and end if needed) to smooth the playback of the sound. You may not know it, but the second you import the file into flash, the editing has already been done.
The way around this frustrating fact, is to import your sound loops in .WAV format, or raw PCM. This imports the sound into speech format, where flash does no spacing. If you have an MP3 and you don't have the raw form of the sound, there are several sound editors that will do the converting for you. Personally, I used Cool Edit Pro to edit out the space in the beginning of the file, and then export it as a .WAV.
Now if you don't know what I am talking about, lets do a little stunt test here. Take your MP3 form file, and your .WAV form file. Go into flash and import these two sounds. Make sure you go to the library and change the quality at which the two files are played. A max setting is usually best.
With an empty document, click the first frame in the timeline. Go down to properties and select the sound dropdown. Select your MP3 form file. You should now see a small blip (of waveform) in the frame you selected. Don't worry about stretching out the timeline, this wont affect playback. Your sound settings should look like this:
For the 9999, you can use any high number, this just sets the value for the numer of times the sound is looped.
Now, hit CTRL+Enter to test your creation. Listen towards the end and beginning of your loop. You will notice a small space where the music breaks. Pretty sloppy eh?
Ok now go back to that frame you were at, and select the .WAV form file instead. Change the sound settings again if need be (to same values) And test again. You should end up with a seamless loop, or one that does not break off.
That portion is done!
Now, lets do the flash.
First start off with your .WAV file imported (check the compression rate) and go ahead and make a symbol containing that in the timeline. Loop it 9999 times, or however many times you want it to loop. After this is done, go ahead and move this clip onto the stage, and name its layer "Sound".
Next you need to create a box image to take place of your control. So make a simple box, and add text to it that says "control" this will serve as filler, so you don't lose the clip. The only work being done with this clip is through actionscript, so don't worry about the box.
After you have created your component-type clip, go ahead and place this script on it. I will explain how the code works a little later.
Now lets create your button. I made a simple piece of text >> converted to graphic >> converted to button >> converted to symbol (movieclip) This process puts your button inside a ciip where you will use it again. After you have done this, go inside the clip where your button is located. You then need to insert a keyframe in frame two, with the same button in it. Put a stop action in each frame. (ESC+S+T) Change the two buttons so that the state of the button is obvious, (I greyed the frame 2 button out).
Now, for your first button (or the one that will decrease the sound), put this script inside
Now this script changes the value of the soundstatus variable to OFF, which the control clip will see and decrease the volume to zero. The second line changes the frame of the button, and in turn allows the user to turn the volume back up.
Put this script in your second button (or the button that will increase the volume again)
This script simply changes the variable once again, and the control will automatically increase the volume.
Now, if you have correctly executed this, you should now be able to test your movie, and the sound will start playing. Try click the button to test the changing of the volume. It should fade in and fade out depending on the button.
*****
I will now explain how this works.
As you can see the first thing we do is declare the variable of soundstatus. Then we set the max and min volume (this can be changed, of course) The root sound, which controls all the sounds in your movie can be reset to alter just the music. Just be sure to change the linkage of the sound in the library and then edit this script to follow suit.
The next thing you see done is the if statement. Basically all it does is ask "Is the soundstatus ON or OFF". The steps do the changing. Every 5 frames the volume is decreased or increased. The if statements after that control the limits.
If you have any questions, feel free to post them. I will post the source at a later date if needed.
Thanks!
-solaris
Here is the final result of what we are going to create:
http://www.solaris.bluesfear.com/mov...ndlooping.html
The first hurdle we go over is the seamless part. I for one have spent days pulling my hair out because for some strange reason my music loops with a "pause". I tried everything, I edited the space out in a sound editor, and exported to MP3, but for some reason, the space remained.
Heres the thing. Flash reads everything you import into the program. Hence the reason for compression capability. When flash sees an MP3 file, it usually means its a short sound, or is one that isn't meant to be looped. It adds space to the beginning (and end if needed) to smooth the playback of the sound. You may not know it, but the second you import the file into flash, the editing has already been done.
The way around this frustrating fact, is to import your sound loops in .WAV format, or raw PCM. This imports the sound into speech format, where flash does no spacing. If you have an MP3 and you don't have the raw form of the sound, there are several sound editors that will do the converting for you. Personally, I used Cool Edit Pro to edit out the space in the beginning of the file, and then export it as a .WAV.
Now if you don't know what I am talking about, lets do a little stunt test here. Take your MP3 form file, and your .WAV form file. Go into flash and import these two sounds. Make sure you go to the library and change the quality at which the two files are played. A max setting is usually best.
With an empty document, click the first frame in the timeline. Go down to properties and select the sound dropdown. Select your MP3 form file. You should now see a small blip (of waveform) in the frame you selected. Don't worry about stretching out the timeline, this wont affect playback. Your sound settings should look like this:
Quote:
|
Effect: None Sync: Event | Repeat | 9999 |
For the 9999, you can use any high number, this just sets the value for the numer of times the sound is looped.
Now, hit CTRL+Enter to test your creation. Listen towards the end and beginning of your loop. You will notice a small space where the music breaks. Pretty sloppy eh?
Ok now go back to that frame you were at, and select the .WAV form file instead. Change the sound settings again if need be (to same values) And test again. You should end up with a seamless loop, or one that does not break off.
That portion is done!
Now, lets do the flash.
First start off with your .WAV file imported (check the compression rate) and go ahead and make a symbol containing that in the timeline. Loop it 9999 times, or however many times you want it to loop. After this is done, go ahead and move this clip onto the stage, and name its layer "Sound".
Next you need to create a box image to take place of your control. So make a simple box, and add text to it that says "control" this will serve as filler, so you don't lose the clip. The only work being done with this clip is through actionscript, so don't worry about the box.
After you have created your component-type clip, go ahead and place this script on it. I will explain how the code works a little later.
Code:
onClipEvent (load)
{
_root.soundstatus = "on";
_root.mySound = new Sound(_level0);
maxvolume = 100;
minvolume = 0;
}
onClipEvent (enterFrame)
{
if (_root.soundstatus == "on")
{
step = 5;
} // end if
if (_root.soundstatus == "off")
{
step = -5;
} // end if
maxvolume = maxvolume + step;
if (maxvolume > 100)
{
maxvolume = 100;
} // end if
if (maxvolume < 0)
{
maxvolume = 0;
} // end if
_root.mySound.setVolume(maxvolume);
}
Now lets create your button. I made a simple piece of text >> converted to graphic >> converted to button >> converted to symbol (movieclip) This process puts your button inside a ciip where you will use it again. After you have done this, go inside the clip where your button is located. You then need to insert a keyframe in frame two, with the same button in it. Put a stop action in each frame. (ESC+S+T) Change the two buttons so that the state of the button is obvious, (I greyed the frame 2 button out).
Now, for your first button (or the one that will decrease the sound), put this script inside
Code:
on (release) {
_root.soundstatus = "off";
gotoAndPlay(2);
}
Put this script in your second button (or the button that will increase the volume again)
Code:
on (release) {
_root.soundstatus = "on";
gotoAndPlay(1);
}
Now, if you have correctly executed this, you should now be able to test your movie, and the sound will start playing. Try click the button to test the changing of the volume. It should fade in and fade out depending on the button.
*****
I will now explain how this works.
Code:
onClipEvent (load)
{
_root.soundstatus = "on";
_root.mySound = new Sound(_level0);
maxvolume = 100;
minvolume = 0;
}
onClipEvent (enterFrame)
{
if (_root.soundstatus == "on")
{
step = 5;
} // end if
if (_root.soundstatus == "off")
{
step = -5;
} // end if
maxvolume = maxvolume + step;
if (maxvolume > 100)
{
maxvolume = 100;
} // end if
if (maxvolume < 0)
{
maxvolume = 0;
} // end if
_root.mySound.setVolume(maxvolume);
}
As you can see the first thing we do is declare the variable of soundstatus. Then we set the max and min volume (this can be changed, of course) The root sound, which controls all the sounds in your movie can be reset to alter just the music. Just be sure to change the linkage of the sound in the library and then edit this script to follow suit.
The next thing you see done is the if statement. Basically all it does is ask "Is the soundstatus ON or OFF". The steps do the changing. Every 5 frames the volume is decreased or increased. The if statements after that control the limits.
If you have any questions, feel free to post them. I will post the source at a later date if needed.
Thanks!
-solaris
