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. }

Fall 2010 week 12:—11/29/10: Mon. 9:00 - 12:00f

Hi Everybody,

Seems that many of you who have been stumped are finally starting to get how all this work. There are only two weeks remaining, so make the most of the little time you have.

ALL BUTTONS SHOULD BE MOVIECLIPS. YOU WILL HAVE TO COMPLETE RE-DO THEM.

YOU WILL NEED AT LEAST ONE DROP-DOWN MENU, PROBABLY FOR YOUR GALLERY BUTTON (GALLERY 1, GALLERY 2) IN YOUR INDEX FILE. EXTRA POINTS TO ANY ADDITIONAL DROP-DOWNS YOU USE, BUT DON'T USE A DROP-DOWN IF IT IS NOT NECESSARY.

Carter-

WEEK 12

1. Homework
1. Continue working on your final projects, re-making your buttons from scratch as MovieClips, and including a drop-down menu, probably in place of your 2 Gallery buttons.
2. Classwork
• LINK    This week's class files
Below is the work that we began in class this week. Please review it if you feel you require extra practice, and come to class with any questions you may still have. This will be required for you final project.


1. Continue on with the drop-down menu that you started last week.
2. Type following object type known as an array at the very top of your actions:
• var txtArray:Array = new Array();
• txtArray[0] = "menu";
• txtArray[1] = "one";;
• txtArray[2] = "two";
• txtArray[3] = "three";
• txtArray[4] = "four";
• txtArray[5] = "five";
3. Now, change the following code:
1. btn_00.btn_txt.text = txtArray[0];
2. options.btn_01.btn_txt.text = txtArray[1];
3. options.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. options.btn_05.btn_txt.text = txtArray[5];
4. Now, let's create another array object right below the first:
1. var swfArray:Array = new Array();
2. swfArray[0] = "one.swf";
3. swfArray[1] = "two.swf";
4. swfArray[2] = "three.swf";
5. swfArray[3] = "four.swf";
6. swfArray[4] = "five.swf";
5. Next, change the next bit of code:
1. var req_01:URLRequest = new URLRequest(swfArray[0]);
2. var req_02:URLRequest = new URLRequest(swfArray[1]);
3. var req_03:URLRequest = new URLRequest(swfArray[2]);
4. var req_04:URLRequest = new URLRequest(swfArray[3]);
5. var req_05:URLRequest = new URLRequest(swfArray[4]);
6. Now look at your functions. At this point you should have 17 functions in total. That results in a lot of code, much of which is redundant. We can simplify it.
7. Here is what you do: Except for the functions for the top button, you should delete the Mouse Over and Mouse Out functions for EACH button. I’d named mine newColor_01 through newColor_05 and deleted all of those.
8. Here is what you do: Except for the functions for the top button, you should delete the Mouse Over and Mouse Out functions for EACH button. I’d named mine newColor_01 through newColor_05 and deleted all of those.
9. You should also delete the listeners for those functions.
10. When you're finished deleting, you should be left with 2 functions for the first button and 1 function for each of the options. That will be a total of 7 functions and 7 listeners. Unfortunately, now only the top button changes colors. We have to create a new function now that makes ALL the buttons change colors.
11. Type the following code:
1. function newColor_opt(evt:MouseEvent):void
2. {
1. trace(evt);
3. }
12. Now, create five listeners for the MOUSE_OVER event which calls this new function, newColor_opt at the end of it. We want this so that when we mouse over each of the buttons they call the SAME function, this new one.
13. Test the movie.
14. What you'll get when typing that is information about the MouseEvent. If you look in your code, in between the parentheses of the function, you will see that EVT is there. It is a variable that contains information about the MouseEvent. That is why when we do a trace(), we see the information that is held in that evt variable.
16. Now change the trace to the following:
• function newColor_opt(evt:MouseEvent):void
• {
• trace(evt.currentTarget);
• }
17. What you'll see now, is information that tells you what you have moused over is a MovieClip. Mouse over each of the options and you should get the same thing.
18. Current Target refers to the thing that you as the user are currently touching or mousing over with your mouse at that moment.
19. We can even output the NAME of the button that you mouseOver:
• function newColor_opt(evt:MouseEvent):void
• {
• trace(evt.currentTarget.name);
• }
20. But we don't need the name. What we do need is to change the stroke and fill and text colors:
• function newColor_opt(evt:MouseEvent):void
• {
• evt.currentTarget.stroke.transform.colorTransform = s_newC;
• evt.currentTarget.fill.transform.colorTransform = f_newC;
• evt.currentTarget.btn_txt.transform.colorTransform = s_newC;
• }
21. Now, we need a new function and set of listeners so that when you mouse off EACH button, they change back to their original colors:
• function oldColor_opt(evt:MouseEvent):void
• {
• evt.currentTarget.stroke.transform.colorTransform = s_oldC;
• evt.currentTarget.fill.transform.colorTransform = f_oldC;
• evt.currentTarget.btn_txt.transform.colorTransform = s_oldC;
• }
22. Don't forget to type the listeners, one for each button for the MOUSE_OUT for this function.

