Advanced Tutorial: How to make a virtual tour with MakeVT

Content

  1. Types of panoramas
  2. Hotspots
    1. What is a hotspot?
    2. How to create an image hotspot
    3. How to create a polygonal hotspot
    4. Hotspot types
  3. How to export on Tumblr
  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

Types of panoramas

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

Hotspots

What is a hotspot?

Hotspot is an area on a panorama, which reacts on mouse hovering or clicking.

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

In MakeVT hotspots can be used to: 1) load new panoramas (transition); 2) open pop-up windows with pictures (image); 3) open pop-up windows with texts; 4) link to a url (link); 5) show hints (hint).

How to create an image hotspot

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

How to create a polygonal hotspot

Polygonal hotpost - is a polygonal area on a panorama which is a hotspot. Creation of a polygonal hotspot is similar to creation of an image hotspot and all steps are performed in the same order. The only difference - instead of the icon you specify a polygonal area.

  1. In the hotspot editor select a panorama at the list at the left side of the screen and click "Add hotspot" or just press "space" on keyboard. You will switch in the "Adding mode", in which you can create polygonal and image hotspots;
  2. Click on the panorama on the point you want to place the image hotspot. A circle icon will appear in this place. Click on the panorama again to set other points of the polygonal area. You may delete the last point by clicking “Undo last action” or by pressing “Q” on the keyboard;
  3. Click "Save hotspot". You will switch to the Hotspot settings window, where you can: specify a hint - a text which will be displayed when the mouse pointer 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 to be done when a user clicks on the hotspot area. There are five types of image and polygonal hotspots:

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

Transition

Click on the hotspot loads another panorama.

To create it:

  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 drag the "eye" symbol to the corresponding point of the new panorama;
  3. Set the size of the field of the 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.

To create it:

  1. Upload the image in .jpg format and no larger than 5 MB;
  2. Set the pop-up 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 a user can’t change. If the text doesn't fit the window, a vertical scroll bar automatically appears. You can close the window by click on the standard x button at the right corner.

You can format the text by using HTML. If the text will be written without any markup tags, then it will be shown as a uniform paragraph (default font - Arial, font size - 19).

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

For all paragraphs the default font 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

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

Hint

Click on the hotspot doesn’t cause any action. When the mouse pointer hovers the hotspot area, its hint appears as a text at the top of the screen.

How to export panorama on Tumblr

Choose the text post button at your Tumblr dashboard (left button on the top of the page). Then press the "html" button in the new post and insert the iframe code of your panorama or your virtual tour from the export page in the Makevt tour editor.

It is worth to change width and height parameters in code so the tour will fit by size in your Tumblr blog template. We use width="500" height="390".

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 panorama engine, 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 are loaded one by one.

Exported tours

We don't embed krpano license in exported tours, so if you run the 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 Makevt and krpano at the bottom of the screen if there is no license.

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:

Makevt 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 a simple map, which can change it’s size (full or mini) by clicking on it:

  1. Create a folder “map”;
  2. Put the image with your map in the folder “map” (for example, it can be “map.png”);
  3. Open “main.xml” file in your XML editor and copy the code from the 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 makes the 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 makes the 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 the bottom right corner (mini state - height: 20% of the screen height, width: according to the aspect ratio of “map.png”). If you click on the map, it becomes bigger (full state - height: 80% of screen height, width: according to the aspect ratio of “map.png”). If you will resize the browser window, then the map will be resized too.

Adding active points to the map

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

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

Example:

<!--Map active points-->
<!--Map the point for the 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 the point for the 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 the second panoramas. When mouse hovers active point, its hint appeares near the cursor (for first_scene - First scene). If the map sizes are changed, then then the active points will resize too (because of the 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 the list may be used for different actions, but in most cases they are used for list with the links to the 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 the 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 a 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