TIP: Rotating Overlays <(^.^)>

image

:sunflower:Hello Lovelies!:sunflower:

I’ve contemplated posting this thread for some time but noticed quite a few people are having difficulties when it comes to rotating overlays so I thought maybe I’d further explain some things regarding it and provide some stuff. (Not that I’m good at explaining things, I’m quite terrible at it but I tried :relieved::sweat_smile: :woozy_face: Maybe it might be helpful in some way :woman_shrugging:t3:. (I said “might.” :grimacing:)

image

**Explaining rotating overlay code.**




image

If you want to see how all the anchor points I mentioned work/look, you can use this and upload the overlays:

**Anchor Points Template**

#Anchor Points {

EXT. BLUE - DAY
&zoom reset
&overlay ANCHORPOINTBOX create
&overlay ANCHORPOINTBOX opacity 1 in 0
&overlay ANCHORPOINTBOX shifts to 165 292 in zone 1
&overlay ANCHORPOINTBOX scales to 0.227 0.227
&overlay ANCHORPOINTBOX moves to layer 1
&overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
#^notice the rotation code is in the beginning^ You’ll want to put that there for any overlay you intend on rotating.
#Setting the degrees to 0 resets the overlay’s rotation.
#You don’t have to use anchor point 0.5 0.5, you can use whatever anchor point you think works best for your overlay. I’m using 0.5 0.5 for this example so also keep that in mind for why the overlay jumps around when switching to different anchor points since I have set mine to 0.5 0.5 in the beginning.

&overlay TACKDOT create
&overlay TACKDOT opacity 1 in 0
&overlay TACKDOT shifts to 153 277 in zone 1
&overlay TACKDOT scales to 0.100 0.100
&overlay TACKDOT moves to layer 4

@speechbubble is 164 130 to 94%
NARR
These aren’t the only anchor points you can use. These are just the ones I mention.
Also notice which lines stay close to the anchor point so that you can understand how it will spin.

@overlay ANCHORPOINTBOX rotates 360 anchor point 1 0 in 7
NARR
That’s anchor point | bold , color:blue |1 0

@speechbubble is 160 162 to 103%
NARR
Notice where it stopped, that’s actually where it had jumped to when it first began spinning because it is a different anchor point than the one you began with ( 0.5 0.5 )
Meaning the one it was set to in the beginning of the scene.

@overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
NARR
Resetting the overlay.

@overlay ANCHORPOINTBOX rotates 360 anchor point 1 0.5 in 7
NARR
That’s anchor point | bold , color:blue |1 0.5

@overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
NARR
Resetting the overlay.

@overlay ANCHORPOINTBOX rotates 360 anchor point 1 1 in 7
NARR
That’s anchor point | bold , color:blue |1 1

@overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
NARR
Resetting the overlay to show the next one.

@overlay ANCHORPOINTBOX rotates 360 anchor point 0.5 1 in 7
NARR
That’s anchor point| bold , color:blue | 0.5 1

@overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
NARR
Resetting the overlay.

@overlay ANCHORPOINTBOX rotates 360 anchor point 0.5 0.5 in 7
NARR
That’s anchor point| bold , color:blue | 0.5 0.5

@overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
NARR
Resetting the overlay.

@overlay ANCHORPOINTBOX rotates 360 anchor point 0.5 0 in 7
NARR
That’s anchor point| bold , color:blue | 0.5 0

@overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
NARR
Resetting the overlay.

@overlay ANCHORPOINTBOX rotates 360 anchor point 0 0 in 7
NARR
That’s anchor point| bold , color:blue | 0 0

@overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
NARR
Resetting the overlay.

@overlay ANCHORPOINTBOX rotates 360 anchor point 0 0.5 in 7
NARR
That’s anchor point| bold , color:blue | 0 0.5

@overlay ANCHORPOINTBOX rotates 0 anchor point 0.5 0.5 in 0
NARR
Resetting the overlay.

@overlay ANCHORPOINTBOX rotates 360 anchor point 0 1 in 7
NARR
That’s anchor point| bold , color:blue | 0 1
#}

Overlays

Overlay Name: ANCHORPOINTBOX

Overlay Name: TACKDOT

image

If you want to see how the degrees part works, you can use this and upload the overlays. This is only a few examples to get the idea:

**Degrees Template**

#Degrees Template {

EXT. BLUE - DAY
&zoom on 211 280 to 321% in 0

&overlay POINTERARM create
&overlay POINTERARM opacity 1 in 0
&overlay POINTERARM shifts to 196 265 in zone 1
&overlay POINTERARM scales to 0.152 0.152
&overlay POINTERARM moves to layer 3
&overlay POINTERARM rotates 0 anchor point 0.5 0.5 in 0
#^notice the rotation command in the beginning.

&overlay DEGREES create
&overlay DEGREES opacity 1 in 0
&overlay DEGREES shifts to 143 211 in zone 1
&overlay DEGREES scales to 0.189 0.189
&overlay DEGREES moves to layer 2

    NARR

Starting with my overlay’s rotation reset.
#You can start at any degree you want but for this example I’m starting at 0.

@overlay POINTERARM rotates 210 anchor point 0.5 0.5 in 2
NARR
Rotated to 210 °

@overlay POINTERARM rotates 90 anchor point 0.5 0.5 in 2
NARR
Rotated to 90°

@overlay POINTERARM rotates -60 anchor point 0.5 0.5 in 2
#Say that I wanted it to go counter clockwise. I would use a negative number instead, and flip the degrees around. So if I wanted it to go to the 300° degree, I would instead write -60, If I wanted it to go to 270°, I would write -90
NARR
Rotated to 300°. Notice I used -60 to do that.

@overlay POINTERARM rotates 90 anchor point 0.5 0.5 in 1 then overlay POINTERARM rotates -30 anchor point 0.5 0.5 in 1 loop 3 times
#combining
NARR
Combining so that my overlay rotates clockwise to counterclockwise and again.

@overlay POINTERARM rotates 180 anchor point 0.5 0.5 in 1
NARR
Putting the overlay upside down.

@overlay POINTERARM rotates 0 anchor point 0.5 0.5 in 0
#0 degrees resets the overlay’s rotation.
NARR
Resetting the overlay’s rotation.

@overlay POINTERARM rotates 360 anchor point 0.5 0.5 in 1
#Take note that if you rotate an overlay all the way around (360°) when you go to rotate it again it will then start rotating counter clockwise, to avoid this you’d need to reset it.
#To reset it, use the reset code.
#which is setting the degrees to 0.
NARR
Spinning all the way around.

#}

overlays

Overlay Name: POINTERARM

Overlay Name: DEGREES

image

These are the same anchor points I showed in my explanation, but easier to access here.

**Anchor Points**

These are not the only anchor points you can use, refer to Dara’s graph on her thread to create your own.

image

**Guide to practice rotating overlays.**

I will say that you should create a story solely for practicing coding on. Anyhoo :owl: If you want to practice on your own. Start your scene like this:

INT. BACKGROUNDNAME
&zoom reset
&overlay OVERLAYNAME create
&overlay OVERLAYNAME opacity 1 in 0
&overlay OVERLAYNAME rotates 0 anchor point 0.5 0.5 in 0
#notice the rotation command is in the beginning. You can use whatever degree and whatever anchor point you want. Using 0 degrees will keep it at it’s current state. You also don’t need to have “in 0” at the end, I do out of habit.

NARR
Pause

#Then preview your story to see where your overlay is. Use spot directing to shift it to where you need it to start at and then copy and paste the shift, scales and layer to the codes above.

So it should then look like this:

INT. BACKGROUNDNAME
&zoom reset
&overlay OVERLAYNAME create
&overlay OVERLAYNAME opacity 1 in 0
&overlay OVERLAYNAME rotates 0 anchor point 0.5 0.5 in 0
&overlay OVERLAYNAME shifts to # # in zone #
&overlay OVERLAYNAME scales to # #
&overlay OVERLAYNAME moves to layer #

NARR
Pause

#and then whenever you want to rotate the overlay use the rotating command:

#@ or &overlay OVERLAYNAME rotates D# anchor point # # in T

If you’re trying to practice with a scene you’ve already created and already have the overlay in the scene, and you want the overlay to rotate at some point, make sure to add:

&overlay OVERLAYNAME rotates D# anchor point # # in 0 in the beginning. It will automatically shift your overlay to a new spot and therefore you’ll have to replace the shifts code that you currently have in the beginning with a new one.

image

Using more than one limb overlay

(Ignore the white lines around my overlays, I didn’t put in much effort into cutting it out. :clown_face:)

Script & overlays for multiple limb video

EXT. BLUE - DAY
&zoom reset
&overlay BOTTOMS create
&overlay BOTTOMS opacity 1 in 0
&overlay BOTTOMS shifts to 96 95 in zone 1
&overlay BOTTOMS scales to 0.722 0.722
&overlay BOTTOMS moves to layer 0

&overlay BOTTOM1 create
&overlay BOTTOM1 opacity 1 in 0
&overlay BOTTOM1 rotates 0 anchor point 0.5 0.5 in 0
&overlay BOTTOM1 shifts to 226 351 in zone 1
&overlay BOTTOM1 scales to 0.722 0.722
&overlay BOTTOM1 moves to layer 2

&overlay BOTTOM2 create
&overlay BOTTOM2 opacity 1 in 0
&overlay BOTTOM2 rotates 0 anchor point 0.5 1 in 0
&overlay BOTTOM2 shifts to 222 317 in zone 1
&overlay BOTTOM2 scales to 0.722 0.722
&overlay BOTTOM2 moves to layer 1
#Notice I have the rotation codes for both of the overlays I intended on rotating set in the beginning.

@pause for 1
&overlay BOTTOM1 shifts to 198 363 in zone 1 in 1
&overlay BOTTOM1 rotates 45 anchor point 0.5 0.5 in 1
@overlay BOTTOM2 rotates 45 anchor point 0.5 1 in 1 and overlay BOTTOM2 shifts to 173 343 in zone 1 in 1

#NARR
#Pause

@overlay BOTTOM2 to layer -1 and overlay BOTTOM2 shifts to 148 351 in zone 1 in 1 and overlay BOTTOM2 rotates -45 anchor point 0.5 1 in 1

#NARR
#Pause

&overlay BOTTOM1 shifts to 198 363 in zone 1 in 1
&overlay BOTTOM1 rotates 45 anchor point 0.5 0.5 in 1
&overlay BOTTOM2 rotates 45 anchor point 0.5 1 in 1 and overlay BOTTOM2 shifts to 173 343 in zone 1 in 1

#NARR
#Pause
@pause for 1
&overlay BOTTOM2 moves to layer 1 and overlay BOTTOM2 rotates -45 anchor point 0.5 1 in 0.5 and overlay BOTTOM2 shifts to 149 349 in zone 1 in 0.5

#NARR
#Pause

@pause for 1
&overlay BOTTOM1 rotates 0 anchor point 0.5 0.5 in 1
&overlay BOTTOM1 shifts to 226 351 in zone 1 in 1
#When I rotate my overlay I also have to re-shift it to make sure it stays connected to the body. And I time the rotation the same as the shifting.

@overlay BOTTOM2 rotates 0 anchor point 0.5 1 in 1 and overlay BOTTOM2 shifts to 222 317 in zone 1 in 1
#You can also have the rotation and shifts and etc all on the same line like I did here^
#Notice I’m using a different anchor point for BOTTOM2 than BOTTOM1

    NARR
It's a little creepy without the rest of the body.🤦‍♀️

#You can unhashtag all the NARR Pauses to see how it moves step by step and to observe the codes.
#See if you can remake the scene without looking at how I did it or move it yourself the way you want. or don’t but practicing helps!

Overlay Name: BOTTOMS

Overlay Name: BOTTOM1

BOTTOM1

Overlay Name: BOTTOM2

BOTTOM2

Using one limb overlay

image

Script and overlays for one limb video

EXT. CAIRO STREET - DAY
&zoom reset
&overlay EBOD2 create
&overlay EBOD2 opacity 1 in 0
&overlay EBOD2 shifts to 158 336 in zone 1
&overlay EBOD2 scales to 0.861 0.861
&overlay EBOD2 moves to layer 1
&overlay EBOD2 rotates 0 anchor point 0.5 1 in 0
#Notice the rotation command at the beginning.^

&overlay EBOD1 create
&overlay EBOD1 opacity 1 in 0
&overlay EBOD1 shifts to 29 46 in zone 1
&overlay EBOD1 scales to 0.861 0.861
&overlay EBOD1 moves to layer 2

@pause for 3

&overlay EBOD2 rotates 90 anchor point 0.5 1 in 0.5
@overlay EBOD2 shifts to 175 325 in zone 1 in 0.5
#Notice I use the same anchor point as the one I started with in the beginning of the scene and also I have to re-shift the spot of my overlay in the same amount of time that it takes to rotate it to make sure it stays connected to the body.
@pause for 3

&overlay EBOD2 rotates 0 anchor point 0.5 1 in 1
@overlay EBOD2 shifts to 158 336 in zone 1 in 1

@pause for 5

    NARR
Pause

#If you want, try to remake it yourself without looking at how I did it.

Overlay Name: EBOD1

Overlay Name: EBOD2

EBOD2
By the way, this isn’t a real character in any of my stories. Just had to throw that out there. Lol

image

Using Magic Effect

image

Script & overlay for magic effect video

EXT. TROPICAL BEACH - NIGHT
&zoom reset
&cut to zone 2
&PERSON1 spot 0.801 114 163 in zone 3 at layer 1 and PERSON1 faces left
&overlay MAGICBALL create
&overlay MAGICBALL opacity 1 in 0
&overlay MAGICBALL shifts to 176 264 in zone 3
&overlay MAGICBALL scales to 0.166 0.166
&overlay MAGICBALL moves to layer 4
&overlay MAGICBALL rotates 0 anchor point 0.5 0.5 in 0

@pause for 0.1
&PERSON1 walks to spot 0.801 78 167 in zone 2 in 3 and PERSON1 does it while run_super_speed_loop then PERSON1 starts fall
&overlay MAGICBALL rotates 360 anchor point 0.5 0.5 in 3 then overlay MAGICBALL rotates 0 anchor point 0.5 0.5 in 0 loop infinite times
@pause for 2 then overlay MAGICBALL shifts to 86 201 in zone 2 in 1 then overlay MAGICBALL shifts to 68 197 in zone 2 in 0 and overlay MAGICBALL scales to 0.202 0.202 in 0 and overlay MAGICBALL opacity 0 in 0.5

    NARR
Pause

Overlay Name: MAGICBALL

image

Dara’s thread on overlays and link to her helpful website.

Placing & Animating Overlays
^On this thread you will find:

  • How to add overlays to the scene
  • How to duplicate overlays
  • How to shift overlays
  • How to scale overlays
  • How to change an overlay’s opacity
  • How to layer overlays
  • How to rotate overlays
  • How to combine overlay animations
  • How to remove overlays from the scene
  • How to create text from overlays
  • How to loop overlays

Also check her website as well,
https://www.dara-amarie.com/overlays-guide

Tappable overlays

A Basic Guide to Tappable Overlays
^This includes:

  • Basic tappable overlays
  • Pannable tappable overlays
  • Text overlays
Timed Tappable Choice

HOW TO: TIMED TAPPABLE choice
^ This includes:

  • How to make a tappable timed choice
  • How to position the timer for a timed choice
Using easing functions with overlays

HOW TO: Use Easing Functions :disco:

How to loop gif overlays infinitely

HOW TO: animate GIF in INFINITE LOOP

How to loop backgrounds

Horizontal looping:
🏔 HOW TO: Loop your own Background
Looping a 3-zone Background with Speeds

Vertical looping:
HOW TO: Loop background VERTICALY

How to stick overlay to the screen

image

To stick overlays to the screen, instead of using @ or &overlay you would use @ or &ui

Ex:
&ui OVERLAYNAME create
&ui OVERLAYNAME opacity 1 in 0
&ui OVERLAYNAME shifts to # # in zone 1
&ui OVERLAYNAME scales to # #
&ui OVERLAYNAME to layer #

Make sure that if you’ve set it as a ui in the scene then if you were to code it to move or change it’s opacity or whatever, you would use “ui” to command it.

Even to remove it,
&ui OVERLAYNAME clear
or to remove all ui overlays:
&clearall ui

Script and overlay for the sniper video.

EXT. DUPRES PALACE FOUNTAIN - NIGHT
&zoom on 104 568 to 443% in 0
&PERSON1 spot 0.266 20 432 in zone 1 at layer 3 and PERSON1 faces right

&ui SNIPER create
&ui SNIPER opacity 1 in 0
&ui SNIPER shifts to -261 -514 in zone 1
&ui SNIPER scales to 2.525 2.525
&ui SNIPER moves to layer 4

@transition fade in black in 3
@zoom on 10 568 to 321% in 2
&zoom on 12 302 to 321% in 3 then zoom on 169 302 to 321% in 2 then zoom on 232 301 to 321% in 2
@PERSON1 walks to spot 0.266 205 428 in zone 1 in 7 then PERSON1 starts yawn_bored
@pause for 5

NARR
Pause

overlay used

Overlay Name: SNIPER

Also thanks to @Martini_98 for sharing a link so I could provide gifs. Check out her cool night to day scene using overlays: How to: cool night to day scene Better yet, try and make one yourself :smiling_imp:

image

26 Likes

Bookmarked! This will be helpful for an idea I have for an intro:)

