Tutorial – How-To
In this tutorial, we will explain how to create a watch design using an animated image. No special software will be needed.
Step 1 – How it Works
Animating an image can be done several ways. It can be moved around the screen, rotated, moved back and forth, faded, and a number of other methods. See the facer documentation for these examples. This specific tutorial will focus on emulating an animated gif file. These gifs represent a series of image files that play in sequence to give the impression of a video. Usually these gifs are short in sequence lasting only milliseconds or looping forever.
Unfortunately, Facer does not support the use of animated gifs at this time. However, there is a work around using some math and the transparency field. The method to accomplish this using the Facer creator is to upload a series of images and use the transparency field to hide and unhide the images in sequence, thus recreating the video effect.
Step 2 – The Maths
First, thank you Mellin for assisting with this formula. The transparency field can be toggled on (100%) and off (0%) by the incorporation of some math using the expression tag for seconds. There are two “tags” that produce the values necessary to give a short time based window for the calculation to produce a result of on or off for the transparency field.
#Dsm# = Second in minute plus milliseconds
#Ds# = Second in minute
By subtracting the two, we can reveal the current milliseconds. This value has a range of 1.000 to 0.000. For instance: #Dsm#-#Ds#. From here we need to create a condition of when the image needs to be visible (transparency = 100) or hidden (transparency = 0). This is basically a range of time in milliseconds.
To calculate when the frame is visible we need a start and end time to compare. Here is the logic we are going after:
If (Current Time > Start Time AND Current Time < End Time), (Then (Transparency = 100), If Not (Transparency = 0)
To set up a conditional If Than statement in Facer we use the following symbols:
$(Current>Start)&&(Current<=End)?100:0$
Unpacking the calculations for the start and end times is a little more involved. Because we are using the moving target of the current millisecond as show calculated above. First we need to determine the length of the frames within the animation.
Typical movies are shot at either 24 or 30 frames per second. Gifs can vary wildly from this. Later on in this tutorial I will discuss some of the limitation and recommendation for chosing the appropriate frame rate for these animations. For the purposed of the tutorial we will use a frame rate of 8/sec. Understanding the frame rate is vital in “keying” the frames to the time you want them to become visible.
1.000 / 8 = 0.125
In the example of an 8 frame animation we would want the following outcome if the animation is to loop once during each second of time elapsed:
Start End
Frame 0 = 0.000 0.125
Frame 1 = 0.125 0.250
Frame 2 = 0.250 0.375
Frame 3 = 0.375 0.500
Frame 4 = 0.500 0.625
Frame 5 = 0.625 0.750
Frame 6 = 0.750 0.875
Frame 7 = 0.875 1.000
Fortunately the calculation can be shortened by the interval of the frame rate needed:
X = frame number //This is why the first frame starts with Zero
(Current) > (x * Start)
(#Dsm#-#Ds#) > (x * 0.125)
Step 3 – Express Yourself
Putting it all together with the full expression you get the following:
$(#Dsm#-#Ds#)>(x*0.1)&&(#Dsm#-#Ds#)<=((x+1)*0.1)?100:0$
This expression will need to be added to the transparency field for each image. Don’t forget to update “x” for the frame that you are on.
Step 4 – Understanding Limitations
a) Performance
While the thought of creating a smooth animation is the ideal, there are limitations to both the functionality of the facer application and the watch itself. There is computational time in rendering the instruction set and the image that affect the performance of the frame rate of the animation. Only testing of these will determine the best/smoothest frame rate for your animation. I have tested with 8 frames with modest success but have met failure when using 50 frames. Skipped frames will undoubtedly affect the overall performance of your design.
Some sample frame rate calculations:
2 = 0.5000
4 = 0.2500
5 = 0.2000
8 = 0.1250
10 = 0.100
16 = 0.0625
20 = 0.0500
25 = 0.0400
b) Animation Length
This calculation works with the assumption of creating a 1-second video. The availability of using milliseconds for keying frames is necessary for creating multiple frames per second. Moving up the time scale to the next base value would be the utilization of the Smooth value for minute hand rotation. You can get a decimal with this value, but the limitation essentially equates to 1 unit every 3.6 seconds. (Someone correct me if I am calculating this wrong).
There is a possibility of utilizing the ‘wake’ time elapsed tag (#DWE#) to create a longer animation, but the consideration here would be the ending frame. Since the seconds are expressed in hundredths instead of thousandths, the best frame rates would use intervals of 5. If the watch is awake for the standard 5 seconds, a frame rate of 10/sec would require 50 images. This ends up getting a little bulky in the design editor. Again, this consideration comes down to the performance of the app and watch. Smooth animations are limited by the frame rate and ability to not have dropped frames.
Step 5 – Tips on Composition
Due to the aforementioned limitations some design considerations need to be made.
a) Infinite Loops
The animation will need to fit in the span of 1 second. This may limit type and style of animation selected. Pay close attention to the animation you intend on using. It will continue looping as time matches on.
b) Subject Start/End Location
Because of the looping action of the animation the subject generally should follow one of two design considerations. The first is that the animation ends in a state and position identical to the starting position. For instance a walking figure would start and end on the same foot. The other option is for the animation to start and end off frame. Typically the image location is the same for each frame, but if your subject in the image is moving you can manipulate the size or use masking to create the effect.
Step 6 – Creating your Assets
The method I use for creating the frames is by utilizing a web site to extract an gifs images. The following site works good and is free to use:
Split GIF image in frames
You have to choice of either uploading your own image or using a url. Once uploaded, select the split option of “output images in png format”. Once split, you can download the files together in a zip folder at the bottom of the page.
From here you can pare down your selection of frames. If you plan on using 8 frames a second and your gif has 30 frames, then choose every 3rd or 4th image. Copy these into a separate folder and play through them to see if the effect still looks good.
Step 7 – Uploading Assets
There is no specific instruction for uploading your images to the Facer app. The standard process applies. I would recommend a few things however, order then and arrange them in one direction or another (i.e. either up or down). The gif extractor page does name your files starting with 0 so this makes things easier to keep track of.
I would also recommend duplicating frame 0 again and place it at the bottom as a background image with the transparency set to 100. This is more so for the generation of the static image for the Facer store. Sometimes there is a bug in the view when the time is set to 12:00:00 where frame 0 doesn’t render. Having this static image ensures there is an image in this view.
Step 8 – Animation Timing
As demonstrated in the instruction above, use the following expression in the transparency field for each image in the animation sequence:
$(#Dsm#-#Ds#)>(xframerateinterval)&&(#Dsm#-#Ds#)<=((x+1) framerateinterval)?100:0$
Do not forget to replace both “x” with the frame number and “framerateinterval” with the value for your frame timing:
Example (frame 5 of an 8/sec frame rate) =
$(#Dsm#-#Ds#)>(5*0.125)&&(#Dsm#-#Ds#)<=((5+1)*0.125)?100:0$
Step 9 – Samples
Working Samples (8 frames/sec):
Broken Sample (50 frames/sec):
*I plan on retrying this with the #DWE# tag since the animation I was trying to use was around 3-4 seconds originally.
Thanks for posting it!!! I used your expressions to animate my newest watchface “