Clock Animation Task

Today I learnt how to animate a clock’s hands spinning around, with Adobe Animate.

First of all, I made a clock in Adobe Illustrator and imported it into Animate, making sure to separate the different parts into their own layers.

I then made each of them into a symbol.  Symbols seem to be pretty similar to compositions in Adobe After Effects, as in they let you animate specific parts of something, which you can then watch in the main Scene window.

This is what they looked like as symbols, in the library window.

I then used this tool.

To move the pivot points of the two clock hands into the middle of the clock, so that when I begin rotating them, they won’t have a fit and fly around, but instead will rotate around the centre of the clock, like the good little hands that they are.  A pivot point is represented by that little white dot.

I then made a keyframe with on the small hand, and went forward 2-3 frames and made another keyframe.  On this keyframe, I rotated the hand 90º clockwise, then I went on to do this four times.

Doing this makes sure the minute hand will rotate 1/4 of the clock for each keyframe.  I then Made a Classic Motion Tween between each of the four frames.  A motion tween basically fills in the gaps between frames, which saves a great amount of time and mental torture.

A Classic Motion Tween looks like this.

So now I had one full rotation of the minute hand.  But I also wanted the hour hand to move somewhat realistically, so I started by making 12 keyframes on it, which were spaced at the points on the timeline when the minute hand passed 12.  On each of the keyframes, I positioned the hand on a number, in a linear fashion.  Then I put Classic Motion Tweens between each of them.  This ensured that whenever the minute hand did a full rotation, the hour hand would shift one hour.  I then copied and pasted the keyframes of the minute hand’s full rotation 11 times, spaced directly after one another.  This meant that although fast, the movement of the clock hands would look realistic.  This was what all of that put together looked like.

So that was the clock accounted for.  It should have been done, but me being me, I wanted to add a background.  So I made a fancy swirl and imported it into Animate.  I tried using the same technique to back it swirl, but for some dumb reason it wouldn’t work, So I had to make it into a symbol, then make a keyframe, move it a bit, make another keyframe, move it a bit more, and so on.  This technique of animation is referred to as animating on ones.  The result looked like this.

After that, I was satisfied with it, so exported it.

I then went home and edited it to make it real fancy and show-offy.  This is the final product.  Yay!