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

Latest revision as of 11:29, 26 February 2017

Title of script: Logo animation

Author: Arthi

Keywords: Synfig, Do Mirror object, Animate the logo, Spherize effect, Save and render animation

Visual cue	Narration
Opening Slide	Welcome to the Spoken Tutorial on “Logo animation” using Synfig.
Learning Objectives (Slide)	In this tutorial we will learn to- Create a Mirror object Animate a logo Create Spherize effect
System requirements (Slide)	To record this tutorial, I am using Ubuntu Linux 14.04 OS Synfig version 1.0.2
Open Synfig	Let us open Synfig.
Go to canvas >> Properties Image >> Width to 1920 >> Height to 1080	Go to canvas. Click on Properties. Under the Image, change the Width to 1920 and Height to 1080.
Click on Other >> Locks and Links >> Tick on all the checkboxes Apply >> OK	Click on Other. Under Locks and Links, tick on all the checkboxes. Click on Apply and OK.
Point to the canvas	First let us create a background.
Select Spline tool >> select Create a region layer option	Select the Spline tool. Under the Tool options in Layer Type, Create a region layer option must be selected.
Draw a triangle on the canvas	Draw a right-angled triangle covering half of the canvas as shown.
Right-click on the first node.	Right-click and hold on the first node. The context menu opens.
Click on Loop Spline	Right-click again and select Loop Spline. Now the loop is completed.
Transform tool	Next, click on the Transform tool.
	We get a triangle filled with the default color.
Press Ctrl + S >> Change layer name to Logo-animation	Let us now save the file by pressing Ctrl + S keys. I will change the default name to Logo-animation. And save this file on the Desktop. You can give any name that you want.
Parameters panel >> Color parameter	Next, we will change the color of this triangle. To do so, in the Parameters panel, click on the Color parameter.
Change the color to green and the layer name to Triangle-1	Now change the color to green and the layer name to Triangle-1.
Duplicate the layer >> Change the name to Triangle-2	Duplicate the layer and change the name to Triangle-2.
Change the color to yellow	Then change the color to yellow.
Tool box >> Mirror tool	Now go to the Tool box and select Mirror tool.
Select all the nodes	Select all the nodes of Triangle-2 by clicking and dragging the mouse.
Click on the top left node >> Flip the triangle vertically	Observe that in the Tool options, Vertical axis has been selected. Now click on the top left node of the triangle. Flip it in the vertical direction as demonstrated.
Tool options >> Horizontal	Once again in the Tool options, change the axis to Horizontal.
Flip the triangle horizontally	Now, click on the bottom left node of the triangle. Flip it in the horizontal direction as demonstrated. <<PAUSE>>
Press Ctrl+S	Save the file by pressing Ctrl+S keys. As we go forward, I will not explicitly say so. But pls do so at regular intervals.
	Next, let us animate these 2 triangles.
