Making Pretty Clockfaces For Beginners

How to Make a Nice Clockface:

1. First off, make sure you have a version of flash. I will be using Flash 8 professional in this tutorial. If you do not have flash, go to http://adobe.com, and go to the “downloads" page to acquire a trial version of flash 8.

2. Next, open up flash and choose to create a new flash document.

3. Once this is done, go to the left of your screen and choose the oval tool in the left toolbar.

4. Now, take the oval tool, and draw a circle similar to mine. Make sure you delete the fill color after you’ve made a circle.

5. I usually like to make adjustments to the line properties. To do this, go to window→properties and a new window should appear. Now take the arrow tool, and click on the outline of the circle. This should highlight it.

6. Now go to your properties panel, and click where it says 1 in the white box next to the drop arrow. Delete the 1, and change the number to a 3. This will make the outline just a bit thicker.

7. Now click off of the circle. Again, take the circle tool, however, this time; you need to make a circle to fit inside the other circle you just made. So take the circle tool and draw another circle inside of the large one. NOTE: Your circle might not be aligned EXACTLY at the center. To change this, double click the fill inside of your small circle and use the arrow keys to move it into position.

8. As soon as that’s done, you once again, need to delete the fill inside of your circle.

9. Now comes the harder, more complicated parts. Choose a color for your outer clock filler (the space in between the two outlines of the circles). I’ll be using #151515.

10. Now take the paint bucket and fill in the space. It should look something like this.

11. Next, you’re going to need to zoom in a bit more to get this part right. Zoom in just once, either by pressing ctrl and + or by taking the magnifying tool in the left tool bar.

12. Once you’ve zoomed in, we’re going to take the arrow tool and click the outline of the small circle. Once highlighted copy and paste it in place. (I usually just press ctrl c then ctrl shift v.)

13. Now what I usually do after I’ve pasted it, is I make it a different color so it’s easy to see. For example, I’ll just use #F7AAFF. I also like to make the line much thinner than the other two outlines. So go back to your properties window, and change the thickness down to 1.

14. Next you’re going to go to your toolbar again and click the tool under the arrow tool that you have selected. (the free transform tool). Once you choose it, your bright colored out line will have a box around it with small boxes on its sides and corners. For right now, we’re just going to take the top left corner box, click it, and drag it upwards and positioning it in the center until it looks like this.

15. Once you get this done, you’re going to need to take the arrow tool again, and highlight the fill closest to the inner circle. Then you’re going to change its fill color to be a little bit brighter than what it was previously. I’m going to change it to #222222.

16. After the color change has been made, click your bright circle outline (pink) again, and delete it. The outcome should look similar to this.

17. Now comes the inner clock filler. Choose a color you want the inside of the clock to look like (it should be a bright color). I’ll be using #EEE9D5. Take the paint bucket again, and fill the inside.

18. Once again, we’re going to do the same thing we did for steps 12-16, except this time, you’re going to do it for the fill of the inner circle.

19. Once you get your image to look like mine, click the outer most part of the fill (the part near the black outline of the other circle), highlight it, and change its color to something darker than what you filled it in with. (I used #E7DFC2).

20. Delete the pink outline again.

21. Now you’re almost done. The only thing left to make are the clock hands.

22. For this, we’re going to use the line tool. Also, we’re going to insert another layer. To do this, look at the top of the flash window. You’ll see a timeline there. In the timeline, look towards the bottom of it. You should see a trash can. Look a little bit more the left and you’ll see a folder with a blue plus sign on it, a red dotted line symbol and what looks like a piece of paper with a plus sign on it. Click the piece of paper and it will add a new layer. Once the layer appears, you’re going to lock layer 1 by clicking the dot under the lock in the timeline.

23. Once you’ve locked the layer, click back onto layer 2.

24. Go to an open white space, take your line tool (provided that you’ve changed the color back to #000000) and start drawing clock hands that look like this.

25. Once you’ve gotten yours to look like mine, change the thickness of the clock hands to 2.

26. Choose a fill color for it. (I would recommend using the same fill color that you used for your outer fill for the boarder of the clock, #151515.) Fill in the clock hands.

27. Again, we’re going to take the arrow tool, and double click the outline of the clock hands. Now sometimes it doesn’t completely get the whole shape, so I would recommend just clicking the lines individually and hold shift as you do so.

28. After you’re sure you have the whole outline highlighted, copy, paste in place, change the thickness to 1 and the color to pink, and resize it to fit inside the clock hand outline just as before. NOTE: You may need to zoom in again to get this just right. Also, you may need to adjust the points of the lines a bit as well. You do this by taking the arrow tool and where two lines meet, you click and hold and move your mouse into the position you want your point to be.

29. Now take the brighter color you used for your fill for the outer clock (#222222) and fill in the section inside of the pink outline inside of the clock hands.

30. Again, delete the pink outline.

31. All that is left to do now is to make the symbols.

32. Take your arrow tool, and completely highlight your clock hands you just made. Right click it, and choose the option that says convert to symbol. After you do that, a new window will pop up, asking what kind of symbol you want to make it and what you want to name your symbol. For now, just choose for it to be a movie clip, and name your symbol “Generic_clockhands” and press ok.

33. Once this is done, a blue box will appear around your clock hands; this means that it has successfully been changed to a movie clip.

34. Now we’re going to do the same thing for your clock that you’ve made. To do this, we need to unlock the layer, and highlight the clock. Again, right click, and convert to symbol. Make it a movie clip, and change its name to “Generic_clock” and press ok.

35. Again, a blue box will appear around it.

36. Now for the finishing touch. Click on the clock hands and move it over to your clock. Now it may be a bit too small, but don’t worry. All you need to do is take the free transform tool and make the appropriate adjustments to it.

37. Finally, you should get this (or something similar) as an end result.

38. Congratulations! You’re done!