Spline Tool Synfig

admin



Spline

  1. Spline Tool For Screens
  2. Spline Tool Synfig Pro
  3. Spline Tool Synfig
  4. Synfig Spline Tool
  5. Spline Tool Synfig Free
  6. Spline Tool Synfig Software

Title of script: Create Plant animation

Author: Shital

Synfig

Jun 29, 2020 Synfig Studio; Operating system: Linux, Mac OS X, Windows. Description: Synfig Studio is an open-source, free timeline-based, and 2D vector graphics computer animation program. Synfig Studio is a real back-end and front-end application, that allows you to design your animation in front-end and render it in backend at a later time even on. Synfig provides 50+ layers to create artwork and animation of any complexity. Choose from various layer types: geometric, gradients, filters, distortions, transformations, fractals and others.

Keywords: Draw and animate shape, Insert item, Mark active point as On/off option

Select Spline tool. Make sure that only 'Create Region Layer' is selected. In the toolbox, set the fill colour to green. Draw a triangle: Tool box Spline tool. Now, draw a triangle with the Spline tool as demonstrated here. Canvas Loop spline Make Spline. We should close this shape after drawing the 3 vertices. To do so, right-click on. Spine, DragonBones Pro, and Spriter are probably your best bets out of the 14 options considered. 'Simplified UI allows for an easy learning curve' is the primary reason people pick Spine over the competition. This page is powered by a knowledgeable community that helps you make an informed decision.

Split tangent, Create a Plant animation


Spline Tool For Screens

Visual cue
Narration
Opening Slide Welcome to the Spoken Tutorial on “Create a Plant animation” using Synfig.
Learning Objectives (Slide) In this tutorial, we will familiarize ourselves with animating shapes in Synfig.


We will learn to-

  • Draw shapes and group layers
  • Add avertexby using Insert item
  • Split tangent option
  • Mark active point as off option and
  • Animate the shapes

Here we will create a Plant animation.

System requirements

(Slide)

 To record this tutorial, I am using-
  • Ubuntu Linux 14.04 OS
  • Synfig version 1.0.2
Go to Dash home >>“Synfig” Let us open synfig.

Go to Dash home and type Synfig.

Click on Synfig logo You can open Synfig by clicking on the logo.
Slide Plant animation. Now let us start creating the Plant animation.
Synfig interface We need to first create the graphics in Synfig.


We will create a plant with a flower.

Let us save our Synfig file.
Go to File >>Click on Save


Select the folder to save.


Type filename as Plant-animation >> click on Save.

 Go to File and click on Save.


Select the folder in which to save.


Type the filename as Plant-animation and click on the Save button.

Draw a white rectangle >> name layer as Background Draw a white background layer before you draw any other shape.

Change the name of the layer as Background.

Tool box >>Spline tool >>Colour palette choose the colour>>Fill tool Go to toolbox. Select Spline tool.


Make sure that only 'Create Region Layer' is selected.


In the toolbox, set the fill colour to green.

Draw a triangle:

Tool box >>Spline tool

Now, draw a triangle with the Spline tool as demonstrated here.
Canvas >>Loop spline >> Make Spline.


 We should close this shape after drawing the 3 vertices.


To do so, right-click on the first vertex and choose 'Loop Spline'.


This will trace a green triangle shape.

To make a rounder triangle, we have to tweak the tangent handles a bit.
Toolbox >> Transform tool >> Right click on vertex >> Split tangents Click on Transform tool and then right-click on each vertex.


Select Split tangents so that the tangent handles of each vertex can be moved separately.

Layers panel >>Click on layer >>press Enter Observe the Layers panel.


A new layer is formed. Let’s name it as Stem.

Save the file. Press Ctrl and S keys to save the file.
Click on Turn on animating mode


 Now we will learn to animate the shape of the stem.


Click on Turn on animate editing mode icon.

Layers panel >>Click the layer Select the shape by clicking on the Stem layer.
Point to Toggle tangent handles Make sure the Toggle tangent handles option is ON at the top of the canvas.
Time track panel >>Place the cursor on 24th frame Then, go to the Time track panel and place the Time cursor on the 24th frame.
Toolbar>>Spline tool>> Canvas >>Use Tangent handles Select the Transform tool.


Click on the top vertex of the stem and drag it upwards on the canvas, as demonstrated.


You can use + and - sign for zoom in and zoom out respectively.

Ruler >> canvas >>Guidelines

Drag guidelines from horizontal ruler on canvas


 Next, go tothe Ruler.


Drag five Guidelines onto the canvas, as shown.


<<Pause>>

Save the file. Press Ctrl and S keys to save the file.
Toolbar >> Click on Transform tool >>Canvas >> Right click on shape>>

Insert item and keep shape

 On the Toolbar, click on the Transform tool.


On the canvas, right-click on the shape.


Then click on Insert item and keep shape.

Add 10 other vertices on the canvas Add 10 more vertices on the Guidelines as done here.


