Differences

This shows you the differences between two versions of the page.

--- synfig [2015/07/12 18:54]
slackermedia
+++ synfig [2021/06/03 19:48]
@@ Line 1: / Line 1: @@
-======Synfig======
-F
-      ancy yourself an animator? Well even
-      if you didn't before, you will do by the
-      end of this article, thanks to Synfig
-Studio, a vector-based 2d animation pro-
-gram for Linux that puts lesser alternatives,
-both free and proprietary, to shame.
-    Install Synfig Studio directly from the
-Ubuntu Software Center, which you can
- aunch from the sidebar of the Ubuntu desk-
-top or from the Applications screen by click-
- ng the Ubuntu logo in the top left corner.
-Do a search in the Ubuntu Software Center
-for "synfig" and click the top result (labeled
-simply "synfig"). This will open a screen that
-provides details about Synfig. At the bottom
-of this screen are two additional packages
-that you can install along with Synfig, so ac-
-tivate those and then click the Install button
-at the top right of the window.
-    Technically, Synfig is a backend applica-
-tion that renders animations and vectors,
-while Synfig Studio is the graphical applica-
-tion with which you will actually interface.
-Since using Synfig (the backend) directly is a
-very advanced practice, this article will use
-"Synfig" and "Synfig Studio" interchange-
-ably when speaking about "Synfig Studio".
-    Not strictly necessary, but especially
-helpful, are these additional packages:
-python-wxglade, libstdc++5, ffmpeg, Kcol-
-orChooser.
-   Once all of these are installed, launch
-Synfig Studio from the Applications screen.
-More Complex than It Looks
-Normally I relish in telling people that an ap-
-plication is a lot simpler than it looks, but in
-the case of Synfig Studio, it's deceptively com-
-plex. If you're used to vector drawing or even
-pixel painting, the tools and windows of Syn-
-fig will appear to be self-explanatory. Don't let
-it fool you; Synfig is a big, complex, and pow-
-erful application. If you think you know how to
-use it based on previous drawing experience,
-try to forget everything you think you know,
-because Synfig deals with shapes in motion
-and as a result works very very differently
-than the static images you might be used to
-creating. If you know nothing about vectors,
-bitmaps, or computer art, then you're a little
-ahead of the game, in a way.
-     In Synfig Studio, there are four (4) win-
-dows: the tool window in which your anima-
-tion and drawing tools are located, the can-
-vas upon which you draw, a palette window
-for layers and navigation, and a timetrack
-where you can visualize the changes being
-made to your drawing over time. Most of the
-windows are more connected to one anoth-
-er than it appears, so be prepared to use
-each of them often.
-A "Hello World"
-Animation
-Let's do a quick and easy animation
-just to get familiar with the basic
-concepts of Synfig. As our first mas-
-terpiece, we'll animate a sunrise.
-    Click the Rectangle Tool in the
-Tools window. First, we'll draw the
-sky, so pick a colour for your land-
-scape, probably blue would make
-sense but you're the artist so pick
-whatever you want. Synfig expects
-you to just know RGB or YUV values
-off the top of your head, but you
-can also use hex values if you're
-familiar with web design. Either
-way, I find that an application like
-KColorChooser (installable from the
-Ubuntu Software Center) is endless-
-ly helpful; I launch it, find my colour,
-and copy/paste the hex code.
-    Once you're happy with your
-colour choices, draw a rectangle
-to encompass the entire canvas.
-It should turn blue. If, upon seeing
-all that blue, you decide you didn't
-quite nail the shade that you want-
-ed, you can change it using the Fill
-Tool from the Tools window.
-    You've done well so far, so save
-your animation (such as it is) by click-
-ing anywhere in the gray area around
-your canvas, or use the arrow located
-at the conjunction of the canvas rul-
-ers. You'll find the Save option in the
-File menu, as usual. From this point
-on, you can save with [Ctrl] + [s].
-    Now let's draw the sun. Choose
-your colour, choose the Circle Tool,
-and draw a yellow circle on your can-
-vas. Notice that when you drew the
-sky and the sun, new layers were add-
-ed to your Layer Palette on the right
-side of your screen. Of course, as with
-any graphics program, the order of the
-layers matter; the topmost layer cov-
-ers a lower layers. Since everything
-you draw gets its own layer, it's really
-smart to name your layers as you go.
-Single-click on a layer to name it.
-    And finally, draw a sloping land-
-scape. I chose green for my colour,
-and used the Bline Tool. The Bline
-tool, as you might guess, draws
-bezier curves: mathematically-cal-
-culated curved lines that are ad-
-justed with handles located at each
-node of your shape. When drawing
-a Bline shape in Synfig, you need
-to close the shape by bringing your
-mouse to a node and right-clicking
-on it to choose "Loop Bline" from
-the contextual menu. This closes
-the shape, filling it with your Fill
-Colour, and adding it to your Layers
-Palette.
-    Once the landscape object ex-
-ists, you can use the Transform tool
-from the Tools window to bend its
-lines; click and drag the top of your
-landscape to give it a gentle slope.
-    Notice that when you drew the
-landscape, two new shapes got add-
-ed to your Layers: the Bline Fill and
-the Bline outline. Synfig sees out-
-lines and fills as separate objects
-(although by default they are locked
-together in pre-defined shapes like
-circles and rectangles).
-     Now let's animate the action of
-the sunrising.
-     What is animation? Well, it's just
-movement of some pixels over some
-amount of time. So all we have to
-do in order to get movement in our
-scene is to tell Synfig where the sun
-should be in the first frame of our
-animation, and where it should be
-at the final frame, and Synfig will do
-the rest of the work for us.
-     To make the sun the active layer,
-click on the icon in the sun layer in the
-Layers window (if you click the name
-of the sun layer, then Synfig thinks
-you want to rename the layer, so click
-the blue icon instead). Then click the
-Transform tool in the Tools Window.
-     Notice that the sun shape is high-
-lighted in a peculiar way: it shows you
-the outline of the shape with a single
-node along the edge, and it has a sec-
-ond node in the center of the shape.
-The center node represents the loca-
-tion of the shape on the canvas. The
-node along the outline represents
-the span of the shape in space; that
-is, if you wanted to resize the sun, you
-would use the outside node. If you
-want, as we do, to move where the
-sun is located on the canvas, then
-you click and drag the center node.
-     Do that now, so that the sun is
-hidden, or nearly hidden, behind the
-landscape shape. Once the sun is
-properly positioned, locate the Ani-
-mation button: it's an icon of a green
-stick figure, in the lower right of the
-canvas window. When you click
-it, it creates a red border around
-your canvas so that you know that
-you are in Animation Mode; in this
-mode, anything you do is recorded
-by Synfig, so be careful!
-     Now that you are in Animation
-Mode, you need to record the posi-
-tion of the sun. Grab onto the center
-node of the sun with your transform
-tool, and "jiggle it" (believe it or not,
-that's a technical term). To "jiggle",
-all you need to do is move the sun a
-pixel or two; this registers with Synfig
-that the sun's attributes should be
-recorded and if you look down at your
-Timetrack window, you'll see a big
-red diamond has appeared at frame
-, meaning that everything (color,
-size, position) has been recorded.
-     By default, we have 5 seconds to
-work with, and there are 24 frames
-in a second. If 24 frames are 1 sec-
-ond, if we had the sun high in the sky
-at frame 23 or so, then we'd have
-an animation of an unnaturally fast
-sunrise. Probably a 3 second dura-
-tion would be a lot better, so click in
-the Timetrack along the top so that
-your blue marker line sits roughly at
-the 3 second mark.
-     We've moved Synfig forward in
-time, so now we need to move the
-sun in space. Drag the sun using the
-transform tool and the sun's center
-node, into the sky. Notice that the
-Timetrack window again adds a big
-red keyframe diamond at the posi-
-tion of your blue marker, meaning
-that every attribute of your sun has
-been recorded.
-     And just like that, you've created
-an animation!
-Viewing the Animation
-First thing's first: get out of Anima-
-tion Mode by clicking the red stick
-figure in the lower right of the Can-
-vas window. That dis-arms your
-workspace and protects you from
-unintentional animation.
-    You can playback a preview-
-version of your animation using the
-playback controls at the bottom of
-your canvas. Use the leftmost Re-
-wind button to go back to the start
-of your animation, and the Play but-
-ton to play through it once. Don't
-worry about the quality; this is real-
-time rendering that is meant only to
-give you a rough idea of timing and
-positioning.
-    To get a full quality render of your
-animation, choose Render from the
-File menu. This brings up the Ren-
-der dialogue window. There are a lot
-of choices; don't panic.
-     By default, Synfig wants to ren-
-der your animation out as a series
-of PNG files, because that's how
-professional animators work. You
-probably would rather have a movie
-file, so change the filename to sun-
-rise.ogv.
-     Change the Target to ffmpeg
-and click the Parameters button to
-choose what kind of movie file you'd
-like to end up with. For now, use the
-Theora codec with a bitrate of 8000.
-Change the Quality setting to 8.
-     You can leave everything else
-as it is for now; the current settings
-will render a stand-definition Ogg
-Theora file. The great thing about
-          Synfig is that it uses vec-
-          tors, so if you want to render
-          a high definition version of
-          your animation, all you have
-          to do is change the width to
-and height to 1080
-          and you'll have a hi-def ver-
-          sion of your animation that
-          you can play back for all
-          your friends on your fancy
-          new big screen TV. Admit-
-          tedly, our simple sunrise
-          animation probably doesn't
-          quite warrant that yet.
-              When the file is finished
-          rendering, you'll see a "File
-          rendered successfully" note
-          in the lower left corner of
-          your Canvas window. That
-      means that you can open
-          up your files with the Files
-application in the sidebar of your
-Ubuntu desktop, double-click the
-sunrise.ogv file, and view your 5
-second animation again and again.
-    Don't quit your day job, but give
-yourself a pat on the back. You've
-just created an animation!
-Rigging
-Now that you know how to draw in
-Synfig, try creating a character. An ap-
-propriate choice in this context might
-be a rooster, which typically crow at
-dawn. If you are drawing a rooster,
-try thinking of it in movable parts:
-of course it would have feet, a body,
-wings, a neck, head, and beak. Each
-part should be given its own layer,
-which we will then encapsulate them
-together. It helps to think of this pro-
-cess in terms of paper-cutout anima-
-tion or puppetry, in which each body
-part is its own distinct object con-
-nected to everything else by joints.
-    Encapsulation is a method that
-Synfig Studio uses to ensure that
-certain elements move together.
-More importantly, the order of lay-
-ers within groups actually influ-
-ences how each body part moves,
-because the movement of a lower
-layer will inherit the movement of a
-higher layer. For instance, if you are
-drawing a beak on a rooster's head,
-then you'd obviously want the beak
-to move along with the head no mat-
-ter what. If you drew a farmer, then
-you'd want his hands to move along
-with his forearms, which in turn
-should move with his upper arm.
-    This is called "rigging", which is
-a fancy term for, essentially, defining
-the skeleton and muscle structure
-of an animated character. The fact
-that Synfig Studio uses this method
-of movement places it a head above
-(so to speak) other animation pack-
-ages, which require the animator to
-select each individual part of a char-
-acter to make sure that everything
-stays together.
-    To encapsulate layers together,
-control-click on the layers in the Lay-
-er Palette that you want to encap-
-sulate. Right-click on any one of the
-selected layers and choose Encap-
-sulate from the contextual menu.
-    These layers are now bound to-
-gether and grouped into an Inline
-Canvas, meaning that the movement
-and transformations that occur with-
-in the encapsulation will not affect
-anything outside. Notice that as a
-group, there is a new transformation
-node, located in the center of the
-canvas area rather than at the cen-
-ter of the character you have drawn.
-     Once you have encapsulated
-layers, you can move the capsules
-themselves or layers in and out of
-the capsules. You can move cap-
-sules into capsules, or layer into
-capsules. The dragging and drop-
-ping can get tricky, just know that
-when a layer is inside of a capsule,
-it gets indented a little to show that
-it's encapsulated. It doesn't get in-
-dented a whole lot, but if you look
-for it, you'll see it; there are also
-placeholder lines that appear as
-you drag a layer or capsule around,
-so you'll get a feel for where things
-are getting dropped.
-     My rooster (which may or may
-not look like a penguin) has an arm
-with an anthropomorphic elbow/
-wrist, as animated birds often do. If I
-want to animate this arm to raise up
-to the sky when my rooster crows, I
-need to rig the arm.
-     Rigging is done in cascading or-
-der of influence, using special layers
-called Transformation Layers.
-     As it is right now, I have an en-
-capsulated layer group called wing-
-Upper, which contains the line and
-the fill of the upper wing. It also
-contains another encapsulated layer
-group called wingLower. All of this
-exists within the encapsulated group
-called rooster. It makes sense if you
-think of it in traditional outline form:
-rooster, body, wingUpper, line & fill,
-wingLower, line & fill, feet.
-     In order to rotate wingUpper (and
-all layers under it, until the end of its
-encapsulation), add a Rotate Layer
-at the top of the wingUpper capsule.
-     Add a rotate layer by right click-
-ing on the layer you want to add the
-rotate above, and select New Layer >
-Transform > Rotate.
-     Once you've added a Rotate
-layer, click on one and look to your
-canvas. You'll notice that new nodes
-have appeared; this time, there are
-two: a blue and a green. The green
-is the pivot point and the blue is your
-handle. Imagine attaching a stick to
-your elbow or knee; the part touch-
-ing your joint would be green, and
-the part that allowed you to adjust
-its position would be blue.
-    Click and drag with your Trans-
-form tool the green node and place it
-at the "joint" of the body part you are
-animating. Once positioned, you can
-use the Rotate tool from the tools
-window to rotate that body part. You
-will notice that any layer underneath
-this rotate layer rotates right along
-with it; if you've rigged it correctly,
-you'll have the elbow moving along
-with the shoulder, but the elbow able
-to move independently as well.
-    Animating rigged body parts
-is exactly the same as animating
-something like the sun earlier in this
-article; position your time marker at
-some frame number, enter Anima-
-tion Mode, jiggle the body part to
-establish its starting position, and
-then place your time marker further
-into the future and move the body
-part to its end position.
-A Note Regarding Sound
-Cartoons and sound effects were
-practically made for each other, so it
-warrants some discussion here. Synfig
-Studio is an animation program, not a
-video editor, so there's no way to bring
-sound into Synfig. This is actually pret-
-ty normal, because in animation the
-soundtrack is generally produced first
-and the drawings are done to fit the
-soundtrack. Then the drawings and
-sound are married together in a video
-editing application like OpenShot or
-even ffmpeg on the command line.
-     That's all pretty simple; hard
-part is drawing to sound. How do
-you know at what frame to have a
-character open or close their mouth
-for dialogue? The answer is to sit
-down with your soundtrack and a
-stopwatch (or, more likely, Audacity,
-installable from the Ubuntu Soft-
-ware Center), and listen to it. Time it,
-so that you know exactly how many
-seconds from the start point your
-character starts speaking a given
-line. Translate those seconds into
-frames, and write it all down on a
-cue sheet (spreadsheets are usually
-used for this; good thing you have
-LibreOffice preinstalled on Ubuntu).
-     When you render out your synfig
-animation, it really is best to render
-it to a series of PNG images. Most
-video editors will let your import a
-folder of PNGs and will even group
-them together as if though they
-were video files. This keeps your
-animations frame-accurate, and
-your video and sound will sync per-
-fectly. Kdenlive and Openshot are
-great video editors for Ubuntu, so
-give them a try when you reach this
-stage of your project.
-     Otherwise, you now know every-
-thing you need to know about Syn-
-fig! Check out more of their tutorials
-and samples online; the sky is the
-limit with Synfig, whether you're do-
-ing traditional 2d animation as
-we've done in this article, or com-
-plex rotoscoping on video clips, or
-simple title animations, you've got a
-full animator's toolkit and some se-
-riously dangerous know-how, so go
-bring something to life!