Aphunter841

1. How To Create Animation In Synfig Studio Lesson 2
2. Is Synfig Studio Safe
3. Creating Animation In Synfig Studio Udemy Free Download

Straightforward, Adobe-style UI. Many tutorials to master the program. Creating an animation in Synfig Studio is really easy. Means to change a drawing — you just need to create the first stage and last stage of a change, and Synfig takes care of the steps in between. Let’s look at a simple example.

Basic settings

In the previous tutorial, you have learned to create shapes with the Spline Tool, in this tutorial we will learn how to create a simple animation of a growing flower using Splines.

How To Create Animation In Synfig Studio Lesson 2

First, we need to create a gradient for a background. Click on the outline and fill colors in the Toolbox to select the colors our gradient will have. You can also directly edit the gradient by clicking the gradient line in the toolbox.

Select the Gradient Tool and drag your cursor vertically across the canvas to fill it with the gradient.

Next, select the Spline Tool and in the Tool Options Panel, make sure that only 'Create Region Spline' is checked. In the toolbox, set the fill color to green. Draw a kind of triangle with the Spline tool. To close the shape after drawing the 3 vertices, right click on the first vertex and choose 'Loop Spline'.

Now that the trace of the form is closed, you can generate the proper form by selecting another tool or by pressing the button with the gear icon at the bottom of the Tool Options Panel.

This will be the base of the stem. You can tweak the tangent handles (red dots) a bit to make a rounder triangle. With the Transform Tool, right-click on each vertex and select 'Split Tangents', so the tangent handles of each vertex can be moved separately.

We're done with the basic settings.

Animate the stem

In the Canvas Menu, select the caret menu icon in the upper left hand corner, where the rulers intersect, and then select 'Edit → Properties'. Go to the 'Time' tab, set the 'End time' to '6s' and click OK button.

Click at the beginning of the timetrack ('0f'), then, in the Keyframes Panel (the one with a key icon) click the button with a '+' icon (add a new keyframe).Keyframes allow us to settle down the scene; i.e. on a keyframe, every element of the scene will have all its properties remembered.Click again on the timetrack, at '4s 12f' (ie 4.5s at 24 fps).Press the green man at the bottom right of the canvas (or whatever icon you have there, depending on your icon theme) to switch to the Animate Editing Mode (the man is now red).

With the Transform Tool, select the green sprout, and move the upper vertex up to make a stem. You can play with the vertex handles to bend the shape a bit if you want.

While you are still at '4s 12f', right-click on the stem border, close to the top, and choose 'Insert Item (smart)'. Do the same on the other side of the stem. Right click on those new points and choose 'Split Tangents'. Then try to make a shape that looks like the one on the image, to create the flower bud.

Now if you click on '2s' (for example), you'll see that the shape of the bud is slightly visible, even if the sprout is rather small, and even if the bud handles are invisible.

Let's say we want the bud to appear only at 3s 12f, and be full size at 4s 12f.

Click on '3s 12f' on the timetrack. Now take a look at the 'Parameters' and 'Timetrack' panels at the bottom. You'll see that each parameter in the Parameters Panel matches a row in the Time Track Panel. The last parameter is the vertices list. Click on the small arrow on the left to unfold the list. You should see something like this:

Each brown diamond (or waypoint) stands for a recorded value (here the vertices positions were recorded at 0f with the keyframe, and at 4s when we moved some vertices or vertices handles). The two vertices we added to make the bud are marked with green and red vertical line on their 0s and 4s waypoints. Right-click on them in the parameters list, and select 'Mark Activepoint as Off'.

The panel should now look like this, the grayed part being the part where the bud vertices have no effect on the stem.

For example if you click on '2s' or even '3s' now, the bud shape is not visible. It starts to appear only a little after 3s 12f.

However, the shape of the stem may not look very nice during its growth between 0 and 4s. Make sure you're still in Animate Edit Mode, and tweak the shape at various moments in time, to get something you like.

