Audio/Flash Sig Tutorial

[fuzzone]

Hi! Welcome to Mr. Fuzzarelli's Audio Sig Shop.

Are you excited? Because I know I am.

First of all, there's a couple of audio sig tutorials out there and i personally think they are "okay".

If you look around, you'll see some sigs that are completely black -- that's because it's bad design.

Its not really black, it's just taking forever to load because the mp3 is attached to the sig from the moment it loads,

and not from the moment someone interacts with the sig.

Hopefully, I'm going to show u a proper way of doing it so that mvpmods folks dont

1) get annoyed 2) don't have thread-lag.

ok today we're going to start making audio sigs.

what you'll need is:

1. a sig at size Xwidth and Yheight.

2. Flash mx 2004 or Flash 8.

I recommend Flash MX 2004, since Flash 8 does get a little buggy in

firefox.

But Flash 8 is just fine.

Step 1.

Open up Flash and click Flash new document.

Step 2.

Here we have our flash environment open. It's so beautiful isn't it? I agree.

At the bottom, you should see something that looks like this.

Step 3.

Click where it says Size: 550 x 400 pixels and change the values to your Xwidth and Yheight.

You should see that your main work area has dramatically decreased in

size since we're making a sig thats about 475 x 120.

Step 4

Now we have our display area and we're going to click on File-->Import To Library and we're going to select our sig.

You should notice something like this on the far right. If you do not see a library panel, click on Window --> Library

Step 5.

Drag the sig from th library in your scene(your work area) Your sig should match the same size of the white work area.

Notice that there is a layer now called "sig" instead of layer1.

you can easily double click on the word to change it.

Step 6.

Now your going to click on File --> Import to Library--> select your mp3 file.

You should see in your library panel, the sig u imported before and now

your mp3.

Right click on your mp3 file in library panel, and choose

'Export Settings'

if 'Use Imported Mp3 Quality' Is checked, uncheck it and choose either 16kbps/medium or 32kbs/fast.

Either one should keep the final swf file under 1meg which is important.

Step 7.

Right click on the mp3 file again.This time choose linkage.

Click on Export For Actionscript.

Now type in an identifier name, i typed in 'mainsong'.

Step 8.

Now we have everything set up, so we create the components of the mp3 player.

Now we will cover 1 button and a volume control bar.

Click on Insert --> New Symbol --> Movie clip, im going to name this 'MP3Player-Volume'

Step 9.

You should see a whole lot open space now. You should see in your timeline a layer 1 and an empty bubble.

Select the rectange tool and draw a bar of some sort. Feel free to change the properties for a line color and fill color.

Step 10.

Select the whole bar, using the black mouse pointer. Now make sure it's on the 0.0 x axis just like the next screenshot.

Step 11.

Now make sure the whole bar is still highlighted, right click, and select COPY.

Step 12.

We're going to create a new symbol -- click on Insert --> New Symbol. Your going to name this

MP3Player-backing.

Step 13.

The symbol should be open and u should a whole lot of open white space.

Now your going to paste the bar, i personally would click edit --> paste in place, but it wont make a difference.

Now change the inner filling color to anything u want. Im going from yellow to white since my sig is dominantly black.

Also make sure it's lined up properly on the x-axis(0.0) like Step 10.

Step 14.

Now we have our components for the volume control done. We're going to create our play button.

There's a million and one ways to do it so we'll just keep it simple.

Click on Insert--> New symbol --> type in playbtn, and choose BUTTON as the symbol choice.

Step 15.

More open white space area to work in. But you'll notice your timeline at the top is different.

UP is what it looks like without any interaction.

OVER obviously means what it looks like when the mouse is over it.

DOWN is what it looks like when u press down on it.

HITis what happens when you release the mouse after pressing down.

You will only be concerned with up,over and down.

Example : Create a shape, copy it into each frame -- up,over,and down and then alter it a little bit

if you want to make it look like the shape has been clicked :

1. Put, in this case, a triangle in your up state.

2. copy it and click on the box in the timeline that says 'Down'.

3. click edit-->paste in place

4. now highlight the shape and click right 3 times and down twice.

Step 16.

Now we've created a play btn, and from this you should be abl to duplicate to create a stop button.

We've also created a volume bar and the backing of a volume bar.

Now we create our final symbol -- Insert --> New Symbol --> type in

'MP3Player'

Step 17.

You'll notice your time line, create 3 more layers so you have a total of 5 layers.

Change layer 1 to 'scripting'

Change layer 2 to 'buttons'

Change layer 3 to 'volume-number'

Change layer 4 to 'volume-bar'

Change layer 5 to 'volume-backing'

Step 18.

Make sure the layer volume-backing is highlighted. Look in your library, you should see 'MP3Player-Backing'

Drag it in to the main work area. You'll notice that the frame circle filled in.

Click on the instance of MP3Player-Backing you just dragged in.

You should see at the bottom in properties:

