Stackadia
Animation Studio

Studio turns layered still images into short animated scenes. Arrange your artwork, set poses along a timeline, add a sprite cycle and a soundtrack, then share an interactive player or rendered output.

Two ways to use this guide

This is a self-contained, offline HTML guide. Use the chapter buttons, contents, or search. Click any instructional image to enlarge it; press Escape to close. Print / PDF prints every chapter. Your browser’s Find command also works in the all-chapters view.

A compact creative tool

The artwork is 2D. Parallax suggests depth by moving planes at different rates; Depth View helps inspect those planes.

1. Unzip the release package and open Stackadia_Animation_Studio_1_0_0_Final.html in your desktop or tablet browser. No server or installation is required.
2. Choose Open Studio → on the introduction. The built-in Prince scene is ready to explore.
3. Choose Open in the header, then select Prince_Castle_Journey.sastudio.json from the Prince_Project folder. The project embeds its images and sound; do not relink the Assets folder.
4. Click Play. Watch the Prince walk toward the castle while the clouds drift. A click is needed to enable browser audio. Press Play again to pause.
5. Drag the playhead to inspect different moments. Scrubbing is silent. Use the previous/next frame buttons for precise inspection.
6. Choose Save project and keep the downloaded file with a clear revision name, such as Prince_My_Edit_01.sastudio.json.

Two editable examples

Prince_Castle_Default.sastudio.json is the unmodified built-in example: a still Prince, existing motion, and no applied soundtrack. Use it to practice applying the walk and melody presets.

Prince_Castle_Journey.sastudio.json is the guide-ready example: the eight-pose walk at 12 poses/second, music at 70% volume, 0.25-second fade-in, 0.5-second fade-out, and named cues. Its loop option is enabled.

Prince_Castle_Journey_Player.html is the ready-to-play companion. It demonstrates playback and is separate from either editable project.

The timeline displays frontmost artwork at the top, so its visible order is the reverse of this table. The camera is a separate row. Sprite poses do not use extra artwork slots.

Arrange: change the whole path

Use Arrange when an object’s overall placement, size, orientation, or opacity needs adjustment. It changes the layer and its entire motion path. Moving the Prince in Arrange shifts the journey rather than creating a new stop.

Animate: change this moment

Use Animate to author a pose at the current frame. Move the playhead first, then change X/Y, Scale, Rotation, or Opacity. Studio creates or updates the keyframe at that time.

1. Open the Journey example and select Prince.
2. Choose Animate, then select the existing key at frame 120.
3. Change its position slightly using the canvas or X/Y fields. Preview both halves of the journey.
4. Choose Undo to restore the guide example. Switch to Arrange and compare an overall adjustment. Undo again.

Transforms and pivots

Move drags the object. Scale drags up/down; Rotate turns around the pivot. Use numeric fields for repeatable values. Choose Center, Feet / bottom, Top, or Custom as appropriate. Changing the pivot preserves authored key poses, though paths between keys can change. Escape cancels an active drag; a completed drag is one Undo step.

¹Offsets in the project’s key data, relative to the layer’s base placement—not absolute scene coordinates. The inspector may show the combined pose. The Prince’s base position is (330, 665).

Retime with intention

Drag a diamond to change when its pose occurs. Use Snap for frame, 5-frame, half-second, or one-second increments. Hold Shift while dragging for individual frames. Use the Key frame field when an exact number matters.

Previous/next key buttons navigate the selected layer’s keys. Copy key and Paste key transfer poses to the current time; camera poses paste only onto the camera. Keep at least one key on every layer.

At 30 timeline fps, frame 120 is 4 seconds and frame 240 is 8 seconds. A sprite’s pose rate is separate from the timeline rate.

1. Open Prince_Castle_Default.sastudio.json to start with the still Prince. Save your existing work first.
2. Choose Sprite animation above the canvas.
3. Click Use Prince Walk & Play. The preset targets the Prince layer (or the selected image if Prince is absent), keeps its movement and fades, and starts playback.
4. Pause and reopen Sprite animation. Inspect the 12 poses/second timing, start frame 0, and Loop setting.
5. Save a new project revision. Undo can restore the previous artwork if needed.

