Summer 2010 week 11:—7/19/10: Mon. 9:00 - 12:00

Hi Everybody,

I'm sorry that I wasn't in class today. I have been a bit ill all weekend since Friday, so I thought it better that I not go in to class today. However, it's nearing the end of the term, so we haven't any time to waste. Below you will see the steps that I want you to complete and bring to class next week ALONG WITH THE HOMEWORK FOR THIS WEEK, so don't forget. BOTH HOMEWORKS (last week's and this weeks) WILL BE DUE NEXT WEEK!!!

WEEK 10

1. Syllabus
• LINK    class syllabus
2. Classwork
• LINK    No class files this week;
3. Homework
• exercise 1:
1. Create a drop-down menu as we did last week in class. This time, however, put only 3 movie-clip buttons in the part that appears and disappears.
2. The instance names for the 4 movieclips which function as buttons should be btn_01, btn_02, btn_03, andbtn_04.
3. The instance name of the movieclips which contains the 3 options should be options .
4. This drop-down menu should function exactly the way they did in class last week. Also, make sure that, as per last week's homework, when you mouse off the menu, the menu options should disappear.
5. In addition, use an array to make the text show in the 4 movie-clips as instructed in last week's homework.
6. Create another array named urlArray:
1. var urlArray:Array = new Array();
7. Next, as indicated in last week's blog entry, below the previous code, we need to put data into the array. We call this process populating the array. An array is similar to a variable in that it contains data; however, it is much more powerful in that, unlike a variable, it DOES NOT hold only ONE element of data. Instead, it may hold many, MANY DATA ELEMENTS. Each of these data elements is indicated by a number, and the counting starts at 0:
1. urlArray[0] = new URLRequest("http://dma-205.blogspot.com");
2. urlArray[0] = new URLRequest("http://www.actionscript.org");
3. urlArray[0] = new URLRequest("http://www.kirupa.com");
8. Now, we have to modify the code that we created last week. As you may have noticed last week, the code is very, very long to do simple things. We have 2 functions for each of our buttons just to make the colors chane when we mouse-over them. It can be greatly simplified. In fact, all we really need is one function for that activity. What we are going to do is create 4 functions in total instead of 2 functions per button situation that we have now. The first two we'll work with are for the opening and closing of the menu:
1. Comment out all the functions which pertain to the changing of the colors and the opening and closing of the menu. You should also comment out the listeners. Do not delete these functions & listeners, however, until you get the replacement functions working properly.
2. Create a new function and name it menuOpen.
1. function menuOpen (evt:MouseEvent):void {
1.  
2. }
3. Next, create another function namedmenuClose.
1. function menuClose (evt:MouseEvent):void {
1.  
2. }
4. Eventually, in a future class, we will combine these two functions using what's known as an if/else statement, but for now we'll keep them as 2 separate function. Right now, however, they have nothing inside of them, so let's put some actions in the first one:
1. function menuOpen (evt:MouseEvent):void {
1. options.visible = true;
2. }
5. Now, modify the listener for the first button to read as follows:
1. btn_01.addEventListener(MouseEvent.MOUSE_OVER, menuOpen);
6. Save and test your movie and it should open up.
7. Next, we will put some actions in the second function:
1. function menuClose (evt:MouseEvent):void {
1. options.visible = false;
2. }
8. And modify the mouse-over listener for the first button to read as follows:
1. btn_01.addEventListener(MouseEvent.MOUSE_OUT, menuClose);
9. For now, we are not quite ready, however, for the above listener, so let's comment it out for the time being. We will come back to this later. This means that the menu will not yet close:
1. //btn_01.addEventListener(MouseEvent.MOUSE_OUT, menuClose);



