In this simplified tutorial, we will build an analog clock that can be used in Final Cut Pro.
- 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.
- 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.
- 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.
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
- 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.
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.
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.
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:
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.