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

Hi Everyone,

As you have seen from class this week, we are beginning our final project. This means that what we will be doing until the last class is revising our midterm projects and applying what we have learned since midterm to them.

At this point in the term, I have shown you almost everything that I want you to know, save for one last item, which is how to attach music files to your Flash movie, and then how to stop and restart them. We will do this part next week for homework. In class for next week what we will be doing is simply working on your projects. I will go around and speak to you individually and speak to you about what needs to be done to bring them to the next level regarding both design and technical issues.

For this week's homework, therefore, you will see a list of items that you need to have complete for your project when you give it to me in 2 weeks. You should do most of this, however, because as I mention above, I will be assigning the sound next week, and you'll need some time next week to complete that rather than working on revising the design of your projects and resolving technical issues.

Carter-

1. WEEK 11
   
   1. Classwork (7/14)
   • LINK    NO FILES from this week's class
   2. Homework:
   • Exercise 1:    Follow the following steps and make certain that you have ALL of them complete for the final project due on the last day of class:
   
   
   Navigation Buttons and/or Links
   1. The primary navigation for your website should ONLY be located in your INDEX file. This means, ALL YOUR BUTTONS should be there and NOT in the other files. Many of you put the same buttons that you have in your index file in your other pages as well. This is incorrect.
   2. Therefore, what you'll have to do is open up all your pages and make certain that there are no buttons in those other pages.
   3. The exceptions to this are the GALLERY pages. The gallery pages, remember, have image thumbnails that we used as buttons. Buttons like these for the gallery pages should remain. This is secondary navigation and buttons for this sort of navigation can stay in the other pages; however, please delete any primary navigation buttons from your content pages.
   4. Now, go to your index and delete your buttons there. You will have to REPLACE them with MovieClips like the ones we've been working on in class that only behave like buttons because of the ActionScript we have been using.
   5. Remember, each part of these buttons, the stroke (if you have one) and the fill (if you have one) should be a separate movieclip within the main movieclip.
   6. The text is also inside of the main movieclip, but recall, that YOU DO NOT TYPE THE TEXT OUT. Rather, you use a DYNAMIC TEXT BOX and place text there with code.
   7. All navigation should be done with MOVIECLIPS and ACTIONSCRIPT. You will not use any button symbols at all.
   8. This includes the THUMBNAIL IMAGES in your gallery pages. These should also be MOVIECLIPS. When you mouse over or click on these images, an outline should appear. If you need help with this part, I can provide it to you on Monday.
   
   Pop-up Menus
   9. You will also need to use at least ONE POP-UP MENU. This should used to reach your gallery pages. Since you should already have 2 pages for your gallery, this is a perfect place for the pop-up menu to allow the user to select one page of images or the other page.
   
   Gallery Pages
   10. Furthermore, you will need to ADD another page of images for a total of THREE GALLERY PAGES. There should be no less than 5 images per gallery page, for a total of AT LEAST 15 IMAGES.
   
   Title
   11. The title of the site should be in the index since it should be present throughout the site, no matter which page the user is looking at.
   
   Sub-titles
   12. The subtitles for the site, or the names of the individual pages should be prominently positioned somewhere within the individual pages. The user should know which page she or he is looking at at any given moment.
   
   Text
   13. DO NOT stretch text!! If you need to make text bigger or smaller, increase its font-size.
   14. The paragraph text for any site is never more than 12pt. Do NOT center whole paragraphs and do NOT bold everything. Making text bold is reserved for those items you want to emphasize, and centering may be done for titles, or subtitles, not for entire paragraphs.
   15. Captions should accompany all images unless it is just part of some design that you've made.
   16. Captions for the gallery images should include the name of the work of art and its date at the very least.
   
   Images
   17. There should be some sort of imagery on ALL pages, including the bibliography.

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.

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

Hi Everybody,

This week's class was the tenth one of the term. There are 4 more classes until it's all over. Please make the most of the time that you have remaining. Sometime, during this week before our next class, I'll be emailing you detailed evaluations of your midterm projects. Also, I'll be putting up here the requirements for the final project due in on the last day of class.

Have a good week. Carter-

WEEK 10

1. Syllabus
• LINK    class syllabus
2. Classwork
• LINK    This is this week's class file
3. Homework
• exercise 1:

Complete the file that we were working on in class if you have not already. If you are not certain, download the file above with the instructions and read through ALL of them to make certain you have done it all.



• exercise 2:
Once you get all of your code functioning above, you're going to make some modifications.
1. Instead of the way I instructed you to type the text into the buttons in class, you're going to use what is known as an array. First, delete the text and the quotes that you typed in class. Leave it blank following the equal sign (=) for the moment until I tell you what to type there.
2. Next, type the following at the very top of your code to create the array object:
1. var txtArray:Array = new Array();
3. Next, below that, 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
1. txtArray[0] = "MENU";
   
2. txtArray[1] = "one";
   
3. txtArray[2] = "two";
   
4. txtArray[3] = "three";
   
5. txtArray[4] = "four";
4. Now, we have to assign the individual dynamic text boxes that are inside our movieclips the text that is inside the array elements:
   
   1. btn_01.btn_txt.text = txtArray[0];
      
   2. btn_01.btn_txt.text = txtArray[1];
      
   3. btn_01.btn_txt.text = txtArray[2];
      
   4. btn_01.btn_txt.text = txtArray[3];
      
   5. btn_01.btn_txt.text = txtArray[4];
• exercise 3:
1. Attempt to get the 4 options to disappear again ONLYwhenever you do one of these 2 things:
• click on one of the buttons; or
• mouse outside of the 4 options