Online Virtual Tours

One Click Is Enough To Create An Online Virtual Tour

The Online Virtual Tour Creator supports several image formats and lets you create Virtual Tours from the scratch in just two clicks:

  • A click from your camera to capture 360 degree around in a single exposure.


  • A click from your mouse to transform the picture into an Interactive Virtual Tour.


With your own camera and free.



 

Parabolic Mirrors


Contact Information
contacto

360 Facil

Barcelona, España

Buenos Aires, Argentina

Santiago, Chile

Contact Us

E-Mail : info@360facil.com


Retractable Parabolic Mirror


Forum

Find An Answer To Your Enquiry Entering The Forum


This is the place to ask for data you didn't find elsewhere and also a good spot to help others with your knowledge :


 

Newsletter
Subscribe To Our Newsletter

To be notified of major updates to our site and/or other related info please type in your email adress :




 

Recommended

A Minimal Investment To Update Your Online Real Estate Agency

Offer more and better services to your clients by showing your Real Estate Portfolio in 360 degree Virtual Tours. Nothing is more alike to actually being in the place and you can do it yourself with the same ease as you do it with traditional pictures.
Read more...



The Ideal Complement To Any Website

Every Webmaster can notoriously improve his/her services by adding to them interactive Virtual Tours that he/she can do with his/her own equipment and in as little as two clicks.
Read more...



The Freeware Programs That Will Do All The Job

Depending on the panorama type, the combination of this four free programs, three, two, one or even none of them is all the multimedi photographer needs to complete his/her work.
Read more...


Renovated Online Virtual Tour Creator : improved design, Facebook comments box for each Virtual Tour, internal engine optimized for greater speed, compatibility with more browsers and increased security.


Publish As Interactive



On this page we'll see how to publish a 360 degree video as an interactive animation in motion.


We had started from two video files showing 360 degree donut like movies, then we went on to convert them into frames, unwrap these into panorama shapes, match the images in size, convert these back into a video and finally encoded it as a flash file to make its download more convenient from webpages while watching it :





To make our video interactive we must combine it with several elements so to make this construction more clear we'll create a new empty folder which we'll call video_interactivo (interactive video) :





Within this folder we'll place all the necessary files to animate and make the 360 interactive movie using . These include the encoded video we have created at the previous step which for more prolixity we'll rename video_interactivo.flv along with a series of files, some of which will go for further order within a sub'folder named archivos (files) :





The Files


Click to download all files and unzip the contents into an empty folder as shown above. Alternatively we could opt to download each element apart and save each one of them with the name appointed at the link :



archivos.rar

video_interactivo.htm

video_interactivo.xml

PanoPlayer_v40.swf

video_interactivo.flv

PanoramaCtrl.xml

VideoCtrl.xml

AC_RunActiveContent.js



Of you jhave choosen the latest option you will still need to unzip the images contained within archivos.rar to a folder named archivos which will be placed as a sib-folder within the already created video_interactivo sub-folder. These files are subsidiary images used by Ryubin's Panorama Player as buttons for control, background images, etc. It is not necessary that all files are in the folder, but their weight very little and so it is convenient to have them handy when we decide, say, une a different set of buttons or a different background image for our images or videos animated by Ryubin's Flash Panorama Player :





video_interactivo.htm is the webpage where the interactive 360 degree video is emebeded.

video_interactivo.xml contains the configuration settings of the interactive video and it is where all its details are defined such as dimensions, location in the screen, background colors and images, items to be included into the context menu, starting position of the image, rotating speed, field of view, etc.

PanoPlayer_v40.swf is Ryubin's program that makes all movement possible, both the sequential movie's movement and the user's interactive one and the apparent changes in the image such as perspective alterations when the mouse is moved up or down, etc.

video_interactivo.flv is the 360 degre encoded video we have created all along this tutorial which for our convenience we have renamed this way.

PanoramaCtrl.xml contains the settings of half the control buttons, ie, those corresponding to the panorama functions such as automatic rotation, zoom, full screen, etc.

VideoCtrl.xml contains the setting for the other half of the control buttons, those dealing with video functions such as play, pause, restart, etc.

AC_RunActiveContent.js is an aditional script or command and so it's not essential but nevertheless it is very convenient to use it for 360 degree interactive video publishing, withour requiring he user's confirmation on an alert window avoiding this way to force the page to be refreshed. This does not only make navigating the video faster but also gives the users of the content a greater of more confidence, as they are shown no alerts of any kind.

