AnimationMaker 1: Basic Animation and Interface

AnimationMaker is a simple and basic application that can be very useful for make animated snippets for our videos. This application, despite being basic, has an animation concept that brings together the two most important factors in this type of application: simplicity and efficiency.

The only “but” I see is that it does not have the possibility of exporting with a transparent background. This greatly limits its application in our videos, reducing its use to making full-screen animated sections (such as credits), a header or end of our production, among many other options. It can also be used to make animated ornamental borders with logos or texts. I emphasize the “animated” since if they are not animated we do not need this application.

The elements that we can use to make our animations are:

  • Rectangles
  • Ellipses
  • Texts
  • Bitmap images (jpg, png, gif, and bmp)
  • Vector graphics (Only supports svg format)

Indicate that in bitmap images, or vector graphics, the alpha channel (transparency) that they carry is respected. So if we have images with a transparent background we can superimpose them to make our production. But, as I have indicated before, we have no possibility to export our project with a transparent background to superimpose it on our video.

Download and install Animation Maker

To simplify this section I refer you to blog article “UBUNLOG” where I met AnimationMaker, thanks to a link shared by “Informático de Guardia” on twitter.

In the aforementioned article, apart from making a good presentation of it, it also indicates how to download and install the application, including how to uninstall it if necessary.

We can also go directly to the developer website for more information or to leave a comment.

Animation Maker interface

01.png

I see in the video that the developer himself has made that, to optimize screen space, he moves the elements panel and places it on top of the properties panel. This is very easy to do, we simply take the panel from its header and drag it to its new location.

02.gif

And we have the interface as follows. I have numbered the spaces to get to know their purpose.

03.png

  1. Vertical toolbar
    04
    These are, from top to bottom
    • Selection and manipulation pointer
    • Tool to insert rectangles
    • Elliptical Shapes Insert Tool
    • Tool to insert text
    • Bitmap Image Insert Tool
    • Tool to insert vector graphics
  2. Space where we carry out and see our project.
  3. Space where we see and manipulate keyframes and their transitions.
  4. Space where we see the elements inserted in our project. These will be part of the scene that is the basis of the project and is inserted by default when we start a project.
    05.png
  5. Properties panel. This is where we have and see the parameters of the inserted objects. From where we can manipulate their values ​​and activate their animation.

Basic scene

This is where we will put the parameters for the realization of our project. It will always be the first adjustment we will make to do it according to our needs.

06.png

In the previous screenshot we see the properties of the default scene, in it we have the basic parameters to face our project, these are:

  • FPS, frame rate of our project.
  • Size (Size), Width, W (Width) and Height, H (Height)
  • Background color

The frame rate and size are fixed values, however the background color can be animated, in this way, in the course of our production, it can change.

All values ​​in the property panel that have a diamond next to the value box can be animated.
11.png

Timeline header and workspace details

08.png

  1. The zoom of the workspace, its values ​​are fixed and it only offers us the possibility of working with these predefined values.
    09.png
  2. The play buttons.
  3. Buttons to indicate whether the keyframes and their transitions will be inserted automatically or manually. The point is for the keyframes, and the series of squares is the transition.
  4. Playhead position indicator.

Insertion and manipulation of elements

To insert the elements we simply take the desired tool,

04

and click on the workspace.

When we insert a shape or image, we can freely manipulate it from its edit points. It’s these black squares that are at the corners and midpoints of objects.

33.png

To maintain the appearance of the shape or image, we must press and hold the “CTRL” key while we make the change, in this way the previous shape will always be a perfect square, from any point that we enlarge or reduce it in size.

If we keep the “SHIFT” key pressed while we manipulate the shape or image, it will be freely modified from its center.

If we hold down the two “CTRL + SHIFT” keys, the shape or image will be scaled or reduced while maintaining its appearance, but from its center.

In the video at the end we will see an example of this process.

Animation Maker working mode

Its way of working is very simple, and this in these types of applications is a blessing, since this greatly facilitates the work of creating animated elements.

I think the best way to learn how an application works is with a practical exercise, and this is what we are going to do.

Practice statement

I am going to make a gif with a resolution of 600 × 400 at a rate of 12 frames per second and with a black background.

This gif will consist of some texts that will enter from both sides of the screen and a logo that will fall from above, remaining on the text, and when these lines leave the screen (on the opposite side from which they entered) the logo will fall and exit under. A band of blue background color will fade under the text, which will fade when they are exited from the screen.

Its total duration will be 4 seconds and its only purpose is to learn the most basic notions of this application.

First steps

The first and most important step is to adjust the scene with the indicated values. I reiterate what is important, since if we get to work with wrong values, changing these can give an unwanted result for our project.

We do this from the properties panel, in the scene panel. In the following image we see the correct configuration of this project.