1. Choose New project for an empty scene, or save a copy of an existing project.
2. Use Import images or drop PNG, JPEG, or static WebP files onto the canvas to create image layers.
3. To collect images without using layer slots, choose Add images in the Assets shelf or drop files there.
4. Select a shelf image and choose Place selected, or drag it onto the canvas.
5. Name the layer, arrange it, and save the project.

Keep the layer stack readable

Use the Layer selector or timeline to select a named layer. Frontmost artwork is at the top. Drag its dotted handle or use Forward / Back to change overlap. Parallax depth does not change this order.

Visible hides/shows artwork; Locked protects it from edits. Hidden layers still occupy slots. Unlock before editing. Duplicate uses another slot. Delete removes the layer and animation but leaves its image on the shelf; Undo restores the deletion.

Use selected shelf image replaces the selected image layer’s artwork while preserving transforms. Incompatible sprite settings are cleared.

Add a caption

1. Choose the Text tool to add a text layer. It uses one artwork slot.
2. Edit Caption, Size, Color, Font (Sans / Serif / Mono), and Dark outline in the inspector.
3. Use Arrange to place it within the output frame.
4. Use Animate to key its position, scale, rotation, or opacity just like image artwork.

Fonts come from the local system, so line lengths and appearance can vary on another computer. Check the exported player where it will be used.

Control transparency

Opacity 100% is opaque; 40% is partly transparent. The Translucent 40% button is a quick starting point. Use Arrange for overall layer opacity or Animate for changing opacity over time.

Try a gentle title entrance

1. Add a caption such as “The Prince’s Journey.” Keep its authored opacity at 100%.
2. Set the playhead to the intended entrance time. Enter a Fade seconds duration, then choose Fade In.
3. Move to the intended exit time and add Fade Out. Preview the whole passage.
4. Use Clear fades to remove the fade envelopes without changing transform keys.

Each layer supports one fade-in and one fade-out envelope. They multiply the authored opacity. A completed fade-out stays invisible; a 40% layer remains at most 40% opaque even with a fade-in.

Understand the three kinds of zoom

The camera icon selects the existing camera. In Animate mode, set keys for Camera X/Y and Scale. The Prince example moves Camera X from 0 to 80 across eight seconds; Scale stays at 1.

Higher parallax values respond more to camera travel. Foreground at 1.25 responds more than Landscape at 0.25. Clouds also have their own drift keys. Artwork order independently controls which plane overlaps another.

1. Select Camera and switch to Animate.
2. Inspect its starting and ending keys. Preview the scene.
3. Try Gentle push-in · whole scene for a smooth 20% zoom, then Undo. This preset replaces the camera keys.
4. Open Depth view; compare Parallax depth and Layer order spacing, change the angle, and scrub. Close to return to editing.

1. From the Default project, open Soundtrack and choose Try demo melody. Alternatively, use Import / replace sound for your own audio.
2. Set Timeline start to 0 seconds and Trim source start to 0. Placement chooses where sound begins on the timeline; trim chooses where reading begins inside the source.
3. Set Volume to 70%, Fade in to 0.25 s, and Fade out to 0.5 s to match the Journey example.
4. Close, click Play, and listen through the ending. Save a project revision.

Start at playhead aligns the soundtrack to the current moment. The sound row displays the waveform and supports placement dragging. The waveform represents the full source, rather than just the trimmed portion. Soft fades provides a quick envelope; use numeric fields when you need particular durations.

Sound follows playback, seeks, and loops. Importing a second source replaces the current soundtrack; there is no multitrack mixer or separate effects track. To combine narration, effects, and music, prepare a mixed file elsewhere and import that as the single source.

Source limits: 20 MB, 120 seconds, mono/stereo, and 12 million decoded samples. Decoding of audio formats depends on the browser.

Work with markers

1. Move the playhead to a story beat and open Markers / Ranges.
2. Enter a name and use Use playhead, then Add marker.
3. To revise an existing marker, choose it, edit the name/frame, and Save changes.

Preview a passage

The Journey project includes Walk to Castle (frames 0–240) and Castle Approach (120–240). Choose a range in the transport’s Preview selector, then Play. Loop repeats that section; Stop returns to its start.

