Difference between revisions of "Doc:Write On"

From Synfig Studio :: Documentation
Jump to: navigation, search
Line 42: Line 42:
 
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]]
  
 
You will need to make four changes to these parameters as shown below:
 
You will need to make four changes to these parameters as shown below:
  
[[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 ducks.
Line 53: Line 53:
 
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 Keyframes panel,  click on the  +  symbol  to add the first 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 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.
  
[[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 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 ducks 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 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.
Line 78: Line 78:
 
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 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  
  
[[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 duck setting equates to the line not showing and the 0, 1 setting equates to the line being  totally visible.
Line 84: Line 84:
 
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 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:
  
[[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 top waypoint and click remove).
 
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 top waypoint and click remove).

Revision as of 17:18, 4 October 2011

Languages Language: 

English


Write on effect with Synfig with synfigstudio-0.63.00.exe

This tutorial is for synfigstudio-0.63.00.exe which you can download (the Windows executable) at http://sourceforge.net/projects/synfig/files/binaries/windows-binaries/ At the time of this writing, 0.63.02.exe has been released but has serious performance issues with advance BLines, so until that is corrected, I recommend you use 0.63.00.exe. 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. In additional, newer Synfig releases will eliminate some of the steps below (since some are actually work-arounds to avoid errors). I will let one of the wizards like Genete address that. Open Synfig Studio. First in the tool box, change the interpolation to “Linear”. Mine defaults to “TCB”.

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.

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 (as I did on the North and South America map), 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.

Now to start drawing. In the Toolbox, select the Bline tool. Writeon5.jpg

In the tools options panel, make sure only the “Create Advanced Outline BLine” 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. When you have finished drawing your line, click on the transform tool Writeon7.jpgin 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.

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

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

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 ducks 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 ke yframe (which happens to be the start time), and the orange arrow shows the Keyframe where the first Bline 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

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. This completes the first BLine. 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:

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 top waypoint and click remove).


Languages Language: 

English