71 lines
2.9 KiB
Markdown
71 lines
2.9 KiB
Markdown
# Flipnote Editor
|
||
|
||
A browser animation editor extracted from RexiMemo. The drawing interface is
|
||
the same: a 256×192 canvas, two ink layers, eight playback speeds, drawing and
|
||
paint tools, selections, transforms, text, onion skin and sound tracks.
|
||
|
||
This version runs on its own. It has no accounts, site navigation, online
|
||
library or server API. Files selected in the editor are read by your browser.
|
||
They are not sent anywhere.
|
||
|
||
## Run it
|
||
|
||
With Node.js 18 or newer:
|
||
|
||
```sh
|
||
npm start
|
||
```
|
||
|
||
Open **http://localhost:8090**. No dependency installation or build step is
|
||
needed. Alternatively, serve this folder with any static web server, for example:
|
||
|
||
```sh
|
||
python -m http.server 8090 --bind 127.0.0.1
|
||
```
|
||
|
||
Use localhost or HTTPS for microphone recording. Opening `index.html` directly
|
||
from disk is not supported because the text renderer loads local JSON.
|
||
For static hosting, copy the whole folder. Asset paths also work in a subdirectory.
|
||
|
||
## Files and audio
|
||
|
||
- **Tab 5 → Open .PPM** reads a Flipnote Studio file from your device, including
|
||
its pages, ink colours, paper, hidden layers, sound effects and playback speed.
|
||
- **Tab 4** records music and three sound effects. Hold Shift while clicking an
|
||
audio button to import an MP3 or WAV and trim it.
|
||
- **Tab 4 → Import Image** accepts local images and clipboard pastes.
|
||
- **Tab 5 → Save .WEBM** renders the animation and its audio into a video.
|
||
|
||
PPM writing, signing and online uploads are absent. WebM is the only animation
|
||
output. There is no editable project save format or automatic project backup;
|
||
keep the page open until you have finished. The browser asks before closing a
|
||
changed project. Tool preferences and keyboard shortcuts stay on your device.
|
||
|
||
Open the editor's settings button for zoom, the pixel grid, the desktop Shift
|
||
button and remappable shortcuts. The pixel grid appears at 400% zoom and above.
|
||
Text uses **Shift+T** by default.
|
||
|
||
## Source layout
|
||
|
||
| File | Purpose |
|
||
| --- | --- |
|
||
| `index.html` | Editor controls and dialogs |
|
||
| `assets/editor.css` | Original editor styling and shared form rules |
|
||
| `assets/bootstrap.js` | Asset loading, input fixes and touch Shift control |
|
||
| `assets/flipnote-editor/editor.js` | Drawing, pages, selection, audio and video rendering |
|
||
| `assets/flipnote-editor/drawing-engine.js` | Brush and paint behaviour |
|
||
| `assets/flipnote-editor/text-tool.js` | Pixel text tool |
|
||
| `assets/ppm-import.js` | Local PPM import adapter |
|
||
| `assets/vendor/flipnote.js` | Bundled PPM decoder |
|
||
| `tools/serve.cjs` | Optional local static file server |
|
||
|
||
Run `npm test` for the local import and release checks. Tests do not contact
|
||
RexiMemo or require an account. The original RexiMemo editor is not modified by
|
||
this standalone version.
|
||
|
||
## Licence
|
||
|
||
The editor code follows the source project's GNU AGPL version 3 licence. See
|
||
`LICENSE`. Bundled dependencies retain their own licences. Additional credits
|
||
are listed in `CREDITS.md`.
|