Seleccionar página

Tutorial de Lemur por Antonio Blanca – Navegación estilo carpeta

por | Nov 12, 2012 | Tutoriales | 0 Comentarios

Antonio Blanca nos ha cedido para animatek.net, una serie de tres tutoriales dedicados al controlador Lemur, aquí os dejo la  última parte, esperamos que os gusten.

Siento ser yo quien lo diga, pero si, el tamaño importa 🙂

Digo esto por supuesto cuando se trabaja con la pantalla del iPad , muchas veces te encuentras haciendo una plantilla y te falta espacio,  así que necesitas buscar soluciones para compactar muchos controles en una sola interfaz y simplificar el diseño pero manteniendo la funcionalidad intacta.

Una de mis soluciones preferidas es crear una navegación “estilo carpeta o pestaña”, una de las principales ventajas es que ganas espacio que podrías aprovechar para situar otros controles más relevantes mientras ocultas los menos usados ó a los que accedes con menos frecuencia.

Dejo un ejemplo por si alguien está interesado y explico como funciona, podéis descargarlo al final de la entrada.

Al cargar el módulo se mostrará esto en vuestro lemur:

Nada impresionante 🙂 , lo importante es observar que el área de lemur todavía permanece en negro, dejandote la opción de poner controles en ese espacio.

Pulsando el botón se iluminará y mostrará una nueva ventana:

Como se ve en la imagen, hay 8 etiquetas que muestran Label1, Label2 etc, es posible renombrar las etiquetas acorde al uso que le vayas a dar (más detalles al final de la entrada).

Pulsando sobre una etiqueta se accede al contenido que hay en su interior, tendrás 8 pestañas distintas donde colocar tus objetos, el número de pestañas también es configurable (de 2 a 8). Para establecer el número de pestañas para el módulo, abre el menú #TABS y elige una opción, toda la información como etiquetas, números, led de posición, etc, se ajustará automáticamente.

Al pulsar sobre el nombre veréis esto:


Arriba el número 2 te dice que estás en la segunda pestaña, seguido de un texto (Label2) que te dirá el nombre que le hayas puesto a la etiqueta.

En el centro se muestra un texto que viene a decir “arrastra tus controles aquí” , haz la prueba añadiendo un fader, knobs, pads, o lo que más te guste, una vez terminado, pulsa el botón con la flecha apuntando hacia arriba, la pestaña actual se cerrará y te llevará a la sección principal, donde puedes repetir el proceso con otros controles distintos en otra pestaña.

Las flechas izquierda/derecha te permiten moverte a la pestaña anterior ó siguiente para facilitar la navegación, pulsando sobre cualquiera de esas flechas mostrará su contenido (si lo hay). Un led blanco te da una referencia visual de la pestaña seleccionada.

Como editar el nombre de las pestañas.

En Lemur Editor, sección proyecto, busca un script con el nombre “editNames“, selecciona el script y se mostrará el siguiente código:

Como veis he cambiado las tres primeras que ahora son ‘MIDI’,’GUI’, ‘COLOR’, una vez terminada la edición al salir esa información será actualizada en el módulo como podéis ver en esta imagen:

Para finalizar, un simple ejemplo de como podría quedar en vuestra plantilla:

Como veis, el botón circular queda abajo, y hay unos controles principales que son siempre visibles, al pulsar el botón, el contenido se ocultará y mostrará la pestañas a las que queréis acceder.

Aquí os dejo el archivo, espero que sea utilidad en vuestras plantillas.

Descarga el archivo del tutorial

link | antonioblanca.com

Publica un comentario a continuación aportando tu opinión sobre este post y si tienes alguna duda respecto al tutorial o si tienes alguna propuesta para futuras guías.

Para los más atrevidos hemos creado un
botón de donaciones que nos ayuda a seguir con la web y crear nuevos contenidos interesantes como el que acabas de leer.

Muchas gracias y no olvides compartirnos en redes sociales, nos ayuda mucho!!