Fall 2010 week 13:—12/06/10: Mon. 9:00 - 12:00

Hi Everyone,

Okay Everyone, here we go, the last final week, the final push until, well, the final is due. What you will find here is a painstaking list of all the code and explanations that you will need for your final project.

You should work on these new things in class on Monday, week 13.

You will find additional pieces of code that we have not covered in class, a few new things that you will have to add to your project. These are the if/else statement, a switch statement, and a toggle button that turns music on and off.

That last thing is considered your final exam, so you should definitely do your own work. Everyone's should look different. Doing this well, will definitely separate the good projects from the truly excellent projects.

Projects are due no later than 10:00AM, Monday, 20 December 2010.

Carter-

WEEK 13

Final Project:
1. PART I
1. Declarations:    You should always start out your code at the top with your declarations. What this means is that you are announcing to AS3 that you are going to be using some variables or other data storage devices, and that you are going to use certain objects in your script down below. For our script, you will need to start out with two Arrays, and then a number of ColorTransform objects. If we need any others later, we will return to the top of the script and add them.


1. Array Objects
1. Text Array
1. First, an array is a particular kind of object in Flash and ActionScript, and all objects begin as variables. These variables, however, are then modified so that they take on additional properties that ordinary variables do not possess.
2. Second, remember that an array is an object, much like a variable, which holds data. However, an array is able to hold many, many data items, unlike variables which may only hold onto one data element.
3. The first array that we need is the array that we will use to add text to the buttons. These elements must simply state whatever label you want to appear in your buttons.
4. Each data item held in an array is indicated by a number. these numbers are known as index numbers, and they always begin counting with the number zero (0).


1. var txtArray:Array = new Array();
1. txtArray[0] = "bio";
2. txtArray[1] = "art";
3. txtArray[2] = "galleries";
4. txtArray[3] = "gallery 1";
5. txtArray[4] = "gallery 2";
6. txtArray[5] = "movement";
7. txtArray[6] = "resources";


5. Another, shorter way of giving an array data, which is what we just did above (we put strings, pieces of text with quotation marks around them) and otherwise known as populating an array is here:


