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);