Difference between revisions of "Synfig/C2/Create-a-star-animation/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 23: Line 23:
  
 
|-
 
|-
−
| 00:23
+
| 00:22
 
|  '''Synfig version''' 1.0.2
 
|  '''Synfig version''' 1.0.2
  
Line 32: Line 32:
 
|-
 
|-
 
| 00:28
 
| 00:28
−
| I have created a branch image in my''' Documents''' folder. The image is provided to you in the '''Code files''' link. Let us '''import''' it.
+
| I have created a branch image in my''' Documents''' folder.  
  
 
|-
 
|-
−
| 00:35
+
| 00:33
−
| Go to''' File.''' Click on''' Import. '''Select Branch image.  
+
|The image is provided to you in the '''Code files''' link. Let us '''import''' it.
  
 
|-
 
|-
−
| 00:40
+
| 00:38
−
| Go to''' Layers panel.'''
+
| Go to''' File.''' Click on''' Import. '''Select Branch image.
  
 
|-
 
|-
−
| 00:42
+
| 00:44
−
| Select the ''' Branch  layer'''. Now the''' handle''' appears.
+
| Go to''' Layers panel.''' Select the ''' Branch  layer'''.
  
 
|-
 
|-
 
| 00:48
 
| 00:48
 +
| Now the''' handle''' appears.
 +
 +
|-
 +
| 00:51
 
| Click on the orange dot and '''resize''' the image as shown.
 
| Click on the orange dot and '''resize''' the image as shown.
  
 
|-
 
|-
−
| 00:52
+
| 00:55
 
| Click on the green dot and move it to the bottom of the''' canvas.'''
 
| Click on the green dot and move it to the bottom of the''' canvas.'''
  
 
|-
 
|-
−
| 00:56
+
| 01:00
 
| Let us now '''save''' our file. Go to''' File.''' Click on''' Save.'''  
 
| Let us now '''save''' our file. Go to''' File.''' Click on''' Save.'''  
  
Line 61: Line 65:
  
 
|-
 
|-
−
| 01:04
+
| 01:08
 
| Change the default name to''' Star hyphen animation.'''
 
| Change the default name to''' Star hyphen animation.'''
  
Line 67: Line 71:
  
 
|-
 
|-
−
| 01:12
+
| 01:15
 
| Next, let us create some stars.
 
| Next, let us create some stars.
  
 
|-
 
|-
−
| 01:15
+
| 01:18
 
| Now go to''' Tool box.''' Click on''' Star tool.'''
 
| Now go to''' Tool box.''' Click on''' Star tool.'''
  
 
|-
 
|-
−
| 01:19
+
| 01:22
 
| Create 10 stars in the''' canvas''' in the empty area above the branch.
 
| Create 10 stars in the''' canvas''' in the empty area above the branch.
  
 
|-
 
|-
−
| 01:28
+
| 01:31
 
| Go to''' Layers panel.''' Select all the star '''layers''' using''' shift''' key.
 
| Go to''' Layers panel.''' Select all the star '''layers''' using''' shift''' key.
  
 
|-
 
|-
−
| 01:34
+
| 01:37
 
| Now click on the '''group icon''' at the bottom to group them.
 
| Now click on the '''group icon''' at the bottom to group them.
  
 
|-
 
|-
−
| 01:38
+
| 01:41
 
| Rename the group layer to''' Stars.'''  Click outside the''' canvas''' to deselect the''' Stars group layer.'''
 
| Rename the group layer to''' Stars.'''  Click outside the''' canvas''' to deselect the''' Stars group layer.'''
  
 
|-
 
|-
−
| 01:46
+
| 01:49
 
| Next, let us create a gradient background.
 
| Next, let us create a gradient background.
  
Line 97: Line 101:
  
 
|-
 
|-
−
| 01:53
+
| 01:56
 
| In the''' Tool options panel,''' check if''' Create a linear gradient''' option is selected.
 
| In the''' Tool options panel,''' check if''' Create a linear gradient''' option is selected.
  
 
|-
 
|-
−
| 02:00
+
| 02:03
 
| Click the '''mouse''' on the top of the''' canvas''' and drag it till bottom.
 
| Click the '''mouse''' on the top of the''' canvas''' and drag it till bottom.
  
 
|-
 
|-
−
| 02:05
+
| 02:08
 
| Observe a black and white''' gradient''' appears on the''' canvas.'''
 