1 Like

i didnt understand since i suck at coding but yea i love this! it’s very helpful for the ones who can understand :eyes::sparkling_heart:

1 Like

bookmarked this is amazing !

& yes, you are good at explaining things hehe

1 Like

Ooh :open_mouth: yess, I love me some animated intros :heart_eyes: don’t forget to check out the general info category, there’s a few helpful resources that can further assist you with animating overlays! :llama:

1 Like

Aww well thanks for the love anyways :heart::sunflower: let me know if there’s something I can help you with.

1 Like

Aw thank you! :heart:

lol :sneezing_face: thank you! My mission was for at least one person to understand and find something helpful on here. :sweat_smile: lol

2 Likes

lollll yes that’s a good mission totally understand cause i suck at explaining :joy: :stuck_out_tongue: :sob: :sob:

1 Like

Amazing thread :fist_bump: I always recommend if you are going to have your overlay spin in a circle set the rotation :nerd_face: :cherry_blossom:

1 Like

Thank you so much you don’t know how much this helps :sob: :heart:

1 Like

Bump :sunflower:

"The key to being happy is knowing you have the power to choose what to accept and what to let go." Dodinksy

1 Like

Bump :butterfly: :clapping: :party_time:

1 Like

bump!

this is so helpful thank youuu <3

1 Like

Bump :butterfly:

If you cant fly then run, if you cant run then walk, if you cant walk then crawl, but whatever you do, you have to keep moving forward. -Martin Luther King, Jr

1 Like

thank you this is so helpful :pleading_face: :heart_decoration:

1 Like

Hi, how can I rotate this image, please


So that it fits the right way for a character facing right and doing the idle_box_carry_neutral animation?

I have used almost every anchor point but all it does, is make it look like the character is about to drop the tray. :joy:

Lol Hello, for something like that I would just flip the image, you do this by putting a negative sign right before the first number of scales. So if the scales code is for an example:

&overlay TRAY scales to 1.000 1.000
Then you would instead do:
&overlay TRAY scales to -1.000 1.000

1 Like

All that did is have the tray upside down and the food facing the ground.

1 Like

Um it shouldn’t have, did you only put a negative sign right before the first number of scales only? Because doing it before the first number will make it flip horizontally but doing it with the 2nd number will make it flip upside down.

2 Likes

LOL my bad I accidently did it twice, it’s now worked, thanks.

2 Likes