9. Next, we'll modify the code to make the buttons change colors again, but with much less code:
1. Create a new function and name it colorFun_01. With this function we must do TWO things: (1) determine which button the user is mousing over, and (2) make that button change its colors.
1. function colorFun_01 (evt:MouseEvent):void {
1. btn_01.stroke.transform.colorTransform = sColor_new;
2. btn_01.fill.transform.colorTransform = fColor_new;
3. btn_01.btn_txt.transform.colorTransform = sColor_new;
2. }
2. The problem with this function, of course, as some of you will probably have noticed is that it will only change one button, the one that is named using its instance name, btn_01. Therefore, we have to figure out a way to select whichever button we happen to mouse-over
3. The answer to this is contained within evt. I mentioned it once before, but that little statement that is in between the parenthesis, is actually a variable and the type of information that will be contained within the variable: (evt:MouseEvent), where evt is the variable name, and MouseEvent is the type of information held within it.
4. If you look in your listeners, you will see that term again, MouseEvent. When the listener calls on the function, the information of WHICH particular button the user happens to be interacting with is being stored by that variable evt. That means, that evt knows which button is currently being moused-over or clicked on or whatever at any given moment.
5. This means that we do NOT have to be specific by naming a particular button's instance name, all we have to do is invoke evt.
6. Now, because evt contains MouseEvent information, it also possesses a new property. That property is known as currentTarget, in which the current target is whatever is the movie-clip that the user happens to be interacting with at any given moment.
7. Let us test this, so first, temporarily comment out the code in the function:
1. function colorFun_01 (evt:MouseEvent):void {
1. //btn_01.stroke.transform.colorTransform = s_new;
2. //btn_01.fill.transform.colorTransform = f_new;
3. //btn_01.btn_txt.transform.colorTransform = s_new;
2. }
8. Now, add the following line of code:
1. function colorFun_01 (evt:MouseEvent):void {
1. trace(evt);
2. //btn_01.stroke.transform.colorTransform = s_new;
3. //btn_01.fill.transform.colorTransform = f_new;
4. //btn_01.btn_txt.transform.colorTransform = s_new;
2. }
9. Next, modify your listener for the first movieclip button to call this function instead of the old color change function.
1. btn_01.addEventListener(MouseEvent.MOUSE_OVER, colorFun_01);
10. Save and test your movie.
11. Mouse-over on your button and look at your output window. If you don't have any errors, what it will do is tell you something about a movieclip.
12. Now, let's add a name to that movieclip.
1. function colorFun_01 (evt:MouseEvent):void {
1. trace(evt.currentTarget.name);
2. //btn_01.stroke.transform.colorTransform = s_new;
3. //btn_01.fill.transform.colorTransform = f_new;
4. //btn_01.btn_txt.transform.colorTransform = s_new;
2. }
13. Save and test the movie again. Now, when you click on the button, you should see the instance name of it inside the output window.
14. Modify all the listeners that pertain to the old color change functions for the MOUSE_OVER actions. When you mouse over each of them, they the output should indicate which one you have moused-over by its instance name.
15. This tells us for certain that, instead of typing a particular instance name, we can just use the generic term, currentTarget after the variable name, evt. Let us now do that. First, comment out the trace and remove the comments from the other lines of code, modifying the instance name to add evt.currentTarget instead.
1. function colorFun_01 (evt:MouseEvent):void {
1. evt.currentTarget.stroke.transform.colorTransform = s_new;
2. evt.currentTarget.fill.transform.colorTransform = f_new;
3. evt.currentTarget.btn_txt.transform.colorTransform = s_new;
2. }
16. Good, now that that works, let's see if we can create the function to make the color change back:
1. function colorFun_02 (evt:MouseEvent):void {
1. evt.currentTarget.stroke.transform.colorTransform = s_old;
2. evt.currentTarget.fill.transform.colorTransform = f_old;
3. evt.currentTarget.btn_txt.transform.colorTransform = s_old;
2. }
17. Do not forget to modify the listeners for all the movieclips so that they call this function when the user mouses-off of them.



