Content

  1. Quick start
    1. Creation of your account
    2. Creation of a virtual tour
  2. Types of panoramas
  3. Hotspots
    1. What is a hotspot?
    2. Creation of an image hotspot
    3. Creation of a polygonal hotspot
    4. Types of hotspots
  4. After export
    1. The structure of the tour after export
    2. About krpano license
    3. The structure of the main.xml
    4. How to edit xml-files?
    5. How to delete logos?
    6. Adding map
    7. Adding plugins in your tour

Quick start

Creation of your account

Before making of the first virtual tour in Tourmaker you must to create your personal account. To do this you should open Tourmaker tab from main page and click on “Register”. You must fill in all fields and then click on “Create account”. If you set unique username than your account will be created immediately.

Creation of a virtual tour

Remember that all your actions you must confirm by clicking “Submit”!

  1. Open Tourmaker tab from main page and login. You get in your personal cabinet;
  2. Create blank tour by clicking on “New tour”. You get in the Assistant tab of the new blank tour;
  3. Load panoramas, which you want to import in the tour. To do this you should to click on “Load panoramas” in the Assistant tab and select panoramas;

    Note - you have to wait while all panoramas are downloaded
    Note - in current version only *.jpg format is supported

  4. Add hotspots, for example, in the first panorama. To do this you should to click on “Add hotspots” in the Assistant tab (or “Panoramas” in the left menu) and select the first panorama in the left menu. This panorama is opened in panorama editor;

    Note - you have to wait while selected panorama is preprocessed for panorama editor

  5. In panorama editor you can create image and polygonal hotspots for selected panorama;
  6. Create all required hotspots by repeating steps 4 and 5 for other panoramas. You may check correctness of hotspots by using Hotspots list or Transition map in the left menu;

    Note - don’t forget to click “redraw” in Transition map every time you open it

  7. Set the name of the tour and first panorama, which is loaded after tour starting. To do this you should to click on “Project” in the left menu. For setting initial direction of view you should to drag “eye” (it corresponds to the center of view area) to the required point of the first panorama projection;
  8. Check your tour by clicking “View tour” in the Assistant tab;
  9. Export or share tour and have a fun!

All this actions you may also see in tutorial video.

Types of panoramas

In current version of Tourmaker only spherical and cylindrical panoramas are supported. Spherical pano must have aspect ratio 2:1. If pano has another aspect ratio, then it will be loaded as cylindrical one. File format - jpg. Maximum size - 50 Mb.

Hotspots

What is a hotspot?

Hotspots are areas in the panorama, which react on mouse hovering or clicking.

There are two kinds of hotspots: polygonal hotspots and image hotspots.

In Tourmaker hotspots can be used to: 1) load new panoramas (transition); 2) show pop-up windows with pictures (image); 3) show windows with texts or html-pages (text/html); 4) link to other urls (link); 5) show only hints of hotspots (hint).

Creation of an image hotspot

  1. In panorama editor click on "Add hotspot". You switch in Adding mode, in which you can create polygonal and image hotspots;
  2. Click on the panorama to the point where you want to place the image hotspot. A circle icon appears in this place. If you want to change hotspot position you may click “Undo last action” or “Q” button of keyboard and set new position;
  3. Click "Save hotspot". You switch in Hotspot editor, where you should to: choose another icon for the hotspot; specify hint - a text which will be displayed when mouse hovers the hotspot (optional value); select the type of hotspot and set all required parameters;
  4. Save the hotspot by clicking "Submit".

Creation of a polygonal hotspot

Creating a polygonal hotspot is similar to creating image hotspot and all steps are performed in the same order. The only difference - instead of the icon you have to specify a polygonal area.

  1. In panorama editor click on "Add hotspot". You switch in Adding mode, in which you can create polygonal and image hotspots;
  2. Click on the panorama to the point where you want to place start point of polygonal hotspot. A circle icon appears in this place. In such way you can place all points of polygonal area. You may delete last point by clicking “Undo last action” or “Q” button of keyboard;
  3. Click "Save hotspot". You switch in Hotspot editor, where you should to: specify hint - a text which will be displayed when mouse hovers the hotspot (optional value); select the type of hotspot and set all required parameters;
  4. Save the hotspot by clicking "Submit".

Types of hotspots

Hotspot type defines the actions which run when you click on hotspot area. Image and polygonal hotspots may be one of the five available types:

There is a common action for all types of hotspots - when mouse hovers the hotspot area, its hint is appeared as text at the top of the screen.

Transition

Clicking on the hotspot loads another panorama.

The user should to:

  1. Choose the panorama which will be loaded;
  2. Set start direction of the center of field of view in a new panorama. To do this you should to drag the "eye" to the corresponding point of the new panorama projection;
  3. Set the size of the field of view (in degrees,10…120).

Image

Clicking on the hotspot opens pop-up window with the image. User can set width and height of window in pixels. Clicking on the image closes window.

The user should to:

  1. Download the image in jpg format and no larger than 5 MB;
  2. Set the window’s width and height in pixels.

Text/html

