DARA’S GUIDE: Overlays

Please visit my website for more templates and guides!
https://www.dara-amarie.com/

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
T stands for time in seconds
# means “number”

NOTE: 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 (%)

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 be already placed at the beginning of the scene. (If you’re adding the overlay to the background name then you only need to enter 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 overlay command
This is used when you want to add an overlay in the middle of the scene.

NOTE: 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.

@overlay OVERLAYNAME create
@overlay OVERLAYNAME opacity 1 in 0

MULTIPLE Overlays in 1 Scene:

1. All you need to do is 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. Or you can keep using the create command over and over again.

@overlay OVERLAYNAME create
@overlay OVERLAYNAME create
@overlay OVERLAYNAME create

Remember that you must add the shifts, scales, and opacity commands for all overlays when using the create command.

DUPLICATING the Same Overlay:

You can use the same overlay more than once without having to upload the overlay with a different name.

@overlay OVERLAYNAME_2 create from OVERLAYNAME

You can name the duplicated overlay whatever you want (I just added “2” to the end of the original overlay name), 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

NOTE: Always make sure to add the zone #, otherwise the system will default it to zone 1

HOW TO: Use Easing Functions :disco:

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

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

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.

OPACITY - Making the overlay see through/invisible:

@overlay OVERLAYNAME opacity # in T

# is from 0 to 1
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.

ROTATING 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
Put a negative sign before the number to make it rotate the opposite way.

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 when trying to place the anchor point

This overlay is rotating from anchor point 0 0

com-crop2

This overlay is rotating from anchor point 0.5 0.5

com-crop1

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 like this:

Then this is how the overlay will rotate at anchor point 0.5 0.5

com-crop3

COMBINING Overlay Animations:

1. Use the ampersand sign! &

&overlay OVERLAYNAME shifts to ---------
&overlay OVERLAYNAME scales to ---------
&overlay OVERLAYNAME rotates ---------
@overlay OVERLAYNAME opacity ---------
or
&overlay OVERLAYNAME shifts to ---------
@CHARACTER walks to ----------

2. Or you can use the word “AND” on the same line.

@overlay OVERLAYNAME shifts to ----- AND overlay OVERLAYNAME scales to -----

LAYERING Overlays:

1. Use this code:

@overlay OVERLAYNAME to layer #
or
@overlay OVERLAYNAME moves to layer #
or
@overlay OVERLAYNAME shifts to layer #

2. Or change the 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 in zone # at layer #

CLEARING Overlays (removing them from the scene):

For individual overlays:

@overlay OVERLAYNAME clear

For all overlays in a scene:
This command does not show in the web previewer. It only works when you test your story in the app.

@clearall overlay

Creating TEXTS from Overlays:

Click here: https://www.dara-amarie.com/text-overlays

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.

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.

NOTE: Remember to use & not @ when using “infinite”, otherwise your scene will be stuck on the loop and you won’t be able to continue.

To have an overlay rotate infinitely, you have to reset 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

769 Likes

image

72 Likes

Thank you it helps a lot!! <3

5 Likes

Does anyone know how to change an overlays layer? Thanks

4 Likes

It’s in the guide above.

19 Likes

Oh, guess I overlooked that! Thanks so much!

2 Likes

Thank you! This is amazing! You are an overlay goddess!

4 Likes

This helped so much. thank you:grinning::grin::grin::grin:

3 Likes

How do you put more than one overlay in a scene

2 Likes

If you read under MULTIPLE Overlays above it tells you how to do it

5 Likes

Oops I did not see that

1 Like

Thank you so much! I was just wondering, how would you add weather and an overlay?

1 Like

The weather needs to be last next to the background name.

INT. BACKGROUND NAME - DAY with OVERLAY1 with OVERLAY2 with effect HARD RAIN

5 Likes

How would I write my overlay BLUSH in zone 1 in layer 4 using the @create command?
:thinking:

1 Like

You’d have to use the shifts and layer commands. The create command is just for adding the overlay to the scene.

1 Like

so…

@overlay BLUSH create and overlay BLUSH shifts to zone 1 and overlay BLUSH to layer 4 ???

🤦 I’m so confused lol…

2 Likes

So:

&overlay BLUSH create
&overlay BLUSH shifts to x y in 0 in zone #
&overlay BLUSH scales to # # in 0
&overlay BLUSH opacity 1 in 0
@overlay BLUSH to layer 4

7 Likes

thx :heart_eyes:

1 Like

&overlay OVERLAYNAME shifts to [a spot to the left] in 1 in zone 2 THEN overlay OVERLAYNAME shifts to [a spot to the right] in 1 in zone 2 loop 5 times

so for this part, would a spot to the right be like screen right or is it like the number spots?

1 Like

They’re number coordinates

2 Likes