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.