“Efecto Pizarra”: Dibuja en tu App

Índice

¿Qué es?

Desde 480interactive puedes realizar dibujos de líneas, bocetos, etc mediante el elemento extra “Pizarra“.

La pizarra es un espacio en la página en el que podemos dibujar como en un lienzo. Además, tendremos la posibilidad de cambiar el grosor y el color del trazo.

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

¿Cómo funciona?

Guía rápida

Los pasos serán similares a los de cualquier elemento extra:

Crea el contenedor desde InDesign

  1. Crea un marco rectangular delimitando la zona en la que se va a mostrar la pizarra. Este marco será el contenedor del Elemento Extra.
  2. Pon un nombre al marco rectangular que acabas de crear desde el panel Panel Capas. No uses dos veces el mismo nombre en un mismo documento InDesign.
    Renombrar marco
  3. Convierte a botón el marco rectangular que acabas de crear desde “Botones y formularios” .

Esto es todo lo que hay que hacer desde InDesign. Guarda el documento y usa 480i Script para convertirlo en una issue. A continuación, crea tu App desde el 480i Manager de la forma habitual. Si nunca has realizado estos pasos es aconsejable que hagas primero este sencillo tutorial que te ayudará a aprender los conceptos más básicos para crear una App.

Añade el elemento extra a tu publicación

  1. En 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.
  2. Despliega el contenido de la publicación en la que quieres agregar la Pizarra.
  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 «Añadir Pizarra».
    añadir elemento extra

Configura el elemento extra

Dentro de la carpeta Elementos extra se habrá creado una nueva entrada. Selecciónala para visualizar las opciones de configuración y sigue estas indicaciones:

  1. Elige el contenedor.
    • El nombre del contenedor es el que le pusiste al marco desde InDesign cuando preparaste el contenedor.

Podemos personalizar la visibilidad de la barra de botones superior, si activamos la casilla “Mostrar barra de opciones” la barra superior de nuestra Pizarra, será visible y podremos personalizar el tipo de trazo mediante los opciones de los botones de esta barra que aparecerá en la App. También podemos personalizar el color y grosor de trazo que aparecerá por defecto en la App.

En el caso de desactivar la barra por defecto podemos crear una barra de botones mediante acciones desde InDesign para poder establecer el color del trazo, el tamaño del mismo y limpiar la pizarra. Cuando no se cuenta con barra de botones quizás se quiere permitir cambiar el grosor del trazo, el color del mismo y limpiar la pizarra.

Para ello disponemos de tres acciones mediante el uso de URLs especiales. Para ello hay que crear un botón.

Boton para cambiar el color de trazo

  1. Convierte a botón el elemento al que le vas a añadir la acción.
  2. Selecciona el color de fondo al rectángulo.
  3. Añádele la acción «Ir a URL».
  4. Escribe la URL «cointeractive://setcanvascolor».

Botón para cambiar grosor del trazo

  1. Convierte a botón el elemento al que le vas a añadir la acción.
  2. Añádele la acción «Ir a URL».
  3. Escribe la URL «cointeractive://setcanvasstroke/TAMANYO_EN_PIXELS». Por ejemplo, si quieres que el trazo tenga un grosor de radio de 10 píxels, deberás escribir “cointeractive://setcanvasstroke/10”.

Botón para borrar la pizarra

  1. Convierte a botón el elemento al que le vas a añadir la acción.
  2. Añádele la acción «Ir a URL».
  3. Escribe la URL «cointeractive://clearcanvas».

Casos Prácticos

Pizarra Sencilla

En este caso práctico vamos a mostrar cómo podemos incorporar la funcionalidad Pizarra a nuestra App. Crearemos un campo de baloncesto desde el que se podrán dibujar las indicaciones para las jugadas.

Hazlo tu mism@

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

Pizarra Sencilla
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.

Pizarra
ID de instalación pizarra

Pizarra Personalizada

En este caso práctico aprenderás a crear usar el efecto “Pizarra” y a añadir elementos sobre la pizarra que podrás mover arrastrándolos con el dedo. Crearemos un campo de balonceso en el que poder pintar las indicaciones de las jugadas y aprendermos a crea un jugador y una pelota que se puedan desplazar.

Hazlo tu mism@

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

Pizarra Personalizada
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.

Pizarra personalizada
ID de instalación pizarrapersonalizada
Ir al Foro