Tours Virtuales Online

Un Click Es Suficiente Para Crear Un Tour Virtual Online

El Creador de Tours Virtuales Online admite varios formatos y le permite crear Tours Virtuales de la nada en apenas dos clicks:

  • Un click de su camara para capturar 360 grados en una sola toma.


  • Un click de su mouse para transformar la fotografia en un Tour Virtual Interactivo.


Con su propia camara y gratis.



 

Espejos Parabolicos


Informacion De Contacto
contacto

360 Facil

Barcelona, España

Buenos Aires, Argentina

Santiago, Chile

Contáctenos

E-Mail : info@360facil.com


Espejo Parabolico Retraible


Foro

Encuentre Respuesta A Sus Dudas Entrando Al Foro


Este es el lugar donde preguntar aquello que no encontro y tambien un buen sitio para ayudar a otros con su conocimiento :


 

Gacetilla
Reciba Nuestra Gacetilla

Para recibir actualizaciones de nuestro sitio e info relacionada por favor ingrese su email :




 

Destacados

Una Inversion Minima Para Modernizar Su Inmobiliaria Online

Brinde mas y mejores servicios a sus clientes mostrando su cartera de inmuebles en Tours Virtuales de 360 grados. Nada mas parecido a estar realmente en el lugar y puede hacerlo usted mismo y con la misma facilidad conque lo hace con fotografias tradicionales.
Ver mas...



El Complemento Ideal Para Todo Sitio Web

Todo webmaster puede mejorar notoriamente sus servicios incorporando a su oferta Tours Virtuales interactivos que puede hacer por si mismo, con sus propios equipos y en tan poco como dos clicks.
Leer mas...



Los Programas Gratuitos Que Haran Todo El Trabajo

Dependiendo del tipo de panorama, la combinacion de estos cuatro programas gratuitos, tres, dos, uno o aun ninguno de ellos es todo lo que necesita el fotografo multimedia para realizar su tarea.
Leer mas...


Creador de Tours Virtuales Online Renovado : diseño mejorado, casilla de Comentarios de Facebook individuales para cada Tour Virtual, funcionamiento interno optimizado para mayor velocidad, compatibilidad con mas navegadores y seguridad incrementada.


Publicar Panoramas Interactivos En Flash



En esta pagina explicaremos en detalle como publicar un panorama interactivo basado en Flash con completo manejo de todas las variables. El Tour Virtual se crea en un equipo local sin necesidad de conexion a Internet para funcionar y, una vez creado, puede ser distribuido en cds, pen drives o medios semejantes, o alojado en un servidor para ser accesible a traves de la web.


Cuando decimos que la publicacion esta basada en Flash queremos decir que el programa, codigo o instruccion que permite la animacion e interaccion con el Tour Virtual no contiene en si mismo todas las instrucciones necesarias sino que parte de estas instrucciones necesitan estar instaladas previamente en la computadora desde donde se quiera acceder a la animacion.

La inmensa mayoria de las computadoras existentes en el mundo ya tienen instalado el entorno de ejecucion de Flash o el mismo es facilmente instalable sin necesidad de reiniciar el equipo. Una gran parte de los contenidos interactivos existentes en Internet utilizan Flash sin que usted se de cuenta.

De los muchos visores de panoramas basados en Flash, elegimos para esta implementacion nuestro favorito, el Ryubin Pano Player, que es el programa que hemos utilizado preferentemente en todo nuestro sitio web, que es gratuito para cualquier uso y altamente configurable.



Configuracion Basica Para Un Panorama Cilindrico


La configuracion minima para animar un panorama interactivo con Ryubin Pano Player requiere cuatro elementos vinculados entre si mediante referencias similares a las que hemos venido utilizando en los ultimos capitulos. Estos elementos son la fotografia panoramica, la pagina web, la instruccion de animacion y un script adicional. Para tener todos los elementos a la vista simultaneamente, en este caso los guardaremos a todos en una misma carpeta a la que denominaremos Flash :





Haga click aqui para descargar los cuatro elementos juntos y descomprima el archivo a una carpeta vacia como se ve mas arriba. Alternativamente puede optar por descargar cada elemento por separado y guardar cada uno con el nombre de archivo indicado en el vinculo :



AC_RunActiveContent.js

RyubinPanoPlayer5.swf

panorama_cilindrico.jpg

pagina.htm



El archivo RyubinPanoPlayer5.swf es la instruccion que permite todo el movimiento, la interaccion del usuario con el panorama y los cambios aparentes en la imagen tales como las alteraciones en la perspectiva cuando el mouse se mueve hacia arriba o hacia abajo.

El archivo AC_RunActiveContent.js es una instruccion o script adicional. Su funcion es evitar que al cargarse el panorama en una ventana de Internet Explorer el navegador detenga la ejecucion desplegando una ventana que advierte al usuario que esta por ejecutar un comando Active-X. El usuario se ve entonces forzado a aceptar y actualizar la pagina para continuar. Esto no solo es inconveniente porque provoca una demora, sino que muchos usuarios podrian desconfiar del contenido y decidir no ejecutar el panorama. Este archivo permite la ejecucion directa del panorama en cualquier navegador y en cualquier caso no tendria sentido evitarlo pues ello nos obligaria a cambiar totalmente el codigo de la pagina web.

El archivo de imagen panorama_cilindrico.jpg, que se ve asi :




El archivo pagina.htm que es la pagina web que contiene en su codigo referencias a los tres archivos anteriores. Trabajaremos como siempre con este archivo abierto simultaneamente por dos programas : un navegador y un editor de texto :





Mientras que el navegador nos muestra la pagina, el editor de texto nos muestra su codigo :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=cylinder&
img_path=panorama_cilindrico.jpg&
fov=70&
elevation=45&
depression=45&
limit_vertical=yes&
top_limit=44&
bottom_limit=44
',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


Como puede verse, hemos destacado en color rojo las referencias incluidas en la pagina web a los archivos externos. Basta con tener estos cuatro elementos en una misma carpeta para que el Tour Virtual incluido en el archivo pagina.htm funcione. Tambien hemos señalado en verde las variables de Flash utilizadas para cargar informacion adicional para la creacion del Tour Virtual interactivo. Estas van cambiando de acuerdo al tipo de imagen utilizada como base.



fov es el angulo de vision inicial de la proyeccion y para que exista posibilidad de desplazamiento vertical en el panorama debe ser menor que la suma de los dos parametros explicados a continuacion.

elevation define el alto en grados a que se extendera por encima del horizonte la mitad superior de la fotografia. Analogamente depression señala el alto en grados a que se extendera por debajo del horizonte la mitad inferior de la imagen. Manipular estos valores en conjuncion con los que se explican en el proximo parrafo permite adecuar la proyeccion a las caracteristicas del panorama. Por ejemplo si ha fotografiado un panorama en varias tomas apuntando la camara con una inclinacion fija respecto de la horizontal, la linea del horizonte se ubicara por debajo o por encima de su posicion natural en el centro del panorama, provocando en este deformaciones que pueden ser corregidas aplicando valores diferentes a la elevation y la depression de la imagen.

top_limit y bottom_limit son el limite maximo en grados hasta el que puede verse respectivamente subiendo o bajando con el mouse dentro del Tour Virtual y solo funcionan en conjuncion con limit_vertical=yes. Es aconsejable que contengan valores apenas por debajo de los utilizados respectivamente para elevation y depression para que el Tour Virtual tenga amplitud vertical.

limit_vertical y limit_horizontal tienen dos valores posibles : yes para que el Tour Virtual pueda girar indefinidamente en el sentido especificado y no para definir un limite maximo de giro.



Los valores adjudicados a estas variables son en promedio adecuados para este tipo panoramas cilindricos pero es recomendable hacer algunos experimentos modificando valores para ver de que manera los cambios provocan diferentes efectos en el Tour Virtual y encontrar los valores mas adecuados para su propio ejemplo. La configuracion basica para un Tour Virtual Con Un Panorama Cilindrico muestra una ventana con el panorama que puede arrastrarse pero no gira por si mismo. La imagen puede alejarse o acercarse girando la rueda del mouse pero carece de botones con controles y tampoco tiene funciones que puedan activarse al hacer click con el boton derecho del mouse. Todos estas caracteristicas y otras pueden agregarse y lo haremos, pero antes veremos como crear visitas virtuales a partir de otros tipos de imagen.




Configurar Visor Para Otros Tipos De Panorama


Introduciendo algunos cambios en el codigo basico podemos editarlo para crear Tours Virtuales con diferentes tipos de panorama :


Panorama Esferico



Haga click en la imagen para descargarla y guardela como panorama_esferico.jpg en la carpeta Flash. Para crear un Tour Virtual interactivo a partir de esa imagen abriremos el archivo pagina.htm con un editor de texto para cambiar la linea del codigo donde figuran las referencias al archivo de imagen y al modo de accion :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=sphere&
img_path=panorama_esferico.jpg&
fov=70&
elevation=90&
depression=90&
limit_vertical=yes&
top_limit=130&
bottom_limit=130
',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


Observese que tambien hemos editado los parametros en verde para adecuarlos a las caracteristicas de un Panorama Esferico. Despues de editar el codigo en el editor de textos y guardar el cambio nos dirigimos al navegador para ver la pagina actualizada Tour Virtual con un Panorama Esferico.




Dona de 360 Grados



Haga click en la foto para descargarla y guardela como dona_de_360_grados.jpg en la carpeta Flash. Para crear un Tour Virtual interactivo a partir de esa imagen abriremos el archivo pagina.htm con un editor de texto para cambiar la linea del codigo donde figuran las referencias al archivo de imagen y al modo de accion :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=doughnut&
img_path=dona_de_360_grados.jpg&
fov=70&
elevation=45&
depression=60&
limit_vertical=yes&
top_limit=40&
bottom_limit=59
',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


Notese que para a elevation de 45 grados hemos acoplado un top_limit de apenas 40 grados. De esta manera hemos ocultado en el Tour Virtual el extremo superior del panorama donde asomaba un area oscura. Despues de editar el codigo en el editor de textos y guardar el cambio nos dirigimos al navegador para ver la pagina actualizada Tour Virtual con una Dona De 360 Grados.


Disparo De Ojo De Pez Horizontal



Haga click en la foto para descargarla y guardela como disparo_de_ojo_de_pez_horizontal.jpg en la carpeta Flash. Para crear un Tour Virtual interactivo a partir de esa imagen abriremos el archivo pagina.htm con un editor de texto para cambiar la linea del codigo donde figuran las referencias al archivo de imagen y al modo de accion :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=fisheye&
img_path=disparo_de_ojo_de_pez_horizontal.jpg&
fov=70&
top_limit=90&
bottom_limit=90&
elevation=90&
depression=90
',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


Como siempre, hemos editado los parametros basicos en letra verde para adecuarlos a la logica de proyeccion del tipo de imagen utilizada. Despues de editar el codigo en el editor de textos y guardar el cambio nos dirigimos al navegador para ver la pagina actualizada Tour Virtual con un Disparo De Ojo De Pez Horizontal.


Disparo De Ojo De Pez Vertical



Haga click en la foto para descargarla y guardela como disparo_do_ojo_de_pez_vertical.jpg en la carpeta Flash. Para crear un Tour Virtual interactivo a partir de esa imagen abriremos el archivo pagina.htm con un editor de texto para cambiar la linea del codigo donde figuran las referencias al archivo de imagen y al modo de accion :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=verticalfisheye&
img_path=disparo_de_ojo_de_pez-vertical.jpg&
fov=70',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


Despues de editar el codigo en el editor de textos y guardar el cambio nos dirigimos al navegador para ver la pagina actualizada Tour Virtual con un Disparo De Ojo De Pez Vertical.


Panorama Parcial



Haga click en la foto para descargarla y guardela como disparo_do_ojo_de_pez_vertical.jpg en la carpeta Flash. Para crear un Tour Virtual interactivo a partir de esa imagen abriremos el archivo pagina.htm con un editor de texto para cambiar la linea del codigo donde figuran las referencias al archivo de imagen y al modo de accion :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=simpleflat&
img_path=panorama_parcial.jpg&
fov=70',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


Despues de editar el codigo en el editor de textos y guardar el cambio nos dirigimos al navegador para ver la pagina actualizada Tour Virtual con un Panorama Parcial.


Como Personalizar Mas Opciones Utilizando Un Archivo De Configuracion XML



Reemplazar Las Variables De Flash Por Un Archivo De Configuracion


Basta vincular al sistema un quinto archivo de formato .xml para poder almacenar en el mismo mas caracteristicas para incluir en la construccion del Tour Virtual en Flash. A continuacion reeditaremos nuestro primer Tour Virtual agregando un archivo de configuraciones, que lo convertira en una experiencia mucho mas rica y personalizada.

Para ello eliminaremos la mayoria de las variables de Flash incluidas en el codigo de la pagina .htm que contiene al Tour Virtual interactivo, y las reemplazaremos por una referencia al nuevo archivo .xml, en donde anotaremos las variables removidas y agregaremos otras hasta ahora no usadas. El codigo del archivo pagina.htm para un panorama cilindrico como el del comienzo de esta pagina ahora se vera asi :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=cylinder&
img_path=panorama_cilindrico.jpg&
xml_path=pagina.xml',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


Ahora que la referencia al archivo pagina.xml esta creada nos falta crear el archivo y ubicarlo en la misma carpeta o en la ubicacion especificada en el codigo. Para ello podemos utilizar un editor de textos o cualquier programa y cambiar el formato a .xml.



El contenido de este archivo va encerrado entre un par de etiquetas :



<my_params>
</my_params>


Lo primero que haremos sera incluir en este archivo la informacion que hemos eliminado de las Variables de Flash que veniamos utilizando antes de incorporar el archivo pagina.xml y lo haremos dentro de un elemento encerrado entre etiquetas <play_objects> y </play_objects> :



<my_params>
<play_objects>
<image path="panorama_cilindrico.jpg" />
<init_filter="no"
init_fov="70"
limit_vertical="yes"
elevation="45"
depression="45"
top_limit="44"
bottom_limit="44"
/>
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100
" />
</play_objects>
</my_params>


image_path define la ruta de acceso al archivo de imagen y en parametros adicionales podemos establecer mas carateristicas para los panoramas :



image_path define la ruta de acceso al archivo de imagen.

init_filter define uno de dos estados posibles (yes o no) para un filtro que, aplicado a la imagen, la suaviza.

init_fov reemplaza a fov de la notacion utilizada en el codigo sin xml.

Dentro del elemento <auto> podemos definir uno de dos valores (yes o no) para init_start o es decir para que la imagen gire automaticamente por defecto.

pan_speed es la velocidad del mencionado giro. tilt_amplitude es la medida en grados que el panorama en su movimiento automatico se desplaza hacia arriba y hacia abajo y tilt_cicle la cantidad de grados que ocupa una oscilacion completa.



Haga click para ver el Tour Virtual con XML.


Como Agregar Una Botonera Con Controles


A continuacion agregaremos una botonera con controles para interactuar con el panorama que puede descargar y guardar en la carpeta Flash con el nombre PanoramaCtrl07.swf :





Este es un archivo provisto junto al Ryubin Pano Player :





Para vincularlo al sistema de archivos la incluiremos en una referencia en el archivo .xml dentro de un elemento definido entre un par de etiquetas <stage> y </stage> :



<my_params>
<stage>
<panorama_controller path="PanoramaCtrl07.swf" posx="0" posy="0"/>
</stage>
<play_objects>
<image path="panorama_cilindrico.jpg" />
<init_filter="no"
init_fov="70"
limit_vertical="yes"
elevation="45"
depression="45"
top_limit="44"
bottom_limit="44"" />
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100" />
</play_objects>
</my_params>


Los parametros opcionales posx y posy señalan la distancia medida en pixeles desde el rincon inferior derecho de la imagen al comienzo de la botonera. Haga click para ver el Tour Virtual con Botonera.




Como Personalizar El Panorama Con Imagenes De Fondo


Las imagenes de fondo del visor de panoramas asi como las que se muestran mientras se espera a que los procesos se completen pueden ser personalizadas desde el archivo pagina.xml. Haga click aqui para descargar las imagenes y descomprima el archivo a la carpeta Flash. Puede descomprimirlas a cualquier carpeta siempre que modifique en consecuencia las lineas de codigo donde se hace referencia a los archivos. Puede incluso almacenar los archivos en una ubicacion especifica en internet y escribir la direccion completa donde encontrarlos. Si desea descargar por separado cada uno de los archivos haga click en los vinculos a continuacion y guardelos con el nombre indicado para cada uno :



background.gif

caption.png

indicator.gif


Vemos los nuevos archivos agregados a la carpeta Flash :





La sintaxis del archivo xml queda como se ve a continuacion :



<my_params>
<stage>
<panorama_controller path="PanoramaCtrl07.swf" posx="0" posy="0"/>
</stage>
<user_loader>
<caption path="caption.png" connecting="" loading="" />
<indicator path="indicator.gif" />
<background path="background.gif" /></user_loader>
<play_objects>
<image path="panorama_cilindrico.jpg" />
<view init_filter="no"
init_fov="70"
limit_vertical="yes"
elevation="45"
depression="45"
top_limit="44"
bottom_limit="44" />
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100" />
</play_objects>
</my_params>


Recomendamos experimentar con distintas imagenes de fondo para entender mejor su uso. Haga click para ver el Tour Virtual con Imagenes de Fondo.




Como Agregar Funciones Al Menu Contextual De Un Tour Virtual


El menu contextual es el menu que se despliega al hacer click con el boton derecho del mouse sobre un Tour Virtual de este tipo o sobre cualquier elemento creado en base a Flash. El menu contextual basico del Ryubin Pano Player se ve asi :



El archivo de configuracion .xml tambien nos sirve para agregar al menu contextual nuevas funciones. En nuestro ejemplo, algunas de ellas replican funciones de la botonera de controles mientras que otras son nuevas :



Para conseguirlo necesitamos crear un nuevo elemento en el archivo .xml y encerrarlo entre etiquetas <context_menu> y </context_menu> dentro del cual definiremos cada nuevo elemento del menu y dos textos a mostrar : el texto a mostrar en modo on cuando el elemento esta activo y el texto a mostrar en modo off cuando el elemento se encuentra desactivado. Ademas debemos incluir el parametro show_item="yes" para que cada elemento sea visible en el menu.


Asimismo, si agregamos elementos definidos por el usuario -el caso de los creditos en este ejemplo- sera necesario incluir dentro de my_params un nuevo elemento encerrado dentro de un par de etiquetas <user_panel> y </user_panel> donde estableceremos la ruta al recurso definido por el usuario. Para el ejemplo utilizaremos el siguiente archivo de imagen :



Mensaje.png



El archivo de configuracion ahora podria verse asi :



<my_params>
<stage>
<panorama_controller path="PanoramaCtrl07.swf" posx="0" posy="0"/>
</stage>
<user_loader>
<caption path="caption.png" connecting="" loading="" />
<indicator path="indicator.gif" />
<background path="background.gif" /></user_loader>
<context_menu>
<panorama_controller show_item="yes" on_caption="Mostrar Botones" off_caption="Ocultar Botones" />
<u_context1 show_item="yes" on_caption="Mostrar Creditos" off_caption="Ocultar Creditos" />
<show_info show_item="yes" on_caption="Mostrar Coordenadas" off_caption="Ocultar Coordenadas" />
<smoothing show_item="yes" on_caption="Menos Contraste" off_caption="Mas Contraste" />
<start_auto show_item="yes" on_caption="Iniciar Rotacion" off_caption="Detener Rotacion" />
<full_screen show_item="yes" on_caption="Mostrar en Pantalla Completa" off_caption="Mostrar en Pantalla Normal" />
</context_menu>
<user_panel>
<u_context1 path="Mensaje.png" />
</user_panel>
<play_objects>
<image path="panorama_cilindrico.jpg" />
<view init_filter="no"
init_fov="70"
limit_vertical="yes"
elevation="45"
depression="45"
top_limit="44"
bottom_limit="44" />
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100" />
</play_objects>
</my_params>


De manera analoga, se pueden agregar mas elementos definidos por el usuario modificando el numero que acompaña la expresion u_context (u_context1, u_context2, etc). Haga click para ver el Tour Virtual con Menu Contextual Ampliado y haga click con el boton derecho del mouse sobre el Tour Virtual para desplegar el menu contextual.




Modos De Proyeccion Esferica


Tambien es posible agregar nuevas funciones al menu contextual que resulten utiles solo para determinados tipos de proyeccion panoramica. Por ejemplo, en un Tour Virtual de proyeccion esferica, la misma puede ser de tres modos diferentes (modo rectilineo, ortogonal o estereografico) y es posible alternar entre ellos recurriendo al menu contextual para elegir el modo.



Configuraremos el siguiente panorama esferico a traves de un archivo .xml :



El codigo a incluir dentro de la pagina que contiene al Tour Virtual puede ser el siguiente :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=sphere&
img_path=panorama_esferico.jpg&
xml_path=pagina.xml',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


El contenido del archivo .xml puede ser el siguiente :



<my_params>
<stage>
<panorama_controller path="PanoramaCtrl07.swf" posx="0" posy="0"/>
</stage>
<user_loader>
<caption path="caption.png" connecting="" loading="" />
<indicator path="indicator.gif" />
<background path="background.gif" /></user_loader>
<context_menu>
<panorama_controller show_item="yes" on_caption="Mostrar Botones" off_caption="Ocultar Botones" />
<u_context1 show_item="yes" on_caption="Mostrar Creditos" off_caption="Ocultar Creditos" />
<show_info show_item="yes" on_caption="Mostrar Coordenadas" off_caption="Ocultar Coordenadas" />
<smoothing show_item="yes" on_caption="Menos Contraste" off_caption="Mas Contraste" />
<start_auto show_item="yes" on_caption="Iniciar Rotacion" off_caption="Detener Rotacion" />
<full_screen show_item="yes" on_caption="Mostrar en Pantalla Completa" off_caption="Mostrar en Pantalla Normal" />
</context_menu>
<user_panel>
<u_context1 path="Mensaje.png" />
</user_panel>
<sphere_context>
<normal show_item="yes" on_caption="-> Proyeccion Rectilinea" off_caption=" Proyeccion Rectilinea" />
<globe show_item="yes" on_caption="-> Proyeccion Ortogonal" off_caption=" Proyeccion Ortogonal" />
<bipolar show_item="yes" on_caption="-> Proyeccion Estereografica" off_caption=" Proyeccion Estereografica" />
</sphere_context>
<play_objects>
<image path="panorama_esferico.jpg" />
<view init_filter="no"
init_fov="100"
limit_vertical="yes"
elevation="90"
depression="90"
top_limit="110"
bottom_limit="110" />
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100" />
</play_objects>
</my_params>


Haga click para ver el Tour Virtual Esferico con Menu Contextual Ampliado y haga click encima del Tour Virtual con el boton derecho del mouse para activar el menu contextual que le permitira alternar entre los tres modos de proyeccion mencionados.


Modos De Proyeccion De Disparos De Ojo De Pez


De la misma manera, los Tours Virtuales interactivos con Disparos de Ojo de Pez tambien admiten tres modos de proyeccion (modo simple, doble y espejo) y la manera de acceder a ellos es a traves del menu contextual via referencias en el archivo de configuracion .xml :



Configuraremos el siguiente panorama esferico a traves de un archivo .xml :



El codigo a incluir dentro de la pagina que contiene al Tour Virtual puede ser el siguiente :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=sphere&
img_path=panorama_esferico.jpg&
xml_path=pagina.xml',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


El contenido del archivo .xml puede ser el siguiente :



<my_params>
<stage>
<panorama_controller path="PanoramaCtrl07.swf" posx="0" posy="0"/>
</stage>
<user_loader>
<caption path="caption.png" connecting="" loading="" />
<indicator path="indicator.gif" />
<background path="background.gif" /></user_loader>
<context_menu>
<panorama_controller show_item="yes" on_caption="Mostrar Botones" off_caption="Ocultar Botones" />
<u_context1 show_item="yes" on_caption="Mostrar Creditos" off_caption="Ocultar Creditos" />
<show_info show_item="yes" on_caption="Mostrar Coordenadas" off_caption="Ocultar Coordenadas" />
<smoothing show_item="yes" on_caption="Menos Contraste" off_caption="Mas Contraste" />
<start_auto show_item="yes" on_caption="Iniciar Rotacion" off_caption="Detener Rotacion" />
<full_screen show_item="yes" on_caption="Mostrar en Pantalla Completa" off_caption="Mostrar en Pantalla Normal" />
</context_menu>
<user_panel>
<u_context1 path="Mensaje.png" />
</user_panel>
<fisheye_context>
<single show_item="yes" on_caption="-> Modo Simple" off_caption="Modo Simple" />
<double show_item="yes" on_caption="-> Modo Doble" off_caption="Modo Doble" />
<mirror show_item="yes" on_caption="-> Modo Espejo" off_caption="Modo Espejo" />
</fisheye_context>
<play_objects>
<image path="disparo_de_ojo_de_pez_horizontal.jpg" />
<view init_filter="no"
init_fov="100"
limit_vertical="yes"
elevation="90"
depression="90"
top_limit="110"
bottom_limit="110" />
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100" />
</play_objects>
</my_params>


Haga click para ver el Tour Virtual De Disparo De Ojo De Pez con Menu Contextual Ampliado y haga click encima del Tour Virtual con el boton derecho del mouse para alternar entre los tres modos mencionados de proyeccion.




Combinaciones De Modos


El archivo .xml nos permite incorporar a un mismo Tour Virtual opciones para acceder a distintos modos de proyeccion caracteristicos de diferentes tipos de panoramas. En el siguiente ejemplo utilizaremos los instrumentos recien descriptos para agregar al menu contextual la posibilidad de variar tanto el modo de proyeccion esferica como la de ojo de pez :



Configuraremos el Tour Virtual para la misma imagen que acabamos de utilizar :



El codigo a incluir dentro de la pagina que contiene al Tour Virtual puede ser el siguiente :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=fisheye&
img_path=disparo_de_ojo_de_pez_horizontal.jpg&
xml_path=pagina.xml',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


El contenido del archivo .xml puede ser el siguiente :



<my_params>
<stage>
<panorama_controller path="PanoramaCtrl07.swf" posx="0" posy="0"/>
</stage>
<user_loader>
<caption path="caption.png" connecting="" loading="" />
<indicator path="indicator.gif" />
<background path="background.gif" /></user_loader>
<context_menu>
<panorama_controller show_item="yes" on_caption="Mostrar Botones" off_caption="Ocultar Botones" />
<u_context1 show_item="yes" on_caption="Mostrar Creditos" off_caption="Ocultar Creditos" />
<show_info show_item="yes" on_caption="Mostrar Coordenadas" off_caption="Ocultar Coordenadas" />
<smoothing show_item="yes" on_caption="Menos Contraste" off_caption="Mas Contraste" />
<start_auto show_item="yes" on_caption="Iniciar Rotacion" off_caption="Detener Rotacion" />
<full_screen show_item="yes" on_caption="Mostrar en Pantalla Completa" off_caption="Mostrar en Pantalla Normal" />
</context_menu>
<user_panel>
<u_context1 path="Mensaje.png" />
</user_panel>
<sphere_context>
<normal show_item="yes" on_caption="-> Proyeccion Rectilinea" off_caption=" Proyeccion Rectilinea" />
<globe show_item="yes" on_caption="-> Proyeccion Ortogonal" off_caption=" Proyeccion Ortogonal" />
<bipolar show_item="yes" on_caption="-> Proyeccion Estereografica" off_caption=" Proyeccion Estereografica" />
</sphere_context>
<fisheye_context>
<single show_item="yes" on_caption="-> Modo Simple" off_caption="Modo Simple" />
<double show_item="yes" on_caption="-> Modo Doble" off_caption="Modo Doble" />
<mirror show_item="yes" on_caption="-> Modo Espejo" off_caption="Modo Espejo" />
</fisheye_context>
<play_objects>
<image path="disparo_de_ojo_de_pez_horizontal.jpg" />
<view init_filter="no"
init_fov="100"
limit_vertical="yes"
limit_horizontal="no"
elevation="90"
depression="90"
top_limit="110"
bottom_limit="110" />
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100" />
</play_objects>
</my_params>


Notese que hemos incluido el parametro limit_horizontal="no" para liberar el movimiento de la imagen que, si bien es un Disparo de Ojo de Pez, gira libremente como si se tratara de un Panorama Esferico. Esto nos permite aplicar al Tour Virtual las seis variantes posibles que permite la combinacion de los modos de proyeccion instrumentados. Haga click para ver el Tour Virtual De Disparo De Ojo De Pez con Menu Contextual Doblemente Ampliado y haga click encima del Tour Virtual con el boton derecho del mouse para desplegar el menu contextual y probar las distintas combinaciones posibles.




Como Utilizar Donas De 360 Grados Y Disparos De Ojo De Pez Sin Recortar


Hasta ahora hemos creado Tours Virtuales con fotografias cuya imagen ocupa toda la superficie disponible, tales como los Panoramas Cilindricos y Esfericos, u otras tales como Donas de 360 Grados y Disparos de Ojo de Pez que, si bien su area util no abarca todo la superficie de la fotografia, aquella se encuentra centrada en una imagen perfectamente simetrica, lo cual ha requerido algun trabajo de edicion. El Ryubin Pano Player tambien nos permite crear Tous Virtuales a partir de imagenes sin editar, tal como salen de la camara :





Como sabemos, depende de la camara y la configuracion utilizada que la fotografia total sea mas o menos alargada y de la manipulacion depende que el centro de la dona este mas o menos corrido del centro preciso de la imagen total. Para crear un Tour Virtual sin necesidad de recortar efectivamente la fotografia, la alternativa posible es indicar al visor de panoramas en que sector de la imagen buscar la informacion util, como si hicieramos un recorte virtual.

Para obtener un buen resultado practico con este sistema, es importante que el espejo parabolico utilizado para fotografiar la Dona de 360 Grados este firmemente unido a la camara, de manera que no se mueva aun cuando se mueva la camara. Solo asi los parametros medidos una vez seran validos para utilizarse en todos los panoramas fotografiados.

Para comenzar a construir este ejemplo, crearemos los codigos necesarios para un Tour Virtual con una Dona de 360 Grados recortada, cuya relacion entre lados es 1/1 :



El codigo a incluir dentro de la pagina que contiene al Tour Virtual puede ser el siguiente :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=doughnut&
xml_path=pagina.xml',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


El contenido del archivo .xml puede ser el siguiente :



<my_params>
<stage>
<panorama_controller path="PanoramaCtrl07.swf" posx="0" posy="0"/>
</stage>
<user_loader>
<caption path="caption.png" connecting="" loading="" />
<indicator path="indicator.gif" />
<background path="background.gif" /></user_loader>
<context_menu>
<panorama_controller show_item="yes" on_caption="Mostrar Botones" off_caption="Ocultar Botones" />
<u_context1 show_item="yes" on_caption="Mostrar Creditos" off_caption="Ocultar Creditos" />
<show_info show_item="yes" on_caption="Mostrar Coordenadas" off_caption="Ocultar Coordenadas" />
<smoothing show_item="yes" on_caption="Menos Contraste" off_caption="Mas Contraste" />
<start_auto show_item="yes" on_caption="Iniciar Rotacion" off_caption="Detener Rotacion" />
<full_screen show_item="yes" on_caption="Mostrar en Pantalla Completa" off_caption="Mostrar en Pantalla Normal" />
</context_menu>
<user_panel>
<u_context1 path="Mensaje.png" />
</user_panel>
<sphere_context>
<normal show_item="yes" on_caption="-> Proyeccion Rectilinea" off_caption=" Proyeccion Rectilinea" />
<globe show_item="yes" on_caption="-> Proyeccion Ortogonal" off_caption=" Proyeccion Ortogonal" />
<bipolar show_item="yes" on_caption="-> Proyeccion Estereografica" off_caption=" Proyeccion Estereografica" />
</sphere_context>
<play_objects>
<image path="dona_de_360_grados_1.1.jpg" />
<view init_filter="no"
init_fov="60"
limit_vertical="yes"
elevation="45"
depression="45"
top_limit="44"
bottom_limit="44" />
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100" />
</play_objects>
</my_params>


Haga click para ver el Tour Virtual De Dona De 360 Grados Recortada Y Centrada. A continuacion recrearemos el proceso pero utilizando una imagen sin recortar, cuya relacion entre lados es de 4/3 :



Para ello debemos utilizar el elemento crop y sus parametros cuyos significados explicamos a continuacion :

