for soundboards with the mp3s inside them rather than in the '_root folder' (the same folder the soundboard will be in)PART ONE: Making the Movie Clip Buttons
1. Open Macromedia Flash
2. click File>New, make sure 'Flash Document' is selected, and click OK
3. click File>Import>Import to Library, browse to the mp3 files you want to make buttons of, select fewer than 100 mp3s and click Open
4. click Window>Library, and find the first mp3 in the top of the list, decide on a name for the button that will play this mp3
5. in the tool bar, click the text tool (the letter A), left click the main stage area, and type in the name you chose in step 4
6. in the tool bar, click the selection tool (the black arrow), then click Modify>Convert to Symbol
7. make sure 'Type:' is set to Movie Clip, and in the 'Name:' box, type the name you chose in step 4 and hit OK
8. on the main stage, double-click the newly made button and you will see the 'timeline' for a movie clip button is not limited to four frames as is the case with regular buttons - but frame 1 should be highlighted in black
9. in the movie clip's timeline, right-click frame 2 and click 'Convert to Blank Keyframes'
10. under and to the left of the movie clip's timeline, click the 'Insert Layer' button, which will insert 'Layer 2' into the movie clip's timeline
11. in the movie clip timeline, right-click frame 1 of the new Layer 2, and click 'Convert to Blank Keyframes'
12. left click in frame 1 of Layer 2, then click Window>Actions, which opens up the 'actionscript' pane - where codes go that control flash
13. open the Actions window, and inside it, type this:
stop();14. minimize the Actions window for now, then go back to the movie clip's timeline and left-click in frame 2 of Layer 1
15. in the Library window, left-click-hold the mp3 that corresponds to the movie clip and drag the mp3 out onto the main stage (you should now see a little blue line inside frame 2 of Layer 1 in your movie clip's timeline)
16. exit the movie clip's timeline by clicking the 'Scene 1' link above and to the left of the movie clip's timeline
17. on the main stage, click anywhere there is empty space to deselect the movie clip - then reselect it (ensures you've got the movie clip selected)
18. un-minimize the Actions window, and type in (or copy/paste in) the following, exactly as it is shown:
onClipEvent(mouseUp){
if(this.hitTest(_root._xmouse,_root._ymouse)){
this.gotoAndStop(2);
this.pressed=true;
_root.gotoAndStop(1);
}
}
that code tells the movie clip button that if the mouse is over the top of it when the mouse is released that the movie clip should go to its own frame 2 and then return the whole soundboard back to page 1
the soundboard needs to be returned to page 1 because once the soundboard is complete, you will be arriving at these coded movie clip buttons by pushing a loader button on the soundboard's page 1, which will send the soundboard to the page these movie clip buttons are on - unless the code on these buttons returned the soundboard to page 1, the soundboard would stay on the page with the movie clip buttons
but what makes the sound play is the part of the code that tells the movie clip to go to its own frame 2 - where the mp3 you dragged in resides. the way a movie clip works, if there is an mp3 in a frame, when the movie cip gets to that frame it plays the mp3 file
the nice thing is that when the soundboard itself gets sent back to page 1, if you return again later to the page with all of the coded movie clip buttons, you'll see that even though there was never any code on them to tell them to return to their own frame 1, they are all in frame 1 - this is because each time you visit the soundboard page with the movie clip buttons on it, flash automatically has them all start at frame 1
one other thing - without the 'stop();' command you put inside the movie clips, when the soundboard got to the page with all the coded movie clips on it, they would all begin playing immediately - so you'd hear a bunch of mp3s play all at once
to make matters worse, movie clips work on a loop, so when each of them gets to its last frame, they start playing again from their first frame - putting the 'stop();' code in there prevents all of this, and allows you to control when the movie clip advances to frame 2 - where the mp3 resides
so now that I've explained how to make an individual movie clip button, you simply repeat steps 4-18 until you've made a corresponding movie clip button for each mp3 you imported in step 3 - but after you do that, you'll have only completed PART ONE of the process, PART TWO is making the loader button that will send the soundboard to the page with all of these movie clips on them
PART TWO - Making the Loader Button:
After completing PART ONE, you should have a few movie clip buttons finished.
1. on the main stage, select all of the movie clip buttons you made in PART ONE, either by left-clicking in frame 1 of the timeline, or selecting them with the selection tool (reachable by the black arrow in the tool bar)
2. click Edit>Cut
3. in the timeline for the soundboard, right-click frame 2 and click 'Convert to Blank Keyframes'
4. click Edit>Paste in Place, which will put all the movie clips in the same place they were in frame 1 in the new frame 2
5. in the timeline, left-click frame 1
6. come up with a name for your loader button, so if in PART ONE you made a bunch of movie clips for 'hellos', maybe the name is Hello
7. in the tool bar, click the text tool (the letter A), left click the main stage and type in the name from PART TWO, step 6
8. in the tool bar, click the selection tool (the black arrow)
9. click Modify>Convert to Symbol
10. make sure the 'Type:' is set to 'Button', and type in the name from PART TWO, step 6, BUT add the word 'loader' at the end, incase without the word 'loader' you would accidentally be naming your loader button the same name as one of your movie clip buttons already in the library - like if one of your hellos was actually named 'Hello' - if you tried naming your loader button 'Hello' it would say there was already a button created with that name - after you name the button and add 'loader' to it, click OK
11. on the main stage, find the newly created loader button, and make sure it's selected by deselecting it (clicking on blank space) and reselecting it
12. in the Actions window, type in (or paste in) the following code, exactly as it appears:
on (press){
gotoAndStop(2);
}
that code tells the soundboard to go to page 2 - where all of your coded movie clip buttons are.
at this point, you now have a soundboard with one loader button and a few coded movie clip buttons.
if you were to want to create a new set of movie clip buttons for maybe a set of 'goodbyes' you had mp3s of, you'd follow the same process EXCEPT that when you got to PART TWO, steps 3-5, you would be putting your new coded movie clips in the soundboard's page 3, and in PART TWO step 12, the code on your new 'Goodbye' loader would now be:
on (press){
gotoAndStop(3);
}
so it follows that if you made another new set of movie clip buttons, maybe of laughs you had, in PART TWO, steps 3-5 you would put the new coded movie clips into the soundboard's page 4, and in PART TWO, step 12, the code for your 'LAUGHS' loader would be:
on (press){
gotoAndStop(4);
}
the point I'm making is that the code on the loader button on the soundboard's page 1 must tell the soundboard to go to the same page that the corresponding coded movie clips are!
once you know that, there is really only one other thing you need to be able to do to make this whole process complete, and thus, PART THREE
PART THREE: making rectangles that block your view of what is beneath the coded movie clip buttons
So far, I've showed you how to make a coded movie clip button that resides on some page other than page 1 of your soundboard, and I've showed you how to make a loader button that resides on page 1 of the soundboard that, when clicked, sends the soundboard to the page where those coded movie clip buttons reside that you've chosen to be reached by that loader button
But, let's say you have a bunch of buttons on your soundboard that aren't loader buttons, but are just regular buttons like the ones from this tutorial:
http://www.jackulator.com/smf/index.php?topic=695.0 which is very likely going to be the case
when you click one of your loader buttons, your soundboard will go to another page where all of the coded movie clip buttons that correspond to that loader reside, but because you are no longer on page 1 of the soundboard, none of the regular buttons on page 1 will be visible
what if someone asks you a question, and the perfect answer for it is only reachable by clicking a loader button and going to another page of the soundboard to release your mouse over the movie clip button - BUT - as you do that, something else happens on your call where you no longer need to say what you were looking for? Or - you accidentally clicked the wrong loader button! Now you're stuck with a pop-up loaded, but none of the regular buttons on page 1 are visible - and the only way to get rid of the pop-up with the coded movie clip buttons is to click or release on one of them to send the soundboard back to page 1 - but that will play the mp3 file!!
obviously there needs to be a way of 'minusing' out a pop-up window (we'll get to that)
but, in another scenario, what if you want to get a sound ready - and it's inside a pop-up window on a soundboard page other than the main page 1, but you want to be able to click buttons on page 1 before you actually use the pop-up window's button. In order to use the buttons on page 1, they have to be visible, even if you're on the soundboard page with the movie clip button you're getting ready to use
this is simple to do. let's say in the soundboard's main timeline, in Layer 1, you had:
A. frame 1 has all of your normal buttons and some loader buttons created in PART TWO
B. frames 2-10 all had different sets of movie clip buttons created in PART ONE and moved to those frames 2-10 in PART TWO
this is an explanation, but I provide directions for how to do all of it below the explanation:in order to make it so that the buttons on page 1 of the soundboard are still visible on frames 2-10, you just have to create a new layer, which by default will extend across all pages of your soundboad, and then cut/paste all of the regular and loader buttons from page 1 of the original layer into the new Layer 2. Then you drag Layer 2 beneath Layer 1, so that the movie clip buttons on Layer 1, frames 2-10 appear 'above' the regular and loader buttons on Layer 2, which now extends across frames 1-10. Then in frames 2-10, you have to draw a rectangle to bound your movie clip buttons so that the text for them doesn't appear directly over the top of the text of the regular and loader buttons. Here's what you do:
1. In the main timeline for the soundboard, left-click in frame 1, which selects all of the regular and loader buttons you have made so far
2. click Edit>Cut
3. below and to the left of the timeline, click the 'New Layer' button, you should now see a new Layer 2 above Layer 1, that extends across all pages of your soundboard
4. in the soundboard timeline, left-click anywhere in Layer 2, then click Edit>Paste in Place - your regular and loader buttons now extend across all pages of your soundboard
5. left-click-hold the title bar of Layer 2 and drag it beneath Layer 1
6. click the Insert Layer button again, which creates a new Layer 3
7. left-click-hold the title bar of Layer 3 and drag it so that it is between Layer 1 and Layer 2 (so beneath Layer 1 and above Layer 2)
8. select all frames of Layer 3, right-click the selection and click 'Convert to Blank Keyframes'
the following will be repeated for each page of your soundboard that has coded movie clips on it:
9. left-click Layer 1, frame 2 (if you haven't already completed this step for frame 2, in which case it would be the next frame with movie clips on it that you haven't done this step for)
10. left-click in Layer 3, and the same frame as PART THREE, step 9 immediately above, select the rectangle tool and draw a rectangle that comfortably bounds all of the movie clips in Layer 1
11. left-click Layer 3, and the same frame as PART THREE, step 9, then click Modify>Convert to Symbol
12. making sure "Type:" is set to Button, leave the default name as it is (Symbol 1, Symbol 2...), except change the word 'Symbol' to 'Blocker' and click OK
what PART THREE steps 9-12 do is create a Blocker rectangle, and I'll explain why you need one:
If you get to a page with coded movie clips on it and you release the mouse over one of them, but you accidentally didn't have the mouse over one of them properly, of course no mp3 will have played, and the pop-up frame will still be loaded. If you try clicking one of the coded movie clips now, what will happen is not only will the mp3 for the coded movie clip play, but beneath it, on Layer 2, if you're also over the top of a regular button or loader button, if the button below is a regular button, the mp3 in the regular button will also play, or if the button below is a loader button, the soundboard will go to the page the loader button points
making the blocker rectangle that bounds your coded movie clips blocks everything beneath it from view, making it so that you can see your movie clips easier - because the background for them is now a rectangle, instead of all of the regular and loader buttons beneath
also turning the Blocker into a button instead of just a plain rectangle makes it so you can't accidentally click two buttons at once - a movie clip button and a regular or loader button on the Layer beneath - this is because Flash by default has it so that if two regular buttons overlap, the one on the 'higher' Layer is the one that gets what I might call 'click priority'
so now that you know how to make movie clip buttons, place them on different pages (frames) of your soundboard, make loader buttons that lead to those frames, make blocker rectangle buttons that block what's beneath your movie clip buttons from view and keep you from hitting two buttons at once - all you need now is a 'back' button on all the pages of your soundboard where you have pop-ups with coded movie clips in them - that way, if you click a loader button on page 1, and then change your mind, you can just hit a back button that will send the soundboard back to page 1, where there are no movie clip buttons or Blocker rectangles
STEP FOUR: making the 'back' buttons
1. left-click any blank space in Layer 2, frame 1 (any frame or layer will do - because you're just going to make a simple button)
2. in the tool bar, click the rectangle tool (the silver square)
3. draw a small square or rectangle
4. in the tool bar, click the selection tool (the black arrow)
5. click Modify>Convert to Symbol
6. ensure "Type:" is set to Button, in the "Name:" box, call it 'BackButton' or something similar, and click OK
7. on the main stage, deselect and reselect your new back button, and in the Actions window type in (or paste in) the following code:
on (press){
gotoAndStop(1);
}
Your back button is complete. Now click Edit>Cut, go to each frame of Layer 1 where you have movie clips residing, and click Edit>Paste, pasting a new copy of the back button on each of the frames, putting the back buttons you paste in whereever you want - but preferably within the area bounded by your Blocker rectangle on Layer 3 - otherwise your back button will be outside that area - and will appear to just be a box that isn't 'on the same page' as your coded movie clip buttons for that page.
SUMMARY:
I realize that this may be an exhaustive tutorial, and that it probably could have been written better. As a matter of fact, I apparently haven't thought about how complex all of this is in a long time, because I was thinking the tute would be about a third of the length. I tried to include every step, no matter how mundane or repetitive, so hopefully if people take it step-by-step, it won't be too disgustingly difficult. I'll try to answer any questions you may have. And coming soon is an addition to this tutorial that basically explains how to make the same coded movie clip buttons, but rather than having the mp3s inside each frame 2 of them, have code on each of them that plays the mp3 from the '_root' folder:
onClipEvent(mouseUp) {
if(this.hitTest(_root._xmouse,_root._ymouse)){this.pressed=true;
_global.MySound = new Sound();
_global.MySound.loadSound("TheNameOfTheMP3.mp3", true);
_root.gotoAndStop(1);
}
}
but that's coming very soon.
So good luck, and don't be afraid to ask questions.
