diff --git a/reference_manual/dockers/timeline.rst b/reference_manual/dockers/timeline.rst index 88699b881..3f221120a 100644 --- a/reference_manual/dockers/timeline.rst +++ b/reference_manual/dockers/timeline.rst @@ -1,128 +1,124 @@ .. meta:: :description: Overview of the timeline docker. .. metadata-placeholder :authors: - Wolthera van Hövell tot Westerflier - Dmitry Kazakov - Emmet O'Neill :license: GNU free documentation license 1.3 or later. .. index:: Animation, Timeline, Frame .. _timeline_docker: =============== Timeline Docker =============== The **Timeline Docker** works in tandem with the :ref:`animation_docker` at the heart of :program:`Krita`'s animation tools. While the Animation Docker provides access to the fundamental controls for playing back and editing animations, the Timeline Docker contains the layered frames and specific timings that define your animation. In other words, the Timeline Docker is the digital equivalent to a traditional animator's "dope sheet". .. image:: /images/dockers/Timeline_docker.png :align: center Legend: ------- -**A. Layer List --** This area contains some subset of the layers of your current document. The currently active layer is always shown and can be "pinned" to the timeline using the :guilabel:`Show in Timeline` menu action. Also, Layers that are created via the Timeline or added using the :guilabel:`Add Existing Layer` submenu are automatically pinned to the timeline. Each layer has properties that can also be toggled here (visible, locked, show onion skins, etc.). +**A. Layer List --** This area contains some subset of the layers of your current document. Similar to the Layers Docker, each layer has various properties that can also be toggled here (visibility, locking, onion skins, etc.). While the currently active layer is always shown here, layers can also be "pinned" to the timeline using the :guilabel:`Pin to Timeline` menu action or the :guilabel:`Pin Existing Layer` submenu so they will be visible even when inactive. Layers that are created via the Timeline are pinned automatically and by checking the :guilabel:`Automatically pin new layers to timeline` option in :guilabel:`Configure Krita > General > Miscellaneous` all new paint layers can be pinned automatically. * **Active Layer** A highlighted row in the table shows the current active layer. One can change which layer is active by clicking on the layer's name within the left header. It is *not* possible to change the active layer by clicking inside the table in order to not disturb the user when scrubbing and editing frame positions on the timeline. **B. Frame Table --** The Frame Table is a large grid of cells which can either hold a single frame or be empty. Each row of the Frame Table represents an *animation layer* and each column represents a *frame timing*. Just like the Layer List, the active layer is highlighted across the entire Frame Table. It's important to understand that frame timings are not based on units of time like seconds, but are based on frames which can then be played back at any speed, depending on the :ref:`animation_docker`'s *frame rate* and *play speed* settings. Frames can be moved around the timeline by simply left-clicking and dragging from one frame to another slot, even across layers. Furthermore, holding the :kbd:`Ctrl` key while moving creates a copy. Right-clicking anywhere in the Frame Table will bring up a helpful context menu for adding, removing, copying, and pasting frames or adjusting timing with holds. * **Current Selection:** Frames highlighted in orange represent a selection or multiple selections, which can be created by mouse or keyboard. While multiple frames are selected, right-clicking anywhere in the Frame Table will bring up a context menu that will allow for adding or removing frames or holds within the current selection. Finally, it is also possible to have multiple non-contiguous/separate selections if needed. .. warning:: - Painting always happens only in the *active frame* (represented by a small dot), which is not necessarily part of your current selection. + Painting always happens only in the *active frame* (represented by a small dot), which is not necessarily part of your current selection! * **Keys, Blanks, and Holds:** The Timeline Docker now shows us even more useful information about both what is there as well as what is not. **Key frames** which contain drawings are still displayed as *filled blocks* within a cell, while **blank** or empty key frames are shown as a *hollow outline*. In Krita, every drawn frame is automatically held until the next frame; these **holds** are now clearly shown with a *colored line* across all held frames. The color of frames can be set per-frame by the animator using the right-click menu, and is a matter of personal workflow. **C. Frame Timing Header --** The Frame Timing Header is a ruler at the top of the Frame Table. This header is divided into small notched sections which are based on the current *frame rate* (set in the :ref:`animation_docker`). Integer multiples of the frame rate have a subtle double-line mark, while smaller subdivisions have small single-line marks. Each major notch is marked with a helpful *frame number*. * **Cached Frames:** The Frame Timing Header also shows important information about which frames are currently *cached*. When something is said to be "cached", that means that it is stored in your device's working memory (RAM) for extra fast access. Cached frames are shown by the header with a small light-gray rectangle in each column. While this information isn't always critical for us artists, it's helpful to know that Krita is working behind the curtains to cache our animation frames for the smoothest possible experience when scrubbing through or playing back your animation. **D. Current Time Scrubber --** A highlighted column in the Frame Table which controls the current frame time and, as such, what is currently displayed in the viewport. * **Active Frame:** A frame of the *active layer* at the *current time* position. The active frame is always marked with a small circle inside. All drawing, painting, and image editing operations happen on this frame only! .. warning:: Don't mix the active frame up with the current selection! -**E. Layer Menu --** A small menu for manipulating animation layers. You can create new layers, add or remove existing ones, and you can set 'Show in Timeline' here to pin the active layer to the Timeline. (This menu also shows up when right-clicking on layers inside of the Layer List.) +**E. Layer Menu --** A small menu for manipulating animation layers. You can create new layers, remove existing ones, as well as pin or unpin the active layer. (This menu also shows up when right-clicking on layer headers inside of the Layer List.) **F. Audio Menu:** Another small menu for animating along with audio sources. This is where you can open or close audio sources and control output volume/muting. **G. Zoom Handle:** This allows you to zoom in and out on the Frame Table, centered around the current frame time. Click-dragging starting on the zoom handle controls the zoom level. Usage: ------ How to use the Timeline Docker is not immediately obvious because :program:`Krita` doesn't automatically create a key frame out of your initial drawing. In fact, *until you make a key frame on a layer*, Krita assumes that there's no animation going on at all on that layer and it will keep the image static over the whole animation. So, to make our first *animated layer*, we need to make a key frame! -|mouseright| any square on the timeline docker and select :guilabel:`Create Blank Frame`. A blank frame (one that you haven't yet drawn anything in) appears as a *hollow outline* instead of a solid box, making that frame active and drawing on the canvas will make it appear as a *solid, colored rectangle*. +|mouseright| any square on the timeline docker and select :guilabel:`Create Blank Frame`. A blank frame (one that you haven't yet drawn anything in) appears as a *hollow outline* instead of a solid box, making that frame active and drawing on the canvas will make it appear as a *solid, colored rectangle*. To move a frame around, you can drag and drop it into another empty frame slot. -To keep a layer visible in the Timeline Docker regardless of which layer is selected, select the layer in the Layers Docker so it shows up in the docker, then |mouseright| it within the Timeline Docker's Layer List and select :guilabel:`Show in Timeline`. This way you can choose which layers are important and which are only minor. +While animating you may find that you want to keep a layer "pinned", making it visible in the Timeline Docker regardless of which layer is selected. There are a few ways to do this in Krita. By |mouseright| clicking on any layer in the Layers Docker, you can pin it by activating the :guilabel:`Pin to Timeline` menu item. This allows you to decide which layers are important to see in your timeline (i.e. those which contain keyframe drawings) and which layers are not (i.e. a static layout drawing or background painting). Alternatively, you can open the Timeline Docker's Layer Menu and select a layer from the :guilabel:`Pin Existing Layer` submenu. Finally, you can enable the :guilabel:`Automatically pin new layers to timeline` option from the :guilabel:`Configure Krita > General > Miscellaneous` dialog. -You can drag and drop the frame around to a different empty frame slot. - -To add a single new frame, either right-click on an empty frame slot and select :guilabel:`Create Blank Frame` to create a fresh blank frame, or select :guilabel:`Create Duplicate Frame` to create a new copy of the previous frame. +To add a new frame, either right-click on an empty frame slot and select :guilabel:`Create Blank Frame` to create a fresh blank frame, or select :guilabel:`Create Duplicate Frame` to create a new copy of the previous frame. It's also possible to add multiple key frames by right-clicking inside the Frame Table and selecting :menuselection:`Keyframes --> Insert Multiple Keyframes`. With this option you can specify a number of frames to add with the option of built in timing for quickly creating a series of 1s, 2s, 3s, etc. These settings are saved between uses. You can also change the color of frames so that you can easily identify important frames or distinguish between different sections of your animation. The current color selection is remembered for new frames so that you can easily make a set of colored frames and then switch to another color. -It's also possible to add multiple key frames by right-clicking inside the Frame Table and selecting :menuselection:`Keyframes --> Insert Multiple Keyframes`. With this option you can specify a number of frames to add with the option of built in timing for quickly creating a series of 1s, 2s, 3s, etc. These settings are saved between uses. - -Instead of the Frame Table, right-clicking within the Frame Timing Header gives you access to a few more options which allow you to add or remove entire columns of frames or holds at a time. For example, selecting :menuselection:`Keyframe Columns --> Insert Keyframe Column Left` will add new frames to each layer that's currently visible in the Timeline Docker. +Clicking with |mouseright| within the Frame Timing Header instead of the Frame Table gives you access to a few more options which allow you to add or remove entire columns of frames or holds at a time. For example, selecting :menuselection:`Keyframe Columns --> Insert Keyframe Column Left` will add new frames to each layer that's currently visible in the Timeline Docker. .. image:: /images/dockers/Timeline_insertkeys.png :align: center :program:`Krita` only tracks key frame changes. This is unlike :program:`Flash` where you have to manually indicate how long a key frame will hold. Instead, :program:`Krita` just assumes that the space between key frame 1 and key frame 2 is supposed to be filled with key frame 1. Frames that are held in this way (a.k.a. "holds") are displayed as a continuous line in the Frame Table. To delete frames, |mouseright| the frame and press :guilabel:`Remove Keyframe`. This will delete all selected frames. Similarly, selecting :guilabel:`Remove Frame and Pull` will delete the selected frames and pull or shift all subsequent frames back/left as much as possible. -To manually play your animation back and forward using your mouse, a concept called *scrubbing*, you click-drag within the Frame Timing Header. +To manually play your animation back and forward using your mouse, an important technique that's known as *scrubbing*, click-drag within the Frame Timing Header. GUI Actions: ------------ #. **Layer List** * |mouseleft| : Select active layer. * |mouseright| : Layers Menu (add/remove/show layers, etc.). #. **Frame Timing Header** * |mouseleft| : Move to time and select frame of the active layer. * |mouseleft| :kbd:`+ drag` : Scrub through time and select frame of the active layer. * |mouseright| : Frame Columns Menu (insert/remove/copy/paste columns and hold columns). #. **Frames Table: all** * |mouseleft| : Selects a single frame or slot and switches time, but *does not switch active layer*. * :kbd:`Space +` |mouseleft| : Pan. * :kbd:`Space +` |mouseright| : Zoom. #. **Frames Table (On Empty Slot).** * |mouseright| : Frames menu (insert/copy/paste frames and insert/remove holds). * |mouseleft| :kbd:`+ drag` : Select multiple frames and switch time to the last selected, but *does not switch active layer*. * :kbd:`Shift +` |mouseleft| : Select all frames between the active and the clicked frame. * :kbd:`Ctrl +` |mouseleft| : Select individual frames together. :kbd:`click + drag` them into place. #. **Frames Table (On Existing Frame)** * |mouseright| : Frames menu (remove/copy/paste frames and insert/remove holds). * |mouseleft| :kbd:`+ drag` : *Move* a frame or multiple frames. * :kbd:`Ctrl +` |mouseleft| :kbd:`+ drag` : Copy a frame or multiple frames. * :kbd:`Alt + drag` : Move selected frame(s) and *all* the frames to the right of it. (This is useful for when you need to clear up some space in your animation, but don't want to select all the frames to the right of a particular frame!) diff --git a/user_manual/animation.rst b/user_manual/animation.rst index dfade5609..a7d4de2c6 100644 --- a/user_manual/animation.rst +++ b/user_manual/animation.rst @@ -1,302 +1,304 @@ .. meta:: :description: Detailed guide on the animation workflow in Krita. .. metadata-placeholder :authors: - Wolthera van Hövell tot Westerflier - Raghavendra Kamath - Scott Petrovic - Lundin :license: GNU free documentation license 1.3 or later. .. index:: Animation .. _animation: ==================== Animation with Krita ==================== Thanks to the 2015 Kickstarter, :program:`Krita 3.0` now has animation. In specific, :program:`Krita` has frame-by-frame raster animation. There's still a lot of elements missing from it, like tweening, but the basic workflow is there. To access the animation features, the easiest way is to change your workspace to Animation. This will make the animation dockers and workflow appear. Animation curves ---------------- To create an animation curve (currently only for opacity) expand the :guilabel:`New Frame` button in the :guilabel:`Animation` dock and click :guilabel:`Add Opacity Keyframe`. You can now edit the keyframed value for opacity directly in the “Layers” dock, adding more keyframes will by default fade from the last to the next upcoming keyframe in the timeline over the frames between them. See :ref:`animation curves ` for details. Workflow --------- In traditional animation workflow, what you do is that you make *key frames*, which contain the important poses, and then draw frames in between (\ *tweening* in highly sophisticated animator's jargon). For this workflow, there are three important dockers: #. The :ref:`timeline_docker`. View and control all of the frames in your animation. The timeline docker also contains functions to manage your layers. The layer that are created in the timeline docker also appear on the normal Layer docker. #. The :ref:`animation_docker`. This docker contains the play buttons as the ability to change the frame-rate, playback speed and useful little options like :guilabel:`auto-key framing`. #. The :ref:`onion_skin_docker`. This docker controls the look of the onion skin, which in turn is useful for seeing the previous frame. Introduction to animation: How to make a walkcycle -------------------------------------------------- The best way to get to understand all these different parts is to actually use them. Walk cycles are considered the most basic form of a full animation, because of all the different parts involved with them. Therefore, going over how one makes a walkcycle should serve as a good introduction. Setup ~~~~~ First, we make a new file: .. image:: /images/animation/Introduction_to_animation_01.png On the first tab, we type in a nice ratio like 1280x1024, set the dpi to 72 (we're making this for screens after all) and title the document 'walkcycle'. In the second tab, we choose a nice background color, and set the background to canvas-color. This means that Krita will automatically fill in any transparent bits with the background color. You can change this in :menuselection:`Image --> Image Properties`. This seems to be most useful to people doing animation, as the layer you do animation on MUST be semi-transparent to get onion skinning working. .. note:: Krita has a bunch of functionality for meta-data, starting at the :guilabel:`Create Document` screen. The title will be automatically used as a suggestion for saving and the description can be used by databases, or for you to leave comments behind. Not many people use it individually, but it can be useful for working in larger groups. Then hit :guilabel:`Create`! Then, to get all the necessary tools for animation, select the workspace switcher: .. figure:: /images/animation/Introduction_to_animation_02.png The red arrow points at the workspace switcher. And select the animation workspace. Which should result in this: .. image:: /images/animation/Introduction_to_animation_03.png The animation workspace adds the timeline, animation and onion skin dockers at the bottom. Animating ~~~~~~~~~ We have two transparent layers set up. Let's name the bottom one 'environment' and the top 'walkcycle' by double clicking their names in the layer docker. .. image:: /images/animation/Introduction_to_animation_04.png Use the straight line tool to draw a single horizontal line. This is the ground. .. image:: /images/animation/Introduction_to_animation_05.png Then, select the 'walkcycle' layer and draw a head and torso (you can use any brush for this). Now, selecting a new frame will not make a new frame automatically. Krita doesn't actually see the 'walkcycle' layer as an animated layer at all! .. image:: /images/animation/Introduction_to_animation_06.png We can make it animatable by adding a frame to the timeline. |mouseright| a frame in the timeline to get a context menu. Choose :guilabel:`New Frame`. .. image:: /images/animation/Introduction_to_animation_07.png You can see it has become an animated layer because of the onion skin icon showing up in the timeline docker. .. image:: /images/animation/Introduction_to_animation_08.png Use the :guilabel:`Copy Frame` button to copy the first frame onto the second. Then, use the with the :kbd:`Shift + ↑` shortcut to move the frame contents up. We can see the difference by turning on the onionskinning: .. image:: /images/animation/Introduction_to_animation_09.png Now, you should see the previous frame as red. .. warning:: Krita sees white as a color, not as transparent, so make sure the animation layer you are working on is transparent in the bits where there's no drawing. You can fix the situation by use the :ref:`filter_color_to_alpha` filter, but prevention is best. .. image:: /images/animation/Introduction_to_animation_10.png Future frames are drawn in green, and both colors can be configured in the onion skin docker. .. image:: /images/animation/Introduction_to_animation_11.png Now, we're gonna draw the two extremes of the walkcycle. These are the pose where both legs are as far apart as possible, and the pose where one leg is full stretched and the other pulled in, ready to take the next step. Now, let's copy these two... We could do that with the :kbd:`Ctrl + drag` shortcut, but here comes a tricky bit: .. image:: /images/animation/Introduction_to_animation_12.png :kbd:`Ctrl +` |mouseleft| also selects and deselects frames, so to copy... - :kbd:`Ctrl +` |mouseleft| to select all the frames you want to select. - :kbd:`Ctrl + drag`. You need to make sure the first frame is 'orange', otherwise it won't be copied along. Now then... .. figure:: /images/animation/Introduction_to_animation_13.png :width: 580 Squashed the timeline docker a bit to save space. #. Copy frame 0 to frame 2. #. Copy frame 1 to frame 3. #. In the animation docker, set the frame-rate to 4. #. Select all frames in the timeline docker by dragging-selecting them. #. Press play in the animation docker. #. Enjoy your first animation! Expanding upon your rough walkcycle ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ .. image:: /images/animation/Introduction_to_animation_14.png You can quickly make some space by the :kbd:`Alt + drag` shortcut on any frame. This'll move that frame and all others after it in one go. Then draw inbetweens on each frame that you add. .. image:: /images/animation/Introduction_to_animation_16.png You'll find that the more frames you add, the more difficult it becomes to keep track of the onion skins. You can modify the onion skin by using the onion skin docker, where you can change how many frames are visible at once, by toggling them on the top row. The bottom row is for controlling transparency, while below there you can modify the colors and extremity of the coloring. .. image:: /images/animation/Introduction_to_animation_15.png Animating with multiple layers ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Okay, our walkcycle is missing some hands, let's add them on a separate layer. So we make a new layer, and name it hands and... .. image:: /images/animation/Introduction_to_animation_17.png Our walkcycle is gone from the timeline docker! This is a feature actually. A full animation can have so many little parts that an animator might want to remove the layers they're not working on from the timeline docker. So you manually have to add them. .. image:: /images/animation/Introduction_to_animation_18.png -You can show any given layer in the timeline by doing |mouseright| on the layer in -the layer docker, and toggling :guilabel:`Show in Timeline`. +To show a layer whether it's active or not, you can "pin" it to the +timeline by right-clicking |mouseright| on the layer in the layer docker, +and toggling :guilabel:`Pin to Timeline`. We recommend pinning any layers +that you're currently animating on. .. image:: /images/animation/Introduction_to_animation_19.png Exporting ~~~~~~~~~ When you are done, select :menuselection:`File --> Render Animation`. .. image:: /images/animation/Introduction_to_animation_20.png It's recommended to save out your file as a png, and preferably in its own folder. Krita can currently only export png sequences. .. image:: /images/animation/Introduction_to_animation_21.png When pressing done, you can see the status of the export in the status bar below. .. image:: /images/animation/Introduction_to_animation_22.png The images should be saved out as filenameXXX.png, giving their frame number. Then use something like Gimp (Linux, OSX, Windows), ImageMagick (Linux, OSX, Windows), or any other GIF creator to make a ``.gif`` out of your image sequence: .. image:: /images/animation/Introduction_to_animation_walkcycle_02.gif For example, you can use `VirtualDub `_\ (Windows) and open all the frames and then go to :menuselection:`File --> Export --> GIF`. Enjoy your walkcycle! .. note:: Krita 3.1 has a render animation feature. If you're using the 3.1 beta, check out the :ref:`render_animation` page for more information! Importing animation frames -------------------------- You can import animation frames in Krita 3.0. First let us take a sprite sheet from Open Game Art. (This is the Libre Pixel Cup male walkcycle) And we'll use :menuselection:`Image --> Split Image` to split up the sprite sheet. .. image:: /images/animation/Animation_split_spritesheet.png The slices are even, so for a sprite sheet of 9 sprites, use 8 vertical slices and 0 horizontal slices. Give it a proper name and save it as png. Then, make a new canvas, and select :menuselection:`File --> Import Animation Frames`. This will give you a little window. Select :guilabel:`Add images`. This should get you a file browser where you can select your images. .. image:: /images/animation/Animation_import_sprites.png You can select multiple images at once. .. image:: /images/animation/Animation_set_everything.png The frames are currently automatically ordered. You can set the ordering with the top-left two drop-down boxes. Start Indicates at which point the animation should be imported. Step Indicates the difference between the imported animation and the document frame rate. This animation is 8 frames big, and the fps of the document is 24 frames, so there should be a step of 3 to keep it even. As you can see, the window gives feedback on how much fps the imported animation would be with the currently given step. Press :guilabel:`OK`, and your animation should be imported as a new layer. .. image:: /images/animation/Animation_import_done.png Reference --------- - https://community.kde.org/Krita/Docs/AnimationGuiFeaturesList - `The source for the libre pixel cup male walkmediawiki cycle `_