Difference between revisions of "Synfig/C2/E-card-animation/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| border=1 || Time || Narration |- | 00:01 | Welcome to the Spoken Tutorial on “'''E-card animation”''' using''' Synfig.''' |- | 00:05 | In this tutorial, we will...")
 
Line 5: Line 5:
 
|-
 
|-
 
| 00:01
 
| 00:01
−
|  Welcome to the Spoken Tutorial on “'''E-card animation”''' using''' Synfig.'''
+
|  Welcome to the '''Spoken Tutorial''' on “'''E-card animation”''' using''' Synfig.'''
  
 
|-
 
|-
Line 13: Line 13:
 
|-
 
|-
 
| 00:11
 
| 00:11
−
|Here, we will learn to-  Import '''png''' format images  
+
|Here, we will learn to-  import '''png''' format images,
  
 
|-
 
|-
 
|00:16
 
|00:16
−
| Animate the images
+
| animate the images,
  
 
|-
 
|-
 
|00:18
 
|00:18
−
| Do text animation
+
| do text animation,
  
 
|-
 
|-
 
|00:20
 
|00:20
−
| Preview the animation
+
| preview the animation,
  
 
|-
 
|-
 
|00:22
 
|00:22
−
| Render the animation in '''avi '''format
+
| render the animation in '''avi '''format.
  
 
|-
 
|-
 
| 00:25
 
| 00:25
−
|  For this tutorial, I am using  '''Ubuntu Linux''' 14.04 OS
+
|  For this tutorial, I am using  '''Ubuntu Linux''' 14.04 OS,
  
 
|-
 
|-
Line 53: Line 53:
 
|-
 
|-
 
|  00:47
 
|  00:47
−
|Now let us start creating the e-card animation.
+
|Now, let us start creating the e-card animation.
  
 
|-
 
|-
 
|  00:52
 
|  00:52
−
|  We need to first save our '''Synfig''' file.
+
|  We need to first '''save''' our '''Synfig''' file.
  
 
|-
 
|-
 
|  00:56  
 
|  00:56  
−
|  Go to''' File ''' and Click on '''Save'''  
+
|  Go to''' File ''' and click on '''Save'''.
  
 
|-
 
|-
Line 69: Line 69:
 
|-
 
|-
 
| 01:02
 
| 01:02
−
|Type filename as '''E-card-animation'''  and click on '''Save.''' button .
+
|Type the filename as '''E-card-animation'''  and click on the '''Save''' button .
  
 
|-
 
|-
Line 77: Line 77:
 
|-
 
|-
 
|  01:12
 
|  01:12
−
|  Then draw a rectangle on the '''canvas, '''as demonstrated.
+
|  Then draw a rectangle on the '''canvas '''as demonstrated.
  
 
|-
 
|-
 
|  01:17
 
|  01:17
−
|  We will change the settings such that the imported image fits inside the '''canvas'''.
+
|  We will change the settings such that the '''import'''ed image fits inside the '''canvas'''.
  
 
|-
 
|-
Line 97: Line 97:
 
|-
 
|-
 
|  01:44
 
|  01:44
−
|  Please note: We need to import the images in''' png''' format.
+
|  Please note: We need to '''import''' the images in''' png''' format.
  
 
|-
 
|-
Line 105: Line 105:
 
|-
 
|-
 
|  01:58
 
|  01:58
−
| Also after rendering, the output quality is better when '''png''' images are used.
+
| Also, after rendering, the output quality is better when '''png''' images are used.
  
 
|-
 
|-
Line 117: Line 117:
 
|-
 
|-
 
|  02:12
 
|  02:12
−
| I have saved the required images in the '''E-card-animation folder '''inside my '''Documents''' folder.
+
| I have saved the required images in the '''E-card-animation folder, '''inside my '''Documents''' folder.
  
 
|-
 
|-
Line 125: Line 125:
 
|-
 
|-
 
|  02:26
 
|  02:26
−
| Please  locate the link “'''Code files'''” and save the images on your machine.
+
| Please  locate the link “'''Code files'''” and '''save''' the '''image'''s on your machine.
  
 
|-
 
|-
Line 141: Line 141:
 
|-
 
|-
 
|  02:41
 
|  02:41
−
|  To resize the image, first hold the orange dot or the orange duck,  And move the mouse in or out as shown, to make the '''Bg '''image fit the '''canvas.'''
+
|  To '''resize''' the image- first hold the orange dot or the orange duck and move the '''mouse''' in or out as shown, to make the '''Bg '''image fit the '''canvas.'''
  
 
|-
 
|-
Line 149: Line 149:
 
|-
 
|-
 
|  03:00
 