The animation of the stem is now finished, but it still lacks the petals. You can watch a preview of your animation: Go to 'File → Preview', validate, wait for the preview to be generated, and watch.

Adding the petals

Now leave the 'Animate Editing Mode' by clicking on the red circle at the right bottom of the canvas.

Change the fill color to pink, and create a petal with the Spline Tool. You'll notice that the green handle that allows easy movement of a shape is at the center (Origin : '0,0') of the canvas. Select all the vertices of the petal with CtrlA and move them close to the green handle (with the Transform Tool), as shown.

Then drag the green handle very close to the top of the bud. Hit CtrlA again to select all vertices of the petal and tweak it a bit with Rotate Tool. Also, in the Layers Panel select the petal layer and put it under the stem layer.Click on the petal to select it, then ctrl-click on the stem. Both objects should be selected.

Now click on the vertex at the top of the stem and ctrl-click on the green handle of the petal (both should appear in a lighter color, as they are selected). Then right-click on the stem top vertex, and select 'Link'. The petal will move a bit as the green handle is snapped on the stem vertex.

Now that there's a link between the petal and the top of the stem, when the top of the stem moves, the petal will follow the move. (And if the green handle of the petal moves, the top of the stem will move, but we don't want to do that here.)

On the Layers Panel, select the newly created Petal layer and duplicate it (with the third button, on the bottom of the Layers Panel). On the canvas, press CtrlA to select all the vertices of the duplicated petal, and move them a little, so the petals are no longer overlaid. (Don't move the green handle, just the orange ones). Repeat the process several time, to get something looking like this image.

Note that the duplicated petals are also linked to the stem.If you go back to the first keyframe, you'll see that the petals are visible.We don't want that. We want the petals to appear and bloom almost at the end of the growth.

Hiding the petals

Let's say we want the petals to appear a little after 4 seconds in the animation, and be full size at 5 seconds, instead of being visible and full size all the time.

Switch to 'Animate Editing Mode' again by clicking on the green circle at the bottom right of the canvas. But if we will go to '4s' and modify them, then they also change at '5s'. Because the shape/position of the petals is not fixated at this moment of time by any waypoints or keyframes. That means that we need a keyframe at '5s'. On the timetrack, click to place the cursor at 5 seconds. On the Keyframes Panel, click on '+' to add a new keyframe.

Now click on '4s', and on the Layers Panel, select all the petals layers (with ctrl+click), then press CtrlA to select all the petals vertices. Scale them down with the Scale Tool, and move them, so they are hidden by the stem, as shown.

From 4s to 5s, the petals will now appear and bloom. But notice that we have a keyframe at 0s which also remembers petals shape. That makes the problem — the petals are still visible from the first keyframe to the 4s keyframe.We could either make the petals tiny and hidden tweaking their size on every frame from 0s to 4s, or we could make them invisible on this interval.

Let's choose the second solution. To make things easier, we are going to group the petal layers into an Group Layer. With all the petal layers selected, right-click on them on the Layers Panel and select 'Group'. You can rename the layers to make things more understandable.

Select the 'Petals' Group Layer and jump to the first keyframe. In the Parameters Panel, set the 'Amount' value to '0'. The petals are now invisible on that keyframe.Note that two waypoints were added in front of the 'Amount' parameter, one at 0s and the other at 5s. Drag the 5s waypoint to 4s, so that the opacity of the petals will be 1 at 4s.

There is still one problem left: from 0s to 4s, the opacity of the petals slowly increases, making the petals visible when they shouldn't. To solve this, we will change the Amount interpolation method. Right click on the Amount waypoint at 0f, and select 'Edit'. A new dialog will appear, in which you can choose the In and Out interpolation. Set the Out Interpolation to 'Constant'.

This means that after that waypoint, the Amount value will remain constant, until another waypoint is encountered. So from 0f to 4s the Amount value will be equal to 0, and at 4s it will suddenly changed to 1, and make the petals visible, as expected. Alternatively, we could have achieved the same effect by setting the In Interpolation of the waypoint at 4s to 'Constant'.

Notice how (half of) the waypoint changes from a green circle (meaning smooth animation of the amount parameter) to a red step (meaning that the amount parameter is suddenly stepped).

Now you're done.The stem grows for 4.5 seconds and then stays still the last 1.5 seconds.The petals are hidden until 4 seconds, and then grow quickly between 4 and 5 seconds, and stay still the last 1 second too.

Click on 'File → Render' to render your animation. Select any format you want, and ensure that 'Use current frame' option is unchecked (otherwise, one frame only will be rendered).

What's next

Synfig Studio have a Skeleton animation system, in the next step you will learn how to setup a basic skeleton.

This tutorial explains how to create a bouncing ball animation, focusing on ball movement. Cartoon-like balls also have a very deformed shape while traveling and especially when they hit the ground. This could be covered in a second stage.

Different approximations for the same result

With Synfig there are four ways to create a bouncing ball:

1. Do the bouncing ball manually. This involves creating several Waypoints and adjust them to match a parabolic movement (in time and space).
2. Use the interpolation parameters of the waypoints when they are set to TCB interpolation. This drastically reduces the amount of waypoints and also makes the timing of the bounces easier.
3. Use the Link to Spline feature. If you draw the path of a bouncing ball using a spline it is easy to make the ball follow the path even changing the bouncing speed.
4. Create the mathematical equations to do that. Make several parabolic shots at the right place and the right time to simulate a bouncing ball. It would be a little tricky but probably should be the most accurate one.

Manual Ball Bounce

The rule to make the ball bounce manually is to draw in a paper the desired bounce. Then mark the horizontal line with regular intervals and match the curve intersection in vertical. See the image:

You can notice that having regular intervals in the horizontal axis gives irregular intervals to the vertical axis. It is due to the nature of the curve.

Once the points are located in a 2D grid then it can be drawn directly in Synfig doing use of the grid (F11). After drawing them we normalized the values to be completely symmetrical. That gives the following table:

You can see that the X position is increasing in steps of 10.0 and the Y position reproduces a parabolic curve.

To proceed with more than one bounce just duplicate the waypoints (place the cursor at the right place right click over the waypoint and duplicate) reproducing symmetrical movements. You should need to edit the X values manually to decrease by 10.0 for each new waypoint.

This is the resulting graph for the manual approximation to the ball bounce.

The lower points are not peak points. To do that you need to insert more waypoints in intermediate places around the lower frame (20f). TRy it by your self with the attached file.

The resulting animation and file are those ones.

File: Media:manual.sifz

Is Synfig Studio Safe

Ball Bounce using waypoints interpolations

The TCB interpolation mode allows modify the Tension, Continuity, Bias, and Temporal Tension values of the waypoint. So you can create easily smooth or peak aproximation to the value of the ValueNode in the waypoint position.

This time I would use the same values for the highest and lower points of the table before. But I won't use more than one waypoint for each extreme position. The rest of the curve would be done using the TCB parameters.

The table of waypoints gives this result:

As you can see the number of points is reduced drastically.

In you only use a default TCB interpolation it would give you a poor result. Look at the graph:

But if you edit the TCB parameters this is the result you obtain:

The TCB parameters are the following:

That's the resulting animation:

And the sample file: Media:waypoint-2.sifz

Notice that the curve at 0f and at 80f are not properly formed. It is due to the fact that the TCB parameters needs to belong to an intermediate waypoint to have effect. If the waypoint is extreme (the end or the beginning of the animation for the parameter it cannot modify the curve). To solve that you should split the X and Y coordinates of the 'Origin' and apply a Ease In/Out interpolation to those Y coordinate and leave the X coordinate with the current interpolation. So please consider only the bounces between the two black vertical lines.

Notice also that you can make the highest point more flat increasing the Temporal Tension parameter (a good value can be 0.5). This would produce a deformation to the X coordinate so you need to separate both coordinates to do that. Try it by your self editing the attached file. I have left the highest point to have the default values.

Here is a comparison of both bounces a the same time.

With this approximation you can easily modify the Y coordinate of the highest points. The interpolation would take care of the rest. With the manual interpolation you should calculate all the x/y coordinates od the resulting curve for a lower bounce. You can record the values into a calculus sheet and just multiply the Y value by a reduction factor. Anyway you have to enter all the value pairs one by one.

Ball Bounce following a path

Before reading this section you should be familiar with Following a Spline tutorial.

The use of a path to perform the bounce has some advantages:

• You can see the complete ball bounces in one shot.
• You can make the ball rotate along the path (this would allow to make bounces of non round objects).
• You can make bounces to vertical, horizontal or any kind of walls you like. Just draw the path.

and some disadvantages:

• It is difficult to control the horizontal movement. It is due to the parameter that moves the object through the path is linked to the number of vertices of the path. If the path has five vertices and it is an open spline the parameter that defines the path has the following values when define each vertex: 0.0 for the first, 0.25 for the second, 0.5 for the third, 0.75 for the fourth and 1.0 for the fifth (and last) independent of the length of the spline section between vertices.

The first thing you have to do is define the path that the bouncing ball is going to describe. I've used the previous manual animation to draw this spline:

(You can notice that there are some missing tangents. It is due that I've linked the parallel tangents of the peak points of the path. It is more easy to setup because you only have to control two tangents to control all the tangents at the same time.)

Once defined then create a circle or the ball you want to move and place it centered at the origin (0,0). I prefer that you group it and use the group layer origin parameter to make the animation. Once grouped select the spline you have created and the group layer of the grouped ball and select the Origin handle of the group layer. Then right click over the spline (avoiding any handle) and select 'Link to Spline'. You can see my green ball in the figure.

Once linked you can drag it and it will stick to the spline.

Now expand the Origin parameter of the group layer of the grouped ball and search for the Amount parameter. This parameter is the one you need to animate to move the ball over the spline.

Considering the example, the spline has 6 vertices and 5 spline sections. If you are following the tutorial try to set that parameter to 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 and you will see that the ball moves to each vertex. Now create the following waypoints:

This coincides with the main waypoints of the last method we have seen. But look what's the result:

Its X movement graph looks ugly. It is not a straight line that means that the horizontal velocity is not constant. To solve that you have to insert more waypoints in the middle.

To do that I've uses the animation of the second method to try to match the position at regular intervals. This is the table I've needed.

Now look to the graphs again and notice that the X travel is now a straight line.

This is the resulting animation and the sifz file.

The sample file: File:Ball boune tutorial Spline.sifz

It is supposed that the small yellow ball should follow the red one all the time but you can see that is goes a little faster some times and a little slower other times. It is due to I need to use different times for the adjusting waypoints or add more of them.

Mathematical emulation

My approach is to imagine x and y movements as independent, so the x is simple (uniform rectilinear movement) and the y a little more complex. The first idea was to use the classical equations for acceleration (and gravity), but this would lead to need one equation per step (up-down or down-up). The ultimate idea is to use the sine function to describe the position at each timepoint, so... one equation would last forever!

Steps:

• Origin converted to composite
• X manualy animated to go linearly from left to right of the canvas: simple.
• Y converted to sine
• Sine Amplitude set to 1
• Sine DEG to time loop, and then:
• Timeloop link to 0 at 0 seconds and 180 at 1 second
• Timeloop duration: 1 second
• Rest timeloop parameters left to 0

I guess the result is almost correct although the shape of the curve is not perfect, but I don't know why. Upgrades might make the effect better, such as the ball bouncing less each time with a more complex function.

Anyone want to try? :)

Creating Animation In Synfig Studio Udemy Free Download