Fall 2010 week 11:—11/22/10: Mon. 9:00 - 12:00f

Hi Everybody,

Good Work, yesterday! Let's keep it up.

Work hard this week. Make certain that you get the drop-down menu functioning as you will be required to have one in the final project.

The steps below outline what we have done in the last couple of weeks, including the additional steps that I included in class on Monday.

The 2nd exercise are some additional steps you should take.

Carter-

WEEK 9

1. Homework
1. For your final project, you will have to include a drop-down menu. My suggestion is that you use the gallery for this. Since you have two galleries already, make a drop-down menu to select one or the other.
2. You will also have to make all buttons into movieclips.
2. Classwork
• LINK    This week's class files
Below is the work that we began in class this week and last. Please review it if you feel you require extra practice, and come to class with any questions you may still have. This will be required for you final project.


1. Create a new folder for today's work, and open a new Flash file. Save the first file as index.fla.
2. Create a single rectangular movieclip symbol with a 3pt stroke, and with the following dimensions:
• width: 125px
• height: 25px
3. Now, give it the instance name, btn_00 and move it to the upper-left corner.
4. Enter into edit mode for this new symbol (double-click on it). Look in the upper-left corner and make certain you see the name of your symbol there. This tells you that you are in edit mode for that symbol.
5. Select only the stroke and convert it into another movieclip named stroke_mc.
6. Give it the instance name of stroke.
7. Now, select only the fill and convert it into another movieclip named fill_mc.
8. Give it the instance name of fill.
9. Now, select everything, both the stroke and the fill movieclips on the stage.
10. Right-click on your selection and select Distribute to Layers.
11. Delete the empty layer at the top that results in doing this, and drag the fill layer to the bottom.
12. Create a new layer named text and make certain it is at the top of the stack.
13. Choose Classic text in the options and Dynamic.
14. With the Type tool (T) draw a text box that is almost (but not quite) the same width and height as the rectangle directly on top of this rectangle.
15. Make the font Arial, Bold, 12pt, and center it, but do NOT type anything in this box. This will be done with ActionScript.
16. Give the instance name btn_txt to this text box.
17. Exit edit mode.
18. Name the first layer btns, lock it, and add a 2nd layer named as for actions.
19. The first thing you should type is the code to put text into your text box. To do this you type the name of the button, followed by a dot and the name of the text box:
1. btn_00.btn_txt.text = "menu";
20. Underneath that, you will need to create the four color transform objects, two objects to transform the fill and the stroke to new colors, and two objects to transform them back to their original colors. If my rectangle were white with a dark gray stroke and I wanted to transform the colors to red with a black stroke, this is how they would be created:
1. var s_oldC:ColorTransform = new ColorTransform();
2. s_oldC.color = 0x666666;


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



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


7. var f_newC:ColorTransform = new ColorTransform();
8. f_newC.color = 0xff0000;
21. Now, I must create the function that will change the colors of the rectangle to new colors:
1. function newColor_00(evt:MouseEvent):void
2. {
1. btn_00.stroke.transform.colorTransform = s_newC;
2. btn_00.fill.transform.colorTransform = f_newC;
3. }
22. The listener that I want to go with this function will activate it with a Mouse Over event when the user mouses over the WHOLE BUTTON:
1. btn_00.addEventListener(MouseEvent.MOUSE_OVER, newColor_00);
23. Now I will type the function and listener that will be used to change the colors BACK to their original colors when the user MOUSES OFF of the button:
1. function newColor_00(evt:MouseEvent):void
2. {
1. btn_00.stroke.transform.colorTransform = s_newC;
2. btn_00.fill.transform.colorTransform = f_newC;
3. }


4. function oldColor_00(evt:MouseEvent):void
5. {
1. btn_00.stroke.transform.colorTransform = s_oldC;
2. btn_00.fill.transform.colorTransform = f_oldC;
6. }


