Skip to main content

Skin Actions

You can apply actions or a set of directions for any element added to the skin to create interactivity.

The actions are found in the Properties section of the Skin Editor for each element.

Expert Mode is found in most actions and allows manual entry of certain properties.

When setting a Target, the targeted element will highlight in the Canvas. Hovering your mouse over the target field in the Actions properties panel will also highlight the targeted element.

Settings

Double-click in the Actions area or hit the plus sign to the right to open the Action Settings.

img

Source – Choose which event will cause the action to occur.

Action – Choose what will happen when the event occurs. For instance, if Pressed and Pan Left are chosen for a button’s action, and a user clicks on that button and holds down the mouse button, the panorama will pan left.

Depending on which action is chosen, different parameters that are associated with that action will appear. For example, for the pan actions, you can define the pan speed.

Pan

This action is commonly used on buttons that have an arrow indicating left or right. Applying this action to an interactive button or image will cause the panorama to rotate to the left or right.

Direction – Panning is the horizontal rotation, therefore you can only choose from Left or Right directions.

Speed – When you add a pan action, you get the option to adjust how fast or slow the pan will be. The speed is determined by a rate of degrees per frame.
✭ Entering the number, .40, will cause the panorama to rotate at a rate of four tenths of a degree per frame.

Tilt

This action is commonly used for buttons; especially ones that use an arrow indicating up or down. Applying this action to an interactive button or image will cause the panorama to tilt up or down.

Direction – Tilt is the vertical rotation, therefore you can only choose from Up or Down.

Speed – When you add this action, you get the option to adjust how fast or slow the panorama will tilt. The speed is determined by a rate of degrees per frame.
✭ Entering the number, .40, will cause the panorama to rotate at a rate of four tenths of a degree per frame.

Zoom

When this action is applied to an interactive button or image, the panorama will narrow or broaden its field of view respectively.

Direction – Choose to zoom In or Out.

Speed – When you add this action, you get the option to adjust how fast or slow the panorama will zoom in or out. The speed is determined by a rate of degrees per frame.
✭ Entering the number, .40, will cause the panorama to zoom at a rate of four tenths of a degree per frame.

Change Viewstate

An action for Object2VR only.

Player Settings

Change Viewer Mode

This action changes between continuous and drag modes in Pano2VR.

Mode – Choose a mode:

  • Drag Mode – Changes the viewer to drag mode where the user clicks and drags to move the panorama. (Expert: 0)

  • Continuous Mode – Change the viewer to continuous mode where the panorama will constantly spin so long the mouse button is pressed. (1)

  • Toggle Modes – This will toggle between the two modes. (2)

Change Polygon Mode

Use this action to have an element in the skin change how polygon hotspots appear.

For Show One, Hide One and Toggle One you will need to enter the hotspot’s ID to target it.

Mode – Select a Polygon Hotspot Mode:

  • Always Hidden (Expert: 0)

  • Always Visible (1)

  • Show Current (on hover) (2)

  • Show All (on hover) (3)

  • Disabled (-1)

  • Show One (4)

  • Hide One (5)

  • Toggle One (6)

Change Polygon Color

Use this action to change the background and border color of a single polygon hotspot. Be sure to enter the hotspot’s ID to activate the setting.

Change Lens Flares

If you’ve added Lens flares to your project, you can use this action to show or hide them. You cannot target specific lens flares.

Mode – Select from the following modes:

  • Show Lens Flares (Expert: 0)

  • Hide Lens Flares (1)

  • Toggle Lens Flares (2)

Fullscreen

Type – Choose from the following Fullscreen actions:

  • Enter Fullscreen

  • Exit Fullscreen

  • Toggle Fullscreen - Action will toggle between the Enter and Exit types.

Auto Rotate

Type – Choose from the following Auto Rotate actions:

  • Start Auto Rotate - This action will start to rotate the panorama.

  • Stop Auto Rotate - Use this action to stop auto rotation.

  • Toggle Auto Rotate – Select this action to toggle between Start Auto Rotate and Stop Auto Rotate.

  • Start Animation - Use this action to start an animation created in the project.

Speed – The speed is determined by a rate of degrees per frame.
✭ Entering the number, .40, will cause the panorama to rotate at a rate of four tenths of a degree per frame. A negative number will rotate it counterclockwise while a positive number will rotate clockwise.

Delay – The time it takes for the panorama to begin to rotate (in seconds) again after it has been manually moved by the user.

