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.

To see a list of examples of source and action combinations, check out this article. For a list of sources, see this article.

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

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 rotate at a rate of four tenths of a degree per frame.

Change Viewstate

An action for Object2VR only.

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.

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

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

Expert Mode – Enter any of the following to change modes:

  • 0 = Drag Mode

  • 1 = Continuous Mode

  • 2 = Toggle Modes

Change Polygon Mode

With this action, you can have an element in the skin editor change how polygon hotspots appear.

Mode – Select a Polygon Hotspot Mode:

  • Always Hidden

  • Always Visible

  • Show Current

  • Show All

  • Disabled

Expert Mode – Enter any of the following to change the mode:

  • 0 = Always Hidden

  • 1 = Always Visible

  • 2 = Show Current (on hover)

  • 3 = Show All (on hover)

  • 4 = Disable

Fullscreen

Type – Choose 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.

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.

View

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

Type – Choose from the following View types:

  • 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.
  • 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.

    • 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.

  • Move to View - This action will cause the panorama to move to the specified view. You can set the speed of this movement.

    • 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.

    • 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. Speed can also be added here.

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.

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

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. If you are using Pano2VR pro and have a tour loaded, you will see a list of the tour nodes to choose from.

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

  • Default View - The view that has been defined in Viewing Parameters. Select Expert Mode to enter the Pan, Tilt and FoV separated by forward slashes (/): 324.0/-3.5/70.0.

  • Current View - This will apply the current pan, tilt and FoV positions to the next panorama. Select Expert Mode to use the placeholder, $cur or to enter the Pan, Tilt and FoV separated by forward slashes (/): 324.0/-3.5/70.0.

  • 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. Select Expert Mode to enter the Pan, Tilt and FoV separated by forward slashes (/): 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. Select Expert Mode to use the placeholder, $ht or to enter the Pan, Tilt and FoV separated by forward slashes (/): 324.0/-3.5/70.0.

Position

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

Type – Choose from the following Position types:

  • Set Element Position - This action will jump the targeted element to the defined position. Select Expert Mode – Select 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 – Select 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 - An action to reveal any element that may be out of view.

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 project will also be listed here.

Angle

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

Type – Choose from the following Angle 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 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 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 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 files 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.

Value – Enter the Value to be set.

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

Media

Type – Choose from the following Media types:

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

  • 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

  • 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.

  • 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

  • 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 Viewer.

  • _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.

Audio and Video

These actions are for Animation and 360º Video outputs.

Type – Choose from the following Audio and Video action types:

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

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

  • Pause Video - Pause the video.

  • Fast Forward Video - Fast Forward through the video.

  • Reverse Video - Rewind the video.

Set Variable Value

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

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

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

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

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


See also…

2017-01-16 14:32:01