Skip to content

Commit

Permalink
Expand the animation section with links to the preview window
Browse files Browse the repository at this point in the history
  • Loading branch information
dacap committed Dec 5, 2019
1 parent 1bd5b0b commit c85a906
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 8 deletions.
24 changes: 18 additions & 6 deletions animation.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
# Animation

Aseprite's main goal is to be a tool to create animations. The
[timeline](timeline.md) gives you total control over frames and
[cels](cel.md).
[timeline](timeline.md) gives you total control over frames,
[layers](layers.md), and [cels](cel.md).

First of all you should learn
[the difference between a frame and a cel](cel.md).
The general workflow is:

1. You [draw](drawing.md) the first frame
1. Then you [add new frames](new-frame.md) (e.g. pressing `Alt+N`) and continue drawing them
1. You can navigate frames using `Left` and `Right` arrow keys (or `,` and `.`) to
go to the previous or next frames respectively
1. You can [preview the animation](preview-window.md) using
the Play button ![Play icon](animation/play-button.png) or pressing `Enter` key
1. You can [tag](tags.md) a range of frames for future reference or to separate
different animations of the same sprite

There are some extra tools like
the [Preview Window](preview-window.md) and [Onion Skinning](onion-skinning.md) that
will make your life a lot easier to animate.

### Common Operations

Expand All @@ -14,8 +26,8 @@ First of all you should learn
1. [Copy frames](copy-frames.md) or [cels](copy-cels.md)
1. [Move frames](move-frames.md) or [cels](move-cels.md)
1. Remove frames
1. Reuse frames
1. Tag several frames
1. [Reuse frames](linked-cels.md)
1. [Tag several frames](tags.md)
1. [Change the duration of a specific frame](frame-duration.md)
1. Copy frames to other file
1. [Loop a section](loop.md)
Expand Down
10 changes: 8 additions & 2 deletions preview-window.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,15 @@
The preview window is the little window that can show you the
animation preview in realtime while you edit your animation:

<img src="/docs/preview-window/preview-window.png" alt="Preview Window" class="xN" />
<img src="/docs/preview-window/preview-window.png" alt="Preview Window" class="x2" />

You can show/hide this window pressing the `F7` key or with the *View > Preview* menu option.
You can show/hide this little window pressing the `F7` key or with the
*View > Preview* menu option.

You can also press the little play button ![Play
button](preview-window/play-button.png) or press `Shift+Enter` to
start playing the sprite animation (or the current [tag](tags.md)) in
the window.

---

Expand Down
Binary file added preview-window/play-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c85a906

Please sign in to comment.