HyperFrames
CommunityDocs

Camera and transitions

Lesson 4 · 16 min · Learn it

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

What the video said

  1. 1The camera layer gives a scene one camera: a single wrapper that zooms, with the cursor and headline above it.
  2. 2Name the cut: a hard cut is an instant switch, a match cut carries a move across it, a zoom cut pushes in and pulls back.
  3. 3Say what the frame shows either side of the cut, not only the number behind it.
  4. 4Give the camera a speed profile: fast after a cut, slow while things happen, and never still.
STEP 3 · WORDS

Words to know

hard cut

An instant switch from one scene to the next with no fade or dissolve between them.

match cut

A cut where a move carries across it, so the next scene picks up the motion the last one was making.

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 3

You want a jump with nothing softening it. What do you say?

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.

To FrameyRead-only

Now the camera and the cut. Scene 2 [#camera] is the camera: zoom that wrapper, so the panel, header, drop area, label and tiles ride it together. The cursor, the cards and the headline stay in [#overlay], above both scenes, and do not zoom or blur with the panel. - [#intro] zooms out from 1.0x to 0.91x over 0 to 0.33 s. - The cut at 0.33 s is a match on that move: the camera keeps zooming out across it. [#camera] starts scene 2 already zoomed in at 1.42x, so on the first frame after the cut the header is above the top edge and the drop area is wider than the frame, and you only see its middle. It zooms out fast to 1.07x by 0.83 s, then slowly to 0.90x by 2.63 s. Each camera move runs at one steady speed for now; the ease comes in the next message. - From 2.63 s it speeds up again, to about 0.65x by 3.33 s, then slowly to 0.60x at 4.5 s. The camera never holds still. - From 2.63 s blur [#camera] to about 11 px, and darken the scene with a separate dark veil [#dim] placed above [#camera] and below [#overlay]. Never change the camera wrapper's own opacity, and never blur the headline. - Check it at 0.40 s and 0.70 s: at 0.40 s no header is visible; at 0.70 s the header is just coming down through the top edge. 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

Practice it in Desktop

Camera and transitions: on your own

The camera for the hook: a push in on the tiny word, a zoom cut, and a pull back on the huge word.

Next lesson · 16 minMotion and finish