Marionette Studio User Guide

This is the first button from top menu and it helps you create a new scene without having to exit the application. Just click on this button and a new scene is created. So, now you can start creating your next 2D animation.

Clicking on the load button it will open a new window named Load Scene. Here you will see Marionette Knight (demo), an example of 2D animation made by our colleagues and the list with your created and saved scenes.

Also, these scenes can be opened in the working area by selecting one and click on load button or can be deleted by pressing “X”. If you want to close Load Scene window, simply click on the button “Close” or click on the “X” from top right.

If you created a scene and want to save it just click on “Save” button. After pressing the “Save” button it will open “Save Scene” window where you can add a name for your scene. Click on “OK” and all your datas are saved or “Cancel” if you want to close the window without saving.

Also, you can use the shortcut CTRL + S for “Save scene”.

“Save As” button is under “Save” button from menu and helps users to save the current scene to a new scene.

Marionette Studio can export your animations into PNG format. Once your animation is finished, save it, then from top menu select Export PNG button.

By selecting this button the settings window will open and you can choose:

• Single Frame – it will export a single frame of your animation and has the following options:

1. Naming Prefix – the name you want to save the image
2. Choose rectangle type: Fit to frame – when you choose this option, it will export the minimum bounding box, so you do not have transparent lines or columns;   Custom – this option let you to choose the coordinates for the export
3. Choose frames to export – the number of frames you want to export
4. Scale output – you can set the image resolution from 10% to 100%

• Frame Pack – the returned file for download is an archive that contains multiple images.

Frame Pack export has the following options:

1. Naming Prefix – the name you want to save the pack
2. Choose rectangle type:  Fit to frame – when you choose this option, it will export the minimum bounding box, so you won’t have transparent lines or columns; Fit to animation – this means that the app will take the maximum rectangle to export, so all images to be centered in the same point; Custom – this option let you to choose the coordinates for the export
3. Choose frames to export with 3 available options: All  ( exports all animation’s keyframes) ;  Keyframes ( exports only the frames where are the main keys); Custom ( you can choose the frames you want to export, for example 2,3,5,9)
4. Scale output – you can set the image resolution from 10% to 100%

Marionette Studio also has the option to save your animation into GIF format. This solution is great for saving low resolution images and small size packages. GIF export images with maximum 256 colors. This is great for using it in your website or on social media networks.

GIF format has the following settings:

1. File name : the name you want to save the gif
2. Backgroung color : this option lets you to customize the background color of your GIF file
3. Choose rectangle type: Fit to animation -the app will take the maximum rectangle to export, so the gif to be centered; Custom – this option let you to choose the coordinates for the export
4. Choose frames to export with 3 available options: All  ( exports all animation’s keyframes);  Keyframes ( exports only the frames where are the main keys); Custom ( you can choose the frames you want to export, for example 2,3,5,9)
5. Scale output – you can set the image resolution from 10% to 100%

Marionette Studio gives you now the possibility to export your animations into sprite-sheets and CSS3. To open Export Sprite Sheet dialog just click on top menu and select Export Sprite Sheet.

The Sprite Sheet export has the following flow:

1.From top menu select Export Sprite Sheet button and the settings window will open with the next options:

• File name: the name of exported file
• Choose rectangle type: Fit to animation– the application will take the maximum rectangle of animation; Custom – you will choose the coordinates for exporting
• Choose frame to export: All ( exports all animation’s keyframes); Keyframes ( exports only the frames where are the main keys); Custom ( you can choose the frames you want to export, for example 2,3,5,9)
• Scale output – set the image resolution from 10% to 100%

2.Press next and you will have to wait until is processing the export.

3.Next it will open another window from where you can choose the file type: Sprite Sheet or CSS3 Sprite Sheet and you will also see a preview of the exporting file. Press Export button and then save your work on your computer. For option Sprite Sheet you will receive a .png file and for CSS3 Sprite Sheet an archive.

A sprite is one file that contains multiple images that can be used on a website. This exporting option helps you to save space on server and reduces loading time.

Zoom option is used in Marionette Studio to enlarge/ decrease all the objects in canvas. There are two buttons you can access “Zoom out” and “Zoom in” or you can simply scroll the mouse up to enlarge and down to decrease. The zoom level is indicated in the box between the two zoom buttons.

Center scene in view button is near Zoom and its role is to center and zoom your animation so it can fit in canvas.

You can customize the working area by closing Scene explorer, the animation timeline and general image/ bone properties. With the mouse quickly go on “Close” button and enlarge your working area.

Full-screen mode allows the user to use the entire screen for the application. You can click on “Fullscreen” button from top right or press F11. To return to initial screen view use the same path: press F11 or click on “Fullscreen” button.

Button “Pan” from top menu helps you to move the coordinate system. You have to select the button then move the mouse on working area while holding the left mouse button.

“Select” button is near the “Pan” button and when you click on it you can select any image or bone from the canvas. On canvas, bone selected is colored and image is framed to be easily identified. You can also access “Select” button by pressing Q from keyboard.