The look and feel of the 360 degree interactive video depends on the interaction of all these files :





The Web Page


To get started we'll work with the video_interactivo.htm file which is the webpage where the interactive video is embeded. To edit this and the rest of files we'll use simultaneously a text editor and a browser. While the browser shows us the page, the text editor shows us its code. Is you are not familiar with the edition of html codes you'll find this reference about embeding flat panoramas into webpages useful.

The code corresponding to the video_interactivo.htm file is as folows :



<html>
<head>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<embed src="PanoPlayer_v40.swf" width="300" height="200" allowScriptAccess="always" quality="high" play="true" loop="true" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" FlashVars="playmode=cylindervideo&xml_path=video_interactivo.xml"></embed>
</body>
</html>


As we can see, all references to external files have been highlighted in red color. If all elements are place in their respective locations the interactive video should be already working. Analizing the code we find that un the page's header, between the <head> and </head> tags is executed the script located at the external file AC_RunActiveContent.js. Next, in the body of the page between the and tags we find ither references to external files. One of these embeds the interactive video into the webpage by including a refererence to the Flash PanoPlayer_v40.swf element's location adding within the same tag some parameters for configuring :



Defined Parameters


The parameters we have added to the <embed> tag that inserts the intractive video into the web page are listed below :



width is the width of the presentation in pixels.

height is the height of the presentation in pixels.

allowScriptAccess allows to execute external scripts over the presentation when its value is always.

quality defines the quality of the image which could be high, medium or low.

play lets the presentation play instead of staying still when its value is true.

loop menas that the video play will repeat indefinitely by joining the last frame to the first one to go on looping.

allowFullScreen with a value of true allows for the interactive video to be displayed in full screen mode.

wmode defines if the presentation float in front of certain elements in a webpage or otherwise these float in front of the presentation.

type specifies the type of the tag's active content.

pluginspage is a reference to an external file. In this case, if the page detects that the user's computer does not have the Flash plugin required for this kind of presentations installed, ot will display a link to download it from the http://www.adobe.com/go/getflashplayer url.



Finally, the FlashVars or Flash variables are used to send the program several preferences necessary for its configuration.



Flash Variables


Ryubin's Flash Panorama Player supports the Flash variables detailed below for 360 degree interactive videos :



mode determines the projection mode according to which the contents are executed.

xml_path is the access route to the .xml configuration file of the interactive video.

img_path is the access route to the video file.

fov is the initial vertical field of view of the 360 degree video.

pitch is an horizontal displaceent of the video image respect to the original coordinates and it is measured in pixels.

yaw is a vertical displacemente of the video that gives it a certain tilt to a side and it is measured in degrees.

smooth defines if a smoothing filter that makes borders and contrasts in the image softer must be active or not at the beginning of the activity.

top is the maximum limit in degrees that can be reached within the interactive video by dragging up the mouse.

bottom is the maximum limit in degrees that can be reached within the interactive video by dragging down the mouse.



As we can see the code of the video_interactivo.htm file does olny introduce two Flash variables which we highlight in green color. The contents of the rest of variables will be set, together with other parameters, in a separate configuration file.



The Configuration File


To configure the interactive video using Flash variables is appropriate when the advanced settings of our interactive video match ryubin's Flash Panorama Player's default one. However, for greater control over the available variables of the program we can use a configuration file defined, as shown in the code of the page, in a reference to an external file in the Flash Variables named xml_path or access path to the configuration file.

The configuration file in our example is video_interactivo.xml and its contents are as folows :



<my_params>
<stage>
<panowindow width="300" height="200" fullstage="no"/>
<panorama_controller xml_path="PanoramaCtrl.xml"/>
<video_controller xml_path="VideoCtrl.xml"/>
</stage>
<play_objects>
<image path="video_interactivo.flv"/>
<projection elevation="40" depression="56"/>
<view init_fov="120" init_pitch="-8" init_filter="no" limit_vertical="yes" limit_horizontal="no" top_limit="40" bottom_limit="56" seg_lock="medium" quality_lock="no"/>
<image video_repeat="yes"/>
<auto init_start="yes" pan_speed="-0.3" tilt_amplitude="7" tilt_cycle="120"/>
<behavior load_on_start="yes" wait_for_preload="no" preload_minimum="0.2" preload_start="0.95" preload_stop="0.8" pause_on_start="yes" start_button="yes""/>
</play_objects>
</my_params>


