HOW TO: Have Your Overlay Come in from Offscreen + Workshop 🦄 💜

[JemU776]

Hello, I hope you’re having a good day/afternoon/evening/night where you’re at Anyways, I’ll dive right in, mon ami(e)

Important Background Information you MUST read

First of all, here is background information from the thread on DARA’S GUIDE: Overlays that you’ll need to know as we discuss this topic.

@Dara.Amarie

ADDING an Overlay to the Scene (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.

INT. BACKGROUND NAME - DAY with OVERLAYNAME to % X Y in zone # at layer #

&

@Dara.Amarie

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

&

@Dara.Amarie

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

Info on layers: HOW TO: Move Characters / Overlays to the Layers

As you can see, the first shift number (X) is the overlay going from left (lower numbers) to right (higher numbers) or vice versa. The second shift number (Y) is the overlay going from up (higher numbers) to down (lower numbers) or vice versa. Think of it like a graph. The first number (scale) is just the size of the overlay.

Now, it’s time to test stuff out!

Having the overlay come in from the side:

Since we know the first shift number (X) controls left, right movement, we can come up with this formula:

INT. BACKGROUND NAME - DAY with OVERLAYNAME to % X1 Y in zone # at layer #

@overlay OVERLAYNAME shifts to X2 Y in zone # in T

Everything else in this code is kept the same (leave the 2nd shift number, Y alone), only X changes.

For example, we could sub in stuff so that everything becomes:

INT. BACKGROUND NAME - DAY = INT. PURPLE DAY

OVERLAYNAME = EPYXMAGIC

% = 1.000

X1 = -250

X2 = 27

Y = 250

in zone # = in zone 1

at layer # = at layer 1

*layer # and zone # don’t need to match.

T = 2.5 (time, in seconds)

For our example, we are going to have the overlay come in from offscreen left and onto the scene in a smooth line:

INT. PURPLE - DAY with EPYXMAGIC to 1.000 -250 250 in zone 1 at layer 1

@overlay EPYXMAGIC shifts to 27 250 in zone 1 in 2.5

This visually translates into:

Having the overlay come in from the top/bottom:

Since we know the second shift number (Y) controls up, down movement, we can come up with this formula:

INT. BACKGROUND NAME - DAY with OVERLAYNAME to % X Y1 in zone # at layer #

@overlay OVERLAYNAME shifts to X Y2 in zone # in T

Everything else in this code is kept the same (leave the 1st shift number, X alone), only Y changes.

For example, we could sub in stuff so that everything becomes:

INT. BACKGROUND NAME - DAY = INT. PURPLE DAY

OVERLAYNAME = EPYXMAGIC

% = 1.000

X = 27

Y1 = 600

Y1 = 250

in zone # = in zone 1

at layer # = at layer 1

*layer # and zone # don’t need to match.

T = 4 (time, in seconds)

For our example, we are going to have the overlay come in from the top and go down onto the scene in a smooth line:

INT. PURPLE - DAY with EPYXMAGIC to 1.000 27 600 in zone 1 at layer 1
@overlay EPYXMAGIC shifts to 27 250 in zone 1 in 4

This visually translates into:

Having the overlay come in from offscreen, adding an easing function:

For our example, we are going to have the overlay come in from the top into the scene in a smooth line and have a bouncing effect:

INT. PURPLE - DAY with EPYXMAGIC to 1.000 27 600 in zone 1 at layer 1
@overlay EPYXMAGIC shifts to 27 250 in zone 1 in 4 using easebounceout

This visually translates into:

More info on easing functions here: HOW TO: Use Easing Functions :disco:

Since this is also a workshop, I will be helping you if you need it.

How To Request

I’ll need:

1. Your background name.
2. What zone you’re in.
3. The name of your overlay(s) and what layer you’d like them at (giving me a layer number is optional).
4. The coordinates of your overlay onscreen.
5. The coordinates of your overlay offscreen. Feel free to tell me if you’d like it to come from the top, bottom, left or right in a straight line although just by seeing your coordinates, I’ll get a pretty good idea myself.
6. Optional = How many seconds you like for the overlay to come into the scene. Also optional is which easing function(s) you’d like to add.

Thanks for checking this out and special thanks to @Fraud for coding the epyxmagic overlay and providing the gifs

[lanafrazer_episode]

, THIS IS EXACTLY WHAT I NEED!! THANK U SIS! TY! TY! TY! REEEEEEEEEEEEEEEE!!! AND @fraud and epyxmagic!

[fraud]

Thanks @JemU776 for the crash course! I’m going to use this in the future.

@lanafrazer_episode you’re welcome but don’t thank me. I got some good step by step instructions.

I’m proud though.

[MelanieyM]

This is so helpful for intros! Thank you Jem!

[JemU776]

I’m proud of you, too #teamwork

And thanks, guys

[MelanieyM]

Lmao wait I’m kinda confused… with the new set up how do you find the overlay? Like where the % is and everything…

[JemU776]

It’s in Spot Directing.

It’ll say “Change Overlay” on the right side.

[MelanieyM]

Omg this is confusing, yeah I know just how would you figure it out? I’m trying to have leaves fall and it just making my life harder ughhh

[JemU776]

Don’t worry, the new layout is pretty easy to figure out <3 If you click “Change Overlay” you’ll get to the overlay and see its coordinates down below. You can then move the overlay around as well as change its size (make it bigger or smaller). You can switch to other overlays that are present in the scene as well.

Example:

This is how it would look.

[MelanieyM]

Would I use the thing at the bottom copy and paste it to my script? Then have the overlay somewhere else, where then it’ll be moved
Down? I’m still confused lmao

[JemU776]

The screenshot I took is from the app. You can type up what it says below in your script or copy those coordinates into your script if you’re on the web previewer (you’ll most likely find the copy button down below). Did you read over the guide above carefully? I aim to make things as simplified as possible. If you’re having, for example, let’s say just 1 overlay come down, place it on screen where you’d like for it to be. Then write those coordinates down so you have them saved. Then you’d move the overlay up, offscreen and write those new coordinates down so you have them saved as well. When you do all this, you can use the saved numbers you have and type up the positioning of the overlays accordingly so your scene will go smoothly. Finally, you can then test it.

[LiyahxWrites]

Ooh? What’s the font name and where can I get it?

[fraud]

If you meant the font for “EpyXMagic” it was called Vladimir Script in MS PowerPoint.

If you search on it multiple font sites will show up where you can download it.

[JemU776]

Bump

I love looking at the gifs, so majestic

[fraud]

Stap it

Thanks for this tutorial @JemU776 It’s very helpful!

She’s exaggerating again

[JemU776]

I couldn’t have done it without you, ilysm it hurts

[JemU776]

BUMP, I srsly love looking at the gifs, seeing coding in action is just soooooo cool

[fraud]

You’re funny! Now I know how to keep you entertained You should do more gifs! Good job Jem!

[JemU776]

Bump

If you’re, let’s say in zone 1, be aware when you’re placing your overlay offscreen right as it can give you “zone 2” instead (so the second zone instead of the first).

[JemU776]

Bump