Para agregar esta informacion al Tour Virtual recurriremos una vez mas al archivo .xml, en el que crearemos un elemento definido por el par de etiquetas <crop> y </crop>. Los parametros adicionales admitidos por el elemento crop son los que nos permitiran informar al visor las caracteristicas de la fotografia que contiene a la Dona de 360 Grados. Estos son :

height es el porcentaje del alto de la dona respecto del alto total de la fotografia. Dicho de otra manera, es el producto del alto maximo de la dona dividido por el alto de la imagen.

width es el porcentaje del ancho de la dona respecto del ancho total de la fotografia. Dicho de otra manera, es el producto del ancho maximo de la dona dividido por el ancho de la imagen.

cx es el producto de la distancia del centro de la dona respecto del lateral izquierdo de la fotografia, dividida por el ancho total de la imagen.

cy es el producto de la distancia del centro de la dona respecto del borde superior de la fotografia, dividida por el alto total de la imagen. En conjuncion con cx sirve para determinar la ubicacion exacta de la dona en el rectangulo fotografiado.

inner_circle es el producto del radio del circulo interior vacio de la dona dividido por la distancia entre el centro del mencionado circulo y el borde exterior de la dona :




height = B / A width = D /C cx = E / C cy = G / A inner_circle = F / G


Con estas simples formulas podemos calcular los valores para incluir como parametros en la configuracion del Tour Virtual. La referencia en la pagina .htm que contiene el Tour Virtual no ha variado en absoluto :



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Panorama De 360 Grados Interactivo Offline En Flash</title>
<script type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#333333" >
<script type="text/javascript">
AC_FL_RunContent( 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'bgcolor', '#000000',
'width', '400',
'height', '400',
'id','RyubinPanorama',
'movie', 'RyubinPanoPlayer5',
'FlashVars','playmode=doughnut&
xml_path=pagina.xml',
'allowFullScreen','true',
'allowScriptAccess','always');
</script>
</body>
</html>


El archivo de configuracion .xml, en cambio, sera modificado por la inclusion del elemento crop :



<my_params>
<stage>
<panorama_controller path="PanoramaCtrl07.swf" posx="0" posy="0"/>
</stage>
<user_loader>
<caption path="caption.png" connecting="" loading="" />
<indicator path="indicator.gif" />
<background path="background.gif" /></user_loader>
<context_menu>
<panorama_controller show_item="yes" on_caption="Mostrar Botones" off_caption="Ocultar Botones" />
<u_context1 show_item="yes" on_caption="Mostrar Creditos" off_caption="Ocultar Creditos" />
<show_info show_item="yes" on_caption="Mostrar Coordenadas" off_caption="Ocultar Coordenadas" />
<smoothing show_item="yes" on_caption="Menos Contraste" off_caption="Mas Contraste" />
<start_auto show_item="yes" on_caption="Iniciar Rotacion" off_caption="Detener Rotacion" />
<full_screen show_item="yes" on_caption="Mostrar en Pantalla Completa" off_caption="Mostrar en Pantalla Normal" />
</context_menu>
<user_panel>
<u_context1 path="Mensaje.png" />
</user_panel>
<sphere_context>
<normal show_item="yes" on_caption="-> Proyeccion Rectilinea" off_caption=" Proyeccion Rectilinea" />
<globe show_item="yes" on_caption="-> Proyeccion Ortogonal" off_caption=" Proyeccion Ortogonal" />
<bipolar show_item="yes" on_caption="-> Proyeccion Estereografica" off_caption=" Proyeccion Estereografica" />
</sphere_context>
<play_objects>
<image path="dona_de_360_grados_4.3.jpg" />
<crop width="0.712" height="0.960" cx="0.5" cy="0.5" inner_circle="0.177"/>
<view init_filter="no"
init_fov="60"
limit_vertical="yes"
elevation="45"
depression="45"
top_limit="44"
bottom_limit="44" />
<auto init_start="yes"
pan_speed="-0.3"
tilt_amplitude="7"
tilt_cycle="100" />
</play_objects>
</my_params>


Notese como los valores de height y width se aproximan a 1 en la medida que la distancia de la dona a los bordes de la fotografia va disminuyendo. Asimismo, los valores de cx y cy se aproximan a 0.5 cuanto mas centrada se encuentre la dona en la imagen. Haga click para ver el Tour Virtual De Dona De 360 Grados Sin Recortar.

Para conocer a fondo todas las opciones posibles, asi como para ver mas ejemplos y documentacion -en ingles- visite el sitio de Ryubin Panorama Player .




Aportes De Visitantes


Geovanny (geliasmf@hotmail.com) dice :

Simplemente exelente................!!!!!!!!!!!!!!!

URL :


360 Facil (info@360facil.com) dice :

Muchas gracias y saludos!

URL :


david (dberrogp@gmail.com) dice :

Simplemente... impresionante

URL : URL


Marco (marco.oa@hotmail.com) dice :

Hola. Me gustaria saber si se puede hacer un tour virtual con varias panorámicas. Es decir, cuando acabe de rotar la primera, salte automático a la segunda, a la tercera.... y asi sucesivamente hasta la última que queramos enseñar. Gracias

URL : URL


360 Facil (info@360facil.com) dice :

Hola Marco, gracias por tu consulta. Una manera basica en que puedes hacer lo que propones es crear diferentes paginas, cada una con un tour virtual animado y agregar a cada una entre las etiquetas <head> y </head> una linea como la siguiente :

<meta http-equiv="refresh" content="15; url=proxima.htm">

Esto hara que vencido cierto tiempo, la pagina actual sea reemplazada por otra que tu determines. En este codigo, el numero 15 representa la cantidad de segundos que la pagina permanecera visible antes de ser redireccionada a la siguiente y proxima.htm es la URL de la siguiente pagina en cargarse. Si sabes usar un poco de Javascript, puedes aprovechar la API del Ryubin Flash Player, la que incluye la instruccion LoadXML() que puede ser utilizada para cargar los datos contenidos en otros archivos .XML a un mismo visor del Ryubin Flash Player sin necesidad de recargar la pagina ni tampoco el visor. Encuentras detalles sobre esta API en la Guia Para Usuarios (en ingles) que puedes descargar del sitio de Ryubin. Si bien el caso no es exactamente igual al que tu propones, ya que en el ejemplo los nuevos panoramas se cargan a partir de vinculos y no al cumplirse un periodo de tiempo, en la URL adjunta a este comentario encuentras un ejemplo de la implementacion de la instruccion LoadXML() de la API de Ryubin. Hay otros ejemplos en el mismo sitio. Agregaremos uno propio y explicado a nuestro tutorial en cuanto nos sea posible. Buena suerte y saludos.

URL : www.ryubin.com/panolab/panoflash/demo/PanoDoughnutFlash_03.html


