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

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>> 23^rd 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 200^th 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

@@ Line 70: / Line 70: @@
 |-
 | style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;"| '''Show the images'''
-| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| Background, octopus, water plant, Fishe as '''png '''images.
+| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| Background, octopus, water plant, Bubble, Fish as '''png '''images.
 |-
 | style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;"| '''Show the images'''
-| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| frog, bubble and crab as '''svg''' images.
+| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| Frog and crab as '''svg''' images.
 |-
@@ Line 98: / Line 98: @@
-And select '''background. png.'''
+And select '''background.png.'''
@@ Line 145: / Line 145: @@
 |-
 | style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;"| Point out Frog eye’s
-| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| Sometimes while importing '''svg '''file it may shows errors in '''synfig'''. As you can see here frog eyes are missing so i will draw it again.
+| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| 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.
 |-
@@ Line 185: / Line 185: @@
-'''Twirl''' effect can be done''' '''by Move the '''Twirl '''handles, by moving the blue dot as demonstrated.
+'''Twirl''' effect can be done''' '''by moving''' '''the '''Twirl '''handles that is
+the blue dot as demonstrated.
@@ Line 203: / Line 205: @@
 |-
 | style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;"| Right click on top most layer of '''Fish group layer>> New layer>> Other>> Time loop'''
-| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| For repeating animation till the end, we need to give a '''Time Loop.'''
+| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| For repeatative animation till the end, we need to give a '''Time Loop.'''
@@ Line 283: / Line 285: @@
 |-
-| style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;"| '''Time track panel>> Parameter panel>> rotate amount >> -7 '''degrees
+| style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;"| '''Time track panel>> Parameter panel>> rotate amount '''
 | style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| Go to '''Time track pane'''l and place the cursor on the 10th '''frame'''.
@@ Line 315: / Line 317: @@
 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'''
@@ Line 441: / Line 446: @@
-Right-click on it and go to''' New Layer''' then '''Transform'''.
+Right-click on it and go to''' New Layer''' and then '''Transform'''.
@@ Line 464: / Line 469: @@
-Repeat 4 more times and arrange the bubbles as shown here.
+Repeat 3 more times and arrange the bubbles as shown here.
 |-
@@ Line 487: / Line 492: @@
-Change the '''Amount '''
+Change the '''Amount '''to 0.5
@@ Line 493: / Line 498: @@
-change''' '''the '''size '''to 60 t0 300''' pixel '''as demonstrated.
+change''' '''the '''Size ''' to 300''' pixel '''as demonstrated.
 |-
@@ Line 520: / Line 525: @@
-Click on '''Choose '''
 |-
 | style="border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.191cm;"| '''Desktop >>''' Click on '''Name >> '''Select '''avi '''extension>> '''Target''' >> '''ffmpeg'''
-| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| Then click on '''Desktop. '''
+| style="border:0.5pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.095cm;padding-right:0.097cm;"| Change the''' '''extension to''' avi'''
-Click on '''Name '''and change the name as a''' Underwater-animation.'''
-And click on''' Ok'''.
-Change the''' '''extension to''' avi'''

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

Latest revision as of 16:05, 4 November 2020

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools