Tour of the editor
Every part of the StykAnimate window and what it is for: the top bar, the Animate, Draw and Build workspaces, the tool rail, the stage, the panels and the timeline.
This tour shows you every part of the StykAnimate window: what it is called, what it is for, and the few controls and shortcuts you will use most. By the end you will know where to look for any button the other guides mention, and how to get back when a panel or tool seems to have disappeared.
- The top bar has the menus, your project’s name, the Animate / Draw / Build switch, Undo, Redo, Save and Export.
- The stage in the middle is where you pose. Properties on the right shows the settings of whatever you selected. The timeline along the bottom holds your frames.
- Lost? Press Ctrl+P and type what you want to do: the command palette finds any command by name.
Take the tour
This is the window you see when you start a new animation. Use Next or the arrow keys to go round it, or click any part of the window to jump to it. The workspace switch at the top and the Simple / Advanced switch in the timeline work here as they do in the app, and you can drag Blue’s dots on the stage.
Untitled animationSavedEvery command in StykAnimate is in one of these menus: File, Edit, View, Joint, Animation and Help.
The top bar
The strip across the top of the window. It works the same in every workspace. From left to right:
- The StykAnimate logo. Click it for one list of the most used commands, starting with Search commands… (Ctrl+P), the command palette.
- The menus. File creates, opens, saves, imports and exports. Edit has Undo, Copy, Paste, Duplicate, Select all and Settings… (Ctrl+,). View has zoom, Joints, Motion paths, Onion skin, Grid, Focus mode and Layout…. Joint works on the part you clicked (exact values, split, flip, delete). Animation has playback, Add frame and movieclips. Help lists the keyboard shortcuts and, in the desktop app, updates and What’s new.
- Your project’s name. Click it to rename the project. Next to it, Saved means every change is in your file; Edited means you have changes you have not saved yet.
- The workspace switch: Animate, Draw and Build. See Three workspaces.
- Undo and Redo (Ctrl+Z, Ctrl+Shift+ZorCtrl+Y). Every drag is one step. Esc cancels a drag you have not finished yet.
- Save (Ctrl+S) writes your project as a .styk file. The first time, it asks where. See Save, open and recover.
- Export (Ctrl+Shift+E) opens the Export window, where you turn the animation into a video, a GIF or pictures. See Export.
Glance at the word next to your project’s name before you close the app. If it says Edited, press Ctrl+S first.
Three workspaces
A workspace is a set of tools for one kind of job. The switch in the middle of the top bar changes the tool rail, the stage header and the panels, but never your animation. Your figures, frames and layers stay exactly where they are.
Pose figures, add frames and set the timing. You will spend most of your time here.
Pose a figure DrawPaint on drawing layers with brushes, frame by frame: effects, backgrounds, lettering.
Drawing layers BuildChange a figure’s shape: add lines, circles and polygons, set colours and widths, and set up its rig.
The Figure BuilderTry it in the tour above:
- Click Draw in the top bar. The tool rail now starts with the Brush, and the stage header shows the brush’s size, opacity and colour.
- Click Build. The timeline hides to give the figure more room, the rail shows the drawing tools for parts (Line, Circle, Polygon…), and the top bar adds Test rig and Done.
- Click Done to finish building. You are back in Animate.
It is the Build workspace. You don’t open a separate window: select a figure, click Build, change it, then click Done.
The tool rail
The floating column of tools on the left of the stage. It only shows the tools of the current workspace. Drag its handle (the dots at the top) to move it to either side of the stage.
| Workspace | Tools, top to bottom |
|---|---|
| Animate | Add (the +), Select and pose (V), Breakdown tweener, Pan canvas (H) |
| Draw | New drawing layer (the +), Brush (B), Eraser (E), Fill (G), Select pixels (L), Shapes (U), Transform (V), Pan canvas |
| Build | Edit joints, Select figure (V), Line (L), Chain pen, Circle (C), Polygon, Pan canvas; then the part tools: Whole branch (B), Split part (S), Duplicate branch, Flip branch horizontally, Flip branch vertically, Delete part |
A tool with a small triangle in its corner has more choices. To see them, click the triangle, right-click the tool, or press and hold it (on a pen or touch screen). With the keyboard, focus the tool and press ↓.
In Animate, the + menu adds Stick figure, Text… (T), Image…, Import figures… and three kinds of Movieclip. Under In this project it lists the figures you already use, and Examples has ready-made rigs.
The stage header
The thin strip just above the stage.
- On the left: where you are. Scene 960 × 540 is the size of your animation in pixels. Click it to open the scene’s settings in Properties (size, background and frame rate). The small square next to it is the background colour: click it to change the colour. In Draw and Build, the active tool’s options appear here instead (the brush’s size and opacity, or what dragging does in Build).
- On the right: what you see while you work. These switches only change your view of the stage. They never change your animation.
Effects shows or hides your visual effects on the stage while you work, which can make playback lighter on a slow computer.
The stage
The big area in the middle, where you pose. The white rectangle is your scene: what ends up in your video. The dotted grey area around it is off-screen, a handy place to leave a figure that walks in later.
- Red dots (joints) turn a part of the selected figure. The orange dot (the origin) moves the whole figure. Figures you have not selected show blue dots.
- Click a figure to select it. Click an empty spot to select nothing: Properties then shows the scene.
- Zoom with Ctrl+Scroll, or = and -. Pan with Space+Drag, the middle mouse button, or Pan canvas (H).
More in Move around the canvas and Pose a figure.
The panels
The column on the right has three tabs:
- Properties shows the settings of whatever is selected: a figure, a joint, a layer, the camera or the scene.
- VFX adds visual effects to the selection: glows, outlines, shadows, blur, particles, explosions and more. See Visual effects.
- Library keeps figures and movieclips you want to reuse in any project, and opens the community library.
In the desktop app, Ctrl+1, Ctrl+2, Ctrl+3 and Ctrl+4 show or hide Properties, VFX, Library and the timeline. Drag a tab to move its panel somewhere else, and press Ctrl+\ for Focus mode, which hides the panels so the stage gets the whole window. In Build there is one more panel, Structure, folded into a strip on the left: a list of every part of the figure. See Panels and layouts.
Properties follows your selection
The stage, the timeline and Properties always talk about the same thing: what you selected last. That is why the same panel can look completely different after one click.
- In Animate, make sure Select and pose (V) is the active tool on the rail.
- Click Blue on the stage. Properties shows his name, a row of quick actions (Flip, Front, Back, Duplicate, Delete) and the sections Transform, Appearance and Arrange.
- Drag the orange dot. The X and Y fields in Transform change as he moves.
- Click an empty part of the stage. Properties now shows Scene: its Canvas size, its Background and its Playback rate.
To change a number, drag the field’s label left or right, or click the number and type. Hold Shift while dragging for small steps, Alt for even smaller ones.
Most commands need the right selection. A joint command needs a clicked joint; a figure command needs a selected figure. Select the thing first, then try again. The command palette (Ctrl+P) tells you what a greyed-out command is waiting for.
The timeline
The band along the bottom, where your frames live. Its header reads from left to right:
In the middle you also find Loop playback, the time (minutes:seconds:frames) and the fps box: how many frames play each second. At the right end are the timeline zoom, the Audio button and the timeline menu (…).
A new project is 10 frames long and plays at 24 fps. In Advanced, the rows below the header are the Camera, the Scene and your layers (Layer 1 to start with). A dot is a key, a pose you set; the grey bar after it shows how long that pose lasts. In Simple, each card is a frame and the bar under it shows how long it holds. Switching between the two changes only the view, never the animation. See Simple or Advanced timeline?
Handy everywhere
- Tooltips: point at a button and wait a moment to see its name and shortcut.
- The command palette (Ctrl+P or F1) finds any command, setting, layer, figure or frame by name.
- Every shortcut is listed in Help → Keyboard shortcuts (?), and you can change them there. See Keyboard shortcuts.
- F6 moves the keyboard focus between the stage, the panels and the timeline.
- Help → Performance shows how smoothly the app runs, if playback ever feels slow.
Get back to a familiar state
- The tools look different? Check the workspace switch in the top bar. You may be in Draw or Build.
- A panel disappeared? Press Ctrl+\ in case Focus mode is on, or choose a layout in View → Layout… (Ctrl+Alt+L).
- The timeline disappeared? You are probably in Build. Click Done in the top bar.
- The top bar shows Done and Cancel? You are editing the camera or a movieclip. Click Done to keep your changes, or Cancel to drop them.
- The dots have gone from Blue? Joints are switched off: press Shift+J, or click Joints in the stage header.
- Blue went off the screen? Select him and press Shift+2 (Fit selection), or Shift+1 to see the whole scene.
Common questions
Why does my window look a bit different from these pictures?
In a narrow window StykAnimate folds labels away to save room, so some buttons show only their icon. Point at one to see its name. Your own panel layout can also differ: View → Layout… has the presets.
Can I put the panels somewhere else?
Yes. Drag a panel’s tab to dock it on another side, group it with other panels, or float it. See Panels and layouts.
Is there a dark theme?
Yes: Edit → Settings… (Ctrl+,), then Interface, then Theme. System follows your computer’s setting.
Can StykAnimate open with the Simple timeline?
Yes. In Settings → Interface, choose Simple under Timeline.
Keep going
Still stuck?
Ask the community, or tell us what’s missing from the docs.