where it says <instance name>, type in 'vol_back'

Step 19.

Make sure the layer volume-bar is selected, drag in from your library 'MP3Player-Volume'

click on the instance of the MP3Player-Volume and type in the world 'vol_fill' where it says <instance name>

It is very important that vol_fill is exactly over vol_back. You can do this by matching the symbol bubble using the cross.

Step 20. Click on volume-number layer and grab the text_tool. Draw a text area over vol_fill in the work area.

Type in '100'. At the bottom, you'll see Properties. Choose dynamic text and give an instance name of 'volumenum'

Step 21.

highlight the buttons layer and drag your buttons in there. Give the playbtn and instancename of 'playbtn'.

It's okay if a symbol and instance have the same name, but instances cannot have duplicate names.

Step 22.

Let's assume you've made a stop button, drag in and give it an instance name of 'stopbtn'

step 23.

ok now we're going to do a little actionscripting.

Click on the layer scripting --> you'll see an empty circle in frame 1. click on the empty circle and right click.

You'll see at the bottom of the right click menu the Word 'Actions'. Choose Actions.

You should see something like this.

If ScriptAssist is on, Turn it off!

Step 24.

Here we put to good use all those instance names.

You can copy and paste the code, i tried to leave as many comments as i could.

var cue; // cue is the variable we're going to use just in case someone wants to pause the song.




vol_back.onRelease = vol_back.onReleaseOutside=function () { //onRelease function header


	delete vol_fill.onEnterFrame;


};




vol_back.onPress = function() {	 // fuction header for when the backing is pressed.




		vol_fill.onEnterFrame = function() {


		perc = (_xmouse-vol_back._x)/vol_back._width;


		perc > 0.95 ? perc = 1: null; 


		perc < 0.05 ? perc = 0: null; 


		this._width = vol_back._width*perc;


		setVol(Math.round(perc*100));


	};


};




setVol = function (volNumber) {   //Simple function header to set the volume.


	volume = volNumber;	   // volume is a keyword where we set the value of volnumber to it


	myMp3.setVolume(volume);  // myMp3 -- u must be saying wow where did that come from. This is just a quick


								  // blank reference because I know myMp3 doesn't exist until someone presses my playbtn.


	volumenum.text = volume;  // Here we change the text so it shows what the volume is as the bar is moved.


};






mp3click = false; // This is to help with the mp3 so it doesnt play automatically. 


				  // Trues will probably slay u if u set this to true.




pausedmp3 = false; // pausedmp3 is set to false by default, it is not set to true unless someone has clicked play first.




volume = 100; // my volume by default is going to be 100.








pausebtn.onPress = function() { // function header for a pause btn. You may just want a simple stop button


								// which is much easier than the following code.




	mp3click = false;	   // this stops the mp3 from playing


	pausedmp3 = true;	   // this lets me know that the mp3 has been played but it was paused.




	cue = Math.round(myMp3.position/1000); // we declared this variable earlier because i need it for the math function.


											   // you usually need to declare variables that will take some kind of


											   // calculation otherwise u get 'undefined'.


	myMp3.stop();		   // wow, another reference to myMp3 but where is it declared? Just another blank reference


								// I know that myMp3 does not exist until someone presses play so therefore, there's no


								// attachment to an mp3.


};








playbtn.onPress = function() {


	mp3click = true;		  //this is to keep track that mp3 has been played.




	if (pausedmp3 == true) {	   // if the mp3 was previously played,


		myMp3.start(cue, 1);   // I'm going to use cue to start my myMp3 from the last position it was paused.


		pausedmp3 = false;	 // then im gong to set pausedmp3 to false, because its no longer paused, it's playing


	} else {


		playMp3();		   // However, if pausedmp3 is not true, i'm going to play the mp3 from the beginning(0).


	}


};




function playMp3() {					  // This is the playMp3 function


	mp3click = true;				  // this means play button has finally been initiated.


	myMp3 = new Sound();			  // myMp3 finally is declared as a new Sound.






	selectedMp3 = mainsong;		   // remember when we right clicked on the mp3 and chose a linkage name? this is it.


	myMp3.attachSound("mainsong");	// Here we finally attach the mp3 to the swf.


	myMp3.start(cue,99);			  // we start from the cue whatever the cue, cue either has no value(defaulted to 0)


										  // or from where it was last paused.






	// myMp3 = new Sound();			 //myMp3 finally is declared as a new Sound.


		// selectedMp3 = "mp3file/mmm.mp3"; // This is very important, this is if i was going to stream the mp3 From a server where i have the mp3 file stored in the folder mp3files where my swf is located.




	// myMp3.loadSound(selectedMp3, true); //loadSound only works if we're streaming!!




	myMp3.setVolume(volume);






	totalbytes = myMp3.getBytesTotal();  // here is if u wanted to display total bytes.


	geladen = myMp3.getBytesLoaded();	// here if u wanted the bytes of the mp3 that has been loaded from when someone


						 // pressed play




	if (geladen != undefined) {


		mp3click = false;


	}


	else {


		volumenum.text = "Error Loading Track!";  //no sense having volume at 100 if the track was never loaded.


	}






	myMp3.onSoundComplete = function() {   // start the mp3 over.


		mp3click = true;


			playMp3();


	};


};

