Add files via upload
This commit is contained in:
18 files changed
+12656
No files matched your search
+550
@@ -0,0 +1,550 @@
|
||||
<!doctype html>
|
||||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#ae301f"><title>Flipnote Editor</title><link rel="stylesheet" href="./assets/editor.css"></head><body class="experiments-page flipnote-editor-page flipnote-editor-loading"><main class="page-shell"><div id="flipnote-editor-loader" class="flipnote-editor-loader" role="status" aria-live="polite" aria-label="Loading Flipnote Editor">
|
||||
<div class="flipnote-editor-loader-inner">
|
||||
<img class="flipnote-editor-loader-spinner" src="./assets/loading.webp" alt="" aria-hidden="true" draggable="false">
|
||||
<div class="flipnote-editor-loader-copy" aria-hidden="true">
|
||||
<div class="flipnote-editor-loader-title">Loading Flipnote Editor</div>
|
||||
<div class="flipnote-editor-loader-subtext" data-flipnote-loader-status="">Preloading assets...</div>
|
||||
</div>
|
||||
<div class="flipnote-editor-loader-progress" role="progressbar" aria-label="Flipnote Editor preload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
||||
<div class="flipnote-editor-loader-progress-fill" data-flipnote-loader-progress=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="flipnote-editor-image-cache" class="flipnote-editor-image-cache" aria-hidden="true"></div>
|
||||
<style>
|
||||
.flipnote-editor-mobile-shift-toggle{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:99999;width:clamp(96px,24vw,132px);padding:0;border:0;background:transparent;box-shadow:0 4px 14px rgba(0,0,0,.38);border-radius:4px;line-height:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
|
||||
.flipnote-editor-mobile-shift-toggle[hidden]{display:none!important}
|
||||
.flipnote-editor-mobile-shift-toggle img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-select:none}
|
||||
.flipnote-editor-mobile-shift-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
|
||||
.flipnote-editor-mobile-shift-toggle[aria-pressed="true"]{box-shadow:0 0 0 2px #000,0 4px 14px rgba(0,0,0,.38)}
|
||||
|
||||
/* Keep the Open a Flipnote flow visually consistent with Import Music. */
|
||||
.flipnote-editor-open-ppm-dialog{width:min(820px,calc(100vw - 32px))}
|
||||
.flipnote-editor-open-ppm-body{display:flex;flex-direction:column;gap:0;min-height:0;padding:0;overflow:hidden}
|
||||
.flipnote-editor-open-ppm-step{flex:1 1 auto;min-height:0}
|
||||
.flipnote-editor-open-ppm-step[hidden]{display:none!important}
|
||||
#flipnote-open-ppm-choice{display:grid;gap:16px;padding:18px}
|
||||
.flipnote-editor-open-source-copy{display:grid;gap:5px;text-align:center}
|
||||
.flipnote-editor-open-source-copy strong{font-size:16px}
|
||||
.flipnote-editor-open-source-copy span{color:var(--muted);font-size:10px;line-height:1.5}
|
||||
.flipnote-editor-open-source-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
||||
.flipnote-editor-open-source-option{
|
||||
appearance:none;display:grid;grid-template-rows:auto auto 1fr;align-content:start;justify-items:start;gap:8px;
|
||||
min-height:158px;padding:16px;border:1px solid var(--line);border-radius:6px;background:var(--surface-raised);
|
||||
color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer;user-select:none;
|
||||
transition:transform .11s cubic-bezier(.2,.8,.2,1),border-color .11s ease,background .11s ease,box-shadow .11s ease;
|
||||
}
|
||||
.flipnote-editor-open-source-option:hover,.flipnote-editor-open-source-option:focus-visible{transform:scale(1.012);border-color:var(--red);background:var(--surface-hover);box-shadow:0 7px 22px rgba(0,0,0,.13)}
|
||||
.flipnote-editor-open-source-option:active{transform:scale(.99)}
|
||||
.flipnote-editor-open-source-option:focus-visible{outline:2px solid var(--red);outline-offset:2px}
|
||||
.flipnote-editor-open-source-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-size:22px;font-weight:900;line-height:1}
|
||||
.flipnote-editor-open-source-option strong{font-size:13px;line-height:1.3}
|
||||
.flipnote-editor-open-source-option small{color:var(--muted);font-size:9px;line-height:1.45}
|
||||
.flipnote-editor-open-ppm-status{margin:0 18px 14px;color:var(--muted);font-size:9px;line-height:1.45}
|
||||
.flipnote-editor-open-ppm-status:empty{display:none}
|
||||
@media(max-width:620px){
|
||||
.flipnote-editor-open-ppm-dialog{width:100%;max-height:calc(100vh - 20px)}
|
||||
.flipnote-editor-open-source-options{grid-template-columns:1fr}
|
||||
.flipnote-editor-open-source-option{min-height:130px}
|
||||
}
|
||||
|
||||
.flipnote-editor-open-source-options,.flipnote-editor-audio-import-source-options{grid-template-columns:1fr}
|
||||
</style>
|
||||
<button type="button" id="flipnote-mobile-shift-toggle" class="flipnote-editor-mobile-shift-toggle" aria-label="Toggle Shift" aria-keyshortcuts="Shift" aria-pressed="false" title="Shift" hidden>
|
||||
<img src="./assets/flipnote-editor/shiftl.png" data-normal-src="./assets/flipnote-editor/shiftl.png" data-active-src="./assets/flipnote-editor/shiftl_active.png" alt="Shift / L" draggable="false">
|
||||
</button>
|
||||
<div class="flipnote-editor-workspace" data-legacy-flipnote-editor="">
|
||||
<h1 class="flipnote-editor-sr-only">Flipnote Editor</h1>
|
||||
<div id="flipnote-space-meter" class="flipnote-editor-space-meter" role="progressbar" aria-label="Flipnote Space" aria-valuemin="0" aria-valuemax="1048576" aria-valuenow="0">
|
||||
<span class="flipnote-editor-space-label" aria-hidden="true">Flipnote Space</span>
|
||||
<div class="flipnote-editor-space-bar" aria-hidden="true">
|
||||
<span id="flipnote-space-meter-fill" class="flipnote-editor-space-fill"></span>
|
||||
<img src="./assets/flipnote-editor/musicBarEmpty.png" alt="" draggable="false">
|
||||
</div>
|
||||
<span id="flipnote-space-meter-value" class="flipnote-editor-space-value" aria-hidden="true">0 KB</span>
|
||||
<span id="flipnote-space-status" class="flipnote-editor-sr-only" role="status" aria-live="polite"></span>
|
||||
</div>
|
||||
<main class="flipnote-editor-main">
|
||||
<section class="flipnote-editor-stage" aria-label="Flipnote canvas">
|
||||
<div class="flipnote-editor-canvas-wrap"><div class="flipnote-editor-canvas-surface"><canvas id="flipnote-canvas" width="256" height="192" class="pen1-cursor" tabindex="0" aria-label="Flipnote drawing canvas"></canvas><svg id="flipnote-editor-canvas-grid" class="flipnote-editor-canvas-grid" viewBox="0 0 256 192" preserveAspectRatio="none" aria-hidden="true" hidden /></div></div>
|
||||
<div class="flipnote-editor-stage-playback" aria-label="Playback controls">
|
||||
<div class="flipnote-editor-stage-control-grid flipnote-editor-stage-toolbar">
|
||||
<img class="flipnote-editor-stage-nav" id="first-frame" src="./assets/flipnote-editor/first-frame.png" alt="First page" title="Skip to First Page" draggable="false">
|
||||
<img class="flipnote-editor-stage-nav" id="prev-frame" src="./assets/flipnote-editor/previous-frame.png" alt="Previous page" title="Previous Page" draggable="false">
|
||||
<img class="flipnote-editor-stage-play-toggle" id="play-pause" src="./assets/flipnote-editor/play.png" alt="Play" title="Play" draggable="false">
|
||||
<img class="flipnote-editor-stage-nav" id="next-frame" src="./assets/flipnote-editor/next-frame.png" alt="Next page" title="Next Page" draggable="false">
|
||||
<img class="flipnote-editor-stage-nav" id="last-frame" src="./assets/flipnote-editor/last-frame.png" alt="Last page" title="Skip to Last Page" draggable="false">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flipnote-editor-stage-speed-row" aria-label="Playback speed and loop controls">
|
||||
<div class="flipnote-editor-speed-control" id="flipnote-speed-control" role="slider" tabindex="0" aria-label="Flipnote speed" aria-valuemin="1" aria-valuemax="8" aria-valuenow="6" aria-valuetext="Speed 6, 11.986 FPS" title="Speed 6 · 11.986 FPS">
|
||||
<img id="flipnote-speed-image" src="./assets/flipnote-editor/speed6.png" width="940" height="200" alt="Speed 6" draggable="false">
|
||||
</div>
|
||||
<button type="button" class="flipnote-editor-loop-toggle" id="flipnote-loop-toggle" aria-pressed="true" title="Loop enabled">
|
||||
<img id="flipnote-loop-image" src="./assets/flipnote-editor/loop_enabled.png" width="300" height="200" alt="Loop" draggable="false">
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="flipnote-editor-timeline-stack">
|
||||
<section class="flipnote-editor-filmstrip" aria-label="Flipnote timeline">
|
||||
<div id="timeline-container" class="flipnote-editor-timeline"></div>
|
||||
</section>
|
||||
<div id="flipnote-page-tools-tray" class="flipnote-editor-page-tools-tray" aria-label="Page Tools" aria-hidden="true">
|
||||
<button type="button" class="flipnote-editor-page-tool-button" id="flipnote-page-erase" title="Remove Page" aria-label="Remove Page"><img src="./assets/flipnote-editor/pageErase.png" alt="" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-page-tool-button" id="flipnote-page-insert" title="Insert Page" aria-label="Insert Page"><img src="./assets/flipnote-editor/pageInsert.png" alt="" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-page-tool-button" id="flipnote-page-copy" title="Copy Page" aria-label="Copy Page"><img src="./assets/flipnote-editor/pageCopy.png" alt="" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-page-tool-button" id="flipnote-page-paste" title="Paste Page" aria-label="Paste Page"><img src="./assets/flipnote-editor/pagePaste.png" alt="" draggable="false"></button>
|
||||
</div>
|
||||
<button type="button" id="flipnote-page-tools-toggle" class="flipnote-editor-page-tools-toggle" aria-expanded="false" aria-controls="flipnote-page-tools-tray" title="Open Page Tools">
|
||||
<img id="flipnote-page-tools-toggle-image" src="./assets/flipnote-editor/openpages.png" alt="Open Page Tools" draggable="false">
|
||||
</button>
|
||||
</div>
|
||||
<div class="flipnote-editor-version-row">
|
||||
<div class="flipnote-editor-version">flipnote-editor v3.26.2</div>
|
||||
<button type="button" id="flipnote-editor-info-button" class="flipnote-editor-info-button" aria-label="Flipnote Editor settings" title="Flipnote Editor settings">⚙</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<aside class="flipnote-editor-controls" aria-label="Flipnote Editor controls">
|
||||
<div class="flipnote-editor-side-top" aria-label="Page controls">
|
||||
<div class="flipnote-editor-page-actions" aria-label="Page management">
|
||||
<img class="flipnote-editor-icon" id="delete-frame" src="./assets/flipnote-editor/delete-frame.png" alt="Remove page" title="Remove Page" draggable="false">
|
||||
<img class="flipnote-editor-icon" id="new-frame" src="./assets/flipnote-editor/new-frame.png" alt="Insert new page" title="Insert New Page" draggable="false">
|
||||
</div>
|
||||
<div class="flipnote-editor-history-undo-redo" aria-label="Undo and redo">
|
||||
<img class="flipnote-editor-history-icon" id="undoButton" src="./assets/flipnote-editor/undo_grey.png" width="480" height="300" alt="Undo" aria-disabled="true" title="Undo (U)" draggable="false">
|
||||
<img class="flipnote-editor-history-icon" id="redoButton" src="./assets/flipnote-editor/redo_grey.png" width="160" height="300" alt="Redo" aria-disabled="true" title="Redo (R)" draggable="false">
|
||||
</div>
|
||||
<img class="flipnote-editor-history-icon flipnote-editor-history-clear" id="eraseBigButton" src="./assets/flipnote-editor/erasebig.png" width="520" height="300" alt="Clear active layer" title="Clear Active Layer (C)" draggable="false">
|
||||
<div class="flipnote-editor-page-counter"><span>Page</span><strong id="frame-counter">1 / 1</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="flipnote-editor-tool-tabs" role="tablist" aria-label="Flipnote tool pages">
|
||||
<button type="button" class="flipnote-editor-tool-tab active" data-tool-tab="1" data-tab-normal-src="./assets/flipnote-editor/tab1.png" data-tab-selected-src="./assets/flipnote-editor/tab1_selected.png" role="tab" aria-selected="true" aria-controls="flipnote-tool-tab-1" title="Tools & Brushes"><img src="./assets/flipnote-editor/tab1_selected.png" width="400" height="300" alt="Tab 1" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-tool-tab" data-tool-tab="2" data-tab-normal-src="./assets/flipnote-editor/tab2.png" data-tab-selected-src="./assets/flipnote-editor/tab2_selected.png" role="tab" aria-selected="false" aria-controls="flipnote-tool-tab-2" title="Colour & Layering"><img src="./assets/flipnote-editor/tab2.png" width="400" height="300" alt="Tab 2" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-tool-tab" data-tool-tab="3" data-tab-normal-src="./assets/flipnote-editor/tab3.png" data-tab-selected-src="./assets/flipnote-editor/tab3_selected.png" role="tab" aria-selected="false" aria-controls="flipnote-tool-tab-3" title="Selection & Movement"><img src="./assets/flipnote-editor/tab3.png" width="400" height="300" alt="Tab 3" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-tool-tab" data-tool-tab="4" data-tab-normal-src="./assets/flipnote-editor/tab4.png" data-tab-selected-src="./assets/flipnote-editor/tab4_selected.png" role="tab" aria-selected="false" aria-controls="flipnote-tool-tab-4" title="Sound & Photos"><img src="./assets/flipnote-editor/tab4.png" width="400" height="300" alt="Tab 4" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-tool-tab" data-tool-tab="5" data-tab-normal-src="./assets/flipnote-editor/tab5.png" data-tab-selected-src="./assets/flipnote-editor/tab5_selected.png" role="tab" aria-selected="false" aria-controls="flipnote-tool-tab-5" title="File & Options"><img src="./assets/flipnote-editor/tab5.png" width="400" height="300" alt="Tab 5" draggable="false"></button>
|
||||
</div>
|
||||
|
||||
<div class="flipnote-editor-tool-page" id="flipnote-tool-tab-1" data-tool-tab-pane="1" role="tabpanel">
|
||||
<div class="flipnote-editor-tool-picker-inline" aria-label="Drawing tools">
|
||||
<div class="flipnote-editor-tool-family-row" aria-label="Drawing tool families">
|
||||
<button type="button" class="flipnote-editor-tool-family" data-tool-family-picker="pen" aria-expanded="false" aria-controls="flipnote-tool-slots" title="Draw (P)">
|
||||
<img src="./assets/flipnote-editor/Draw.png" data-normal-src="./assets/flipnote-editor/Draw.png" data-selected-src="./assets/flipnote-editor/Draw_selected.png" width="800" height="640" alt="Draw" draggable="false">
|
||||
</button>
|
||||
<button type="button" class="flipnote-editor-tool-family" data-tool-family-picker="paint" aria-expanded="false" aria-controls="flipnote-tool-slots" title="Paint (B)">
|
||||
<img src="./assets/flipnote-editor/Paint.png" data-normal-src="./assets/flipnote-editor/Paint.png" data-selected-src="./assets/flipnote-editor/Paint_selected.png" width="800" height="640" alt="Paint" draggable="false">
|
||||
</button>
|
||||
<button type="button" class="flipnote-editor-tool-family" data-tool-family-picker="fill" aria-expanded="false" aria-controls="flipnote-tool-slots" title="Fill (F)">
|
||||
<img src="./assets/flipnote-editor/fill.png" data-normal-src="./assets/flipnote-editor/fill.png" data-selected-src="./assets/flipnote-editor/fill_selected.png" width="800" height="640" alt="Fill" draggable="false">
|
||||
</button>
|
||||
<button type="button" class="flipnote-editor-tool-family" data-tool-family-picker="eraser" aria-expanded="false" aria-controls="flipnote-tool-slots" title="Erase (E)">
|
||||
<img src="./assets/flipnote-editor/Erase.png" data-normal-src="./assets/flipnote-editor/Erase.png" data-selected-src="./assets/flipnote-editor/Erase_selected.png" width="800" height="640" alt="Erase" draggable="false">
|
||||
</button>
|
||||
</div>
|
||||
<div class="flipnote-editor-tool-lower-row">
|
||||
<div id="flipnote-tool-slots" class="flipnote-editor-tool-slots" role="group" aria-label="Drawing tool choices" hidden>
|
||||
<button type="button" data-tool-slot="0" aria-label="Tool 1"><img alt="" draggable="false"></button>
|
||||
<button type="button" data-tool-slot="1" aria-label="Tool 2"><img alt="" draggable="false"></button>
|
||||
<button type="button" data-tool-slot="2" aria-label="Tool 3"><img alt="" draggable="false"></button>
|
||||
<button type="button" data-tool-slot="3" aria-label="Tool 4"><img alt="" draggable="false"></button>
|
||||
<button type="button" data-tool-slot="4" aria-label="Tool 5"><img alt="" draggable="false"></button>
|
||||
<button type="button" data-tool-slot="5" aria-label="Tool 6"><img alt="" draggable="false"></button>
|
||||
<button type="button" data-tool-slot="6" aria-label="Tool 7"><img alt="" draggable="false"></button>
|
||||
<button type="button" data-tool-slot="7" aria-label="Tool 8"><img alt="" draggable="false"></button>
|
||||
</div>
|
||||
<button type="button" id="flipnote-edit-pattern" class="flipnote-editor-edit-pattern" hidden aria-label="Edit Pattern" title="Edit Pattern"><img src="./assets/flipnote-editor/editpattern.png" alt="Edit Pattern" draggable="false"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="flipnote-pattern-modal" class="flipnote-editor-pattern-modal" hidden>
|
||||
<div class="flipnote-editor-pattern-dialog" role="dialog" aria-modal="true" aria-labelledby="flipnote-pattern-title">
|
||||
<div class="flipnote-editor-pattern-header">
|
||||
<strong id="flipnote-pattern-title">Edit Custom Paint Pattern</strong>
|
||||
<button type="button" id="flipnote-pattern-close" class="flipnote-editor-pattern-close" aria-label="Close pattern editor">×</button>
|
||||
</div>
|
||||
<div class="flipnote-editor-pattern-body">
|
||||
<p>Click or drag across the 8×8 grid. Black cells are painted; white cells are transparent.</p>
|
||||
<div id="flipnote-pattern-grid" class="flipnote-editor-pattern-grid" role="grid" aria-label="8 by 8 custom paint pattern"></div>
|
||||
<div class="flipnote-editor-pattern-actions-secondary">
|
||||
<button type="button" id="flipnote-pattern-clear">Clear</button>
|
||||
<button type="button" id="flipnote-pattern-fill">Fill</button>
|
||||
<button type="button" id="flipnote-pattern-invert">Invert</button>
|
||||
<button type="button" id="flipnote-pattern-reset">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flipnote-editor-pattern-footer">
|
||||
<button type="button" id="flipnote-pattern-cancel">Cancel</button>
|
||||
<button type="button" id="flipnote-pattern-save" class="flipnote-editor-pattern-save">Save Pattern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flipnote-editor-tool-page" id="flipnote-tool-tab-2" data-tool-tab-pane="2" role="tabpanel" hidden>
|
||||
<section class="flipnote-editor-control-panel flipnote-editor-layers-panel">
|
||||
<div class="flipnote-editor-control-title">Layers</div>
|
||||
<div class="flipnote-editor-control-body">
|
||||
<div class="flipnote-editor-layer-stack" aria-label="Page layers">
|
||||
<div class="flipnote-editor-layer-row active" data-layer-row="0">
|
||||
<button type="button" class="flipnote-editor-layer-select" data-layer-select="0" aria-pressed="true" aria-label="Select Layer 1">
|
||||
<strong>Layer 1</strong><small data-layer-status="">Active</small>
|
||||
</button>
|
||||
<div class="flipnote-editor-layer-colors" aria-label="Layer 1 colour" aria-expanded="false">
|
||||
<button type="button" class="flipnote-editor-layer-color ink-black selected" data-layer="0" data-layer-color="black" aria-label="Layer 1 black" aria-pressed="true" title="Black"></button>
|
||||
<button type="button" class="flipnote-editor-layer-color ink-red" data-layer="0" data-layer-color="red" aria-label="Layer 1 red" aria-pressed="false" title="Red"></button>
|
||||
<button type="button" class="flipnote-editor-layer-color ink-blue" data-layer="0" data-layer-color="blue" aria-label="Layer 1 blue" aria-pressed="false" title="Blue"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flipnote-editor-layer-row" data-layer-row="1">
|
||||
<button type="button" class="flipnote-editor-layer-select" data-layer-select="1" aria-pressed="false" aria-label="Select Layer 2">
|
||||
<strong>Layer 2</strong><small data-layer-status="">Select</small>
|
||||
</button>
|
||||
<div class="flipnote-editor-layer-colors" aria-label="Layer 2 colour" aria-expanded="false">
|
||||
<button type="button" class="flipnote-editor-layer-color ink-black" data-layer="1" data-layer-color="black" aria-label="Layer 2 black" aria-pressed="false" title="Black"></button>
|
||||
<button type="button" class="flipnote-editor-layer-color ink-red selected" data-layer="1" data-layer-color="red" aria-label="Layer 2 red" aria-pressed="true" title="Red"></button>
|
||||
<button type="button" class="flipnote-editor-layer-color ink-blue" data-layer="1" data-layer-color="blue" aria-label="Layer 2 blue" aria-pressed="false" title="Blue"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flipnote-editor-control-panel flipnote-editor-paper-panel">
|
||||
<div class="flipnote-editor-control-title">Paper Tools</div>
|
||||
<div class="flipnote-editor-control-body">
|
||||
<div class="flipnote-editor-paper-tools" aria-label="Paper tools">
|
||||
<button type="button" class="flipnote-editor-paper-tool" id="paper-tool" aria-pressed="false" title="Paper: White (click for black)"><img src="./assets/flipnote-editor/paperW.png" width="480" height="640" alt="White paper" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-paper-tool" id="lightbox-tool" aria-pressed="false" title="Light-box"><img src="./assets/flipnote-editor/lightbox.png" width="480" height="640" alt="Light-box" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-paper-tool" id="clone-tool" aria-pressed="false" title="Clone"><img src="./assets/flipnote-editor/copy.png" width="480" height="640" alt="Clone" draggable="false"></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="flipnote-editor-tool-page flipnote-editor-selection-page" id="flipnote-tool-tab-3" data-tool-tab-pane="3" role="tabpanel" hidden>
|
||||
<div class="flipnote-editor-selection-tools" aria-label="Selection tools">
|
||||
<img class="flipnote-editor-selection-base" data-selection-base="" data-base-url="./assets/flipnote-editor/selbase.png" alt="" draggable="false" aria-hidden="true" hidden>
|
||||
<button type="button" class="flipnote-editor-paper-tool flipnote-editor-selection-tool" id="select-tool" aria-pressed="false" title="Select"><img src="./assets/flipnote-editor/select.png" data-idle-url="./assets/flipnote-editor/select.png" data-active-url="./assets/flipnote-editor/select_y.png" data-active-fallback-url="./assets/flipnote-editor/select_pressed.png" width="480" height="640" alt="Select" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-paper-tool flipnote-editor-selection-tool" id="copy-tool" aria-disabled="true" title="Copy selection"><img src="./assets/flipnote-editor/selectionCopy.png" data-copy-url="./assets/flipnote-editor/selectionCopy.png" data-cut-url="./assets/flipnote-editor/selectionCut.png" width="480" height="640" alt="Copy" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-paper-tool flipnote-editor-selection-tool" id="paste-tool" aria-disabled="true" title="Paste clipboard"><img src="./assets/flipnote-editor/paste.png" width="480" height="640" alt="Paste" draggable="false"></button>
|
||||
</div>
|
||||
<div class="flipnote-editor-selection-actions" aria-label="Selection actions">
|
||||
<button type="button" class="flipnote-editor-paper-tool flipnote-editor-selection-action" id="transform-tool" aria-pressed="false" title="Rectangle selection"><img src="./assets/flipnote-editor/transform.png" alt="Transform" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-paper-tool flipnote-editor-selection-action" id="invert-tool" disabled title="Invert selection"><img src="./assets/flipnote-editor/invert.png" alt="Invert" draggable="false"></button>
|
||||
</div>
|
||||
<div class="flipnote-editor-more-tools" aria-label="More tools">
|
||||
<button type="button" class="flipnote-editor-paper-tool flipnote-editor-more-tool" id="resize-tool" title="Shrink"><img src="./assets/flipnote-editor/resize_smaller.png" data-normal-url="./assets/flipnote-editor/resize_smaller.png" data-shift-url="./assets/flipnote-editor/resize_larger.png" width="768" height="1024" alt="Shrink" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-paper-tool flipnote-editor-more-tool" id="flip-tool" title="Flip horizontally"><img src="./assets/flipnote-editor/flip_x.png" data-normal-url="./assets/flipnote-editor/flip_x.png" data-shift-url="./assets/flipnote-editor/flip_y.png" width="768" height="1024" alt="Flip horizontally" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-paper-tool flipnote-editor-more-tool" id="rotate-tool" title="Rotate clockwise"><img src="./assets/flipnote-editor/rotate_clockwise.png" data-normal-url="./assets/flipnote-editor/rotate_clockwise.png" data-shift-url="./assets/flipnote-editor/rotate_anticlockwise.png" width="1856" height="2475" alt="Rotate clockwise" draggable="false"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flipnote-editor-tool-page flipnote-editor-audio-page" id="flipnote-tool-tab-4" data-tool-tab-pane="4" role="tabpanel" hidden>
|
||||
<div class="flipnote-editor-audio-layout" id="flipnote-editor-audio-layout" aria-label="Flipnote sound controls">
|
||||
<button type="button" class="flipnote-editor-audio-button flipnote-editor-audio-button-music" data-audio-control="music" data-record-src="./assets/flipnote-editor/musicRec.png" data-play-src="./assets/flipnote-editor/musicPlay.png" data-stop-src="./assets/flipnote-editor/musicStop.png" data-import-src="./assets/flipnote-editor/musicImportalt.png" title="Record Music. Hold Shift to import an MP3 or WAV.">
|
||||
<img src="./assets/flipnote-editor/musicRec.png" alt="Music" draggable="false">
|
||||
</button>
|
||||
<button type="button" id="flipnote-import-image-button" class="flipnote-editor-audio-button flipnote-editor-import-image-button" title="Import an image to the current Flipnote page" aria-label="Import image" aria-disabled="false">
|
||||
<img src="./assets/flipnote-editor/ImportImage.png" alt="Import Image" draggable="false">
|
||||
</button>
|
||||
<input id="flipnote-image-file-input" class="flipnote-editor-image-file-input" type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/bmp">
|
||||
<div class="flipnote-editor-audio-meter flipnote-editor-audio-meter-music" data-audio-meter="music" aria-hidden="true">
|
||||
<span class="flipnote-editor-audio-meter-fill" data-audio-fill="music"></span>
|
||||
<img src="./assets/flipnote-editor/musicBarEmpty.png" alt="" draggable="false">
|
||||
</div>
|
||||
<button type="button" class="flipnote-editor-audio-erase flipnote-editor-audio-erase-music" data-audio-erase="music" title="Erase Music" aria-label="Erase Music" hidden>
|
||||
<img src="./assets/flipnote-editor/eraseaudio.png" alt="" draggable="false">
|
||||
</button>
|
||||
<button type="button" class="flipnote-editor-audio-button flipnote-editor-audio-button-sound flipnote-editor-audio-button-sound-1" data-audio-control="sound1" data-record-src="./assets/flipnote-editor/soundRecord1.png" data-play-src="./assets/flipnote-editor/soundPlay1.png" data-stop-src="./assets/flipnote-editor/soundStop1.png" data-import-src="./assets/flipnote-editor/soundImport1.png" data-import-alt-src="./assets/flipnote-editor/soundImport1alt.png" title="Record Sound 1. Hold Shift to import an MP3 or WAV.">
|
||||
<img src="./assets/flipnote-editor/soundRecord1.png" alt="Sound 1" draggable="false">
|
||||
</button>
|
||||
<div class="flipnote-editor-audio-meter flipnote-editor-audio-meter-sound flipnote-editor-audio-meter-sound-1" data-audio-meter="sound1" aria-hidden="true"><span class="flipnote-editor-audio-meter-fill" data-audio-fill="sound1"></span><img src="./assets/flipnote-editor/soundBarEmpry.png" alt="" draggable="false"></div>
|
||||
<button type="button" class="flipnote-editor-audio-erase flipnote-editor-audio-erase-sound flipnote-editor-audio-erase-sound-1" data-audio-erase="sound1" title="Erase Sound 1" aria-label="Erase Sound 1" hidden><img src="./assets/flipnote-editor/eraseaudio.png" alt="" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-audio-button flipnote-editor-audio-button-sound flipnote-editor-audio-button-sound-2" data-audio-control="sound2" data-record-src="./assets/flipnote-editor/soundRecord2.png" data-play-src="./assets/flipnote-editor/soundPlay2.png" data-stop-src="./assets/flipnote-editor/soundStop2.png" data-import-src="./assets/flipnote-editor/soundImport2.png" data-import-alt-src="./assets/flipnote-editor/soundImport2alt.png" title="Record Sound 2. Hold Shift to import an MP3 or WAV.">
|
||||
<img src="./assets/flipnote-editor/soundRecord2.png" alt="Sound 2" draggable="false">
|
||||
</button>
|
||||
<div class="flipnote-editor-audio-meter flipnote-editor-audio-meter-sound flipnote-editor-audio-meter-sound-2" data-audio-meter="sound2" aria-hidden="true"><span class="flipnote-editor-audio-meter-fill" data-audio-fill="sound2"></span><img src="./assets/flipnote-editor/soundBarEmpry.png" alt="" draggable="false"></div>
|
||||
<button type="button" class="flipnote-editor-audio-erase flipnote-editor-audio-erase-sound flipnote-editor-audio-erase-sound-2" data-audio-erase="sound2" title="Erase Sound 2" aria-label="Erase Sound 2" hidden><img src="./assets/flipnote-editor/eraseaudio.png" alt="" draggable="false"></button>
|
||||
<button type="button" class="flipnote-editor-audio-button flipnote-editor-audio-button-sound flipnote-editor-audio-button-sound-3" data-audio-control="sound3" data-record-src="./assets/flipnote-editor/soundRecord3.png" data-play-src="./assets/flipnote-editor/soundPlay3.png" data-stop-src="./assets/flipnote-editor/soundStop3.png" data-import-src="./assets/flipnote-editor/soundImport3.png" data-import-alt-src="./assets/flipnote-editor/soundImport3alt.png" title="Record Sound 3. Hold Shift to import an MP3 or WAV.">
|
||||
<img src="./assets/flipnote-editor/soundRecord3.png" alt="Sound 3" draggable="false">
|
||||
</button>
|
||||
<div class="flipnote-editor-audio-meter flipnote-editor-audio-meter-sound flipnote-editor-audio-meter-sound-3" data-audio-meter="sound3" aria-hidden="true"><span class="flipnote-editor-audio-meter-fill" data-audio-fill="sound3"></span><img src="./assets/flipnote-editor/soundBarEmpry.png" alt="" draggable="false"></div>
|
||||
<button type="button" class="flipnote-editor-audio-erase flipnote-editor-audio-erase-sound flipnote-editor-audio-erase-sound-3" data-audio-erase="sound3" title="Erase Sound 3" aria-label="Erase Sound 3" hidden><img src="./assets/flipnote-editor/eraseaudio.png" alt="" draggable="false"></button>
|
||||
<div class="flipnote-editor-volume-monitor" id="flipnote-audio-volume-monitor" role="img" aria-label="Live Flipnote audio volume history">
|
||||
<img class="flipnote-editor-volume-monitor-base" src="./assets/flipnote-editor/base.png" alt="" draggable="false">
|
||||
<div class="flipnote-editor-volume-monitor-history" id="flipnote-audio-volume-history" aria-hidden="true"></div>
|
||||
</div>
|
||||
<input id="flipnote-audio-file-input" type="file" accept=".mp3,.wav,audio/mpeg,audio/wav,audio/x-wav" hidden>
|
||||
<span id="flipnote-audio-status" class="flipnote-editor-sr-only" role="status" aria-live="polite"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flipnote-editor-tool-page flipnote-editor-tab5-page" id="flipnote-tool-tab-5" data-tool-tab-pane="5" role="tabpanel" hidden>
|
||||
<section class="flipnote-editor-control-panel flipnote-editor-title-panel">
|
||||
<div class="flipnote-editor-control-title">Title</div>
|
||||
<div class="flipnote-editor-control-body">
|
||||
<div id="filename" class="flipnote-editor-title-field" title="Click to edit Flipnote title">Untitled flipnote</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<div class="flipnote-editor-tab5-actions" aria-label="Open and export Flipnote">
|
||||
|
||||
<button type="button" id="export-btn" class="flipnote-editor-tab5-image-button" title="Save Flipnote as .WEBM">
|
||||
<img src="./assets/flipnote-editor/downloadwebm.png" alt="Save .WEBM" draggable="false">
|
||||
</button>
|
||||
<button type="button" id="flipnote-open-ppm-button" class="flipnote-editor-tab5-image-button" title="Open a Flipnote">
|
||||
<img src="./assets/flipnote-editor/openppm.png" alt="Open .PPM" draggable="false">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div id="flipnote-editor-info-modal" class="flipnote-editor-info-modal" hidden>
|
||||
<div class="flipnote-editor-info-dialog" role="dialog" aria-modal="true" aria-labelledby="flipnote-editor-info-title">
|
||||
<header class="flipnote-editor-info-header">
|
||||
<div><strong id="flipnote-editor-info-title">Flipnote Editor settings</strong></div>
|
||||
<button type="button" id="flipnote-editor-info-close" aria-label="Close Flipnote Editor settings">×</button>
|
||||
</header>
|
||||
<div class="flipnote-editor-info-body">
|
||||
<section>
|
||||
<h3>What is Flipnote Editor?</h3>
|
||||
<p>Flipnote Editor is a browser-based Flipnote-style animation editor. It lets you draw 256×192 frame-by-frame animations with two ink layers, paper colours, DSi-style drawing tools, playback speed and looping, light-box/onion-skin helpers, music plus three sound-effect tracks, and WebM export.</p>
|
||||
<p><strong>Version:</strong> flipnote-editor v3.26.2</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Canvas</h3>
|
||||
<label class="flipnote-editor-settings-toggle"><span>Show pixel grid <small>Available from 400% zoom</small></span><input id="flipnote-editor-show-grid" type="checkbox"></label>
|
||||
<label class="flipnote-editor-settings-zoom"><span>Zoom</span><input id="flipnote-editor-zoom" type="range" min="50" max="800" step="1" value="100"><output id="flipnote-editor-zoom-value" for="flipnote-editor-zoom">100%</output></label>
|
||||
<div><button type="button" class="button subtle" id="flipnote-editor-reset-view">Reset view to 100%</button></div>
|
||||
<label class="flipnote-editor-settings-toggle"><span>Zoom with Ctrl+scroll or trackpad pinch</span><input id="flipnote-editor-scroll-zoom" type="checkbox"></label>
|
||||
<label class="flipnote-editor-settings-toggle"><span>On-screen Shift button on desktop</span><input id="flipnote-editor-desktop-shift" type="checkbox"></label>
|
||||
<p>Hold Ctrl (or Command) and scroll to zoom towards the pointer. A trackpad pinch also zooms. Scroll normally to pan when zoomed in; Shift+scroll moves sideways. You can also drag with the middle mouse button.</p>
|
||||
</section>
|
||||
<section>
|
||||
<div class="flipnote-editor-settings-keyboard-heading"><h3>Keyboard shortcuts</h3><button type="button" id="flipnote-editor-reset-shortcuts" class="button subtle">Reset all</button></div>
|
||||
<p>Click a shortcut, then press one key or a modifier and a key. Changes are saved on this device. The Advanced / alternate actions shortcut is held while choosing alternate tools and selection actions; its default is Shift.</p>
|
||||
<div id="flipnote-editor-shortcut-settings" class="flipnote-editor-shortcut-settings"></div>
|
||||
<p id="flipnote-editor-shortcut-message" class="flipnote-editor-shortcut-message" role="status" aria-live="polite"></p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>How the tools work</h3>
|
||||
<ul class="flipnote-editor-tricks">
|
||||
<li><strong>Audio buttons:</strong> while stopped, click an empty track to record it; click a filled track to preview it; click again while recording/previewing to stop. Hold Shift to switch the same buttons into import mode. Once a track has audio, its square erase-audio button appears without moving the meter: Music's is below its bar, while Sound 1–3 erase buttons sit just outside the sidebar to the right of their bars; click it to remove that track. Erasing Sound 1–3 also removes that sound's page triggers.</li>
|
||||
<li><strong>Music during playback:</strong> the Music track starts with the Flipnote from the current page position, stops with playback, and restarts from the beginning when a looping Flipnote wraps to page 1. Changing Flipnote speed also changes the Music track's tempo and pitch so it keeps the same page/frame alignment instead of being cut short or leaving silence.</li>
|
||||
<li><strong>Live sound effects:</strong> during playback, Sound 1–3 stay active. Click them or use their configured shortcuts to hear the sound immediately and attach it to the current page. On later playbacks, that page automatically fires its attached SE tracks. Sound 1–3 always play at their original recorded/imported speed and pitch, even when Flipnote speed changes; page trigger placement does not change.</li>
|
||||
<li><strong>Audio importing:</strong> hold Advanced / alternate actions (Shift by default) and click Music/Sound 1–3 to choose an MP3 or WAV from your device. The audio trimmer lets you choose a clip and preview it. For Music, <em>Automatically add frames to match this music</em> appends blank pages at the current speed, up to 999 pages. Each Sound track is limited to 2 seconds.</li>
|
||||
<li><strong>Tool picker:</strong> clicking Draw, Paint, Fill, or Erase immediately switches to that family's last chosen subtool and opens its submenu. After choosing a tool, its selected icon stays at the left of the picker. Click that retained icon to reopen the same family quickly. The Cycle drawing tools shortcut switches between the last-used Draw, Paint, Fill, and Erase tools without losing each family's slot or retained Advanced choice.</li>
|
||||
<li><strong>Advanced tools:</strong> hold Advanced / alternate actions (Shift by default) before choosing a Draw, Paint, or Erase slot. Fill has no Advanced bank.</li>
|
||||
<li><strong>Custom Paint:</strong> when the custom Paint tool is selected, use Edit Pattern to draw an 8×8 motif; click or drag across cells, then Save Pattern.</li>
|
||||
<li><strong>Layers & colour:</strong> click a layer row to make it active. Open its colour choices to use black, red, or blue ink independently per layer, or use the colour shortcut to cycle them. Clear active layer erases only the active layer on the current page. A configured nudge shortcut moves the whole active layer by exactly 1 pixel when there is no selection.</li>
|
||||
<li><strong>Selection & movement:</strong> on tab 3, Select draws a freehand selection; hold Advanced / alternate actions (Shift by default) while drawing to make a rectangle. Transform starts a rectangular selection or turns an existing freehand selection into its bounding rectangle. Drag its eight square handles to resize the selected artwork or the round handle above it to rotate. Hold the alternate-action key while dragging inside a selection to move its pixels. Copy changes to Cut while it is held, and Paste uses the copied selection shape. With a selection active, the configured nudge shortcuts move only that selected area by exactly 1 pixel. Invert swaps ink and erased pixels inside the selection on the active layer; hold the alternate-action key while clicking Invert to swap the two layers' ink only inside the selected area.</li>
|
||||
<li><strong>Resize / Flip / Rotate:</strong> these act only on the current layer. With a selection they transform only that selected area; without one they transform the whole active layer. Resize shrinks to 50%, or enlarges to 200% while the alternate-action key is held. Flip is horizontal, or vertical with that key. Rotate is clockwise, or anticlockwise with that key.</li>
|
||||
<li><strong>Paper:</strong> the Paper button toggles white/black paper; monochrome ink is interpreted against the chosen paper colour.</li>
|
||||
<li><strong>Light-box:</strong> toggle it to see previous page artwork while drawing the current page.</li>
|
||||
<li><strong>Clone:</strong> when Clone is enabled, inserting a page or advancing beyond the final page copies the current page's drawing and colours. With Clone off, a new page is blank but inherits the previous page's paper colour.</li>
|
||||
<li><strong>Timeline:</strong> click a thumbnail to jump directly to that page. During playback the filmstrip automatically follows the current page so the active thumbnail stays in view.</li>
|
||||
<li><strong>Page Tools:</strong> use the small Open Page Tools button beneath the timeline to reveal Remove Page, Insert Page, Copy Page, and Paste Page. Copy Page stores both drawing layers; Paste Page replaces both layers on the destination page with the copied page artwork. The toggle moves to the bottom of the open tray and changes to Close Page Tools.</li>
|
||||
<li><strong>Playback:</strong> use the configured Play / pause shortcut from anywhere in the editor except a text-entry field. Click or drag across the speed graphic to choose one of the eight Flipnote speed levels. Editing controls lock while the animation is running, but Sound 1–3 remain live for performance.</li>
|
||||
<li><strong>Import image:</strong> on tab 4, use Import Image to open the three-step importer. Step 1 accepts drag-and-drop, Upload, or clipboard paste (⌘V on Apple platforms, Ctrl+V elsewhere); Step 2 lets you crop the source; Step 3 can convert the crop into one ink colour on one layer, or quantize it into two chosen ink colours across both layers on the same page, with fit/fill/stretch/original sizing, alignment, threshold/dithering, invert, smoothing, and merge/replace options.</li>
|
||||
<li><strong>Loop:</strong> toggle the loop button beside the speed control before playback starts.</li>
|
||||
<li><strong>Title:</strong> click the title on tab 5 to edit it, then press Enter or click elsewhere to finish.</li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="flipnote-editor-info-footer"><button type="button" id="flipnote-editor-info-done" class="button primary">Done</button></footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="flipnote-webm-export-modal" class="flipnote-editor-info-modal" hidden>
|
||||
<div class="flipnote-editor-info-dialog flipnote-editor-webm-export-dialog" role="dialog" aria-modal="true" aria-labelledby="flipnote-webm-export-title">
|
||||
<header class="flipnote-editor-info-header">
|
||||
<div><strong id="flipnote-webm-export-title">Save Flipnote as .WEBM</strong></div>
|
||||
<button type="button" id="flipnote-webm-export-close" aria-label="Close WEBM exporter">×</button>
|
||||
</header>
|
||||
<div class="flipnote-editor-info-body flipnote-editor-webm-export-body">
|
||||
<section><h3>WEBM video</h3><p>The editor will render the current Flipnote into a WEBM video in your browser and download it when rendering finishes.</p></section>
|
||||
<div class="flipnote-editor-export-thumbnail-picker">
|
||||
<strong class="flipnote-editor-export-thumbnail-label">Thumbnail:</strong>
|
||||
<div class="flipnote-editor-export-thumbnail-strip">
|
||||
<div id="flipnote-webm-export-thumbnail-timeline" class="flipnote-editor-export-thumbnail-timeline" aria-label="Choose Flipnote thumbnail page"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flipnote-editor-video-export-progress" id="flipnote-webm-export-progress" role="progressbar" aria-label="WEBM export progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><span id="flipnote-webm-export-progress-fill"></span></div>
|
||||
<div class="flipnote-editor-video-export-status" id="flipnote-webm-export-status" role="status" aria-live="polite">Ready to render the current Flipnote.</div>
|
||||
</div>
|
||||
<footer class="flipnote-editor-info-footer flipnote-editor-video-export-footer">
|
||||
<button type="button" id="flipnote-webm-export-cancel" class="button subtle">Cancel</button>
|
||||
<button type="button" id="flipnote-webm-export-start" class="button primary">Save .WEBM</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="flipnote-open-ppm-modal" class="flipnote-editor-info-modal" hidden>
|
||||
<div class="flipnote-editor-info-dialog flipnote-editor-open-ppm-dialog" role="dialog" aria-modal="true" aria-labelledby="flipnote-open-ppm-title">
|
||||
<header class="flipnote-editor-info-header">
|
||||
<div><strong id="flipnote-open-ppm-title">Open a Flipnote</strong></div>
|
||||
<button type="button" id="flipnote-open-ppm-close" aria-label="Close Flipnote opener">×</button>
|
||||
</header>
|
||||
<div class="flipnote-editor-info-body flipnote-editor-open-ppm-body">
|
||||
<section id="flipnote-open-ppm-choice" class="flipnote-editor-open-ppm-step">
|
||||
<div class="flipnote-editor-open-source-copy">
|
||||
<strong>Open a Flipnote</strong>
|
||||
<span>Choose a PPM file from this device. It stays in your browser.</span>
|
||||
</div>
|
||||
<div class="flipnote-editor-open-source-options">
|
||||
|
||||
<label id="flipnote-open-upload" class="flipnote-editor-open-source-option" for="flipnote-import-ppm-input" role="button" tabindex="0">
|
||||
<span class="flipnote-editor-open-source-icon" aria-hidden="true">+</span>
|
||||
<strong>Upload a .PPM File</strong>
|
||||
<small>Open a Flipnote Studio PPM from this device.</small>
|
||||
</label>
|
||||
<input id="flipnote-import-ppm-input" type="file" accept=".ppm,application/octet-stream" hidden>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<div id="flipnote-import-ppm-status" class="flipnote-editor-import-ppm-status flipnote-editor-open-ppm-status" role="status" aria-live="polite"></div>
|
||||
</div>
|
||||
<footer class="flipnote-editor-info-footer"><button type="button" id="flipnote-open-ppm-cancel" class="button subtle">Cancel</button></footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="flipnote-audio-trim-modal" class="flipnote-editor-audio-trim-modal" hidden>
|
||||
<div class="flipnote-editor-audio-trim-dialog" role="dialog" aria-modal="true" aria-labelledby="flipnote-audio-trim-title">
|
||||
<header class="flipnote-editor-audio-trim-header">
|
||||
<div><strong id="flipnote-audio-trim-title">Import audio</strong></div>
|
||||
<button type="button" id="flipnote-audio-trim-close" aria-label="Close audio importer">×</button>
|
||||
</header>
|
||||
|
||||
<section id="flipnote-audio-import-source-step" class="flipnote-editor-audio-import-step flipnote-editor-audio-import-source-step">
|
||||
<div id="flipnote-audio-import-source-copy" class="flipnote-editor-audio-import-source-copy">
|
||||
<strong>Choose where the audio comes from</strong>
|
||||
<span>Choose an MP3 or WAV from this device, then trim it before using it.</span>
|
||||
</div>
|
||||
<div id="flipnote-audio-import-source-options" class="flipnote-editor-audio-import-source-options">
|
||||
|
||||
<label id="flipnote-audio-import-upload" class="flipnote-editor-audio-import-source-option" for="flipnote-audio-file-input" role="button" tabindex="0">
|
||||
<span class="flipnote-editor-audio-import-source-icon" aria-hidden="true">+</span>
|
||||
<strong>Upload audio file (.wav/.mp3)</strong>
|
||||
<small>Choose an MP3 or WAV from this device, then trim it before using it.</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="flipnote-audio-trim-step" class="flipnote-editor-audio-import-step flipnote-editor-audio-trim-step" hidden>
|
||||
<div class="flipnote-editor-audio-trim-body">
|
||||
<div class="flipnote-editor-audio-trim-file"><strong id="flipnote-audio-trim-filename">Audio file</strong><span id="flipnote-audio-trim-limit"></span></div>
|
||||
<div class="flipnote-editor-audio-waveform-wrap"><canvas id="flipnote-audio-waveform" width="720" height="150" aria-label="Audio waveform"></canvas></div>
|
||||
<div class="flipnote-editor-audio-trim-volume">
|
||||
<div class="flipnote-editor-audio-trim-volume-label"><span>Preview volume</span><strong id="flipnote-audio-trim-volume-value">0%</strong></div>
|
||||
<div id="flipnote-audio-trim-volume-meter" class="flipnote-editor-audio-trim-volume-meter" role="meter" aria-label="Preview volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
||||
<span id="flipnote-audio-trim-volume-fill" class="flipnote-editor-audio-trim-volume-fill"></span>
|
||||
<i class="flipnote-editor-audio-trim-volume-warning" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flipnote-editor-audio-range-grid">
|
||||
<label><span>Start <b id="flipnote-audio-start-value">0.00s</b></span><input id="flipnote-audio-start" type="range" min="0" max="1" step="0.01" value="0"></label>
|
||||
<label><span>End <b id="flipnote-audio-end-value">0.00s</b></span><input id="flipnote-audio-end" type="range" min="0" max="1" step="0.01" value="1"></label>
|
||||
</div>
|
||||
<div class="flipnote-editor-audio-selection-summary"><span>Selected clip</span><strong id="flipnote-audio-selection-duration">0.00s</strong></div>
|
||||
<label id="flipnote-audio-auto-frames-option" class="flipnote-editor-audio-auto-frames" hidden>
|
||||
<input id="flipnote-audio-auto-frames" type="checkbox">
|
||||
<span class="flipnote-editor-audio-auto-frames-copy">
|
||||
<strong>Automatically add frames to match this music</strong>
|
||||
<small id="flipnote-audio-auto-frames-detail">Off: music stays limited to the current Flipnote length.</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="flipnote-editor-audio-trim-footer">
|
||||
<button type="button" id="flipnote-audio-trim-back" class="button subtle" hidden>Back</button>
|
||||
<button type="button" id="flipnote-audio-preview" class="button subtle" hidden>Preview clip</button>
|
||||
<span></span>
|
||||
<button type="button" id="flipnote-audio-trim-cancel" class="button subtle">Cancel</button>
|
||||
<button type="button" id="flipnote-audio-trim-save" class="button primary" hidden>Use clip</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="flipnote-image-import-modal" class="flipnote-editor-image-import-modal" hidden>
|
||||
<div class="flipnote-editor-image-import-dialog" role="dialog" aria-modal="true" aria-labelledby="flipnote-image-import-title">
|
||||
<header class="flipnote-editor-image-import-header">
|
||||
<div><strong id="flipnote-image-import-title">Import image</strong></div>
|
||||
<button type="button" id="flipnote-image-import-close" aria-label="Close image importer">×</button>
|
||||
</header>
|
||||
|
||||
<section id="flipnote-image-import-step-1" class="flipnote-editor-image-import-step flipnote-editor-image-import-step-source" data-image-import-step="1">
|
||||
<div class="flipnote-editor-image-import-source-copy">
|
||||
<strong>Choose an image</strong>
|
||||
<span>Drop an image here, upload one, or paste it from your clipboard.</span>
|
||||
</div>
|
||||
<div id="flipnote-image-import-dropzone" class="flipnote-editor-image-import-dropzone" tabindex="0" role="button" aria-label="Drop an image here or choose Upload image">
|
||||
<div class="flipnote-editor-image-import-drop-icon" aria-hidden="true">+</div>
|
||||
<strong>Drag & drop an image</strong>
|
||||
<span>PNG, JPEG, WebP, GIF or BMP</span>
|
||||
<span class="flipnote-editor-image-import-or">or</span>
|
||||
<label id="flipnote-image-import-upload" class="button primary" for="flipnote-image-file-input" role="button" tabindex="0">Upload image</label>
|
||||
<span class="flipnote-editor-image-import-paste">Paste with <kbd id="flipnote-image-import-paste-shortcut">Ctrl+V</kbd></span>
|
||||
</div>
|
||||
<div id="flipnote-image-import-source-status" class="flipnote-editor-image-import-source-status" role="status" aria-live="polite"></div>
|
||||
</section>
|
||||
|
||||
<section id="flipnote-image-import-step-2" class="flipnote-editor-image-import-step flipnote-editor-image-import-step-crop" data-image-import-step="2" hidden>
|
||||
<div class="flipnote-editor-image-import-file"><strong id="flipnote-image-import-filename">Image file</strong><span id="flipnote-image-import-dimensions"></span></div>
|
||||
<div class="flipnote-editor-image-import-crop-copy">Drag inside the crop to move it. Drag an edge or corner to resize.</div>
|
||||
<div class="flipnote-editor-image-import-crop-stage">
|
||||
<canvas id="flipnote-image-import-crop-canvas" width="720" height="480" aria-label="Crop image"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="flipnote-image-import-step-3" class="flipnote-editor-image-import-step flipnote-editor-image-import-step-options" data-image-import-step="3" hidden>
|
||||
<div class="flipnote-editor-image-import-body">
|
||||
<div class="flipnote-editor-image-import-file"><strong id="flipnote-image-import-final-filename">Image file</strong><span id="flipnote-image-import-final-dimensions"></span></div>
|
||||
<div class="flipnote-editor-image-import-preview-wrap"><canvas id="flipnote-image-import-preview" width="256" height="192" aria-label="Image import preview"></canvas></div>
|
||||
<div class="flipnote-editor-image-import-options">
|
||||
<label><span>Colour mode</span><select id="flipnote-image-import-mode"><option value="single">1 colour / 1 layer</option><option value="dual">2 colours / both layers</option></select></label>
|
||||
<label><span>Ink colour</span><select id="flipnote-image-import-colour"><option value="black">Black</option><option value="red">Red</option><option value="blue">Blue</option></select></label>
|
||||
<label id="flipnote-image-import-second-colour-label" style="display:none"><span>Second ink colour</span><select id="flipnote-image-import-second-colour"><option value="black">Black</option><option value="red">Red</option><option value="blue">Blue</option></select></label>
|
||||
<label><span id="flipnote-image-import-layer-label">Layer</span><select id="flipnote-image-import-layer"><option value="0">Layer 1 (front)</option><option value="1">Layer 2 (back)</option></select></label>
|
||||
<label><span>Size</span><select id="flipnote-image-import-size"><option value="fit">Fit inside page</option><option value="fill">Fill page / crop</option><option value="stretch">Stretch to page</option><option value="original">Original pixels</option></select></label>
|
||||
<label><span>Position</span><select id="flipnote-image-import-align"><option value="center">Centre</option><option value="top-left">Top left</option><option value="top-right">Top right</option><option value="bottom-left">Bottom left</option><option value="bottom-right">Bottom right</option></select></label>
|
||||
<label><span>Dithering</span><select id="flipnote-image-import-dither"><option value="none">None</option><option value="bayer2">Bayer 2×2</option><option value="bayer4" selected>Bayer 4×4</option><option value="floyd">Floyd–Steinberg</option></select></label>
|
||||
<label class="flipnote-editor-image-import-threshold"><span>Threshold <b id="flipnote-image-import-threshold-value">128</b></span><input id="flipnote-image-import-threshold" type="range" min="0" max="255" step="1" value="128"></label>
|
||||
</div>
|
||||
<div class="flipnote-editor-image-import-toggles">
|
||||
<label><input id="flipnote-image-import-smoothing" type="checkbox" checked><span>Smooth resizing before conversion</span></label>
|
||||
<label><input id="flipnote-image-import-invert" type="checkbox"><span>Invert light and dark</span></label>
|
||||
<label><input id="flipnote-image-import-replace" type="checkbox" checked><span id="flipnote-image-import-replace-text">Replace the selected layer instead of merging</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="flipnote-editor-image-import-footer">
|
||||
<div class="flipnote-editor-image-import-footer-left">
|
||||
<button type="button" id="flipnote-image-import-back" class="button subtle" hidden>Back</button>
|
||||
<button type="button" id="flipnote-image-import-reset-crop" class="button subtle" hidden>Reset crop</button>
|
||||
</div>
|
||||
<span></span>
|
||||
<button type="button" id="flipnote-image-import-cancel" class="button subtle">Cancel</button>
|
||||
<button type="button" id="flipnote-image-import-next" class="button primary" hidden>Continue</button>
|
||||
<button type="button" id="flipnote-image-import-apply" class="button primary" hidden>Import</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</main><script src="./assets/bootstrap.js"></script></body></html>
|
||||
Reference in new issue
Block a user
