Difference between revisions of "Synfig/C3/Cutout-animation/English"

Latest revision as of 12:22, 16 October 2020

Title of script: Create Cutout animation

Author: Shital

Keywords: Import image, Mask with Cutout tool, Create a Cutout animation

Visual cue	Narration
Opening Slide	Welcome to the Spoken Tutorial on “Cutout animation” using Synfig.
Learning Objectives (Slide)	In this tutorial we will learn to Import an image Use the Cutout tool on that image and Animate the cutout shapes
System requirements (Slide)	For this tutorial, I am using Ubuntu Linux 14.04 OS Synfig version 1.0.2
In the Synfig interface	We are in the Synfig interface.
	Let us first of all save our Synfig file.
File >> Save >> Desktop >>Name>> Save	Go to File and click on Save. I will select Desktop as the location. Then click on Name and change it to Cutout-animation.
	Now let us start creating the cutout animation.
Synfig interface	We need to import the image in Synfig.
Go to File >> Click on Import >>Please select a file window.	For that, go to File and click on Import. Open Please select a file window.
Desktop >> select Painting.png >> Click on Painting.png >>Import	And select Painting.png. Then click on Import.
	We get the image on the canvas.
Desktop >> Select paint.png >> Click on Paint.png >>Import	Similarly, import the Paint.png file also.
	We get two layers named Paint and Painting.
Scale and adjust	Scale and adjust the images as demonstrated.
Layers panel >>Select a Painting. layer >> Click on Duplicate layer icon	We need five copies of the painting layer for this animation. So select the layer and click on Duplicate layer icon.
Repeat and create 4 layers	Repeat 4 more times. We now have the first Painting layer and four copies of the same.
Layer’s panel	Change the names of the layers as- Girl's head, Girl's upper body and bucket, Girl’s legs, Boy’s hand, Boy’s body. Turn the layers off by unchecking the Show/Hide box.
Select Girl's upper body and bucket layer >> turn on	Select the Girl's upper body and bucket layer and turn on that layer.
Go toToolbox >> Click on the Cutout tool >> draw an outline	Go to Toolbox. Click on the Cutout tool. And mask this layer by drawing an outline as demonstrated. We can adjust the mask by moving the nodes of mask.
Slides	One-by-one turn the layers on and use the Cutout tool to mask the other layers likewise.
Slides	With the Cutout tool, we can create freehand selection to make a mask on the imported image.
Point to the layer on canvs	Similarly mask the paint.png layer as well.
Save the file	Now press Ctrl and S keys to save the file.
Layers panel >> Click on Boy's hand	Go to Layers panel and click on the layer- Boy's hand.
Boy's hand >>Right click on Mask layer	Right-click on Mask layer of this layer.
>> New layer >>Transform	Go to New layer and then to Transform. Now click on Rotate.
Rotate handle >> Click on turn on animate editing mode icon	Adjust the rotate handle as demonstrated. Click on Turn on animate editing mode icon.
Move the Cursor on 30th frame >> Go to Parameter panel >>Change the amount	Move the cursor to the 30th frame. Go to Parameters panel and click on Amount. Change its value from 0 to -25.
Layers panel >> Click on Girl's upper body and bucket	Next, go to Layers panel and click on Girl's upper body and bucket layer.
Girl's upper body and bucket>> Right-click on Mask layer>>New layer >>Transform	Right-click on Mask layer of the Girl's upper body and bucket layer. Go to New layer and then to Transform.
Rotate	Select Rotate and adjust the rotate handle as demonstrated.
Move the Cursor on 70th frame >> Go to Parameter panel >> Change the Amount	Move the Cursor to the 70th frame and change the Amount value from 0 to -6.14.
Layers panel >> Click on Girl's head	Go to the Layers panel and click on Girl's head layer.
Girl's head >> Right click on Mask layer>>New layer >>Transform	Right-click on Mask layer of the Girl's head layer. Go to New layer and then click on Transform.
Rotate	Now click on Rotate and adjust the rotate handle as demonstrated.
Move the Cursor on 70th frame >> Go to Parameter panel >> Change the amount of rotation	Move the cursor to the 70th frame and go to Parameters panel. Change the value of Amount from 0 to -10
Layer’s panel	We need to rearrange the layers as Boy’s hand, Boy's body, Girl’s head, Girl's upper body and bucket, Girl’s legs
Layers panel >> Click on Paint	Now go to Layers panel and click on Mask of the paint layer.
Place the cursor on 0th frame>>Canvas	Place the Cursor on 0^th frame and then go to the canvas. Move the mask nodes as demonstrated.
Place the cursor on 30th frame>>Canvas	Place the Cursor on 30^th frame and go to the canvas. Move the mask nodes as demonstrated.
Canvas window>> Click on Turn off animate editing mode >>Click on Seek to begin >> Click on Play	Click on Turn off animate editing mode icon. Then click on Seek to begin at the bottom of the canvas. Now play the animation by clicking the Play button.
Toolbox >>Rectangle tool >> Canvas	Draw a rectangle on the canvas for the background layer.
Save the file	Press Ctrl and S keys to save the file.
File >> Render	Next, go to File and click on Render.
Render setting window	Go to the Render setting window. Click on the Target drop down menu and select the extension as ffmpeg.
Click on End time >> change it to 70 >>Click on Render	Click on End time and change it to 70. Click on Render.
Desktop >> Select Cut -out animation. avi >>Right click and play the animation	Go to Desktop. Double click on Cutout-animation folder. Select Cutout-animation.avi. Right-click and play the animation using Firefox web browser. <<PAUSE for 5 secs to show the animation>>
Summary (Slide)	With this, we have come to the end of this tutorial. Let us summarize. In this tutorial, we learnt about Cutout animation in Synfig. We learnt to Use the Cutout tool and Animate the cutouts
Assignment (Slide)	Here is an assignment for you. Locate the Indian flag image which is provided in the Code files link. Cut the wheel part by using Cutout tool and rotate the wheel.
Completed assignment	Your completed assignment should look like this.
About Slide	The video at the following link summarizes the Spoken Tutorial project. Please download and watch it.
Workshop slide	We conduct workshops using Spoken Tutorials. And give certificates. Please contact us.
Forum for specific questions	Please post your timed queries in this forum.
Acknowledgment Slide	Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
	This is Shital Joshi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off. Thanks for joining.

