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

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

Important Background Information you MUST read

First of all, here is background information from the thread on Placing & Animating Overlays that you’ll need to know as we discuss this topic.

&

&

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 :purple_heart:

21 Likes

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

8 Likes

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

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

I’m proud though. :laughing:

3 Likes

This is so helpful for intros! Thank you Jem!

4 Likes

I’m proud of you, too :nerd_face: :kissing_heart: :blob_hearts: #teamwork :fist_bump: :blob_sun:

And thanks, guys :sunglasses: :heart:

2 Likes

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

2 Likes

It’s in Spot Directing.

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

2 Likes

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

2 Likes

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.

2 Likes

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

2 Likes

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.

2 Likes

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

4 Likes

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

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

4 Likes

Bump :donut: :coffee:

I love looking at the gifs, so majestic :joy: :nerd_face: :blob_sun:

2 Likes

Stap it :laughing::joy:

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

She’s exaggerating again :smiling_face_with_three_hearts:

1 Like

I couldn’t have done it without you, ilysm it hurts :sob: :heart_eyes: :kissing_heart: :avocado_love: :blob_hearts:

2 Likes

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

2 Likes

:smirk:

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

1 Like

Bump :blob_sun:

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

2 Likes

Bump :purple_heart:

1 Like