Showing posts with label kinetic typography. Show all posts
Showing posts with label kinetic typography. Show all posts
Lusus

An Introduction To Michael S. Scherotter's Kinetic Typography App Part 2

 


Since creating the simple kinetype above to promote my DJ sets, a number of people have shown an interest in how it was made. The end result is this tutorial that walks readers through creating a kinetype using Michael S. Scherotter's Kinetic Typography app

 

This tutorial is in fact the second of a two part look at Michael's app. Part one focused on the pros and cons of choosing the app over alternatives such as Adobe After Effects, as well as introducing the elements of the user interface. Looking over part one here will make following this part much easier.

Creating A Kinetype

Creating a kinetype (or Kinetic typography video) using Michael S. Scherotter's app is not that difficult, although there are a number of steps involved, most of which consist of setting up the text prior to animation. When using this app you'll no doubt come across a few bugs, but by following this tutorial you'll learn how to overcome or work around them.

The images here can be clicked to view full size.



1/ Open the Kinetic Typography app, and after the splash screen click the Settings icon, top left, six down (the cog icon). 

In the space provided enter the number of seconds each word or phrase will appear on the timeline. Its not too important to be precise because this can (and will) be changed later. Here 10 seconds has been added. 

In the frames per second window 30 has been chosen. Since this is going to be an animated gif, 30 is more than enough.


2/ Click the pencil icon, top left, four down to open the edit window. This is the beginning of your kinetype. The default size is 640 X 480, but we're going to change this soon.
 

 3/ Towards the right of the Viewer is the Phrases Panel. Type or paste a phrase into this space and hit Enter before typing the next.

 
4/ Once all the phrases have been added, hit the Save Phrases button. Each phrase will appear on the timeline as a blue block. Looking at the timeline we can see each block lasts for 10 seconds, since thats what we selected earlier.

 
5/ Sometimes the timeline can appear compressed making it difficult to read. To expand the timeline, click on the number to the bottom right, (it typically says 20. Here it says 70  because we've adjusted the slider). A slider will appear as above. Drag it until you're happy with the timeline's appearance.
 

The Kinetype Properties Tab 

 

 1/ We're now going to make some basic edits to the kinetype. Towards the top right there is a vertical menu of four icons. Select the first and three tabs will appear, with the Kinetype Properties tab being active. 


2/ Looking at the image above it can be seen that in the relevant spaces a title for the kinetype has been added, as well as a size for the output video, and a background colour. 
 
The font settings have been left because each phrase will be edited seperately. (Editing font details here doesn't seem to make any difference anyway - our first bug encounter).


3/ To save the settings created so far, hit the first icon bottom right, then hit Save. This app is not 100% stable and can behave in unexpected ways at times, so its important so save often to avoid having to start from scratch.
 

Editing The Text

 


1/ Before we start to animate the text we're going to edit the font, size and colour of each phrase.
 
In the example here, we'll start with the phrase (or word) 'DJ'. 
 
Click on the first blue block that represents the word 'DJ' on the timeline. The tabs to the right will close. Click anywhere away from the blue block, then click the block again. (Another one of those bugs mentioned earlier). Now click on the second icon down from the vertical menu to the right. 
 

2/ The phrase editor will now be visible. In the spaces available enter the font style, size and colour for each phrase in turn.
 

 3/ To edit the text colour, either add the hex in the colour space, or click the coloured square next to it. A window will open where you can select a colour.
 
Repeat these steps for each phrase so they're the size, font and colour you want. 
 

Organising  The Timeline

 

 1/ In this kinetype each phrase in turn enters the screen from out of frame, then when all phrases are in position they pause before exiting again. 
 
What we'll do then is position each phrase where it will stop before exiting. This way we can arrange all the phrases in a block and see how they fit together.
 
Once the size of each word has been decided we can move them in place in the Viewer window by grabbing each in turn with the cursor, holding down the right mouse button, and dragging them into position. We can now see if any fine tuning is needed.
 
Because we have manually positioned each phrase into place, this becomes their starting positions.
 
2/ This step isn't strictly necassary, but I find it makes things more organised and easier to edit. 
 
Grab the red handle at the end of the first blue block, and drag it. The block will extend. Keep dragging until it covers most of the timeline. Repeat for all of the blocks.
 
To move each blue block along the timeline, select it, hold down the right mouse button and drag it with your cursor.
 
 
 
3/ Making sure all the phrases are where you want them before beginning any animation reduces the risk of losing track of what you're doing. The best way to do this is to edit the 'to' keyframe of each word so it matches the 'from' keyframe. 
 
If you don't do this and test run the project (by clicking on the play icon, bottom left), you'll likely see the words drift within the Viewer.

4/  In the above image the keyframes for the word 'DJ' are highlighted in yellow.

Click on the 'from' keyframe. The top line is: T: 36px, -3px,  0px

This represents the co-ordinates measured in pixels for the word 'DJ' in the Viewer. If the word was moved to a new position the co-ordinates would also change. 

 

5/  Now look at the Translate settings under the Keyframes tab, top right. You'll see the numbers are identical to those of the 'from' keyframe's top line. The first number is the x co-ordinate, and the second is the y co-ordinate, (we don't need to worry about the z co-ordinate here). 

 

To move a phrase (or word) we can edit its x and y co-ordinates under the Keyframe tab. If both the 'from' and 'to' keyframe co-ordinates are the same, the word will be static. If they're different, the word will start at the 'from' keyword co-ordinates then move to the co-ordinates of the 'to' keyframe.

 

As we have already said, we want to start with static keyframes before adding any animation. 

 

In the example kinetype here it was much easier to start with the keyframes set to the position where all the phrases form a block. It was then clear where each word would move to at the beginning of the kinetype, and where they would move from at the end. This will become more apparent later.


Editing The Keyframes

 
1/ Select the block in the timeline that represents the first word or phrase. Here its the word 'DJ'.

2/ Click on its 'to' keyframe to select it.

3/ In the Keyframe tab, top right, type in the x co-ordinate of the 'from' keyframe, into the space for the x co-ordinate of the 'to' keyframe. 
 
4/ Now type in the y co-ordinate of the 'from' keyword into the space for the y co-ordinate of the 'to' keyword. 
 
The 'from' and 'to' keyframes should now be the same.
 
5/ Repeat this for all the phrases in the kinetype, so they are all static. 

Software bugs 

A couple of bugs in the Kinetic Typography app have already been mentioned, but there are a few more to watch out for.
 
One bug that can make arranging phrases a little tricky occurs when one phrase is selected, and for no reason the others disappear from the viewer. The easiest way to deal with this is to use the slider towards the bottom of the app and drag it. This usually fixes the problem, although it does need to be done quite often.

Another bug you may come across happens when a phrase is dragged into position in the viewer, but leaves another version of itself in the place it was moved from. One way to clear this is to save the project, close the app, reopen it, and open the project again. Its tedious but at least the app starts up again quickly.

One more bug to look out for is, when you try to drag a phrase into position in the viewer but it won't move. Usually if you click on something else and wait a few seconds this sorts itself out and the phrase can then be moved.
 
This may not count as a bug, but there is also something wrong with the app's ability to generate keyframes. Usually when creating digital animations the software allows you to  give an object as many keyframes as needed. However, this doesn't seem to be the case with this app. Although its possible to create 'from' keyframes, it appears only one 'to' keyframe can be created for each object. Also, whilst its possible to create a keyframe as a percentage of the timeline, the smallest fraction possible is 1%. For the kinetype we're creating here, 1% is not precise enough as the object will move too slowly.

Because of this a work around needs to be used, which involves creating three objects for each word, (an object here refers to the blue blocks that represents a word on the timeline).  The first object animates a word into the frame, the second keeps it static for a given period of time, and the third animates it out of the frame. We're now going to look at how to do this.

Animating The Text

 


1/ Create a copy of the first word or phrase directly under the original, in this case its the word 'DJ'. Since the app has no copy and paste function we need to do this manually.
 
2/ Click on the Edit Phrases button, and just under the word 'DJ' type DJ again.

3/ Hit the Save Phrases button. Another blue block will appear in the timeline that represents this new instance of the word 'DJ'.
 

 
4/ If you see a blank space where the word should be, its more than likely because the app has placed the block at the very end of the timeline. 
 
Grab the handle at the bottom of the app that allows you to scrub through the timeline, and drag it so you can see the block. 

Grab the block with your cursor and drag it to the start of the timeline.

5/ Again, to avoid any confusion, match the 'from' and 'to' keyframes of the new word to the keyframes of the original DJ word.



 
6/ The first instance of the word 'DJ' on the timeline only has to exist for as long as the word is moving into position from out of frame. To shorten its blue block, grab its red handle and drag it to the left.

Now we can animate it to move into frame.




7/ As we mentioned earlier, if the 'from' keyframe is different to the 'to' keyframe the word will appear to move. 
 
The word's two keyframes presently make it stationary within the viewer. But if we edit the 'from' keyframe so the co-ordinates place it outside of the viewer, we will then see the word move into frame.

In this example we want the word 'DJ' to enter the viewer from the left, so firstly select the word on the keyframe. 
 
8/ Select the 'from' keyframe as in the image above. Now select the Keyframe tab from the right vertical menu.

9/ In the above image you can see that under the Keyframe tab the x co-ordinate has been edited to -550. Since the word will only be moving in one diretion, the y co-ordinate stays the same in both keyframes.

10/ you can use the handle on the slider to the bottom of the app to scrub through the animation to see how it works. 

By clicking the play button you can see the animation in real time.

11/ If the word enters the viewer too slowly, grab the red handle and move it to the left to shorten the blue block. If the animation is too fast move the handle to the right.

12/ Look at the image above to see how the two DJ blocks on the timeline touch. Positioning them like this means the word 'DJ' will appear on screen seamlessly. When watching the finished video, the word will appear to enter the frame from the right then remain stationary.
 
13/ Once you're happy with the word's animation, you can adjust the length of the block that represents its stationary position.  The longer the block appears on the timeline, the longer the word will appear motionless in the viewer. To adjust its length, simply drag the block's red handle.
 
14/ Repeat steps 1 to 13 for all words or phrases. The one difference will be the co-ordidates for each word since we want them to enter the frame in different directions. 
 
This is what you need to remember about entering co-ordinates and what direction the phrases will subsequently move in:
 
Moving The Phrase To The left
 
To move a phrase to the left, the 'to' keyword's x co-ordinate should be a smaller number than the 'from' keyword's x co-ordinate.

For example, if the 'from' keyword's x co-ordinate is 200, and the 'to' keyword's  x co-ordinate is -100, the phrase will move to the left.
 
Moving The Phrase To The Right
 
To move a phrase to the right, the 'to' keyword's x co-ordinate should be a larger number than the 'from' keyword's x co-ordinate.
 
For example, if the 'from' keyword's x co-ordinate is -100, and the 'to' keyword's x co-ordinate is 200, the phrase will move to the right. 
 
Moving The Phrase Upwards
 
To move a phrase upwards, the 'from' keywords' y co-ordinate should be a larger number than the 'to' keywords' y co-ordinate.
 
For example, if the 'from'  keywords' y co-ordinate is 200, and the 'to' keywords' y co-ordinate is -100, the phrase will move upwards.
 
Moving The Phrase Downwards
 
To move a phrase downwards, the 'from' keywords' y co-ordinate  should be a smaller number than the 'to' keywords' y co-ordinate.
 
For example, if the 'from'  keywords' y co-ordinate is -100, and the 'to' keywords' y co-ordinate is 200, the phrase will move downwards.

The best way to see this in action is to set up a phrase in the Kinetic typography app and add co-ordinates to make it animate in different directions.

Here, we are using basic up/down, left/right movements, but you can experiment by changing both x and y co-ordinates together to create diagonal movements.
 
Other kinds of animations to experiment with include rotation and scale. In fact in the example used here there are words that have been rotated. However, as the rotation is not animated, by now you should have realised this is because the rotation values for the 'from' and 'to' keyframes are the same.
 

The Timeline

Staggering the words' corresponding blocks on the timeline a little controls when each phrase appears in frame. Look at the timeline on the image below and you'll see that after one word entered the frame and became stationary, another begins to enter. This way each phrase enters the frame relatively quickly, one after another.
 
To move a block on the timeline, grab it with your cursor and drag it into position.
 

Animating Phrases Exiting The Viewer

 

The process of animating the text so it moves out of frame is very much the same as animating it into frame. We start by adding another copy of the phrase to the Phrases Editor, directly below the original. We then follow all of the steps above, except we edit the keyframes so the text moves out of frame. 
 
Because of the way we set up each phrase and their keyframes, the main difference between animating text out of frame, rather than in to frame, is that we now we edit the 'to' keyframes, rather than the 'from' keyframes. Apart from this, the process is the same.
 

Exporting The Kinetype

 

To Export the kinetype, hit the Save icon, then select Export. Navigate to where you want to export it to, name it then hit Export File.

Converting The Kinetype To An Animated Gif 



 
Converting the kinetype to an animated gif is in no way necassary, but as this example was going to be used to promote my DJ sets on Facebook, gif proved to be the best file format. If this very short Avi file was uploaded to almost any online platform it would run once and stop, which would not be too impressive.

Animated gifs uploaded to Facebook would also just run once, but when added to a platform such as Giphy or Tenor, and the link is posted to social media, the animation will loop as its supposed to.
 
There are many ways to convert movie files to gifs (and visa versa), but some are better than others. There are websites such as EZGif  and Online-Convert that will do this, but often such sites limit the size of file that can be uploaded. There is also limited control of the quality of the exported file.



As well as online platforms, there are small apps that will convert movie files to animated gifs. One of the best is Giffing Tool. There is a free version of this app that will leave a small watermark at the bottom of the gif, as well as a pay what you want version that removes the watermark. (Just a small hint: product watermarks make anything look amateurish).

1/ To use Giffing Tool, play the exported kinetype in a media player

2/ Start Giffing Tool and hit New
 
3/ Drag a rectangle over the part of the monitor you want to record (ie, the media player screen)

4/ Press Esc to stop recording. The recorded area will now appear in a window in Giffing Tool ready for editing. Typical edits might include, removing sections of the animation so it loops smoothly, changing the image size of the exported gif, and adjusting the frame rate.

5/ When you're ready hit the Save button (fourth icon down on the vertical menu, left), and you're done.

 Whichever method you choose to convert a movie file to an animated gif, the important thing to remember is the size of the gif file needs to be kept as small as possible. This is the entire purpose of gifs, and converting movie files into huge gif files is just absurd.

This pretty much covers the basics of using Michael S, Scherotter's Kinetic Typography app. Although this tutorial is not extensive, it covers enough to get you creating kinetypes, whilst allowing enough room for more exploration and experimentation with the app. Have fun creating your own kinetypes and feel free to share your animations with me on Facebook.
Read More
Lusus

An Introduction To Michael S. Scherotter's Kinetic Typography App

 

 

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.
Read More