Difference between revisions of "Synfig/C2/Create-a-star-animation/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
|||
(One intermediate revision by one other user not shown) | |||
Line 23: | Line 23: | ||
|- | |- | ||
− | | 00: | + | | 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 | + | | I have created a branch image in my''' Documents''' folder. |
|- | |- | ||
− | | 00: | + | | 00:33 |
− | | | + | |The image is provided to you in the '''Code files''' link. Let us '''import''' it. |
|- | |- | ||
− | | 00: | + | | 00:38 |
− | | Go to''' | + | | Go to''' File.''' Click on''' Import. '''Select Branch image. |
|- | |- | ||
− | | 00: | + | | 00:44 |
− | | | + | | 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: | + | | 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.''' | ||
|- | |- | ||
− | | | + | | 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: | + | | 01:08 |
| Change the default name to''' Star hyphen animation.''' | | Change the default name to''' Star hyphen animation.''' | ||
Line 67: | Line 71: | ||
|- | |- | ||
− | | 01: | + | | 01:15 |
| Next, let us create some stars. | | Next, let us create some stars. | ||
|- | |- | ||
− | | 01: | + | | 01:18 |
| Now go to''' Tool box.''' Click on''' Star tool.''' | | Now go to''' Tool box.''' Click on''' Star tool.''' | ||
|- | |- | ||
− | | 01: | + | | 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: | + | | 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: | + | | 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: | + | | 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: | + | | 01:49 |
| Next, let us create a gradient background. | | Next, let us create a gradient background. | ||
Line 97: | Line 101: | ||
|- | |- | ||
− | | 01: | + | | 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: | + | | 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: | + | | 02:08 |
| Observe a black and white''' gradient''' appears on the''' canvas.''' | | Observe a black and white''' gradient''' appears on the''' canvas.''' | ||
|- | |- | ||
− | | 02: | + | | 02:14 |
| Go to''' Parameters panel.''' | | Go to''' Parameters panel.''' | ||
Line 115: | Line 119: | ||
|- | |- | ||
− | | 02: | + | | 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: | + | | 02:27 |
| These icons indicate the 2 colors of the gradient. | | These icons indicate the 2 colors of the gradient. | ||
|- | |- | ||
− | | 02: | + | | 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: | + | | 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: | + | | 02:46 |
| Observe the color change in the''' canvas.''' | | Observe the color change in the''' canvas.''' | ||
|- | |- | ||
− | | 02: | + | | 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: | + | | 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'''. | ||
|- | |- | ||
− | | | + | | 03:01 |
| Go to''' Parameters panel.''' | | Go to''' Parameters panel.''' | ||
Line 151: | Line 155: | ||
|- | |- | ||
− | | 03: | + | | 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: | + | | 03:15 |
| Observe''' waypoints''' are created on the''' Time track panel.''' | | Observe''' waypoints''' are created on the''' Time track panel.''' | ||
|- | |- | ||
− | | 03: | + | | 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: | + | | 03:28 |
| Press '''Ctrl''' and '''S''' keys to '''save''' our file | | Press '''Ctrl''' and '''S''' keys to '''save''' our file | ||
|- | |- | ||
− | | 03: | + | | 03:32 |
| We need to move the gradient background to the bottom. | | We need to move the gradient background to the bottom. | ||
|- | |- | ||
− | | 03: | + | | 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: | + | | 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.''' | ||
− | |||
− | |||
|- | |- | ||
| 03:48 | | 03:48 | ||
+ | |Go to Zeroth frame. | ||
+ | |||
+ | |- | ||
+ | | 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: | + | | 03:56 |
| Change the value to zero. Press''' Enter.''' | | Change the value to zero. Press''' Enter.''' | ||
|- | |- | ||
− | | | + | | 04:00 |
| Observe the stars are not visible now. | | Observe the stars are not visible now. | ||
|- | |- | ||
− | | 04: | + | | 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: | + | | 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: | + | |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: | + | | 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: | + | | 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: | + | | 04:41 |
| Press '''Ctrl''' and '''S''' keys to save our file | | Press '''Ctrl''' and '''S''' keys to save our file | ||
|- | |- | ||
− | | 04: | + | | 04:45 |
| Finally we will now render our animation. | | Finally we will now render our animation. | ||
|- | |- | ||
− | | 04: | + | | 04:49 |
| Go to''' File.''' Click on''' Render.''' | | Go to''' File.''' Click on''' Render.''' | ||
|- | |- | ||
− | | 04: | + | | 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: | + | | 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: | + | | 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: | + | | 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: | + | | 05:24 |
| Here is an assignment for you. | | Here is an assignment for you. | ||
Line 253: | Line 259: | ||
|- | |- | ||
− | | 05: | + | | 05:33 |
| Your completed assignment should look like this. | | Your completed assignment should look like this. | ||
|- | |- | ||
− | | 05: | + | | 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: | + | | 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: | + | | 05:52 |
| Please post your timed queries in this forum. | | Please post your timed queries in this forum. | ||
|- | |- | ||
− | | 05: | + | | 05:56 |
| Spoken Tutorial project is funded by '''NMEICT, MHRD,''' Government of India. | | 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. | | This is Arthi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off. | ||
Latest revision as of 13:09, 26 September 2018
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. |
03: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. |