Overview
This is part two of the “Pano2VR” tutorial, which shows you how to create an animated opener that starts as a little planet (stereographic) and, over 10 seconds, ends as a flat (rectilinear) 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.
If you haven’t completed Part One you can find it here
Final Output
Final Output from the tutorial below.
Tutorial Overview
In part one of this tutorial, we modified the flyin-anim.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
Note: this tutorial assumes a basic knowledge of Pano2VR V7.
Note: Click on any image in the tutorial to enlarge it
Step 1. Setting up the Skin
1. From the tutorial folder, open the flyin-anim-variables.p2vr created in Part One. (figure #1)
Figure #1: Final project file from Part One
2. Click on the Edit Skin button
Note: You will see a notification informing us that a Custom Property has been added to the skin.
This is the Animation Status Variable Keyframe created in Part One (figure #2)
Figure #2: Notification
3. Select OK to open the skin
Figure #4: Skin with anim_stop Keyframe Variable
Note: the tutorial skin has all of the components we need to create our final result (figure #5)
Figure #5: Skin components
Note: However, we need to add in all of the Actions/Logic etc to make it all work.
Step 2. The Start Button
1. Click on the txt_enter element to make it active
2. Open the Properties > Actions panel
3. Double-click in a blank Action field to open the Action Settings window and add the following properties
Source: Mouse Click
Action: Auto Rotate
Type: Start Auto Rotation
Speed: 0.00˚/Frame
Delay: Default
Return to Horizon: Default
4. Select OK to add the Action (figure #6)
Figure #6: Start Button Actions
5. Save the skin as flyin-anim-1.ggsk
6. Close the skin
5. In the Project window, open the Properties > Web Output > Auto Rotation & Animation panel and check Animation (figure #7)
Figure #7: Check Animation
Note: only check Animation not Auto Rotation
6. Save the Project
7. Publish the project
Note: clicking on the “Enter” button will start the flyin and loop when it gets to the end. Refresh the page to stop the loop.
Step 3. Stopping the Auto Rotate
Note: We will use the Variable Keyframe True to stop the Auto Rotate at the end of the animation.
When the animation starts the variable anim_stop = false but at the end of the animation it changes to = true. By adding an action to a container we can detect the change and use it to stop the Auto Rotate.
1. Open the skin if it’s not already open
2. Click on the cnt_var_change element to make it active
3. Open the Properties > Actions panel
4. Double-click in a blank Action field to open the Action Settings window and add the following properties
Source: Variable Changed
Variable: anim_stop
Action: Auto Rotate
Type: Stop Auto Rotate
5. Select OK to add the Action (figure #8)
Figure #8: Variable Changed Action
4. Save the project as flyin-anim-2.p2vr
5. Close the skin
6. Publish the project
Note: clicking on the “Enter” button will start the flyin and now the animation will stop at the end and not loop. If you move the panorama now you can see that its projection is Rectilinear.
Step 4: Creating the Fading Text Effect
Note: In order to create the fading text effect we will need to modify two elements in the skin, the txt_title_fading and the tmr_title_fade.
1. Open the skin if it’s not already open
2. Click on the txt_title_fading element to make it active
Note: we only want the text to be seen while the animation is active, so we will add a Logic Block to the element visibility that hides the element if the keyframe variable is false.
3. Open the Properties > Appearance panel and add a Visible Logic Block with the following properties
Trigger: *anim_stop
Comparison: =
Value: True
Visible: false
4. Select OK to add the Action (figure #9)
Figure #9: Visible Logic Block
Note: the Alpha setting on the txt_title_fading element is set at 0.000 so we will use the tmr_title_fade to change it to 1.000 and then back to 0.000 over the course of the animation.
5. Click on the tmr_title_fade element to make it active
6. Open the Properties > Timer panel
Note: the timer properties are already set to Manual and Toggle so we only need to add Actions for the Activate and Deactivate states.
7. Open the Properties > Actions panel
8. Double-click in a blank Action field to open the Action Settings window and add the following properties
Source: Activate
Action: Alpha
Type: Change Element Alpha
Alpha: 1.000
Transition Duration: 1.000sec
Easing Function: Ease Out
Delay: 0.000sec
Target: txt_title_fading
9. Select OK to add the Action
Note: the two actions are very similar and only have two different settings changes, the Source and the Alpha.
10. Right-click on the first Action (Active) and select Copy
11. Right-click in the empty Action and select Paste
12. Double-click the new Action to open it and change the following;
Source: Deactivate
Alpha: 0.000
13. Select OK to update the copied Action (figure #10)
Figure #10: Timer Actions
Note: now we need to trigger the timer to start…
14. Click on the txt_enter element to make it active
15. Open the Properties > Actions panel
16. Double-click in a blank Action field to open the Action Settings window and add the following properties;
Source: Mouse Click
Action: Set Value
Value: 1.5
Target: tmr_title_fade
Parameter: Timeout (seconds)
17. Click OK to add the new Action (figure #11)
Figure #11: Trigger Timer with Value
Note: …and to trigger the timer to stop
18. Click on the cnt_var_change element to make it active
19. Right-click on the first Action and select copy
20. Right-click in the empty Action and select Paste
21. Double-click the new Action to open it and change the following;
Source: Variable Changed
Variable: anim_stop
Action: Set Value
Value: 0
Target: tmr_title_fade
Parameter: Timeout (seconds)
22. Click OK to update the copied Action (figure #12)
Figure #12: Node Changed Timer Stop
16. Save the project as flyin-anim-3.p2vr
17. Close the skin
18. Publish the project
Note: clicking on the “Enter” button will start the flyin and the text will fade in and out. At the end of the animation the text is hidden and the timer stopped.
Step 5. Configure the Projection Button
1. Open the skin if it’s not already open
2. Click on the cnt_projection_buttons element to make it active
Note: At the animation's finish, the Projection button will appear. The button has two actions: changing the view from Flat to Little Planet and vice versa. Rather than use the Type = Projections, which will not give precise control over the view we will use Move to View and set specific parameters for the final view including projections.
We need to hide the Projection Button when the animation is playing and then apply two Actions to the button to open the different views
3. Open the Properties > Appearance panel
4. Check Visible
5. Add a new Alpha Logic Block with the following properties
Trigger: *anim_stop
Comparison: =
Value: false
Alpha: 0.000
Note: These two settings make the container visible but only when the animation has finished (figure #13)
Figure #13: Visible Checked and Alpha Logic Block added
6. Open the Properties > Actions panel
7. Double-click in a blank Action field to open the Action Settings window and add the following properties;
Source: Mouse Click
Variable: View
Type: Move to View
Note: the view values will match the original default view values
Pan: 0.00
Tilt: -60.00
FoV: 260.00
Speed: 1.00
Projection: Stereographic
Easing Function: Ease Out
Note: we only want this action to occur when the current screen projection is Rectilinear so we will add a modifier to the Action.
8. Click on the Modifier button in the Action Settings window to open the Action Filter window
9. Add the following properties:
Trigger: Projection (found under View)
Comparison: =
Value: Rectilinear (figure #14)
10. Click OK to apply the Action Filter
11. Click OK to add the Action (figure #14)
Figure #14: New Stereographic Move to View Action
Note: now we need another Action to change back to Rectinilear
12. Right-click on the first Action and select copy
13. Right-click in the empty Action and select Paste
14. Double-click the new Action to open it and change the following;
Note: the view values will match the original rectilinear view values
Tilt: 0.00
FoV: 110.00
Projection: Rectilinear
15. Click on the Modifer button and update the following settings:
Projection: Stereographic
16. Click OK to update the Action Filter
17. Click OK to update the Action (figure #15)
Figure #15: New Rectilinear Move to View Action
Note: this button will now allow us to move between a Little Planet and Rectilinear view. To make the UI more effective we will add text to the tooltip as a prompt for the change.
18. Click on the down arrow next to the cnt_projection_buttons element to reveal the contents of the container
19. Select the tt_projection element and
20. Open the Properties > Text panel
21. Add a new Text Logic Block with the following parameters:
Trigger: Projection
Comparison: =
Value: Rectilinear
Text: Change to Stereographic
Note: we need the alternate text to change to Rectilinear
22. Click on the Green + button to add a new trigger and add the following parameters:
Trigger: Projection
Comparison: =
Value: Stereographic
Text: Change to Rectilinear
23. Click OK to create the Action Filter (figure #16)
Figure #16: New Text Logic Block
24. Save the skin as flyin-anim-4.ggsk
25. Close the skin
26. Publish the project
Note: clicking on the “Enter” button will start the flyin, the text will fade in and out. At the end of the animation the projection button is displayed. Mouse over the button reveals the tooltip and clicking on the button changes the projection,
Step 6. Configure the Blur Screen
1. Open the skin if it’s not already open
2. Click on the rct_blur_bg element to make it active
Note: In order to stop any interaction with the panorama until the end of the animation we need to enable an element that will prevent any interaction with the panorama. At the same time we can use the element to apply an effect to the initial screen.
3. Open the Properties > Rectangle panel
4. Check Background: Enabled
5. Click in the Black color swatch to open the Select Color window
6. Set the Alpha Channel to 10 and select OK to update the color
7. Open the Properties > Advanced panel and uncheck Permeable
Note: this will stop any mouse click passing through the element
8. In the CSS Classes field, enter the words blur10 (figure #17)
Figure #17: Add second variable keyframe
Note: this will apply a class to the element that will blur the underlying panorama.
In the element code_element_blur there are several versions of the blur class allowing different levels of blur intensity. (figure #18)
Figure #18: Code Element with Blur classes
14. Save the project as flyin-anim-5.p2vr
15. Close the skin
16. Publish the project
Note: The background panorama is now blurred and there is no interaction with the underlying panorama. The “Enter” button is clearly visible and if you click on it the animation will start but the blur does not go away.
In the final step we will remove the blur on start and hide the element completely at the end of the animation to allow interaction with the panorama
Step 7. Finalise the Project
Note: In these final step we will create a new global variable that will hide the Enter button and remove the blur feature when the Enter button is clicked.
We will retain the mouse click block but hide the blur element at the end of the animation to allow access to the panorama
1. Open the skin if it’s not already open
2. Click the eye icon next to rct_blur_bg in the Tree. (figure #19)
Figure #19:
Note: this hides the element in the canvas allows us to click on the canvas bg and display the skin Properties.
3. Click on the canvas background and open the Properties > Variables panel
4. Double-click in the first frame of a blank Variable field and add the following properties;
Name: vis_enter
Type: True/False
Init Value: false
Note: this new variable will allow us to hide the Enter button and disable the blur10 class (figure #20)
Figure #20: New Variable
5. Click on the txt_enter element to make it active
6. Open the Properties > Appearance panel
7. Add a new Visible Logic Block with the following properties
Trigger: *vis_enter
Comparison: =
Value: true
Visible: false
8. Select OK to add the new Logic Block (figure #21)
Figure #21: New Visible Logic Block
9. Open the Properties > Actions panel
10. Double-click in an empty field to open the Action Settings window
11. Enter the following settings;
Source: Mouse Click
Action: Set Variable Value
Variable Name: vis_enter
Operation: Set(=)
Value: true
12. Select OK to add the new Action (figure #22)
Figure #22: New Action
13. Click on the rct_blur_bg element to make it active
14. Open the Properties > Advanced panel
15. Add a new CSS Classes Logic Block with the following properties
Trigger: *vis_enter
Comparison: =
Value: true
CSS Classes: [leave blank]
16. Select OK to add the new CSS Logic Block
Note: when the variable *vis_enter is true the blur10 will be replaced (figure #23)
Figure #23: New CSS Classes Logic Block
14. Save the project as flyin-anim-final.p2vr
15. Close the skin
16. Publish the project
Note: The background panorama is now blurred and there is no interaction with the underlying panorama. The “Enter” button is clearly visible and if you click on it the animation will start and the Enter button disappears and the blur is removed.
At the end of the animation the panorama can be interacted with.
Summary
This brings us to the end of Part Two and the end of the tutorial.
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