To add your own range, enter a name and start/end frames, or use the playhead buttons for each bound, then Add range. Use this range activates it for preview. Scrubbing outside the range does not change the range.

Up to 32 markers and 16 ranges are supported. Marker activity records playback crossings, not scrubbing. Cues are preserved in projects, player exports, and rendered-export metadata.

The stage is always 1280 × 720. This crop removes 64 pixels from each horizontal side and 36 pixels from top and bottom, producing a 16:9 picture at 1152 × 648.

1. Choose Output frame in the header.
2. Use 5% inset · 16:9 to match the demo, Full stage for the whole canvas, or enter whole-pixel bounds and Apply frame.
3. Choose Preview crop to inspect the actual current-frame output.
4. Close the preview, scrub through the scene, and check coverage throughout. Save the project.

The output rectangle is fixed in camera space. Artwork and parallax move behind it. A crop helps exclude edges but does not guarantee coverage at every pose or camera setting.

The Output guide checkbox controls only the editor overlay. Turning it off does not disable the crop. Selection handles, guides, and editor magnification do not appear in exports.

What Save project contains

The .sastudio.json file contains editable layers and keys, embedded image and sprite assets, shelf artwork, soundtrack, output crop, markers, ranges, and project settings. You can move it to another computer without an external asset folder.

1. Choose Save project. Find the downloaded file using your browser’s Downloads controls.
2. Give important revisions distinct names using your file manager.
3. Choose Open and select the saved project to continue editing.
4. Before a handoff, reopen the saved copy and compare the scene, sound, crop, and cues.

A simple revision habit

Undo/Redo helps during a session; it is not a substitute for saved revisions. New project and Load demo clear Undo history. Downloads may receive a browser-added number when a filename already exists.

Project files are limited to 110 MB, with up to 100 MB embedded asset data. Smaller source images and shorter sound files make saving, opening, and sharing easier.

Before every final export

1. Save the editable project.
2. Check the output crop throughout the scene.
3. Choose the desired full-scene or section bounds in the relevant export dialog.
4. Preview picture and sound, then inspect the downloaded result.

The editor theme does not alter authored artwork colors. Exporting at reduced size changes pixel dimensions; it does not change the animation’s authored timing. GIF export is deferred in 1.0.0.

1. Choose Export player. Enter a meaningful Player title.
2. Choose an opening range if desired. This selects the initial passage; it does not remove the rest of the scene.
3. Choose Preview player. Click Play inside the generated player to enable audio.
4. Check controls, range choice, looping, volume/mute, and the framing. Close the preview when finished.
5. Choose Download player HTML. Open that downloaded file independently and repeat the playback check.

The player bundles artwork and sound and works offline. It retains output framing, parallax, sprite animation, text, fades, and cues. Its About / Playback API section documents the JavaScript interface.

Closing the preview releases its playback resources. The downloaded player is a separate delivery file; keep the Studio project for future revisions.

A single frame

Set the playhead to the desired moment, then choose PNG frame. The image uses the crop’s native pixel dimensions and preserves transparency where the scene has it. It has no sound.

A sequence or sprite sheet

1. Choose Export frames, then PNG image sequence or PNG sprite sheet.
2. Set Start frame and End frame. Choose 30, 15, 10, 6, or 5 fps sampling and 100%, 50%, or 25% size.
3. Choose Transparent or a Solid color background.
4. Optionally include the original soundtrack with its timing/fade metadata. This is source audio, not rendered audio with trim/fades applied.
5. Choose Render & download ZIP. Inspect the images and included metadata. Cancel export stops a job.

Bounds are inclusive. Sampling begins at the start frame; an off-cadence end is not appended. The last sample is held for one interval. For example, bounds 0–240 sampled at 30 fps produce 241 images, whose held intervals span about 8.033 seconds.

The ZIP includes timing, crop, and cue information. Use that metadata when importing into another tool; images alone do not contain playback timing.

1. Choose Export movie. Select an available WebM/MP4 format, frame bounds, 15 or 30 fps, size, and quality.
2. Choose a solid background color and enable Include soundtrack if wanted.
3. Click Record preview. Keep this tab visible and allow the scene to run in real time.
4. Play the completed preview. Check the first and last moments, picture, sound, duration, and synchronization.
5. Choose Download movie before closing. Reopen the downloaded video and check it in the destination player.