7. btn_00.addEventListener(MouseEvent.MOUSE_OVER, newColor_00);
8. btn_00.addEventListener(MouseEvent.MOUSE_OUT, oldColor_00);



24. Now that you have the first button functioning properly, let's do the remaining buttons: lock all layers, create a new layer named options, and drag 5 more instances of the button movieclip from your library onto the stage directly under the first one and line them up perfectly WITHOUT any space between them.
25. Give them the instance names of btn_01, btn_02, btn_03, btn_04, and btn_05.
26. It took 2 functions and 2 listeners to get the first movieclip to change colors. To do the other 5 buttons you will need TWO FUNCTION & TWO LISTENERS FOR EACH, one each for mouse over and one each for mouse out. The should be exactly the same as the first two, but they should have different names.



27. When you get all six of the buttons working properly so that they change colors back and forth when you mouse on and off each one, then select the 5 lower buttons.
28. Convert them into a new MovieClip named options_mc and give it the instance name of options.
29. When you do this, the ActionScript will no longer function because all the lower buttons have been moved to a new location. In order to make it work properly again, in front of the instance name of each button, you must type the instance name of the new movie clip followed by a dot WHEREVER YOU HAVE TYPED THE BUTTONS INSTANCE NAMES:
1. options.btn_01
30. Once you get the colors working properly, you will need to put text inside these buttons as well. Since they are the SAME movieclip as the first button, all you have to do is TYPE CODE TO DO THIS, so go to your actions and type the following:
1. btn_00.btn_txt.text = "menu";
2. options.btn_01.btn_txt.text = "one";
3. options.btn_02.btn_txt.text = "two";
4. options.btn_03.btn_txt.text = "three";
5. options.btn_04.btn_txt.text = "four";
6. options.btn_05.btn_txt.text = "five";
31. That should place text in all of your buttons; but now we want to make the options disappear. Since this is going to be a drop-down menu, we want the user to only see the first button, and then when he/she mouses over it, the other buttons appear. To do this, underneath the code above, type the following:
1. btn_00.btn_txt.text = "menu";
2. options.btn_01.btn_txt.text = "one";
3. options.btn_02.btn_txt.text = "two";
4. options.btn_03.btn_txt.text = "three";
5. options.btn_04.btn_txt.text = "four";
6. options.btn_05.btn_txt.text = "five";


7. options.visible = false;
32. When testing this movie at this point, nothing will appear except the top button. When you mouse over it, its colors should still change, but the other buttons remain invisible. Therefore, what you will need to do is make the OPTIONS movieclip to appear when you mouse over the top button. This new line of code should be within the first function that you've already written:
33. 1. function newColor(evt:MouseEvent):void
    2. {
    1. btn_00.stroke.transform.colorTransform = s_newC;
    2. btn_00.fill.transform.colorTransform = f_newC;
    
    
    3. options.visible = true;
    3. }
    
    
    
    
    
34. Make certain you save your document, and then open a new one.
35. Inside this document you should ONLY place a single image and a piece of text.
36. Save it with the name of one.fla in the same folder as the other and then generate the .swf file (cmd-enter).
37. Repeat that with 4 more files and name them two.fla, three.fla, four.fla, and five.fla.
38. Back in your index.fla file, lock all your layers and add a new layer named box.
39. Drag this layer under the as layer.
40. Draw a rectangle in this layer, convert it into a movieclip named box_mc and give it an instance name of box.
41. Draw a rectangle in this layer, convert it into a movieclip named box_mc and give it an instance name of box.
42. Place it directly to the right of your drop-down menu.
43. Enter into edit mode for this new rectangular movieclip.
44. Once inside it, delete the rectangle that you see there on the stage (but NOT from the library).
45. Exit edit mode. If you recall, we did this for the Midterm in the first half of the term. The box movieclip is still there, but it is now what is known as an EMPTY movieclip because it is blank.
46. If you haven't done so yet, give it the instance name of box.



47. The next step is to load those external .swf files into this box. For that, you will need to do two things:
1. Create a new Loader object:
• var myLoader:Loader = new Loader();
2. Create new URLRequest objects, one for EACH external file. Below is an example of one:
• var reqOne:URLRequest = new URLRequest("someFile.swf");
3. Create a new a function for EACH external file to load it into the box movieclip on the stage:
• function loadOne(evt:MouseEvent):void
• {
• myLoader.load(reqOne);
• this.box.addChild(myLoader);
• }
4. Create a new event listener for EACH function that will load the file when the user CLICKS on the buttons in the drop-down menu
• options.btn_01.addEventListener(MouseEvent.CLICK, loadOne);

