Difference between revisions of "Synfig/C3/Underwater-animation/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 525: Line 525:
  
  
−
Click on '''Choose '''
 
  
 
|-
 
|-

Latest revision as of 16:05, 4 November 2020

Title of script: Create Underwater animation

Author: Shital

Keywords: Import images, Distortions options, Noise Gradient, Random animation, Create Underwater animation


Visual cue
Narration
Opening Slide Welcome to the Spoken Tutorial on “Underwater- animation” using Synfig.
Learning Objectives (Slide) In this tutorial we will familiarize ourselves with animating images in Synfig.

We will learn to

  • Import png and svg
  • Animate the images by using distortion
  • Add Noise Gradient
  • And use Random option for random animation

Using the above, we will learn to create an underwater animation.

System requirements

(Slide)

To record this tutorial, I am using
  • Ubuntu Linux 14.04 OS and
  • Synfig studio version 1.0.2


In the Synfig interface We are in the Synfig interface.
Point to the Title bar I have saved my Synfig file as Underwater-animation.


Pls do so likewise.

Now let us start creating our underwater animation.
Show these images on a slide For underwater animation we will need a background, some bubbles and some water plants.
Show these images on a slide We will also need some creatures like fish, frog, crab, etc.
Show these in a folder To create this animation, I am going to use the images that I created earlier.

For practise, learners can use the images provided in the Code Files link of this tutorial.

Show the images Background, octopus, water plant, Bubble, Fish as png images.
Show the images Frog and crab as svg images.
Let us start to import the png images for our underwater animation one by one.
Go to File >> Click on Import For that, go to File and click on Import.



Desktop >>Underwater-animation folder>> Select background.png >>


Click on background.png >>Import


Click on Desktop and Double click on Underwater animation


And select background.png.


Then click on Import.


We get the image on the canvas.

Slide In the same way, import Water plant, Fish-1, Fish-2 Octopus, Frog, Crab, Bubble as demonstrated.


You should see a list like this in Layers panel.

Layers panel To create separate group of each graphic like Plant, Fish-1 etc.


Select imported layers respectively.


Then right click on Layer.


Select Group layer.



Layers panel Let’s now rename this group layers, as demonstrated.



Go to Canvas Come back to the Canvas.


Scale all the images and arrange the underwater scene as shown here.

Point out Frog eye’s Sometimes while importing svg file it may show errors in synfig. As you can see here frog eyes are missing so i will draw it again.
Time track panel >>Time cursor on start frame>> Click on turn on animate editing mode icon >> We will now go to the Time track panel.


Place the Time cursor on start frame.


Click on Turn on animate editing mode icon.

Go to Layers panel >> Right click on Fish-1 group layer >>Right click on Fish-1 layer >>New layer>> Distortion>>Twirl Go to Layers panel. Click on the triangle to expand Fish-1 group layer.


Right-click on the Fish-1 layer. png


Go to New layer then select Distortion and click on Twirl.

Go to Canvas >> Twirl effect Now we will animate the tail part of the fish.


Back to the canvas. Place the Twirl effect, as demonstrated.


Adjust the Twirl.

Place the Time cursor on 10h frame >>Go to Canvas >>Twirl handles >> Parameters panel>> Rotations >>-50.60 Now, move the cursor to the 10th frame.


Go back to the canvas.


Twirl effect can be done by moving the Twirl handles that is

the blue dot as demonstrated.


We see the Rotation value as -50.60 degree.

Slides Move the cursor to the 18th and 24th frames one by one and repeat the same steps.


Change the amount of rotations as 32 degrees and -5 degrees, respectively.

Point out fins of the fish Likewise, I will give twirl effects twice, for animating the upper and lower fins of the fish.
Right click on top most layer of Fish group layer>> New layer>> Other>> Time loop For repeatative animation till the end, we need to give a Time Loop.


For that, right-click on the topmost layer of the Fish group layer.


Go to New layer, then Other and click on Time Loop.

Go to Layers panel >> Time track panel>>Canvas Now go to Layers panel and select Fish layer.


Go to the Time track panel and Place the cursor on the zeroth frame.


Move the fish as demonstrated.

Time track panel>>100th frame >> move Fish on Canvas Go to Time track panel and place the Cursor on the 100th frame.


Move the fish as demonstrated.

Similarly, we will animate Fish-2.
Save file Let’s save our file before proceeding further.
Go to Layers panel Now let’s animate the crab claws.


Go to Layers panel.

Crab group layer>> Click on the triangle to expand Crab group layer.
Crab layer >> select first part of Claw-1 >> right-click Here, i need to do separate groups for different parts of the crab.


Then select the first part of Claw-1 and right-click on it.

New layer >> Transform >> Rotate Go to New layer and then Transform and click on Rotate.


Adjust the rotate handle as demonstrated.

Time track panel Go to the Time track panel and place the cursor on the 10th frame.
Parameters panel>>Rotate amount>>18 degrees Now go to the Parameters panel and change the Rotate amount to 18 degrees.
Go to Layers panel >>New layer>>Transform>> Rotate Again, go to the Layers panel.


Select the second part of Claw-1 and right-click on it.


Go to New layer then Transform and click on Rotate.


Adjust the rotate handle as demonstrated.

Time track panel>> Parameter panel>> rotate amount Go to Time track panel and place the cursor on the 10th frame.

Go to Parameters panel and change the rotate Amount to -7 degrees.

Likewise, animate Claw-2.
Layers panel Next, we will animate the eyes of the crab.


