Flash

Lesson 1--Installing Flash and making myClock

Please download this file:

myClockNew.fla

and customize it with your own clock face and hands.  It has been changed so that the clock face and hands are all now separate symbols you can change in the symbol library.

In this lesson you make an online clock you can customize so that the face and hands are elements you draw.  The Flash Actionscript code will move the hands as the current time changes.

Samples from miniterm class:

Student Clocks:  Christopher Cee, Thoreau Clock, Hannah Golanka, Steven Dallas, Andrew Peng, Jonathan Goldsmith, Taylor Gerard, Anthony Fermin, Zoe Gorman, Adrian Fadil

What this lesson teaches:

• Basic setup of Flash for making applets.
• Creating symbols with the drawing tools
• Placing a symbol on the stage and giving it an instance name
• Seeing how the onEnterFrame function is used to create animation
• Calling a function and using functions other people write even if you don't understand exactly how they work
• Publishing Flash movies online

Your working setup with Flash should include five windows:

• The Tools vertical window along the left side
• The Timeline window at the top
• The Main or Stage window below that
• The Actions window below that, where your code goes
• The Properties window at the bottom
• Close all other windows if they are open
• These windows can all be opened or minimized by clicking on their top bars.  The Main window doesn’t quite work this way.

 Procedure:

1. Install Flash on your laptop from Trevornet or the portable drives available in the first class.
2. Create a folder on your hard drive for this class, if you don’t already have one.
3. Click on this link to download the myClockNew.fla file and put it in your class folder.
4. Run the Flash Program and open your copy of the file myClockNew.fla.
5. Draw a custom Clock face in the main window using the drawing tools you see at the left, with the color choices you see at the left.  Don’t draw the hands in this area; you’ll be drawing them as Symbols, and then placing the hour hand, minute hand and the second hand in the middle of the clock face.
6. There are two kinds of drawing areas in Flash’s Main window—the main window itself, and the area for drawing Symbols.  They look exactly the same, and the only way you can tell which kind of thing you are drawing is by looking at the text at the top of the Main window.  If you are drawing the main background, it will say “Scene 1”.  If you are drawing a symbol, it will say “Scene 1: SymbolName” where SymbolName is whatever name you have given the symbol.
7. From the top menu choose Insert, and then choose Insert New Symbol.  Give it the name “hourHandSymbol”, then draw the hour hand about 1 inch long in the window.  Do the same for the minute hand and second hand naming them “minuteHandSymbol” and “secondHandSymbol”.  Be very careful to spell these exactly right, or things won’t work right.
8. When you create symbols, you are in the symbol drawing area.  You need to get back to the main drawing area.  Above the drawing window, find the link that says “Scene 1”.  Just to the right of that should be a link that says the name of the symbol you just created, for example, “secondHandSymbol”.  Click the “Scene 1” link to get your drawing area back to the main drawing area.
9. From the main menu, choose Window, Library to open the library of symbols.
10. Find the hour hand symbol and drag it to the main drawing window.  Drag the minute and second hand symbols on the main drawing window also. 
11. Make sure the Properties window is open, by clicking on its top bar if necessary, and minimize the Actions window by clicking on its top bar.  Click any blank area in the main window to get rid of any “selections” that might exist.  Click on the hour hand to select it. In the properties window, click in the box that has the words Instance Name in it. Type the word “hourHand” in this box, no spaces between the words.  This is the name you have given THIS instance of the hourHandSymbol.  Do the same thing for the minuteHandSymbol and the secondHandSymbol, calling them “minuteHand” and “secondhand”.  Be very careful to spell these exactly right, or things won’t work right.
12. Open the Actions window by clicking on its top bar, if it isn’t already open.  If you don’t see any text when you open it, you must click on the small “a” that’s in the Timeline’s first frame or click in a blank area somewhere in the Main window.  This should make the code appear in the Actions window.  You also need to make sure your Actions window is in Expert Mode.  You can do this by control-shift-E or by choosing from the menu that drops down when you click the tiny black arrow icon at the right of the Actions window.
13. To run the clock with your clock face drawing as a background and the hand symbols you created as the hands, choose the “control” menu pull down and then the “test movie” item.  This should open up a new window and run the applet you have created, with the existing code in the Actions window making the clock hands tell the right time.
14. If you like the way this looks, you can then choose “File/Publish Settings” from the top menu.  Make sure “Flash” and “HTML” are checked.  Close the window and then choose “File/Publish” from the top menu.  This will create a file called myclock1.swf and another one called myclock1.html.  If you click on the myclock1.html file OUTSIDE of Flash, it will run your Flash clock in a browser.  If you have a popup blocker on, you might have to "allow popups".  We will publish these files on the class home page so other students can see your Flash clock.  To submit your homework in Class Server, these are the files you should upload--myClock1.html and myClock1.swf.

Confusing things:

Sometimes you may see nothing in the Actions window even though you know there is supposed to be code there.  You must click on the little “a” in the first frame of the timeline window.  If you can’t see the “a”, then drag the top of the Main window down a bit to show the “Layer 1” line of the Timeline window, which contains the frame with the “a” in it.  Alternatively you can just click in the Main window somewhere where there are no symbols.

Sometimes the Properties window doesn’t show the right information even though you have selected a graphic object in the Main window.  This may be because a number of objects in the Main window are selected at the same time.  You must click in a blank area of the Main window to unselect all the objects then re-select just the one you are interested in.  Then its properties should be shown in the Properties window.