Fall 2010 week 9:—11/08/10: Mon. 9:00 - 12:00

Hi Everybody,

Good Work, yesterday! Let's keep it up.

Many of you are having trouble with this class and the coding, but that's all right. Learning how to script and code is NOT an easy thing; however, you have to TRY. Even if you know you're not going to be successful, you have to make a SINCERE effort. That means spending MORE THAN A HALF HOUR on the homework.

And many of you are spending FAR LESS than that. That is exactly the WRONG THING TO DO, unless you like me so much you want to spend another semester in this class with me. I'm flattered, but perhaps you want to move on with your lives and on to the next class. You can always come back and visit if you like me THAT MUCH.

Okay, well, there's homework this week, and extra credit. Have a nice week and work hard.

Carter-

WEEK 9

1. Classwork
• LINK    This week's class files
Below is the work that we completed this week in class. Please review it if you feel you require extra practice, and come to class with any questions you may still have.


1. Create a new folder for today's work, and open a new Flash file.
2. Create a single rectangular movieclip symbol (without a stroke) with the following dimensions:
• width: 100px
• height: 25px
3. Now, give it the instance name, one.
4. From your library, drag 4 more instances of this movieclip onto your stage.
5. Give them the instance names of two, three, four, and five.
6. Name the first layer rects and add a second named as.
7. In your new AS layer, type the following code:
• one.width = 250;
• two.height = 185;
8. Save and test. You should see that two of your rectangles changed according to the instructions given by the code.
9. Now, we'll change the third one with code:
• three.width = 300;
• three.height = 50;
10. Once again, save and test your movie.
11. In this case, we changed TWO properties, both the width AND the height for the same movieclip. Now, type the following code changes:
• one.width = 250;
• two.height = 185;


• //the following two sections perform the same tasks


• /* one
•     three.width = 300;
•     three.height = 50;
• */


• // two
• with(three)
• {
• width = 300;
• height = 50;
• }
12. The above changes to the code for the THIRD movieclip will not cause anything new to happen. It is simply another way to type the previous code. Notice, that you only have to type the INSTANCE NAME (three) one time instead of two times as you did previously. If there were a dozen or more lines of code where we were modifying many properties of the same object, this would be a much more efficient way of doing it, especially if the object were NESTED inside of other movieclips.
13. Now type the code for the last two movieclips, for ROTATION and ALPHA:
• four.rotation = 45;
• five.alpha = 0.2;
14. Save and test your movie. You will see that one rotated 45 degrees and that the other became more transparent.
15. For ROTATION, you can type a number anywhere between 0 and 360.
16. For ALPHA, you can type a number anywhere between 0.00 and 1.00.


17. All of this code happens automatically. That is because code runs immediately from top to bottom when you test a movie UNLESS you type it within a function. This is what we will do next, so type the following code modifications:
• function chgRects(evt:MouseEvent):void
• {
• one.width = 250;
• two.height = 185;


• //the following two sections perform the same tasks


• /* one
•   three.width = 300;
•   three.height = 50;
• */


• // two
• with(three)
• {
• width = 300;
• height = 50;
• }


• four.rotation = 45;
• five.alpha = 0.2;
• }


18. Notice, we only typed the first line new and then enclosed the other lines of code that we'd already typed between curly brackets. If you save and test your movie now, you'll see that nothing happens.
19. Now, all we need as far as code goes is a listener:
• six.addEventListener(MouseEvent.CLICK, chgRects);


20. The listener above tells us three things:
• The first term, six, tells us that there must be some object on the stage with the INSTANCE NAME of six which the user must interact with;
• The fourth term, CLICK, tells us that the user must CLICK on that object named six in order to make something happen;
• The last term, chgRects, tells us that once the user clicks on that object named six, the chgRects function will be activated.
21. Therefore, you will need a SIXTH movieclip on your stage, and it must have the INSTANCE NAME OF six before this will function properly.
22. Once you do that, save and test your movie.
2. Homework
• exercise 1— Making a Movie-Clip behave as a button:
1. Draw a rectangle with the following characteristics:
1. width: 150px;
2. height: 25px;
3. fill color: light gray;
4. stroke color: dark gray;
5. stroke width: 5px;
2. Select the fill (NOT the stroke).
3. Convert it to a movie-clip named rFill_mc.
4. Temporarily, cut and Paste it into its own layer.
5. Give it the instance name of rFill.
6. Move this layer below the first layer and lock it.
7. Select the entire stroke and convert it to a movie-clip named rStroke_mc.
8. Give it the instance name of rStroke.
9. Unlock both layers, and select both the stroke and the fill on the stage.
10. Convert them together into another movie-clip named btn_mc.
11. Give it the instance name of rect.
12. Delete the blank layer.
13. Enter into edit mode for the rectangle.
14. Once inside the rectangle movie-clip, select both the fill and the stroke on the stage.
15. Then, right-click on top of your selection and choose distribute to layers. Make sure the stroke layer is on top.
16. Delete the blank layer, and exit edit mode.
17. What you have now is a set of nested movie-clips: you have the main movie-clip named rect, and the nested movie-clips inside, stroke and fill.


