Puzle deslizante

Índice

¿Qué es?

«Puzle» es un elemento extra de 480i Manager, que nos permite crear con mucha facilidad un juego de puzle deslizante.

Podrás personalizar el puzle con la imagen que quieras y elegir el número de piezas.

Esta funcionalidad está disponible a partir de la versión 3.1 de 480interactive.

¿Cómo se hace?

Crea el contenedor desde InDesign

  1. En el documento inDesign crea un marco rectangular. Este marco delimitará el área que va a ocupar el puzle. Dicho de otro modo, será el contenedor del elemento extra.
  2. Pon un nombre al marco que acabas de crear desde el panel Panel Capas. No uses dos veces el mismo nombre para un contenedor en un mismo documento InDesign.
  3. Esto es todo lo que hay que hacer desde InDesign. Guarda el documento y usa 480i Script para convertirlo en issue.

A continuación, crea tu App desde el 480i Manager de la forma habitual si se trata de una nueva app. Si es una app existente que estás editando, abre el proyecto en 480i Manager

Añade el elemento extra a tu publicación

  1. Desde 480i Manager, despliega la carpeta Publicaciones haciendo doble clic sobre ella. En su interior podrás ver una carpeta por cada una de tus publicaciones.En caso de que sea una nueva publicación tenrás que añadirla para que aparezca. Selecciona “Publicaciones” y pulsa el botón “Añadir publicación” de la barra de menú superior para añadir la nueva issue.
  2. Despliega el contenido de la publicación en la que quieres añadir el Puzzle.
  3. Haz clic con el botón derecho sobre Elementos extra y elige «Añadir elemento extra». En el siguiente cuadro de diálogo selecciona «Puzzle».
    añadir elemento extraelemento extra puzle

Opciones extra

Controla lo que ocurre cuanto el puzzle se completa con éxito.

Una vez el usuario completa el puzzle es posible que quieras mostrarla imagen completa o algún mensaje indicado que se ha completado el puzzle con éxito. Hacer esto es muy sencillo.

  1. Desde inDesign, selecciona el marco rectangular que usas como contenedor para el puzzle y conviértelo a botón desde el panel Botones y formularios.
  2. A continuación, añádele la acción o acciones que quieras que se ejecuten al completar el puzzle. Por ejemplo, podrías reproducir un sonido, o mostrar una imagen con la acción Mostrar/Oculta botones y formularios.

Puedes ver un ejemplo en el caso práctico de este tutorial. Es ese ejemplo, al finalizar el puzzle se muestra la imagen completa.

Casos Prácticos

Puzzle de 6 piezas

En este ejemplo se muestra un sencillo puzzle de 6 piezas.

Hazlo tu mism@

Si quieres realizar este caso práctico o ver como se ha hecho, descarga los ficheros del proyecto.

Caso práctico terminado Descargar
Preparado para practicar Descargar

Después de descargar un fichero, descomprímelo y verás que en su interior ya está todo preparado. Si abres la carpeta del proyecto podrás comprobar que incluye la carpeta «Libraries» y en su interior encontrarás todo lo necesario para diseñar la publicación.

Pruébalo en tu dispositivo

También puedes ver el resultado en «480i Viewer iPad/Android» instalando el caso práctico a través de su id. Si nunca has añadido una aplicación por id y quieres saber cómo se hace, échale un vistazo a este minitutorial.

ID de instalación puzle
Ir al Foro