Also, there are another two methods of selecting an element:

• the first one is by simply clicking on desired item in canvas
• the second way is by choosing the element from Scene explorer

To move one image or bone on the working area you have to use “Translate” tool. You can do this either by selecting “Translate” button from top menu, either pressing M on the keyboard while on canvas. After enabling this tool, the selected bone or image can be moved anywhere in canvas.

Also for moving elements on canvas you can use the following short cuts:

• “UP” + Translate to move selected element up in canvas
• “DOWN” + Translate to move selected element down in canvas
• “LEFT” + Translate to move selected element left in the canvas
• “RIGHT” + Translate to move selected element right in the canvas

The activation of “Rotate” tool is made by selecting the “Rotate” button from top menu or pressing R on the keyboard while on canvas. After the button is activated you can rotate the selected image or bone from your working area.

Scale tool helps you to enlarge or decrease an image or a bone. To do this select “Scale” button or press S on the keyboard while on canvas. The selected element size is adjusted by dragging the mouse up or down.

Any action in MarionetteStudio can be undo or redo by simply click on “Undo” or “Redo” buttons from top menu. Another method is to use shortcuts : CTRL + Z for “Undo” and CTRL + Y for “Redo”.

Each created bone appears under Armature in Scene explorer tree. Select with the mouse one bone and its properties will appear in the right side of the canvas. Bone properties appear under “General” and can be closed by clicking on the arrow.

You can edit:

• bone name by clicking on “bone 1” and writing the new name
• bone position on canvas by changing the x and y coordinates
• bone rotation by changing the value of rotate tool
• bone length by changing the length value
• bone color by selecting the color you want

Like bones, each imported image appears under Armature in Scene explorer tree at Spites. Select the image you want to edit and its properties will appear at the right.

You can edit images by making one of the following actions:

• image name by writing the new name
• image position on canvas by changing the x and y coordinates
• image rotation by modifying the value of rotate tool
• scale image by modifying the value of scale tool
• image opacity – it can take a value from 0.0 – 1.0 and is used to set the transparency of any image

To delete a bone or an image from the working area select the bone / image in the Scene explorer tree or in canvas and click on “Delete” button.

If you have an animation and want to replace one image now you can do it very easily with image replacement option: select the image, go in properties, click on Replace button, choose the new image and it will replace the old one.

To bring your favorite images on the working area you have to select “Import Image” button. Once you select this button it will open a new window from where you can select the desired images from your computer.

Another option to import your images into editor is by simply drag & drop them from Windows Explorer/Finder.

There are several variants to create bones for your skeleton:

1. go to top menu and click on “Create Bones” button or use key B to activate it and then use the mouse for creating it
2. select “Create Bone” button and create one bone, then press “C” on the keyboard and use mouse to create another bones

1. if you have 2 root bones, you can drag and drop the bones in the tree; the bone placed under another bone will become a child bone
2. for making a bone chain you need to continuously press the SHIFT key while making bones
3. for adding a child for an already created bone you need to select the bone, press C key and the newly created bone will be a child for the initial one

Attach bone to an image help you to transform a bone and its corresponding image at the same time. For example, when you want to rotate a bone, rotates its image too.

For this action you need to use “Link bone to Image” button from top menu or click on L key to activate it. After selecting this button, in canvas just drag and drop with the mouse from the bone to image and you created a link between the bone and the image.

You can also do this action from Scene explorer tree by selecting a picture with the mouse and move it under the bone you want.

“IK Helper” button is near “Link bone to image” button and helps users in the animation process to connect their characters  to the real world. Witk IK Helper a child of your rigged character can influence the movement of its parents.

To create IK for your character, you have to:

1. select “IK Helper” button
2. with mouse just drag & drop to one bone to another

For example, if you use IK helper in your character legs you can position the leg and the other parts of the leg willl automatically be calculated.

All created bones are saved in Scene explorer tree and can be viewed by simply click on Armature.    

When you import images, these will appear in the working area, but also in Scene explorer tree at Sprites.

Next to the Scene explorer are two buttons “Expand” and “Collapse”. To expand all nodes in Scene explorere click on “Expand” button and to collapse all nodes click on “Collapse” button. These buttons can also be used to expand or collapse the selected nodes and their children by clicking the arrow next to the node.

If you want to block an image or a bone from the working area, so it can’t be selected, rotated or translated, select image/bone from Scene explorer or image from Layers and click on the padlock. When the padlock is closed it means that the element is locked and when the padlock is open, the element is unlocked.

Also you can block all bones when you select the padlock from Armature and all images when you activate the same button from Sprites.

To make bones and images invisible you have to select your element from Scene explorer tree or Layers and click on the “Visible” button. Pressing this button it will turn into “hidden” button and the element selected will disappear from canvas and vice versa.

