Advanced Tutorial:: How to make a virtual tour with MakeVT
- Types of panoramas
- What is a hotspot?
- Creation of an image hotspot
- Creation of a polygonal hotspot
- Types of hotspots
- How to export on Tumblr
- After export
- Adding image of map
- Adding active points on map
- How can you identify x/y coordinates of active points?
In current version of MakeVT only spherical and cylindrical panoramas are supported. Spherical pano must have aspect ratio 2:1. If a pano has another aspect ratio, then it will be loaded as a cylindrical one. File format - jpg. Maximum size - 50 Mb.
Hotspot is an area in the panorama, which react 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) 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).
- In hotspot editor select a panorama at the list on the left side of the screen and then click on "Add hotspot" or just "space" on keyboard. You will switch in Adding mode, in which you can create polygonal and image hotspots;
- 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 a new position;
- Click "Save hotspot". You will switch in Hotspot settings window, where you can:
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;
- Save the hotspot by clicking "Submit".
Polygonal hotpost - is a polygon area on 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.
- In hotspot editor click on "Add hotspot". You will switch in Adding mode, in which you can create polygonal and image hotspots;
- Click on the panorama to the point where you want to place the start point of the polygonal hotspot. A circle icon appears in this place. In such way you can place all points of the polygonal area. You may delete the last point by clicking “Undo last action” or “Q” button of keyboard;
- Click "Save hotspot". You will switch in Hotspot editor, where you can: 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;
- Save the hotspot by clicking "Submit".
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 appeares as text at the top of the screen.
Clicking on the hotspot loads another panorama.
The user should to:
- Choose the panorama which will be loaded;
- Set start direction of the center of field of view in a new panorama. To do this you should drag the "eye" to the corresponding point of the new panorama;
- Set the size of the field of view (in degrees,10…120).
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 the window.
The user should to:
- Upload the image in .jpg format and no larger than 5 MB;
- Set the window’s width and height in pixels.
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 the 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:
- \<h> ...\</h> - new header (font size - 23, text align - center);
- \<sh> ...\</sh> - new subheader (font size - 20);
- \<p> ...\</p> - new paragraph (font size - 19);
- \<br/> - break line. Can be used to insert a blank line between paragraphs: \<p> ...\</p> \<br/> \<p> ...\</p>;
- \<a href="url">Link text\</a> - to create a link to another url or a bookmark inside the text;
- \<b>...\</b> - bold; \<i>...\</i> - italic; \<u>...\</u> - underlined.
Clicking on the hotspot opens url in a new browser window.
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.
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 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:
- index.html - you can start tour by double clicking on this file;
- krpano.swf - krpano flash player;
- 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
- 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:
- plugins - krpano plugins for pop-up windows with text;
- 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;
- tiles - panoramas preview and tiles;
- touricons - icons for image hotspots;
- toursimages - jpg-images, which are included in tour.
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.
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 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.
<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>
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.
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.
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.
Let’s create a simple map, which can change it’s size (full or mini) by clicking on it:
- Create a folder “map”;
- Put the image with your map in the folder “map” (for example, it can be “map.png”);
- Open “main.xml” file in your XML editor and copy the code from the 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.
Let’s add active points on map, which show the locations of panoramas and links to them.
- Put the image of the active point in the folder “map” (for example, it can be “point.png”);
- Open “main.xml” file in your XML editor and insert the code from the example after the action “openmap”.
<!--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”).
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!
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.
- Put combobox.swf in the folder plugins;
- Open main.xml file in your XML editor and set the position of the combobox and functionality of it’s items.
<!--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
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.
- Put options.swf in the folder plugins;
- Open main.xml file in your XML editor and add code from 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