Compositions and transitions
Scenes in sequence: each frame plays its own timeline, with transitions between them, a stage and sound.
A composition plays frames one after another, as the scenes of a video. Each frame stays its own artboard with its own timeline. The composition decides which part of it plays, when, and how it hands over to the next.
Description
A four-frame story ad in Animate. From the clapperboard in the transport bar, New composition from frames puts every frame on a scene strip. The + at the first cut adds a transition, and in the clip inspector it is changed to Push from the left. Play from just before the cut shows the second scene pushing the first out.
How to
Turn a row of frames into a video
- In Animate, select the frames (or select nothing, to take every top-level frame on the page, left to right).
- Click the clapperboard in the transport bar and choose New composition from frames. The composition opens in the timeline as a strip of scenes, sized like the first frame and at its frame rate.
- Click + at a cut to add a transition from the scene before (a 600 ms Dissolve).
- Click the scene after the cut. In the clip inspector, pick another Transition in, set its duration and curve.
- Click Play.
Change the order, or trim a scene
- Drag a clip along the strip to reorder it.
- Drag a clip's left or right edge to trim which part of its frame's timeline it plays (in frame steps). Later scenes ripple along, so there are never gaps.
- Or type In and Out in the clip inspector.
Edit what happens inside a scene
Click the clip, then Edit scene: its frame's own timeline opens. The back arrow at the left of the composition's header closes the composition.
Cut to the music
Add sound, detect its beats, and cut the scenes to them. See Audio.
Reference
The header
| Control | What it does |
|---|---|
| ← | Close the composition, back to the scene's own timeline |
| Go to start, Play, Loop | The transport, as on a frame's timeline |
| Time | The playhead; click to switch between seconds and timecode |
| of … · W×H · fps | Its length, stage size and frame rate |
| Name | Rename the composition |
| Add frames | Add the selected frames as scenes at the end |
| Audio, Generate, Scrub audio | Sound: see Audio |
| Export | The export dialog, for the whole composition with its sound |
| Zoom out / in | Zoom the strip |
The clip inspector
n. Scene name; In and Out (what it plays of its timeline); Transition in, its duration (it overlaps the scene before) and its curve; Centre X and Centre Y for the transitions that grow from a point; Edit scene; and Remove. The first scene says The first scene opens the composition: it has no transition in.
Transitions
| Transition | What it does |
|---|---|
| Cut | A hard cut |
| Dissolve | Cross-fade |
| Slide in ← left, Slide in → right, Slide in ↑ top, Slide in ↓ bottom | The new scene slides over the old one |
| Push ← left, Push → right, Push ↑ top, Push ↓ bottom | The new scene pushes the old one out |
| Move out ← left, Move out → right, Move out ↑ top, Move out ↓ bottom | The old scene slides away, uncovering the new one |
| Circle wipe | The new scene is revealed in a growing circle (from its Centre) |
| Iris | The old scene shrinks away inside a circle (to its Centre) |
| Zoom through | The old scene zooms up and fades while the new one grows in (from its Centre) |
| Whip pan ← left, Whip pan → right | A push at speed: both scenes rush across, streaked with motion blur that is longest halfway (a whip pan in a film). Scene transitions only |
| Cube ← left, Cube → right, Cube ↑ top, Cube ↓ bottom | 3D: the two scenes are faces of a cube that turns about their shared edge, the new one coming round from that side |
| Carousel ← left, Carousel → right | 3D: the scenes are panels on a ring that turns one step |
| Flip ↔, Flip ↕ | 3D: a card turned over, the old scene its front and the new one its back |
| Swing open, Swing close | 3D: the old scene swings away on its left edge like a door (close: the new one swings shut over it) |
| Stack in, Stack out | 3D: the new scene slides up over the old one, which sinks back (out: the old one slides off the top of the deck) |
| Depth push, Depth pull | 3D: the old scene falls away into the distance as the new one arrives from in front (pull: the other way) |
A transition's curve can be any of the easing curves except springs. In present mode, going back plays a transition reversed: a slide becomes a push, a circle wipe an iris, a cube turns back the other way. The 3D transitions turn through a perspective and darken a face as it turns away; they run a little longer by default (0.65 s). In a Lottie or PowerPoint export they play as their flat counterpart (a cube as a push, a flip as a dissolve). Prototype transitions also offer Instant and Smart animate (see Presenting).
The stage
While a composition is open the canvas shows only its stage, and the selection is cleared. Composition markers, including the onsets that audio finds, show as lines down the strip, and clips snap to them.
Masks and reveals
Any layer can be a mask (Shapes and vectors), and a mask's shape, size and position animate like any other layer. That's how you make a reveal, a wipe or a spotlight inside a scene; the Wipe presets build one for you. Between scenes, circle wipes and irises are drawn by the transition itself.
Zoom and scroll the strip's time as in a frame's timeline (Zooming and scrolling time): ⌥ or ⌘ + scroll or pinch about the pointer, ; for frames, Shift+; to fit. The composition keeps its own zoom.