10.png

To be able to change the color from the HSL RGB wizard we have to click on the color box at the end of the term “Backgroundcolor”

Warning, this application does not warn if we close without having saved our work, so it is a very good option to save regularly. The first time to save we must do it with the option “Save as …”Or by pressing the key combination“Ctrl + Shift + S“. Later we can use the option “Save“Or the shortcut”Ctrl + S“.

Insertion of texts

I am going to insert two individual lines of text, one word that will be “Computer” and the other that will be the words “Guard”.

To insert them we simply take the text tool and click on the canvas. We see that in the elements tab there is a text element and in the properties tab all its parameters grouped in families.

12.png

Indicate, as I have mentioned before, that all parameters that have a rhombus next to their value are animatable.

In “id” (short for “Identification”, Identification in Spanish) I have put “text 1”. We see that this element is shown to us with this name in the panel of Elements.

Subsequently I have located in the tab “Text” and in the corresponding box I have put the indicated word, with the font “Sans Serif” and a size (Size) of 48 points.

Here the first problem has arisen: the word “Computing” has an accent and this application does not allow accents because it uses a character map that does not include accented vowels.

Solving this is very simple. We open any text editor that uses the character map most typical of Spanish, and we write the desired text. We copy and paste it in the corresponding box, and that’s it, problem solved.

And finally I put the text in white.

Now from the central panel with the mouse I place the text in its initial position. Staying like this. We can see that the word is out of the visible range. The visible range is the black rectangle, as this is the color I use as the background.

13.png

I repeat the steps to insert the other line of text. This, in its initial position, will be to the right of the monitor and below the first word.

14.png

We already have the two texts inserted and in their initial position.

Keep Keep saving regularly, if the application closes for whatever reason we will lose our work.

Inserting the ornament background for the texts

For this I am going to use a rectangle that I will insert with the application’s own tool.

The technique is the same as with the texts (click on the tool and then on the work screen). A square appears, which we can stretch from its manipulators (these black squares at its ends) in which when we put the mouse on it they turn orange. We adjust the size, which covers the screen from side to side, with a height that takes the two lines of text.

And we also give it the desired color, in this case both the fill and the border will be the same color.

16.png

Remaining as follows:

15.png

We observe that this exceeds the display space (nothing happens) but what we must correct is that this rectangle has to be as the background of the texts and not on top of them. To carry out this step, it will be enough to click with the right button on the rectangle and choose the option “Lower” that indicates that it will lower it (I have had to repeat this process twice so that the rectangle is placed under the two texts).

17.png

Remaining now like this:

18.png

One of the situations that can occur in this application is that if we repeat this action of going down, it can even be placed under the bottom. If it happens to us, the only way to put it back on top of the background is by using the undo option (Undo), “Ctrl + Z” is the quick access to the undo action.

This background will appear by opacity, that is, from totally transparent to totally opaque, so I set the value of the “Opacity” property to 0.

19.png

These are the initial settings, and the rectangle is completely invisible.

Inserting the image

To do this, we simply take the image insertion tool and click on the workspace. A navigation window will open to be able to load the image from its location.

Its original size is 80 × 80 and I have set the values ​​of 130 × 130 to make it a little bigger.

20.png

And I have placed it at its starting point. I want it to be in the center on its X axis (width), for this what I do is put in the width box “W” the value that results from half the width of the workspace, that is 600 and half the size of the image, which I have given a value of 130, that is 600/2 – 130/2 = 300 – 65 = 235

21.png

And with this last insert we already have our project at its starting point; It is normal that the background rectangle of the texts is not visible because it is completely transparent at this point.

22.png

We are going to animate our project

Animating the texts

We must respect the practice statement: we will start with the first word (which in this case enters from the left). I’m going to do a half-second animation for its input, and then it will come out in half a second as well. This word will be animated for the entire time, since between the entry end point and the exit beginning this word will move.

Let’s do it. The first of all is to locate the parameter that we need to animate to achieve our goal; in this specific case we need to animate the position value on its X axis. To do this we make sure that the cursor is at the beginning of the project and we press the rhombus to the left of the numerical value of X.

23.png

And after that, the name that we have given to this text appears on the timeline and below it the name of the value for which we have activated the animation. This application calls the position value on its X axis Left and the one on its Y axis calls it Top.

24.png

Now we place the playhead at the value 0.5 which corresponds to half a second, and at the value X of “Position” we click on the rhombus again to insert a keyframe. We see that this has been inserted at the cursor position.

25.png

Click the diamond only once to insert the keyframe. This application is very simple and if we press several times it overlaps the frames, and this can create problems for us. If we need to delete a key, we must right-click on it in the space of the timeline.

Now with this new keyframe inserted we are changing the value of the corresponding box, that is, the X of the position.

We can do this in several ways, we select the text and with the arrow, right in this case, we move the text to the desired position. We can also move the value with the mouse wheel over the numerical value of the properties. Or by entering the value manually. We do it as we do it, we observe that the keyframe changes its appearance, indicating that we have made changes, compared to the previous one.

26.png

Ok, we already have the text in its new position, but we note that if we move the playhead at this point, the word does not move progressively, but jumps. This is because we have not yet inserted the transition between frames. This is inserted by right clicking on the frame on the right and choosing the option “Create Transition”.

27.png

We see that a line appears between the two frame keys, and now the text is already moving progressively from one key to the other.

28.png

Interpolation between keys

Tweening is one of the parts that can make a difference in an animation. This is nothing more than the animation curve that the object will travel from one key to another.

To open the interpolation of the transition we must click on it. And in the properties window, the “Transition” window appears where we can choose a curve that suits our needs. In this case I have chosen the one we see in the following image. In this way what I get is that the object (in this case text) enters very quickly but slows down as it approaches the key. Although this 6-frame subtlety is barely noticeable, it is a bit more realistic than linear interpolation, which is inserted by default.

29.png

Transitioning to Exit

I have said that this animation will last 4 seconds, but to avoid the monotony of a static image this text will continue to scroll to the right. For this we create a key in the second 3.5. In the same way as before, we place the cursor at this point, insert the key and the transition and move the text slightly to the right. For this I have raised the X axis by 60 points (that is, from 100 to 160) and I have used the interpolation that we see in the following image.

30.png

With it I get an interesting effect, which is that the object arrives, but goes back a little, to go back to the right and just before leaving it goes back.

Performing the exit

We only need the exit. In the same way that we have seen so far, we insert a key at the end, in second 4, and we also insert its corresponding transition. We move the text to the outside of the screen from its position value “X”. For the output I use the following interpolation that it does as a vibration effect that works very well in this case.

31.png

In this way we have the first animated text line. Next we see the result of this first animation.

informatico.gif

Animating the second line using automatic mode

In the presentation we saw some buttons that serve to automate the animation process.

32.png

By having these activated, what we achieve is that once the first keyframe of a value has been manually inserted, any variation that we make in this value, (with the cursor in a frame where there is no key) will be created automatically. Having both options activated will also insert the transition fully automatically. We will have to change the interpolation by hand.

In this simple way I have animated in a much faster way the property of displacement in “X” of the second line of text. I have used the same tenses and the same interpolations as in the previous word. But this one goes in and out the other way around than the first one.

informatico2.gif

Animating the text background

This animation is very simple and more if we keep the buttons for automatic insertion activated.

We select the object corresponding to the rectangle that we have created in the background. We must do this from the object window, since being totally transparent it cannot be selected from the monitor. With the cursor at the beginning of the project we insert a key in the opacity, we place ourselves in the second 0.5 and we set the opacity value to 1, thus in this way the object becomes progressively visible as the key frame and its transition have been inserted automatically.

We already have the entry made. To make the output we simply go to the second 3.5, we manually insert a key here, we go to the end (which is the second 4) and we put the opacity value back to 0. In this simple way we already have the background animated.

informatico3.gif

At this point I have observed that having selected an object in their window, if it is deselected (for example by clicking on the project monitor) then, to see the properties of this object again, we must first select another object and then this one again. I guess a minor bug.

Animating the image

This will enter from the top, with the interpolation “Ease Out – Quat”. As the statement dictates, it will remain static. Now I’ll start the output half a second earlier, using the “Ease In – Back” interpolation which will cause the image to jump before falling down.

The process is very simple:

  • We insert a keyframe at the beginning (in this case on the Y axis of the image).
  • We put the cursor in the second 0.5 and we move the image on its “Y” axis to the desired place.
  • Now we put the “Ease Out – Quat” interpolation on this transition.
  • We put the cursor on the second 3.5 and manually insert another key
  • We go to the end and take the image from below through its position axis “Y”.
  • We use the interpolation “Ease In – Back” and that’s it, we have our practice finished.

Exporting the result

In this case we are making an animated gif image. So as this will be played in a loop and the duration time is defined by the last keyframe (in this particular case to leave a small pause with the black screen, half a second is enough), inserted in second 4, 5 a key to any of the objects and property, without changing anything, simply so that the gif has this small black screen 0.5 seconds. Varying its duration to 4.5 seconds.

To export the result, we go to the “File” menu, choose the “Export” option, and the export wizard opens. We give it a name with the extension .gif. Putting the extension manually is very important … if we don’t put it, nothing is exported. To export we have 4 format possibilities, gif image (.gif), and video clip extensions, .avi, .mpg and .mp4.

Result of this practice

Result.gif

View_VideoAM.png

Deja un comentario