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