|  03:00
−
| We get the '''Cake '''image on''' '''our '''canvas.''' In the same way, import all the other images, too.
+
| We get the '''Cake '''image on''' '''our '''canvas.''' In the same way, '''import''' all the other images too.
  
 
|-
 
|-
 
| 03:08
 
| 03:08
−
|  Observe, we have three new layers named''' -''' '''Cake''',''' Flowers''' and '''Balloons'''.
+
|  Observe, we have three new layers named - '''Cake, Flowers''' and '''Balloons'''.
  
 
|-
 
|-
 
|  03:14
 
|  03:14
−
|  Let us now resize these images.  Go to''' Layers panel.'''
+
|  Let us now '''resize''' these images.  Go to''' Layers panel.'''
  
 
|-
 
|-
 
|  03:19
 
|  03:19
−
| First select the''' Cake '''layer'''.''' Observe that on selection, the resize handles appear on the '''canvas.'''
+
| First select the''' Cake '''layer. Observe that on selection, the resize handles appear on the '''canvas.'''
  
 
|-
 
|-
Line 193: Line 193:
 
|-
 
|-
 
|  04:05
 
|  04:05
−
|  Next, select the '''Balloons '''layer'''.'''
+
|  Next, select the '''Balloons '''layer.
  
 
|-
 
|-
Line 289: Line 289:
 
|-
 
|-
 
|  06:09
 
|  06:09
−
|  In this text box, type''' “Have a wonderful, happy, healthy birthday now and forever”'''.  
+
|  In this text box, type:''' “Have a wonderful, happy, healthy birthday now and forever”'''.  
  
 
|-
 
|-
 
|  06:21
 
|  06:21
−
| And then click on''' Ok.''' We can now see this text also on the '''canvas'''.''' '''
+
| And then click on''' Ok.''' We can now see this text also on the '''canvas'''.
  
 
|-
 
|-
Line 317: Line 317:
 
|-
 
|-
 
| 06:56
 
| 06:56
−
|  It is a good habit  to name the layers appropriately
+
|  It is a good habit  to name the layers appropriately.
  
 
|-
 
|-
Line 333: Line 333:
 
|-
 
|-
 
|  07:18
 
|  07:18
−
|  Then, Go to''' Layers panel''' .Select the ''' Happy Birthday''' layer.  
+
|  Then, go to''' Layers panel'''. Select the ''' Happy Birthday''' layer.  
  
 
|-
 
|-
Line 341: Line 341:
 
|-
 
|-
 
|    07:29
 
|    07:29
−
|  Go to''' Keyframes panel '''and click on '''Add a keyframe. '''Move the text, as demonstrated.
+
|  Go to''' Keyframes panel '''and click on '''Add a keyframe. '''Move the text as demonstrated.
  
 
|-
 
|-
 
|    07:37
 
|    07:37
−
|  Next go to the '''Layers panel '''and select''' Now and forever''' layer.''' '''
+
|  Next, go to the '''Layers panel '''and select''' Now and forever''' layer.
  
 
|-
 
|-
Line 353: Line 353:
 
|-
 
|-
 
| 07:48  
 
| 07:48  
−
| Go to''' Keyframes panel '''and click on '''Add a keyframe '''once again'''.'''
+
| Go to''' Keyframes panel '''and click on '''Add a keyframe '''once again.
  
 
|-
 
|-
 
|    07:55
 
|    07:55
−
|Now go to the''' canvas''' and move the text '''Now and forever,''' as demonstrated.
+
|Now, go to the''' canvas''' and move the text '''Now and forever''' as demonstrated.
  
 
|-
 
|-
 
| 08:02
 
| 08:02
−
|  Now save our '''Synfig''' file.
+
|  Now '''save''' our '''Synfig''' file.
  
 
|-
 
|-
Line 369: Line 369:
 
|-
 
|-
 
| 08:09
 
| 08:09
−
|  Let us now check the preview. Go to''' File''' and then click on''' Preview. '''
+
|  Let us now check the '''preview'''. Go to''' File''' and then click on''' Preview. '''
  
 
|-
 
|-
Line 381: Line 381:
 
|-
 
|-
 
|  08:29
 
|  08:29
−
| We can see a preview of the animation on the screen.
+
| We can see a preview of the animation on the '''screen'''.
  
 
|-
 
|-
Line 397: Line 397:
 
|-
 
|-
 
|  08:43
 
|  08:43
−
| Go to''' Render setting '''window.
+
| Go to the ''' Render setting '''window.
  
 
|-
 
|-
Line 413: Line 413:
 
|-
 
|-
 
|  09:00
 
|  09:00
−
|  Click on''' Target''' drop down menu.  Select the extension as '''ffmpeg.'''
+
|  Click on''' Target''' drop down menu.  Select the '''extension''' as '''ffmpeg.'''
  
 
|-
 
|-
Line 421: Line 421:
 
|-
 
|-
 
|  09:20
 
|  09:20
−
|  Let us check our animation. Go to''' Document.'''  
+
|  Let us check our animation. Go to''' Documents.'''  
  
 
|-
 
|-
 
|  09:24
 
|  09:24
−
|Double Click on''' E- card-animation folder.'''  
+
|Double Click on''' E- card-animation''' folder.
  
 
|-
 
|-
Line 441: Line 441:
 
|-
 
|-
 
| 09:44
 
| 09:44
−
| Let us summarize. In this tutorial we learnt to create an''' E-card''' animation.
+
| Let us summarize. In this tutorial, we learnt to create an''' E-card''' animation.
  
 
|-
 
|-
 
| 09:50
 
| 09:50
−
| We also learnt to  Import images
+
| We also learnt to: import images,
  
 
|-
 
|-
 
|09:54
 
|09:54
−
| Animate the images. Do text animation
+
| animate the images, do text animation,
  
 
|-
 
|-
 
|09:57
 
|09:57
−
| Preview the animation and Render the animation in '''.avi''' format
+
| preview the animation and render the animation in '''.avi''' format.
  
 
|-
 
|-
 
|  10:04
 
|  10:04
−
|  Here is an assignment for you. Locate the '''Flower '''image which is provided in the '''Code files '''link  
+
|  Here is an assignment for you. Locate the '''Flower '''image which is provided in the '''Code files '''link.
  
 
|-
 
|-
Line 465: Line 465:
 
|-
 
|-
 
| 10:16
 
| 10:16
−
|  The video at the following link summarizes the Spoken Tutorial project. Please watch it.
+
|  The video at the following link summarizes the '''Spoken Tutorial''' project. Please watch it.
  
 
|-
 
|-
 
|  10:23
 
|  10:23
−
|  We conduct workshops using''' Spoken Tutorials.'''And give certificates. Please contact us.
+
|  We conduct workshops using''' Spoken Tutorials'''and give certificates. Please contact us.
  
 
|-
 
|-
Line 477: Line 477:
 
|-
 
|-
 
|  10:35
 
|  10:35
−
|  Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
+
|  Spoken Tutorial project is funded by '''NMEICT, MHRD,''' Government of India.
  
 
|-
 
|-

Revision as of 17:47, 20 September 2018

Time Narration
00:01 Welcome to the Spoken Tutorial on “E-card animation” using Synfig.
00:05 In this tutorial, we will learn to create an E-card animation using some png images.
00:11 Here, we will learn to- import png format images,
00:16 animate the images,
00:18 do text animation,
00:20 preview the animation,
00:22 render the animation in avi format.
00:25 For this tutorial, I am using Ubuntu Linux 14.04 OS,
00:32 Synfig version 1.0.2
00:35 Let us open Synfig.
00:38 Go to Dash home and type Synfig.
00:42 You can open Synfig by clicking on the logo.
00:47 Now, let us start creating the e-card animation.
00:52 We need to first save our Synfig file.
00:56 Go to File and click on Save.
00:59 Select the folder in which to save.
01:02 Type the filename as E-card-animation and click on the Save button .
01:07 First we will go to the Toolbox and click on the Rectangle tool.
01:12 Then draw a rectangle on the canvas as demonstrated.
01:17 We will change the settings such that the imported image fits inside the canvas.
01:23 To do so, go to Edit. Click on Preferences and then on Misc.
01:30 Click on the option Scaling new imported image to fix canvas.
01:35 Now, click on Ok. This option will import the images such that they fit within the canvas.
01:44 Please note: We need to import the images in png format.
01:49 This is because other image formats like jpg/jpeg behave differently on the Synfig canvas.
01:58 Also, after rendering, the output quality is better when png images are used.
02:05 Let’s come back to the Synfig interface.
02:09 Go to File and click on Import.
02:12 I have saved the required images in the E-card-animation folder, inside my Documents folder.
02:20 These images are provided in the Code files link, on this webpage itself.
02:26 Please locate the link “Code files” and save the images on your machine.
02:31 Now, practise along with me.
02:34 Select the Bg image and click on Import.
02:37 We get the Bg image on the canvas.
02:41 To resize the image- first hold the orange dot or the orange duck and move the mouse in or out as shown, to make the Bg image fit the canvas.
02:55 Now, select the Cake image in the folder and click on Import.
03:00 We get the Cake image on our canvas. In the same way, import all the other images too.
03:08 Observe, we have three new layers named - Cake, Flowers and Balloons.
03:14 Let us now resize these images. Go to Layers panel.
03:19 First select the Cake layer. Observe that on selection, the resize handles appear on the canvas.
03:27 Click on the orange dot and resize the Cake image.
03:32 Repeat the same process and resize the other two images also.
03:38 Now, move the images and keep them outside the canvas, as demonstrated.
03:45 Then go to the Animation panel. Click on Turn on animate editing mode icon.
03:52 Place the Time cursor on 30th frame.
03:56 Select the Cake layer.
03:58 Move the Cake image to the left bottom of the canvas, as shown.
04:05 Next, select the Balloons layer.
04:08 Place the Time cursor on the 30th frame.
04:11 Go to Keyframes panel and click on Add a keyframe.
04:16 Now, place the Time cursor on the 48th frame.
04:21 Go to Keyframes panel and click on Add a keyframe.
04:27 Move the Balloons image to the mid-left of the canvas.
04:31 Again, place the Time cursor on the 60th frame.
04:36 Go to Keyframes panel and click on Add a keyframe.
04:41 Move the Flowers image to the right bottom of the canvas.
04:47 Next, we will add a line of text to go with this animation.
04:52 Before that, let me switch off the animation.
04:57 To do so, click on Turn off animate editing mode icon.
05:02 Let us add the text. Since the default Fill colour is white, the text will not be visible on the white background.
05:12 So, I will change this colour to black.
05:16 Now, go to the Toolbox and click on the Text Tool.
05:20 Then click anywhere on the canvas. We get Input text dialog box.
05:27 Here, we will type the text “Happy Birthday”.
05:32 Click on Ok.
05:36 Observe that we can now see the text on the canvas.
05:40 Now, go to the Layers panel and select the text layer.
05:45 Next go to the Parameters panel and click on Size.
05:51 Change its value to 80 pixels and then change the colour value to violet.
05:57 Go to the Toolbox and click on the Text Tool. Once again click on the canvas.
06:04 We get another Input text dialog box.
06:09 In this text box, type: “Have a wonderful, happy, healthy birthday now and forever”.
06:21 And then click on Ok. We can now see this text also on the canvas.
06:27 Go to the Parameters panel and click on Size.
06:32 Change the value to 30 pixels and change the colour to black.
06:38 Now, let’s go to the Layers panel.
06:41 Click on the first text layer and change the name of that layer to Happy Birthday.
06:48 Similarly, click on the other text layer and change the layer name to Now and Forever.
06:56 It is a good habit to name the layers appropriately.
07:01 This will help us to locate them easily in the future.
07:06 Now, move the text layers outside the canvas, as demonstrated.
07:13 Click on Turn on animate editing mode icon.
07:18 Then, go to Layers panel. Select the Happy Birthday layer.
07:24 Now, Place the Time cursor on the 72nd frame.
07:29 Go to Keyframes panel and click on Add a keyframe. Move the text as demonstrated.
07:37 Next, go to the Layers panel and select Now and forever layer.
07:44 Then place the Time cursor on the 90th frame.
07:48 Go to Keyframes panel and click on Add a keyframe once again.
07:55 Now, go to the canvas and move the text Now and forever as demonstrated.
08:02 Now save our Synfig file.
08:05 Go to File and click on Save.
08:09 Let us now check the preview. Go to File and then click on Preview.
08:15 Set the quality as 0.5 and FPS as 24.
08:24 Click on the Preview button. Then click on the Play button.
08:29 We can see a preview of the animation on the screen.
08:33 Close the Preview window.
08:35 Lastly, let us render the animation.
08:38 To do that, click on File and then on Render.
08:43 Go to the Render setting window.
08:46 Click on Choose. Open the Save render as window.
08:50 Click on Document. Click on E-card-animation folder.
08:55 Change the name to E-card-animation.avi.
09:00 Click on Target drop down menu. Select the extension as ffmpeg.
09:06 Click on the Time tab and change the End time to 110. Then click on Render.
09:20 Let us check our animation. Go to Documents.
09:24 Double Click on E- card-animation folder.
09:26 Select E- card-animation.avi .
09:30 Right-click and play the animation using Firefox web browser.
09:39 With this, we have come to the end of this tutorial.
09:44 Let us summarize. In this tutorial, we learnt to create an E-card animation.
09:50 We also learnt to: import images,
09:54 animate the images, do text animation,
09:57 preview the animation and render the animation in .avi format.
10:04 Here is an assignment for you. Locate the Flower image which is provided in the Code files link.
10:11 Using the Flower images, create a similar animation.
10:16 The video at the following link summarizes the Spoken Tutorial project. Please watch it.
10:23 We conduct workshops using Spoken Tutorialsand give certificates. Please contact us.
10:31 Please post your timed queries in this forum.
10:35 Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
10:42 This is Shital Joshi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off. Thanks for joining.

Contributors and Content Editors

PoojaMoolya, Sandhya.np14

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Synfig/C2/E-card-animation/English-timed&oldid=44415"