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
# Page 1: Bridge video page_1 = new Layer size: Screen.size backgroundColor: null
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()
loop on its
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
height values to bring the pixels of the imported image back to points.
As explained in the DPR Upgrade Guide there is another way to fix the size of imported images:
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