{"id":48404017,"url":"https://github.com/lifeart/fla-viewer","last_synced_at":"2026-04-06T02:35:06.928Z","repository":{"id":332444664,"uuid":"1133813712","full_name":"lifeart/fla-viewer","owner":"lifeart","description":"Free online viewer for Adobe Animate \u0026 Flash FLA files. View, play, and export animations to MP4, WebM, GIF, PNG, and SVG directly in your browser. No installation required. ","archived":false,"fork":false,"pushed_at":"2026-01-31T20:58:41.000Z","size":1703,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-02-01T08:30:18.248Z","etag":null,"topics":["adobe-animate","animation-preview","fla","fla-to-mp4","fla-viewer","flash","flash-player","player","sprite-sheet","viewer","xfl"],"latest_commit_sha":null,"homepage":"https://lifeart.github.io/fla-viewer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lifeart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-13T21:16:05.000Z","updated_at":"2026-01-31T21:07:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/lifeart/fla-viewer","commit_stats":null,"previous_names":["lifeart/fla-viewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lifeart/fla-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Ffla-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Ffla-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Ffla-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Ffla-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifeart","download_url":"https://codeload.github.com/lifeart/fla-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeart%2Ffla-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31457722,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe-animate","animation-preview","fla","fla-to-mp4","fla-viewer","flash","flash-player","player","sprite-sheet","viewer","xfl"],"created_at":"2026-04-06T02:35:06.172Z","updated_at":"2026-04-06T02:35:06.918Z","avatar_url":"https://github.com/lifeart.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FLA Viewer\r\n\r\n[![Deploy to GitHub Pages](https://github.com/lifeart/fla-viewer/actions/workflows/deploy.yml/badge.svg)](https://github.com/lifeart/fla-viewer/actions/workflows/deploy.yml)\r\n[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)\r\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\r\n[![Vite](https://img.shields.io/badge/Vite-7.x-646CFF?logo=vite\u0026logoColor=white)](https://vitejs.dev/)\r\n[![Vitest](https://img.shields.io/badge/Tested%20with-Vitest-6E9F18?logo=vitest\u0026logoColor=white)](https://vitest.dev/)\r\n\r\nA browser-based viewer for Adobe Animate/Flash `.fla` files. No plugins, no installs — just drag and drop.\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cstrong\u003e\u003ca href=\"https://lifeart.github.io/fla-viewer/\"\u003e▶ Live Demo\u003c/a\u003e\u003c/strong\u003e\r\n\u003c/p\u003e\r\n\r\n---\r\n\r\n## What is this?\r\n\r\n**FLA files** are the source/project files created by Adobe Flash Professional (now Adobe Animate). Unlike compiled `.swf` files, FLA contains the raw assets: vector shapes, timelines, symbols, bitmaps, and audio — everything needed to edit an animation.\r\n\r\n**The problem:** Flash Player is dead (EOL 2020), and Adobe Animate costs $23/month. If you have old FLA files from the 2000s-2010s, you can't easily view them anymore.\r\n\r\n**This tool** parses FLA files directly in the browser and renders them using HTML5 Canvas. No Flash Player, no Adobe subscription, no uploads to servers — everything runs locally in your browser.\r\n\r\n### Use cases\r\n\r\n- **Archivists** — Preview legacy Flash animations without Adobe software\r\n- **Developers** — Inspect FLA structure, extract assets, debug timeline issues\r\n- **Designers** — Quick preview without launching Animate\r\n- **Studios** — Convert old animations to MP4 for modern platforms\r\n- **Educators** — Demonstrate Flash-era animation techniques\r\n\r\n---\r\n\r\n## Features\r\n\r\n```\r\n┌─────────────────────────────────────────────────────────────────┐\r\n│  PARSING          │  RENDERING         │  EXPORT               │\r\n├───────────────────┼────────────────────┼───────────────────────┤\r\n│  ✓ FLA/XFL files  │  ✓ Vector shapes   │  ✓ MP4 video (H.264)  │\r\n│  ✓ Symbols        │  ✓ Gradients       │  ✓ WebM video (VP9)   │\r\n│  ✓ Timelines      │  ✓ Bitmap fills    │  ✓ Animated GIF       │\r\n│  ✓ Multiple scenes│  ✓ Filters         │  ✓ PNG sequence (ZIP) │\r\n│  ✓ Motion tweens  │  ✓ Blend modes     │  ✓ Sprite sheet+JSON  │\r\n│  ✓ Shape tweens   │  ✓ Masks           │  ✓ Single frame PNG   │\r\n│  ✓ Color tweens   │  ✓ Text (Google)   │  ✓ SVG vector export  │\r\n│  ✓ Rotation tweens│  ✓ 9-slice scaling │  ✓ WebCodecs API      │\r\n│  ✓ Audio (MP3)    │  ✓ 3D transforms   │                       │\r\n│  ✓ Audio (ADPCM)  │                    │                       │\r\n│  ✓ Bitmap (.dat)  │  ✓ Gradient strokes│                       │\r\n│  ✓ Orient to path │                    │                       │\r\n└───────────────────┴────────────────────┴───────────────────────┘\r\n```\r\n\r\n### Core\r\n\r\n| | Feature | Details |\r\n|:-:|---------|---------|\r\n| 📦 | **FLA Parsing** | Native Adobe XFL format (ZIP + XML) |\r\n| 🎬 | **Timeline** | Play, pause, scrub, frame-by-frame, multi-scene |\r\n| 🔷 | **Shapes** | Fills, strokes, gradients, bitmap patterns, gradient strokes |\r\n| 🎭 | **Symbols** | Graphic, MovieClip, Button with nesting, 3D transforms |\r\n| ✨ | **Tweens** | Motion (easing), shape morphing, orient to path |\r\n| 🎨 | **Effects** | Blur, glow, drop shadow, blend modes, masks |\r\n| 🖼️ | **Bitmaps** | PNG, JPG, GIF + Adobe `.dat` with recovery |\r\n| 🔤 | **Text** | Static/dynamic, word wrap, Google Fonts, kerning |\r\n| 🔊 | **Audio** | MP3, ADPCM, PCM (8/16/24/32-bit), stream sync with volume control |\r\n| 📹 | **Export** | MP4, PNG sequence, sprite sheet, single frame |\r\n| 🎥 | **Camera** | Auto-detected camera layers with follow mode |\r\n\r\n### UX\r\n\r\n| | Feature | Details |\r\n|:-:|---------|---------|\r\n| 📊 | **Progress Stages** | Visual progress bar: Extract → Symbols → Images → Audio → Timeline |\r\n| ⏭️ | **Skip Recovery** | Skip slow image recovery with one click |\r\n| 🔍 | **Algorithm Display** | Shows current recovery method: `deflate` → `dictionary` → `streaming` → `multi-segment` |\r\n| 🐱 | **Sample File** | Built-in animated sample to test without uploading |\r\n| 🔧 | **Debug Panel** | Inspect layers, elements, toggle visibility |\r\n| ⌨️ | **Keyboard Controls** | Space, arrows, D, M, F shortcuts |\r\n\r\n---\r\n\r\n## Quick Start\r\n\r\n### Online\r\n\r\n**[lifeart.github.io/fla-viewer](https://lifeart.github.io/fla-viewer/)** — drop a file or click **Sample**\r\n\r\n### Local\r\n\r\n```bash\r\ngit clone https://github.com/lifeart/fla-viewer.git\r\ncd fla-viewer\r\nnpm install\r\nnpm run dev     # → localhost:3000\r\n```\r\n\r\n---\r\n\r\n## Keyboard Shortcuts\r\n\r\n| Key | Action |\r\n|:---:|--------|\r\n| `Space` | Play / Pause |\r\n| `←` `→` | Previous / Next frame |\r\n| `Home` `End` | First / Last frame |\r\n| `PgUp` `PgDn` | Previous / Next scene |\r\n| `D` | Debug panel |\r\n| `M` | Mute |\r\n| `F` | Fullscreen |\r\n\r\n---\r\n\r\n## Export Options\r\n\r\nClick the **Download** button to open export options:\r\n\r\n| Format | Output | Description |\r\n|--------|--------|-------------|\r\n| **MP4 Video** | `.mp4` | H.264 video with AAC audio |\r\n| **WebM Video** | `.webm` | VP9 video with Opus audio |\r\n| **Animated GIF** | `.gif` | Animated image (no audio) |\r\n| **PNG Sequence** | `.zip` | All frames as numbered PNGs |\r\n| **Current Frame (PNG)** | `.png` | Single frame raster snapshot |\r\n| **Current Frame (SVG)** | `.svg` | Single frame vector format |\r\n| **Sprite Sheet** | `.png` + `.json` | Texture atlas for game engines |\r\n\r\n### Video Export Specs\r\n- **Video:** H.264 @ 5 Mbps\r\n- **Audio:** AAC @ 128 kbps\r\n- **Requires:** Chrome/Edge 94+ (WebCodecs API)\r\n\r\n---\r\n\r\n## Bitmap Recovery\r\n\r\nAdobe `.dat` files use chunked deflate-compressed ABGR pixel data. Some files are corrupted or use preset dictionaries.\r\n\r\n| Strategy | Recovery | Speed |\r\n|----------|:--------:|:-----:|\r\n| Raw Deflate | 100% | ⚡ |\r\n| Dictionary | 100% | ⚡ |\r\n| Streaming | 60-90% | 🐢 |\r\n| Stream+Dict | 60-90% | 🐢 |\r\n| Multi-Segment | 20-50% | 🐌 |\r\n\r\nProgress shows current algorithm: `Fixing images 3/10 [streaming]`\r\n\r\nClick **Skip images fix** to bypass slow recovery.\r\n\r\n---\r\n\r\n## Debug Mode\r\n\r\nPress `D` to open. Features:\r\n\r\n- Layer list with visibility toggles\r\n- Element inspector (symbol, shape, bitmap, text, video)\r\n- Nested symbol expansion (3 levels)\r\n- Click-to-inspect on canvas\r\n- Render order controls\r\n- Camera follow toggle\r\n- Edge debug logging (console output)\r\n- Experimental edge parsing options:\r\n  - Implicit MoveTo after close path\r\n  - Edge splitting on style changes\r\n\r\n---\r\n\r\n## Browser Support\r\n\r\n| Browser | Playback | Export |\r\n|---------|:--------:|:------:|\r\n| Chrome 94+ | ✓ | ✓ |\r\n| Edge 94+ | ✓ | ✓ |\r\n| Firefox | ✓ | ✗ |\r\n| Safari 16.4+ | ✓ | ✗ |\r\n\r\n---\r\n\r\n## Embedding\r\n\r\n```html\r\n\u003ciframe\r\n  src=\"https://lifeart.github.io/fla-viewer/?embed=true\"\r\n  width=\"800\" height=\"600\"\r\n  frameborder=\"0\" allowfullscreen\u003e\r\n\u003c/iframe\u003e\r\n```\r\n\r\n---\r\n\r\n## Architecture\r\n\r\n```\r\nsrc/\r\n├── main.ts            # UI \u0026 controls\r\n├── fla-parser.ts      # ZIP/XML parsing + bitmap recovery\r\n├── edge-decoder.ts    # XFL edge path decoder\r\n├── renderer.ts        # Canvas 2D rendering + 9-slice scaling\r\n├── player.ts          # Timeline \u0026 audio sync\r\n├── video-exporter.ts  # MP4/WebM/GIF/PNG export (WebCodecs)\r\n├── adpcm-decoder.ts   # SWF ADPCM audio decoder\r\n├── flv-parser.ts      # FLV video container parsing\r\n├── sample-generator.ts # Built-in sample FLA\r\n├── shape-utils.ts     # Shape fixing \u0026 path utilities\r\n├── path-utils.ts      # File path normalization\r\n├── types.ts           # TypeScript types\r\n└── __tests__/         # Test suite (10 test files)\r\n```\r\n\r\n```\r\nFLA (ZIP) → Parser → Document → Renderer → Canvas\r\n                         ↓\r\n                      Player → Audio (WebAudio)\r\n                         ↓\r\n                      Exporter → MP4 / PNG / ZIP\r\n```\r\n\r\n---\r\n\r\n## Supported Elements\r\n\r\n| Element | Status |\r\n|---------|:------:|\r\n| DOMSymbolInstance | ✓ |\r\n| DOMShape | ✓ |\r\n| DOMGroup | ✓ |\r\n| DOMBitmapInstance | ✓ |\r\n| DOMStaticText | ✓ |\r\n| DOMDynamicText | ✓ |\r\n| DOMSoundItem | ✓ |\r\n| Motion Tweens | ✓ |\r\n| Shape Tweens | ✓ |\r\n| Color Transform Tweens | ✓ |\r\n| Rotation Tweens (CW/CCW) | ✓ |\r\n| Orient to Path | ✓ |\r\n| Filters | ✓ |\r\n| Masks | ✓ |\r\n| Color Effects | ✓ |\r\n| Blend Modes | ✓ |\r\n| Camera Layer | ✓ |\r\n| Bitmap Fills | ✓ |\r\n| Gradient/Bitmap Strokes | ✓ |\r\n| 9-Slice Scaling | ✓ |\r\n| 3D Transforms | ✓ |\r\n| Cache as Bitmap | ✓ |\r\n| Text Kerning | ✓ |\r\n| Text Rotation | ✓ |\r\n| Frame Labels | ✓ |\r\n| Multiple Scenes | ✓ |\r\n| FLV Video Parsing | ✓ |\r\n| Video Playback | ✗ |\r\n| ActionScript | ✗ |\r\n\r\n---\r\n\r\n## Limitations\r\n\r\n- No ActionScript execution (no interactivity)\r\n- Embedded video shows metadata only (FLV parsing supported, playback not implemented)\r\n- Fonts fall back to Google Fonts (external request) or system fonts\r\n- Some advanced filter options not fully supported\r\n- 3D transforms use simplified perspective projection\r\n\r\n---\r\n\r\n## Tech Stack\r\n\r\n| Category | Technology |\r\n|----------|------------|\r\n| **Language** | TypeScript 5.x (strict mode) |\r\n| **Build** | Vite 7.x |\r\n| **Testing** | Vitest + Playwright |\r\n| **Rendering** | Canvas 2D API |\r\n| **Video Export** | WebCodecs API, mp4-muxer, webm-muxer, gifenc |\r\n| **Audio** | Web Audio API |\r\n| **Parsing** | JSZip, Pako (deflate) |\r\n\r\n---\r\n\r\n## Development\r\n\r\n```bash\r\ngit clone https://github.com/lifeart/fla-viewer.git\r\ncd fla-viewer\r\nnpm install\r\nnpm run dev           # start dev server → localhost:3000\r\nnpm test              # run tests\r\nnpm run test:watch    # run tests in watch mode\r\nnpm run test:coverage # run tests with coverage report\r\nnpm run build         # production build\r\n```\r\n\r\n### Testing\r\n\r\nThe project includes comprehensive tests using Vitest with Playwright browser testing:\r\n\r\n| Test File | Coverage |\r\n|-----------|----------|\r\n| `fla-parser.test.ts` | ZIP parsing, bitmap recovery, symbol loading |\r\n| `renderer.test.ts` | Shape rendering, tweens, filters, 9-slice |\r\n| `player.test.ts` | Timeline, scenes, audio sync |\r\n| `edge-decoder.test.ts` | XFL edge format parsing |\r\n| `video-exporter.test.ts` | MP4/WebM/GIF export |\r\n| `shape-utils.test.ts` | Path winding, shape repair |\r\n| `adpcm-decoder.test.ts` | ADPCM audio decoding |\r\n| `flv-parser.test.ts` | FLV container parsing |\r\n| `path-utils.test.ts` | Path normalization |\r\n| `main.test.ts` | UI integration |\r\n\r\n---\r\n\r\n## License\r\n\r\n[ISC](LICENSE) © lifeart\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeart%2Ffla-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifeart%2Ffla-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeart%2Ffla-viewer/lists"}