You have also the possibility to make invisible all bones from canvas by selecting the “Visible” button from Armature and all images by clicking the same button from Sprites.

Next to Scene explorer button there are Layers. This functionality helps you to see all the images used in your animation project.

Also, here you can do the following actions:

• order the pictures as you want by dragging and dropping the image with the mouse or using the buttons “Move Down” and “Move Up”
• block images
• change the visibility of the image in the working area
• select images

An alternative method of ordering images is to choose from canvas the image you want to move and press the right click from the mouse. A new window will appear from where you can select:

• bring forward – to move image above one position
• send backward – to move image down one position
• bring to front – image will occupy the first position
• send to back – image will occupy the last position

To reorder your layers more easily, Marionette Studio created a new tool that gives you the posibility to select multiple layers and reorder them wherever you need. Simply select with CTRL images from Layers and drag them up or down.

For setting keys for multiple images or bones, Marionette Studio created multiple selection on elements. You can do this by pressing CTRL and selecting the elements in editor. Another simple solution is to click and drag on canvas to form a rectangle around the elements and all items will be selected.

Hover selector is used on bones, images and keys. When you hover the mouse over the elements in canvas or in timeline they are marked with white color. This feature helps users to see what  items from editor can be selected.

After setting several key frames you can play them once by pressing the “Play” button. You can also activate “Play” button by simply pressing on P key.

Button “Loop” from Animation Timeline menu helps you to play your animation in a loop. When you activate this button your 2D animation is playing continuously. You can also activate “Loop” button by pressing O key from your keyboard.

To easily mange keyframes there are some bottons in Animation timeline menu that helps you to go to start/ end frame or previous/ next frame.

To set a new keyframe for your 2D animation you have to use “Key” button or simply click on K key. When you make changes to your skeleton and want to save them you have to set a keyframe. Key frames appear as blue dots.

To copy a keyframe just select it and then use “Copy” button from timeline.

For cutting a keyframe it is using the “Cut” button. Select the keyframe you want and then press the “Cut” button. Pasting in two different places enables you to duplicate a keyframe. This could help you a lot when defining your keyframes in an animation.

To do paste on a keyframe you have to use “Paste” button which is near the “Cut” button.

When you want to delete one key frame, select the key frame and click on “Delete” button.

Edit key button is near Delete key and is useful when you want to adjust the timing between some keys. If you select multiple keys, then enable Edit key you can move all these selected keys and also maintain the relative distance from keys.

Graph Editor functionality helps you to control keyframe transition between each other and to produce smooth and real movements for your animation. Graph Editor button is near “Delete” button and when you click on it, will open at the bottom right.

Graph editor curves allow the animator to adjust the speed of a transition between keys. It  appears predefined with linear function, but this can be easily changed, by selecting one keyframe and then choose the easing function desired.

Easing functions that we support:

• Linear means that all the changes betweens the current keyframe and the next keyframe are constant.

• Imediate (Step function) means that the values don’t change untill the next keyframe is reached

• Ease (Bezier function) uses a Bezier curve that can be dragged to personalize the rate at which x and y values change during a keyframe. The horizontal axis represents time and the vertical axis the value (it can be between 0 and 1).

• Ease in (Bezier function) means that your 2D animation will start slowly and end fast.

• Ease out (Bezier function) is the opposite of ease in: it will start more quickly and it will decelerate at the end.

• Ease in out (Bezier function) – with this function your 2D animation will start slowly, then accelerates and at the end will decelarate. At the begining it behaves like the ease in function and at the end like ease out function.

Button Auto Key is near Key button and when you activate it turns blue. Also, when you enable it, a key will be set automatically any time you made a change on bones or images at the current time.

Settings button is near Auto Key and it helps you to customize the timeline, to set the start and stop keyframes and also to change your animation speed.

With Marionette Studio you can now share your animations with other users. Save your scene then click on Share button, near Settings button and your scene will be shared. To unshare scene, just simply click on the same Share button and click on Unshare.

On the shared player page you will see the animation and you will be able to:

• play and stop the animation by simply clicking on play button
• change the animation background in five colors from the right menu
• activate the bones by making them visible
• choose the speed of animation (frames per second)
• drag the character on player
• zoom in and zoom out animation by scrolling the mouse up to enlarge and down to decrease

To copy an individual key from timeline just click on selected key and press copy / cut / paste / delete. When you select a key also the element appears selected in canvas, Scene explorer / Layers and properties.

The animation’s keys are displayed in timeline. If for example you want to copy the movement of a hand you can select multiple keys from different keyframes by holding CTRL and clicking on keys. To copy and paste them simply press Copy button, then choose the keyframe and Paste button. Another method is by clicking and dragging a rectangle on timeline around keys you want to select.

In timeline under Copy / Cut / Paste / Delete buttons is a new road Animation and when you set new keys a marker will appear on the specific frame. Clicking on this marker all keys from that frame will be selected. You can also press CTRL and select multiple markers to copy, cut, paste, delete multiple frames.