Clicking on the hotspot opens pop-up window with the text. Window's sizes vary depending on screen sizes (64% of screen height, 54% of screen width), these values user can’t change. If text is not entirely fit in the window, then vertical scroll bar automatically appears. You can close window by clicking standard button in the right corner.

You can describe structure of the text by using HTML. If the text will be written without any markup tags, then it will show as one paragraph (default font - Arial, font size - 19).

Note - not all HTML/CSS tags are supported by the Flash Player

For all texts default font style is Arial.

List of some useful markup tags:

  1. <h> ...</h> - new header (font size - 23, text align - center);
  2. <sh> ...</sh> - new subheader (font size - 20);
  3. <p> ...</p> - new paragraph (font size - 19);
  4. <br/> - break line. Can be used to insert a blank line between paragraphs: <p> ...</p> <br/> <p> ...</p>;
  5. <a href="url">Link text</a> - to create a link to another url or a bookmark inside the text;
  6. <b>...</b> - bold; <i>...</i> - italic; <u>...</u> - underlined.

Link

Clicking on the hotspot opens url in a new browser window.

Hint

Clicking on the hotspot doesn’t cause any action. The only effect - when mouse hovers the hotspot area, its hint is appeared as text at the top of the screen.

After export

The structure of the tour after export

After confirming the export of the virtual tour you will get a zip-archive with them. This archive contains all necessary files to run and view the tour (except for krpano license).

List of files:

  1. index.html - you can start tour by double clicking on this file;
  2. krpano.swf - krpano flash player;
  3. main.xml - xml-file for storing the structure of the tour by using XML tags. All information about tour is described there: paths to images, panoramas tiles and icons, coordinates of hotspots, etc;
    See more about XML
  4. swfkrpano.js - the krpano embedding script for html-pages. This script does many things automatically and it fixes a lot of browser and system related issues.
    See more about swfkrpano.js

List of folders:

  1. plugins - krpano plugins for pop-up windows with text;
  2. skin - contains:
    • defaultskin.xml - xml-file for storing design and functionality of controls: mouse cursors, navigation buttons, panorama projections parameters;
    • buttons.png - navigation bar buttons;
    • drag-cursors.png, qtvr-cursors.png - mouse cursors;
  3. tiles - panoramas preview and tiles;
  4. touricons - icons for image hotspots;
  5. toursimages - jpg-images, which are included in tour.

About krpano license

Krpano Panorama Viewer is a commercial flash viewer, you should buy license for using it. This license is required not only for viewing tours, but also for cutting panos before viewing into tiles - small pieces, which loaded one by one.

Exported tours

We don't embed krpano license in exported tours, so if you run downloaded tour you can see a demo watermark at the center of the screen.

If you have file krpano.license - just put it in the folder with tour (in the location, where krpano.swf is situated).

If you haven't krpano license - you may purchase it on krpano.com.

Shared tours

Shared tours work with embedded license without krpano demo watermarks, but they have refers on Tourmaker and krpano at the bottom of the screen.

The structure of the main.xml

<krpano version="1.0.8" onstart="loadscene(first_scene);">

<!--Link to the xml, which sets controls, 
  buttons and mouse cursor form, items of contextual menu, 
  view projections of panoramas-->
<include url="skin/defaultskin.xml"/>

<!--Default text style of hints-->
<textstyle name="infostyle"  ...   />

<!--Block with all panos-->
<scene name="first_scene">
              ...
</scene>
              ...
<scene name=”last_scene”>
              ...
</scene>
<!--End of block with all panos-->

<!--css style for text in textfield plugin-->
<data name="css">
         ...
</data>
</krpano>

How to edit xml-files?

You may edit xml-files in common text editors. But there are many special free or commercial XML editors, which make editing of xml-files more convenient - syntax highlighting, numbering of lines, etc.

For the beginners we may recommend simple and freeware XML Copy Editor. Later you can choose XML editor according to your demands.

See more XML editor, list of XML editors

How to delete logos?

After export you may very quick delete white logos in the screen corners, but for this you have to open and edit "main.xml" file.

After opening of "main.xml" , you should delete two plugins at the end of the file:

Tourmaker logo (bottom left corner)

<plugin name="tourmaker_logo"
          url="%SWFPATH%/skin/tourmaker_logo.png" 
          keep="true"  
          align="leftbottom" x="3"  y="3" 
          alpha="0.95" handcursor="true"
          enabled="true" capture="false" 
          edge="leftbottom"
          scalechildren="true"
          width="124"
          height="30"
          onclick="openurl(http://www.makevt.com/,_blank);"
  />

Krpano logo (bottom right corner)

<plugin name="krpano_logo"
          url="%SWFPATH%/skin/krpano_logo.png" 
          keep="true"  
          align="rightbottom" x="3"  y="3" 
          alpha="0.95" handcursor="true"
          enabled="true" capture="false"  
          edge="rightbottom"
          scalechildren="true"
          width="154"
          height="16"
          onclick="openurl(http://www.krpano.com/,_blank);"
  />

Delete this plugins, save the "main.xml" and check your tour.

But there is also krpano watermark in the center of the screen - "krpano demo version". For deleting this logo you should have krpano license, which you may purchase on krpano.com and copy in the folder with tour.

Adding map

This example adds map with active points, which show panoramas locations. If you click on active point, then corresponding panorama is loaded. Map has two states - full and mini, you may change map’s state by clicking on it.

Adding image of map

Let’s create simple map, which can changes it’s size (full or mini) by clicking:

  1. Create folder “map”;
  2. Put image of your map in folder “map” (for example, this is “map.png”);
  3. Open “main.xml” file in your XML editor and copy code from example.

Example: 

<!--Map-->
<plugin name="map" 
         url="map/map.png" 
         keep="true"
         align="rightbottom" 
         x="20"  y="20" 
         alpha="0.95"
         handcursor="false" 
         edge="rightbottom"
         scalechildren="true"
         width="prop"
         height="20%"
         onclick="action(openmap);"
         /> 


<!--This action make map smaller - mini state-->
<action name="closemap">
         plugin[map].changeorigin(rightbottom,rightbottom);
         tween(plugin[map].height,20%);
         set(plugin[map].onclick,action(openmap););
</action>


<!--This action make map bigger - full state-->
<action name="openmap">
         plugin[map].changeorigin(rightbottom,rightbottom);
         tween(plugin[map].height,80%);
         set(plugin[map].onclick,action(closemap););
</action>

This example creates a small map in bottom right corner (mini state - height: 20% of the screen height, width: according to aspect ratio of “map.png”). If you click on map, then it becomes bigger (full state - height: 80% of screen height, width: according to aspect ratio of “map.png”). If you resize browser window, then map will be resized too.

Adding active points on map

Let’s add active points on map, which show locations of panoramas and link to them.

  1. Put image of active point in folder “map” (for example, this is “point.png”);
  2. Open “main.xml” file in your XML editor and insert code from example after action “openmap”.

Example: 

<!--Map active points-->
<!--Map point for first scene-->
<plugin name="mappoint_1" url="map/point.png" width="20" height="20" 
  keep="true"  parent="map" align="lefttop" edge="center" zorder="2"
  x="0"  y="0" 
  onhover="showtext(First scene);" 
  onclick="loadscene(first_scene);" 
  />


<!--Map point for second scene-->
<plugin name="mappoint_2" url="map/point.png" width="20" height="20" 
  keep="true"    parent="map" align="lefttop" edge="center" zorder="2" 
  x="640"  y="480"
  onhover="showtext(Second scene);"
  onclick="loadscene(second_scene);" 
  />

This example creates two active points, which link to the first and second panoramas. When mouse hovers active point, then it’s hint is appeared near the cursor (for first_scene - First scene). If map sizes are changed, then active points resize too (because of mappoint attribute parent=”map”).

How can you identify x/y coordinates of active points?

Let’s describe how to set mappoint’s attributes x and y.

System of coordinates:
point of origin - top left corner of “map.png”;
axis x - right, axis y - down;
x changes from 0 to original width of “map.png” in pixels;
y changes from 0 to original height of “map.png” in pixels.

Note - you should use original sizes of “map.png”, not in full or mini state!

For example, original sizes of “map.png” 640*480. Then active points from example will be in the top left (mappoint_1) and bottom right (mappoint_2) corners.

To identify x and y you may use any graphical editor, which can show coordinates of mouse cursor. For example, Paint in Windows or Adobe Photoshop. Don’t forget about system of coordinates!

Adding plugins in your tour

Combobox

Combobox plugin adds combobox with drop-down list. Items of list may be used for different actions, but in more cases they are used for loading panoramas.

  1. Put combobox.swf in the folder plugins;
  2. Open main.xml file in your XML editor and set the position of the combobox and functionality of it’s items.

Example: 

<!--Combobox-->
<plugin name="combobox"
         url="plugins/combobox.swf"
         align="lefttop" 
         x="10" 
         y="10" 
         width="200"
         height="20"
         visible="true"
         keep="true"
         alpha="1"
         />
<!--Items of list-->
<action name="combobox:Scene 1">
       loadscene(my_scene_1);lookat(0,0,90);
</action>
<action name="combobox:Scene 2">
       loadscene(my_scene_2);lookat(-10,-10,90);
</action>

This example creates drop-down list in the top left corner with two items - "Scene 1" and “Scene 2”. If you click on item “Scene 1”, then scene with name “my_scene_1” will be loaded and camera will look at panorama position with spherical coordinates (0,0). Initial fov - 90 degrees.

Note - for exact estimation of “lookat” parameters you may add plugin options

See more combobox plugin, loadscene, lookat

Options

Options plugin adds table with some view and control parameters. This is useful for the determination of hotspot spherical coordinates (h/v lookat - horizontal and vertical) and current field of view (fov). It helps to position image hotspots without krpano editor.

  1. Put options.swf in the folder plugins;
  2. Open main.xml file in your XML editor and add code from example.

Example: 

<!--Options-->
<plugin name="options"
         url="plugins/options.swf"
         keep="true"
         />

This example creates a small button in the right top screen corner. If you click on it, then a parameters table will be opened.

See more options plugin