This is the first part in a two part tutorial on how to use Michael S. Scherotter's Kinetic Typography app. In this part we'll concentrate on the pros and cons of using the app, as well as outlining the main features of the user interface.
In part two of this tutorial we'll cover the basics of how to use the app to create your own kinetic typography animation (or kinetype).
The reason we decided to do this was because there is very little (if any) helpful content on how to use this software, which means for those unfamiliar with the basics of animation, getting started with this app is made unecassarily difficult.
What Is Kinetic Typography?
Kinetic typography (also called kinetype), is essentially an animated text video, often based around poems, song lyrics or a memorable speech, often from a film. There are many examples of kinetic typography on YouTube, in fact its possible to view these videos from within Michael's app, (more about this in a moment).
About Michael S. Scherotter's Kinetic Typography App
If you're familiar with kinetic typography you're probably aware that the bulk of these animations are made using Adobe's After Effects. Whilst this software is excellent at what it does, it comes with a monthly fee, and a learning curve which may seem a lot of trouble if all you want to do is create kinetypes.
By contrast Michael S. Scherotter's app is initially free to use, and then has a one time fee of £3.00 (around $4.00).
There are also online platforms where you can create kinetypes, and it has to be said, using one will probably be simpler than using Michael's app. The downside is however, these platforms tend to charge a monthly fee in excess of the one time cost of buying Michael's app, and they tend to use templates that limit what you can do.
So far we've considered a few reasons why Michael's app is probably best to use over some alternatives, but there are a few unavoidable downsides. The first of these is that, whilst its crying out for more work to improve it, this software doesn't appear to still be under development.
Secondly, as mentioned earlier there is little helpful content for those wanting to learn to use the app.
Thirdly, the app occasionally has some unexpected behaviours. For example, if you minimize the app window then maximize it again, the project you're working on seems to have been lost, which can be a little unnerving. (If this happens to you, don't worry. The project will be stored under the My Kinetypes tab, where it can be opened again).
Other issues with this app include, not having an undo function, there's no way to copy and paste items, and adding keyframes to the timeline is perplexing to say the least.
Having said all of this, the basic choice is either taking the time and expense to learn something like After Effects to create kinetypes, or use Michael's app and work with its limitations.
If I haven't discouraged you from using this app, it can be downloaded from the Microsoft store here. In spite of its pitfalls, it does do what its supposed to.
The Kinetic Typography Starting Screens
In this section we'll cover the basics of the kinetic typography app's interface, then in part 2 we'll show how to create a simple kinetic typography video.
1/ When Kinetic Typography is opened, after the splash screen the UI wll look like this, showing an example kinetic typography video.
2/ To the top left is a vertical menu. Click the top icon (three horizontal lines), and the menu will expand showing the names of the menu items. Clicking the house icon will take you back to the start up screen.
3/ Selecting My Kinetypes will open the window where you can see your saved projects. To open one click it, and from the drop down menu select Edit to continue working on it, or Open to view it.
4/ Select Edit Kinetype and a new project will open with the default settings, or any settings you entered previously.
5/ Select Kinetic Typography On YouTube, and you'll see this. Clicking on a video will play it from within the app.
6/ Selecting Settings will bring up this window where details about a new project can be added. The two important settings are the frame rate, and the length a word or phrase appears on screen, although this can be changed later if needed.
7/ The last menu option is the about window, with a link to a Facebook page for the app, (the last post was from 2016!), and a contact email address for Michael.
The Kinetic Typography User Interface
When the Edit window is open ready to start a new project this is what is seen (without the text and timeline items. This is shown to give an idea of where these items will appear).
1: Viewer. Where the edits can be seen in real time.
2: Words and phrases for the kinetic typography are added here.
3: Timeline. Words and phrases are visualised on the timeline as blue blocks.
4: By dragging the handle here you can scrub through the animation.
5: Save button
6: Timeline zoom. Sometimes the timeline looks too compact, so click here to expand it.
7: The plus/minus icons are for adding/removing keyframes.
8: Add Music.
9: View the movie.
10: At the end of each blue block on the timeline is a red handle. Dragging this will extend or shorten the block. The shorter the block the less time it will appear on screen. Alternatively, the more extended the block, the longer it will appear. This can be seen by the seconds markers on the timeline.
1: Toggles the kinetype property editor.
2: Toggles phrase editor.
This image shows the app with text added and edited. It also shows the options when the kinetype property editor is selected. There are three tabs available for the editor. The first tab allows you to add:
1: Title
2: The size/format of the output video
3/: Text colour (this doesn't seem to work. Text colour can be changed in the phrase editor).
4: Select a font from the drop down list. This depends on what fonts you have installed on your PC/laptop.
5: Font size
6: Background colour.
The Phrase tab has options for editing each word or phrase in turn.
1: The text or phrase
2: Select a font from the dropdown menu here
3: Font size
4: Font colour
The final tab allows you to edit the keyframes for each phrase.
1: This shows the keyframes for a phrase. The top is the starting ('from') keyframe, and below that is the end ('to') keyframe.
2: This area is where co-ordinates and other information for the keyframe is added. Because the 'from' keyframe is highlighted in 1, area 2 allows you to edit that keyframe. Alternatively, if the 'to' keyframe was highlighted in area 1, needless to say it could be edited in area 2.
A Little Animation Jargon
The animation jargon needed to use this app is quite basic, with just two terms needing a little explanation.
Timeline If you've used video editing software the term timeline is probably not new. In digital animation its essentially a section of the user interface that allows the animator to organise an object's movement in time. It can usually be read from left to right, where the start point is zero, and then proceeds in increments of either seconds or minutes.
Michael's Kinetic Typography app represents words or phrases on the timeline as blue blocks. When a word or phrase appears on the timeline this means it will also appear in the viewer. If, for example the block appears next to the 2 second mark on the timeline, the corresponding word will appear in the viewer 2 seconds after the start of the video.
Keyframe In old school animations, each frame (or cell) had to be hand drawn then photographed. It was by projecting 24 of these hand drawn frames per second onto a screen that created a sense of animation.
In digital animation a lot of this work is redundant because keyframes mark the start and end points of an object's movement, removing the need for the animator to draw in all the inbetween sections.
Two keyframes or more are usually needed to create animation. One keyframe tells the software the object is at a given position, whilst the second keyframe tells the software the object is now at a new position. The software then creates all the inbetween stages so the viewer sees the object move smoothly from one position to the next.
Keyframes are usually given a point on the timeline, so that actions will begin and end at those given points.
In Michaels' app, simple animation is created by giving two keyframes information about an object's x and y co-ordinates in the viewer at certain points on the timeline.
This covers the essentials needed to get started with the Kinetic Typography app. Although it may seem a little complicated right now, it really isn't, and not everything needs to be kept in mind at one time. Part two will show how to use the screens and tabs described here, one at a time so you can create your own kinetype as quickly as possible.
