| MetaCard y Revolution: Herramientas de autor multiplataforma para multimedia | ||
|---|---|---|
| Anterior | Capítulo 1. MetaCard | Siguiente |
Desde la anterior pila (si todavía no está familiarizado con este término debería volver sobre la sección anterior) ejecutaremos ahora la opción de Presentation Tutorial para empezar a descubrir las posibilidades de animación de objetos en pantalla, programación de eventos en función del tiempo y la reproducción de un fichero de audio. Todos ellos elementos que puede necesitar a la hora de desarollar una aplicación que deba incluir elementos que atraigan la atención del usuario.
Este tutorial le guiará a través del proceso de construcción de una pequeña presentación usando algunas de las características multimedia de MetaCard. Antes de comenzar este tutorial debería completar el tutorial sobre aplicaciones ("Application Tutorial") si no lo ha realizado todavía.
En este tutorial, aprenderá cómo:
formatear texto (añadir atributos).
usar el "Control browser".
crear un gráfico poligonal sencillo.
ocultar y mostrar objetos.
usar efectos visuales.
manejar mensajes en los scripts de la tarjeta y de la pila.
enviar mensajes a otros objetos.
usar la estructura de control repeat.
usar la orden move.
usar lock screen y unlock screen.
reproducir un sonido.
programar la generación de mensajes.
capturar una pantalla.
agrupar controles.
manejar los mensajes preOpenCard y openCard.
usar lock messages para bloquear la generación de mensajes.
Para comenzar el tutorial, cree una nueva pila y dele un nombre. Después cámbiele el tamaño hasta hacerlo aproximadamente igual al de ésta.
Ahora necesitará crear seis campos, que se ocultarán y luego serán mostrados en orden, de arriba a abajo (apareciendo progresivamente la información). Cree un campo e introduzca el texto que aparece en el campo superior de la "Presentacion ejemplo". Cambie la fuente de texto y los colores del campo, seleccionándolo con la herramienta de edición y usando las opciones "Font", "Size" y "Style" en la barra de menú de MetaCard. Puede también cambiar la alineación del texto mediante la caja de diálogo "Font Chooser", que puede invocar con el botón "Font..." de la sección "Appearance" de la paleta "Field Properties" (haga doble click sobre el campo para abrir la paleta de propiedades).
Después de haber introducido el texto y posicionado el campo, oculte el borde del campo y bloquee el texto ('lock text') mediante el diálogo "Field Properties". Haga 5 copias del campo manteniendo la tecla de control pulsada y arrastrando (con la herramienta de edición seleccionada). Cambie el texto de estas copias mediante el campo "Contents" de la sección "Name" de la paleta "Field Properties". Finalmente, ajuste el tamaño y la posición de los campos tal y como se muestra en el ejemplo. Observe que hay dos campos con texto de color amarillo.
Para cambiar el estilo de una parte del texto dentro de un campo, primero desbloquee el campo y luego, seleccione el texto marcando con el ratón (con la herramienta de ejecución seleccionada ). Después cambie la fuente, el tamaño o el estilo de la selección mediante las opciones correspondientes del menú "Text". Cambie ahora la fuente de las palabras "unlock screen" a Courier .
Haga click sobre la pila de la presentación de ejemplo y mire la animación otra vez. El campo azul se desplaza a lo largo de una ruta que tiene múltiples segmentos. Los puntos de esta ruta están definidos por un gráfico de estilo "poligonal" que está oculto en la pila de ejemplo.
Para hacerlo visible, abra el "Control Browser" desde el menú "Tools" y seleccione "Presentacion ejemplo" desde la lista de opciones de la parte superior del "Control Browser". Como puede ver, el objeto gráfico tiene un signo '+' en la columna "Hidden" (oculto). Para hacerlo visible, selecciónelo haciendo click sobre su nombre y después sobre el botón "Show".
Necesitará crear un gráfico similar para su pila. Observe que el punto final del gráfico debe estar por debajo del borde inferior de la tarjeta. Esto es así para que cuando muestre el campo en ese punto, esté oculto bajo la tarjeta y no resulte visible hasta que empiece a moverse.
Haga click sobre la herramienta del gráfico poligonal en la barra de menú de MetaCard. De nuevo en su pila, haga primero click en la posición final del movimiento (el punto central del cuarto campo) y entonces, arrastre y haga click en un segundo punto; después arrastre hacia abajo hasta el borde inferior de la ventana y haga doble click para terminar de añadir puntos. Entonces use la herramienta de edición para mover el gráfico, de forma que su punto final esté por debajo del borde inferior de la tarjeta. Puede cambiar el tamaño del gráfico para mover su punto inicial, de nuevo, al centro del cuarto campo. Dele al gráfico el nombre "ruta".
Ahora pongamos el campo en movimiento. Edite el script del gráfico haciendo click con el botón derecho sobre él y seleccionando "Edit Script...", o bien haciendo click sobre el botón "Script..." de la paleta de propiedades del gráfico. Introduzca lo siguiente en el script, reemplazando el manejador 'openCard' vacío que el editor de scripts crea para Ud. La '\' es un carácter de continuación. Si lo prefiere, puede también introducir el script sin romper la línea en lugar de usar ese carácter. Tampoco necesita escribir las cosas que empiecen con # o -- ya que estos símbolos indican que, todo lo que viene a continuación, es sólo un comentario:
on mostrar
# poner los puntos en una variable (puntosRuta) para
# simplificar futuras referencias a estos
# puntos
put the points of me into puntosRuta
# situar el campo debajo de la tarjeta
set the loc of field 4 to last line of\ puntosRuta
show field 4 -- se necesitará más tarde cuando el campo esté oculto
repeat with i = the number of lines in\ puntosRuta down to 2
# desplazar el campo desde el punto A al punto B
move field 4 from line i of\ puntosRuta to line i - 1 of puntosRuta
end repeat
end mostrar
La orden move usa dos puntos, pero el gráfico contiene tres, así que se necesita un bucle repeat para mover primero el campo desde el último punto hasta el segundo y, luego, desde aquí hasta el primer punto (usar un bucle repeat es una solución general al problema, ya que así funcionará con gráficos con cualquier número de puntos. En este ejemplo sencillo podíamos simplemente haber usado la orden move dos veces).
En este ejemplo el bucle repeat usa una variable llamada i (aunque se le podía haber dado cualquier otro nombre) y le asigna el valor 3 (el número de puntos del gráfico), ejecuta las sentencias que están dentro del bucle, luego le asigna el valor 2 y ejecuta las sentencias de nuevo. Entonces se da cuenta de que el valor de i coincide con la "condición de terminación" (2) y termina el bucle repetir.
Para comprobar que el script funciona como es debido, necesita enviar el mensaje "mostrar" al gráfico. Hay varias maneras de hacer esto, pero la más rápida consiste en introducir lo siguiente en la "Message Box":
send "mostrar" to graphic 1
Aunque para recuperar esta orden y volver a ejecutarla se puede pulsar simplemente Control-P (o usar la tecla de cursor arriba) en la "Message Box", se propone una forma más permanente de ejecutarla dentro del script de la tarjeta. Abra el script de la tarjeta desde la paleta "Card Properties", que puede abrirse desde el menú "Edit" o pulsando Control-Alt-C en el teclado. Añádale los siguientes manejadores:
on mouseUp
mostrarCampos
end mouseUp
on mostrarCampos
send "mostrar" to graphic 1
end mostrarCampos
Ahora use la herramienta de ejecución para hacer click sobre la tarjeta y verificar que funciona. Si el campo no empieza a moverse desde debajo de la tarjeta, o no termina en la posición adecuada, mueva o redimensione el gráfico (con la herramienta de edición seleccionada). Después inténtelo de nuevo seleccionando la herramienta de ejecución (un atajo consiste en hacer click con el botón central de un ratón de 3 botones, o usar la opción "Send mouseUp" del menú que se despliega pulsando el botón derecho). Cuando la animación funcione correctamente, oculte el gráfico mediante el "Control Browser".
Ahora necesitamos ocultar los otros campos y escribir las sentencias correspondientes para que se muestren de nuevo. Para ocultarlos defina un nuevo manejador en el script de la pila, que puede abrir desde la paleta "Stack Properties" o pulsando Control-Alt-S:
on ocultarCampos
repeat with i = 1 to the number of fields
hide field i
end repeat
end ocultarCampos
Llame a este manejador situando "ocultarCampos" justo antes de la línea "mostrarCampos" en el manejador mouseUp del script de la tarjeta, creado en el paso 4. Añada sentencias al principio del manejador "mostrarCampos" para mostrar los 3 campos superiores:
show field 1 with visual effect barn door open slow
show field 2 with visual effect dissolve
show field 3 with visual effect scroll left slow
Un truco que es importante para que el efecto "scroll" funcione es situar el campo de forma que su borde derecho esté en el borde derecho de la tarjeta. Haga el campo más grande para que el texto termine en la posición adecuada. Si no lo hace así, dará la impresión de que el campo surge de una ranura de la tarjeta en lugar de aparecer desde su borde.
Compruebe el funcionamiento del script haciendo click con la herramienta de ejecución en cualquier parte de la tarjeta (incluso aunque pulse sobre un campo, el mensaje finalmente llegará a la tarjeta, así que sólo necesita poner el manejador mouseUp en un único sitio). Si todo funciona bien, es el momento de añadir las sentencias que muestren, al mismo tiempo, los dos campos de abajo .
Abra el script del campo 5 usando el "Control Browser" y añada el siguiente manejador:
on mostrar
lock screen
show me
show field 6
unlock screen with visual effect\
wipe right very slow
end mostrar
Cuando bloquee la pantalla, ninguno de los cambios que haga a los controles serán visibles hasta que la desbloquee. Lock screen se usa a menudo para mejorar las prestaciones de scripts que hacen muchos cambios a muchos controles en una tarjeta. La pantalla se desbloqueará automáticamente al final de un manejador (previniendo así que se pueda dejar a MetaCard totalmente sin respuesta), pero en nuestro caso la pantalla es desbloqueada explícitamente para permitir que ocurra el efecto visual.
Abra el script de la tarjeta otra vez y añada la siguiente línea al final del manejador "mostrarCampos".
send "mostrar" to field 5
Ahora es momento de pasar a la siguiente tarjeta. Le dejaremos unos pocos segundos a la persona que esté siguiendo la presentación para que vea los diferentes campos y luego, pasaremos a la siguiente tarjeta. Añada lo siguiente al final del manejador mouseUp del script de la tarjeta:
prepararSend
A continuación, añada el siguiente manejador al script de la pila:
on prepararSend
send "siguienteTarjeta" to me in 3 seconds
end prepararSend
La orden send envía un mensaje a otro objeto, en este caso "me", que se refiere al objeto cuyo script se está ejecutando. Esto significa que se necesita otro manejador llamado "siguienteTarjeta" para recibir el mensaje. Añádalo en algún lugar del script de la pila:
on siguienteTarjeta
play "glissant.au"
go to next card
end siguienteTarjeta
La orden play reproduce un clip de sonido. En particular, este clip se encuentra en la pila "Audio" que se usa para ajustar el volumen de salida. En la mayoría de los casos, los clips de audio usados en una presentación serán reproducidos directamente desde archivos o bien importados dentro de la pila que los usa. No obstante, MetaCard localizará también el clip de audio si está guardado en cualquier otra pila cargada.
La parte "in 3 seconds" de la orden send anterior significa que el mensaje debería ser enviado 3 segundos después de que la orden send sea ejecutada. Pero, ¿qué ocurre si se pasa de la primera a la segunda tarjeta en ese intervalo de 3 segundos (a causa de otro manejador, o usando el propio "Navigator" de MetaCard)? El mensaje será enviado de todas formas y ¡se acabará en la tercera tarjeta!
Para prevenir que esto pueda ocurrir, en el caso de que se cambie de tarjeta en ese intervalo de tiempo, se debería cancelar el mensaje pendiente evitando así que sea entregado. Para esto se requieren tres pasos. Primero se necesita declarar una variable que guarde el "id" del mensaje. Para ello inserte una línea como la siguiente en la parte superior del script de la pila:
local idTemporizador
Las variables así declaradas mantienen su valor entre mensajes (al contrario que las variables declaradas dentro de los manejadores, que pierden sus valores cuando se sale de ellos). Esto es similar a la forma en que trabajan las variables globales aunque, en este caso, las variables declaradas localmente no se pueden usar fuera del script en el que son declaradas.
Ahora para averiguar el "id" (número asignado a un objeto cuando es creado) del temporizador, el cual es asignado a the result (resultado) por la orden send, sitúe la siguiente sentencia inmediatemente después de la orden send en el manejador "prepararSend", dentro del script de la pila:
put the result into idTemporizador
Finalmente, necesitamos cancelar el temporizador cuando se cambie de tarjeta. La forma más sencilla de hacer esto es mediante el manejador asociado al mensaje 'closeCard', que se envía a la tarjeta justo antes de que ésta desaparezca de la vista. Se puede atrapar este mensaje en el script de la pila:
on closeCard
cancel IdTemporizador
end closeCard
Aunque el mensaje con el id "idTemporizador" se cancela automáticamente cuando es entregado (es decir, cuando se llama al manejador "siguienteTarjeta", lo cual provoca que sea enviado un mensaje 'closeCard', ya que ello lleva a la siguiente tarjeta), no hay ningún problema por cancelarlo otra vez.
Cree una nueva tarjeta en su pila mediante la opción "Create Card" del menú de edición. Haga una captura de una de las ventanas de MetaCard (o cualquier otra ventana de la pantalla) seleccionando la opción "Import" del menú de archivos.
Rotule su captura creando campos y gráficos poligonales. Probablemente necesitará cambiar el 'lineSize' de los gráficos y poner sus propiedades 'startArrow' o 'endArrow' a cierto.
Después de crear un gráfico y el campo correspondiente, agrúpelos seleccionando ambos y escogiendo la opción "Group" del menú de edición (o pulse Control-G). Al hacer esto se facilita el desplazarlos juntos. También será más fácil ocultarlos y mostralos juntos, ya que puede ocultar y mostrar el objeto "grupo" (en lugar de tener que mostrar los dos controles individualmente como se hizo en la primera página).
Para duplicar la animación mostrada en la segunda tarjeta de la presentación de ejemplo, oculte los grupos en un manejador 'preOpenCard' y muéstrelos de nuevo en un manejador 'openCard' en el script de la tarjeta. Use un bucle repeat similar al utilizado para ocultar los campos en la primera tarjeta, pero especifique "group i" en lugar de "field i" en el bucle.
El mensaje preOpenCard se envía justo antes de que la tarjeta se haga visible. Un manejador 'preOpenCard' es un buen lugar para ocultar controles que se harán visibles más tarde. El mensaje 'openCard' se envía después de que una tarjeta se haya redibujado y es un buen lugar para poner cosas que desee que el usuario de su pila vea.
Use el navegador o las flechas del teclado para regresar a la primera tarjeta de su pila. Puede querer añadir un manejador 'openStack' que llame al manejador mouseUp. De esta manera, su presentación empezará a funcionar cuando la pila se abra. Para comprobar este nuevo manejador, cierre la pila y vuelva a abrirla escribiendo go 'nombre_de_la_pila' en la "Message Box".
A veces querrá ir a una tarjeta sin ver todas las animaciones que son lanzadas desde los diversos manejadores de eventos que ya hubiese dispuesto al efecto. Para hacer esto, escriba algo como lo siguiente en la "Message Box":
lock messages; go to card X
La orden lock messages evita que los habituales mensajes 'preOpenCard' y 'openCard' sean enviados a una tarjeta cuando ésta es abierta. El punto y coma tiene el mismo efecto que la tecla return en un script normal. En este caso se necesita porque no se pueden escribir múltiples líneas dentro de la "Message Box" (ya que la pulsación de la tecla return provoca la ejecución del script).
Compruebe que su pila funciona corectamente. Si algo no funciona bien vuelva hacia atrás y comprueba que ha seguido todos los pasos de este tutorial. Podría también abrir la presentación de ejemplo como una pila de nivel superior para ver cómo funciona, escribiendo lo siguiente en la caja "Message Box":
topLevel "Presentacion ejemplo"
Si todo funciona como es debido, guarde su pila y añada un icono para ella en su pila "Home". Ahora podría ser también un buen momento para recorrer la pila de ejemplos de MetaTalk para ver otras cosas que se puede hacer con MetaCard.