🏡 Home

Animations and Optimization

Rationale

The author really does not like creating videos – even those that may be only a few minutes in length.

Video creation seems to take, at best, $3x$ units of time where $x$ is the length of the video.

Videos are often published on a website that does its level-best to distract our students from the task at hand.

To explain a given concept, the author has found that short-form animations – 30 seconds at most – combined with long-form writing and ample screenshots – works well for about 80% of his students. This allows him to spend more time 1:1 or in small groups with the remainder of the students of his class.

Animations

Somewhat suprisingly, the animated GIF format works well in this use case.

Software

Most teachers have found video-authoring software that works for their needs.

The author uses Screenflow for macOS, finds it works well, and is worth the purchase price.

The author has not used Windows professionally for more than two decades, but is led to understand that Camtasia is reasonably good software.

If you use Linux, the OpenShot video editor may be a good option, but has not been tried by nor recommended to the author.

Export settings

In Screenflow, these settings are used when exporting a project to animated GIF format, to reduce the resulting file size:

Specifically:

• 10 frames per second is sufficient
• Reducing the video resolution to about 65% of the original
  • This allows the exported animation to remain sharp

The example video used – 17 seconds in length – resulted in an exported file size of 3.9 MB – which is still significant:

Optimization

The author has a standard practice of using the ImageOptim software to reduce the file size of GIF and PNG files that are posted on his websites:

File size savings of more than 50% are common for animated GIFs when using ImageOptim.

PNG files can also be losslessly compressed using ImageOptim.

While ImageOptim is not available on Windows, the underlying open-source software it employs is packaged into other applications that are available on Windows.

Suggestions for usable animations

Animated GIF files typically loop, but catching when an animation has begun again is a usability concern.

The author recommends inserting a 1-second segment of blank video at the start of a recording:

This is the effect in the resulting animation – note the short period of time when the animation shows a blank black screen as it begins a new loop:

🏡 Home