Marco (marco.oa@hotmail.com) dice :

Muchas gracias. Creo que es lo que estoy buscando. Probaré ambos metodos y a ver cual se me adapta mejor a mis necesidades. Otra duda es si a las panoramicas parciales se les puede dar movimiento. Con la instruccion simpleflat me da error de formato y no encuentro la manera. Me veo obligado a cambiarlo por cylinder y no me queda terminado como deseo. Un saludo y gracias

URL : URL


360 Facil (info@360facil.com) dice :

No hay de que, Marco. Los panoramas parciales deben funcionar igual que los demas. Por favor dinos cual es el ID del panorama que te da error de formato para revisarlo. Gracias y saludos.

URL : URL


Marco (marco.oa@hotmail.com) dice :

Muchas gracias. Solucionado. Ya funciona con modo flat. Solo me queda ajustar el zoom inicial que me sale muy ampliado y me gustaria el inicio un poco mas reducido para que se pueda ver toda la panoramica. Por lo demas conotento. Muchisimas gracias

URL : URL


360 Facil (info@360facil.com) dice :

No hay de que. Creaimos que el problema lo habias encontrado en nuestro Creador de Tours Virtuales Online pero ahora se entiende que estas experimentando en tu propio equipo. A proposito, habras notado que en el modo plano o flat no existe la sensacion envolvente tal como en los modos cilindrico o esferico, sino que la imagen pasa por el visor sin deformarse. Si quieres crear Tours Virtuales realmente envolventes a partir de panoramas parciales puedes utilizar el modo cilindrico y limitar en el archivo .xml los recorridos vertical y horizontal y asi obtendras resultados mas atractivos. Es lo que nos gustaria hacer en el Creador de Tours Virtuales Online pero para ello necesitariamos conocer el angulo de vision vertical (que en los otros modos puede ser deducido) para ajustar el angulo de vision inicial, dato que tu conoces respecto de tu panorama o puedes acercarte a el mediante ensayo y error. Gracias por tu participacion y buena suerte!

URL : URL


Marco (marco.oa@hotmail.com) dice :

Estoy experimentando en mi equipo con panoramicas mias. Tengo más dudas pues cambio muchos parametros de Fov pero no veo cambios. y me interesa mucho saber como limitar el movimiento al ancho de mi imagen. Tambien si es posible que inicie en modo pantalla completa... Un saludo

URL : URL


360 Facil (info@360facil.com) dice :

Hola Marco. Puedes conseguir que un Tour Virtual se inicie en modo de pantalla completa agregando a tu archivo .xml, entre las etiquetas <stage> y </stage> un elemento panowindow que incluya el parametro fullstage="yes". Por ejemplo :

<stage><panowindow fullstage="yes" width="200" height="90"></stage>

Los valores admitidos para el FOV van de los 20 a los 130 grados, salvo unas pocas excepciones indicadas en la Guia Para Usuarios de Ryubin, pero creo que ninguna es tu caso. Si utilizas valores inferiores al minimo o superiores al maximo no veras ningun cambio. Ojala que esta informacion te sea util. Gracias y saludos.

URL : URL


Marco (marco.oa@hotmail.com) dice :

HOla!!. No he conseguido que se inicie en modo pantalla completa en el navegador. Lo único que se asemeja es poniendo en el html los valores de width="100%" height="100%" y de esa forma me ocupa toda la página del navegador. Y con FOV sigo igual...por más que cambien el valor no consigo ningun cambio, y me gustaria se iniciara la imagen un poco más reducida, sin tanto zoom. A la vez ¿como hacer para que empiece en el extremo izquierdo de la panorama y no en medio de la misma? Mi idea es empezar por el extremo izquierdo y al llegar al opuesto que salte a la siguiente....seguiré probando opciones. Un saludo y muchas gracias

URL : URL


360 Facil (info@360facil.com) dice :

Hola, Marco. Tienes razon, lo hemos chequeado y panowindow se refiere al area activa del panorama dentro del visor completo, de manera que parece no haber manera posible de iniciar el Tour Virtual en pantalla completa. Es probable que puedas mejorar tu aproximacion si en lugar de iniciar la pagina con un vinculo comun usas uno como el siguiente :

<a href="javascript:NewWindow=window.open('pagina.htm','newWin1',
'width=100%,height=100%,top=0,left=0,toolbar=No,location=No,
scrollbars=No,status=No,resizable=No,fullscreen=Yes'); void(0);">pagina</a>

Este debe abrir pagina.htm en una nueva ventana a pantalla completa, aunque solo funciona en Internet Explorer. Puedes evitar la señal de advertencia de la misma manera que se describe en la URL adjunta a este comentario. Para definir las coordenadas desde donde se incie el paneo de la imagen puedes agregar a tu archivo .xml dentro del elemento <view> el atributo init_yaw con valores negativos o positivos en grados para definir el desplazamiento. Para definir la velocidad y el sentido de la rotacion automatica puedes agregar el atributo pan_speed dentro de la etiqueta <auto>, el cual tambien admite valores numericos negativos, positivos y decimales. Puesto que de veras estas interesado en obtener lo maximo de tu presentacion es muy recomendable que consultes la Guia Para Usuarios de Ryubin. Ten en cuenta que esta pagina es una sintesis de ese documento de alrededor de cien paginas, de manera que alli encontraras posibilidades que ni te imaginas. Saludos y a seguir trabajando.

URL : www.360facil.com/esp/fotografia-360-grados-publicacion-tours-virtuales-java.php


Marco (marco.oa@hotmail.com) dice :

Hola. Estoy con el manual siempre al lado revisandolo de arriba a abajo. Voy probando y corrigiendo y casi lo tengo más o menos para lo que quiero. De internet explorer...muchos problemas con él que he solucionado al cambiar a Chrome. Y de nuevo muchisimas gracias!!!!

URL : URL


360 Facil (info@360facil.com) dice :

Gracias a ti!

URL : URL


Marco (marco.oa@hotmail.com) dice :

Hola. Casi terminado ajustando el FOV en cada una. Usaré firefox pues al ponerlo en pantalla completa continua asi cuando pasado un tiempo salta a la siguiente panorama. En Chrome y explorer no lo hace. En el primero se sale de pantalla completa y continua el siguiente panorama en el tamaño de la pagina y en explorer directamente no salta a la siguiente. Muchisimas gracias por la ayuda!!! Un saludo

URL : URL


Juan Carlos (jnk.scorpio@gmail.com) dice :

Buen día. Me gustarĂ­a saber como agregar botones que al dar click me lleven a una parte especifica de la imagen o a otra imagen. Lo que quiero hacer es un recorrido virtual de las instalaciones de una oficina, para que los usuarios sepan donde esta cada área y quien es el titular del área. No se si el Ryubin tenga esas opciones. Un recorrido como los de encarta.

