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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(17 intermediate revisions by 3 users not shown)
Line 22: Line 22:
 
* Use the '''Cutout tool '''on that image and  
 
* Use the '''Cutout tool '''on that image and  
 
* Animate the cutout shapes
 
* Animate the cutout shapes
 
 
  
 
|-
 
|-
Line 75: Line 73:
  
 
|-
 
|-
| 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 '''Painting.png >>'''
+
| 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 '''Painting.png >>'''
  
  
 
Click on '''Painting.png >>Import'''
 
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.'''
 
+
 
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| select '''Painting.png.'''
+
  
  
 
Then click on''' Import.'''
 
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-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.
 
| 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.'''
 
| 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-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-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 head''',
# '''Girl's upper''' '''body and bucket''',  
+
# '''Girl's upper body and bucket''',  
 
# '''Girl’s legs, '''
 
# '''Girl’s legs, '''
 
# '''Boy’s hand, '''
 
# '''Boy’s hand, '''
Line 131: Line 126:
  
 
Turn the '''layers off''' by unchecking the '''Show/Hide''' box.
 
Turn the '''layers off''' by unchecking the '''Show/Hide''' box.
 
|-
 
| 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'''
 
| 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 '''Layers panel.'''
 
  
 
|-
 
|-
Line 143: Line 134:
  
 
|-
 
|-
| 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;"| Click on the '''Cutout tool >> '''draw an outline
+
| 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;"| Go to'''Toolbox >>'''
 +
Click on the '''Cutout tool >> '''draw an outline
  
  
  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Now click on the '''Cutout tool.'''
+
| 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 '''Toolbox'''. Click on the '''Cutout tool.'''
  
  
Line 153: 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 173: 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-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 191: 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 '''
 
Go to '''Parameter panel >>'''Change the''' amount '''
Line 203: Line 195:
  
  
Change its value from 0 to -25 degree.
+
Change its value from 0 to -25.
  
 
|-
 
|-
 
| 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-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-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 221: 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 '''
 
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 232: 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-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.'''
  
  
Go to''' New layer '''and then to''' Transform. '''
+
Go to''' New layer '''and then click on''' Transform. '''
  
 
|-
 
|-
Line 248: Line 240:
  
  
Change the''' '''value of '''Amount '''from 0 to -10 degree
+
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-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 hand''',
 
* '''Boy's body''',
 
* '''Boy's body''',
* '''Girl’s head, '''
+
* '''Girl’s head''',
* '''Girl's upper''' '''body and bucket''',  
+
* '''Girl's upper body and bucket''',  
 
* '''Girl’s legs'''
 
* '''Girl’s legs'''
 
 
  
 
|-
 
|-
Line 268: 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-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-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''' '''animating 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 288: Line 278:
  
  
Now play the animation by clicking''' Play''' icon.  
+
Now play the animation by clicking the''' Play''' button.  
  
 
|-
 
|-
 
| 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;"| '''Toolbox >>Rectangle tool >> 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;"| '''Toolbox >>Rectangle tool >> Canvas'''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| yes , this is not the top most layerWill this not become the topmost layer then?Draw a rectangle on the '''canvas''' for the '''background layer.'''
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|Draw a rectangle on the '''canvas''' for the '''background 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;"| Save the file
 
| 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 304: 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-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 313: Line 303:
  
 
>>Click on '''Render'''
 
>>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 337: Line 327:
 
Let us summarize.  
 
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  
 
We learnt to  
Line 343: Line 333:
 
* Use the '''Cutout tool''' and
 
* Use the '''Cutout tool''' and
 
* Animate the cutouts
 
* Animate the cutouts
 
 
  
 
|-
 
|-
Line 352: 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.
 
| 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.
 
* Cut the wheel part by using '''Cutout tool''' and rotate the wheel.
 
 
  
 
|-
 
|-

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-
  1. Girl's head,
  2. Girl's upper body and bucket,
  3. Girl’s legs,
  4. Boy’s hand,
  5. 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 0th frame and then go to the canvas.


Move the mask nodes as demonstrated.

Place the cursor on 30th frame>>Canvas Place the Cursor on 30th 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