Difference between revisions of "Synfig/C3/Basic-bone-animation/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script:''' Basic bone animation '''Author:''' Shital Joshi '''Keywords:''' Add bones, Add child bones, Attach bones to body, Create a basic bone animation. {|...")
 
 
(One intermediate revision by one other user not shown)
Line 25: Line 25:
 
* Attach bones to body
 
* Attach bones to body
 
* And animate the bones
 
* And animate the bones
 
 
  
 
|-
 
|-
Line 36: Line 34:
 
* '''Ubuntu Linux''' 14.04 OS  
 
* '''Ubuntu Linux''' 14.04 OS  
 
* '''Synfig '''version 1.0.2
 
* '''Synfig '''version 1.0.2
 
 
  
 
|-
 
|-
Line 51: Line 47:
  
  
This file has been provided to you in the '''Code Files '''link. Please download and use it.
+
This file has been provided to you in the '''Code Files '''link.  
 +
 
 +
Please download and use it.
  
 
|-
 
|-
Line 98: Line 96:
  
  
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Now go to''' '''the '''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;"| Now go to the '''Layers panel.'''
  
  
Line 121: Line 119:
  
  
Hold and drag the mouse and move the bone''' '''
+
Hold and drag the mouse and move the bone to the '''Trunk''' part of the character.
 
+
to the '''Trunk''' part of the character.
+
  
  
Line 156: Line 152:
  
 
Press''' Ctrl key'''>> '''Layers panel'''
 
Press''' Ctrl key'''>> '''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;"| For that, go to''' '''the '''Layers panel'''. Right click on '''R-upper-arm layer '''and''' '''then on''' Select all child layers.'''
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| For that, go to the '''Layers panel'''.  
 
+
 
+
  
 +
Right-click on '''R-upper-arm layer''' and then on''' Select all child 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;"|  
 
| 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;"| Go to the canvas. Using shift key, hold and drag the mouse to select all the nodes of the right upper arm.
+
| 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 '''canvas'''.  
 +
 
 +
Using '''Shift''' key, hold and drag the mouse to select all the nodes of the right upper arm.
  
 
|-
 
|-
 
| 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>>Link to bone'''
 
| 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>>Link to bone'''
| 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 '''key and then select''' '''the '''Skeleton layer.'''
+
| 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 '''key and then select the '''Skeleton layer.'''
  
  
Line 199: Line 196:
 
|-
 
|-
 
| 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;"| '''Turn on animate editing mode.'''
 
| 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;"| '''Turn on animate editing mode.'''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Turn''' on '''the '''animate editing mode.'''
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Turn''' on '''the '''animate editing mode''' icon.
  
 
|-
 
|-
Line 213: Line 210:
 
* And green dot is for displacement  
 
* And green dot is for displacement  
  
in''' '''the '''Skeleton'''.
+
in the '''Skeleton'''.
  
 
|-
 
|-
Line 220: Line 217:
  
  
Select the''' '''blue dot of the''' bone,''' which is placed in the lower arm part of the right hand.
+
Select the blue dot of the''' bone,''' which is placed in the lower arm part of the right hand.
  
  
 
Move the lower arm '''bone''' as demonstrated by moving the blue dot.
 
Move the lower arm '''bone''' as demonstrated by moving the blue dot.
 
 
 
  
 
|-
 
|-
 
| 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;"| '''Time track panel>> Cursor>>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;"| '''Time track panel>> Cursor>>Canvas'''
| 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 '''Time track panel '''and place the''' cursor '''on the 32<sup>th</sup> frame.
+
| 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 '''Time track panel '''and place the''' cursor '''on the 32<sup>nd</sup> frame.
  
  
Line 251: Line 245:
 
|-
 
|-
 
| 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;"| '''Time track panel>> Cursor>> 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;"| '''Time track panel>> Cursor>> Canvas'''
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Once again, go to the''' Time track panel '''and place the''' cursor '''on the 63<sup>th</sup> frame.
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Once again, go to the''' Time track panel '''and place the''' cursor '''on the 63<sup>rd</sup> frame.
  
  
Line 271: Line 265:
  
  
Drag the''' '''blue dot and move the lower arm '''bone''' of the left hand as demonstrated.
+
Drag the blue dot and move the lower arm '''bone''' of the left hand 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 >>'''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 >>'''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;"| Lastly, 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;"| Lastly, click on '''Turn off animate editing mode''' icon.
  
  
Line 288: Line 282:
 