Return to Horizon – Brings the panorama’s center perspective (horizon) back into view after it has been manually tilted upwards or downwards. A value of 0 will equate to no return, and an increase in the value will return the image to the horizon at a quicker speed.

Expert Mode – Here, you can enter Speed, Delay and Return to Horizon in the Speed field. For example: 0.4/5/0.4.

✭ Once Auto Rotate is activated and after no mouse activity for 3 seconds, the cursor will hide. It will reappear when the mouse moves again.

View

Apply these actions to a skin element to move the panorama to a specified point or view.

Set Default View

This action will jump to the default view.

Move to Default View

This action will cause the panorama to move back to the default view. You can specify the speed of this movement.

Speed - The speed is determined by a rate of degrees per frame. For example: Entering, .40, will cause the panorama to move at a rate of four tenths of a degree per frame.

Easing Function - Choose the interpolation between views.

  • Ease Out – This will ease out (slow down) the movement as it gets closer to the default view. (Expert: 0)

  • Ease In Out – Ease in/Ease out in which the movement back to default view will accelerate at the start and then slow down at the end of the movement. (1)

  • Ease Out Back – This movement is similar to Ease Out except that at the end of the movement, it moves slightly beyond the default view and then returns to the default view. (2)

  • Linear – The movement will be at a constant speed from beginning to end. (3)

Expert Mode – Select to manually add the Speed and Easing Function.

Set View

This action will jump to the specified view:

Pan – Enter the Pan value.

Tilt – Enter the Tilt value.

FoV – Enter the Field of View value.

Projection – Set the projection:

  • Keep Current - Keep the current projection the player is using; no change to the currently viewed projection. (Expert: -1)

  • Rectilinear (4)

  • Stereographic (9)

  • Fisheye (12)

Expert Mode – Select to enter the exact location of the view using the Pan, Tilt and Field of View parameters. Enter the parameters separated by forward slashes (/): 324.0/-3.5/70.0 (Pan/Tilt/FoV). You can also enter Projections using the numbers listed above.

Move to View

This action will cause the panorama to move to the specified view. You can set the speed of this movement and the easing function.

Pan – Enter the Pan value.

Tilt – Enter the Tilt value.

FoV – Enter the Field of View value.

Speed – The speed is determined by a rate of degrees per frame. For example: Entering the number, .40, will cause the panorama to move at a rate of four tenths of a degree per frame.

Projection – Set the projection:

  • Keep Current - Keep the current projection the player is using; no change to the currently viewed projection. (Expert: -1)

  • Rectilinear (4)

  • Stereographic (9)

  • Fisheye (12)

Easing Function - Choose the interpolation between views.

  • Ease Out – This will ease out (slow down) the movement as it gets closer to the default view. (Expert: 0)

  • Ease In Out – Ease in/Ease out in which the movement back to default view will accelerate at the start and then slow down at the end of the movement. (1)

  • Ease Out Back – This movement is similar to Ease Out except that at the end of the movement, it moves slightly beyond the target view before returning to the target view. (2)

  • Linear – The movement will be at a constant speed from beginning to end. (3)

Expert Mode – Select to enter the exact location of the view using Pan, Tilt and Field of View, Projections and Easing Functions. Enter the parameters separated by forward slashes (/): 324.0/-3.5/70.0/4/1 (Pan/Tilt/FoV/Projection/Easing). Speed can also be added here.

Change Projection

Apply this action to an element to change the current view’s projection.

Projection – Set the projection:

  • Rectilinear (4)

  • Stereographic (9)

  • Fisheye (12)

Speed – The speed is determined by a rate of degrees per frame. For example: Entering the number, .40, will cause the panorama to move at a rate of four tenths of a degree per frame.

Expert Mode – Select to enter the values for Projection and Speed as numbers.

Go To URL

When an element is given this action, interaction with this element will send the user to a specified URL. This can be a web link or another SWF, however it is generally good practice to use this action for opening HTML files or web links.

URL – Enter the path of the web page or HTML file. You can also enter a placeholder here. For example, $hu will call the URL used in the URL field of the Hotspots Viewer Mode. Use the Edit button (to the right of the URL field) to open a larger text field to allow easier editing of the URL.

Target – Add a target to specify where to open the website. You can also use placeholders here. For example, you could use $ht which will use the target specified in the Link Target URL field of the hotspot.

Open Next Panorama

Opens the following panorama. Pan, FoV, and Tilt can also be specified.

URL – Enter the file name of a Flash output (SWF), HTML5 output (XML) or web URL or choose from the list provided. If you are using Pano2VR pro and have a tour loaded, you will see a list of the tour nodes to choose from.

  • Enter URL - Add the SWF, XML or web URL.

  • Hotspot URL - Use the hotspot URL provided in the Link Target URL field of the hotspot linked to the hotspot template. (Expert: $hu)

  • Next Node - Will open the next node in a tour. ({$next})

  • Previous Node - Opens the previous node in a tour. ({$prev})

  • Last Visited Node - Opens the last visited node. ({$back})

  • Tour Panoramas - If using Pano2VR pro, you can choose any tour node to open next. ({node1}where _1 is the number of the node_)

View – Select the view the next panorama will open with:

  • Default View - The view that has been defined in Viewing Parameters. In Expert Mode leave the Pan/Tilt/FoV field empty to use the default view.

  • Current View - This will apply the current Pan, Tilt and FoV positions to the next panorama. (Expert: $cur)

  • Specific View - Here, you can have the next panorama open up to a newly defined view. Enter the Pan, Tilt and FoV positions in the fields below. (Pan/Tilt/FoV: 324.0/-3.5/70.0)

  • Target View - When this is applied to a hotspot template the Target View specified in a hotspot’s parameters will be used. ($ht)

  • Forward - This will move from current node to the next and will keep the same pan/tilt/fov values while correcting for North, so the direction is always looking forwards. ($fwd)

  • Backward - Similar to forward but the direction looks backwards when moving from one node to another. ($bwd)

Expert – Select to enter the URL or node and Pan/Tilt/FoV.

Position

Position actions will move the target element’s position within the skin.

Type – Choose from the following Position action types:

  • Set Element Position - This action will jump the targeted element to the defined position. Select Expert Mode to enter the Offset X/Y using a forward slash: 10/5.

  • Change Element Position - When this action is applied, it will cause the targeted element to visibly move from its current position to the position defined in the Offset X and Y fields. Select Expert Mode to enter the Offset X/Y using a forward slash: 10/5.

  • Toggle Element Position - Toggles the element from its current position to the specified location.

  • Set Relative Position - Use this action to change an element’s position to a set amount with each button click. With each click the relative position is changed.

  • Change Relative Position - This action functions the same as Set Relative Position except that the change along the path will be visible (as opposed to jumping to the position).

  • Scroll Into View - Use this to scroll elements into view that are out of the scroll area but are inside a Scroll Area Element.

Offset X/Y – Set the initial position the element is to be moved to.

Limit – Set the position limit for the Set and Change Relative Position actions. Select Use Limits to enable.

For example, if you set the Offset to 10px for X and the Limit to 100px for X, the element will move 10 pixels to the right at every mouse click (or any other source), until it has moved the length of 100 pixels. Likewise, a setting of -10px for the X offset and 0 for the X limit, it will move the element to the left until it reaches the limit of 0.

Select Expert Mode to enter the data with forward slashes: 10/10/100/0.

Target – Choose which element will be affected by the action. $self will target this element itself. $parent will target this element’s parent. Any other element added to the skin will also be listed here.

Angle

Angle actions will rotate the element position to a specified degree.

Type – Choose from the following Angle action types:

  • Set Element Angle - This action will rotate the targeted element. The change will be jerky.

  • Change Element Angle - This action will rotate the targeted element. The change will be smooth.

  • Toggle Element Angle - Use this action to toggle or switch between default and specified angles.

Target – Choose which element will be affected by the action.

Expert Mode – Select to enter the angle as a float value.

Visibility

Type – Choose from the following Visibility action types:

  • Show Element - This action will show the targeted element.

  • Hide Element - This action will hide the targeted element.

  • Toggle Element Visibility - This action will toggle between the Show and Hide Element actions.

Target: Choose which element will be affected by the action.

Alpha

Type – Choose from the following Alpha action types:

  • Set Element Alpha - This action will adjust the transparency of the targeted element to the parameter set in the Alpha field.

  • Change Element Alpha - The element’s alpha channel will gradually change from the alpha set in the element’s settings tab to the parameter applied in the Alpha field.

  • Toggle Element Alpha - Toggle between transparency parameters. The parameter set in the Alpha field will be applied on the first interaction, then back to its default state (set in the settings tab) on the second interaction.

Alpha – Enter the amount of transparency for the element. Alpha is based on percentage values. The float value, 1, represents 100%, .50 represents 50%, etc. Select Expert Mode to enter a more specific value.