Go to Layers panel and open the Eye group layer.


Select the black parts of both the eyeballs using Ctrl key.

Time track panel >> Canvas Go to Time track panel and place the cursor on the 9th frame.


Now go to the Canvas and move the black parts of both the eyeballs as demonstrated.

Time track panel>> Cursor on 18 th>> Canvas Again, go to the Time track panel and place the cursor on the 18th frame.


Now go to the Canvas and move the black parts of both the eyeballs as demonstrated.


For repeatative animation till the end apply the Time loop



Save file Once again let’s save our file before proceeding further.
Layers panel >> open Frog group layer Next we will animate the mouth and tongue of the frog.


To do that, first go to the Layers panel and open the Frog group layer.

Select mouth and tongue layers >> group them >> name as Mouth and tongue Select the layers of mouth and tongue and group them together.


Let’s name this group as Mouth and tongue.

Layers panel>> select the mouth of the frog layer Go to Layers panel and select the mouth of the frog.
Time track panel>> 23rd frame


Then go to the Time track panel.


Place the cursor on the 23rd frame.


Move the nodes of the layer as demonstrated.

Layers panel>> Time track panel >>23rd frame. Go to Layers panel and this time, select the tongue of the frog.


Now go to the Time track panel and place the cursor on the 23rd frame.

Parameters panel>> Mark active point as off Go to Parameters panel and open the vertices group.

by clicking on triangle icon of vertices group.


Select the number of vertex 1 and right-click on it.


Click on Mark active point as off option.


Do likewise for Vertex numbers 2 to 12 on the same keyframe.

Go to Layers panel >> Right click on Water plant layer >> New layer>>Distortion>>Twirl Go to Layers panel and right-click on Water plant. png layer


Go to New layer, then to Distortion and click on Twirl.

Place the Cursor on 13th frame>> >>Parameter panel>>Rotation>> Twirl>> -9 degrees Go to Time track panel and place the cursor on the 13th frame.


Go to Parameters panel.


Change the Rotation value of Twirl to 23 degrees.


Now go to 25th frame. Here change the Rotation value of Twirl to -9 degrees.

Save file Save the file once again.
Layers panel>>Octopus group layer>> Time track panel>>

Canvas

Next we will animate the octopus.


Select Octopus group layer.


Go to Canvas and move the Octopus on keyframes 0, 75, 135 and 185 as demonstrated.

Layers panel>>select Octopus png layer>> right-click >> go to New Layer>> Distortion>> Stretch Go to Layers panel and select Octopus png layer.


Right-click on that layer.


Now go to New Layer, then Distortion and click on Stretch.

Time track panel>> 138th frame >> Canvas>> move the orange dot Go to Time track panel and place the cursor on 138 frame.


Come back to the canvas.


Move the orange dot to get stretch effect on the octopus image, as demonstrated here.

Similarly, place the cursor on 145, 150, 160, 168, 172 and move the orange dot of stretch as demonstrated.
Layers panel>> Bubble layer>> Right click>> New layer>> Transform>> Translate Next, select the Bubble layer.


Right-click on it and go to New Layer and then Transform.


Click on Translate.

Parameters panel>> Origin>> Right click>> Convert>> Random Go to Parameters panel and right-click on Origin.


Then go to Convert and click on Random.



Layers panel>> Bubble layer>> Duplicate layer>> Repeat 4 more times Go to Layers panel.


Select the Bubble layer and click on Duplicate layer icon.


Repeat 3 more times and arrange the bubbles as shown here.

Layers panel>> Topmost layer>> Right Click>> New layer>> Gradient>>Noise Gradient Go to Layers panel.


Select the topmost layer.


Right-click on it and go to New layer then Gradient.


Click on Noise Gradient.



Parameters panel>>Amount>>Blend method >> Multiply>> Size>> 300 pixel Go to Parameters panel.


Change the Amount to 0.5


Change the Blend method to Multiply and


change the Size to 300 pixel as demonstrated.

Time track panel>> Cursor on 200th frame>> Parameters panel>> Random noise seeds Go to Time track panel and place the cursor on 200th frame.


Go to Parameters panel. Increase the value of Random Noise Seeds.



File >> Save >> Document>> Save Lastly, save the file.
File >> Render >>Render setting window >> Choose Open the Save render as window


Go to File and click on Render.


Go to Render setting window.


Desktop >> Click on Name >> Select avi extension>> Target >> ffmpeg Change the extension to avi


Go to Target drop-down menu and select ffmpeg.

Click on End time>>200>> Click on Render


Click on End time and change it to 200.


And click on Render.

Desktop >> Select Octopus animation. avi >>Double click on it To see the animation, go to Desktop.


Select Underwater-animation. avi


Double-click on it.

Summary (Slide) With this, we have come to the end of this tutorial. Let us summarize.

In this tutorial we learnt about Underwater animation in Synfig.

We also learnt to

  • Import png and svg
  • Animate with Distortions options like twirl, stretch.
  • Add Noise Gradient.
  • Use Random option for random animation


Assignment

(Slide)

Here is an assignment for you.
  • Locate the simple design shape file which is provided in the Code files link.
  • Import this file
  • Animate by using twirl effect


Completed assignment Your completed assignment should look like this.
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.

Spoken Tutorial Forum slide Please post your timed queries in this forum.
Acknowledgment Slide Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
This is Shital along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.


Thanks for joining.

Contributors and Content Editors

Arthi, Nancyvarkey, Shital-joshi

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Synfig/C3/Underwater-animation/English&oldid=54305"