Write On

From Synfig Studio :: Documentation
Jump to: navigation, search
m (moved Doc talk:Write On to Doc:Write On: I think this tutorial has been put in the talk section by mistake. There were no links pointing to it, so it was not visible by anyone using the wiki or performing a standard search.)
m (Text replace - "{{Category|NewTerminology}}" to "{{NewTerminology}}")
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This is a tutorial the "Write On" effect.  This tutorial was actually written while using synfigstudio-0.63.00.exe (you can download the Windows executable at http://sourceforge.net/projects/synfig/files/binaries/windows-binaries/ )I am assured by the experts that it will work equally well on the current release -0.63.02.exe. Note, however, some of the Synfig icons have changed since -0.63.00.exe.  
+
<!-- Page info -->
 +
{{Title|Write On}}
 +
{{Category|Tutorials}}
 +
{{Category|Tutorials Intermediate}}
 +
{{NewTerminology}}
 +
<!-- Page info end -->
 +
 
 +
  This tutorial was actually written while using synfigstudio 0.63.00 .  Somes of the screenshots needs to be updated with 0.64.0
 +
 
 +
This is a tutorial the "Write On" effect.  
  
 
This tutorial may seem lengthy but it is only because I have tried to indicate every little step for the new user.  After you have done it once or twice, it really isn’t a long process.   
 
This tutorial may seem lengthy but it is only because I have tried to indicate every little step for the new user.  After you have done it once or twice, it really isn’t a long process.   
  
Open Synfig Studio.  First in the tool box, change the interpolation to “Linear”.  Mine defaults to “TCB”.
+
Open Synfig Studio.  First in the {{l|Toolbox}}, change the interpolation to “Linear”.  Mine defaults to “TCB”.
 
   
 
   
 
[[File:Writeon1.jpg]]
 
[[File:Writeon1.jpg]]
  
Next, in the bottom of the workspace canvas, make sure the lock icon is set to “Past keyframes locked”.   This is accomplished by repeatedly clicking on the icon until the correct setting is achieved.
+
Next, in the bottom of the canvas, make sure the lock icon is set to “Past keyframes locked”. This is accomplished by repeatedly clicking on the icon until the correct setting is achieved.
 
   
 
   
 
[[File:Writeon2.jpg]]
 
[[File:Writeon2.jpg]]
  
Next, we want to edit canvas properties.  Click the 'caret' menu between the horizontal and vertical rules, in the top left hand corner of the canvas.  In Linux, this caret is easily seen; in windows it is microscopic:
+
Next, we want to edit canvas properties.  Click the {{l|Canvas Menu Caret|Caret Menu}} between the horizontal and vertical rules, in the top left hand corner of the canvas.  In Linux, this caret is easily seen; in windows it is microscopic:
 
   
 
   
 
[[File:Writeon3.jpg]]
 
[[File:Writeon3.jpg]]
Line 21: Line 30:
  
  
Give a name and description for your canvas, then click "Apply"   Go to the "Time" tab and make sure to edit "End Time". Change "5s" to whatever number of seconds you want the duration of your animation to be.
+
Give a name and description for your canvas, then click "Apply". Go to the "Time" tab and make sure to edit "End Time". Change "5s" to whatever number of seconds you want the duration of your animation to be.
If you are going to import a picture to trace, I recommend you change the image size to match that imported drawing.  If the drawing is very large, just change the image size to match the proportions of the imported image.  Also (in the case of a large image to trace) make sure the that Synfig will automatically scale that image to your canvas size. At the top of the toolbox, ->File ->Setup  ->Misc tab-> check box that says “scale to canvas size”. If you are not going to import a picture to trace, don’t worry about any of this.
+
If you are going to import a picture to trace, I recommend you change the image size to match that imported drawing.  If the drawing is very large, just change the image size to match the proportions of the imported image.  Also (in the case of a large image to trace) make sure that Synfig will automatically scale that image to your canvas size. At the top of the toolbox, ->File ->Setup  ->Misc tab-> check box that says “scale to canvas size”. If you are not going to import a picture to trace, don’t worry about any of this.
  
Now to start drawing.  In the Toolbox, select the Bline tool.  [[File:Writeon5.jpg]]
+
Now to start drawing.  In the Toolbox, select the {{l|Spline Tool}}.  [[File:Writeon5.jpg]]
  
In the tools options panel, make sure only the “Create Advanced Outline BLine” is checked.
+
In the {{l|Tool Options Panel}}, make sure only the {{Literal|Create Advanced Outline Spline}} is checked.
 
   
 
   
 
[[File:Writeon6.jpg]]
 
[[File:Writeon6.jpg]]
  
 
By the way if you are looking a panel that doesn’t seem to be on your screen, go to Toolbox -> File -> Panels.
 
By the way if you are looking a panel that doesn’t seem to be on your screen, go to Toolbox -> File -> Panels.
Now start drawing your shape by clicking your mouse at various intervals on the workspace canvas. When you have finished drawing your line, click on the transform tool [[File:Writeon7.jpg]]in the Toolbox. Note that if you are doing detailed drawing, you can zoom in on your picture or zoom out. Now that you have drawn your first line, you will probably see a bunch of yellow and orange circles. The orange ones are vertex ducks, the yellow circles are tangent ducks, and the turquoise circles are the radius ducks. Use the icons at the top of the drawing canvas to make those ducks disappear. To keep the view simple, we just want to see the purple width ducks.
+
Now start drawing your shape by clicking your mouse at various intervals on the workspace canvas. When you have finished drawing your line, click on the {{l|Transform Tool}} [[File:Writeon7.jpg]] in the Toolbox. Note that if you are doing detailed drawing, you can zoom in on your picture or zoom out. Now that you have drawn your first line, you will probably see a bunch of yellow and orange circles. The orange ones are Vertex {{l|Handle|Handles}}, the yellow circles are Tangent Handles, and the turquoise circles are the {{Literal|Radius}} Handles. Use the icons at the top of the drawing canvas to make those Handles disappear. To keep the view simple, we just want to see the purple {{Literal|Width}} Handles.
 
   
 
   
 
[[File:Writeon8.jpg]]
 
[[File:Writeon8.jpg]]
  
Now that your first BLine is complete, you will note that you have created a new layer in the Layers panel. If you are going to have several BLines, you will have several layers so I recommend you rename the layers as you go, so you can distinguish it from the other layers later on.
+
Now that your first {{l|Spline}} is complete, you will note that you have created a new layer in the {{l|Layers Panel}}. If you are going to have several Splines, you will have several layers so I recommend you rename the layers as you go, so you can distinguish it from the other layers later on.
Now we have a bit of work to do in the Params panel before we start animation. Make sure your new layer is highlighted. Next in the Params panel as shown below:
+
Now we have a bit of work to do in the {{l|Parameters Panel}} before we start animation. Make sure your new layer is highlighted. Next in the {{l|Parameters Panel}} as shown below:
  
 
[[File:Writeon9.jpg]]
 
[[File:Writeon9.jpg]]
  
Expand the Width Points List by clicking on the arrow. Do the same for Width points 001 and 002. Your screen should then look like the picture below:
+
Expand the Width Points List by clicking on the arrow. Do the same for Width points 001 and 002. Your screen should then look like the picture below:
 
   
 
   
 
[[File:WriteOn10.jpg]]
 
[[File:WriteOn10.jpg]]
Line 48: Line 57:
 
[[File:WriteOn11.jpg]]
 
[[File:WriteOn11.jpg]]
  
You will note that when we change the position values, we are effectively changing the position of our purple width ducks.
+
You will note that when we change the position values, we are effectively changing the position of our purple width Handles.
 
At this point you can also change the Width values in the table about to 2.000 or 3.000 depending how thick you want your line to be.
 
At this point you can also change the Width values in the table about to 2.000 or 3.000 depending how thick you want your line to be.
  
Now to animate.   Click the green circle at the bottom right of the drawing canvas to switch to the animation mode. The circle will change to a red color.
+
Now to animate. Click the green circle at the bottom right of the drawing canvas to switch to the animation mode. The circle will change to a red color.
  
 
[[File:WriteOn12.jpg]]   
 
[[File:WriteOn12.jpg]]   
 
[[File:WriteOn13.jpg]]
 
[[File:WriteOn13.jpg]]
 
                  
 
                  
In the Keyframes panel, click on the  +  symbol to add the first keyframe.   Add the description “Start” as this is time zero.
+
In the {{l|Keyframes Panel}}, click on the  +  symbol to add the first {{l|Keyframe}}. Add the description “Start” as this is time zero.
  
 
[[File:WriteOn14.jpg]]
 
[[File:WriteOn14.jpg]]
 
 
   
 
   
Next, in the timeline at the bottom of the drawing canvas, click in the timeline when you want your first BLine to complete.   In the example below, I have selected 1 second, 3 frames.
+
Next, in the {{l|Timetrack Panel}} at the bottom of the drawing canvas, click in the time when you want your first Spline to complete. In the example below, I have selected 1 second, 3 frames.
  
 
[[File:WriteOn15.jpg]]
 
[[File:WriteOn15.jpg]]
  
You will now be able to add another Keyframe (by clicking on the + symbol) at this point in time.
+
You will now be able to add another {{l|Keyframe}} (by clicking on the + symbol) at this point in time.
  
 
[[File:WriteOn_16.jpg]]
 
[[File:WriteOn_16.jpg]]
  
+
Now, let us jump back to the first Keyframes by clicking the (JMP) in the first Keyframes line. At this first Keyframe we want to change the position of the width Handle from 0 and 1 (as we set them earlier) to 0 and 0 as shown below:
Now, let us jump back to the first Keyframes by clicking the (JMP) in the first Keyframes line. At this first Keyframe we want to change the position of the width ducks from 0 and 1 (as we set them earlier) to 0 and 0 as shown below:
+
 
   
 
   
 
[[File:WriteOn17.jpg]]   
 
[[File:WriteOn17.jpg]]   
  
Note that when you make a change to the above values you will oftentimes have to re-expand the widthpoints.  The red arrow shows the value you changed (from 1 to zero) , the green arrow shows the waypoints you created (this particular shape indicates that you are in the linear interpolation mode), the blue dashed arrow shows the time of the selected ke yframe (which happens to be the start time), and the orange arrow shows the Keyframe where the first Bline will be complete.
+
Note that when you make a change to the above values you will oftentimes have to re-expand the widthpoints.  The red arrow shows the value you changed (from 1 to zero) , the green arrow shows the {{l|Waypoint|Waypoints}} you created (this particular shape indicates that you are in the linear interpolation mode), the blue dashed arrow shows the time of the selected keyframe (which happens to be the start time), and the orange arrow shows the Keyframe where the first Spline will be complete.
  
Next, in the Keyframes panel, we want to jump to the second Keyframe.  We want to make sure the 002 width duck position is still at 1. In this particular example, it changed back to zero so let us set it again to one. When we do this we see in the Params panel that we have created a second set of waypoints as shown below  
+
Next, in the Keyframes panel, we want to jump to the second Keyframe.  We want to make sure the 002 width Handle position is still at 1. In this particular example, it changed back to zero so let us set it again to one. When we do this we see in the {{l|Parameters Panel}} that we have created a second set of {{l|Waypoint|Waypoints}} as shown below
  
 
[[File:WriteOn18.jpg]]
 
[[File:WriteOn18.jpg]]
 
   
 
   
You have probably figured out by now that the 0,0 width duck setting equates to the line not showing and the 0, 1 setting equates to the line being  totally visible.
+
You have probably figured out by now that the 0,0 width Handle setting equates to the line not showing and the 0, 1 setting equates to the line being  totally visible.
This completes the first BLine.
+
This completes the first Spline.
The process continues by getting out of the animation mode and adding additional BLines. One important additional point:   If I add an additional Bline and follow the steps above, I end up with the Params table for the second BLine looking like:
+
The process continues by getting out of the animation mode and adding additional Splines. One important additional point: If I add an additional Spline and follow the steps above, I end up with the {{l|Parameters Panel}} for the second Spline looking like:
  
 
[[File:WriteOn19.jpg]]
 
[[File:WriteOn19.jpg]]
  
Instead of having the required 2 sets of waypoints for the second BLine layer, we have 3 sets of waypoint. The first set needs to be removed (right-click the top-left waypoint and click remove).
+
Instead of having the required 2 sets of waypoints for the second Spline layer, we have 3 sets of waypoint. The first set needs to be removed (right-click the top-left waypoint and click remove).

Latest revision as of 10:12, 20 May 2013

Languages Language: 

English



  This tutorial was actually written while using synfigstudio 0.63.00 .  Somes of the screenshots needs to be updated with 0.64.0

This is a tutorial the "Write On" effect.

This tutorial may seem lengthy but it is only because I have tried to indicate every little step for the new user. After you have done it once or twice, it really isn’t a long process.

Open Synfig Studio. First in the Toolbox, change the interpolation to “Linear”. Mine defaults to “TCB”.

Writeon1.jpg

Next, in the bottom of the canvas, make sure the lock icon is set to “Past keyframes locked”. This is accomplished by repeatedly clicking on the icon until the correct setting is achieved.

Writeon2.jpg

Next, we want to edit canvas properties. Click the Caret Menu between the horizontal and vertical rules, in the top left hand corner of the canvas. In Linux, this caret is easily seen; in windows it is microscopic:

Writeon3.jpg


then select "Edit → Properties". A canvas properties dialog will appear.

Writeon4.jpg


Give a name and description for your canvas, then click "Apply". Go to the "Time" tab and make sure to edit "End Time". Change "5s" to whatever number of seconds you want the duration of your animation to be. If you are going to import a picture to trace, I recommend you change the image size to match that imported drawing. If the drawing is very large, just change the image size to match the proportions of the imported image. Also (in the case of a large image to trace) make sure that Synfig will automatically scale that image to your canvas size. At the top of the toolbox, ->File ->Setup ->Misc tab-> check box that says “scale to canvas size”. If you are not going to import a picture to trace, don’t worry about any of this.

Now to start drawing. In the Toolbox, select the Spline Tool. Writeon5.jpg

In the Tool Options Panel, make sure only the "Create Advanced Outline Spline" is checked.

Writeon6.jpg

By the way if you are looking a panel that doesn’t seem to be on your screen, go to Toolbox -> File -> Panels. Now start drawing your shape by clicking your mouse at various intervals on the workspace canvas. When you have finished drawing your line, click on the Transform Tool Writeon7.jpg in the Toolbox. Note that if you are doing detailed drawing, you can zoom in on your picture or zoom out. Now that you have drawn your first line, you will probably see a bunch of yellow and orange circles. The orange ones are Vertex Handles, the yellow circles are Tangent Handles, and the turquoise circles are the "Radius" Handles. Use the icons at the top of the drawing canvas to make those Handles disappear. To keep the view simple, we just want to see the purple "Width" Handles.

Writeon8.jpg

Now that your first Spline is complete, you will note that you have created a new layer in the Layers Panel. If you are going to have several Splines, you will have several layers so I recommend you rename the layers as you go, so you can distinguish it from the other layers later on. Now we have a bit of work to do in the Parameters Panel before we start animation. Make sure your new layer is highlighted. Next in the Parameters Panel as shown below:

Writeon9.jpg

Expand the Width Points List by clicking on the arrow. Do the same for Width points 001 and 002. Your screen should then look like the picture below:

WriteOn10.jpg

You will need to make four changes to these parameters as shown below:

WriteOn11.jpg

You will note that when we change the position values, we are effectively changing the position of our purple width Handles. At this point you can also change the Width values in the table about to 2.000 or 3.000 depending how thick you want your line to be.

Now to animate. Click the green circle at the bottom right of the drawing canvas to switch to the animation mode. The circle will change to a red color.

WriteOn12.jpg WriteOn13.jpg

In the Keyframes Panel, click on the + symbol to add the first Keyframe. Add the description “Start” as this is time zero.

WriteOn14.jpg

Next, in the Time Track Panel at the bottom of the drawing canvas, click in the time when you want your first Spline to complete. In the example below, I have selected 1 second, 3 frames.

WriteOn15.jpg

You will now be able to add another Keyframe (by clicking on the + symbol) at this point in time.

WriteOn 16.jpg

Now, let us jump back to the first Keyframes by clicking the (JMP) in the first Keyframes line. At this first Keyframe we want to change the position of the width Handle from 0 and 1 (as we set them earlier) to 0 and 0 as shown below:

WriteOn17.jpg

Note that when you make a change to the above values you will oftentimes have to re-expand the widthpoints. The red arrow shows the value you changed (from 1 to zero) , the green arrow shows the Waypoints you created (this particular shape indicates that you are in the linear interpolation mode), the blue dashed arrow shows the time of the selected keyframe (which happens to be the start time), and the orange arrow shows the Keyframe where the first Spline will be complete.

Next, in the Keyframes panel, we want to jump to the second Keyframe. We want to make sure the 002 width Handle position is still at 1. In this particular example, it changed back to zero so let us set it again to one. When we do this we see in the Parameters Panel that we have created a second set of Waypoints as shown below

WriteOn18.jpg

You have probably figured out by now that the 0,0 width Handle setting equates to the line not showing and the 0, 1 setting equates to the line being totally visible. This completes the first Spline. The process continues by getting out of the animation mode and adding additional Splines. One important additional point: If I add an additional Spline and follow the steps above, I end up with the Parameters Panel for the second Spline looking like:

WriteOn19.jpg

Instead of having the required 2 sets of waypoints for the second Spline layer, we have 3 sets of waypoint. The first set needs to be removed (right-click the top-left waypoint and click remove).


Languages Language: 

English