Title of script: Logo animation
Author: Arthi
Select the Spline Tool from the Toolbox: In the Tool Options Panel, enable only the Outline Layer type. Draw a Spline that you want the arrow to move along. Click the 'Make Spline' icon in the bottom left of the Tool Options Panel to create the Spline. Deselect the last Tool and select Transform Tool, if you don't have done something with it the focus will stay in Toolbox. CAREFUL, with Polygon Tool and Spline Tool in use, Cancel the current process, and so the current draw, but stay with the selected tool.
Keywords: Synfig, Do Mirror object, Animate the logo, Spherize effect, Save and render animation
Opening Slide | Welcome to the Spoken Tutorial on “Logo animation” using Synfig. |
Learning Objectives (Slide) | In this tutorial we will learn to-
|
System requirements (Slide) | To record this tutorial, I am using
|
Open Synfig | Let us open Synfig. |
Go to canvas >> Properties Image >> Width to 1920 >> Height to 1080 | Go to canvas. Click on Properties. Under the Image, change the Width to 1920 and Height to 1080. |
Click on Other >> Locks and Links >> Tick on all the checkboxes Apply >> OK | Click on Other. Under Locks and Links, tick on all the checkboxes. Click on Apply and OK. |
Point to the canvas | First let us create a background. |
Select Spline tool >> select Create a region layer option | Select the Spline tool. Under the Tool options in Layer Type, Create a region layer option must be selected. |
Draw a triangle on the canvas | Draw a right-angled triangle covering half of the canvas as shown. |
Right-click on the first node. | Right-click and hold on the first node. The context menu opens. |
Click on Loop Spline | Right-click again and select Loop Spline. Now the loop is completed. |
Transform tool | Next, click on the Transform tool. |
We get a triangle filled with the default color. | |
Press Ctrl + S >> Change layer name to Logo-animation | Let us now save the file by pressing Ctrl + S keys. I will change the default name to Logo-animation. And save this file on the Desktop. You can give any name that you want. |
Parameters panel >> Color parameter | Next, we will change the color of this triangle. To do so, in the Parameters panel, click on the Color parameter. |
Change the color to green and the layer name to Triangle-1 | Now change the color to green and the layer name to Triangle-1. |
Duplicate the layer >> Change the name to Triangle-2 | Duplicate the layer and change the name to Triangle-2. |
Change the color to yellow | Then change the color to yellow. |
Tool box >> Mirror tool | Now go to the Tool box and select Mirror tool. |
Select all the nodes | Select all the nodes of Triangle-2 by clicking and dragging the mouse. |
Click on the top left node >> Flip the triangle vertically | Observe that in the Tool options, Vertical axis has been selected. Now click on the top left node of the triangle. Flip it in the vertical direction as demonstrated. |
Tool options >> Horizontal | Once again in the Tool options, change the axis to Horizontal. |
Flip the triangle horizontally | Now, click on the bottom left node of the triangle. Flip it in the horizontal direction as demonstrated. <<PAUSE>> |
Press Ctrl+S | Save the file by pressing Ctrl+S keys. As we go forward, I will not explicitly say so. But pls do so at regular intervals. |
Next, let us animate these 2 triangles. | |
Select the Transform tool | Select the Transform tool. |
Click on Turn on animate editing mode icon | Click on Turn on animate editing mode icon. |
Go to 20th frame >> Add a keyframe | Type 20 in the current frame box and press Enter. In the Keyframes panel, add a keyframe. |
Go to Zeroth frame | Come back to the zeroth frame. |
Move the yellow triangle outside the canvas | Click on the green dot of the yellow triangle and move it outside the canvas, as demonstrated. |
Move the green triangle outside the canvas | Do the same for the green triangle, too. |
Click on Turn off animate editing mode icon | Click on Turn off animate editing mode icon. |
Play the animation >> Press Ctrl + S | Move the Time cursor between zeroth and 20th frame to check the animation. <<PAUSE>> |
Point to the Spoken Tutorial logo | Next, let us import the Spoken Tutorial logo. |
Point to the Spoken Tutorial logo | I have the logo in my Documents folder. |
Slide | You can find this logo file in the Code files link that is provided along with this tutorial. Please download and use it. |
File >> Import >> Click on Group icon | Go to File and click on Import. Since I want to give Rotate effect to the layer, we will first group the logo layer. |
Change the Group layer name to ST-Logo >> Reduce the logo size | Change the Group layer name to ST-Logo. Reduce the size of the logo using the orange dot in the handle. |
Click on Turn on animate editing mode icon >> Zeroth frame | Now click on Turn on animate editing mode icon. Go to the zeroth frame. Then click on the drop-down list of ST-Logo group layer and select logo.png layer. |
Parameters panel >> Alpha amount to 0 | In the Parameters panel, change the Alpha amount to zero. <<PAUSE>> |
Right clickon logo.png layer | Next let us give rotation effect to the logo. For that, first right-click on logo.png layer. |
New layer >> Transform >> Rotate | Then click on New layer, Transform and lastly on Rotate. |
Go to 50th frame >> Add a keyframe | Now go to the 50th frame. In the Keyframes panel, add a keyframe. In the Parameters panel, change the rotation amount to 360. Vim markdown. |
Select logo.png layer. | Again select the logo.png layer. |
Go to 60th frame >> Move the logo a little above | Now go to the 60th frame. Move the logo a little upward, as demonstrated. <<PAUSE>> |
Click on Turn off animate editing mode icon | Click on Turn off animate editing mode icon. |
Click outside the canvas | Click outside the canvas to deselect the logo. |
Click on Text tool | Next let us type some text. So, click on the Text tool and click on the canvas. |
Type Spoken Tutorial >> Click on Ok. | A text box appears. Here I will type Spoken Tutorial. Click on Ok. |
Parameters panel >> change the color to black >> size to 100 | In the Parameters panel, change the color of the text to black and size of the text to 100. |
Change the layer name to Spoken Tutorial | I will change the layer name to Spoken Tutorial. |
Click on the Transform tool >> Move the text outside the canvas | Click on the Transform tool and select the green dot of the text. Move the text outside the canvas in the downward direction as demonstrated. |
Click on Turn on animate editing mode icon | Click on Turn on animate editing mode icon. |
Go to 70th frame >> Move the logo up | Now go to the 70th frame and move the text upwards and place it below the logo. |
Click on Turn on animate editing mode icon | Once again, click on Turn off animate editing mode icon. |
Group the Spoken tutorial layer >> Change the layer name to ST-Text | Now group the Spoken tutorial layer and change the group name to ST-Text. |
Click on drop-down ST-Text group layer. | Click on the drop-down list of ST-Text group layer. |
Right click on Spoken Tutorial layer >>Newlayer >> Distortions >> Spherize | Right-click on Spoken Tutorial layer and then on New layer. Now click on Distortions and then on Spherize. |
Keep the Spherize effect on the starting of the text | Click on the middle green dot of the Spherize effect and drag to the starting of the text. Click and drag the left green dot to make the effect bigger. |
Click on Turn on animate editing mode icon | Once again click on Turn on animate editing mode icon. |
Go to 100th frame >> Move the effect to the end of the text | This time go to the 100th frame and move the effect outside the canvas. |
Click on Turn off animate editing mode icon | Now click on Turn off animate editing mode icon. |
Press Ctrl + S | Lastly, we will render our logo animation. Before that, save the file. |
Click on File >> Render. | Now go to File and click on Render. |
Extension to avi. Target to ffmpeg. Quality to 9. Click on Render button | Change the Extension to avi. Change the Target to ffmpeg. Increase the Quality to 9. And click on the Render button. |
Play the animation using Firefox | Let us now check our file. Go to Desktop. Right-click on the output and play using Firefox web browser. |
Logo animation | Our logo animation looks like this. You can use your own creativity and create in a different method, too. |
Logo animation | With this we have come to the end of this tutorial. |
Summary | Let us summarize. In this tutorial, we learnt to
|
Assignment (Slide) | Here is an assignment for you.
|
Completed assignment | Your completed assignment should look like this. |
About Slide | The video available at the following link summarizes the Spoken Tutorial project. Pls watch it. |
About Slide | The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us. |
About Slide | Spoken Tutorial Project is supported by NMEICT, MHRD, Government of India. More information on this Mission is available at this link. |
Acknowledgment | This is Arthi along with the Animation team from IIT Bombay, signing off. Thanks for joining. |
Contributors and Content Editors
Arthi, Nancyvarkey
Retrieved from 'https://script.spoken-tutorial.org/index.php?title=Synfig/C3/Logo-animation/English&oldid=31371'
Language: | English • español • français • italiano • português • română • русский • 中文(中国大陆) |
Navigation: | << • Manual • >> |
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.
Start Synfig Studio — a new animation will be created. If you already have Synfig Studio started, select 'File → New' in the toolbox.Cisco anyconnect chromebook. 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.
Shape Origin, transformation and link Be certain that the shape's origin is set to '0,0' .. this will save you from headhache in further steps. |
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.
Note Previews are often pixelated and blurry, but the final render will be clean-cut. Higher quality previews are obtainable by using higher values for 'Zoom' and 'Frames per second' in the preview dialog window. |
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.)
I'm going mad, can't link the stem and the petal! The problem is trivial. The ‘origin’ parameter of ‘Stem’ and ‘Petal’ layers is different. They should be same, because you’re linking origin of layer with some vertex that has its own layer’s origin.Set both origins to the same values (0,0), then link. |
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'.
Tip You can also change waypoint Out interpolation by right-clicking on it and selecting 'Out → 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.
Spline Tool For Carb Adjustment
Synfig Spline Tool
Language: | English • español • français • italiano • português • română • русский • 中文(中国大陆) |
Spline Tool Synfig Software
Retrieved from 'https://wiki.synfig.org/index.php?title=Doc:Flower_Animation&oldid=22300'