Contributors and Content Editors

Arthi, Nancyvarkey, Shital-joshi

@@ Line 22: / Line 22: @@
 * Use the '''Cutout tool '''on that image and
 * Animate the cutout shapes
 |-
@@ Line 79: / Line 77: @@
 Click on '''Painting.png >>Import'''
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|And select '''Painting.png.'''
@@ Line 87: / Line 82: @@
 Then click on''' Import.'''
+|-
-We get the image on the '''canvas'''.
+| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"|
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|We get the image on the '''canvas'''.
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Desktop >> '''Select '''paint.png >> '''Click on '''Paint.png >>Import'''
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Similarly, import the''' Paint.png '''file also.
 |-
@@ Line 101: / Line 94: @@
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| We get two layers named '''Paint '''and''' Painting.'''
-Scale and adjust the images as demonstrated.
+|-
+| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Scale and adjust
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|Scale and adjust the images as demonstrated.
 |-
@@ Line 115: / Line 110: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Repeat and create 4 layers
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Repeat 4more times.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Repeat 4 more times.
@@ Line 122: / Line 117: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layer’s panel'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Change the names of the '''layers''' as'''-'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Change the names of the '''layers''' as-
 # '''Girl's head''',
-# '''Girl's upper''' '''body and bucket''',
+# '''Girl's upper body and bucket''',
 # '''Girl’s legs, '''
 # '''Boy’s hand, '''
@@ Line 150: / Line 145: @@
-We can adjust the mask by moving the nodes of mask.
+We can adjust the '''mask''' by moving the nodes of '''mask'''.
 |-
@@ Line 170: / Line 165: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layers panel''' '''>> '''Click on''' Boy's hand'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to '''Layers panel''' and click on''' '''the '''layer-''' '''Boy's hand.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to '''Layers panel''' and click on the '''layer- Boy's hand.'''
 |-
@@ Line 188: / Line 183: @@
-Click on''' turn on animate editing mode''' icon.
+Click on''' Turn on animate editing mode''' icon.
 |-
-| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Move '''the''' Cursor''' on 30th frame >>
+| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Move the''' Cursor''' on 30th frame >>
 Go to '''Parameter panel >>'''Change the''' amount '''
@@ Line 204: / Line 199: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layers panel >> '''Click on''' Girl's upper''' '''body and bucket'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Next, go to '''Layers panel '''and click on''' Girl's upper''' '''body and bucket layer.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Next, go to '''Layers panel '''and click on''' Girl's upper body and bucket layer.'''
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Girl's upper''' '''body and bucket'''>> Right-click on '''Mask layer'''>>'''New layer''' >>'''Transform'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Right-click on '''Mask layer '''of''' '''the '''Girl's upper body and bucket layer.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Right-click on '''Mask layer '''of the '''Girl's upper body and bucket layer.'''
@@ Line 218: / Line 213: @@
 |-
-| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Move''' '''the''' Cursor''' on 70th frame >>
+| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Move the''' Cursor''' on 70th frame >>
 Go to '''Parameter panel >> '''Change the''' Amount '''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Move the '''Cursor''' to the 70th frame and change the''' Amount '''value from 0 to -6.14.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Move the '''Cursor''' to the 70th frame and change the '''Amount '''value from 0 to -6.14.
 |-
@@ Line 229: / Line 224: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Girl's head '''>> Right click on '''Mask layer'''>>'''New layer''' >>'''Transform'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Right-click on '''Mask layer '''of''' '''the '''Girl's head layer.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Right-click on '''Mask layer '''of the '''Girl's head layer.'''
@@ Line 245: / Line 240: @@
-Change the''' '''value of '''Amount '''from 0 to -10
+Change the value of '''Amount '''from 0 to -10
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layer’s panel'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| We need to rearrange the layers as
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| We need to rearrange the '''layers''' as
 * '''Boy’s hand''',
 * '''Boy's body''',
-* '''Girl’s head, '''
+* '''Girl’s head''',
-* '''Girl's upper''' '''body and bucket''',
+* '''Girl's upper body and bucket''',
 * '''Girl’s legs'''
 |-
@@ Line 265: / Line 258: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Place the''' cursor''' on 0th frame>>'''Canvas'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Place the '''Cursor '''on 0<sup>th</sup> frame and then go to the '''Canvas'''.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Place the '''Cursor '''on 0<sup>th</sup> frame and then go to the '''canvas'''.
-Move the mask nodes as demonstrated.
+Move the '''mask nodes''' as demonstrated.
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Place the''' cursor''' on 30th frame>>'''Canvas'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Place the '''Cursor '''on 30<sup>th</sup> frame and go to the '''Canvas'''.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Place the '''Cursor '''on 30<sup>th</sup> frame and go to the '''canvas'''.
-Move the mask nodes as demonstrated.
+Move the '''mask nodes''' as demonstrated.
 |-
-| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Canvas window>> '''Click on''' Turn on''' '''animate editing mode >>'''Click on '''Seek to begin >> '''Click on '''Play'''
+| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Canvas window>> '''Click on''' Turn off''' '''animate editing mode >>'''Click on '''Seek to begin >> '''Click on '''Play'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Click on''' Turn on''' '''animate editing mode '''icon.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Click on''' Turn off animate editing mode '''icon.
@@ Line 285: / Line 278: @@
-Now play the animation by clicking''' Play''' icon.
+Now play the animation by clicking the''' Play''' button.
 |-
@@ Line 293: / Line 286: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Save the file
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Press '''Ctr'''l and''' S''' keys to save the file.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Press '''Ctrl''' and''' S''' keys to save the file.
 |-
@@ Line 301: / Line 294: @@
 |-
 | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Render setting window'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to''' '''the '''Render setting window'''.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to the '''Render setting window'''.
@@ Line 310: / Line 303: @@
 >>Click on '''Render'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Click on '''End time''' and change it to 70 .
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Click on '''End time''' and change it to 70.
@@ Line 334: / Line 327: @@
 Let us summarize.
-In this tutorial we learnt about Cutout animation in '''Synfig.'''
+In this tutorial, we learnt about Cutout animation in '''Synfig.'''
 We learnt to
@@ Line 340: / Line 333: @@
 * Use the '''Cutout tool''' and
 * Animate the cutouts
 |-
@@ Line 349: / Line 340: @@
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Here is an assignment for you.
-* Locate the Indian flag''' '''image which is provided in the '''Code files '''link.
+* Locate the Indian flag image which is provided in the '''Code files '''link.
 * Cut the wheel part by using '''Cutout tool''' and rotate the wheel.
 |-

Difference between revisions of "Synfig/C3/Cutout-animation/English"

Latest revision as of 12:22, 16 October 2020

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools