Documentation is work in progress and not completeEditor
Fundamentals & Settings

Interface Overview

When FlashFX opens, the interface is organized into five primary regions. Understanding the role of each region is the foundation for working efficiently.

The Menu Bar

The topmost strip of the application. Contains:

  • FlashFX logo / Home returns to the project dashboard
  • File menu new project, open, save, export, import, and project settings
  • Edit menu undo, redo, cut, copy, paste, duplicate, select all, preferences
  • View menu zoom controls, grid, rulers, guides, panel visibility
  • Mode switcher toggles between Design, Animate, and Advanced workspace modes
  • Account indicator shows current account status (Guest or authenticated), storage usage, and sync state
  • Help documentation, keyboard shortcut reference, release notes, support

The Toolbar

The vertical strip on the left edge of the canvas. Contains all drawing and selection tools:

ToolShortcutFunction
Selection (Pointer)VSelect, move, and transform elements
RectangleRDraw rectangles and squares
Circle / EllipseCDraw circles and ellipses
Star & PolygonPDraw multi-point stars and polygons
LineLDraw straight line segments
Pen (Path)BDraw custom bezier paths
TextTPlace and edit text objects
Image ImportIImport raster images onto the canvas
Hand (Pan)HPan the canvas without affecting selection
ZoomZClick to zoom in; Alt+click to zoom out

The toolbar also contains quick-access buttons at the bottom:

  • Grid toggle shows or hides the canvas grid
  • Snap toggle enables or disables the snapping system
  • Ruler toggle shows or hides horizontal and vertical rulers

The Properties Panel

The right-side panel. Context-sensitive; its contents change completely based on what is currently selected:

  • Nothing selected: Shows canvas/artboard settings (dimensions, background, frame rate)
  • Shape selected: Shows transform properties, material system, layer blend settings
  • Text selected: Shows typography controls, text material, animation mode settings
  • Image selected: Shows image properties, filter stack, blend mode
  • Group selected: Shows group-level transform and composite settings
  • Keyframe selected: Shows easing controls and interpolation settings

The Properties Panel is always visible in Design and Advanced modes. In Animate mode it collapses to a narrower form to give the timeline more vertical space.

The Canvas

The central viewport. The canvas represents the output artboard. Everything within its bounds is included in export; everything outside is clipped. The canvas itself has a configurable background color or transparency.

The area outside the canvas boundary (the pasteboard) is a dark neutral surface. Elements can be placed on the pasteboard to keep them out of the export while remaining part of the project, useful for storing unused assets or off-screen animation start positions.

The Layer Panel

The panel on the left side of the interface (below the toolbar in Design mode, a collapsible drawer in Animate mode). Lists every element in the current sequence in Z-order, with:

  • Element name (double-click to rename)
  • Visibility toggle (eye icon)
  • Lock toggle (padlock icon)
  • Solo toggle (circle icon) hides all other layers
  • Element type icon (shape, text, image, group)
  • Expand arrow for groups

The Timeline

Visible in Animate and Advanced modes. Occupies the lower portion of the interface. Contains:

  • Playhead the current time position, draggable
  • Timecode display shows current time in HH:MM:SS:FF format
  • Frame counter shows current frame number
  • Track list one row per animated element, expandable to show individual property tracks
  • Keyframe area the horizontal space where keyframe diamonds appear
  • Transport controls play, pause, stop, step back, step forward, loop toggle
  • Zoom slider adjusts visible time range