• exercise 2:
1. Next, let's make the links in the drop-down menu active:
1. To start, then, we'll put to use that new array that we created in the beginning of this homework:
1. var urlArray:Array = new Array();
1. urlArray[0] = new URLRequest("http://dma-205.blogspot.com");
2. urlArray[0] = new URLRequest("http://www.actionscript.org");
3. urlArray[0] = new URLRequest("http://www.kirupa.com");
2. Let's start putting these URLs to work for us by creating a new function called linkfun:
1. function linkFun(evt:MouseEvent):void {
1.  
2. }
3. Next, inside that function, first, I'd like to create a variable to store the name of the particular movieclip that is moused-over or mouse-out of at any given moment:
1. function linkFun(evt:MouseEvent):void {
1. var mcName:String = evt.currentTarget.name;
2. }
4. We are going to use this string inside what's called a switch statement. This statement allows a script to select from several possibilities, or cases. Think of it this way. We have 3 buttons, and therefore there are 3 possible outcomes. The user could click on one of the buttons, or the user could click on one of the others. Depending on which button the user actually clicks on, 3 different things could happen. THOSE ARE OUR 3 CASES. The way we are going to tell Flash to determine if it's one movieclip or another is by its instance name. Recall, the instance name is going to be stored in our new variable, whichever movieclip button the user happens to have moused-over:
1. function linkFun(evt:MouseEvent):void {
1. var mcName:String = evt.currentTarget.name;
2. switch(mcName) {
1. case "btn_02" :
1. do something;
2. case "btn_03" :
1. do something;
3. case "btn_04" :
1. do something;
3. }
2. }
5. The way the above statement works is this: recall, mcName contains the name of the particular movieclip that the user mouses-over. Actionscript is then going to look at each of the 3 cases. It will then compare the name that is inside mcName with the strings that you see there in each case, "btn_02", "btn_03", or "btn_04". Whichever one matches, the script then does what the next line tells it to do.
6. What we want it to do is to open up a new web-page:
1. function linkFun(evt:MouseEvent):void {
1. var mcName:String = evt.currentTarget.name;
2. switch(mcName) {
1. case "btn_02" :
1. navigateToURL(new web address);
2. case "btn_03" :
1. navigateToURL(new web address);
3. case "btn_04" :
1. navigateToURL("new web address");
3. }
2. }
7. Obviously, we couldn't just type do something, so we replaced it with the action navigateToURL();
8. What we didn't do is type in a particular web address. We could do that, but it'd have to be a string like so: "http://www.google.com".
9. However, we do not have to do that. We have already created the array above, and inside each numbered element of the array, is a particular URL address. Therefore, all we really have to do is type the NAME OF THE ARRAY followed by its INDEX NUMBER:
1. function linkFun(evt:MouseEvent):void {
1. var mcName:String = evt.currentTarget.name;
2. switch(mcName) {
1. case "btn_02" :
1. navigateToURL(urlArray[0]);
2. case "btn_03" :
1. navigateToURL(urlArray[1]);
3. case "btn_04" :
1. navigateToURL(urlArray[2]);
3. }
2. }
10. The last step is to type the three listeners for the three movieclips, each which corresponds to a different case:
1. options.btn_02.addEventListener(MouseEvent.CLICK, linkFun);
2. options.btn_03.addEventListener(MouseEvent.CLICK, linkFun);
3. options.btn_04.addEventListener(MouseEvent.CLICK, linkFun);
11. Next, go to the FILE menu, and select Publish Settings.
12. Make certain that both .swf and .html are selected.
13. Then at the bottom, click publish and okay.
14. Open up your folder, and notice that you have an .html file there. Open it up in your browser and try it out.
15. The links may not function as you may get a notice in your browser saying that it is a potentially unsafe action. That is okay. We will deal with that another time. Just click okay as that tells us that it is at least trying to open up an outside web-site.



• exercise 3: EXTRA CREDIT
1. Instead of linking to other web-sites, try to get other .swf files to load into the page when you click onto the buttons in the pull-down menu.