FAQs Skin & Interface

From 3dvista
Jump to navigation Jump to search
  1. What is a SKIN and how can I change their designs?
  2. Can I create skins that run in full screen?
  3. Can I create skins with fixed size to embed in existing webpages?
  4. What is the ‘viewer’ element of a skin?
  5. What is the ‘panel’ element of a skin?
  6. Can I add my own buttons to a skin?
  7. What is the ‘thumbnail list’ element of a skin?
  8. What is the ‘drop-down menu’ element of a skin?
  9. What is the ‘text or label’ element of a skin?
  10. Can I add images to my skin?
  11. What is the ‘tab’ element of a skin?
  12. What is the ‘floor plan’ element of a skin?
  13. What is the difference between choosing ‘pixel units’ and choosing ‘percentage units’ for an element of the skin?
  14. Can I show my own 'info' screen in the Skins?
  15. When importing my own animated hotspot icon (APNG) into the library, I get the message "Format or compression not supported." What am I doing wrong?


1.- What is a SKIN and how can I change their designs?Skin is the term used for the graphic interface that contains the virtual tour elements. It is usually made up of a graphic frame, the viewer where the media is played and optionally different button icons such as zoom -in, zoom-out, info/help, audio mute, and a media list. Skins can have many different designs and come in a large variety of forms and colors. You can change the skins of your tours in two ways:

  1. by selecting a different Skin from the Skin library. We have an extensive and constantly growing library of skin designs that you can always download and integrate retrospectively.
  2. by designing and creating your own skins with 3DVista Virtual Tour Suite, which includes a powerful skin design and editing tool with a broad range of creation tools and design options.


2.- Can I create skins that run in full screen? Yes, you can. By default, the skins that you have created will adapt dynamically to the size of your client’s browser - independently of whether he or she uses a desktop, a tablet or a mobile. Within this option, you can decide how the individual elements of the skin (e.g. thumbnail list) will adapt to this change in size - for instance they can stretch and grow with the canvas or they can keep fixed sizes. Alternatively, you might wish to set a fix size for both skin and virtual tour to make sure that users will see your tour always in the exact same way and no matter what device they are using. This is specially useful if you plan to embed your virtual tour in a spot inside a existing webpage, where the size is fixed.


3.- Can I create skins with fixed size to embed in existing webpages? Yes, you can. If you need a specific size for your virtual tour, for instance if you wish to embed it into an existing webpage or space online, you can define your skin’s size so that it won’t stretch, no matter how big your client’s browser is. This is perfect for fixed designs or layouts that need to follow some rules or requirements to fit your corporate design.


4.- What is the ‘viewer’ element of a skin? The viewer element is the window in which the media of a virtual tour will be shown and played. It is the space where your spherical panorama , videos and photos will be shown. Every skin needs to have one viewer.


5.- What is the ‘panel’ element of a skin? The ‘panel’ element is a helpful tool that helps you design your own skins faster and more accurately. It works as a container, which can include many different skin elements grouped together. The ‘panel’ itself is a transparent rectangle where you can place the skin elements that you wish to combine. Instead of editing and placing each element separately, the container allows you to assign position, layout and behavior to the entire group at once. You could for example create a set of buttons and place them all together following this rule: Place panel always 40 pixels away from the bottom of the skin and make it cover 33% of the horizontal size of the skin (so it would grow and shrink as a unit). See tutorials.


6.- Can I add my own buttons to a skin? Yes, you can create your own buttons. A button can consist of text or graphic. Each button can have up to four different states (normal, roll-over, pressed and inactive), which should be presented by different images in case you want your buttons to be graphical. When creating a button you will therefore be asked to select the kind of behavior (play, stop, mute, previous,next, show/hide panel etc.) and - in case you selected a graphic button - the four images for each button’s state. See tutorial.


7.- What is the ‘thumbnail list’ element of a skin? The ‘thumbnail list’ is a shortcut to access the different media of the virtual tour. Instead of having to wait for one media to pass in order to see the next one, your users can therefore jump right to the media of their choice. The thumbnail list is customizable and you can decide if a list includes all media, only panoramas, only photos, only videos or custom media picked by you. Floor plans are excluded of the media list since they have their own window. A thumbnail list can consist of thumbnails (little images), title texts or both.


8.- What is the ‘drop-down menu’ element of a skin? The drop-down menu is a special version of a thumbnail list. When activated, it displays (drops down) a list of media, from which the user may select one. This is convenient if you need clean skins and don’t want to have a lot of space occupied by displaying all thumbnails simultaneously.


9.- What is the ‘text or label’ element of a skin? The text or label element is not an element that your tour’s user interacts with. Instead, it allows you to place floating text to your skin (on top of the viewer) for informational or advertising purposes. Combined with panels that can be shown or hidden when entering and exiting media, the text element makes a powerful and magazine-like tool.


10.- Can I add images to my skin? Yes, you can enrich your skin by adding .jpg or .png (transparency supported) files. Just place the image on the skin or within a panel if you wish to define how it adapts to the skin. The image will cover a part of the viewer. This is perfect for placing a logo or creating an artistic skin.


11.- What is the ‘tab’ element of a skin? The tab element is a panel that shows different elements depending on which tab you select. The container panel has tabs on the top with customizable titles. The appearance of each tab is also customizable in color, size, font etc. This is very useful if you wish to have different thumbnail lists divided by type of media, for instance. In each tab you could group one type of media (panoramas, videos, photos).


12.- What is the ‘floor plan’ element of a skin? Floor plans are displayed in their own window. You need to add the floor plan element from within the skin workshop in order to be able to import floor plan images into a virtual tour later. This floor plan window may have sub-elements, such as ‘zoom in/out’, ‘rotation’, and ‘list of floor plans’.


13.- What is the difference between choosing ‘pixel units’ and choosing ‘percentage units’ for an element of the skin? Any element within your skin can be located on the canvas either in absolute or in relative terms. This will define how an element will behave when the size of a tour is bigger or smaller (depending on screen resolution and device of your clients). When choosing to place elements in pixel units, the size and relation will be fixed - no matter how big or small the screen is. When choosing to place elements in percentage units, the elements will grow and arrange relative or according to the size of the virtual tour canvas.


14.- Can I show my own 'info' screen in the Skins? Of course. When using our internal Hosting service, you will get a link upon hitting "Publish" that you can post and share on any platform. Alternatively, you can upload the tour to your own hosting service and embed the URL as you are used to.


15.- When importing my own animated hotspot icon (APNG) into the library, I get the message "Format or compression not supported." What am I doing wrong? This may have to do with the settings of your .apng file export. If you use a program such as APNG Assembler, the options "Optimize palette" and "Optimize color type" may be selected by default in the compression settings. Deselect the option "Optimize Color Type" for 3Dvista to be able to recognize the compression type of the file.