URL : URL


360 Facil (info@360facil.com) dice :

Hola Juan Carlos, Muchas Gracias por tu consulta. Puedes crear ese efecto utilizando hotspots con Ryubin Pano Player. Proximamente agregaremos al tutorial el ejemplo de como hacerlo. Mientras tanto te recomendamos que veas la guia para usuarios de Ryubin que puedes encontrarla en el sitio oficial del programa y leas lo relativo al uso de hotspots. Buena suerte y saludos!

URL : www.ryubin.com/panolab/panoflash/


Ramon (vallverd1@hotmail.com) dice :

EL mejor tutorial y mejor web para trabajar con panorama 360°. Gracias por compartir tus conocimientos. Eres un autentico profesor.

URL : URL


360 Facil (info@360facil.com) dice :

Muchas Gracias Ramon!

URL : URL


Omri Rodurr (rod_urr@hotmail.com) dice :

gracias por tu aporte lo voy ha probar y te digo como me fue GRACIASSS

URL : URL


leandro pinilla (leandropinilla77@gmail.com) dice :

Exelente la pagina unas dudas como le asigno funciones al menu por ejemplo la que dice mostrar creditos no hace nada las otras si como ocultar botones etc el archivo xml debe iniciar asi <?xml version = '1.0'?> o no hace falta otra cosa como puedo publicarla en mi blog wordpress conocen algun plugin para ello ya que intentado con iframe pero no me sale desde ya gracias te mando este mail porque quise dejar estas dudas en los comentarios y no pude me da error

URL : URL


360 Facil (info@360facil.com) dice :

Gracias por tu consulta, Leandro. La re-publicamos aqui para que sea util a otros visitantes. Efectivamente habia un error y faltaba agregar el elemento user_panel, por lo tanto hemos corregido el articulo. Creemos que ahora todo esta bien. Con respecto al encabezamiento del archivo xml creemos que esto es asi, pero para mayor seguridad te conviene consultar con el sitio oficial de xml (URL al pie del comentario). No conocemos herramientas de wordpress pero podemos sugerirte que utilices vinculos al tour virtual o, si wordpress lo permite, un script del tipo thickbox/lightbox que lo abre en una ventana flotante por encima de la pagina desde donde se ejecuta. Como ejemplo puedes ver las alternativas de publicacion personalizada en nuestro Creador de Tours Virtuales Online. Buena Suerte y saludos!
PD - Tu dificultad para publicar en los comentarios se debio a la inclusion del encabezado XML ya que algunos de sus caracteres detienen la ejecucion del envio. Hasta tanto podamos arreglarlo si asi lo deseas puedes incluir caracteres hmtl en comentarios. Gracias.

URL : www.xml.com/


José Manuel Vazquez (jomavadi@gmail.com) dice :

Me gustaria comenzar el Tour virtual interactivo de Ryubin en modo simpleflat& de forma que no salga el "maximun fov" en medio de a imgen. ¿Cómo puedo quitarlo? Salu2

URL : URL


Rubén (rubolver@gmail.com) dice :

Buenos días: Tal vez sea un poco torpe, pero llevo un buen rato rompiéndome la cabeza para pasar la imagen al blog. Apenas tengo conocimientos de HTML y tal vez sea por eso por lo que no lo consigo. ¿Cómo se haría? Y otra cuestión: al cambiar de ordenador la dirección URL no me sirve. Esto sucede porque en la nueva terminal no tengo la carpeta. ¿Cómo se consigue una URL permanente que pueda compartir? Gracias de antemano ;-)

URL : URL


360 Facil (info@360facil.com) dice :

Hola Ruben. Gracias por tu consulta. En la URL adjunta a este comentario encuentras el articulo que hemos preparado como introduccion a la publicacion simple en html. Todo en ese articulo se refiere a publicar de manera interna en el propio ordenador de uno. Si se copian los archivos a otro ordenador hay que asegurarse que la ruta de acceso a cada archivo coincida con las que estan escritas en el codigo. Para que la publicacion este disponible en internet, es necesario alojarla en un servidor. Si contratas un alojamiento tendras toda la disponibilidad para subir los archivos que quieras pero si quieres publicarla en un blog, tienes que seguir las instrucciones del blog y es probable que no te den herramientas necesarias para subir carpetas y archivos a tu voluntad. En ese caso, te convendria utilizar una herramienta como nuestro Creador de Tours Virtuales Online, donde los archivos ya se encuentran alojados en nuestro servidor y puedes utilizarlos copiando un texto o codigo que puedes pegar en el html de tu blog. Buena suerte y saludos!

URL : www.360facil.com/esp/fotografia-360-grados-publicacion-panoramas-planos.php


Agregar Un Aporte, Duda O Comentario


Ningun campo es obligatorio. Los mensajes que no tengan que ver con el tema podran ser moderados.


Escriba 123 aqui (verificacion anti-spam)

Enviarme un recordatorio de esta publicacion.






Si le ha gustado 360 Facil por favor compartalo con sus redes sociales

  


Con cualquier camara


Panoramas Interactivos De
360 Grados En Tres Simples Pasos



Despues de leer el tutorial usted estara en condiciones de crear su primer fotografia de 360 grados interactiva con la camara que ya tiene :

1 - Fotografiar
1 - Fotografiar

Tome una o mas fotografias del lugar que desea mostrar.

2 - Editar
2 - Editar

Convierta sus fotografias en panoramas de 360 grados.

3 - Publicar
3 - Publicar

Haga interactivos a sus panoramas y ofrezcalos al mundo a traves de internet.

Iniciar Tutorial

Si una imagen vale más que mil palabras, una Fotografía Interactiva de 360 Grados vale más que mil imágenes...

Recomendado...!!!


Creador De Tours Virtuales Online



Utilizando el Creador de Tours Virtuales Online podra :


Convertir sus fotografias de 360 grados en tours virtuales con apenas un click.


Insertar sus tours virtuales en sitios web, emails, blogs o cualquier lugar donde quiera con solo copiar y pegar un texto.


Conocer de una manera practica todos los tipos de fotografia de 360 grados.


Descubrir que puede crear centenares de tours virtuales interactivos con la misma facilidad conque toma fotos con su camara.


Comprobar que con solo un click de su camara y otro click de su mouse puede crear un tour virtual interactivo de 360 grados a partir de la nada. Y completamente gratis!!!


Puede comenzar ahora mismo, aun si no tiene una camara



Crear Un Tour Virtual Ahora



Encuentrenos en Facebook y gracias por hacer click en Me gusta.