Inicio > DeepZoom, Silverlight > Deep Zoom Composer

Deep Zoom Composer

Saturday, 8 de August de 2009
Ir a comentarios Dejar un comentario

Para iniciar con el Post se deberá tener instalado los requisitos previos.

  • Sistema operativo Windows 7 … Windows Vista … Windows XP SP2
  • Para reproducir el resultado o producto resultante de Deep Zoom Composer se requiere Silverlight 3. Recomiendo instalar Silverlight 3 Tools for Visual Studio 2008 … ya que incluye todo lo que necesitas para ejecutarlo como son: Runtime, SDK, Soporte Adicional para VS2008, Templates, Intellisense for XAML.
  • Y por supuesto Deep Zoom Composer.

El procedimiento para generar una presentación o solución con Deep Zoom Composer es:

  • Inicializar Deep Zoom Composer (este lo instala en la misma opción del menú de Expression Blend)
  • Al iniciar el programa nos muestra las opciones de crear un Nuevo Proyecto o Abrir uno existente (de igual manera nos despliega los últimos proyectos). En este caso daremos clic en la opción New Project

composer_0101

  • A continuación se presenta la opción de dar nombre a nuestro proyecto y su ubicación

composer_02

  • Una vez creado nuestro proyecto se presenta el escritorio de trabajo de Deep Zoom Composer

composer_03

  • Como podemos ver en una primera impresión … es una interfaz muy sencilla. Quiero hacer notar en la superior al centro se encuentra el menu principal de Composer … con las opciones de Import > Compose > Export … las cuales constituyen los 3 pasos para crear una aplicación.

composer_0301

  • El primer paso para crear nuestra aplicación es Importar las imágenes … Para esto del lado derecho del escritorio se encuentra el botón de acción.

composer_0302

  • Se pueden añadir la cantidad de imágenes que se requiera … Cabe aclarar que soporta imágenes en formato JPG y PNG … En mi caso agregue 4 imágenes … Las de Asterix, Los Simpson y Wally son JPG’s de 1024 x 768 … y la imágen de Pokemon es un JPG de 3000 x 1970. Por cada imágen importada se muestra una caja de diálogo. NOTA. Se puede importar una por una … o todas las imágenes a la vez.

 composer_04

  • Una vez importadas las imágenes a usar para la composición … dar click en el botón Compose del menu superior … Una vez situados en el escritorio de la sección Compose … se muestran en la parte inferior todas las imágenes importadas previamente … y al centro es área de trabajo principal para hacer la composición.

composer_0005

  • Para llevar a cabo la composición crear un a Area (algo así como un Layout) … y para hacer esto en la barra inferior … del lado izquiero junto a las imágenes … se encuentra el ícono Add Area (es un ícono muy pequeño) … Una vez generada el área ubicamos las imágenes con un simple drag-drop … ubicandolas en el área de la manera que se quiera … Cada una al lado de la otra o incluso una encima de otra.

composer_05

  • Una vez generada la composición dar clic en el botón de Export … donde muestra un Previo (Preview Output) del resultado de la composición. Del lado derecho se muestra el menu de opciones de exportación … Por Default aparece seleccionada la opción DeepZoomPix (esta y demas opciones las presentaré en el siguiente Post). Para este caso selecciona opción Custom … y seleccionamos las opciones por default para un ejemplo básico. Como mencione antes … en el siguiente Post mostraré a detalle las opciones que se proporcionan para exportar proyectos con Deep Zoom Composer.
  • Las opciones a seleccionar a utilizar son: Silverlight Deep Zoom … Le proporcionaremos un nombre y ruta de proyecto … la Exportación de imágenes será como Colección de Imágenes (multiple images) … Se selecciona la opción por Default … y el tipo de imagenes con formato JPEG con una calidad de imágen de 95%. Y por último click en Export

composer_0701

  • Al momento de exportar el proyecto … se presentará una caja de diálogo que muestra el proceso de exportación.

composer_08

  • Al final del proceso de exportación aparece una caja de 4 opciones para accesar de diferente manera a nuestro proyecto.

composer_09

  • Mediante la opciónPreview in Browser nos permite ver directamente el resultado de nuestro proyecto … desplegando el navegador y ejecutando nuesta composición a través de Silverlight (así de simple).
  • La opción View Image Folder nos remite directamente al directorio donde se almacenan las imágenes fragmentadas que utiliza Deep Zoom … Las imágenes las almacena en los directorios dzc_output_files & dzc_output_images … y en el directorio raíz almacena los manifiestos con los que la tecnología Deep Zoom manipula las imágenes. Les recomiento navegen por estos directorios … le va a dar una idea de como suceden las cosas dentro de Deep Zoom … no desde un punto de vista técnico pero si conceptual.
  • La opción View Project Folder se encuentra dehabilitada (esto se debe a las opciones seleccionada para la exportación y que explicare en el siguiente Post)
  • El resultado de este Post lo pueden ver EN VIVO en Ria4NET.com

Conclusión

En este Post como ven detalle un proceso que en general es muy sencillo … ya que al final con unos cuantos clics obtenemos un producto o resultado … que logra un impacto a los usuarios.
Normalmente no hubiera detallado tanto un procedimiento como este … pero realmente me entretuve haciendolo.
Como vieron … Deep Zoom Composer posee una serie de opciones adicionales que no se tocaron en este Post … pero que detallaré en el próximo Post para conocer el potencial de esta sencilla pero práctica herramienta.

dansalinas DeepZoom, Silverlight ,

  1. Sin comentarios aún.
  1. Sin trackbacks aún.