Crear Imagenes 360 Grados

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, elRyubin 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 clickaquipara 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.jsRyubinPanoPlayer5.swfpanorama_cilindrico.jpgpagina.htm

El archivoRyubinPanoPlayer5.swfes 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 archivoAC_RunActiveContent.jses 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 imagenpanorama_cilindrico.jpg, que se ve asi :

El archivopagina.htmque 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 lapagina, el editor de texto nos muestra su codigo :

Panorama De 360 Grados Interactivo Offline En FlashAC_FL_RunContent = 0;

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');

Como puede verse, hemos destacado en colorrojolas 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 archivopagina.htmfuncione. Tambien hemos sealado enverdelas 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.

foves 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.

elevationdefine el alto en grados a que se extendera por encima del horizonte la mitad superior de la fotografia. Analogamentedepressionseala 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_limitybottom_limitson 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 conlimit_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_verticalylimit_horizontaltienen dos valores posibles :yespara que el Tour Virtual pueda girar indefinidamente en el sentido especificado ynopara 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 unTour Virtual Con Un Panorama Cilindricomuestra 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 comopanorama_esferico.jpgen 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:


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');

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 actualizadaTour Virtual con un Panorama Esferico.

Dona de 360 Grados

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


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');

Notese que para aelevationde 45 grados hemos acoplado untop_limitde 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 actualizadaTour Virtual con una Dona De 360 Grados.

Disparo De Ojo De Pez Horizontal

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


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');

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 actualizadaTour Virtual con un Disparo De Ojo De Pez Horizontal.

Disparo De Ojo De Pez Vertical

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


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');

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

Panorama Parcial

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


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');

Despues de editar el codigo en el editor de textos y guardar el cambio nos dirigimos al navegador para ver la pagina actualizadaTour 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.xmlpara 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.htmque 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 archivopagina.htmpara un panorama cilindrico como el del comienzo de esta pagina ahora se vera asi :


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');

Ahora que la referencia al archivopagina.xmlesta 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 :

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 archivopagina.xmly lo haremos dentro de un elemento encerrado entre etiquetasy:

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

image_pathdefine la ruta de acceso al archivo de imagen.

init_filterdefine uno de dos estados posibles (yesono) para un filtro que, aplicado a la imagen, la suaviza.

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

Dentro del elementopodemos definir uno de dos valores (yesono) parainit_starto es decir para que la imagen gire automaticamente por defecto.

pan_speedes la velocidad del mencionado giro.tilt_amplitudees la medida en grados que el panorama en su movimiento automatico se desplaza hacia arriba y hacia abajo ytilt_ciclela cantidad de grados que ocupa una oscilacion completa.

Haga click para ver elTour 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 nombrePanoramaCtrl07.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 etiquetasy:

Proyeccion Rectilinea" off_caption=" Proyeccion Rectilinea" />

Haga click para ver elTour Virtual Esferico con Menu Contextual Ampliadoy 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 :


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');

El contenido del archivo .xml puede ser el siguiente :

Haga click para ver elTour Virtual De Disparo De Ojo De Pez con Menu Contextual Ampliadoy 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 :



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');


Notese que hemos incluido el parametrolimit_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 elTour Virtual De Disparo De Ojo De Pez con Menu Contextual Doblemente Ampliadoy 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 :



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');


Haga click para ver elTour 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 elementocropy 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 etiquetasy. Los parametros adicionales admitidos por el elementocropson los que nos permitiran informar al visor las caracteristicas de la fotografia que contiene a la Dona de 360 Grados. Estos son :

heightes 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.

widthes 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.

cxes 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.

cyes 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_circlees 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 / Awidth= D /Ccx= E / Ccy= G / Ainner_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 :


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');

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

Notese como los valores deheightywidthse aproximan a 1 en la medida que la distancia de la dona a los bordes de la fotografia va disminuyendo. Asimismo, los valores decxycyse aproximan a 0.5 cuanto mas centrada se encuentre la dona en la imagen. Haga click para ver elTour 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 Playerryubin.com.

Aportes De Visitantes

Geovanny([email protected])dice :

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

URL :

360 Facil([email protected])dice :

Muchas gracias y saludos!

URL :

david([email protected])dice :

Simplemente... impresionante

URL :URL

Marco([email protected])dice :

Hola. Me gustaria saber si se puede hacer un tour virtual con varias panormicas. Es decir, cuando acabe de rotar la primera, salte automtico a la segunda, a la tercera.... y asi sucesivamente hasta la ltima que queramos ensear. Gracias

URL :URL


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 y una linea como la siguiente :

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


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


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


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


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


Estoy experimentando en mi equipo con panoramicas mias. Tengo ms 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


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

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


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 pgina del navegador. Y con FOV sigo igual...por ms que cambien el valor no consigo ningun cambio, y me gustaria se iniciara la imagen un poco ms 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


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 :

pagina

Este debe abrir pagina.htm en una nueva ventana a pantalla completa, aunque solo funciona en Internet Explorer. Puedes evitar la seal 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 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 , 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


Hola. Estoy con el manual siempre al lado revisandolo de arriba a abajo. Voy probando y corrigiendo y casi lo tengo ms 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


Gracias a ti!

URL :URL


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 tamao de la pagina y en explorer directamente no salta a la siguiente. Muchisimas gracias por la ayuda!!! Un saludo

URL :URL

Juan Carlos([email protected])dice :

Buen da. Me gustara 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


Hola Juan Carlos, Muchas Gracias por tu consulta. Puedes crear ese efecto utilizandohotspotscon 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([email protected])dice :

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

URL :URL


Muchas Gracias Ramon!

URL :URL

Omri Rodurr([email protected])dice :

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

URL :URL

leandro pinilla([email protected])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 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


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 nuestroCreador 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([email protected])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. Cmo puedo quitarlo? Salu2

URL :URL

Rubn([email protected])dice :

Buenos das: Tal vez sea un poco torpe, pero llevo un buen rato rompindome 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. Cmo se hara? Y otra cuestin: al cambiar de ordenador la direccin URL no me sirve. Esto sucede porque en la nueva terminal no tengo la carpeta. Cmo se consigue una URL permanente que pueda compartir? Gracias de antemano ;-)

URL :URL


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 nuestroCreador 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.

Escriba123aqui (verificacion anti-spam)

Enviarme un recordatorio de esta publicacion.

< Tutorial< Publicar El Panorama< OnlineHtml 5 >

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

Crear Imagenes 360 Grados

Documents

Transcript of Crear Imagenes 360 Grados