FlashFXDocumentation
Ctrl+K
Landing Page
Documentation is work in progress and not completeEditor
Manipulating Shapes

Shape Primitives

FlashFX provides a complete set of vector primitive tools. Every shape drawn with these tools is fully editable — vertices, curves, and all properties remain accessible after creation.

Rectangle Tool (R)

Draws rectangular shapes, including perfect squares.

Drawing:

  • •Click and drag to draw a rectangle
  • •Hold Shift while dragging to constrain to a perfect square
  • •Hold Alt while dragging to draw from the center point outward

Properties unique to rectangles:

Corner Radius

Each corner of a rectangle can have an independent radius applied, creating rounded corners. Values are set in pixels.

  • •Uniform radius — a single value applies equally to all four corners
  • •Independent corners — click the chain-link icon to unlink corners and set each individually: top-left, top-right, bottom-right, bottom-left
  • •Radius range: 0px (sharp corner) to half the shortest side (maximum circle, produces a "stadium" or "pill" shape)
  • •Corner radius is animatable — it can be keyframed to change over time (e.g., morphing from sharp to rounded)

Corner Style

Three styles are available for rounded corners:

StyleDescription
RoundStandard circular arc (default)
SmoothiOS-style continuous curvature — a "squircle" curve that flows more naturally from the straight edge into the curve
BevelA straight angled cut rather than a curve

Dimensions

Width and height are editable numerically in the Properties Panel at any time. Changing dimensions by typing values does not require the Rectangle tool to be active — use the Selection tool and edit in the Properties Panel.

Circle / Ellipse Tool (C)

Draws ellipses, including perfect circles.

Drawing:

  • •Click and drag to draw an ellipse
  • •Hold Shift to constrain to a perfect circle
  • •Hold Alt to draw from the center outward

Arc and Sweep Properties

A circle/ellipse can be configured as a partial arc rather than a complete ring:

  • •Start Angle — the angle at which the arc begins (0° = 3 o'clock, clockwise)
  • •End Angle — the angle at which the arc ends
  • •Arc Mode:
    • –Open — an open arc (like a Pac-Man mouth shape at certain angles)
    • –Chord — the two ends of the arc are connected by a straight line
    • –Pie — the two ends connect back to the center, like a pie slice

Arc start and end angles are both animatable, enabling animated progress indicators, countdown rings, and loading spinners without any external configuration.

Inner Radius (Donut Mode)

Setting an inner radius creates a donut/ring shape. The inner radius defines the hollow center as a proportion of the outer radius (0 = solid, 1 = no shape).

Star & Polygon Tool (P)

Generates regular polygons and multi-pointed star shapes.

Polygon Mode:

  • •Sides — the number of sides (3 = triangle, 4 = square, 6 = hexagon, etc.)
  • •Minimum: 3 sides. No enforced maximum.
  • •The polygon is always regular (all sides equal, all angles equal)

Star Mode:

  • •Points — the number of star points (minimum: 3)
  • •Outer Radius — the distance from the center to the outer points
  • •Inner Radius — the distance from the center to the inner indentations between points. This controls the "sharpness\" of the star:
    • –Inner radius close to outer radius = shallow, fat star
    • –Inner radius very small relative to outer radius = sharp, spike-like star

Smoothing

A smoothing parameter rounds the corners at both the inner and outer vertices of the star. At maximum smoothing, a star becomes a lobed organic shape rather than a geometric star.

Both inner radius and smoothing values are animatable, enabling fluid morphing effects.

Line Tool (L)

Draws straight line segments.

Properties:

  • •Start and End points — absolute X/Y coordinates
  • •Stroke Weight — the visual width of the line in pixels (lines have no fill by default)
  • •Cap Style:
    • –Butt — the line ends exactly at the endpoint coordinate, with no extension
    • –Round — the line ends with a semicircular cap extending beyond the endpoint
    • –Square — the line ends with a flat square cap extending beyond the endpoint by half the stroke width

Lines can have the same material properties (including gradient strokes) as any other shape. They can also be given arrowheads via the stroke settings.

Arrow Heads:

  • •Start Cap — adds an arrowhead or decorative cap to the start point
  • •End Cap — adds an arrowhead or decorative cap to the end point
  • •Cap styles: Arrow, Filled Arrow, Circle, Square, Diamond

Dashed Lines:

Lines can be converted to dashed strokes:

  • •Dash Length — the length of each dash segment in pixels
  • •Gap Length — the space between dashes in pixels
  • •Dash Offset — shifts the dash pattern along the stroke, useful for animated "marching ants\" effects when keyframed