|-
 
|-
 
| 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;"| Once again 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;"| Once again, save the file.
  
 
|-
 
|-
Line 302: Line 296:
  
  
Set the '''Quality''' as 0.5 and '''FPS''' as 24'''.'''
+
Set the '''Quality''' as 0.5 and '''FPS''' as 24.
  
 
|-
 
|-
Line 309: Line 303:
  
  
| 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 the '''Preview''' button''' '''and then click on the '''Play''' button.
+
| 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 the '''Preview''' button and then click on the '''Play''' button.
  
 
|-
 
|-
Line 371: Line 365:
 
|-
 
|-
 
| 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-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;"| With this we have come to the end of this tutorial. Let us summarize.
+
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| With this we have come to the end of this tutorial.  
 +
 
 +
Let us summarize.
  
 
|-
 
|-
Line 386: Line 382:
 
* Attach '''bones '''to the body
 
* Attach '''bones '''to the body
 
* Animate the '''bones'''.
 
* Animate the '''bones'''.
 
 
  
 
|-
 
|-
Line 393: Line 387:
  
 
(Slide)
 
(Slide)
 
 
  
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| * Open the Synfig file, given to you in the '''Code files''' link
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| * Open the Synfig file, given to you in the '''Code files''' link
 
* Add bones and animate the hand
 
* Add bones and animate the hand
 
 
  
 
|-
 
|-
Line 429: Line 419:
 
|-
 
|-
 
| 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;"| Acknowledgment Slide
 
| 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;"| Acknowledgment Slide
 
 
  
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
 
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

Latest revision as of 12:27, 16 October 2020

Title of script: Basic bone animation

Author: Shital Joshi

Keywords: Add bones, Add child bones, Attach bones to body, Create a basic bone animation.


Visual cue
Narration
Opening Slide Welcome to the Spoken Tutorial on “Basic bone animation” using Synfig.
Learning Objectives (Slide) In this tutorial we will learn to animate a character using Skeleton option in Synfig.


We will also learn to

  • Add bones
  • Attach bones to body
  • And animate the bones
System requirements

(Slide)

To record this tutorial, I am using
  • Ubuntu Linux 14.04 OS
  • Synfig version 1.0.2
Synfig interface Now let us begin.


We are in Synfig.

Open Synfig-character file I will open the Synfig-character file which is saved on my machine.


This file has been provided to you in the Code Files link.

Please download and use it.

Slide Ensure that all parts of the body are in different layers.


Now we will learn to rig the upper part of the body with fixed joints using the Skeleton.

Layers panel Before that we need to create groups.


For e.g.-

Left hand should be made up of Left upper arm, Left lower arm and Left palm.


So we need to group these three layers and name it as L-hand.

Similarly, group the other layers.


Name the group layers as L-hand, R-hand, Head, Neck, and Trunk, as shown here.

Go to File >> Save As Let’s save this file using Save As option.


Go to File and click on Save As.

Click on Desktop>>Basic bone animation folder >> Click on Name >> Type name as Basic-bone-animation >> Click on Save Choose your preferred location and then type the filename as Basic-bone-animation.


Then click on the Save button.

Go to Layers panel


Now go to the Layers panel.


Make one more group of all these grouped layers and name it as Character.

Layer panel >> Right click on top layer >> New layer >> Other >>Skeleton>>canvas Now, open the Character group by clicking on the triangular shape.


Right-click on the top layer of the Character layer.


Go to New layer, then Other and click on Skeleton.


We get one bone on the canvas.

Transform tool>> canvas Click on the Transform tool and select the green dot of the bone.


Hold and drag the mouse and move the bone to the Trunk part of the character.


Now place the bone as demonstrated.


Next, use the orange dot of the bone to adjust the length of the bone.

Canvas>> Create child bone After this, right-click on the orange dot of the bone.


And then click on the option Create child bone.

Canvas Adjust the length of the child bone in the upper part of the Trunk, as explained earlier.
Canvas In a similar manner, add and adjust the bones for neck, head and hands.


