Importing Images into Synfig Studio
The Synfig drawing facilities are not of the same calibre as GIMP, so our recommendation is to create the separate parts of the image that you want to animate in GIMP then to import these as separate layers into Synfig. This is known in Synfig as cut out animation.
The basic process is similar to Animating Photos with GIMP in that you:
Select each part of the image that needs to move independently (-such as arms, legs, head, trunk of the body) - using the GIMP selection tools
Create each of these as a separate layer in GIMP
Save each of these layers off as a separate .png file (-e.g. head.png, leftLeg.png, body.png, etc)
Once you have done the above, you are ready to import the files into Synfig
Note: it makes things easier if you place each part in it's correct starting position before you export it: that way Synfig will place them correctly in relation to each other when imported, without you manually having to place them
In our experience, Synfig and GIMP have differing ideas about the size of .png files, therefore it's often necessary to adjust the size of the Synfig canvas in order to display all of the image, instead of just an enlarged detail. The way to resize and adjust the canvas is to left-click on the caret icon and select:
Edit → Properties:
This will open up a new dialogue box as shown below:
In this dialogue box, set the following Image Size parameters:
Set the Height to the maximum height (in pixels) of the image
Set the Width to the maximum width (in pixels) of the image
Experiment with different values of Image Span until the whole image is contained within the Canvas. Often values will be between 20 and 25
Once you are happy with the values entered, click on the "OK" button to apply the new values and close the dialogue. Note that clicking "Apply" button will apply the values, but leave the dialogue box open, so you can continue experimenting.
Once the canvas is sorted, it's time to import the files created in GIMP. This is again done by clicking on the caret icon, but then by choosing the option:
File → Import:
This will open a standard "File Open" dialogue box, allowing you to navigate to the file that you wish to import. Select the desired file and click "OK". The image should be imported and displayed in both the Canvas and in the Layers panel as shown below:
Continue importing in your image files in the same way until they are all loaded into Synfig; you should see all the images displayed in the Canvas area:
Additionally, all images should be listed as separate layers in the Layers panel:
Assuming you have positioned the image components in there correct starting positions prior to exporting them in GIMP - or once you have manually adjusted their relative positions so that they do, Synfig recommends that you lock the TopLeft and BottomRight co-ordinates for all related components together. This is so, should you move one component, the whole will move without breaking away from the main image. In our example, this would mean that the arm could not be pulled off the body by accident.
This is done by selecting all the all the sub-components of the image - either by CTRL-clicking all the relevant parts in the Layers panel or by clicking on the first item and SHIFT-clicking the last. Once selected, right click first on the TopLeft property, then the BottomRight, in the Properties panel and choose the Link option:
Once done, you should see a linked chain icon next to these properties, showing that they are linked:
Like GIMP, layers nearer the top of the Layers panel will obscure layers below them. If part of an image was created as transparent in GIMP, then images below will show through. By default, the first image to be loaded will end up as the bottom layer, with each successively loaded image on top of it, until the last-imported image, which forms the top layer.
If you wish to change this order (-e.g. if part of one layer need to obscure part of another), then you can alter the layer order by right clicking on the layer and choosing to either "Raise Layer" (-to move the layer up the stack) or "Lower Layer" (-to move it down the stack):
Once the image looks correct in the Canvas, the layering should be correct.
Before we start applying transformations to our image, we need to ensure that any effects are limited the the component we are manipulating. In Synfig, this process is called encapsulation. Essentially, this is a grouping construct: any transformation added under a given encapsulation layer will only apply to the image layers listed under that encapsulation layer. In practice, this means we need to create an encapsulation layer for every part of our image that needs to move independently.
To create an encapsulation layer, simply right click on the image layer that you want to add it to and select the "Encapsulation" option:
This should create a new encapsulation layer entitled "Inline Canvas", with your original image layer inside of it. Click on the "Inline Canvas" name and rename it to something more meaningful:
Continue encapsulating all the movable components in the same way:
Note: you can create nested encapsulation layers (i.e. encapsulation layers that contain encapsulation layers themselves) -like the "Man" layer shown above. This method can be used to group related units that will be manipulated together
Sometimes, you will find things may need a bit of position tweaking: Synfig uses the construct of a duck to allow you to accurately position a component. These are not feathered aquatics but dots of differing colours which act as handles to visually adjust your image. Simply click on the encapsulation layer of the component(s) that you wish to move and you will see the duck appear on the canvas. Left-click and drag the duck to it's new location and the component will follow it:
In the example above, the "Man" encapsulation layer is selected, so the duck shown will move all layers under that (-i.e. all the sub-components of the man, such as arms, legs, body, etc) and the whole man will appear to move. If you only wanted to move the head away from the body, then the "Head" encapsulation layer should be selected instead.
Note: the colour of a duck normally designates it's usage - for example, green ducks normally adjust position, whereas blue ducks alter a transformational parameter (-e.g. angle of rotation, size, etc)