Documentation is work in progress and not completeEditor
73 steps · 11 stages
From Beginner to Hero
The tutorial library answers one question at a time. This is the other thing — a single path through FlashFX in the order the editor actually builds on itself, from opening it for the first time to shipping a finished piece.
Work through it front to back, or jump to the stage you need. Each step has previous and next arrows, so you never have to come back here to keep going.
Start with step 1 — What FlashFX isStage 1Getting oriented
What the editor is, how it is laid out, and how to move around it.
- 01What FlashFX isWhat the editor is for, what it produces, and how a browser-based workflow differs from installing desktop software.
- 02The interfaceThe menu bar, toolbar, Properties Panel, canvas, Layer Panel and timeline, and what each one is responsible for.
- 03Design, Animate and Advanced modesWhy the interface rearranges between modes, and which mode to be in for the task in front of you.
- 04Setting up a projectCanvas dimensions, frame rate, duration and background — and which of them you can safely change later.
- 05Moving around the canvasThe zoom range and where it anchors, the four ways to pan, and the fit shortcuts that get you unlost.
- 06Grid, guides and snappingRulers, guides and the grid, plus the snapping system that makes precise placement fast instead of fiddly.
Stage 2Drawing shapes
Every primitive, the Pen tool, and how to reshape what you have drawn.
- 07Your first shapeDrawing a rectangle, constraining it to a square, and the corner radius and corner style controls.
- 08Circles, arcs and ringsEllipses, the arc angles that make animated progress rings, and the inner radius that turns a disc into a donut.
- 09Stars and polygonsSide and point counts, the inner-to-outer radius ratio that controls sharpness, and corner smoothing.
- 10Lines and arrowheadsWhy a line renders entirely from its stroke, the three cap styles, arrowheads, and dashed-line settings.
- 11The Pen toolPlacing anchor points, pulling bezier handles, and closing a path into a fillable shape.
- 12Editing verticesEntering Vertex Edit mode to select, move, add and remove points, and to reshape handles on an existing path.
- 13Boolean operationsCombining shapes by union, subtraction, intersection and difference to build outlines you cannot draw directly.
Stage 3Surfaces and styling
The material stack — fills, strokes, shadows, glow and blending.
- 14The material stackWhy a shape carries an ordered list of fill layers rather than one fill color, and how those layers composite.
- 15Color and the pickerRGB, HSL, HSB and hex, the independent alpha channel, and the difference between fill layer and element opacity.
- 16GradientsLinear, radial, angular and diamond gradients — color stops, angle, explicit start and end points, and repeat modes.
- 17Textures and patternsThe procedural texture types, geometric pattern fills, and the scale and seed parameters that vary them.
- 18StrokesWeight and alignment, caps and joins, multi-pair dash patterns, and gradient strokes along or across the path.
- 19Drop and inner shadowsOffset, blur and spread, stacking several shadows on one shape, and when an inner shadow is the right choice.
- 20Outer and inner glowSpread and falloff, and the blend mode that turns a flat colored halo into something that reads as light.
- 21Blend modesThe darken, lighten, contrast, inversion and component groups, and what each one is actually good for.
Stage 4Structure and composition
Organising a document so it stays workable as it grows.
- 22Groups and nestingCreating groups, how group and member transforms compose, and pass-through versus isolated blending.
- 23Alignment and distributionAligning to the selection, the canvas or a key object, and the two different meanings of even spacing.
- 24Z-order and the Layer PanelReordering the stack, naming layers so search works, and the lock, visibility and solo toggles.
- 25Masks and clippingClip paths for hard edges, alpha and luminance masks for soft ones, and nesting groups to stack them.
Stage 5Type
Placing, formatting and styling text as a first-class element.
- 26Placing textThe Text tool, entering and editing content, and how text differs from a shape with a label on it.
- 27Text box modesAuto width, auto height and fixed frame, and what changes when you convert between them.
- 28Character formattingFont family, weight and size, tracking and kerning, baseline shift, and horizontal and vertical scale.
- 29Paragraph formattingHorizontal and vertical alignment, leading, paragraph spacing, indentation and tab stops.
- 30Styling textGradient and texture text fills, strokes, shadows, and per-character versus full-block backgrounds.
- 31Text on a pathAttaching text to a vector path, the alignment and spacing controls, and detaching it cleanly afterwards.
Stage 6Images
Bringing raster content in, and the filter stack that treats it.
- 32Importing imagesSupported formats, the import methods, and why source resolution costs you more than display size does.
- 33Transform and placementPosition, size and rotation, the aspect ratio lock, flipping, and image-level blend mode and opacity.
- 34Cropping and maskingNon-destructive crop, image position within the frame, and vector and luminance masks on images.
- 35Images as a shape fillSetting an image as the fill of a shape, the sizing modes, and positioning the image inside it.
- 36Color adjustmentBrightness and contrast, curves, levels, saturation, temperature, LUTs and the rest of the grading stack.
- 37Blur and stylizationGaussian, directional, radial, zoom and lens blur, plus sharpen, halftone, posterize and the artistic filters.
- 38Distortion and atmosphereWarp, ripple, twirl and displacement, and the vignette, lens flare, god rays and bloom light filters.
Stage 7Animation fundamentals
The keyframe engine, and the settings that decide whether it records.
- 39Entering Animate modeThe mode switch, the playhead, and Record Mode — the setting that decides whether a property change becomes a keyframe.
- 40Your first keyframesCreating keyframes three different ways, and selecting, moving and deleting them once they exist.
- 41Keyframe typesStandard, hold and roving keyframes, what each one does to interpolation, and when to reach for a hold.
- 42Property tracksHow the timeline organises one track per animated property, and the visibility and solo toggles on each.
- 43EasingWhy easing governs the transition leaving a keyframe, and how to choose a preset that reads the way you intend.
- 44The easing graph editorReading the curve, dragging its handles, and comparing several property curves in one view.
- 45Animating transformsPosition, scale, rotation and opacity — and why the anchor point must be set before you keyframe any of them.
- 46Animating colorLAB versus RGB interpolation, keyframing gradient stops, and hold keyframes for hard flashes.
- 47Animating effectsKeyframing filter parameters, shadow and glow properties, stroke dash offset, and the shape-specific values.
Stage 8Advanced motion
Paths, hierarchies, expressions and per-character typography in motion.
- 48Motion pathsAttaching an element to a path, keyframing progress from 0 to 1, and auto-orient with its offset.
- 49Spatial interpolationThe motion path display, spatial bezier handles, auto versus continuous bezier, and roving keyframes for constant velocity.
- 50Text animation modesBlock, line, word and character granularity, and what the conversion dialog does to existing animation.
- 51Stagger and per-unit animationDelay per unit, the five stagger directions, the per-unit properties, and the easing envelope over the cascade.
- 52Morph and deformAnimating vertex positions, corner radius, arc angles and star properties to change a shape over time.
- 53Parenting and nullsThe parent-child system, null objects as reusable controls, animation inheritance and freeze transform.
- 54Expressions and value linkingLinking one property to another, expression overrides, and the loop expressions that cycle an animation.
- 55Looping and cyclesWhy the transport loop is preview-only, and the two ways to build a loop that survives export.
Stage 9The timeline
Everything the timeline panel does once a composition gets complicated.
- 56Timeline architectureThe timeline versus the sequence compositor, primary and secondary views, and the ruler and timecode display.
- 57Track organizationThe track hierarchy, track colors, layer bars and layer duration in the track list.
- 58Advanced keyframe operationsAligning to the playhead, distributing evenly, scaling a selection in time, reversing, and bulk interpolation edits.
- 59The graph editor in depthValue graph versus speed graph, editing several tracks at once, snapping, and the overlay display.
- 60The work areaSetting in and out points, manipulating the work area, and overriding the export range independently of it.
- 61Time remappingEnabling time remap, freeze frames, and speed ramping a layer without touching its keyframes.
- 62Layer duration and trimIn and out points per layer, trimming visually, slip and slide, splitting a layer, and sequence snapping.
- 63Markers and beat syncingGlobal and layer markers, navigating between them, and using them to sync animation to a beat.
- 64Search and filteringLayer search, track type filters and the keyframe-only filter — what makes a long track list usable.
Stage 10Composition at scale
Assembling sequences into a finished, long-form piece.
- 65The sequence compositorThe compositor tab, sequences versus clips, placing sequences, and multi-track compositing with track blend modes.
- 66Clips and transitionsMoving, trimming, speed, duplicating and unlinking clips, and the eight built-in transition types.
- 67Nested sequencesPre-composing elements into a nested sequence, why you would, entering one to edit it, and live updates.
- 68Adjustment layers and control rigsThe adjustment layer pattern, the pre-comp plus grade pattern, and master control and expression controller nulls.
Stage 113D, performance and output
The GPU underneath, the 3D system on top of it, and shipping the result.
- 693D transformsEnabling 3D on an element, the Z axis and 3D rotation, and how depth sorting resolves what draws in front.
- 70Camera and lightingPerspective and camera simulation, the 3D lighting model, and what each light type costs to render.
- 71The rendering environmentWebGL and the GPU memory budget, offscreen buffers, and the blend mode and filter costs that consume them.
- 72Profiling and optimisationThe performance panel, profiling a single element, GPU tier detection, and the constraints that differ by browser.
- 73Preview and exportPreview quality and the render cache, export ranges and formats, transparency, and what to check before you ship.
Looking for one specific answer?
The course is sequential by design. If you already know what you need, the tutorial library is organised by topic instead, and the troubleshooting section is organised by symptom.