HyperFrames
CommunityDocs

Layer a whole shot

Lesson 6 · 10 min · Learn it

STEP 1 · WATCH
2:04 · Captions on by default
STEP 2 · RECAP

What the video said

  1. 1Send a shot in four layers, in order: storyboard, timing, camera and transitions, then motion and finish.
  2. 2Look at the named frames after every send, before you send the next.
  3. 3If a layer misses, repeat only that layer and name the miss.
  4. 4Run the Check once, after the motion and finish layer.
STEP 3 · WORDS

Words to know

layer

One message in a build that adds one kind of thing and leaves everything else alone.

beat

A change on screen that has a time: a word appears, a card leaves, a cut lands.

zoom cut

A push in on something, cut at the peak, into a scene that starts zoomed in and pulls back out.

STEP 4 · QUIZ
Question 1 of 2

The timing layer comes back with the cut a full second late. What do you send next?

Pick an answer, then check it.

STEP 5 · MAKE IT

The prompt this lesson teaches

In Desktop, Framey builds this with you. Here it is, to read.

StoryboardRead-only

Make a 4.0 s, 1920x1080, 24 fps intro for Orbit, a tool that turns one line into a launch video. One sans (Inter), all caps. Set every font size in px and use only 56 and 340. Give each object the id or class in brackets so later messages can point at it. Build the piece as two scenes, each with its own start time and length: [#lines] from 0 to 3.04 s, holding the headline, the keepers and the tiny word, and [#camera] from 3.04 to 4.0 s, holding the huge word and its glow. Build everything now as stills at its final size, including what only shows up later; later messages will move things, not size them. No animation yet. Write every element in the HTML itself; do not use a script to create elements or text. Use one composition and one timeline, with no sub-compositions. Replace the starter's title and its style. - Ground: near-black navy #05060F, and pure black #000000 from 1.5 s on. - The headline [#headline]: "ONE LINE BECOMES YOUR LAUNCH WITH" on one centered line at y 0.50, medium weight, 56 px, the whole line about 0.6 of the frame width. One gradient across the whole line, violet #AB60D0 at the left to pale lavender #F1EAF5 at the right. Each word is its own element [.word] and each letter its own element inside it [.letter], 28 letters in all. - The five keepers [.keep], shown as a still: the O of ONE, the I of LINE, the B of BECOMES, the R of YOUR and the T of WITH, white, in their places in the row, with every other letter gone. - The tiny word [#tiny]: ORBIT in white at 56 px, centered at x 0.50, y 0.50, each letter its own element [.tl]. - The hero [#hero], used after 3.04 s: the word ORBIT huge and centered at x 0.50, y 0.50, 340 px, regular weight (not bold), slightly negative tracking, filled with a 45 degree gradient from purple #6C5CE7 at the bottom left to pale #F5E6FC at the top right; its ink about 0.52 of the frame width and its cap height about 0.23 of the frame height. Behind it a soft violet glow [#glow]: a blurred #6C5CE7 pool at about 40% opacity, about 0.7 of the frame width, centered. Show the stills at these times: the headline at 1.3 s; the keepers at 2.4 s; the tiny word at 2.8 s; the hero and glow at 3.5 s.

TimingRead-only

Now the timing. Use the names already in the piece. Simple appear, disappear and swaps only, each on a single frame: make each thing appear with a one-frame fade from nothing to full, and disappear the same way, so it reads as a pop. No easing yet. - 0 to 0.21 s: an empty navy frame. - The words appear: ONE at 0.21 s, LINE at 0.33 s, BECOMES at 0.58 s, YOUR at 0.79 s, LAUNCH at 0.92 s and WITH at 1.13 s. The whole line is on screen from 1.13 s. - 1.50 s: the ground switches to pure black. - From 1.50 s the 23 letters that are not keepers leave, one per frame, in reading order; the last one is gone at 2.46 s, leaving only the five keepers. - 2.50 s: the keepers disappear and the tiny ORBIT [#tiny] appears at the center. - 3.04 s: cut to scene [#camera], the hero and the glow. Hide [#tiny] itself at 3.04 s, so the tiny ORBIT is gone. The hero stays to 4.0 s. Write every tween as its own plain call: a plain number for its start time and plain numbers for its values and ease, with no helper functions, loops or arithmetic in tween calls, so the Check can read them.

Camera and transitionsRead-only

Now the camera and the cut. [#camera], the scene with the hero and the glow, is the camera: zoom that wrapper. The tiny word is not on it. - 2.79 to 3.04 s: the tiny ORBIT swells from 1.0x to about 1.5x, a push in toward the cut. - 3.04 s is a zoom cut: a hard cut, no fade, from the swelling tiny word to the hero. [#camera] starts at 1.8x, so on the first frame after the cut the word nearly fills the width of the frame with only a thin margin each side. It pulls back to 1.0x by 3.62 s, then slowly to 0.94x at 4.0 s. It never holds still. The swell and the pull-back each run at one steady speed for now; the ease comes in the next message. Write every tween as its own plain call: a plain number for its start time and plain numbers for its values and ease, with no helper functions, loops or arithmetic in tween calls, so the Check can read them.

Motion and finishRead-only

Now motion and finish. Keep every time from before. - Each word wipes in from left to right over 4 frames, so only a sliver shows on its first frame, and a bright violet band (#BD00EF) runs through it and fades over the next 6 frames. WITH arrives dark plum and settles to pale lavender by 1.45 s. - The letters leave in hard one-frame steps, with no fade. - The keepers slide together to the center with an ease-out over 0.25 s from 2.50 s and meet as the tiny ORBIT, with no overshoot. - The swell from 2.79 to 3.04 s eases in (power3.in), so it speeds up toward the cut. - The hero's pull-back from 3.04 to 3.62 s is a strong ease-out (power3.out): fast just after the cut, then slowing. - The hero has clean edges and no glow on its letters; the glow stays behind it. - Never: a typewriter cursor, letters that fade in, a random cloud of letters, a white flash at the cut, a bold hero, a fade between the tiny word and the hero. Write every tween as its own plain call: a plain number for its start time and plain numbers for its values and ease, with no helper functions, loops or arithmetic in tween calls, so the Check can read them.

Free for Mac, Windows and Linux