any errors or mistakes are possible, let me know. I did try copying and pasting the code, works fine.

Feel free to add on to this. Maybe u have a component you'd like to add. Write a tutorial for it and paste it.

Thanks.

Right click my sig to know how i feel about you.:)

[Dan]

Nice tut.

-BBHD

[krawhitham]

what about multiple audio files and a next button

[fuzzone]

i just wanted to get some sig guys started.

let's see if folks get one working first.

[krawhitham]

damit I want a whole concert to play

[fuzzone]

damit I want a whole concert to play

how about you make an mp3 sig first and then we'll talk,

or if u jump on aim, after im done

harassing u -- i can easily tell u how to host a concert of mp3's.

[Kriegz]

Fuzz, your sig always just has a pink bar with the number 100 on it and I can't get it to make sound. Maybe a firefox option I need to turn on?

[fuzzone]

yeah the first couple of lines i say something about how firefox doesn't work out well with the flash 8 plugin.

try it in IE to get the full effect TT.

what you'll need is:

1. a sig at size Xwidth and Yheight.

2. Flash mx 2004 or Flash 8.

I recommend Flash MX 2004, since Flash 8 does get a little buggy in

firefox.

But Flash 8 is just fine.

im using flash 8.

maybe there's a fix or a flash code work around but i haven't spent the time to figure it out.

Check it in IE TT.

EDIT: just tried it out in firefox. Works fine, make sure u have the latest flash plugin.

[AstroEric]

...Is there any way to write a flash interface that plays like 100 different songs and displays their information at random? As in, from a library of different songs? Does the music file have to be a part of the flash file, or is it possible to link to an external file?

I've had a website in mind for awhile that this would work awesomely with.

--Eric

[fuzzone]

u can link a 100 songs externally. havent tried to do more than one song per sig, but im done it numerous times on websites.

[AstroEric]

...Is it possible to have it play, instead of .mp3s, songs that are compressed already as swf files? What I'm trying to make is a lo-fi, small-in-KB-size low-bandwidth jukebox that plays from a random selection of songs with all the regular options -- play, pause, skip tracks -- from a pool of about 100-150 songs that I've already compressed as 1x1 pixel swf's.

I was going to make just an xhtml/css interface with a cgi script to randomize songs that would load in a tiny iframe. A Flash file would probably look and function much better though....

--Eric

[fuzzone]

well if u msg me on aim, i can show ui something along those lines. Im hosting some of my work on my server, but i have to be online for it to work -- so msg me when u get a chance.

maybe i can help u out.

[eber]

Nice work on the tutorial.

[AstroEric]

First I should probably find a way to get a newer Flash Studio. I have 5 on my PC now, and that probably won't cut it. Perhaps I can scam the school again.

--Eric

[Digital_Utopia]

I'll be happy to post my code as soon as I finish with the latest version...

right now my forward/next buttons act a little quirky on the first song (you have to press them twice) but after the first song they work great...

I'm currently adjusting the AS so that it dynamically loads the mp3s better, using dynamic variables while loading the data from an external txt file and storing all information including, id3 tag info into an array. for one, this will allow me to use a much more convienient way of changing tracks.

the current one just has the mp3s named numerically (1.mp3, 2.mp3..etc) the new one will be able to load the files without having to rename them.

[fuzzone]

The latest sig plays multiple audio files.

click on the yellow button to the far right at the bottom of this post.

looks cool, but internally -- pretty sloppy work. lol

[flash width=475 height=120]http://www.mindwarped.com/fuzz/rosario1.swf

by the way, download total classics 4 tomorrow when it comes out.

[Sandlot]

Man, it looks hard to make. Could you help me through MSN, sometime fuzz?

[carlitos]

Hi I cant get pass step 15 maybe you can help since I am not reading well I guess thx in advance UP is what it looks like without any interaction.

OVER obviously means what it looks like when the mouse is over it.

DOWN is what it looks like when u press down on it.

HITis what happens when you release the mouse after pressing down.

You will only be concerned with up,over and down.

Example : Create a shape, copy it into each frame -- up,over,and down and then alter it a little bit

if you want to make it look like the shape has been clicked :

1. Put, in this case, a triangle in your up state.

2. copy it and click on the box in the timeline that says 'Down'.

3. click edit-->paste in place

4. now highlight the shape and click right 3 times and down twice.

..........I wanna cry...............

[MarkB]

Excellent tutorial, fuzz/Ted. Nicely done. :D

[carlitos]

where do I get the shapes from.............this step is killing me.... I cant get the step 15............ what im doing wrong?........... help