Building an Analog Clock
In this simplified tutorial, we will be building an analog clock that can be used in Final Cut Pro.
Build Concept:
- Create a “power source” that drives all parts of our “device”.
- We need to make the time settable.
- We need to make this project something that works well in Final Cut Pro.
Obstacles:
- FCPX will slow down Motion projects (titles, generators) if they are stretched out in time, or conversely speed them up if shortened. We can “fix” the timing of our project with a loop marker.
- Obstacle 2: finding an appropriate length of time to fix the loop.
Rationalizations:
- The power source will be the timing/behavior used on the Hour element.
- The best format to use for looping is a 1 hour long project. This makes creating minutes and seconds easily cyclical.
The Project
Create a new project. Select either a Motion Project, Generator or Title for the project type. For the Settings, make sure that the frame rate is 60fps. A setting of 60 will give your project its best possible accuracy!
For the length, for best results, set the Duration to One Hour! (select the time and type 1… — a one followed by 3 periods and start your project). We are not going to create an hour long template for FCPX, but we will need all the alotted time to make this project work.
Creating the Clock Face:
Select the Line tool. In the Canvas, holding down the shift key, draw a vertical line about the length you want for the Second hand. Go to the Properties inspector and Reset the Position Parameter. This places the line in the center of the Canvas. Show Rulers. Click on the top Ruler and drag down a Guide to the 0 point. Then, drag the Properties > Transform > Anchor Point > Y parameter downward and set the point you want the line to rotate around. It should look something like this:
Duplicate this line twice more. Use the Edit Points tool to shorten one of the lines about 80-90% or the original and shorten the other one to about 60-70% of the original. Use the Shape > Style > Outline > Width parameter to adjust the widths of the shortened line: the “minute” hand – set to about 20px and the “hour” hand, set to about 35px, like this:
The Hour “Ticks”
Draw another small line. Reset its Position. Type ‘L’ to create a Replicator. Set the Shape to Circle, the Arrangement to Outline, the Points to 12 and select the Align Angle option in Cell Controls. Then, slide the Radius up until you have a nice arrangement that fits with the hands you have created.
The Power Source
Select the Hour hand. Go to the Properties inspector and reveal the Rotation > Z parameter. Right click on it and Add Parameter Behavior > Ramp.
Why Ramp? It’s linear and precise.
Since the project is exactly 1 hour long. In one hour, an hour hand moves exactly 30º clockwise. In terms of Motion, the hour hand needs to move -30º to move clockwise.
In the Ramp parameter behavior, set its End Value to -30.0º.
This is our “power source”. It is going to drive the minute hand and the second hand. If you run your project, you will see the hour hand move from directly vertical (12 o’clock) to the one hour mark.
The Minute Hand
Over the course of the entire hour, the minute hand travels 360º around the clock face. So, as the Hour hand moves 30º, the Minute hand moves 12 times as far (30 x 12 = 360).
Select the Minute hand line object. In the Properties inspector, dial down the Rotation paramter to reveal the Z parameter and right click on it. From the popup menu, select Add Parameter Behavior > Link.
In the Link Inspector, for the Source Object, drag and drop the Hour hand line object into the source well. Since the Rotation > Z of the Hour hand is driving the rotation of the minute hand, and the minute hand travels 12 times as far, set the Scale parameter in the Link to 12.0.
The Second Hand
Over the course of the entire hour, the second hand travels 360º every minute. There are 60 minutes in an hour so the second hand travels 60 x 360º or 21,600º.
Select the Second hand line object. In the Properties inspector, dial down the Rotation parameter to reveal the Z parameter and right click on it. From the popup menu, select Add Parameter Behavior > Link.
In the Link Inspector, for the Source Object, drag and drop the Hour hand line object into the source well. Since the Rotation > Z of the Hour hand is driving the rotation of the second hand, we need to figure how many times 30º goes into 21600 and the result is 720. Set the Scale value to 720.
Skim the playhead through the project — all the hands are perfectly sync’ed.
It's time to test this in FCPX
It’s time to save our generator (or title) as a template for Final Cut, except we have a couple of problems:
- Our project is one hour long! Dropping that in the storying in FCPX is going to be “ugly”.
- We also need to force the timing to stay consistent with our design.
Second thing first.
The best option available to force timing is to use a Project Loop End marker. In order to set a project marker, no layers can be selected in the Layers List. Click in the Layers List pane below everything to deselect all or simply type Command-Shift-A to Deselect All. Set the playhead at the very last frame of the project and type ‘M’, then type Command-Option-M to call up the marker dialog box.
From the Type option, choose Project Loop End. What this does is: if you lengthen the template in FCPX, when the playback reaches this point, FCPX will start the animation all over again from the beginning. If you shorten the template, the project timing is preserved. Without the Project Loop End marker, lengthening or shortening the template in the FCPX storyline will ramp the speed of animation: shorter — faster; longer — slower. Not what you want with a clock.
The other thing:
A one hour project is too long to place in FCPX, unless your video project is an hour or more long and you need the clock to be persistent over the entire project… not likely… not impossible… but not likely!
After you’ve set up the Project Loop End marker, we can now go into the Project Inspector (select the Project “layer”) and select the Properties pane. Double click in the Duration Timecode box and shorten the project to 30 seconds (type “30.” and type Enter.)
Save your project as an FCPX Template. If you chose Motion Project, select Publish Template and save it as a generator, otherwise, Motion will automatically place the project in the appropriate template path.
Place the template in an FCPX storyline and play. You should have a nice 30 second long template. If you drag it out longer (or shorter), the clock should continue to keep accurate timing.
It really doesn’t help if the clock always starts at 12:00.
Setting the clock… and while we’re at it…
All we have to do to make the clock “settable” and the way this clock is set up, that means we only have to deal with one thing: the starting point of the Hour hand!
Go back into Motion and select the Hour hand line object. Go to the Behaviors menu > Parameter > Custom.
The Custom parameter basically allows you to invent your own use for it.
In this case, we need a controller for the Hour hand’s Rotation > Z parameter. Unlike the Link parameter behavior, the Custom behavior’s parameters are always Additive! Creating a “ghost” Rotation > Z will allow us to set the hour hand’s rotation without changing any of the other parameters we’ve already set up.
Once you add a Custom behavior, in its Inspector, click on the Add Parameter > Add menu and select:
If you click and drag up on the Rotation.Z parameter value, going in the positive direction, you will notice the clock moves in reverse. You can engineer that if you like, but for this tutorial, we need to go forward in time, so the values need to go in the negative direction. This is not user friendly! The easiest way around this predicament is to right click on the Custom > Rotation.Z and Add to Rig > Rig > Add to new Slider
Double click on the new Slider object in the Layers List and rename it: Set Start Time. In the slider’s Inspector, the Slider’s parameter should already be set at 0. Make sure that the Hour hand.Custom.Rotation.Z value is also at 0º. Slide the slider’s parameter to 100 and drag the Hour hand.Custom.Rotation.Z value down to -360º. In the Options section, set the Range Maximum to 12.0; right-click on the Set Start Time label in the rig inspector and Publish. You will now be able to set a starting time in Final Cut. Unfortunately, you will have to deal with “decimal hours”, for example: 1:15 will be 1.25 (or one and a quarter), etc… but still, better than dealing with negative degrees.
Make it tick
I want the second hand to “tick” seconds!
Nice option! I agree. Easy.
Select the Second hand line object. In the Properties > Transform inspector, right click on Rotation > Z (again.) From the popup menu, select Add Parameter Behavior > Quantize.
In a running analog clock, every second is a 6º movement. Double click on the Step Size value and type in 6, then Enter. Then right click on the Label “Quantize” (or just that top bar) and select Publish. Select the Project “layer” and in the Project Inspector, double click on the word “Quantize” and replace it with “Tick Seconds” — you now have a new option to have a free-running analog clock or one that ticks off the seconds.
Afterward
You have now mastered the basic clockworks. You can do anything else you want to dress up this effect any way you want. The core animation will always be the same.
You can set up a way to show/hide the second hand and you can also speed up or slow down the clock animation. Try adding the Ramp > End Value to a Rig > New Pop-up and create the options for a 0 End Value (stopped clock – and use the Set Start Time slider) and another option for something like -720º (you will want to hide the second hand) making the hour and minute hands spin around quite quickly.
Here’s a layout of the Pop-up options:
Label | Value |
|---|---|
Stopped | 0º |
Half Speed | -15º |
Normal | -30º |
10x | -360º |
20x | -720º |
The 20x speed advances the clock a full 24 hours in the one hour length of the project. It’s fast, but not so fast that the second hand needs to be hidden. 10x would be 12 hours. Calculate the End Values in terms of degrees of the Hour hand.