| Observe a black and white''' gradient''' appears on the''' canvas.'''
  
 
|-
 
|-
−
| 02:11
+
| 02:14
 
| Go to''' Parameters panel.'''
 
| Go to''' Parameters panel.'''
  
Line 115: Line 119:
  
 
|-
 
|-
−
| 02:18
+
| 02:21
 
| Observe there are 2 '''Color stop icons''' at each end in the box at the bottom.
 
| Observe there are 2 '''Color stop icons''' at each end in the box at the bottom.
  
 
|-
 
|-
−
| 02:24
+
| 02:27
 
| These icons indicate the 2 colors of the gradient.
 
| These icons indicate the 2 colors of the gradient.
  
 
|-
 
|-
−
| 02:28
+
| 02:31
 
| The left '''Color stop icon '''is selected by '''default'''. Change the color to light blue.
 
| The left '''Color stop icon '''is selected by '''default'''. Change the color to light blue.
  
 
|-
 
|-
−
| 02:35
+
| 02:38
 
| Next, select the right '''Color stop icon.''' Change the color to white.
 
| Next, select the right '''Color stop icon.''' Change the color to white.
  
Line 133: Line 137:
  
 
|-
 
|-
−
| 02:42
+
| 02:46
 
| Observe the color change in the''' canvas.'''
 
| Observe the color change in the''' canvas.'''
  
 
|-
 
|-
−
| 02:47
+
| 02:50
 
| In the''' Animation panel, '''click on''' Turn on Animate editing mode''' icon.
 
| In the''' Animation panel, '''click on''' Turn on Animate editing mode''' icon.
  
 
|-
 
|-
−
| 02:52
+
| 02:55
 
| Go to 25<sup>th</sup> frame. Add a''' keyframe''' in the''' keyframes panel'''.
 
| Go to 25<sup>th</sup> frame. Add a''' keyframe''' in the''' keyframes panel'''.
  
 
|-
 
|-
−
| 02:58
+
| 03:01
 
| Go to''' Parameters panel.'''
 
| Go to''' Parameters panel.'''
  
Line 151: Line 155:
  
 
|-
 
|-
−
| 03:04
+
| 03:08
 
| Change the left color to black and the right color to dark blue.
 
| Change the left color to black and the right color to dark blue.
  
 
|-
 
|-
−
| 03:12
+
| 03:15
 
| Observe''' waypoints''' are created on the''' Time track panel.'''
 
| Observe''' waypoints''' are created on the''' Time track panel.'''
  
 
|-
 
|-
−
| 03:17
+
| 03:20
 
| Drag the''' Time cursor''' between zeroth and 25<sup>th</sup> frame to observe the color change in the''' canvas.'''
 
| Drag the''' Time cursor''' between zeroth and 25<sup>th</sup> frame to observe the color change in the''' canvas.'''
  
 
|-
 
|-
−
| 03:24
+
| 03:28
 
| Press '''Ctrl''' and '''S''' keys to '''save''' our file
 
| Press '''Ctrl''' and '''S''' keys to '''save''' our file
  
 
|-
 
|-
−
| 03:29
+
| 03:32
 
| We need to move the gradient background to the bottom.
 
| We need to move the gradient background to the bottom.
  
 
|-
 
|-
−
| 03:33
+
| 03:36
 
| So, go to''' Layers panel.''' Click on the''' Lower layer''' button twice.
 
| So, go to''' Layers panel.''' Click on the''' Lower layer''' button twice.
  
 
|-
 
|-
−
| 03:38
+
| 03:41
 
| Next let us animate the alpha value of the stars. So, select the''' Stars group layer.'''
 
| Next let us animate the alpha value of the stars. So, select the''' Stars group layer.'''
  
−
Go to Zeroth frame.
+
|-
 +
| 04:48
 +
|Go to Zeroth frame.
  
 
|-
 
|-
−
| 03:48
+
| 03:51
 
| In the''' Parameters panel,''' double click on the value of''' Amount parameter.'''
 
| In the''' Parameters panel,''' double click on the value of''' Amount parameter.'''
  
 
|-
 
|-
−
| 03:53
+
| 03:56
 
| Change the value to zero. Press''' Enter.'''
 
| Change the value to zero. Press''' Enter.'''
  
 
|-
 
|-
−
| 03:57
+
| 04:00
 
| Observe the stars are not visible now.
 
| Observe the stars are not visible now.
  
 
|-
 
