-
OVERLAYNAME is the overlay name
-
x coordinate is where the overlay is placed on the screen horizontally (side to side)
-
y coordinate is where the overlay is placed on the screen vertically (up and down)
-
% is the scale size (how big or small the overlay is)
-
T stands for time in seconds
-
# means “number”
When you test your story and move your overlay around, you will see 2 codes that look something like this (examples):
@overlay OVERLAYNAME shifts to 196 223
@overlay OVERLAYNAME scales to 1.0 1.0
-
196 is the x coordinate (the first number),
-
223 is the y coordinate (the second number),
-
1.0 is the scale size (%)
Use the spot helper when previewing your story. First tap on "Show Helpers" then you'll find the "Spot Directing" tab near the bottom of the screen. Tap on "Change Overlay" to switch from characters to overlays.
Web Previewer Users:
-
Click on the "Switch tool" to toggle between moving the character and changing the scale.
-
Click and drag to place your character where you want or change their size.
-
The exact code for the placement can be found underneath the web previewer. You can copy and paste the code right into your script.
App Previewer Users:
-
Tap the screen and move your finger around to place your overlay.
-
Pinch the screen with 2 fingers to make the overlay smaller.
-
Spread your fingers away from each other to make the overlay grow bigger.
Adding Overlays to the Scene
Here are the two ways you can add overlays into your scenes:
1. Typing the overlay next to the background name using the word "with"
-
This is used when you want your overlay(s) to already be placed at the beginning of the scene.
-
You only need to add the scale size just once.
INT. BACKGROUND NAME - DAY with OVERLAYNAME
or
INT. BACKGROUND NAME - DAY with OVERLAYNAME to % x y
or
INT. BACKGROUND NAME - DAY with OVERLAYNAME in zone #
or
INT. BACKGROUND NAME - DAY with OVERLAYNAME at layer #
or
INT. BACKGROUND NAME - DAY with OVERLAYNAME to % x y in zone # at layer #
Example:
EXT. ATLANTA - NIGHT with CAR ANGLE SILVER to 1.5 220 85 in zone 3 at layer 4
2. The Create command
@overlay OVERLAYNAME create
-
This is used when you want to add an overlay in the middle of the scene.
-
To use this command you have to add in opacity command to make the overlay appear in your scene. You can learn about opacity down below.
Multiple Overlays in One Scene
1. Keep adding “with OVERLAYNAME” next to the background name after every overlay.
INT. BACKGROUND NAME - DAY with OVERLAYNAME with OVERLAYNAME with OVERLAYNAME
or
INT. BACKGROUND NAME - DAY with OVERLAYNAME in zone # with OVERLAYNAME to % x y in zone # with OVERLAYNAME at layer #
2. Use the Create command as many times as you want.
@overlay OVERLAYNAME create
@overlay OVERLAYNAME2 create
@overlay OVERLAYNAME3 create
-
Remember that you must add the opacity command to make the overlay appear.
Duplicating an Overlay
@overlay OVERLAYNAME_2 create from OVERLAYNAME
-
You can use the same overlay more than once without having to upload the overlay with a different name.
-
You can name the duplicated overlay whatever you want (I just added “_2”), and use that name to animate the new overlay.
-
You can use this code as many times as you want, but make sure that you don’t use the same exact name.
Shifting Overlays
(moving them around the scene)
@overlay OVERLAYNAME shifts to x y in zone # in T
-
Set the time to 0 if you want the overlay placed there without actually moving to that position
-
Always make sure to add the zone #, otherwise the system will default it to zone 1
Scaling Overlays (changing the size)
@overlay OVERLAYNAME scales to % % in T
-
The scale size needs to be entered in twice. (If you’re adding the overlay to the background name then you only need to enter the scale size just once)
-
If you want your overlay to be skinny, change the FIRST scale number.
-
If you want your overlay to be flatter, change the SECOND scale number.
To flip the overlay horizontally, put a negative sign in front of the first scale size:
@overlay OVERLAYNAME scales to -1.0 1.0
To flip the overlay upside down, put a negative sign in front of the second scale size:
@overlay OVERLAYNAME scales to 1.0 -1.0
Opacity - Making the overlay see through/invisible
@overlay OVERLAYNAME opacity # in T
-
# is from 0 to 1 (or 0% to 100%)
-
0 is completely invisible (hidden, gone, cannot see)
-
1 is very visible (the whole overlay is there and you can see it completely)
-
0.5 is see through, and anything between 0 and 1 (ie: 0.33, 0.72, 0.845…) makes the overlay see through
Rotate Overlays
@overlay OVERLAYNAME rotates # anchor point x x in T
-
# is a number between 0 through 360 (like the degrees of a circle)
-
360 turns the overlay all the way around, which turns it back to 0
-
180 makes the overlay upside down
-
-
Rotating an overlay depends on it’s anchor point which is the point from which the overlay will rotate.
-
anchor point 0 0 is the bottom left of the overlay
-
anchor point 0.5 0.5 is the center of the overlay
-
anchor point 1 1 is the top right of the overlay
-
Think of a graph to find
an overlay's anchor point:
This overlay is rotating
from anchor point 0.5 0.5
This overlay is rotating
from anchor point 0 0
Keep in mind that the overlay will rotate the entire PNG image of the overlay which includes the transparent background. If you want to make the overlay rotate from the center, then your overlay needs to be in the center of the PNG image.
If your overlay is not in the center
of the PNG image like this:
Then this is how the overlay will rotate at anchor point 0.5 0.5:
Layering Overlays
1. The Overlay Layer code:
@overlay OVERLAYNAME to layer #
or
@overlay OVERLAYNAME moves to layer #
or
@overlay OVERLAYNAME shifts to layer #
2. Layer through the background name
INT. BACKGROUND NAME - DAY with OVERLAYNAME at layer #
or
INT. BACKGROUND NAME - DAY with OVERLAYNAME in zone # at layer #
or
INT. BACKGROUND NAME - DAY with OVERLAYNAME to % x y at layer #
Removing Overlays From the Scene
1. For individual overlays:
@overlay OVERLAYNAME clear
2. For all overlays in a scene:
@clearall overlay
-
This command does not show in the web previewer. It only works when you test your story in the app.
Looping Overlays
Add “loop # times” or “loop INFINITE times” at the end of the line
-
You have to use THEN to combine all your animations together on just 1 line, then place the loop at the end.
-
You cannot use “AND” for a looping command.
-
You must always use the & sign and never the @ sign when looping, otherwise your scene will be stuck on a loop an you cannot continue.
Here is an example of that:
&overlay OVERLAYNAME shifts to [a spot to the left] in zone 2 in 1 THEN overlay OVERLAYNAME shifts to [a spot to the right] in zone 2 in 1 loop 5 times
With the above example, the overlay will move to the left, then to the right, and it will continue to do that 5 times.
-
To have an overlay rotate infinitely, you have to reset the the overlay back to 0
&overlay OVERLAYNAME rotates 360 anchor point 0.5 0.5 in [time] THEN overlay OVERLAYNAME rotates 0 anchor point 0.5 0.5 in 0 loop INFINITE times