Do this by clicking on Insert item and keep shape.

Right-click >> select Split tangents. Now, right-click on each vertex.


Select Split tangents so that the tangent handles of each vertex can be moved separately.

Time track panel >>Place the cursor on 23th frame >>Parameter panel select the added vertices>>


 Then go tothe Time track panel and place the Time cursor on the 23rd frame.


Go to parameter panel.


Click on the triangle icon of Vertices to open the group.

Check the newly added Vertices.


We have to make them inactive on the 23rd frame.

Canvas Right click on vertices>> Mark active point as a off Right-click onthe newly added vertices.


Click on Mark active point as off.

Do likewise for all the newly added vertices.
Save the file. Press Ctrl and S keys to save the file.
Time track panel >>Place the cursor on 30th frame >> Once again, go to the Time track panel and place the Time cursor on the 30th frame.
canvas >>Move the vertices for starting part of leaves Come back to the canvas.


Move the verticesto create the starting part of the leaves, as demonstrated.

Time track panel >>Place the cursor on 37th frame >> canvas >>Move the vertices for leaves as demonstrated. Again, go to the Time track panel and place the Time cursor on the 37th frame.



canvas >>Move the vertices for starting part of leaves Let’s come back to the canvas.


Move the vertices to create the leaves, like this.


Remember mark active point as off for newly added vertices only.

Time track panel >>Place the cursor on 45th frame>> Move the top vertex as demonstrated.


 Back to the Time track panel.


Place the Time cursor on the 45th frame and move the top vertex, as shown here.

In the same way, we will add two more leaves in the Stem layer itself.
Time track panel >>Place the cursor on 80th frame>> Move the vertices as demonstrated.


 Go tothe Time track panel and place the Time cursor on the 80th frame.


Move the vertices of the stem, to form the green coloured sepals around the bud.


<<PAUSE>>

Time track panel>>Time cursor on 90 th frame>> Keyframes >>Add new keyframe


 Once again, go to the Time track panel and place the Time cursor on the 90th frame.


Then go to Keyframes and add a new keyframe.

Tool box >>Spline tool >>Colour palatte choose the colour >> Fill tool Now, click onthe Spline tool.


Make sure that only 'Create Region Layer' is selected.


In the toolbox, set the fill colour to pink.

Draw as shown. Then draw a bud with the Spline tool, as demonstrated.
Remember to close this shape after drawing the 3 vertices.
Tool box >>Spline tool >> canvas >>Loop spline To do so, right-click on the first vertex and choose 'Loop Spline'.
Adjust the vertices and create bud shape. Note that the trace of the form is now closed. Adjust the vertices and create bud shape.
Name as Bud >> Place it below Stem layer Change the layer name as a Bud. Place the Bud layer below the Stem layer.
Time track panel >>Place the cursor on 99th frame>> Move the vertex as demonstrated.


 Again, go to the Time track panel and place the Time cursor on the 99th frame.


Move the top vertex of the bud, as done here.

Save the file. Press Ctrl and S keys to save the file.
Layers panel >> Select Stem layer Now, go to the Layers panel and select the Stem layer.
>>Canvas >> Right click on shape>>

Insert item and keep shape

 After this, come back to the canvas and right-click on the stem shape.


Add a vertex by clicking on Insert item and keep shape.

Likewise, we have to add 4 more vertices.

Place the time cursor on 98th frame and mark the active point off for these vertices.

Canvas Move the vertices as demonstrated, so that we get a shape like this.
Save the file. Press Ctrl and S keys to save the file.


It’s a good habit to save our work frequently.


As we proceed ahead, I won’t mention this explicitly.

Pls do so yourself at regular time intervals.

Time track panel >>Place the cursor on 100th frame>> Layers panel >> Select the bud layer>> Go back to the Time track panel and place the Time cursor on the 100th frame.


Go to the Layers panel and select the Bud layer.

Click on Duplicate Click on Duplicate twice.


Name the layers as petal_1 and petal_2.

Time track panel >>Place the cursor on 108th frame>> Move the vertices as demonstrated. Place the Time cursor on the 108th frame.


Move the nodes of the petals, as demonstrated.

Time track panel >>Place the cursor on 115th frame>> Go back tothe Time track panel and place the Time cursor on the 115th frame.
Layers panel >> Select the petal_1 and petal_2 layers Go to the Layers panel and select both the petal_1 and petal_2 layers.
>> Click on Duplicate Click on Duplicate.


Name new layers as petal_3 and petal_4.

Time track panel >>Place the cursor on 120th frame>> Move the nodes as demonstrated.


 Let’s come back to the Time track panel.


Place the Time cursor on the 120th frame.


Move the vertices of the 3rd and 4th petals, as demonstrated.

Layers panel >> Select the Petal_3 and petal_4 layers Go to Layers panel and select both the petal _3 and petal_4 layers.
>> Click on Duplicate


 Click on Duplicate.