|-
−
| 04:00
+
| 04:04
 
| Go to 25<sup>th</sup> frame. Again change the''' Amount parameter''' value to 0.
 
| Go to 25<sup>th</sup> frame. Again change the''' Amount parameter''' value to 0.
  
 
|-
 
|-
−
| 04:07
+
| 04:10
 
| Go to 40<sup>th</sup> frame. In the''' Keyframes panel,''' add a new''' keyframe.'''
 
| Go to 40<sup>th</sup> frame. In the''' Keyframes panel,''' add a new''' keyframe.'''
  
 
|-
 
|-
−
|04:13
+
|04:17
 
| In the''' Parameters panel,''' change the''' Amount parameter''' value to 1.
 
| In the''' Parameters panel,''' change the''' Amount parameter''' value to 1.
  
 
|-
 
|-
−
| 04:20
+
| 04:23
 
| Go to 55<sup>th</sup> frame. In the''' Keyframes panel,''' select the 25<sup>th</sup> frame. Click on '''Duplicate icon.'''
 
| Go to 55<sup>th</sup> frame. In the''' Keyframes panel,''' select the 25<sup>th</sup> frame. Click on '''Duplicate icon.'''
  
 
|-
 
|-
−
| 04:29
+
| 04:32
 
| Next go to 70<sup>th</sup> frame. In the''' Keyframes panel,''' select the 40<sup>th</sup> frame. Click on '''Duplicate icon.'''
 
| Next go to 70<sup>th</sup> frame. In the''' Keyframes panel,''' select the 40<sup>th</sup> frame. Click on '''Duplicate icon.'''
  
 
|-
 
|-
−
| 04:38
+
| 04:41
 
| Press '''Ctrl''' and '''S''' keys to save our file
 
| Press '''Ctrl''' and '''S''' keys to save our file
  
 
|-
 
|-
−
| 04:42
+
| 04:45
 
| Finally we will now render our animation.
 
| Finally we will now render our animation.
  
 
|-
 
|-
−
| 04:45
+
| 04:49
 
| Go to''' File.''' Click on''' Render.'''
 
| Go to''' File.''' Click on''' Render.'''
  
 
|-
 
|-
−
| 04:49
+
| 04:53
 
| Change the '''extension''' to''' avi.''' Change target to '''ffmpeg. '''
 
| Change the '''extension''' to''' avi.''' Change target to '''ffmpeg. '''
  
Line 231: Line 237:
  
 
|-
 
|-
−
| 05:00
+
| 05:03
 
| Let us now go to the''' Desktop''' and play the animation using''' Firefox web browser.'''
 
| Let us now go to the''' Desktop''' and play the animation using''' Firefox web browser.'''
  
 
|-
 
|-
−
| 05:06
+
| 05:10
 
| With this, we have come to the end of this tutorial.
 
| With this, we have come to the end of this tutorial.
  
Line 241: Line 247:
  
 
|-
 
|-
−
| 05:12
+
| 05:15
 
| In this tutorial, we learnt to create: gradient color animation,
 
| In this tutorial, we learnt to create: gradient color animation,
  
Line 247: Line 253:
  
 
|-
 
|-
−
| 05:21
+
| 05:24
 
| Here is an assignment for you.
 
| Here is an assignment for you.
  
Line 253: Line 259:
  
 
|-
 
|-
−
| 05:25
+
| 05:33
 
| Your completed assignment should look like this.
 
| Your completed assignment should look like this.
  
 
|-
 
|-
−
| 05:30
+
| 05:37
 
| The video at the following link summarizes the '''Spoken Tutorial''' project.
 
| The video at the following link summarizes the '''Spoken Tutorial''' project.
  
Line 263: Line 269:
  
 
|-
 
|-
−
| 05:38
+
| 05:45
 
| We conduct workshops using '''Spoken Tutorials''' and give certificates. Please contact us.
 
| We conduct workshops using '''Spoken Tutorials''' and give certificates. Please contact us.
  
 
|-
 
|-
−
| 05:45
+
| 05:52
 
| Please post your timed queries in this forum.
 
| Please post your timed queries in this forum.
  
 
|-
 
|-
−
| 05:49
+
| 05:56
 
| Spoken Tutorial project is funded by '''NMEICT, MHRD,''' Government of India.
 
| Spoken Tutorial project is funded by '''NMEICT, MHRD,''' Government of India.
  
 
|-
 
