Some time ago after seeing many authors use a simple Episode loading screen splash background with their own characters on it, I thought to myself whether the same screens but with included animation were a thing. I went around and searched for it in many places, eventually without success of finding anything. That’s when I came up with the idea of creating a code of an animated loading screen, where not only the texts and progress bar, but also the characters could animate (because I’m extra like that). It took me quite some time to figure everything out as well as create my own overlays to make this possible.
Here I am to share a prideful creation of mine, the animated loading screen.
First, here’s a little preview / example of how this looks like:
NOTE: If you are unfamiliar with advanced directing or simply want a base to work on with, I have uploaded my own script templates and essential overlays for animated loading screens, which you can find here. I have also included the link to a detailed instruction guide in the same document to help you get started.
––––––––
If you do use any of these templates, or generally any other templates of mine, please be sure to leave credit. ('Cause I worked my butt off real hard for these, okay?!)
Now, let’s move onto the actual coding. I started planning the script by focusing on the loading bar and text overlays first. Here’s an example:
(1)
INT. LS BG EPISODE with LS BAR EMPTY to 1 0 0 at layer 1 with LS BAR PROGRESS to 1 0 0 at layer 2 with TXT01 to 1 350 0 at layer 0 with TXT02 to 1 350 0 at layer 0 with TXT03 to 1 350 0 at layer 0
This example includes three different texts, which divides it into three sections.
Right below, I transformed the loading bar progress overlay in order to make it appear as if it’s loading as the text moves:
(2)
&overlay LS BAR PROGRESS scales to 0 1
This makes the bar invisible at the beginning.
Now, depending on the amount of sections (used texts) you want, you divide the bar’s original x-scale component by that amount. In this case, it’s three texts, so it’s 1 divided by 3. In the same line, I’m including the command to move the texts on screen:
(3)
&overlay LS BAR PROGRESS scales to .334 1 in 4.5 AND overlay TXT01 shifts to 0 0 in .3
@pause for 4.5
&overlay LS BAR PROGRESS scales to .668 1 in 4.5 AND overlay TXT01 shifts to -350 0 in .3 AND overlay TXT02 shifts to 0 0 in .3
@pause for 4.5
&overlay LS BAR PROGRESS scales to 1 1 in 4.5 AND overlay TXT02 shifts to -350 0 in .3 AND overlay TXT03 shifts to 0 0 in .3
@pause for 4.5
&overlay TXT03 shifts to -350 0 in .3
@pause for 4.5
The 0.334 value is an approximate result when dividing 1 by 3.
Once that’s set, you can move onto the fun part – the characters. Say I want five characters to display on this loading screen, so I position, layer, face and animate them first:
(4)
&CHARACTER1 spot .605 50 90 AND CHARACTER1 moves to layer -3 AND CHARACTER1 faces right AND CHARACTER1 is shiftweight
&CHARACTER2 spot .655 100 90 AND CHARACTER2 moves to layer -4 AND CHARACTER2 faces right AND CHARACTER2 is shiftweight
&CHARACTER3 spot .615 155 90 AND CHARACTER3 moves to layer -1 AND CHARACTER3 faces left AND CHARACTER3 is idle_happy
&CHARACTER4 spot .62 215 90 AND CHARACTER4 moves to layer -2 AND CHARACTER4 faces right AND CHARACTER4 is arms_crossed_angry
&CHARACTER5 spot .65 265 90 AND CHARACTER5 moves to layer -5 AND CHARACTER5 faces left AND CHARACTER5 is arms_crossed_angry
I use negative layers in order to make layering easier as I don’t want the characters to conflict with the overlays. Personal preference here.
Then, you can change the outfits you want them to wear:
(5)
@CHARACTER1 changes into OUTFIT1
@CHARACTER2 changes into OUTFIT2
@CHARACTER3 changes into OUTFIT3
@CHARACTER4 changes into OUTFIT4
@CHARACTER5 changes into OUTFIT5
Finally, you can work on different character animations for each text display:
(6)
For the first text:
&CHARACTER1 is shush
&CHARACTER2 is flirt_wink_forward
&CHARACTER3 is flirt_wink
&CHARACTER4 is talk_angry
&CHARACTER5 is talk_apathetic
For the second text:
&CHARACTER1 is dance_drop_it
&CHARACTER2 is play_bass_smooth_loop
&CHARACTER3 is dance_salsa
&CHARACTER4 is dance_hands_up_loop
&CHARACTER5 is head_bob
For the third text:
&CHARACTER1 is disappointed
&CHARACTER2 is selfie
&CHARACTER3 is talk_film_phone_happy
&CHARACTER4 is strike_a_pose
&CHARACTER5 is paparazzi_take_photo
There you have it!
I know it’s likely not a big thing, but ever since I posted an example on my Instagram profile, I have been getting a lot of requests to create a post/tutorial based on those loading screens. Once I posted it there, I thought why not move it to the official forums as well?
Also, I hope I wasn’t too confusing with this whole post because I still find it quite difficult to find the right way to explain this, especially to those who aren’t familiar with such directing. If you’re still confused about anything, check the linked document under the “NOTE” at the beginning of this post for detailed instructions first, and if you still have any issues using my templates or understanding the concept, you can feel free to post below or contact me on Instagram. I will be happy to help.