18. Your job for homework is to make ONLY THE STROKE change to RED when the user mouses over; and then, when the user mouses off, for the color to go back to its original dark gray.




• extra credit: Using BUTTON SYMBOLS as buttons (and NOT movie-clips as buttons), together with the VISIBLE property, create the most simple drop-down menu that you can with a total of 5 buttons in it.

Fall 2010 week 8:—11/01/10: Mon. 9:00 - 12:00

Hi Everybody,

Please make sure you come to class next week with your projects in working order and with the homework down below.

Carter-

WEEK 8


1. Classwork 1:

   This past class we had a test. It examined your practical knowledge of the code we have learned thus far, as well as your ability to understand the terminology in order to do something new.

   If you had a difficult time with the exam, you should follow the steps below until you understand and can complete it to functioning order. Practice makes perfect.

   1. Create a folder with your name as its name.
   2. Open a new file in Flash.
   3. Save it with the name of your first initial, last name, using camel case; and then an underscore and finally fa10 (e.g. cJohnson_fa10).
   4. In this exercise, make sure you name all your layers properly.
   5. Draw a rectangle on the upper-left corner your stage with a width of 100px, and a height of 200px.
   6. Convert it into a movieclip with whatever symbol name you want, but it should have something to do with what this object is or what it looks like.
   7. Next, give it an appropriate instance name.
   8. Now, from the library, drag a 2nd instance of this rectangle onto the bottom-center of the stage.
   9. Give it the instance name of btn_mc.
   10. Save this file and then create another new file.
   11. In this 2nd file, type the following aligned right in the upper-right corner of the stage:
   1. DMA205
   2. Midterm Quiz
   3. Your Name
   4. Your ID
   5. Fall 2010
   12. Save this file as two.fla, then generate the .swf file.
   13. You are finished with the 2nd file, so you may close it if you wish.
   14. I For the following 2 parts, you will be typing ActionScript in the first file.
   ActionScript Part I
   1. In the actions panel of your first file, you will need two things: a function and a listener.
   2. Your listener should call the function when the user mouses over the rectangle.
   3. Your function should contain the following one line of code:
   • the rectangle’s instance name goes here.width = 400;
   4. Now, when you mouse over your rectangle, it should get wider.
   
   
   ActionScript Part II
   1. The ActionScript of this file also goes in the first file.
   2. For this part, you will need the following 4 things:
   • A URLRequest object;
   • A Loader object;
   • A 2nd function; and
   • A listener.
   3. The URLRequest object should request the 2nd file that you have created (the one with your name and ID and the other text that you typed).
   4. The function should have two lines of code that do the following:
   • In the 1st one, the Loader object should load the URLRequest object.
   • In the 2nd one, a child should be added and it should contain the Loader object.
   5. The listener should call the 2nd function when the user clicks on the 2nd rectangle.
   • ***EXTRA CREDIT***
   • Make it so that when you mouse off the first rectangle in the first file, it goes back to its original size and shape. To do this, you will need another function and another listener.

2. Classwork 2:   LINK  Here are the files with the code and function Flash files.

3. Homework 1:
   As you should've done last week, take a look at your projects and do as much as possible to complete & improve them by next week. We will continue working on these projects for the Final Project, so you don't want to start out the rest of the term behind by having to fix what you have and then implementing all the many new items of ActionScript that we will be adding over the coming weeks.
4. Homework 2:
   1. In a new file, create a rectangle WITHOUT a stroke and convert it into a movieclip.
   2. Using what you know from what we did in class this week, create a function that is triggered when the user mouses over this movieclip.
   3. The movieclip should get a little bit wider and have a slight reduction in height when the user mouses over it.
   4. You should also create a 2nd function that is triggered when the user mouses off of this movieclip.
   5. In this function, the movieclip should change back to its original color and have a return to its original height when the user mouses off of it.