Advanced Directing: Overlay Animations

For this section, please refer to the story https://episodeinteractive.com/write/story/Overlay_Animations/1 for Donacode script!

Now you can move overlays around! For any given overlay, you can change any or all of the following:

1. Position (move it around screen)
2. Scale (change the size of it)
3. Opacity (make it see through)
4. Rotation (spin it around)

Furthermore, you can do the above…

1. In any combination (e.g., move something while making it bigger)
2. In any time duration (move something fast or slow)
3. With a number of ‘easing functions’ (e.g. “linear”, “easein” and others… we’ll explain that below.)

Let’s see each of these in action! Important: before we do, we must ‘create’ any overlay not already created by the background. In my example story, this is how I begin and place the car.

@overlay CAR BUG REAR create

@overlay CAR BUG REAR shifts to 140 240

@overlay CAR BUG REAR scales to 0.7 0.7

@overlay CAR BUG REAR opacity 1

Alternatively, I could have added the overlay when I set my background:

EXT. AIRPLANE HANGAR - DAY with CAR BUG REAR 

1. How to Move Overlays

Example of position changes

Nice and easy. Heres the donacode that controls the above:

@overlay CAR BUG REAR shifts to 80 240 in 1.0
@overlay CAR BUG REAR shifts to 80 300 in 1.0
@overlay CAR BUG REAR shifts to 140 240 in 1.0

2. How to Change the Size of Overlays

Example of scale changes

Nice and easy. Heres the donacode that controls the above (the default scale for overlays is 1.0 1.0, or 100% size x and 100% size y):

@overlay CAR BUG REAR scales to 1.4 1.4 in 1.0
@overlay CAR BUG REAR scales to 0.4 1.4 in 1.0
@overlay CAR BUG REAR scales to 0.7 0.7 in 1.0

3. How to Change the Opacity of Overlays

Or, how to change the transparency or see-thru-ness:

Example of opacity changes

Nice and easy. Heres the donacode that controls the above:

@overlay CAR BUG REAR opacity 0.5 in 1.0
@overlay CAR BUG REAR opacity 1 in 1.0

4. How to Rotate Overlays

This one’s tricky. An overlay’s rotation depends on its anchor point. Imagine that the anchor point is where you stick a pin through the overlay; it’s the point about which the overlay spins.

        

Examples of rotation from different anchor points

@overlay CAR BUG REAR rotates 360 anchor point 0 0 in 1

@overlay CAR BUG REAR rotates 360 anchor point 0.5 0.5 in 1

@overlay CAR BUG REAR rotates 360 anchor point 1 1 in 1

By default, the anchor point is established at the bottom-left (x = 0, y = 0) of the square the encompasses the overlay. You can change this with donacode seen above… but beware, changing the anchor point will change the position of the overlay.

Example overlay image and some example anchor points used.

The way you can adjust for the shifting of the overlay is with extra code. In my story, I’ve adjusted the overlay like so for the rotation around 0.5,0.5:

#Overlay size is about 172x156, so I talk half of that (86x78) and shift the overlay that much before rotating.
@overlay CAR BUG REAR shifts to 226 318
@overlay CAR BUG REAR rotates 360 anchor point 0.5 0.5 in 1
# clean-looking reset for the purposes of showing the next rotation.
@overlay CAR BUG REAR opacity 0
@overlay CAR BUG REAR rotates 0 anchor point 0 0
@overlay CAR BUG REAR shifts to 140 240
@overlay CAR BUG REAR opacity 1

5. Combination Animations

You can combine any of the above effects to make really nice overlay movements.

Combining animations with the ‘&’

&overlay CAR BUG REAR shifts to 140 140 in 1
@overlay CAR BUG REAR scales to 0.9 0.9 in 1

4 animations all at once!

&overlay CAR BUG REAR shifts to 80 440 in 4
&overlay CAR BUG REAR rotates -60 anchor point 0 0 in 4
&overlay CAR BUG REAR scales to 0.0 0.0 in 4
@overlay CAR BUG REAR opacity 0.5 in 4

You can also use the “THEN” command in order to string together subsequent animations:

@overlay CAR BUG REAR shifts to 80 240 in 0.5 THEN overlay CAR BUG REAR shifts to 80 300 in 1.5 THEN overlay CAR BUG REAR shifts to 140 240 in 0.1

6. Playing with time duration

Simply use “In [time duration]” to specify the speed of any overlay animation.

3 animations using different time durations.

@overlay CAR BUG REAR shifts to 80 240 in 0.5
@overlay CAR BUG REAR shifts to 80 300 in 1.5
@overlay CAR BUG REAR shifts to 140 240 in 0.1

7. Using Easing Functions

You can add further information to overlay animations to make the movement seem more natural. They’re subtle, but see if you can spot the difference of these easing functions compared to the LINEAR red car:

The red car moves linearly; the blue car moves using ‘easeinout’

@overlay CAR BUG REAR shifts to 0 240 in 1.5 using easeinout
@overlay CAR BUG REAR shifts to 140 240 in 1.5 using easeinout

The red car moves linearly; the blue car moves using ‘easebounceout’

@overlay CAR BUG REAR shifts to 140 60 in 1.5 using easebounceout

These are the available easing functions. If not specified, the “linear” type is used by default.

linear

 

8. Changing the Layer of Overlays

This part’s easy. Want some overlays in front of others?

Changing the layers of overlays

@overlay CAR BUG REAR to layer 2
@overlay CAR ANGLE VINTAGE to layer 1

9. Clearing Overlays

Done with the overlay in your scene? Clear it!  

@overlay CAR BUG REAR clear

10. Looping Overlay Animations

You can even loop a sequence of overlay animations any number of times- up to infinite. You have to use the “THEN” command to string all animations you want together into one line, then use “loop (x) times”.

The following line will have the overlay go left, then right for a total of 3 times:

@overlay CAR BUG REAR shifts to 40 240 in 0.5 THEN overlay CAR BUG REAR shifts to 140 240 in 0.5 loop 3 times

The following line will have the overlay go left, then right for a total of 4 times (once for the animation command + 3 extra times):

&overlay CAR BUG REAR shifts to 40 240 in 0.5 THEN overlay CAR BUG REAR shifts to 140 240 in 0.5 loop INFINITE times

Important: note the use of the ‘&’! If you use an ‘@’ sign, your story will be stuck in an infinite loop. The & allows you to continue with the next line of your story.