An interrupted, stalled, or excessively delayed recording is discarded. Cancel recording stops a job; retry with a smaller size if needed. Closing the dialog releases the preview.

Movies use a solid background and even pixel dimensions. Encoded output is capped at 200 MB. Available container/codec combinations depend on the browser; a format shown on one system may be unavailable on another.

Stackadia HTML App Object

Export Player HTML, then import that file into a Stackadia HTML App Object. This packages the animation as HTML playback. Keep the editable Studio project separately.

In those matched hosts, commands include playAnimation, pauseAnimation, stopAnimation, seekAnimation, playAnimationRange, setAnimationRange, setAnimationLoop, setAnimationVolume, muteAnimation, and animationState.

They are asynchronous and require a ready, interactive HTML App in Browse mode. Seek uses whole frames; volume uses 0–1; loop/mute use booleans; range names/IDs use strings. Commands are not queued across navigation/reload. Consult the included optional integration package for host usage.

JavaScript in the player’s own window

const animation = window.StackadiaAnimation;
await animation.ready;
await animation.playRange("Walk to Castle");
animation.pause();
animation.seek(120); // whole-scene frame
animation.setRange(null); // full scene
animation.setLoop(false);
animation.setVolume(0.7);
animation.setMuted(false);
const state = animation.getState();

The API also provides play, stop, and on. The player’s About / Playback API is the authoritative embedded reference. A containing page must account for browser origin rules before accessing another window’s API.

const unsubscribe = animation.on("marker", event => {
  console.log(event.name, event.frame);
});
// Later: unsubscribe();

Events include ready, playing, paused, stopped, seeked, marker, loop, complete, error, and overflow. Marker events occur on playback crossings, not editing seeks. The standalone player accepts no general incoming postMessage command interface.

Shortcuts apply when focus is outside text-entry controls and modal dialogs. Use visible buttons on tablets.

Themes and devices

Dark, Light, and High Contrast style the editor, not authored colors. Theme preference is remembered when browser storage permits. Desktop and tablets are the intended targets; phones are outside 1.0.0 scope.

Large source images can slow playback even below the eight-layer limit. Prepare artwork near the resolution needed for the scene.

Outside this release

Multiple cameras and shot switching; multiple audio tracks/mixing; unlimited or grouped layers; skeletal animation; automatic lip sync; advanced effects; true 3D authoring; animated GIF export; animated-image decoding; irregular sprite atlases. Optional AS-1 host promotion is a separate release decision.

Try your own variation

1. Save a copy of the Prince project.
2. Change the timing of the middle pose while preserving the start and finish.
3. Add a brief caption and a fade-in.
4. Try a camera push-in, then compare it with the original pan.
5. Name a new playback range, check the crop, and export a player.
6. Reopen the saved project and downloaded player to check both handoffs.

About this edition

Author: Michael Roberts
Guide created/revised: October 15, 2026
Copyright © 2026 Michael Roberts
Guide edition 1 · Studio 1.0.0 Final · Project format 7

www.stackadia.com
www.mygiantbrain.com
www.krellstudios.com

Illustrations and source material

Instructional screenshots were captured from Studio 1.0.0 Final with the supplied Prince projects. The workspace, keyframe, and camera screenshots use the original still-character demo; sound and cue dialogs use the Journey project. The three journey images are actual PNG frame exports. Source artwork and the sprite atlas come from the supplied Prince package.

Dia’s portrait and the Developers banner were supplied by Michael Roberts. The cover uses a cropped presentation of the banner; its pictured software is illustrative artwork. Actual application screenshots are used for instruction. Demo illustrations, the Prince Walk atlas, Dia, and cover artwork contain AI-generated content. The included melody is an original demonstration cue.

The Final release README, embedded Guide / About, Quick Start and Reference, Prince project README, project data, and player API documentation were used to prepare this guide. Movie format availability and audio behavior remain browser-dependent; this guide does not certify every browser or device.

License

Studio code and associated documentation use the MIT License. User-imported assets retain their respective rights. The optional Stackadia AS-1 hosts retain their GPL-3.0-or-later notices. The Studio MIT license is reproduced below.