1. var txtArray:Array = new Array("bio, "art", "galleries", "gallery 1", "gallery 2", "movement", "resources");


6. Yet another, even shorter and more efficient way of populating an array is what is known as literal notation:


1. var txtArray:Array = ["bio, "art", "galleries", "gallery 1", "gallery 2", "movement", "resources"];


7. Any of these is acceptable when declaring and populating an array. They all do exactly the same thing. It is simply a matter of preference.
8. Now, assuming that you've already created your buttons, you need to apply the text to them. Recall, the way that you should have created your buttons are as MovieClip instances, and that this button movieclip must contain 2 additional movieclips within it, a stroke_mc movieclip for the stroke and a fill_mc for the fill. It should also contain a dynamic text box.
9. Each of these three items that are inside of your button movieclip should have instance names. I have givem them the instance names of stroke, fill, and btn_txt.
10. You might also want to take note that for the instance names for the button movieclips, I have started with btn_00. I have done this to match the counting of the array which also begins at 0.


1. btn_00.btn_txt.text = txtArray[0];
2. btn_01.btn_txt.text = txtArray[1];
3. btn_02.btn_txt.text = txtArray[2];


11. Furthermore, you must remember that the buttons of the drop-down menu are INSIDE another movieclip which, in class, I named options:


1. btn_00.btn_txt.text = txtArray[0];
2. btn_01.btn_txt.text = txtArray[1];
3. btn_02.btn_txt.text = txtArray[2];
4. options.btn_03.btn_txt.text = txtArray[3];
5. options.btn_04.btn_txt.text = txtArray[4];
6. btn_05.btn_txt.text = txtArray[5];
7. btn_06.btn_txt.text = txtArray[6];




2. URL Array
1. The second array should be typed below the first and is going to be used for the URLs for when we need to request the content files, also known as the external .swf files. Whichever mode of creating and populating an array that you used above, you could use here as well. Consistency in a script is always best and helps to avoid confusion later on. However, since each item in our array is also a URLRequest object, the best way to type it is as follows:


1. var urlArray:Array = new Array();
1. urlArray[0] = new URLRequest("bio.swf");
2. urlArray[1] = new URLRequest("art.swf");
3. urlArray[2] = ...etc...


2. If you want to put your content pages in a separate sub-folder named content, for example, you would type your array slightly differently as below:


1. var urlArray:Array = new Array();
1. urlArray[0] = new URLRequest("content/bio.swf");
2. urlArray[1] = new URLRequest("content/art.swf");
3. urlArray[2] = ...etc...




2. ColorTransform Objects
1. New Colors
1. ColorTransform objects are really just what their name suggests they might be: they are objects which have the ability to change the color of something. In this case, we want to change the color of a movieclip from its current color to a new color. For that, we need to create a ColorTransform object and then apply it to the item that we wish to transform.
2. The first color object I have down below will be attached to my stroke so that I can modify the color of my stroke to a new color. Thus, in front of the c, I have put the letter s, referring to stroke.
3. Also, notice down below that the way we create this object is virtually identical to the way that we created our arrays:


1. var sc_new:ColorTransform = new ColorTransform();
2. sc_new.color = 0x990000;


4. Next, is the new color for the fill movieclip, for which I follow exactly the same procedure, except instead of the s in front of the c, I have placed an f to refer to fill:


1. var fc_new:ColorTransform = new ColorTransform();
2. fc_new.color = 0xffaaaa;


5. Many of you have also created a ColorTransform object for your text:


1. var tc_new:ColorTransform = new ColorTransform();
2. tc_new.color = 0x660000;


2. Old Colors
1. The next set of colors are, for lack of better terminology, are the old colors. These are the original colors that our buttons began with and which they should return to once the user stops interacting with them. If you have three new colors, you should also have 3 old colors:
1. var sc_old:ColorTransform = new ColorTransform();
2. sc_old.color = 0x000000;


3. var fc_old:ColorTransform = new ColorTransform();
4. fc_old.color = 0xffffff;


5. var tc_old:ColorTransform = new ColorTransform();
6. tc_old.color = 0x000000;





2. Functions:    After our declarations above, we will start with our functions. I want to start from the simplest and then progress to the more advanced. At the same time, I would like to start with the general functions, the ones that affect many objects and move to the more particular functions, the ones that affect fewer objects.


1. Color Modification Function
1. New Stroke Color
1. The first function we will try is the function that will change the colors of the buttons. To start this out, however, instead of trying to change all three colors for the stroke, the fill, and the text all at once, it's always better to do one thing at at time. Then, once you get that one thing to function, you can add additional features. Let's start with getting the stroke color for ONE of the button movieclips to change.


1. function overIt(evt:MouseEvent):void{
1. btn_00.stroke.transform.colorTransform = sc_new;
2. }


2. That's very simple, but it won't work at all until we add a listener to call on this function when we MOUSE_OVER the button.


1. btn_00.addEventListener(MouseEvent.MOUSE_OVER, overIt);
2. Multiple Button Color Change
1. Now, when you mouse over the first button, the stroke should change colors. There is a problem with this, however: you should notice that inside the function that I used a particular instance name, btn_00. Therefore, this will only work for that one button. If you try mousing over any of the other buttons, it doesn't work at all on them.
2. Using this logic, then, we'd have to write a separate function for each button just to change the color of each button. That is too much typing to do something simple.
3. This means, to be more efficient, we have to think of something that allows us to change the color of whatever button that the user happens to be mousing over at any given time. How can we pinpoint a particular button, the button the user is mousing over at any given moment, without actually calling it by name? Because if we call it by name, that means we'll have to go through each one and call each one by name one at a time. This is not efficient at all.
4. The answer is in the little variable in the function declaration, evt:MouseEvent. There, the term evt (an abbreviation of the word event), is actually a variable. As you should know, a variable is a data container. In this case, this variable contains a particular kind of data. The word after it MouseEvent tells you what kind of data is contained within that variable, information about a event that occurs with the mouse. Whenever the user mouses over the button, information about the button and the event is stored in that variable.
5. This means, that that variable, evt, contains information about whatever button that the user happens to be mousing over at any given time, and we can access that information.
6. One of the properties of a MouseEvent is currentTarget. The word target is whatever happens to be the target of the user's attention with the mouse. If the user is mousing over a button, that button is the currentTarget.
7. Let's try something: let us put a trace in our function and for the moment disable our statement by commenting it out. We are going to trace the name of the current target.


1. function overIt(evt:MouseEvent):void{
1. //btn_00.stroke.transform.colorTransform = sc_new;
2. trace(evt.currentTarget.name);
2. }


8. Now, let's add listeners for the remaining buttons:


1. btn_00.addEventListener(MouseEvent.MOUSE_OVER, overIt);
2. btn_01.addEventListener(MouseEvent.MOUSE_OVER, overIt);
3. btn_02.addEventListener(MouseEvent.MOUSE_OVER, overIt);
4. options.btn_03.addEventListener(MouseEvent.MOUSE_OVER, overIt);
5. options.btn_04.addEventListener(MouseEvent.MOUSE_OVER, overIt);
6. btn_05.addEventListener(MouseEvent.MOUSE_OVER, overIt);
7. btn_06.addEventListener(MouseEvent.MOUSE_OVER, overIt);


9. You should see now, that when you test your movie you the name of the button you are mousing over, of WHICHEVER button you are mousing over, pops up in the output window.
10. So, let's apply that to the color change:


1. function overIt(evt:MouseEvent):void{
1. btn_00evt.currentTarget.stroke.transform.colorTransform = sc_new;
2. }
3. New Fill Color
1. We can apply the same technique to making the color of the fill and text change:


1. function overIt(evt:MouseEvent):void{
1. evt.currentTarget.stroke.transform.colorTransform = sc_new;
2. evt.currentTarget.fill.transform.colorTransform = fc_new;
3. evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
2. }


4. Original Stroke & Fill Colors
1. Now that we have changed the color, let's make it change back. We'll begin this by creating a new function:


1. function outIt(evt:MouseEvent):void{
1. evt.currentTarget.stroke.transform.colorTransform = sc_old;
2. evt.currentTarget.fill.transform.colorTransform = fc_old;
3. evt.currentTarget.btn_txt.transform.colorTransform = tc_old;
2. }


2. And then the listeners:


1. btn_00.addEventListener(MouseEvent.MOUSE_OUT, outIt);
2. btn_01.addEventListener(MouseEvent.MOUSE_OUT, outIt);
3. btn_02.addEventListener(MouseEvent.MOUSE_OUT, outIt);
4. options.btn_03.addEventListener(MouseEvent.MOUSE_OUT, outIt);
5. options.btn_04.addEventListener(MouseEvent.MOUSE_OUT, outIt);
6. btn_05.addEventListener(MouseEvent.MOUSE_OUT, outIt);
7. btn_06.addEventListener(MouseEvent.MOUSE_OVER, outIt);


3. Great, now it changes back and forth easily from one set of colors back to the original set of colors. Great, now onto the next job, opening and closing the drop-down menu.




2. Drop-Down Function
1. Close Menu
1. The first thing we need to do is close the menu so that when we first open our site it is NOT opened with all of the buttons underneath it showing. We don't want those buttons showing until we mouse over the top button of the menu, the only one that should be showing. All the others, remember, are inside another movieclip that we named options.
2. That's very easy, at the very top of your script in the actions window, type the following line of code:


1. this.options.visible = false;


3. And that's it for that. When you test the movie, you'll see those buttons are gone
2. Open Menu
1. But now, we want to make them appear when we mouse over the top button. That's easy enough. All we would have to do is create a function so that when you MOUSE_OVER the top button of the menu, the other buttons below it become visible.
2. If you recall, however, we already have a listener for the MOUSE_OVER event, and it calls our first function, overIt. That means we have to put this part within that function.


1. function overIt(evt:MouseEvent):void{
1. evt.currentTarget.stroke.transform.colorTransform = sc_new;
2. evt.currentTarget.fill.transform.colorTransform = fc_new;
3. evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
4. this.options.visible = true;
2. }


3. Aha! If you tested that, you found that it didn't quite work. It opens when you mouse over ANY of the buttons, not only the one with the menu. That's a problem. We ONLY want it to open when we mouse over the top button with the menu and ONLY that button, none of the others.
4. To do that we'll need to learn about a new type of statement, a conditional statement. We also call these if/else statements.
5. In an If/else statement, you can pinpoint an action that you want to have happen only IF a certain condition is met.
6. Our condition is if the user mouses over the top button of the menu. In my script, my top button has an instance name of btn_02, so that will be my condition:


1. function overIt(evt:MouseEvent):void{
1. evt.currentTarget.stroke.transform.colorTransform = sc_new;
2. evt.currentTarget.fill.transform.colorTransform = fc_new;
3. evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
4. if (evt.currentTarget.name == "btn_02") {
1. this.options.visible = true;
5. }
2. }


7. To make certain that the menu stays open so long as we are mousing over ANY of the buttons of the menu, not just the top one, but also the others below it, we must add some conditions to our statement.
8. Not only do we want it to remain open IF we mouse over the top button, but we want it to remain open if we mouse over the top button OR the 2nd button, OR the 3rd button, OR the 4th button. The way we includ the OR OPTIONS is with the || characters, which are located at the SHIFT - \.


1. function overIt(evt:MouseEvent):void{
1. evt.currentTarget.stroke.transform.colorTransform = sc_new;
2. evt.currentTarget.fill.transform.colorTransform = fc_new;
3. evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
4. if (evt.currentTarget.name == "btn_02" || evt.currentTarget.name == "btn_03" || evt.currentTarget.name == "btn_04") {
1. this.options.visible = true;
5. }
2. }


9. Now, the menu will remain open until you mouse over another button. This isn't a perfect solution, but it is fine for now. I will give extra credit to anyone who comes up with a solution in which the menu closes when you mouse off any of the buttons, without having to wait until you mouse over another button before it closes. Don't spend a lot of time and don't write a lot of code to solve this. It isn't that important. Other things in this project are much more important.





3. Loading External Files
1. Loader Object
1. We left off at the beginning one of our objects, and that is the Loader object. This is essential for placing external files within another main file.
2. We have our URLRequest objects that request a particular file. Now we need to place the requested file within an object that will actually do the job of loading it, of bringing it from outside the current (index) .swf file and preparing it for placement onto the current file. If you recall my gun analogy from class, the URLRequest is the external file, so it is like a bullet. The loader, then, is the gun that will deliver our bullet.
3. The next two jobs then are to create the loader and then place the bullets inside our gun. Our gun, however, is a special sort of gun that can only hold and fire one bullet at a time. That means it is like most shotguns: we have to reload it with a new shell each time we shoot with it.
4. First let's create the loader at the top, in the declarations section of our code. We can place it beneath the array with the URLRequests:


1. var urlArray:Array = new Array();
1. urlArray[0] = new URLRequest("bio.swf");
2. urlArray[1] = new URLRequest("art.swf");
3. urlArray[2] = ...etc...


2. var swfLoader:Loader = new Loader();


5. Now, at the bottom, in the functions section of our code, let's start with a new function for loading the external .swf files.


1. function loadIt(evt:MouseEvent):void {


2. }


6. Now, at the bottom, in the functions section of our code, let's start with a new function for loading the external .swf files.


1. function loadIt(evt:MouseEvent):void {
1. swfLoader.load(urlArray[0]);
2. box.addChild(swfLoader);
2. }


7. Create a listener grouped at the bottom with all of the other listeners. Since we are trying to load the first item of our array, this means we want the listener to relate to the first button.


1. btn_00.addEventListener(MouseEvent.CLICK, loadIt);


8. This is very nice and all, but we have a similar problem that we did above when we wanted to change the colors of the different buttons. If you look in our function, you will see that it will only add the first item of the array, and none of the others. If we followed this logic, as with the color function, we'd have to write one function for every button. That is terribly inefficient, and there is a better way.
9. Once again, we need to rely on that little variable named evt within the parentheses in the function declaration.
10. Like we did with the colors, we'll use it together with the currentTarget property:


1. function loadIt(evt:MouseEvent):void {
1. //swfLoader.load(urlArray[0]);
2. //box.addChild(swfLoader);
3. trace(evt.currentTarget.name);
2. }


11. Now, when you click on the first button, in the output window, you'll see the name of the button. So, let's add the listeners for all of the other buttons:


1. btn_00.addEventListener(MouseEvent.CLICK, loadIt);
2. btn_01.addEventListener(MouseEvent.CLICK, loadIt);
3. btn_02.addEventListener(MouseEvent.CLICK, loadIt);
4. options.btn_03.addEventListener(MouseEvent.CLICK, loadIt);
5. options.btn_04.addEventListener(MouseEvent.CLICK, loadIt);
6. btn_05.addEventListener(MouseEvent.CLICK, loadIt);
7. btn_06.addEventListener(MouseEvent.CLICK, loadIt);


12. Notice that I have a line through the listener for btn_02 (the third button). That is because it is the one with the drop-down menu. It doesn't load external files, so we don't need to include it in this function.
13. Now, when you click on the individual buttons, you see their names pop up in the output window.
14. Next, let's load a file, but to do so we'll have to learn a new type of statement. As above with the drop-down menu, we have conditions. In this case, we don't have only ONE condition OR another. No, in this case we have MULTIPLE CONDITIONS.
15. We could still use the If/else statement, but when you have many conditions, it is better to use the switch statement.
16. In our situation, we have several buttons and each of those buttons loads a different file. IF we mouse over one button, THEN we must load a certain file. Otherwise, IF we mouse over another button, THEN we must load another file; and so on for several buttons.
17. The variable, evt allows us to capture which button the user happens to be mousing over or clicking on at any given moment. Once again, this is very useful to us. This time, like before, we are going to capture the instance name of the button; but in addition, we are going to store it in a new variable within the function:


1. function loadIt(evt:MouseEvent):void {
1. var btnName:String = evt.currentTarget.name;
2. //swfLoader.load(urlArray[0]);
3. //box.addChild(swfLoader);
4. //trace(evt.currentTarget.name);
2. }


18. With this variable, you will see that it contains the necessary information. If we put the variable within the trace you will see that it traces the same info as before here: trace(evt.currentTarget.name);


1. function loadIt(evt:MouseEvent):void {
1. var btnName:String = evt.currentTarget.name;
2. //swfLoader.load(urlArray[0]);
3. //box.addChild(swfLoader);
4. trace(btnName);
2. }


19. As you can see if you try that out, nothing has changed with the addition of that variable.
20. Now, we can use that variable, btnName to determine which button the user happens to be mousing over. And then, once we determine which case it is, we'll tell actionscript to load one file or another.
21. In the case of btn_00, then Flash should load the first file; in the case of btn_01, then Flash should load the second file; and so on for all the files.


1. function loadIt(evt:MouseEvent):void {
1. var btnName:String = evt.currentTarget.name;
2. //swfLoader.load(urlArray[0]);
3. //box_mc.addChild(swfLoader);
4. //trace(btnName);
5. switch (btnName) {
1. case "btn_00" :
1. do something;
2. stop;
2. case "btn_01" :
1. do something else;
2. stop;
3. case "btn_03" :
1. do this other thing;
2. stop;
4. case "btn_04" :
1. do yet another thing;
2. stop;
5. case "btn_05" :
1. blah blah blah;
2. stop;
6. case "btn_06" :
1. yadda yadda yadda;
2. stop;
6. }
2. }


22. So, what we actually want to tell the switch statement to do is to load different files depending on which button is clicked:


1. function loadIt(evt:MouseEvent):void {
1. var btnName:String = evt.currentTarget.name;
2. //swfLoader.load(urlArray[0]);
3. //box.addChild(swfLoader);
4. //trace(btnName);
5. switch (btnName) {
1. case "btn_00" :
1. swfLoader.load(urlArray[0]);
2. box.addChild(swfLoader);
3. break;
2. case "btn_01" :
1. swfLoader.load(urlArray[1]);
2. box.addChild(swfLoader);
3. break;
3. case "btn_03" :
1. swfLoader.load(urlArray[2]);
2. box.addChild(swfLoader);
3. break;
4. ...etc...
6. }
2. }


23. In addition, we want to make certain that the drop-down menu closes when you click on any of the buttons that are within the menu. In my case, in the drop-down menu that I've created here, that would be the 4th, and 5th (btn_03 & btn_04).


1. function loadIt(evt:MouseEvent):void {
1. var btnName:String = evt.currentTarget.name;
2. //swfLoader.load(urlArray[0]);
3. //box.addChild(swfLoader);
4. //trace(btnName);
5. switch (btnName) {
1. case "btn_00" :
1. swfLoader.load(urlArray[0]);
2. box.addChild(swfLoader);
3. break;
2. case "btn_01" :
1. swfLoader.load(urlArray[1]);
2. box.addChild(swfLoader);
3. break;
3. case "btn_03" :
1. swfLoader.load(urlArray[2]);
2. box.addChild(swfLoader);
3. this.options.visible = false;
4. break;
4. case "btn_04" :
1. swfLoader.load(urlArray[3]);
2. box.addChild(swfLoader);
3. this.options.visible = false;
4. break;
5. ...etc...
6. }
2. }


2. PART II
1. Music:    For the last part of this project, you will need to do two things: create what's known as a toggle button, which is a button that has an ON position and an OFF position. When you click on it once it turns ON, and then when you click on it again, it turns OFF.
1. Toggle Button:
1. As with the other buttons, this button will be a nested set of movieclips. This simply means that you will have movieclips within movieclips.
2. For example, perhaps you will have a shape that looks like a speaker for your ON position, and then a red slash that appears over the speaker for your OFF position.
3. So, your first job is to draw a side-view of the way a speaker looks: ( http://www.tuaw.com/2007/09/12/access-your-macs-super-quiet-mode/ ). That is an example.
4. Once you do that, convert it into a movieclip symbol.
5. Next, draw a diagonal red slash over the top of it and conver it into a movieclip as well.
6. Both of these movieclips should have instance names.
7. The speaker I will call sndON, and the slash I will call simply sndOFF.
8. Now place the red slash on top of the speaker if you haven't already.
9. Select them both and convert them into another symbol named sndBtn.
10. Enter into edit mode for this new symbol and then select both objects.
11. Right-click on your selection and select distribute to layers.
12. Delete the blank layer and exit edit mode.
13. Give your symbol the instance name of snd.


2. Toggle Button Actions:
1. This button is very similar to the drop-down menu: first we have to hide the red slash. Therefore, at the very top of your code, on the 2nd line, type the following line of code:


1. this.snd.sndOFF.visible = false;


2. Since the sndOFF movieclip, the one of the red slash is going to be INvisible, the visibility is FALSE, then all the user will see is the speaker. This means that the movie will start off with the sound playing. The default is to have music. The user will have to turn it off if he/she wishes.
3. Now, we need to create a function that switches the visibility of the slash from false to true. This will signify that the sound has stopped and no longer playing because the speaker will have a VISIBLE red slash over the speaker.


1. function sndOnOff(evt:MouseEvent):void {
1. this.snd.sndOFF.visible = true;
2. }


4. Following this, you will need to add the listener for the snd movieclip:


1. snd.addEventListener(MouseEvent.CLICK, sndOnOff);


5. The problem with this function is that it only turns the sound ON. It would be better if the function turned it both on AND off. To do that we will need another if/else statement. This statement will simply determine if the red slash is visible or invisible. If it is visible, then the sound is OFF; and if it is invisible, then the sound is ON.


1. function sndOnOff(evt:MouseEvent):void {
1. if(snd.sndOFF.visible == false) {
1. snd.sndOFF.visible = true;
2. } else {
1. snd.sndOFF.visible = false;
3. }
2. }


3. Music File:
1. Now, in your main folder, create another folder named music.
2. Within that folder, you need to place a music file. This music file MUST be an .mp3 file.
4. Music Actions:
1. In order to have this button place music into your site, you will first need to declare three objects. Therefore, scroll UP to the declarations section of your code at the top.
2. The first object is the sound object and it contains the music sound itself.
3. The second object is the sound channel object and it controls the behavior of the sound, whether it is playing or not.
4. The third object is the URLRequest object, which, like any of our other request objects, requests an external file and prepares it for loading into the main .swf movie file.


1. var sndMus:Sound = new Sound();
2. var sndChan:SoundChannel = new SoundChannel();
3. var sndReq:URLRequest = new URLRequest("song.mp3");


5. Next, you have to load the requested file:


1. var sndMus:Sound = new Sound();
2. var sndChan:SoundChannel = new SoundChannel();
3. var sndReq:URLRequest = new URLRequest("song.mp3");
4. sndMus.load(sndReq);


6. Now, you have to create a function to play the loaded file; but that doesn't make any sense: we already have a function that operates the button. We can just add some actions to that function:


1. function sndOnOff(evt:MouseEvent):void {
1. if(snd.sndOFF.visible == false) {
1. snd.sndOFF.visible = false;
2. sndChan = sndMus.play();
2. } else {
1. snd.sndOFF.visible = true;
2. sndChan.stop();
3. }
2. }