Category: “Skin Editor”

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Adding Local and Google Fonts

Learn how to add Google Fonts to your project.

Read more…

Button Element

The button element provides multiple states of a button. Each state can have a different image which provides visual indications of interaction.

Read more…

Cloner Element

The cloner is a useful tool that creates lists for building menus. The cloner is used to create thumbnails of nodes within a tour, creating a thumbnail menu or the cloner can be used to create a multi-level menu, a multilingual menu, a menu of all hotspots, or a menu of all floor plans.

Read more…

Code Element

The code element is used to apply Javascript to the skin.

Read more…

Container

A container is an invisible element that allows you to group elements together in the tree or in the editor.

Read more…

Create a Popup Image with Expanding Text

Learn how to create a custom image popup with a text box that expands to fit the amount of text.

Read more…

Create Animated Hotspot Icons

Learn how to create animated icons for point hotspots. This particular animated icon will consist of to rotating bars hinged at the center.

Read more…

Create Buttons Using Text Boxes

Learn how to use a couple of text boxes to create a 2-state button.

Read more…

External Image

Use the external loader to add images that need to be loaded externally rather than embedded in to the skin. This is especially useful if you have a lot of thumbnails in a tour and are not using the Node Image element. Calling the images from an external source will help keep the tour running smooth rather than sluggish. You can also embed a YouTube or Vimeo video. You can change the content (URL) of an external image dynamically using a 'Set Value' action.

Read more…

Hide Elements When Player is Active

Learn to use a logic block to hide elements when the player is active (when interacting with the panorama or skin). You use a timer that has a logic block by default.

Read more…

Image

The image element is used to add images to the skin. Once you click on the Canvas, you'll be instructed to selected an image.

Read more…

Lottie Animation

Lottie files are small animations designed to work on all devices. Use them for buttons and hotspots.

Read more…

Map Element

Maps and Floor Plans can be easily added to the skin by selecting the Map Element in the Toolbar and clicking in the Canvas to add.

Read more…

Mapping Keys to the Skin

You can map keyboard keys to actions in the Skin Editor. This allows a user to use either the mouse or the keyboard to control and interact with the panorama or tour.

Read more…

Node Image

Use the Node Image Element to easily add thumbnail images from the current tour. This is especially useful for creating galleries or buttons from the images. Use this in conjunction with the Cloner to build a tour menu or gallery. Click in the canvas to add an image. A placeholder will appear. Go to the Node Image settings to choose the node.

Read more…

Node Marker

Node Markers are used to show elements depending on the current panorama, or node, in a virtual tour. It can also be used to activate or deactivate other media within the tour through the use of tags.

Read more…

Rectangle

The rectangle element can be drawn to any size. Use it as a button or as a screen tint. Or even as a fix to create active areas in 3D distorted hotspot images.

Read more…

Scale an Element Based on Player Width

You can use logic blocks to create a responsive skin (where the skin elements scale to the player's width). This will require a logic block with multiple expressions.

Read more…

Scroll Area

A scroll area is a container that will add scrollbars around an element or group of elements, if necessary. It can also be used to clip content.

Read more…

Seekbar

Seekbars can be used to seek or move backwards and forwards in time for background sounds, all pinned sounds and videos of the project, as well as skin sounds and skin videos, and even 360° video panoramas (except embedded YouTube and Vimeo videos).

Read more…

Skin Actions

Actions or a set of directions can be applied to any element added to the skin to create interactivity.

Read more…

Skin Actions Examples

Here you'll find a few examples of common actions. You can assign actions to any element in the skin editor.

Read more…

Skin Elements

A skin element is any object added to the skin.

Read more…

Skin Modifiers

Use modifiers to affect a skin element's behavior. Open the Modifiers panel and double-click in the table or click the plus sign to the right to open the Modifier Settings.

Read more…

Skin Sources

In the actions section of the Actions/Modifiers tab in the Skin Editor, you'll find a column called Sources with a pop-up menu. These sources represent the triggers that cause the actions.

Read more…

Styling Elements with CSS

Elements in the skin can be styled and animated using CSS. Learn how to create interactive buttons, popups and animated hotspots using CSS.

Read more…

Styling with CSS

CSS or Cascading Style Sheets are what the web uses to style a web page. It is a rule-based language that specifies how elements should look or be presented in a web browser. For example, You can make a text box blue and you can have that text box animate using CSS.

Read more…

SVG

Click the *Add Scalable Vector Graphics* button in the Toolbar and then click in the Editor to choose a SVG file. Or, just drag the SVG in to the editor.

Read more…

Text Box

Text Box are for adding text to the skin. You can use basic HTML tags to format the text, or use CSS.

Read more…

The Color Tool

The Color Tool, found in the Skin Editor, lets you quickly change the colors of a skin or a selection of elements.

Read more…

Timer Element

The timer is a container that is useful for timing actions in the skin. For example, you can use a timer to hide a Welcome Screen (or splash screen) after 5 seconds.

Read more…

Using Action Filters

Action filters let you define conditions for the execution of actions assigned to an element.

Read more…

Video Element

Use this to add videos to your skin. You can use local files, URLs or YouTube and Vimeo IDs.

Read more…