Also in this case we have highlighted in red the links from the configuration file to external files. In this file we define both the setting of the presentation itself and the interactive video it contains.



Presentation Settings


The look of the presentation is defined between a pair of <stage> and </stage> tags :



Panowindow defines the active part of the presentation, ie, the area included in the viewer in which actually the interactive video is displayed. The parameters we use to define it are below :

width is the width of the active part of the presentation measured in pixels.

height is the height of the active part of the presentation measured in pixels.

fullstage with a value of yes defines that the starting mode of the presentation is full screen and with a value of no it's otherwise.

panorama_controller and video_controller are the access paths to the configuration files of both control button's sets, which are defined in separate external files and so we have highlited them in red. Their inclusion implies that the interactive video will have an external set of video control buttons and another set with panorama controls, whose details are also in the external files named PanoramaCtrl.xml and VideoCtrl.xml.



Interactive Video Settings


The functioning of the 360 degree interactive video itself is defined through the elements included between the <play_objects> and </play_objects> pair of tags :



image path is the access route tot the external video file to be played and so we highlight it too in red.

elevation defines the height in degrees that the upper half of the video will extend over the horizon. Likewise, depression defines the height in degrees the the lower half of the image will extend below the horizon. Editing this values together with the ones explained next allows us to adapt the projection to the interactive video properties.

init_fov is the vertical field of view when the interactive video is started.

init_pitch is a horizontal displacement of the video image from its original coordinates measured in pixels identical to that which could be set by the pitch Flash variable.

init_filter commands if a filter that makes borders and contrasts in the image smoother should be active or not when the playing starts and it's the equivalent of the smooth Flash variable.

top_limit and bottom_limit are the maximum limits in degrees that can be reached moving the mouse both up and down within the interactive video and they only work in conjunction with limit_vertical=yes. It is convenient that the contain values just below the ones used respectively for both elevation and depression for the video to have and ample vertical span.

limit_vertical and limit_horizontal have two possible values : yes for the interactive video to rotate indefinitely in the specified way and no to define a maximum rotation limit.

top_limit and bottom_limit are the maximum limit in degrees that can be seen by dragging up and down the mouse cursor into the interactive video and they only work in conjunction with limit_vertical=yes. It is advisable that they contain values just below tho ones used respectively for elevation and depression for the Virtual Tour to have an ample vertical span.

seg_lock and quality_lock define the quality of the image for the video both moving or paused.



Automation


The automated behavior of the interactive video is defined through the following parameters distributed between three tags named image, auto and behavior :



image video_repeat with a value of yes allows for the video to be played again after finalizing and otherwise with a value of no.

init_start with a value of yes defines that the video is executed whent the page loads and otherwise with a value of no.

pan_speed is the panning speed of the interactive video when it is playing without being manually dragged.

tilt_amplitude is the measure in degrees of the vertical spanning while the video plays automatically.

tilt_cycle is the span in degrees of a vertical displacement cicle.

load_on_start with a value of yes defines that the video file starts loading adter the page is loaded and otherwise with a value of no.

wait_for_preload with a value of yes defines that the interactive video will only playing once the percentage of the video file which is downloading reaches the figure specified in the next parameter and otherwise with a value of no.

preload_minimum is the minimum percentage that the video file needs to have loaded before the video action can start.

preload_start defines as a percentage the condition required to be achieved the level of pre-load that will enable functions that can only be triggered once this download threshold has been reached.

preload_stop defines a load percentage of the video file after reaching which the download process continuity is stopped.

pause_on_start with a value of yes defines that the interactive video will remain paused from loading until it is manually activated and otherwise with a value of no.

start_button with a value of yes displays a superimposed button over the video that triggers the action and with a value of no this is not displayed.



The Control's Configuration Files


As we have seen, the setting of the 360 degree interactive video controls takes place in external files. The control bar of it is really two separate bars which we have aligned in such a way that they seem just one bar while in fact they are two : one controls the functions relative to the panoramic projection itself, such as screen mode, zoom or projection mode. The other controls the functions relative to the video action, such as advance, rewind, pause, etc.

The panorama controls are defined in the PanoramaCtrl.xml file whose code is as follows :



