Framer Classic » Hyperlapse » First video page: Bridge

First video page: Bridge

We put the Bridge video and its overlaying text in their own ‘page’ layer, and we’ll do the same for the other three videos. This way we can position things more easily.

Later we’ll add the four video pages to a PageComponent.

Page 1: A layer that’s the size of the Screen.

# Page 1: Bridge video
page_1 = new Layer
    size: Screen.size
    backgroundColor: null

Setting backgroundColor to null will remove the default gray background.

Add the first video file, Video_1_Bridge.mp4, by dragging it to the Framer window. Framer will create this code:

Video_1_Bridge = new VideoLayer
    width: 639
    height: 1136
    video: "images/Video_1_Bridge.mp4"

Video_1_Bridge.player.play()

The video will show up too big because its resolution in pixels just became the one in points.

Just like its parent, page_1, the video should take up the screen’s size so that it’ll scale to any size of iPhone.

You can also give the video a transparent background.

Video_1_Bridge = new VideoLayer
    size: Screen.size
    video: "images/Video_1_Bridge.mp4"
    backgroundColor: null
    parent: page_1
Video_1_Bridge.player.loop = yes

Video_1_Bridge.player.play()
Open in Framer

Setting the loop on its player to yes will let the video play endlessly, like an animated gif.

And now the text: Drag Create_amazing_handheld.png to the Framer window.

The PNG contains white text on a transparent background.

Create_amazing_handheld = new Layer
    width: 512
    height: 122
    image: "images/Create_amazing_handheld.png"

The image should be centered vertically and placed 41.5 points from the top. We make the text a bit less opaque by setting the opacity to 80%. Don’t forget to also make page_1 its parent.

Create_amazing_handheld = new Layer
    width: 512/2
    height: 122/2
    image: "images/Create_amazing_handheld.png"
    x: Align.center
    y: 41.5
    opacity: 0.8
    parent: page_1
Open in Framer

You also need to type /2 after the width and height values to bring the pixels of the imported image back to points.

Alternative: Using ‘scale frames’ to correct layer size

As explained in the DPR Upgrade Guide there is another way to fix the size of imported images: Utils.scaleFrames().

The disadvantage of this utility is that it scales all values of the layer’s frame, so also it’s position, which means that you can set the layer’s desired position only after using the utility.

We would have to use it like this, for example:

Create_amazing_handheld = new Layer
    width: 512
    height: 122
    image: "images/Create_amazing_handheld.png"
    opacity: 0.8
    parent: page_1
# Apply “scaleFrames()” with a pixel ratio of “2”
Utils.scaleFrames Create_amazing_handheld, 2
# Now set the correct position in points
Create_amazing_handheld.props =
    x: Align.center
    y: 41.5

That’s why I prefer to just type /2. It’s less complicated and makes for fewer lines of code.

By the way, scaleFrames() also works with an array of layers:

Utils.scaleFrames [layerA, layerB, layerC], 2
First video + text overlay

Leave a Reply