Name the new layers as petal_5 and petal_6.

Time track panel >>Place the cursor on 140th frame>> Move the vertices as demonstrated.


 Back on the Time track panel, place the Time cursor on the 140th frame.


Move thevertices of the 5th and 6th petals, as demonstrated.

Time track panel >>Place the cursor on 108th frame >> Again, go to the Time track panel place the Time cursor on the108th frame.
Toolbar >>Transformtool Then go to the Toolbar and click on the Transform tool.
Select the stem >> move the vertices of the sepals Select the stem part of the drawing.


And move the vertices of green sepals of the bud, as shown here.

Time track panel >>Place the cursor on 128th frame Back on the Time track panel, place the Time cursor on the 128th frame.


Move theverticesof green sepals of the bud, as demonstrated.

Time track panel >> Layers panel>>

Parameter panel

 Place the cursor on 0th frame. Select Bud layer.


Go to Parameter panel. Change the Amount to 0.


Similarly do for petals layers.

Let us do the same for 89th frame.
Canvas >>Click on Turn off animate editing mode Click on Turn off animate editing mode icon.
Click on Seek to begin >>Click on Play Click on Seek to begin at the bottom of the canvas.


Play the animation by clicking Play icon.

Layers panel>>Toolbox>>Canvas Now let's add a gradient in background layer..
Layers panel>>Toolbox>>Canvas Select Background layer. Click on gradient.


Draw gradient on Background as demonstrated.


Set the outline colour to brown and fill colour to blue.

Ctrl + S Let us now save our Synfig file.
Now we will check the preview.
File >> Click on Preview >>Preview option Go to File and then click on Preview.
Quality >>FPS Set the Quality as 0.5 and FPS as 24.
Preview button >>Play


 Click on the Preview buttonand then click on the Play button.


We can see a preview of the animation on the screen.

Close Preview window. Close the Preview window.


<<PAUSE>>

Now let us render the animation.
File >>Render >>Render setting window >> Choose >> Save render as window


 To do that, click on File and then on Render.


Click on Choose and open the Save render as window.

Desktop >> Plant animation folder >> TYpe a Name >> Click on Ok


 Click on the location where you want to save the rendered file.


Change the name to plant-animation.avi

Click on Target >> Select ffmpeg Click on Target drop down menu and select the extension as ffmpeg.
Click on Time >> Click on End time >> Click on Render Next, click on the Time tab and change the End time to 150.


Then click on Render.

Let us check our animation.
Desktop>> Double Click on Plant animation folder >> Select plant-animation.avi


Go to Desktop.


Open the folder in which we saved our file.


Now select plant-animation. avi.

Right-click and play the animation using Firefox web browser.


<<PAUSE>>

With this we have come to the end of this tutorial.
Summary (Slide) Let us summarize.

In this tutorial we learnt to animate a plant in Synfig.


We also learnt to


  • Draw shapes with Spline tool
  • Add a node by using Insert item
  • Split tangent option
  • Mark active point as off option
  • Animate the shape
Assignment

(Slide)

 * Draw simple cartoon face with long hair filled with different colors
  • Animate the hairs.
Completed assignment * Cartoon face with animated long hair
About Slide The video at the following link summarizes the Spoken Tutorial project.


Pls watch it.

Workshop slide


 We conduct workshops using Spoken Tutorials.

And give certificates.


Please contact us.

Spoken Tutorial Forum slide Please post your timed queries in this forum.
Acknowledgment Slide Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
This is Shital along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.


Thanks for joining.

Contributors and Content Editors

Arthi, Nancyvarkey, PoojaMoolya, Shital-joshi

Retrieved from 'https://script.spoken-tutorial.org/index.php?title=Synfig/C3/Plant-animation/English&oldid=54307'

Title of script: Logo animation

Author: Arthi

Keywords: Synfig, Do Mirror object, Animate the logo, Spherize effect, Save and render animation

Spline Tool Synfig Pro


Spline Tool Synfig

Visual cue
Narration
Opening Slide Welcome to the Spoken Tutorial on “Logo animation” using Synfig.
Learning Objectives (Slide) In this tutorial we will learn to-
  • Create a Mirror object
  • Animate a logo
  • Create Spherize effect
System requirements

(Slide)

To record this tutorial, I am using
  • Ubuntu Linux 14.04 OS
  • Synfig version 1.0.2
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.

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

  • Create a Mirror object
  • Animate a logo
  • Create Spherize effect
Assignment

(Slide)

Here is an assignment for you.
  • Create a logo animation using the Synfig logo.
  • The logo has been given to you in the Code files link.
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.

Synfig Spline Tool

Contributors and Content Editors

Spline Tool Synfig Free

Arthi, Nancyvarkey

Spline Tool Synfig Software

Retrieved from 'https://script.spoken-tutorial.org/index.php?title=Synfig/C3/Logo-animation/English&oldid=31371'