Difference between revisions of "Synfig/C2/E-card-animation/English"
Shital-joshi (Talk | contribs) |
Nancyvarkey (Talk | contribs) |
||
(2 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 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 50: | 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;"| | + | | 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 | + | | 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 103: | Line 121: | ||
− | 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. | ||
Line 112: | Line 130: | ||
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. | ||
+ | |- | ||
+ | | 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;"| Now, practise along with me. | ||
− | |||
− | + | Select the '''Bg''' image and click on''' Import.''' | |
− | + | ||
− | + | ||
Line 314: | Line 332: | ||
− | Change the value to 30 and change the '''colour''' to black. | + | Change the value to 30 pixels and change the '''colour''' to black. |
|- | |- | ||
Line 326: | 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. | ||
− | + | This will help us to locate them easily in the future. | |
|- | |- | ||
Line 336: | 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 378: | Line 396: | ||
|- | |- | ||
− | | style="border:1pt solid #000001;padding-top:0in;padding-bottom:0.0382in;padding-left:0.0382in;padding-right:0in;"| Go to '''File >> | + | | 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. | |
− | + | ||
− | + | ||
− | | 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 '''Save.''' | Go to''' File '''and click on '''Save.''' | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|- | |- | ||
Line 437: | 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 447: | Line 454: | ||
− | Select the extension | + | Select the extension as '''ffmpeg.''' |
|- | |- | ||
Line 470: | 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 489: | 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 499: | Line 506: | ||
* Preview the animation and | * Preview the animation and | ||
* Render the animation in '''.avi''' format | * Render the animation in '''.avi''' format | ||
− | |||
− | |||
|- | |- | ||
Line 509: | 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. | |
− | + | ||
|- | |- |
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
|
|
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.
|
System requirements
(Slide) |
For this tutorial, I am using
|
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
|
Go to File and click on Save.
|
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.
|
Slide | Please note:
We need to import the images in png format.
|
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.
|
Slide | These images are provided in the Code files link, on this webpage itself.
|
Documents >>E-card animation folder >> Select Bg image >>Click on Bg image >> Import | Now, practise along with me.
|
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.
|
Documents >> Select Cake >>Click on Cake >>Import
|
Now, select the Cake image in the folder and click on Import.
|
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.
|
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.
|
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.
|
Go to Layers panel >>
Select the Balloons layer Time cursor on 30th frame |
Next, select the Balloons layer.
|
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.
|
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.
|
Next, we will add a line of text to go with this 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.
|
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.
|
Click on Text >> Click on Ok | Here, we will type the text “Happy Birthday”.
|
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.
|
Go to Toolbox >> Click on Text Tool >> Click on the canvas >> Input text | Go to the Toolbox and click on the Text Tool.
|
Click on OK | In this text box, type “Have a wonderful, happy, healthy birthday now and forever”.
|
Go to Parameters panel >> Click on size >> colour
|
Go to the Parameters panel and click on Size.
|
Go to Layers panel >> Click on text layers and change the names | Now, let’s go to the Layers panel.
|
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.
|
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.
|
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.
|
Keyframes panel >> Click on Add a keyframe Canvas move the text
|
Go to Keyframes panel and click on Add a keyframe once again.
|
Go to File >> Save | Now save our Synfig file.
|
File >> Click on Preview >>Preview option >> Quality >>FPS | Let us now check the preview.
|
Preview button >>Play | Click on the Preview button.
|
Close Preview window | Close the Preview window. |
File >>Render >>Render setting window >> Choose >> Save render as window | Lastly, let us render the animation.
|
Document >> E- card animation folder >> Write a Name >> Click on Ok | Click on Document.
|
Click on Target >> Select ffmpeg | Click on Target drop down menu.
|
Click on Time >> Click on End time >> Click on Render
|
Click on the Time tab and change the End time to 110.
|
Document >> Double Click on E- card animation folder >> Select
|
Let us check our animation.
|
Select the card >> Right-click and play the animation | Select E- card-animation.avi
|
Summary (Slide) | With this, we have come to the end of this tutorial.
In this tutorial we learnt to create an E-card animation.
|
Assignment
(Slide) |
Here is an assignment for you.
|
Completed assignment |
|
About Slide | The video at the following link summarizes the Spoken Tutorial project.
|
Workshop slide
|
We conduct workshops using Spoken Tutorials.
And give certificates.
|
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.
|