Overview

This two-part “Pano2VR” tutorial shows you how to create an animated opener that starts as a Little Planet (Stereographic projection) and, over 10 seconds, ends as a Flat (Rectilinear projection) panorama.

During the transition, a text block fades in and out and disappears at the end of the animation, and a small button that allows you to change the projection type appears.

Note: this tutorial is designed for Pano2VR V7.0.6 . You can download the software here.

Project Background

This tutorial was created in response to a post on the Pano2VR Forum. In it, a developer described having a Little Planet animation as an intro on their website and wanting to add text that fades in and out while the animation is running. The developer also wanted to add a tiny little button to switch between Stereographic and Rectilinear projection.

Honestly, I haven’t done any work using the Animation feature of Pano2VR, so I was interested to see if I could resolve his issues. I learnt several things during the development and thought they might interest the Pano2VR community at large.

Final Output

Final Output from the tutorial below. (view in a new window)

Tutorial Files

The tutorial folder, Flyin-Animation-Tutorial, has an Assets folder with a sample panorama, “uptheriver.jgp”.

There is a Pano2VR project, flyin.p2vr, a flyin-anim.ggsk skin, and an empty Flyin-Output folder. (figure #1)

Download the zipped tutorial folder here.

Tutorial Overview

In Part One of this tutorial, we will modify flyin.p2vr project by;

Creating a Little Planet projection
Creating an Animation
Adding Keyframes to the animation
Adding Variables to the animation

In Part Two we will modify the flyin-anim.ggsk skin by;

Adding Actions, Modifiers, Logic Blocks and Classes to the pre-built skin elements

Start Button
Container to check variable change
Text box for the Title text
Timer to change the Alpha of the Title text
Component Projection button
Rectangle element with Blur

Note: this tutorial assumes a basic knowledge of Pano2VR V7.
Note: Click on any image in the tutorial to enlarge it

Step 1. Creating the Little Planet projection

1. Open the flyin.p2vr project found inside the tutorial folder (figure #2)

2. Output the project

Note: this generates all the required files for output. Currently, the Enter button has no effect as no values are assigned to it.
We will start by defining the initial Little Planet view

3. In the Properties - Project window, click on the Viewing Parameters button and open the Default View panel.
4. Set the values as follows;

Projection: Stereographic
Pan: 0.00˚
Tilt: -60,00˚
FoV: 260.00˚ (figure #3)

Note: These settings will define the following Little Planet projection (figure #4)

4. Save the project as flyin-little-planet.p2vr

Step 2: Creating the flyin animation

Note: in this step we will use the Animation Editor to create a 10 second animation that transitions from the Little Planet to a flat projection.

1. From the Main Menu, select Window > Animation (figure #5)

Note: the Tour Browser is replaced with the Animation Editor and becomes a tab below it. If the 4 tracks (Pan, Tilt, FoV and Projection) on the left of the editor aren’t visible just make the animation editor panel larger. (figure #6)

2. Click on the Green + Add/Duplicate button to add a clip
3. Enter the Clip Title Flyin and select OK (figure #7)

Note: Adding the Clip title does a number of things. It updates the Properties - Animation panel and creates a starting keyframe using the Default Image configurations. (figure #8)

4. Save the project as flyin-anim-setup.p2vr

Note: now we need to create a second keyframe at the end of the animation. We will add settings to this keyframe to specify the rectilinear view.

5. Move the playhead to the end of the timeline
6. Click on the Main Toggle Keyframes button to create a new keyframe (figure #9)

Note: We need to change the projection at the end of the animation to Rectilinear by adding a new projection keyframe.

7. With the playhead at the end of the timeline, click on the Projection Toggle Keyframe to add a new projection keyframe (figure #10)

8. In the Edit Projection Value popup, set Projection Type: Rectilinear and Transition Time: 1.0sec (figure #11)

9. Select OK to add the new projection keyframe (figure #12)

Note: There is an error graphic next to FoV: that on mouse over shows a message, "Parts of this animation track are outside the viewing limits!”.
Just ignore it for now as it will disappear after the next few steps.

10. Hover your mouse over the left-hand side of the new projection keyframe to turn it into a double-ended arrow.
11. Hold the mouse down and drag to the left, and you will see the name of the keyframe, Rectilinear. (figure #13)

Figure #13: Drag out the Rectilinear keyframe

12. Drag the projection keyframe back to the right until the left edge lines up with 00.09 seconds (figure #14)

13. Update the Pan, Tilt and FoV keyframe settings as follows:

Pan: 0.00˚
Tilt: 0,00˚
FoV: 110.00˚

14. Click the Main Toggle Keyframes button to apply the values to the second keyframe. (figure #15)

Figure #15: Animation from Stereographic to Rectilinier

Note: The error graphic has gone, the green and blue timeline paths have changed shape and your project should look like the image above

15. Test the animation by returning the playhead to the start and selecting the play button.
16. Save the project as flyin-anim-keyframes.p2vr

Step 3. Animation Variables

Note: In order to implement certain functions within the skin elements, such as hide the text, show the button, we need to know when the animation is finished.
We can do this by adding variable keyframes to the start and finish of the animation by creating a new track.

1. Set the playhead at the start of the animation

2. Right-click in the tracks and select Add Track > New from the popup (figure #16)

3. In the Add Track popup enter the following settings;

Track Type: Skin Variable
Description: Animation Status
Variable Name: anim_stop
Variable Type: True/False

4. Select OK (figure #17)

Note: a new track, Animation Status, and new keyframe false have been added to the animation (figure #18)

5. Move the playhead to the end of the animation
6. Click on the Animation Status Toggle Keyframe to add a new Animation Status keyframe at the end of the animation (figure #19)

Figure #19: Add second variable keyframe

Note: if we drag the variable keyframe (yellow diamond) to the left we can see that the value of the variable is false

7. Right-click on the Variable Keyframe and select Edit Value
8. Set Value: true and click OK (figure #20)

Figure #20: Updated Variable Keyframe value

Note: now the Variable Keyframe value is equal to true

9. Drag the variable keyframe back to the end of the animation

Note: if you drag too far to the right the timeline will expand. Just drag the keyframe to the 10 second mark and update the duration of the animation in the Properties - Animation > Current Clip > Duration: 10.0 seconds.

10. Save the project as flyin-anim-variables.p2vr

Summary

This brings us to the end of Part One of the tutorial. In Part Two we will add all the skin elements and actions needed to run the animation.

Donations

Hi everyone,

I wanted to thank you for following my tutorials and for your support. I'm so grateful that it has helped you with your Pano2VR development.

If you feel so inclined, I would greatly appreciate any donations you can make to help me continue to create more tutorials.

I'd like to Donate

Thank you for your generosity!

All the Best,

Tony

Intro Animation with Fading Text and a Projection Button - Part One