Target – Choose which element will be affected by the action.

Scale

Type – Choose from the following Scale action types:

  • Set Element Scale - The element will be scaled up or down depending on the parameter set in the Scale X/Y fields. The scaling will not be animated.

  • Change Element Scale - The element will be changed to the scale parameters set in the Scale X/Y fields. The scaling will be visible (animated).

  • Toggle Element Scale - The element will change to the specified scale parameters on the initial action, then scale back to it’s default parameters set in the settings tab.

Scale X/Y – Enter the scale parameters here. Scale is based on percentage values.

  • Link X and Y Scale - Select to maintain aspect ratio.

Target – Choose which element will be affected by the action.

Expert Mode – Enter the scaling for X and Y as float values. The float value 1, represents 100%, .50 represents 50%. For example: .5/.25 will scale the element’s x-axis down 50% and its y-axis to 25%.

Trigger Click

Use the Trigger Click action to prompt a mouse click action (without an actual mouse click).

Target – Choose which element will be affected by the action.

Set Value

The Set Value action allows you to dynamically change elements.

It can be used for example, to dynamically set file paths for the external loader to display different content.

For example: Value = pictures/image01.jpg and Target = external 01.

If you are outputting an HTML5 project, you can use this action to display framed content (video, objects, panoramas), using a textbox.

If you’re using Pano2VR Pro, you can also use this action to filter node markers on a map using tags set in User Data.

As an example, you could have multiple nodes of a tour - park, restaurant, lodging - that are tagged accordingly. Then, a button with this action would be assigned the Tags (separated by comma) as the Value and the Target would be the map. When the button is clicked, only node markers of nodes that have at least one of the given tags in their user data would appear on the map.

Value – Enter the Value to be set. Use the Edit button (to the right of the Value field) to open a larger text field to allow easier editing of the value.

Target – Choose which element will be targeted by the action.

Media

Type – Choose from the following Media action types:

  • Play Media - An action to playback the audio or video.

  • Pause Media - This action will pause the targeted media.

  • Stop Media - This action will stop the targeted media.

  • Play/Pause Media - Use this action on a button to toggle between playing the targeted media or pausing it.

  • Play/Stop Media - This action will toggle between playing the targeted media or stopping it. When playing after stopping, the media will return to its starting position.

  • Loop - Set the amount of times the media should play back.

    0 = play back a continuous loop

    1 = single playback

    n = play back n times

  • Seek Media - Use this action to skip forward or backward in a media file by a given amount of time.

    • Time Difference - Set how many seconds the media should seek. Use a negative value to jump backwards.
  • Activate Media - This action will let you activate any media element added to the panorama (in the Viewer). If you add this to a button, this will pop out the media (image and video) and play it (video and audio).

    • Mode - Select an activation mode:

      • Activate
      • Deactivate
      • Toggle

Target – Choose the media element that should be targeted.

  • _main = Targets all media added to the project and the skin.

  • _background = Targets background audio.

  • ID = Targets the media item with the given ID.

Volume

Type – Choose from the following Volume action types:

  • Set Volume - Apply this action to a button to set the volume of the media to a specified level. It will jump from it’s current level to the level set.

  • Change Volume - Apply this action to a button to set the volume of the media to a specified level. It will gradually change the volume from it’s current level to the level set.

Level – Set the amplitude. The maximum loudness is 100% or 1.00 in Expert Mode.

Target – Choose the media element that should be targeted.

Video Panoramas

These actions are for 360º Videos.

Type – Choose from the following Video Panorama action types:

  • Play - Apply to an element to play back video.

  • Stop - Apply to an element to stop video playback.

  • Pause - Pause the video.

  • Fast Forward - Fast Forward through the video.

  • Reverse - Rewind the video.

Set Variable Value

Use this action to set a Variable that has been defined in the skin properties.

Variable Name – Choose the variable to set. This list will be populated with the variables listed in the skin’s properties.

Operation – Choose the operation you want to apply to the variable. The available operations will depend on the variable type.

  • Set(=) (Expert: 0)

  • Add(+) (1)

  • Sub(-) (2)

  • Mul(*) (3)

  • Div(/) (4)

  • Mod(%) (5)

  • Min(∧) (7)

  • Max(∨) (6)

Value – Set a value for the operation. Only values that suit the variable type are possible.

Expert Mode – Use this to use numerical values for the operation type.

Learn how variables are used in the skin editor.


See also

2017-03-14 14:39:26