Instalación
- Entrar a la web de Button y descargar el plug-in.
- Descomprimir el archivo
- Seguir las instrucciones del manual para instalar en Mac o Windows.
- Abrir InDesign y revisar la correcta instalación: Ventana – Button Plugin. Se debe abrir un menú flotante.
Descargar los archivos
- Entrar a este link de Drive y descargar los archivos para el ejercicio del taller.
Empezar a diseñar
- Abrir un documento nuevo – mobile/moviles – iPad
- Ventana – Bütton Plugin
- Crear nuevas páginas: Bütton Plugin – Añadir artículo/Add article. En el alto/height del artículo, vam a hacer la suma 1024+1024. Se generará una nueva página, en este caso doble, donde podrán ver una guía o regla que les separa el corte de la pantalla. Así, tendremos una página sencilla seguida de una página doble.
- Para este ejercicio, no vamos a usar este archivo. Van a abrir los archivos que están en la carpeta que descargaron. En estos ya hay material diagramado para que puedan experimentar.
¿Previsualizar o exportar?
¡Ojo! Para previsualizar, es necesario que ambos dispositivos tengan el mismo sistema operativo. Si están trabajando en Mac, pueden previsualizar en un iPhone o Ipad; si están trabajando en Windows, pueden previsualizar en un Android. No pueden previsualizar su proyecto en un dispositivo Android si están trabajando en Mac. Si cuentan con sistemas distintos, utilizaremos la opción de exportar para ver los cambios en la web.
Sistemas operativos diferentes: Exportar
- En la ventana Button Publish, dar click a Export
- Elegir la carpeta Export
- Seleccionar la página que quiero visualizar
- Comprimir en ZIP (Botón derecho sobre la carpeta, comprimir)
- Entrar a https://browser.buttonpublish.com/previewer/https://browser.buttonpublish.com/previewer/
- Arrastrar el ZIP. Si se queda cargando la página refresquen el navegador.
Mismo sistema operativo: Preview (Mac)
No lo vamos a usar en el taller de hoy. Para usarlo, deben descargar la app para su tablet o celular y seguir los pasos. Para poder visualizar deben conectar su iPad o iPhone por cable y descargar la app de Button Viewer.
Animación
Para ver las distintas animaciones y herramientas que ofrece el plug-in, entren al sitio web y en la parte inferior podrán ver una simulación de cómo se ven. Pueden descargar los ejemplos y en este apartado les explico cómo hacerlos.
Añadir páginas
Para trabajar con Bütton, vamos a añadir páginas a través del plug-in y no directamente desde InDesign: Añadir artículo – Aceptar. Si quieren que su página sea continua hacia abajo, pueden alterar la altura de la página. Tengan en cuenta que esta debe ser múltiplo del tamaño de la pantalla. En este caso, nuestra pantalla es de 1024 pixeles, es decir que pueden multiplicarlo por 2, 3, 4, … según el largo que requieran.
Hacerlo por este medio les permitirá tener unas guías automáticas para saber los cortes de la pantalla.
Movimiento fluido al “tap” o movimiento por página
Visualmente, los movimientos en pantallas táctiles pueden ser dos: el primero, que la página deslize con la velocidad de mi dedo, y la segunda, que las páginas deslicen una a una con un movimiento estático. (Piensen, por ejemplo, cuando leen un pdf. Ustedes pueden elegir si el scroll les separa página por página o si se percibe como una página continua.
- Para un movimiento fluido: Plug-in – Article properties – quitar la selección en paginated article.
- Para un movimiento página a página: Plug-in – Article properties –selección en paginated article.
Hacer un texto en scroll/deslizante
Para que un cuerpo de texto tenga una parte oculta y al deslizar con el dedo se pueda seguir leyendo.
- Crear la caja de texto en InDesign y van a dejar texto fuera del campo visible de la caja o desbordado (aparece el ícono rojo de +). No es necesario hacer nada más. Cuando exporten o visualicen, pueden deslizar para seguir leyendo.
Bounce: contenido oculto
- Crear una caja del color de fondo debajo de la página de alrededor de 500px de altura.
- Seleccionar el objeto – Entrar al plug-in – Bounce – Arrastrar el objeto a la caja content.
- Abrir el panel de páginas de InDesign – Editar tamaño de página – altura: 1025. Hay que añadirle un pixel más para que Button entienda que hay más contenido.
Animación simple
- Seleccionar el objeto que queremos animar – Plug-in: animation – arrastrar el objeto a la caja de content.
- Para crear los keyframes, que son las coordinadas de a dónde queremos que se mueva nuestro objeto, vamos a utilizar la herramienta de InDesign “Marco rectangular”.
- Deben crear la cantidad de keyframes que quieran. Yo les recomiendo empezar con uno para que entiendan cómo se anima. El keyframe, que será este marco rectangular, debe tener el mismo tamaño que el keyframe del objeto que quieren animar. Si queremos que cambie de tamaño, el keyframe deberá tener el tamaño al que deseamos animarlo.
- Cuando tengan ubicado el marco en la posición que eligieron, lo van a arrastrar al panel del plug-in en la caja de Keyframes. Cuando hagan esto, el botón debe cambiar a color verde.
- Pueden elegir el movimiento y la velocidad con Select easing y Animation Type.
Con esta acción también pueden generar trayectorias. En ese caso, utilizan la herramienta de lapiz de InDesign, marcan el camino o recorrido de la animación. En este caso, en vez de elegir la opción Keyframes, van a elegir la opción Path. Arrastran su recorrido a la caja y debe aparecer el objeto en verde.
Animación con scroll
- Elegir el contenido u objeto que van a animar
- Elegir qué movimientos quieren que haga. Esto lo harán con la misma idea del key frame en el punto anterior. Recuerden que los key frames deben tener el mismo tamaño que su objeto si no quieren que se altere su tamaño. La posición de cada keyframe generará el movimiento. Pueden sacar los objetos de la página para que empiecen por fuera y entren, o al contrario. Piénsenlo como tres estados: dónde está cuando yo entro a la página, dónde se ubica cuando estoy en la página y a dónde se va cuando yo me voy de la página.
- Arrastran el objeto que van a animar a la caja de content y los marcos o key. frames, en orden, a la caja correspondiente.
- Para este tipo de animación, deben marcar o activar la casilla Page Range.
- Si quieren hacer un recorrido, deben seguir los mismos pasos que en el punto anterior.
Flip/voltear
Esta herramienta la tienen que revisar con más calma. Para hacer un efecto de voltear, van a necesitar tres elementos: 1. El marco o área activa, esto será donde el usuario hará tap para voltear el elemento y debe ser un key frame; 2. El elemento que se ve inicialmente; 3. El elemento que se ve al voltear.
- Crear los tres elementos fuera de la página de diagramación.
- Seleccionar el keyframe y arrastrarlo a área activa
- Seleccionar el elemento inicial y arrastrarlo a “front object”
- Seleccionar el elemento final y arrastrarlo a “back object”
Una vez el botón del panel salga en verde, es necesario que alineen los tres objetos (herramienta alinear de InDesign) y los ubiquen en su posición en la página.
Zoom
Seleccionar el objeto al que quieren hacerle Zoom, arrastrarlo al panel.
Paso de imágenes / Slideshow
- Crear un área activa como lo vimos antes, fuera de la página y del tamaño de las imágenes.
- Ubicar las imágenes, con el mismo tamaño del área activa, fuera de la página.
- Ir al plug-in – slideshow
- Arrastrar el área activa a la caja correspondiente
- Arrastrar las imágenes a la caja de contenido
- Ubicar el área activa dentro de la página, en la posición deseada, y encima la primera imagen que quieren que aparezca.
- Seleccionar la dirección para deslizar.
Exportar
- Abrir todos los documentos en InDesign
- Exportar cada uno de manera individual en la carpeta export. Revisen si van a paginar o no según el tipo de movimiento que quieran.
- Cada carpeta exportada tendrá dentro una carpeta llamada «001» y un thumbnail. Para que Button entienda el orden de los artículos, les recomiendo que ordenen las carpetas de cada artículo con su respectivo número y, dentro de estas carpetas, a las carpetas nombradas «001» le den el mismo número que la que las contiene. Esto porque, si dejan todas como «001», Button no va a saber cuál abrir de primeras.
Quedarían 001, 002, 003, … - Comprimir como ZIP.
- Conecta tu dispositivo al computador y entra a los documentos sea de tu tableta o de tu móvil. Buscar Button View y entrar.
- Copiar el .zip de su proyecto dentro de Button View.
- Entrar a Button View desde el dispositivo y debe aparecer su publicación.
Recursos adicionales
- Inspiración de portadas/cubiertas animadas
- Iconos: Es importante que tengan en cuenta que la experiencia de usuario implica que su audiencia entienda cómo navegar su publicación. Les recomiendo dos cosas: 1. Hacer una página de instrucciones y 2. Utilizar iconos que sean claros para la audiencia, que les muestren cómo navegar. Recuerden: siempre piensen en la audiencia.
- Sistema drag and drop. El sistema de Button para animar es muy sencillo. Solo deben seleccionar y arrastrar los elementos que quieren animar dentro de las cajas que les indican «drag and drop». El botton «Objects missing» debe ponerse en verde con el texto «Objects ready». Tengan en cuenta que lo deben arrastrar dentro de la caja que dice «content».
- Mapas: https://www.coordenadas-gps.com/
- Banco de sonidos: https://mixkit.co/free-sound-effects/