Fall 2010 week 3:—9/29: Wed 12:25pm - 3:25pm &—10/01: Fri 6:00pm - 9:00pm

Hi Everyone,
Great class this week! I'm happy with the work you guys are doing, so try to keep it up.

For those of you who did not show me much this week in the way of your mid-term mockup, please make certain that you create something for me this coming week. Step up the pace, you don't want to be left behind by the others in class.
Carter-

1. WEEK 3
   
   1. Classwork
   • LINK    class files
   2. Homework
   • Exercise 1:    If you haven't done so yet, please use a dynamic text box INSIDE your button. You will have to go into edit mode to do this and add a new layer to the top of the stack. Also, please make certain that you give the text box an instance name of btn_txt. Then do the following:
   1. Now, dynamic text boxes rarely have anything typed in them. So, just stretch out the box to take up about 80% of the space of the button. What it will ultimately contain is text that you use ActionScript to put in there; and you'll only see it there when you test your movies.
   2. One thing you must do, however, is style your text box as if there were text in there. Give it the same color as your stroke color and make the size about 18pt. Also, give it a font and make it bold. The last thing you should do is center it by clicking on the paragraph tab in the properties panel and clicking on the appropriate alignment button.
   3. Next, in your ActionScript, type the following:
   1. btn_01.btn_txt.text = "one";
   4. Test your movie and you should see text in the first button.
   5. Type code in your ActionScript to place text in the other 4 buttons as well.
   • Next, please attempt to change the color of the text when the user mouses-over the button and then change back when the user mouses off. You should use the STROKE color new and old objects that we have created. You will NOT need to create new functions NOR new listeners to do this. Just type another line of code in each function to affect the text color.
   • It is all right if you cannot accomplish this; however, you must bring to class the code that you used to try and make it happen.
   
   
   
   • Exercise 2:    We are going to create a few new files that demonstrate various types of functions, including some that return & pass values.
   1. At the very bottom of everything in ActionScript coding, there are really only 2 kinds of functions: those that are supposed to return a value and those that are not. Let's look an example of a function similar to which we've already done in our week 2 class.
   3. Type the following code into a new file:
      1. function countToTen():void {
      2.     for (var i:uint = 1; i <= 10; i++) {
      3.         trace(i);
      4.    }
      5. }
   4. Now, create a basic but fully-functioning button on your stage and make it call that function.
   5. This countToTen() function is a good example of a type of function that DOES NOT return a value. It simply performs and repeats an action. It performs a for loop, which within repeats a trace action. It, however does not send back any value that may be used outside of the function.
   6. It does not result in some number or piece of text or some other form of data that is returned to the location in the code exactly where the function was called. That is probably difficult to understand, and I apologize for that, but hopefully when you complete these little code exercises, you will begin to understand the difference in the two types of functions.
   7. We can call this function and let it run its course, but at the end, the function does not contain a value that may be used further by any additional code. We can look at the first line of where we declare the function and see that: we specified void as the return data type. Void means empty, nothing, and that is the return type. This essentially means that we are returning nothing to the function. This lets Flash know that it is not to return any value.

   8. If a function IS supposed to return a value to the place in the code from where the function was called, then the function needs to include the return keyword followed by whatever data is being returned, usually in the form of a variable, for example:

            return myVar;

   9. What the hell do I mean by "return a value"? Well, you have already seen a number of functions called without any values returned above, and during previous weeks of class. However, when a function DOES return a value, it is as if the call to the function (which is often located at the end of a listener), that place in the code where we call the name of the function, is automatically replaced with some value returned by the function. For example, one other way (besides in a listener) to call a function is as follows:

            var day:String = getDayOfWeek();

      In the function call above, we've first created a variable that is typed as a string. I have spoken about this in class before: it simply means that the variable will only contain some data, and that data can only be a string. After that, we have the term: getDayOfWeek();. This is a function name. We know that because of the open and close parentheses at the end of the name. This tells us that it is the name of a function. At some other point in the code, however, you as the coder will have to write out that function, otherwise you will get an error. You will have to create a function named getDayOfWeek and make it do something, so that when the first line calls it, Flash will know what to do.

      Anyway, let's say that we hold down on the command key and select enter so that Flash runs the movie. Let's also say that our ActionScript contains that function. In our code we have that first line, the one that calls the function, getDayOfWeek(). Furthermore, let's say that this function then determines the day of the week. In the end, after the function is finished running, let's say that it decides that the day of the week is Tuesday. That means that it will return that as the value (the current day) as a string, "Tuesday". When it does so, then it is as if that first line of code has suddenly changed. See below:

            var day:String = getDayOfWeek();

      becomes

            var day:String = "Tuesday";

   10. That means that a function can feed data directly into a variable.
   11. Let's put this all into action. Type the following code into a new file:
       1. // The line below is a variable
       2. // that contains a string,
       3. // the first name "John";
       4.         var firstName:String = "John";
       5. // The line below is another variable that also contains a string, the last name "Doe";
       6.         var lastName:String = "Doe";
       
       
       7. // The line below creates a function;
          
       8. // Notice that instead of void it reads String;
       9. // This is because it is going to return a string value
       10.         function getFullName():String {
       11. // The line below creates a 3rd variable that contains a string;
       12. // It concatenates the other 2 variables with a space in between
       13.                 var fullName:String = firstName + " " + lastName;
       14. // This line returns the data
       15. // from the variable, fullName
       16.                 return fullName;
       17.         }
       
       
       18. // The line below creates a 4rd variable that contains a string;
       19. // This line also calls the function getFullName;
       20. // and places the string value it returns into the variable
       21.         var userName:String = getFullName();
       22. // This line traces whatever happens to be contained by the variable
       23.         trace(userName);

   12. The getFullName() function has been given the return type of String. Inside the function we create a variable typed as a string and assign the combined values of the firstName and lastName variables created inside the function. This new variable, fullName, is then returned out of the function using the return keyword back to the place in the code from where the function was called.

       Because the getFullName() function has a String return type, we can assign the result of this function to a new variable, userName, that is typed as String as the other variables were. If username had been declared as a Number instead of a String, Flash would send back an error. We would then know something was wrong, that we had tried to assign a string to a variable that was intended to hold a number.

   
   
   
   13. Extra credit:    Instead of having the function above run automatically when you export the movie (cmd-enter), have the function run ONLY when you click on a button and have it produce exactly the same results.
   
   
   
   
   
   • Exercise 3:    Please REVISE your mockups from this week with regard to my comments and any new ideas you may come up with. You can always do more than one mockup if you want if you have several ideas. Also, it's always useful to bring other sites with design aspects that you would like to include within your own site.
   • Exercise 4:    You should also create a BUBBLE DIAGRAM of your site organization. Use the image below to give you an idea of what I mean. Do this diagram in Illustrator. If you click on the image below, it will download a .pdf file of it for you to view at a larger scale.
     
     click here