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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 139: Line 139:
  
 
|-
 
|-
−
| 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 >> '''.
+
| 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
 
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;"| Go to'''Toolbox''' 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'''. Now click on the '''Cutout tool.'''
  
  

Revision as of 12:02, 24 March 2017

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 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 4more 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 toToolbox. Now 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 degree.

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 to 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 degree

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 on animate editing mode >>Click on Seek to begin >> Click on Play Click on Turn on animating mode icon.


Then click on Seek to begin at the bottom of the canvas.


Now play the animation by clicking Play icon.

Toolbox >>Rectangle tool >> Canvas 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.
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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Synfig/C3/Cutout-animation/English&oldid=33903"