Turning GIFs into OVERLAYS [GUIDE]

gif

#1

Hello! I’m Turtle Trainer and I’ll be sharing a really cool technique I’ve learned! It’s turning gifs into overlays. With this way, you can make (simplest example) animated fires!

In this thread I’ll cover how to create a beautiful fire using a gif!

I’ve found and chosen my gif already:
23958359

Now, I need to split the frames so I can upload them as an image. I’m not going to give you any site links as I don’t want to advertise. Simply type in “gifs to frames” in Google.

Here are the images I have:

fire1
fire2
fire3

It should look something like this. Now I’m going to upload these as overlays. And, for the love of whatever you believe in, please do not upload more than 15 :woman_facepalming:. Have some mercy for approval team.


Perfect! I’ve uploaded all my overlays!

Now it’s time for coding!

As usual, I start with my background!

INT. PHOEBE ROOM - DAY with PHOEBE OLD BED to 1.144 -126 -78 in zone 2 at layer 3 with PHOEBE DRAWER to 0.838 -200 51 in zone 2 at layer 1

Alrighty! I’ve finished coding my background overlays, now let’s cut to zone. zoom reset and place characters!
catwoman

INT. PHOEBE ROOM - DAY with PHOEBE OLD BED to 1.144 -126 -78 in zone 2 at layer 3 with PHOEBE DRAWER to 0.838 -200 51 in zone 2 at layer 1
&zoom reset
@cut to zone 1
&PHOEBE moves to layer 4 AND LUCIFER moves to layer 4
&PHOEBE spot 1.046 205 100 in zone 2 AND PHOEBE faces right AND PHOEBE is idle_awkward_scratch_loop AND LUCIFER spot 1.091 286 105 AND LUCIFER faces left AND LUCIFER is idle_armscrossed_neutral_loop

Everything is going purr-fect! Now, it’s time for animated gifs!

As you know, we create overlays using “@overlay OVERLAYNAME create” command. But, for them to actually show up in previewer, we need to add the scale, position and opacity too. (For details visit here: A Guide to Using & Animating OVERLAYS)

Now let’s create the overlays!

&overlay OVERLAYNAME create THEN overlay OVERLAYNAME shifts to # # THEN overlay OVERLAYNAME scales to #### #### THEN overlay OVERLAYNAME opacity 1 in 0

Amazing! We’ve created the first overlay, but now what? We’re going to pause for 0.1 to give that animated feeling!

“&overlay OVERLAYNAME create THEN overlay OVERLAYNAME shifts to # # THEN overlay OVERLAYNAME scales to #### #### THEN overlay OVERLAYNAME opacity 1 in 0 THEN overlay OVERLAYNAME opacity 1 in 0.1

The reason why I used "overlay OVERLAYNAME opacity 1 in 0.1 is that, I cannot use the pause command, if I do, it won’t loop. So I can basically use opacity 1 in 0.1 if I’m using opacity, shifts to 0 0 in 0.1 if I’m shifting and scales to 1.000 1.00 in 0.1 if I’m scaling.

Amazinggggggg! :grinning: Now, we need to create the second overlay! And lower the opacity of the first one!

"&overlay OVERLAYNAME create THEN overlay OVERLAYNAME shifts to # # THEN overlay OVERLAYNAME scales to #### #### THEN overlay OVERLAYNAME opacity 1 in 0 THEN overlay OVERLAY NAME opacity 1 in 0.1 THEN overlay OVERLAYNAME opacity 0 in 0 overlay OVERLAYNAME create THEN overlay OVERLAYNAME shifts to # # THEN overlay OVERLAYNAME scales to #### #### THEN overlay OVERLAYNAME opacity 1 in 0 "

Now, we just need to keep doing this! Clear the previous overlay, create a new overlay. You can use the code above as a template!

If you want to loop the animation, you need to create the overlays with the background then use the code, of course delete the create commands.


Want to make a overlay animation (GIF)? Here for tips
Moving Fire Overlay Help!
Does anyone know how to add gifs to episode stories
Animating overlays of charaters! [A GUIDE]
#2

Feel free to correct me on my grammar/directing mistakes! Don’t forget to help others! :wink:


#3

Nice work. Thank you for sharing.
I find it easier to do the effect with opacity and loopings, though.

<3


#4

For lopping, you just need to add in the end of the line “loop x times” (x for number of times) or “loop INFINITE times” (for unlimited times)


#5

Sadly, it says “Looping can be only used with overlay animations” I’m still not quiet sure why it happens. :thinking:


#6

I’m not sure why, check your code


#7

But that’s what you’re doing… :thinking:


#8

The loop command has beeing acting weird lately. It doesn’t want to work with “AND” or sometimes “THEN” :pensive:

I tried submitting a ticket but of course the support people were no use.


#9

Awh, dang. I guess no looping for us today. :frowning:


#10

May I ask why you’re clearing the overlay instead of just changing its opacity to 0?


#11

There’s not a reason behind it, just don’t like excessive stuff, but it’s better to change the opacity, I’ll include that too.


#12

Ok. I was just asking out of curiosity though. :upside_down_face:

<3


#13

Bumping!


#14

Haha. Did the thread help you? :smiley:


#15

Yes! It did, although, I’m a really lazy person, so I probably won’t use it until I feel motivated to write haha. This thread should be famous! Okay maybe not famous, but it should be well known throughout the community, It could help so many writers that are in need of help with these types of coding :smiley:


#16

Please close this thread :slight_smile: @Ryan


#17

#18

#19

Bump and reminder that you can add the overlays to backgrounds instead creating them :heart:


#20

Do you have a template?