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

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''Title of script:''' Create E-card animation
+
'''Title of script:''' Create E-card-animation
  
 
'''Author:''' Shital Joshi
 
'''Author:''' Shital Joshi
Line 13: Line 13:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Opening Slide
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Opening Slide
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Welcome to the Spoken Tutorial on “'''E- card animation”''' using''' Synfig.'''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Welcome to the Spoken Tutorial on “'''E-card animation”''' using''' Synfig.'''
  
 
|-
 
|-
Line 21: Line 21:
  
 
Here, we will learn to-
 
Here, we will learn to-
 +
 
* Import '''png''' format images  
 
* Import '''png''' format images  
 
* Animate the images
 
* Animate the images
Line 45: Line 46:
 
| style="border:0.75pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0417in;padding-right:0.0417in;"| Click on Synfig logo
 
| style="border:0.75pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0417in;padding-right:0.0417in;"| Click on Synfig logo
 
| style="border:0.75pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0417in;padding-right:0.0417in;"| You can open '''Synfig '''by clicking on the logo.
 
| style="border:0.75pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0417in;padding-right:0.0417in;"| You can open '''Synfig '''by clicking on the logo.
 +
 +
Now let us start creating the e-card animation.
 +
 +
|-
 +
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0375in;"|
 +
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0375in;"| We need to first save our '''Synfig''' file.
 +
 +
|-
 +
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0375in;"| Go to''' File >>'''Click on '''Save'''
 +
 +
 +
Select the folder to save.
 +
 +
 +
Type filename as '''E-card-animation''' >> click on '''Save.'''
 +
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0375in;"| 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.
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Go to '''Toolbox''' >>Click on '''Rectangle tool'''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Click on the '''Rectangle''' tool.
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| First, we will go to the '''Toolbox''' and click on the '''Rectangle tool'''.
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| First go to the '''Toolbox''' and click on the '''Rectangle''' tool.
  
 
|-
 
|-
Line 92: Line 115:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Go to''' File >>''' Click on''' Import >>Please select a file window.'''
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Go to''' File >>''' Click on''' Import >>Please select a file window.'''
 +
 +
  
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Go to''' File''' and click on''' Import.'''
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Go to''' File''' and click on''' Import.'''
  
  
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.
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"|  
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Slide
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| These images are provided in the '''Code files '''link, on this webpage itself.
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| These images are provided in the '''Code files '''link, on this webpage itself.
  
  
 
Pls locate the link “'''Code files'''” and save the images on your machine.
 
Pls locate the link “'''Code files'''” and save the images on your machine.
 
 
Now, practise along with me.
 
  
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Documents >>E-card animation folder >>''' Select''' Bg image >>'''Click on''' Bg image >> Import'''
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Documents >>E-card animation folder >>''' Select''' Bg image >>'''Click on''' Bg image >> Import'''
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Select the '''Bg''' image and click on''' Import.'''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Now, practise along with me.
 +
 
 +
 
 +
Select the '''Bg''' image and click on''' Import.'''
  
  
Line 124: Line 149:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Documents >>''' Select''' Cake >>'''Click on''' Cake >>Import'''
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Documents >>''' Select''' Cake >>'''Click on''' Cake >>Import'''
 +
 +
  
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Now, select the '''Cake''' image in the folder and click on''' Import.'''
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Now, select the '''Cake''' image in the folder and click on''' Import.'''
Line 137: Line 164:
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Observe, we have three new layers named''' -'''
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Observe, we have three new layers named''' -'''
  
'''Cake, Flowers''' and '''Balloons'''.
+
'''Cake''',''' Flowers''' and '''Balloons'''.
  
 
|-
 
|-
Line 147: Line 174:
  
  
First select the''' Cake '''layer.  
+
First select the''' Cake '''layer'''.'''
  
  
Line 305: Line 332:
  
  
Change the value to 15 and change the '''colour''' to black.
+
Change the value to 30 pixels and change the '''colour''' to black.
  
 
|-
 
|-
Line 317: Line 344:
 
Similarly, click on the other '''text layer '''and change the '''layer '''name to '''Now and Forever.'''
 
Similarly, click on the other '''text layer '''and change the '''layer '''name to '''Now and Forever.'''
  
 +
|-
 +
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"|
 +
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| It’s a good habit to name the '''layers '''appropriately.
  
It’s a good habit to name the '''layers '''appropriately. This will help us to locate them easily in the future.
+
This will help us to locate them easily in the future.
  
 
|-
 
|-
Line 327: Line 357:
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Canvas''' >>'''Turn on animate editing mode''' icon  
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Canvas''' >>'''Turn on animate editing mode''' icon  
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Click on''' Turn on animate editing mode''' icon.
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Click on''' Turn on animate editing mode''' icon.
 
 
 
  
 
|-
 
|-
Line 342: Line 369:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Time track panel''' >>'''Time cursor''' on 72nd frame  
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Time track panel''' >>'''Time cursor''' on 72nd frame  
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Now go to the '''Time track panel'''.
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Place the '''Time cursor''' on the 72nd frame.
 
+
 
+
Place the '''Time cursor''' on the 72nd frame.
+
  
 
|-
 
|-
Line 372: Line 396:
  
 
|-
 
|-
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Go to '''File >> Save >>'''Click on''' Document''' >>Click on''' E- card '''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Go to '''File >> Save '''
 
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Now save our '''Synfig''' file.
 
+
'''animation folder >>''' Click on '''Name >> write a name as a E- card animation >> '''Click on '''Save'''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Let us now save our '''Synfig '''file.
+
  
  
 
Go to''' File '''and click on '''Save.'''
 
Go to''' File '''and click on '''Save.'''
 
Choose a location to save.
 
 
 
I will click on '''Documents '''and then on''' E- card animation folder. '''
 
 
 
Type the name as '''E- card animation '''and click on the '''Save '''button.
 
  
 
|-
 
|-
Line 431: Line 444:
  
  
Click on''' E- card animation folder.'''
+
Click on''' E-card-animation folder.'''
  
  
Change the name to''' E-card animation.avi.'''
+
Change the name to''' E-card-animation.avi.'''
  
 
|-
 
|-
Line 441: Line 454:
  
  
Select the extension''' '''as '''ffmpeg.'''
+
Select the extension as '''ffmpeg.'''
  
 
|-
 
|-
Line 464: Line 477:
  
  
Double Click on''' E- card animation folder.'''  
+
Double Click on''' E- card-animation folder.'''  
  
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Select the card >> Right-click and play the animation  
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Select the card >> Right-click and play the animation  
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Select''' E- card animation.avi'''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Select''' E- card-animation.avi'''
  
  
Line 483: Line 496:
 
Let us summarize.
 
Let us summarize.
  
In this tutorial we learnt to create an''' E- card''' animation.
+
In this tutorial we learnt to create an''' E-card''' animation.
  
  
Line 493: Line 506:
 
* Preview the animation and
 
* Preview the animation and
 
* Render the animation in '''.avi''' format
 
* Render the animation in '''.avi''' format
 
 
  
 
|-
 
|-
Line 503: Line 514:
  
 
* Locate the '''Flower '''image which is provided in the '''Code files '''link.
 
* Locate the '''Flower '''image which is provided in the '''Code files '''link.
 
 
  
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Completed assignment
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Completed assignment
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| * Using the Flower images, create a similar animation
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"|  
 
+
* Using the Flower images, create a similar animation.
 
+
  
 
|-
 
|-
Line 547: Line 555:
  
 
|}
 
|}
 
E-cardanimation.txt
 
Displaying E-cardanimation.txt.
 

Latest revision as of 17:46, 16 January 2017

Title of script: Create E-card-animation

Author: Shital Joshi

Keywords: Import images, Animate the images, Text animation, Preview the animation, Render the animation in .avi format


Visual cue
Narration
Opening Slide Welcome to the Spoken Tutorial on “E-card animation” using Synfig.
Learning Objectives (Slide) 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
System requirements

(Slide)

For this tutorial, I am using
  • Ubuntu Linux 14.04 OS
  • Synfig version 1.0.2
Go to Dash home >>Synfig Let us open Synfig.

Go to Dash home and type Synfig.

Click on Synfig logo 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 >>Click on Save


Select the folder to save.


Type filename as E-card-animation >> click on Save.

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.

Click on the Rectangle tool. First go to the Toolbox and click on the Rectangle tool.
Draw a rectangle on Canvas as demonstrated Then draw a rectangle on the canvas, as demonstrated.
We will change the settings such that the imported image fits inside the canvas.
Go to Edit >> Click on Preferences >> Click on Misc. To do so, go to Edit.

Click on Preferences and then on Misc.

Click on Scaling new imported image to fix canvas >> Ok 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.

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

Switch back to Synfig Let’s come back to the Synfig interface.
Go to File >> Click on Import >>Please select a file window.


Go to File and click on Import.


I have saved the required images in the E-card-animation folder inside my Documents folder.

Slide These images are provided in the Code files link, on this webpage itself.


Pls locate the link “Code files” and save the images on your machine.

Documents >>E-card animation folder >> Select Bg image >>Click on Bg image >> Import Now, practise along with me.


Select the Bg image and click on Import.


We get the Bg image on the canvas.

Canvas>> Transform handles >>Hold the Orange dot (Orange duck). >>Move in or out direction 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.

Documents >> Select Cake >>Click on Cake >>Import


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.

Point to the layers Observe, we have three new layers named -

Cake, Flowers and Balloons.

Layers panel >> Select Cake layer 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.

Resize the image Click on the orange dot and resize the Cake image.
Resize the other two images Repeat the same process and resize the other two images also.
Move the images outside the canvas Now, move the images and keep them outside the canvas, as demonstrated.
Click on Turn on animate editing icon Then go to the Animation panel.


Click on Turn on animate editing mode icon.

Time track panel>> Time cursor on 30th frame >>Select the Cake layer >>Canvas move the Cake image Place the Time cursor on the 30th frame.


Select the Cake layer.


Move the Cake image to the left bottom of the canvas, as shown.

Go to Layers panel >>

Select the Balloons layer

Time cursor on 30th frame

Next, select the Balloons layer.


Place the Time cursor on the 30th frame.

Keyframes panel>>Click on Add a keyframe Go to Keyframes panel and click on Add a keyframe.
Time cursor on 48th frame >>Click on Add a keyframe >> Canvas move the Balloons image


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.

Time track panel >> Time cursor on 60th frame >>Click on Add a keyframe panel >> Canvas move the Flowers image


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.

Click on Turn on animate editing icon. To do so, click on Turn off animate editing mode icon.
Point to the Fill color Let us add the text.


Since the default Fill colour is white, the text will not be visible on the white background.

Change the color to black So, I will change this colour to black.



Toolbox >> Click on Text Tool >> Click on canvas Now, go to the Toolbox and click on the Text Tool.


Then click anywhere on the canvas.


We get Input text dialog box.

Click on Text >> Click on Ok Here, we will type the text “Happy Birthday”.


Click on Ok.


Observe that we can now see the text on the canvas.

Go to layers panel >> Select text >> Go to Parameters panel >> Click on size>> colour 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 80px and then change the colour value to violet.

Go to Toolbox >> Click on Text Tool >> Click on the canvas >> Input text Go to the Toolbox and click on the Text Tool.


Once again click on the canvas.


We get another Input text dialog box.

Click on OK 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 Parameters panel >> Click on size >> colour


Go to the Parameters panel and click on Size.


Change the value to 30 pixels and change the colour to black.

Go to Layers panel >> Click on text layers and change the names 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’s a good habit to name the layers appropriately.

This will help us to locate them easily in the future.

Move the text layers outside the canvas Now, move the text layers outside the canvas, as demonstrated.
Canvas >>Turn on animate editing mode icon Click on Turn on animate editing mode icon.
Go to Layers panel

Select Happy Birthday layer

Then go to Layers panel.


Select the Happy Birthday layer.

Time track panel >>Time cursor on 72nd frame Place the Time cursor on the 72nd frame.
Keyframes panel >> Click on Add a keyframe >> Canvas move the text Go to Keyframes panel and click on Add a keyframe.


Move the text, as demonstrated.

Layers panel >> Select Now and forever layer >>Time track panel>> Time cursor on 90 th frame Next. go to the Layers panel and select Now and forever layer.


Then place the Time cursor on the 90th frame.

Keyframes panel >> Click on Add a keyframe Canvas move the text


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.

Go to File >> Save Now save our Synfig file.


Go to File and click on Save.

File >> Click on Preview >>Preview option >> Quality >>FPS Let us now check the preview.


Go to File and then click on Preview.


Set the quality as 0.5 and FPS as 24.

Preview button >>Play Click on the Preview button.


Then click on the Play button.


We can see a preview of the animation on the screen.

Close Preview window Close the Preview window.
File >>Render >>Render setting window >> Choose >> Save render as window Lastly, let us render the animation.


To do that, click on File and then on Render.


Go to Render setting window.


Click on Choose. Open the Save render as window.

Document >> E- card animation folder >> Write a Name >> Click on Ok Click on Document.


Click on E-card-animation folder.


Change the name to E-card-animation.avi.

Click on Target >> Select ffmpeg Click on Target drop down menu.


Select the extension as ffmpeg.

Click on Time >> Click on End time >> Click on Render


Click on the Time tab and change the End time to 110.


Then click on Render.

Document >> Double Click on E- card animation folder >> Select


E-card animation.avi >>Double click on it

Let us check our animation.


Go to Document.


Double Click on E- card-animation folder.

Select the card >> Right-click and play the animation Select E- card-animation.avi


Right-click and play the animation using Firefox web browser.


<<PAUSE for 5 secs to show the animation>>

Summary (Slide) 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
Assignment

(Slide)

Here is an assignment for you.
  • Locate the Flower image which is provided in the Code files link.
Completed assignment
  • Using the Flower images, create a similar animation.
About Slide The video at the following link summarizes the Spoken Tutorial project.


Pls watch it.

Workshop slide


We conduct workshops using Spoken Tutorials.

And give certificates.


Please contact us.

Forum for specific questions Please post your timed queries in this forum.
Acknowledgment Slide 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.

Contributors and Content Editors

Nancyvarkey, Shital-joshi