Select the Transform tool	Select the Transform tool.
Click on Turn on animate editing mode icon	Click on Turn on animate editing mode icon.
Go to 20^th frame >> Add a keyframe	Type 20 in the current frame box and press Enter. In the Keyframes panel, add a keyframe.
Go to Zeroth frame	Come back to the zeroth frame.
Move the yellow triangle outside the canvas	Click on the green dot of the yellow triangle and move it outside the canvas, as demonstrated.
Move the green triangle outside the canvas	Do the same for the green triangle, too.
Click on Turn off animate editing mode icon	Click on Turn off animate editing mode icon.
Play the animation >> Press Ctrl + S	Move the Time cursor between zeroth and 20^th frame to check the animation. <<PAUSE>>
Point to the Spoken Tutorial logo	Next, let us import the Spoken Tutorial logo.
Point to the Spoken Tutorial logo	I have the logo in my Documents folder.
Slide	You can find this logo file in the Code files link that is provided along with this tutorial. Please download and use it.
File >> Import >> Click on Group icon	Go to File and click on Import. Since I want to give Rotate effect to the layer, we will first group the logo layer.
Change the Group layer name to ST-Logo >> Reduce the logo size	Change the Group layer name to ST-Logo. Reduce the size of the logo using the orange dot in the handle.
Click on Turn on animate editing mode icon >> Zeroth frame	Now click on Turn on animate editing mode icon. Go to the zeroth frame. Then click on the drop-down list of ST-Logo group layer and select logo.png layer.
Parameters panel >> Alpha amount to 0	In the Parameters panel, change the Alpha amount to zero. <<PAUSE>>
Right click on logo.png layer	Next let us give rotation effect to the logo. For that, first right-click on logo.png layer.
New layer >> Transform >> Rotate	Then click on New layer, Transform and lastly on Rotate.
Go to 50^th frame >> Add a keyframe	Now go to the 50^th frame. In the Keyframes panel, add a keyframe. In the Parameters panel, change the rotation amount to 360.
Select logo.png layer.	Again select the logo.png layer.
Go to 60^th frame >> Move the logo a little above	Now go to the 60^th frame. Move the logo a little upward, as demonstrated. <<PAUSE>>
Click on Turn off animate editing mode icon	Click on Turn off animate editing mode icon.
Click outside the canvas	Click outside the canvas to deselect the logo.
Click on Text tool	Next let us type some text. So, click on the Text tool and click on the canvas.
Type Spoken Tutorial >> Click on Ok.	A text box appears. Here I will type Spoken Tutorial. Click on Ok.
Parameters panel >> change the color to black >> size to 100	In the Parameters panel, change the color of the text to black and size of the text to 100.
Change the layer name to Spoken Tutorial	I will change the layer name to Spoken Tutorial.
Click on the Transform tool >> Move the text outside the canvas	Click on the Transform tool and select the green dot of the text. Move the text outside the canvas in the downward direction as demonstrated.
Click on Turn on animate editing mode icon	Click on Turn on animate editing mode icon.
Go to 70^th frame >> Move the logo up	Now go to the 70^th frame and move the text upwards and place it below the logo.
Click on Turn on animate editing mode icon	Once again, click on Turn off animate editing mode icon.
Group the Spoken tutorial layer >> Change the layer name to ST-Text	Now group the Spoken tutorial layer and change the group name to ST-Text.
Click on drop-down ST-Text group layer.	Click on the drop-down list of ST-Text group layer.
Right click on Spoken Tutorial layer >> New layer >> Distortions >> Spherize	Right-click on Spoken Tutorial layer and then on New layer. Now click on Distortions and then on Spherize.
Keep the Spherize effect on the starting of the text	Click on the middle green dot of the Spherize effect and drag to the starting of the text. Click and drag the left green dot to make the effect bigger.
Click on Turn on animate editing mode icon	Once again click on Turn on animate editing mode icon.
Go to 100^th frame >> Move the effect to the end of the text	This time go to the 100^th frame and move the effect outside the canvas.
Click on Turn off animate editing mode icon	Now click on Turn off animate editing mode icon.
Press Ctrl + S	Lastly, we will render our logo animation. Before that, save the file.
Click on File >> Render.	Now go to File and click on Render.
Extension to avi. Target to ffmpeg. Quality to 9. Click on Render button	Change the Extension to avi. Change the Target to ffmpeg. Increase the Quality to 9. And click on the Render button.
Play the animation using Firefox	Let us now check our file. Go to Desktop. Right-click on the output and play using Firefox web browser.
Logo animation	Our logo animation looks like this. You can use your own creativity and create in a different method, too.
Logo animation	With this we have come to the end of this tutorial.
Summary	Let us summarize. In this tutorial, we learnt to Create a Mirror object Animate a logo Create Spherize effect
Assignment (Slide)	Here is an assignment for you. Create a logo animation using the Synfig logo. The logo has been given to you in the Code files link.
Completed assignment	Your completed assignment should look like this.
About Slide	The video available at the following link summarizes the Spoken Tutorial project. Pls watch it.
About Slide	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
About Slide	Spoken Tutorial Project is supported by NMEICT, MHRD, Government of India. More information on this Mission is available at this link.
Acknowledgment	This is Arthi along with the Animation team from IIT Bombay, signing off. Thanks for joining.

Contributors and Content Editors

Arthi, Nancyvarkey

