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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 27: Line 27:
 
* Preview the animation
 
* Preview the animation
 
* Render the animation in '''avi '''format
 
* Render the animation in '''avi '''format
−
 
−
 
  
 
|-
 
|-
Line 38: Line 36:
 
* '''Ubuntu Linux''' 14.04 OS
 
* '''Ubuntu Linux''' 14.04 OS
 
* '''Synfig''' version 1.0.2
 
* '''Synfig''' version 1.0.2
−
 
−
 
  
 
|-
 
|-
Line 156: Line 152:
  
  
−
First select the''' Cake '''layer'''.'''
+
First select the''' Cake '''layer.
  
  
Line 252: Line 248:
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Change the color to black
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Change the color to black
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| So, I will change this colour to black.
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| So, I will change this colour to black.
−
 
−
 
−
 
  
 
|-
 
|-
Line 304: Line 297:
  
  
−
We can now see this text also on the '''canvas'''.''' '''
+
We can now see this text also on the '''canvas'''.
  
 
|-
 
|-
Line 314: Line 307:
  
  
−
Change the value to 30 and change the '''colour''' to black.
+
Change the value to 30 pixels and change the '''colour''' to black.
  
 
|-
 
|-
Line 336: Line 329:
 
| 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 403: Line 393:
  
  
−
Set the '''quality''' as 0.5''' '''and '''FPS '''as 24'''. '''
+
Set the '''quality''' as 0.5''' '''and '''FPS '''as 24.
  
 
|-
 
|-
Line 451: Line 441:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Click on''' Time''' >> Click on''' End time''' >> Click on''' Render'''
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Click on''' Time''' >> Click on''' End time''' >> Click on''' Render'''
−
 
  
  
Line 460: Line 449:
  
 
|-
 
|-
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Document >>''' Double Click on''' E- card animation folder >>''' Select''' '''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Document >>''' Double Click on''' E- card animation folder >>''' Select
  
  
Line 467: Line 456:
  
  
−
Go to''' Document.'''  
+
Go to''' Documents.'''  
  
  
Line 499: Line 488:
 
* Preview the animation and
 
* Preview the animation and
 
* Render the animation in '''.avi''' format
 
* Render the animation in '''.avi''' format
−
 
−
 
  
 
|-
 
|-
Line 509: Line 496:
  
 
* 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 528: Line 511:
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Workshop slide
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Workshop slide
  
−
 
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| We conduct workshops using''' Spoken Tutorials''' and give certificates.
−
 
+
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| We conduct workshops using''' Spoken Tutorials.'''
+
−
 
+
−
And give certificates.
+
  
  

Revision as of 17:43, 11 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.
Go to Toolbox >>Click on Rectangle tool First, we will 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.

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.


Now, practise along with me.

Documents >>E-card animation folder >> Select Bg image >>Click on Bg image >> Import 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 >>Click on Document >>Click on E- card


animation folder >> Click on Name >> write a name as a E- card animation >> Click on Save

Let us now save our Synfig file.


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.

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


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

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