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

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 20^th 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 32^nd 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 48^th 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 63^rd 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 20^th 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

@@ Line 25: / Line 25: @@
 * Attach bones to body
 * And animate the bones
 |-
@@ Line 36: / Line 34: @@
 * '''Ubuntu Linux''' 14.04 OS
 * '''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'''
-| 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: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: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: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
-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.
 |-
 | 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: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: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: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
 * Animate the '''bones'''.
 |-
@@ Line 393: / Line 387: @@
 (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
 * 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: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.

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

Latest revision as of 12:27, 16 October 2020

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools