PoojaMoolya at 05:08, 6 November 2020

2020-11-06T05:08:25Z

Sandhya.np14 at 12:17, 20 September 2018

2018-09-20T12:17:15Z

PoojaMoolya: 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..."

2018-09-05T08:53:12Z

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..."

New page

{| border=1
|| 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 filename as '''E-card-animation''' and click on '''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''' 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''' Document.'''

|-
| 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 Tutorials.'''And 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.

|}

@@ Line 373: / Line 373: @@
 |-
 |  08:15
-| Set the '''quality''' as 0.5 and '''FPS '''as 24.
+| Set the '''quality''' as 0.5 and '''Frame per second '''as 24.
 |-

Synfig/C2/E-card-animation/English-timed - Revision history

PoojaMoolya at 05:08, 6 November 2020

Sandhya.np14 at 12:17, 20 September 2018

PoojaMoolya: 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..."