Make Your Own Clock 1

Digital Arts and Sciences

Stephen Lewis

Trinity School

Don't Know Beans about Henry Thoreau Clock

In this lesson you make an online clock you can customize so that the face and hands are elements you draw, and it displays your favorite quote about time.  We will publish student work online.

Summary:

In class, we will use Flash on the Lab computers to begin to customize a clock from the file myClock1.fla.  Students will:

--complete the customization

--answer the homework questions below

--email the answers and their clock ".swf" file to Mr. Lewis.  We may take several class periods to finish this assignment.

For some inspiration about clock images, click to go to the Clockspiration pages:  Clockspiration1, Clockspiration2, Clockspiration3, Clockspiration4

What this lesson teaches: 

Your working setup with Flash should include five windows:

 Procedure: 

  1. You can use Flash from any of the Lab computers.  If you want to use Flash on your home computer, install it from the portable USB drives available in the first class. 
  2. Create a folder on your H: drive for this class.
  3. Click this link to download the myClock1.fla file from the class website and put it in your H: drive's folder for this class.  When you click the link you will see a pop up window, and you should click SAVE not RUN.
  4. Run the Flash Program and open your copy of the file myClock1.fla.
  5. Save it in your H: drive with a name that combines your Trinity username plus the word myClock1.fla, for example “stephenlewis09myClock1.fla”
  6. Start the clock by using the top menu item Control and choosing “test movie”.  The clock should tell the right time, and keep ticking.
  7. Stop the clock by clicking on the BLACK X mark in the upper right corner.  NOT the red X mark, which will close the Flash program entirely.
  8. Now let’s customize the drawings that make up the clock.  There are four—the clock face and three hands.
  9. Click on the top menu bar’s Window item, and choose Library.  This is where all “symbols” are stored.  Separating the face and hands into different drawings is what makes it possible to have the clock actually tell time.
  10. With the Library window open, doubleclick on the icon for the clockFaceSymbol, and its yellow circle should pop up in your drawing window.  Close the Library window so you can work on the clock face.  You’ll notice that the top bar of the main drawing window is now labeled “Scene 1     clockFaceSymbol”.  This tells you that you are working on that symbol now.
  11. You can now erase the yellow circle and its black border and draw anything you want using the tools in the Tools menu.  There are two ways to erase.  One is to use the black arrow tool to select and then hit the delete key.  To erase part of an object, you can use the eraser tool, but it can leave pieces of the object behind.
  12. Most of these tools are similar to drawing tools you’ve used in other programs.  Hover your mouse cursor over the tools to see what they are called.  You can choose colors using the “Colors” area.  Note that “fill” and “stroke” colors are different.  Some tools like the “BrushTool” will give you additional choices such as line thickness in the “Options” area at the bottom of the Tools menu.
  13. Next draw new versions of the three hands.  Open up the Library window again, and doubleclick the icon for whichever hand you want to work on.
  14. Flash’s Main drawing window allows you to work on individual symbols or on the whole drawing.  The only way you can tell which of these you are working on is by looking at the text at the top of the Main window.  If you are working on the main background, it will say only “Scene 1”.  If you are working on a symbol, it will say “Scene 1    SymbolName” where SymbolName is whatever Library symbol you are working on, for example hourHandSymbol.  If you are drawing a symbol, you can click on the “Scene 1” text itself to get back to where you can see all the drawing items together and work on the whole assembly.
  15. Now customize the two text areas on the main drawing area.  One is for your name, and the other is for your favorite quote about time.  You must be in “scene 1” to edit these text boxes, so if the top area says something like “Scene 1     hourHandSymbol”  then click the text “scene 1”.  When you are in Scene 1, you can click either of the two text items so that one of them shows the blue rectangle around it.  Now click the “A” tool in the Tools window, because you want to edit the texts.  Put your name in the top box, and your favorite quote about time in the lower window.  If you quote someone else, be sure to give credit to the author.  You can easily edit the text by highlighting it and typing new text, and you also have some control over the location of the text box and its shape.  To control its shape, your drag the white square at the top right of the text area.  To control its location you must change to the black arrow tool in the Tools menu, and then you can drag the box around.
  16. If you want more control over how the text looks, the Properties window will allow you to change fonts, sizes, colors, etc. of the text items (turn it on by checking it in the top menu Window pulldown and clicking on its top bar to open it).
  17. At any time you can run your clock by choosing Control/Test Movie.  When you have finally got a clock you really like, you can then choose “File/Publish Settings” from the top menu.  Make sure “Flash” and “HTML” are checked.  Close that window and then choose “File/Publish” from the top menu.  This will create a file called (for example) stephenlewis09myClock1.swf and another one called stephenlewis09myClock1.html.  You’ll also have a file called (for example)  stephenlewis09myClock1.fla.  If you click on the myclock1.swf or your stephenlewis09myClock1.swf file OUTSIDE of Flash, it will run your Flash clock in a browser.  We will publish these files on the class home page so other students can see your Flash clock.
  18. If you want to work on the assignment at home, you can copy your .fla file to the USB portable drive, or email it to yourself as an attachment.  Then you can install Flash from the USB drive to your home computer and work there.

 Homework: 

  1. Finish your clock, making the best, most interesting and artistic clock you can.  When you are finished, save your work, and click “File/Publish”.  Email me the .swf file as an attachment.  Do NOT email me the .fla or .html file.
  2. What is Flash’s Library for? 
  3. What happens if you draw one of your clock hands NOT pointing straight up?  What does that tell you about how Flash “sees” the world?
  4. What happens if you draw your clock hands NOT starting at the little plus sign in the middle of the symbol drawing space?
  5. Why is it important that the hands and face are all different symbols and not just one big drawing?
  6. What are the names of the windows you are using when you are working on this assignment in Flash?
  7. Why does this clock tell time?  Hint: Make sure you are in scene 1, and not in a Library symbol.  Open the Actions window by checking Window/Actions, and then click on the tiny “a” in the Timeline window’s first little square.  You should see some text appear in the Actions window.  What is this text and what does it do?  If you can, try to explain in as much detail as you can what the computer code does.  If you’ve never seen computer code, that’s ok, but give it a try anyway.  It’s “almost” English.

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” because it’s hidden, then drag the top of the Main window down a bit to show the “actions” line of the Timeline window, which contains the tiny 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 (symbol, text box, etc.)  in the Main window.  This may be because a number of objects (symbols, text boxes, etc which show a blue rectangle when “selected) 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.