@@ Line 22: / Line 22: @@
 * Animate a logo
 * Create '''Spherize effect'''
 |-
@@ Line 33: / Line 31: @@
 * '''Ubuntu Linux''' 14.04 OS
 * '''Synfig '''version 1.0.2
 |-
@@ Line 61: / Line 57: @@
-Click on '''Apply '''and on '''OK.'''
+Click on '''Apply '''and '''OK.'''
 |-
@@ Line 87: / Line 83: @@
 |-
 | 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 '''Loop Spline '''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Again right-click again and select '''Loop Spline.'''
+| 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 again and select '''Loop Spline.'''
@@ Line 144: / Line 140: @@
 |-
 | 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 top left node >> Flip the triangle vertically
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Observe that in the '''Tool options,''' '''Vertical '''axis has been selected.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Observe that in the '''Tool options, Vertical '''axis has been selected.
@@ Line 184: / Line 180: @@
 | 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 '''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 on animate editing mode''' icon.
 |-
@@ Line 206: / 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;"| Move the green triangle outside 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;"| Do the same for the green triangle, too.
 |-
@@ Line 241: / Line 231: @@
-Since I want to give '''Rotate effect '''to the layer, we will first group the '''logo '''layer.
+Since I want to give '''Rotate effect '''to the layer, we will first group the '''logo layer.'''
 |-
@@ Line 262: / Line 252: @@
 |-
 | 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;"| '''Parameters panel >> Alpha amount '''to''' 0'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| In the '''Parameters panel, '''change the''' Alpha amount '''to''' '''zero.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| In the '''Parameters panel, '''change the''' Alpha amount '''to zero.
@@ Line 272: / Line 262: @@
-For that, first right-click''' '''on''' logo.png layer'''.
+For that, first right-click on''' logo.png 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;"| '''New layer >> Transform >> Rotate'''
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Then click''' '''on''' New layer,''' '''Transform '''and lastly on''' Rotate.'''
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Then click on''' New layer, Transform '''and lastly on''' Rotate.'''
 |-
@@ Line 334: / Line 324: @@
 | 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;"| Change the layer name to '''Spoken Tutorial'''
 | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| I will change the '''layer''' name to '''Spoken Tutorial.'''
@@ Line 351: / Line 339: @@
 | 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 '''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 on animate editing mode''' icon.
@@ Line 373: / Line 359: @@
 |-
 | 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;"| Right click on '''Spoken Tutorial layer >>''' '''New''' '''layer >> Distortions >> Spherize'''
-| 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 '''Spoken Tutorial layer''' and then on '''New''' '''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 '''Spoken Tutorial layer''' and then on '''New layer.'''
@@ Line 380: / Line 366: @@
 |-
 | 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;"| Keep the '''Spherize '''effect on the starting of the text
-| 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 middle green of the '''Spherize '''effect and drag to the starting of the text.
+| 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 middle green dot of the '''Spherize effect''' and drag to the starting of the text.
@@ Line 391: / Line 377: @@
 |-
 | 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 100<sup>th</sup> frame >> Move the effect to the end of the text
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| This time go to the 100<sup>th</sup> frame and move the effect to the end of the text.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| This time go to the 100<sup>th</sup> frame and move the effect outside the '''canvas'''.
 |-
@@ Line 447: / Line 433: @@
 |-
 | 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;"| Logo animation
-| 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 can come to the end of this tutorial.
+| 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.
 |-
@@ Line 455: / Line 441: @@
 In this tutorial, we learnt to
 * Create a Mirror object
 * Animate a logo
 * Create '''Spherize '''effect
 |-
@@ Line 471: / Line 454: @@
 * Create a logo animation using the '''Synfig logo'''.
 * The logo has been given to you in the '''Code files''' link.
 |-
@@ Line 494: / Line 475: @@
 |-
 | 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;"| About 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 supported by the 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 supported by NMEICT, MHRD, Government of India.
@@ Line 501: / Line 482: @@
 |-
 | 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
-| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| This is Arthi from IIT Bombay, signing off.
+| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| This is Arthi along with the Animation team from IIT Bombay, signing off.

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

Latest revision as of 11:29, 26 February 2017

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools