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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of script:''' Create E-card animation '''Author:''' Shital Joshi '''Keywords:''' Import images, Animate the images, Text animation, Preview the animation, Render th...")
 
Line 1: Line 1:
 +
 +
Conversation opened. 2 messages. All messages read.
 +
 +
Skip to content
 +
Using Gmail with screen readers
 +
Available Bella Tony
 +
Available pawan naidu
 +
Idle arthi anbalagan
 +
Idle Arthi Anbalagan
 +
Idle Rupasha Roy
 +
Idle SHEETAL PRABHU
 +
Idle Sucheta Bose
 +
Chatting khushalsingh Rajput
 +
Offline Kirti Ambre
 +
Vivek Joshi  Invited
 +
 +
 +
More
 +
2 of 1,286
 +
 +
script odt
 +
Inbox
 +
x
 +
shital joshi Attachments12:36 PM (13 minutes ago)
 +
 +
Arthi Anbalagan
 +
 +
Attachments12:38 PM (11 minutes ago)
 +
 +
to me
 +
On Fri, Dec 16, 2016 at 12:36 PM, shital joshi <jshitaljoshi8@gmail.com> wrote:
 +
Attachments area
 +
 +
Click here to Reply or Forward
 +
14.57 GB (97%) of 15 GB used
 +
Manage
 +
Terms - Privacy
 +
Last account activity: 35 minutes ago
 +
Details
 +
 +
 +
Arthi Anbalagan's profile photo
 +
Arthi Anbalagan
 +
Recent photos
 +
View photo in message
 +
View photo in message
 +
Show details
 +
Offline
 +
khushalsingh Rajput
 +
MinimizePop-outClose
 +
Compose:
 +
New Message
 +
MinimizePop-outClose
 +
 
'''Title of script:''' Create E-card animation
 
'''Title of script:''' Create E-card animation
  
 
'''Author:''' Shital Joshi
 
'''Author:''' Shital Joshi
  
−
'''Keywords:''' Import images, Animate the images, Text animation, Preview the animation, Render the animation in avi format
+
'''Keywords:''' Import images, Animate the images, Text animation, Preview the animation, Render the animation in .avi format
  
  
Line 17: Line 71:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Learning Objectives (Slide)
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Learning Objectives (Slide)
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| In this tutorial, we will learn to create an '''E-card animation '''using some '''.png '''images.
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| In this tutorial, we will learn to create an '''E-card animation '''using some '''png '''images.
  
  
Line 202: Line 256:
  
 
|-
 
|-
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Keyframes >>Click on '''Add a keyframe'''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Keyframes panel'''>>Click on '''Add a keyframe'''
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Go to '''Keyframes''' and click on '''Add a keyframe.'''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Go to '''Keyframes panel''' and click on '''Add a keyframe.'''
  
 
|-
 
|-
Line 213: Line 267:
  
  
−
Go to '''Keyframes '''and click on '''Add a keyframe.'''
+
Go to '''Keyframes panel '''and click on '''Add a keyframe.'''
  
  
Line 219: Line 273:
  
 
|-
 
|-
−
| 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 60th frame >>Click on '''Add a keyframe '''>> '''Canvas''' move the '''Flowers''' image
+
| 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 60th frame >>Click on '''Add a keyframe panel '''>> '''Canvas''' move the '''Flowers''' image
  
  
Line 226: Line 280:
  
  
−
Go to '''Keyframes '''and click on '''Add a keyframe.'''
+
Go to '''Keyframes panel '''and click on '''Add a keyframe.'''
  
  
Line 243: Line 297:
  
 
|-
 
|-
−
| 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;"| Point to the '''Fill color'''
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Let us add the text.
 
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Let us add the text.
  
  
−
Since the default Fill colour is white, the text will not be visible on the white background.
+
Since the default '''Fill colour '''is white, the text will not be visible on the white background.
  
 
|-
 
|-
−
| 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;"| 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 284: Line 338:
  
  
−
Change its value to 20px and then change the '''colour '''value''' '''to violet.
+
Change its value to 80px and then change the '''colour '''value''' '''to violet.
  
 
|-
 
|-
Line 314: Line 368:
  
  
−
Change the value to 10 and change the '''colour''' to black.
+
Change the value to 15 and change the '''colour''' to black.
  
 
|-
 
|-
Line 357: Line 411:
  
 
|-
 
|-
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Keyframes''' >> Click on '''Add a keyframe '''>> '''Canvas''' move the text
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Keyframes panel''' >> Click on '''Add a keyframe '''>> '''Canvas''' move the text
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Go to''' Keyframes '''and click on '''Add a keyframe. '''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Go to''' Keyframes panel '''and click on '''Add a keyframe. '''
  
  
Line 371: Line 425:
  
 
|-
 
|-
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Keyframes''' >> Click on '''Add a keyframe''' '''Canvas''' move the text
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| '''Keyframes panel''' >> Click on '''Add a keyframe''' '''Canvas''' move the text
  
  
  
−
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Go to''' Keyframes '''and click on '''Add a keyframe '''once again'''.'''
+
| style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0.0382in;"| Go to''' Keyframes panel '''and click on '''Add a keyframe '''once again'''.'''
  
  
Line 556: Line 610:
  
 
|}
 
|}
 +
 +
E-cardanimation.txt
 +
Displaying E-cardanimation.txt.

Revision as of 12:54, 16 December 2016

Conversation opened. 2 messages. All messages read.

Skip to content Using Gmail with screen readers Available Bella Tony Available pawan naidu Idle arthi anbalagan Idle Arthi Anbalagan Idle Rupasha Roy Idle SHEETAL PRABHU Idle Sucheta Bose Chatting khushalsingh Rajput Offline Kirti Ambre Vivek Joshi Invited


More 2 of 1,286

script odt Inbox x shital joshi Attachments12:36 PM (13 minutes ago)

Arthi Anbalagan

Attachments12:38 PM (11 minutes ago)

to me On Fri, Dec 16, 2016 at 12:36 PM, shital joshi <jshitaljoshi8@gmail.com> wrote: Attachments area

Click here to Reply or Forward 14.57 GB (97%) of 15 GB used Manage Terms - Privacy Last account activity: 35 minutes ago Details


Arthi Anbalagan's profile photo Arthi Anbalagan Recent photos View photo in message View photo in message Show details Offline khushalsingh Rajput MinimizePop-outClose Compose: New Message MinimizePop-outClose

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 15 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 Now go to the Time track panel.


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

E-cardanimation.txt Displaying E-cardanimation.txt.

Contributors and Content Editors

Nancyvarkey, Shital-joshi

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