<?xml version = '1.0'?>
<panorama_controller>
<object>
<pos_x>0</pos_x>
<caption></caption>
<up_path>archivos/auto_start01.png</up_path>
<over_path>archivos/auto_start02.png</over_path>
<down_path>archivos/auto_start03.png</down_path>
<action>auto_start</action>
</object>
<object>
<pos_x>25</pos_x>
<caption></caption>
<up_path>archivos/auto_stop01.png</up_path>
<over_path>archivos/auto_stop02.png</over_path>
<down_path>archivos/auto_stop03.png</down_path>
<action>auto_stop</action>
</object>
<object>
<pos_x>50</pos_x>
<caption></caption>
<up_path>archivos/display01.png</up_path>
<over_path>archivos/display02.png</over_path>
<down_path>archivos/display03.png</down_path>
<action>full_scr</action>
</object>
<object>
<pos_x>75</pos_x>
<caption></caption>
<up_path>archivos/smooth01.png</up_path>
<over_path>archivos/smooth02.png</over_path>
<down_path>archivos/smooth03.png</down_path>
<action>smooth</action>
</object>
<object>
<pos_x>100</pos_x>
<caption></caption>
<up_path>archivos/minus01.png</up_path>
<over_path>archivos/minus02.png</over_path>
<down_path>archivos/minus03.png</down_path>
<action>minus</action>
</object>
<object>
<pos_x>125</pos_x>
<caption></caption>
<up_path>archivos/plus01.png</up_path>
<over_path>archivos/plus02.png</over_path>
<down_path>archivos/plus03.png</down_path>
<action>plus</action>
</object>
</panorama_controller>


As we can see, also in this case we use red characters to identify the external files we use as images for the control buttons. Each object or button included consists of the following elements that define it :



pos_x is the position of the item on the axis X. ie, the distance from the left border of the button set to the begining of the item.

caption is a text that pops up to tells the user the function triggered by each button. If void no text is shown.

up_path is the access path to the image file showing the button at default state.

over_path is the access path to the image file showing the button when the mouse cursor hovers over it.

down_path is the access path to the image file showing the button when clicked on.

action is the action to be executed by the interactive video when any certain control button is clicked on.



The video control configuration file VideoCtrl.xml, is similar to the previous one :



<?xml version = '1.0'?>
<sound_controller>
<object>
<caption></caption>
<up_path>archivos/rewind01b.png</up_path>
<over_path>archivos/rewind02b.png</over_path>
<down_path>archivos/rewind03b.png</down_path>
<action>rewind</action>
</object>
<object>
<caption></caption>
<pos_x>25</pos_x>
<up_path>archivos/right01.png</up_path>
<over_path>archivos/right02.png</over_path>
<down_path>archivos/right03.png</down_path>
<action>play</action>
</object>
<object>
<caption></caption>
<pos_x>50</pos_x>
<up_path>archivos/pause01b.png</up_path>
<over_path>archivos/pause02b.png</over_path>
<down_path>archivos/pause03b.png</down_path>
<action>pause</action>
</object>
<object>
<category>image</category>
<pos_x>85</pos_x>
<path>archivos/prog_back01.png</path>
<width>54</width>
<role>prog_back</role>
</object>
<object>
<category>image</category>
<pos_x>85</pos_x>
<path>archivos/prog_loaded01.png</path>
<width>54</width>
<role>prog_loaded</role>
</object>
<object>
<category>image</category>
<pos_x>85</pos_x>
<path>archivos/prog_played01.png</path>
<width>54</width>
<role>prog_played</role>
</object>
<object>
<caption></caption>
<pos_x>85</pos_x>
<up_path>archivos/prog01.png</up_path>
<over_path>archivos/prog02.png</over_path>
<down_path>archivos/prog03.png</down_path>
<action>change_playpos</action>
</object>
<object>
<category>text</category>
<pos_x>93</pos_x>
<pos_y>-16</pos_y>
<caption>00.00</caption>
<width>40</width>
<height>17</height>
<role>pos_indicator</role>
</object>
</sound_controller>


In this case, besides the control buttons similar to those controlling the panorama functions we find some new elements :



category serves to define the type of element to be inserted.

width is the width of the image measured in pixels.

role tells the type of element is represented.

pos_y defines in pixels a displacement over the vertical axis Y.



Context Menu


Just as Virtual Tours from static panoramas, also interactive 360 degree videos can be enriched by th adition of context menus to access certain functions. This can be achieved by adding items to the configuration file. Ryubin's Flash Panorama Player's basic context menu looks like this :





To modify it we'll add a new element to the configuration file surrounding it between a <context_menu> and </context_menu>pair of tags. Within this structure we'll define three items, each one associated to an action : hide the panorama control buttons, hide the video control buttons and toogle full screen mode. With the inclusion of the context_menu element the code of the video_interactivo.xml configuration file looks like this :



<my_params>
<stage>
<panowindow width="300" height="200" fullstage="no"/>
<panorama_controller xml_path="PanoramaCtrl.xml"/>
<video_controller xml_path="VideoCtrl.xml"/>
</stage>
<context_menu>
<panorama_controller show_item="yes" on_caption="Mostrar Controles De Panorama" off_caption="Ocultar Controles De Panorama" />
<video_controller show_item="yes" on_caption="Mostrar Controles De Video" off_caption="Ocultar Controles De Video" />
<full_screen show_item="yes" on_caption="Mostrar en Pantalla Completa" off_caption="Mostrar en Pantalla Normal" />
</context_menu>
<play_objects>
<image path="video_interactivo.flv"/>
<projection elevation="40" depression="56"/>
<view init_fov="120" init_pitch="-8" init_filter="no" limit_vertical="yes" limit_horizontal="no" top_limit="40" bottom_limit="56" seg_lock="medium" quality_lock="no"/>
<image video_repeat="yes"/>
<auto init_start="yes" pan_speed="-0.3" tilt_amplitude="7" tilt_cycle="120"/>
<behavior load_on_start="yes" wait_for_preload="no" preload_minimum="0.2" preload_start="0.95" preload_stop="0.8" pause_on_start="yes" start_button="yes"/>
</play_objects>
</my_params>


As we can see, each item is configured within its own tag through the use of the same parameters :



show_item supports as values yes or no and defines if the item is shown or hidden while loading the context menu.

on_caption is the text that displays the button that triggers the function related to the item while this function is active.

off_caption is the text that displays the button that triggers the function related to the item while this function is inactive.



The new look of the extended context menu shows the functions we have added to the code :





To know in full depth all options settings available to Ryubin's Flash Panorama Player we recommend to check out Ryubin's Flash Panorama Player User Guide (pdf in english). If all files of our example are in the set place and their contents are those we have edited, the interactive 360 degree video we have built all along this page should look like this :





At the introduction to this chapter is embedded the full version, fifteen shots in seven and a half minute, of this tutorial's video.




Ryubin's Flash Panorama Player


Plattaforms : Windows, Mac, Linux, Android.
Languages : English.
License : Freeware.
Open source : Si.
Weight : 167 Kb.
Download : sample.zip.
Version in tutorial : PanoPlayer_v40.swf (Save As to save the .swf file).
More information : .




Visitor's Feedback


Add A Question Or Comment


All fields are optional. Messages not regarding the subject may be moderated.


Write 123 here (anti-spam check)

Send me a reminder of this publication.






If you like 360 Facil please share it with your social networks

  


With any camera


360 Degree Interactive Panoramas
In Three Easy Steps



After reading this tutorial you'll be able to create your first 360 degree interactive photography with the camera you already have :

1 - Photograph
1 - Fotografiar

Take one or more pictures of the place you want to show.

2 - Edit
2 - Editar

Convert your pictures into 360 degree panoramas.

3 - Publish
3 - Publicar

Make your panoramas interactive and available to the world on the internet.

Start Tutorial

If a picture is worth a thousand words, a 360 degree interactive panorama is worth a thousand pictures...

Recommended...!!!


Online Virtual Tour Creator



Using the online virtual tour creator you can :


Convert your 360 degree pictures to virtual tours with a single click.


Insert your virtual tours into web sites, emails, blogs or wherever you like by just copying and pasting a text.


Know in a practical way all kinds of 360 degree pictures.


Discover that you can create hundreds of interactive virtual tours just as easily as you take pictures with your camera.


Check that with just one click from your camera and another click from your mouse it is possible to create a 360 degree interactive virtual tour out of nothing. And completely free of charge!!!


You can get started right now, even if you don't have a camera



Create Virtual Tour Now



Find us in Facebook and thank you for your Like.