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()
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
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
