Phone Thingy in Episode

Oookay, so, you need to upload the image of your phone as an overlay, and then we get to coding the phone to move from offscreen to screen center and then ‘zoom’ into it.

What you need to do:

1.
Add “@overlay (insert your overlay name) create” and “@overlay (insert your overlay name) opacity 1” to your script. This ensures your overlay is implemented into your story and visible.

2.
Drag your overlay to the position you’d like it to be directly before zooming in. (In the web previewer, you click on Spot Directing and then Change Overlay until the box underneath the previewer contains the name of your overlay. Then, you can switch between Move and Scale to drag the phone to the exact position and size you want it to be.) Now you note down the info within the little box underneath the web previewer, it should look somewhat like this:

@overlay XXXXXXXXXXX_OVERLAY NAME shifts to 0 0 in zone 1
@overlay XXXXXXXXXXX_OVERLAY NAME scales to 1.000 1.000

You copy that into your script, changing the first @-symbol to a &-symbol to make sure that both of the steps happen at the same time.

3.
Then, you drag the overlay all the way down until it’s not visible anymore, make sure you only move it down, not to the sides though (the first coordinate should remain the same). Copy the info in the box again, then add it to your script right before what you added in the last step (don’t forget to change the first @-symbol into a &-symbol again!).

4.
Now, you scale the overlay all the way up so it fills your screen to the extent you wished for. Make sure it’s as central as possible.

Copy the info inside the box into your script once again, this time after what you added in step one and two. Again, don’t forget the &-symbol.

5.

After all is done, your script should look somewhat like this:

@overlay PHONE create
@overlay PHONE opacity 1

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X
@overlay XXXXXXXXXXX_PHONE scales to X X

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X
@overlay XXXXXXXXXXX_PHONE scales to X X

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X
@overlay XXXXXXXXXXX_PHONE scales to X X

6.
Now, adjust the time the animations shall take (I recommend 1 second).
After the second and last pair, you now add an “in (insert time in seconds)” for both shift and scale. It should now look like this:

@overlay PHONE create
@overlay PHONE opacity 1

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X
@overlay XXXXXXXXXXX_PHONE scales to X X

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X in (amount of seconds)
@overlay XXXXXXXXXXX_PHONE scales to X X in (amount of seconds)

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X in (amount of seconds)
@overlay XXXXXXXXXXX_PHONE scales to X X in (amount of seconds)

And that should be it!

However, if you want the animations to look a little smoother, you can try using easing functions. You can read all about them here: HOW TO: Use Easing Functions :disco:
If you want to take the easy path, however, I’d recommend you to use ‘easeout’ for both animations.

To do that, all you need to do is add a ‘using easeout’ after every second amount you added in the last step.

All put together, a script could look like this:

@overlay PHONE create
@overlay PHONE opacity 1

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X
@overlay XXXXXXXXXXX_PHONE scales to X X

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X in 1 using easeout
@overlay XXXXXXXXXXX_PHONE scales to X X in 1 using easeout

&overlay XXXXXXXXXXX_PHONE shifts to X X in zone X in 1 using easeout
@overlay XXXXXXXXXXX_PHONE scales to X X in 1 using easeout

Kind regards,
Sigma :wolf:

2 Likes