Now the Skeleton layer is placed inside the body.


Next, we will attach the bones to the each part of the body.

Go to Layers panel>>Canvas>>

Press Ctrl key>> Layers panel

For that, go to the Layers panel.

Right-click on R-upper-arm layer and then on Select all child layers.

Go to the canvas.

Using Shift key, hold and drag the mouse to select all the nodes of the right upper arm.

Canvas>>Link to bone Press Ctrl key and then select the Skeleton layer.


Right-click on any node of the bone of R-upper-arm.


Click on the option Link to bone.

Likewise, we have to attach every part of the body to its respective bone by using Link to bone.
SLIDE Every part of the body needs to be attached to the Skeleton.


Only then we can animate all the parts of the body using bones.

Save the file Press Ctrl and S keys to save the file.
Layers panel>>Select Skeleton layer Let us now start to animate.


Go to Layers panel and select Skeleton layer.

Turn on animate editing mode. Turn on the animate editing mode icon.
Time track panel>> Cursor Go to Time track panel and place the cursor on the 20th frame.
Point to the various dots Observe the various coloured dots.
  • Blue dot is for rotation.
  • Orange dot for scaling.
  • And green dot is for displacement

in the Skeleton.

Canvas Let’s go to the canvas.


Select the blue dot of the bone, which is placed in the lower arm part of the right hand.


Move the lower arm bone as demonstrated by moving the blue dot.

Time track panel>> Cursor>>Canvas Go to the Time track panel and place the cursor on the 32nd frame.


Go back to the Canvas and move the lower arm bone as demonstrated.

Time track panel>> Cursor>> Canvas Again go to the Time track panel and place the cursor on the 48th frame.


Go to the Canvas and move the lower arm bone as demonstrated.

Canvas Next, on same frame select the blue dot of the palm bone.


Then move the palm bone as demonstrated.

Time track panel>> Cursor>> Canvas Once again, go to the Time track panel and place the cursor on the 63rd frame.


Go back to the Canvas and move the lower arm bone as demonstrated.

Canvas We will animate L-hand in the same way.


Go to canvas and select the blue dot on the lower arm bone of the left hand.

Time track panel>> Cursor>> Canvas Go to Time track panel and place the cursor on the 20th frame.


Go to the Canvas.


Drag the blue dot and move the lower arm bone of the left hand as demonstrated.

Canvas >>Click on Turn off animate editing mode >>Click on Seek to begin >>Click on Play


Lastly, click on Turn off animate editing mode icon.


Click on Seek to begin at the bottom of the canvas.


Play the animation by clicking the Play button.

Save the file Once again, save the file.
Let us now check the preview.
File >> Click on Preview >>Preview option >> Quality >>FPS


Go to File and then click on Preview.


Set the Quality as 0.5 and FPS as 24.

Preview button >>Play


Click on the Preview button and then click on the Play button.
We can see a preview of the animation on the screen.
Close Preview window. Let’s close the Preview window.
File >>Render Now let us render the animation.


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

Render setting window >> Choose >> Save render as window Go to Render setting window.


Click on Choose and open the Save render as window.

Desktop >>Basic-bone-animation folder >> Write a Name >> Click on Ok Choose the location to save the file. I’m choosing Desktop.


Change the filename to Basic-bone-animation.avi.

Click on Target >> Select ffmpeg Click on the Target drop-down menu and select the extension as ffmpeg.
Click on Time >> Click on End time>> Click on Render


Click on the Time tab and change the End time to 70.


Lastly, click on Render.

Let us check our animation now.
Desktop>> Double Click on Basic

bone animation folder >> Select Basic bone animation.avi >>Double click on it

Go to Desktop and select Basic-bone-animation. avi.


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

<< Pause>>

With this we have come to the end of this tutorial.

Let us summarize.

Summary (Slide)


In this tutorial we learnt about basic bone animation in Synfig.


We also learnt to

  • Add bones
  • Attach bones to the body
  • Animate the bones.
Assignment

(Slide)

* Open the Synfig file, given to you in the Code files link
  • Add bones and animate the hand
Completed assignment Your completed assignment should look like this.
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, Shital-joshi