Crear un visor de panorama interactivo utilizando JC Panorama Editor

Un panorama es una imagen o fotografía que muestra una vista amplia..

En este tutorial, crearemos un Visor de Panorama interactivo utilizando una aplicación de terceros: JC Panorama Editor.

Paso 1: Breve descripción

Crearemos un visor panorámico utilizando la aplicación JC Panorama Editor y exploraremos las muchas opciones y posibilidades disponibles..

Paso 2: ¿Qué es JC Panorama Editor??

Una descripción excelente y clara está disponible de los autores de JC Panorama:

JC Panorama Viewer es un componente de flash que se puede usar para mostrar varios tipos de imágenes panorámicas: planas, cilíndricas, esféricas (equirectangulares) y cúbicas. Este componente de flash panorama admite hotspots (informativo, enlace web y panorama), movimiento horizontal y vertical del mouse, zoom de desplazamiento, transiciones y recorridos virtuales.

JC Panorama Editor es una aplicación de AIR muy fácil de usar que le permite crear y editar panoramas para ser cargados por JC Panorama Viewer, así como visitas virtuales directamente en su escritorio.

Paso 3: Dónde conseguirlo

Puedes conseguir dos versiones de JC Panorama..

Una aplicación completamente desbloqueada por $ 99 y una versión de prueba (muy utilizable) con algunas limitaciones:

Logotipo de marca de agua mientras se carga el panorama..
Panorámicas esféricas / equirectangulares y cúbicas deshabilitadas en el editor.

Ambas versiones disponibles en la web del componente..

Paso 4: Pros y Contras

Siempre hay ventajas y desventajas al utilizar componentes de terceros para desarrollar sus aplicaciones.

Pros:

Creación rápida y sencilla de panoramas.
Aplicación AIR compatible con las plataformas más usadas
Cuatro tipos de panorama disponibles
Personalización a través de opciones de un clic.

Contras:

Versión pagada necesaria para panoramas esféricos / equirectangulares y cúbicos
A veces genera un efecto de vibración / pixelado al mover la imagen

Paso 5: Cómo funciona

JC Panorama utiliza una interfaz limpia basada en AIR con varias opciones para generar su visor de panorama.

El proceso es realmente simple, elija una imagen, el tipo de panorama que desea crear y elija entre las varias opciones para personalizar el archivo SWF resultante..

Paso 6: Panorama simple

Ve y mira la demo. Es un panorama simple generado por la aplicación JC Panorama Editor, lo guiaré a través del proceso de creación en los próximos pasos.

Paso 7: Elige una imagen

Lo primero que debes hacer es seleccionar la imagen que deseas utilizar en tu panorama, elegí esta imagen de Flickr de Steve & Jemma Copley con licencia de Creative Commons.

Paso 8: Nuevo Proyecto

Abre la aplicación JC Panorama Editor y crea un nuevo proyecto..

Paso 9: elegir archivos

Se presentará otra vista en la aplicación, presione el signo "+" para agregar la imagen que eligió antes.

En este panel, también se le pedirá que nombre su proyecto y seleccione el tipo de panorama que está creando..

Paso 10: Vista previa

Una vez que proceda, se mostrará una nueva pantalla donde verá la imagen que se está utilizando y un panel de opciones a la derecha. presione el Avance Botón en la parte superior derecha de la ventana para ver su panorama en acción.

Paso 11: Propiedades

El panel de Propiedades se encuentra en la parte derecha de la pantalla en la ventana de vista previa, muestra las opciones disponibles que puede elegir para personalizar su panorama.

Echemos un vistazo a esas propiedades:

Tipo e imágenes: Elija entre las categorías de panorama disponibles y seleccione la (s) imagen (es) para ello.
Auto-reproducción: Si es verdadero, comienza a mover la imagen en la dirección seleccionada.
Velocidad: La velocidad del movimiento automático.
Velocidad de movimiento: Velocidad del movimiento inducido.
Dirección: Dirección el panorama comienza a moverse
Control del ratón: Permite controlar el panorama utilizando el ratón.
Acción del ratón: Establece el tipo de movimiento a aplicar cuando es controlado por el mouse.
Control de teclado: Permite controlar el panorama usando el teclado.
Enfocar: Modifica el ángulo de visión de la imagen.
Calidad: Establece la calidad 1 para el más bajo, 5 para el más alto
Suave: Previene la imagen de la pixelación.
Bloqueo de Pan: Evita que la panorámica cambie
Bloqueo de inclinación: Evita que la inclinación cambie.

Paso 12: Puntos calientes

Los hotspots son marcadores que se superponen en su panorama y pueden realizar una acción. Hay tres tipos de puntos de acceso:

Información: Muestra una información sobre herramientas cuando está habilitado por el mouse
Enlazar: Navega a una URL cuando se hace clic
Panorama: Llama a otro panorama y lo muestra.

Paso 13: Tipos de Panorama

Se pueden crear cuatro tipos de panoramas con JC Panorama Editor, dos disponibles en la versión de prueba y cuatro en la versión completa.

Llanura: Mueve la imagen 180 grados sin modificación.
Cilíndrico Crea un panorama de 360 grados.
Esférico: Estos son panoramas de 360x180 grados.
Cúbico: Hecho mediante la representación de seis imágenes cuadradas con un campo de visión de poco más de 90 grados

Se pueden ver ejemplos de los cuatro tipos en el sitio web del componente..

Paso 14: Visitas virtuales

Un tour virtual es una colección de panoramas mostrados por un solo swf. Puedes crear un Tour Virtual presionando la Hacer una visita virtual Botón en la nueva pantalla de proyecto y seleccionando los panoramas deseados..

Paso 15: Guardar y probar

Cuando haya terminado, haga clic en el botón Guardar en la esquina superior derecha de la ventana, esto guardará su trabajo. Ahora está listo para probar y usar su visor de panorama.

Conclusión

Puede ver lo fácil que es crear un visor de imágenes de Panorama usando JC Panorama, pruebe las diferentes opciones y opciones para crear su propio Panorama!

Gracias por leer!

Código