|-
−
| 05:55
+
| 06:02
 
| This is Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.
 
| This is Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.
  

Revision as of 16:36, 22 September 2018

Time
Narration
00:01 Welcome to the Spoken Tutorial on “Star animation” using Synfig.
00:06 In this tutorial, we will learn to create: gradient color animation,
00:12 group layers and star animation.
00:16 To record this tutorial, I am using:

Ubuntu Linux 14.04 OS,

00:22 Synfig version 1.0.2
00:26 Let us open Synfig.
00:28 I have created a branch image in my Documents folder.
00:33 The image is provided to you in the Code files link. Let us import it.
00:38 Go to File. Click on Import. Select Branch image.
00:44 Go to Layers panel. Select the Branch layer.
00:48 Now the handle appears.
00:51 Click on the orange dot and resize the image as shown.
00:55 Click on the green dot and move it to the bottom of the canvas.
01:00 Let us now save our file. Go to File. Click on Save.

I will save the file in the Desktop.

01:08 Change the default name to Star hyphen animation.

Click on Save.

01:15 Next, let us create some stars.
01:18 Now go to Tool box. Click on Star tool.
01:22 Create 10 stars in the canvas in the empty area above the branch.
01:31 Go to Layers panel. Select all the star layers using shift key.
01:37 Now click on the group icon at the bottom to group them.
01:41 Rename the group layer to Stars. Click outside the canvas to deselect the Stars group layer.
01:49 Next, let us create a gradient background.

Go to Tool box. Click on Gradient tool.

01:56 In the Tool options panel, check if Create a linear gradient option is selected.
02:03 Click the mouse on the top of the canvas and drag it till bottom.
02:08 Observe a black and white gradient appears on the canvas.
02:14 Go to Parameters panel.

Double click on the Gradient value. A dialog box appears.

02:21 Observe there are 2 Color stop icons at each end in the box at the bottom.
02:27 These icons indicate the 2 colors of the gradient.
02:31 The left Color stop icon is selected by default. Change the color to light blue.
02:38 Next, select the right Color stop icon. Change the color to white.

Close the dialog box.

02:46 Observe the color change in the canvas.
02:50 In the Animation panel, click on Turn on Animate editing mode icon.
02:55 Go to 25th frame. Add a keyframe in the keyframes panel.
03:01 Go to Parameters panel.

Click on the Gradient parameter value.

03:08 Change the left color to black and the right color to dark blue.
03:15 Observe waypoints are created on the Time track panel.
03:20 Drag the Time cursor between zeroth and 25th frame to observe the color change in the canvas.
03:28 Press Ctrl and S keys to save our file
03:32 We need to move the gradient background to the bottom.
03:36 So, go to Layers panel. Click on the Lower layer button twice.
03:41 Next let us animate the alpha value of the stars. So, select the Stars group layer.
04:48 Go to Zeroth frame.
03:51 In the Parameters panel, double click on the value of Amount parameter.
03:56 Change the value to zero. Press Enter.
04:00 Observe the stars are not visible now.
04:04 Go to 25th frame. Again change the Amount parameter value to 0.
04:10 Go to 40th frame. In the Keyframes panel, add a new keyframe.
04:17 In the Parameters panel, change the Amount parameter value to 1.
04:23 Go to 55th frame. In the Keyframes panel, select the 25th frame. Click on Duplicate icon.
04:32 Next go to 70th frame. In the Keyframes panel, select the 40th frame. Click on Duplicate icon.
04:41 Press Ctrl and S keys to save our file
04:45 Finally we will now render our animation.
04:49 Go to File. Click on Render.
04:53 Change the extension to avi. Change target to ffmpeg.

Click on Render.

05:03 Let us now go to the Desktop and play the animation using Firefox web browser.
05:10 With this, we have come to the end of this tutorial.

Let us summarize.

05:15 In this tutorial, we learnt to create: gradient color animation,

group layers and star animation.

05:24 Here is an assignment for you.

Create a Sun rise animation.The image is provided to you in the Code files link.

05:33 Your completed assignment should look like this.
05:37 The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it.

05:45 We conduct workshops using Spoken Tutorials and give certificates. Please contact us.
05:52 Please post your timed queries in this forum.
05:56 Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
06:02 This is Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.

Thanks for joining.

Contributors and Content Editors

PoojaMoolya, Ranjana, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Synfig/C2/Create-a-star-animation/English-timed&oldid=44438"