Documentation is work in progress and not completeEditor
Fundamentals & Settings

Panels & Layout Customization

FlashFX provides a flexible panel system that adapts to your workflow. You can show, hide, resize, and rearrange panels to create a custom layout optimized for your screen size and working style.

Available Panels

PanelDefault LocationPurpose
ToolbarLeft edgeDrawing and selection tools
Layer PanelBelow toolbar / Collapsible drawerLayer hierarchy and visibility
Properties PanelRight sideElement-specific settings
TimelineBottom (Animate/Advanced mode)Keyframes and animation tracks
SwatchesFloating/dockedColor palette management
NavigatorFloating/dockedCanvas overview and quick navigation
AssetsFloating/dockedImported images, fonts, and media
HistoryFloating/dockedUndo/redo history list

Showing and Hiding Panels

Access panel visibility controls via the Window menu:

  • Window → Layers — Toggle layer panel
  • Window → Properties — Toggle properties panel
  • Window → Timeline — Toggle timeline
  • Window → Swatches — Open swatches panel
  • Window → Navigator — Open navigator panel

Checked items in the Window menu indicate visible panels. Click to toggle.

Resizing Panels

In Advanced mode, all panels have resize handles allowing custom sizing:

  • 1.Move cursor to the border between two panels
  • 2.Cursor changes to a resize icon (double-arrow)
  • 3.Click and drag to resize
  • 4.Release to finalize size

Note: In Design and Animate modes, panel sizes are fixed to predefined optimal dimensions.

Floating Panels

Secondary panels (Swatches, Navigator, Assets, History) can float as separate windows:

  • Detach — Click the panel's detach icon (top-right corner)
  • Reattach — Drag panel back to a dock zone (edges or corners)
  • Move — Drag panel by its title bar
  • Resize — Drag panel edges or corners

Floating panels stay on top of the main window and can be positioned on secondary monitors.

Docking Zones

When dragging a floating panel, docking zones appear as highlighted areas:

  • Left dock — Attaches below the toolbar/layer panel
  • Right dock — Attaches below the properties panel
  • Bottom dock — Attaches next to the timeline (Advanced mode only)

Drop the panel when the desired zone is highlighted to dock it there.

Workspace Presets

Save and recall custom panel layouts:

  • Save workspace — Window → Workspace → New Workspace, enter a name
  • Load workspace — Window → Workspace → [Workspace Name]
  • Reset workspace — Window → Workspace → Reset to Default
  • Delete workspace — Window → Workspace → Manage → Delete

Built-in workspaces:

  • Default — Standard layout for general work
  • Animation Focus — Maximized timeline, minimal properties panel
  • Design Focus — Maximized canvas, hidden timeline
  • Compact — Optimized for small screens (laptops)

Full-Screen Mode

Maximize canvas space by entering full-screen mode:

  • Toggle full-screen — View → Full Screen (F11)
  • Menu bar and browser chrome are hidden
  • Panels remain visible but maximize available space
  • Press F11 or Escape to exit

Distraction-Free Mode

Hide all panels except the canvas:

  • Toggle — View → Distraction-Free Mode (Shift + F11)
  • All panels collapse; only canvas and menu bar remain
  • Ideal for presentations and final reviews
  • Press Shift + F11 to restore panels

Panel Preferences

Customize panel behavior in Edit → Preferences → Interface:

  • Auto-collapse panels — Panels shrink when inactive (saves space)
  • Panel transition speed — Animation duration for show/hide
  • Remember panel states — Restore visibility on next session
  • Floating panel opacity — Transparency when not focused (20-100%)

Best Practices

  • Create workspace presets for different task types (design, animation, export)
  • Use floating panels for secondary tools (Navigator, Swatches) on multi-monitor setups
  • In Animate mode, hide the layer panel (collapsible drawer) to maximize timeline height
  • Reset to default workspace if panel layout becomes confusing
  • Use distraction-free mode when presenting work to clients