MetaCard y Revolution
Herramientas de autor multiplataforma para multimedia
Manuel Agustí i Melchor
Para la asignatura de SMM e IMD
DISCA (EUI, UPV)
DISCA (EUI, UPV)
España, Valencia, Camino de Vera.
Copyright © 2002, 2003, 2004 M. Agustí. Todos los derechos derivados de la propietat intelectual del material aportado por los autores está reservado a los mismos, pero puede utilizalo dentro de los términos de la licencia abierta al estilo GNU. Se reconoce la autoría de las citas que se hagan a lo largo del mismo y de las marcas registradas que se citen.
Permission is granted to copy, distributed and/or modify this document under the terms of the GNU Free Documentation License Version 1.1 or any later version published by the Free Softwate Foundation; with no Invariant Sections, with the Front-Conver being "Multimedia, multiplataforma y MetaCard: la Revolución": Multimedia, multiplatform and MetaCard: the Revolución", and with no Back-Cover texts. A copy of the license is included in the section entitled "GNU Free Documentation License".
This document can be freely redistributed according to the terms of the GNU Free Documentation License (GFDL).
Copyright ©. Permission is granted to copy, distributed and/or modify this document under the terms of the GNU Free Documentation License Version 1.1 or any later version published by the Free Softwate Foundation; with no Invariant Sections, with no Front-Conver texts, and with no Back-Cover texts. A copy of the license is included in the section entitled "GNU Free Documentation License".
Cualquier comentario sobre estos contenidos será bienvenido. La última versión de este documento la puedes encontrar en la Web de M. Agustí.
This documentation is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
For more details see the file COPYING in the source distribution of Linux.
Dedicatoria
Als meus pares que sempre estan ahí.
Als meus companys de l'assignatura Sistemes Multimèdia que tenen que aguantar els meus bombardejos de correus electrònics.
Als meus companys del "maxidespatx" que ja han deprés que existeix MetaCard, Revolution i XML a força de sentir-me-ho repetir.
Als meus alumnes que acepten el desafiament de treballar en ferramentes multiplataforma i programes de lliure distribució.
A la gent de MetaCard Corp. i de Revolution Ltd. per la seua dedicació i el seu saber fer.
- Tabla de contenidos
- Prefacio
- I. MetaCard y Revolution: presentación
- II. Trabajando con las herramientas
- Herramientas de autor: ensambladores de contenidos
- 4. Objetos y controles básicos
- Botones (button)
- Campos de texto (field)
- Mapas de bits (image)
- Primitivas de dibujo: gráficos vectoriales (graphic)
- Vídeo y sonido (player)
- Barras de desplazamiento (ScrollBar)
- Tarjetas (card)
- Pilas (stack) y subpilas
- Caso de estudio: una agenda para guardar el historial clínico de pacientes
- Ejercicios y actividades
- 5. Otros elementos
- 6. Interfaz: controles complejos y procesos externos
- 7. Texto
- 8. Sonido y audio
- 9. Imágenes y gráficos
- 10. Vídeo y animación
- III. Casos abiertos de estudio
- Prefacio: finalidad
- 11. Una presentación movida
- 12. Recorriendo las tarjetas
- 13. Conociendo Revolution
- 14. Caja de herramientas para MetaCard / Revolution
- 15. Historial médico
- 16. Caso de estudio: una revisión de los tutoriales básicos
- 17. Edición de un documento XML con Revolution
- 18. Juego de preguntas usando XML con Revolution
- 19. Agenda con mensajes sonoros
- 20. Utilizando otros formatos de audio: Ogg Vorbis
- 21. Base de datos de imágenes: Recuperación asistida
- A. Agenda para el seguimiento de la actividad de los alumnos
- B. Revolution Underworld (2D y 1/2): un juego con "perspectiva"
- IV. Licencias de uso de este material
- Bibliografía
- Glosario
- Índice
- Lista de tablas
- 1-1. Listado de las MetaClasses
- Lista de figuras
- 1-1. El entorno básico de MetaCard: pantalla de presentación.
- 1-2. Mi MetaCard: mi HOME, el HOME de MetaCard.
- 1-3. La MenuBar o barra de menús y herramientas de MetaCard.
- 1-4. Las opciones de la entrada Tools de la MenuBar desplegadas.
- 1-5. La "demo" en ejecución. Capturas del índice y del mapa de contenidos de la aplicación (en la primera fila) y dos ejemplos de la ejecución (en la segunda fila) .
- 1-6. Otra tanda de instantes de la "demo" en ejecución.
- 1-7. La ayuda en línea: tutoriales, documentación, la licencia y el soporte técnico.
- 1-8. Los contenidos de la ayuda desplegados: ejemplos de los diferentes puntos donde se propone acudir.
- 1-9. Message Box: el banco de pruebas rápido y el lugar más cómodo donde dejar mensajes mientras se desarrolla.
- 1-10. El editor integrado de MetaCard con la característica de colorear el código activaa (Tools|Colorize Script).
- 1-11. Mensaje de aviso del Starter Kit: sólo se pueden utilizar 10 instrucciones en el código de un objeto.
- 1-12. Creación de Interfaces con el Front-End Tutorial.
- 1-13. "External Tutorial": aplicaciones de extensión de operaciones de cálculo matemático.
- 1-14. "External Tutorial": aplicaciones con salida gráfica (imagePixmapId).
- 1-15. "External Tutorial": aplicaciones para acelerar el procesado de imágenes mediante librerías externas.
- 1-16. "External Tutorial": la versión de ALTUIT utiliza la función MatrixConvolve.
- 1-17. Desensamblando la pila "Home" para aprender.
- 1-18. Pilas de donde aprender, de arriba abajo y de izquierda a derecha: importar elementos, configurar la impresión, buscar en los campos de texto y descargas de Internet.
- 1-19. Personal Organizer Example: muestra de la tarjeta de agenda.
- 1-20. Personal Organizer Example: muestra de la tarjeta de contactos.
- 1-21. Índice de la aplicación recopilatoria de ejercicios de examen.
- 1-22. Descripción del ejercicio sobre cómo reproducir un fichero de audio (imagen de la izquierda) y una posible implementación de este ejercicio (derecha).
- 1-23. Muestra de la tarjeta del paso correspondiente a las propiedades del texto y un ejemplo de su realización.
- 1-24. Enunciado y posible resultado del ejercicio sobre recorrido de una pila.
- 1-25. Texto y posible resultado del ejercicio sobre localización de objetos.
- 1-26. Texto del ejercicio sobre cómo incluir una imagen y un posible resultado.
- 1-27. Cuestión sobre la utilización de algunas de las paletas de herramientas contenidas en MetaCard y sus respuestas, tal como aparecen en el propio tutorial.
- 1-28. Muestra de las tarjetas que plantean los ejercicios al respecto de las operaciones de movimiento y ocultación de objetos en una pila de MetaCard.
- 1-29. Ejercicio al respecto de la forma de nombrar objetos para facilitar la reducción de líneas de código necesarias para referenciarlos.
- 1-30. Planteamiento y un instante de la ejecución del ejercicio de construcción de una aproximación a un castillo de fuegos artificiales hecho en MetaCard.
- 1-31. Ejemplo de apariencia de las tarjetas del cuestionario.
- 1-32. Capturas de la aplicación realizada donde se muestra la situación inicial y final del contenido de la ventana.
- 1-33. Crearemos una pila que contenga los botones y otros controles necesarios para realizar el recorrido de la pila "Application Tutorial".
- 2-1. El entorno básico de Revolution: la pantalla de presentación.
- 2-2. Mi Revolution: el panel de herramientas de la izquierda contiene una modificación propia y el Application Overview se muestra al iniciar el entorno, en este caso desplegado mostrando el contenido de en una aplicación.
- 2-3. A propósito de Revolution y de sus autores: esta pequeña pila es un detalle de su forma de trabajar.
- 2-4. Un ejemplo de los consejos (tips) de Revolution.
- 2-5. Ventana incial de los tutoriales de Revolution.
- 2-6. Índice de la documentación en Revolution.
- 2-7. La caja de mensajes de Revolution, una herramienta a no olvidar.
- 2-8. El primer tutorial de Revolution: Getting Started: a) apariencia final y b)esquema de la aplicación.
- 2-9. Un ejemplo inicial del asistente de menús.
- 2-10. Un ejemplo en funcionamiento del asistente de animaciones.
- 2-11. El asistente para la geometría de los objetos.
- 2-12. Un primer ejemplo del asistente de perfiles.
- 3-1. Puede aprender a programar con el propio MetaCard y su MetaTalk Programmer (izquierda) o dirigir este proceso con la ayuda de las lecciones básicas del (derecha) MetaTalk Programmer Teacher's Manual .
- 3-2. Aspecto de la pila en la que se desarrolla la problemática de sustituir los bucles por envío de enventos.
- 3-3. Aspecto de la pila rellonge.mc para probar el envío y la cancelación de eventos.
- 3-4. Ejemplo de bucle programado con eventos: la primera fila constituye la disposición de los objetos (el punto de partida) y la segunda los dos posibles resultados que queremos obtener.
- 3-5. Instrucciones send y call: entorno de pruebas compuesto por una pila principal (izquierda) y una subpila (derecha).
- 3-6. Modificando el comportamiento de los botones de la "Menu Bar"
- 3-7. Modificaciones en la pila "Help Index".
- 3-8. Galeria de objetos y pila auxiliar para la creación de diferentes tipos de botones.
- 3-9. Galeria de objetos.
- 3-10. Ejemplo de apariencia final de las nuevas funcionalidades.
- 4-1. Tipos de botones disponibles en MetaCard y sus propiedades.
- 4-2. Botones de selección: mínima aplicación para las pruebas.
- 4-3. Botones de selección: propiedad y orden hilite.
- 4-4. Ejemplo de selección mediante botones de selección múltiple.
- 4-5. Botones de selección que tratan, de forma dinámica, la activación o desactivación de su estado.
- 4-6. Ejemplo de botones desplegables.
- 4-7. Aspecto y propiedades de un objeto tipo "field" (campo de texto).
- 4-8. Captura de ejemplo de la pila desarrollada para obtener el acrónimo de un texto.
- 4-9. Ejemplo de uso de un campo de texto que permite un comportamiento de lista: seleccionando sus contenidos de forma agrupada y por líneas.
- 4-10. Propiedades que dotan de un comportamiento de lista a un campo de texto.
- 4-11. Aspecto y propiedades de un objeto tipo "image" (barra de desplazamiento).
- 4-12. Las operaciones típicas sobre un objeto de tipo "image".
- 4-13. Aspecto y otras propiedades de un objeto tipo "graphic" (gráfico).
- 4-14. Utilización del gráfico de tipo poligonal (Graphic tool (polygon)).
- 4-15. Ejemplo de objeto gráfico de tipo circular (Graphic tool (oval)).
- 4-16. Ejemplo de gráfico vectorial (primera aproximación).
- 4-17. Ejemplo de gráfico vectorial (segunda aproximación).
- 4-18. Ejemplo de reloj de "varillas".
- 4-19. Ejemplo de gráfico vectorial (segunda aproximación).
- 4-20. Apariencia de una pantalla típica del juego del Comecocos (del trabajo de Rafael Salguero y Jose V. Sebastiá).
- 4-21. Desarrollando un objecto gráfico animado (parte 1).
- 4-22. Desarrollando un objecto gráfico animado (parte 2).
- 4-23. Desarrollando un objecto gráfico animado (final).
- 4-24. Utilización de "play VideoClip".
- 4-25. Aspecto y propiedades de un objeto tipo "player" (barra de desplazamiento).
- 4-26. Aspecto y propiedades de un objeto tipo "scrollbar" (barra de desplazamiento).
- 4-27. Ejemplo de barra de desplazamiento incorporada a un elemento del interfaz de una aplicación y utilizada para mostrar una representación gráfica de la evolución de un proceso secuencial.
- 4-28. Asignando una imagen de fondo a una tarjeta.
- 4-29. Aspecto no regular de una ventana realizado con una imagen PNG con fondo transparente mediante The Gimp.
- 4-30. La pila Historial Clínico: tomando como base la agenda del primer tutorial de MetaCard. De arriba a abajo, las operaciones sobre registos (fichas): avanzar, retroceder, borrar y crear.
- 4-31. La pila Historial Clínico y el campo que contiene el número de historial que habrá de ser asignado de forma automática.
- 4-32. La pila Historial Clínico puede tener información para cada paciente a mostrar en las subpilas "Datos Personales" e "Historial".
- 4-33. Pila Historial Clínico y subpilas Datos Personales e Historial.
- 4-34. Formato de la pila "Datos personales".
- 4-35. Pila Historial Clínico y la opción "Abrir historia" que debe lanzar la subpila "historia" .
- 4-36. Planteamiento básico del ejercicio de recorrido de una pila.
- 5-1. Ejemplo de la orden ask.
- 5-2. Ejemplo de la orden answer para escoger un directorio:
- 5-3. Ejemplos de creación de cajas de diálogo con modificadores situados en manejadores del evento mouseUp situados en dos botones diferentes.
- 5-4. Creación de un menú: pantalla inicial del asistente ejecutado a partir de la opción de la "Menu Bar" Tools|Menu Builder.
- 5-5. Ejemplo de utilización de la orden mouseMove para permitir el procesado de acciones.
- 5-6. Un momento de la ejecución de la aplicación de demostración de la "banda de goma"
- 5-7. Ejemplos de la ejecución de funciones relacionadas con el teclado.
- 5-8. Ejemplo de pila para poner en práctica los eventos de pulsación de teclas.
- 5-9. Obtención de algunas características de la pantalla
- 5-10. Tomando una instantánea al contenido de la pantalla.
- 5-11. Ejemplo de interfaz en funcionamiento.
- 5-12. Creando una pila para cargar cualquier pila disponible en un directorio.
- 5-13. Ejemplo de librería: la pila "libURL" y sus componentes.
- 5-14. test-library.
- 5-15. test-library.
- 5-16. Construcción de un ejecutable en MetaCard (primer paso).
- 5-17. Construcción de un ejecutable en MetaCard (segundo paso).
- 5-18. Construcción de un ejecutable en Revolution.
- 5-19. Recorrido de la pila "Application Tutorial".
- 5-20. Volcado a un fichero.
- 5-21. Formateado en HTML del contenido de la pila.
- 6-1. Captura de la aplicación desarrollada para mostrar la utilización de las Custom Properties.
- 6-2. Ejemplo de construcción dinámica de interfaz.
- 6-3. Ejemplo de construcción dinámica de un gráfico y de objetos de tipo image superpuestos a aquel.
- 6-4. Captura de la aplicación desarrollada.
- 6-5. Modificando el objeto campo de texto para que permita introducir caracteres acentuados.
- 6-6. Sockets 1 i 2.
- 6-7. Sockets 0.
- 6-8. Contenido de la pila a desarrollar.
- 6-9. Llegint des de i escribint a un mateix procés.
- 6-10. Llegint des de i escribint a un mateix procés.
- 6-11. Detalle de la aplicación donde se muestran los controles que implementan la secuencia de pasos y el de parada del proceso.
- 6-12. Llegint des de i escribint a un mateix procés.
- 6-13. Detalle de la aplicación donde se muestran los controles que implementan la secuencia de pasos y el de parada del proceso.
- 6-14. Detalle de la aplicación planteada donde aparecen: los controles mencionados y un ejmplo de su ejecución.
- 7-1. Tratamiento de las propiedades del texto: tamaño y desplazamiento.
- 7-2. Tratamiento de las propiedades del texto (2on. part).
- 7-3. Creación de un menú muy visual sólo con texto.
- 7-4. Enviando texto a un field con la orden type: un momento de la ejecución (izquierda) y final (derecha).
- 7-5. Ejemplo de interfaz en funcionamiento.
- 7-6. Ejemplo de recorrido de un fichero HTML para crear un índice de acceso a los apartados.
- 7-7. Ejemplo de recorrido de un fichero XML sencillo
- 7-8. XML Library
- 7-9. XML Library
- 7-10. Pila para la visualización de las funciones sobre tratamiento de documentos XML en Revolution.
- 7-11. Ejemplo de fichero XML: animals.xml.
- 7-12. Ejemplo de fichero DTD: animals.dtd. Una pequeña nota: significa "en peligro" (de extinción, en este caso), threat significa amenaza y poachers son "cazadores furtivos".
- 7-13. captura de la aplicación de formateado de un documento DocBook (en SGML) con DSSL.
- 7-14. captura de la aplicación de formateado de un documento DocBook (en SGML) con DSSL.
- 7-15. Detalle de la implementación de uno de los apartados de selección de valores para el formato final del documento.
- 7-16. Código asociado al apartado de selección de formato de la hoja de papel.
- 7-17. Detalle de la implementación del apartado de generación del fichero DSL.
- 7-18. Código asociado al apartado de creación del fichero que contiene las elecciones del usuario para la transformación mediante DSSSL.
- 7-19. Apariencia final de la aplicación para edición de documentos XML.
- 7-20. Un ejemplo de ficha del juego realizado directamente con los objetos de MetaCard.
- 8-1. Trabajo sobre audio: replicar la apariencia de XWaveTools.
- 8-2. Trabajo sobre audio: mcAudio.
- 8-3. Código de la aplicación desarrollada mcAudio.
- 8-4. Reproduciendo un fichero de audio mediante un objeto player.
- 8-5. Aplicación teclado instrumental: primera aproximación.
- 8-6. Un ejemplo de tecla para el teclado instrumental propuesto.
- 8-7. Propiedades del mando de volumen del teclado instrumental propuesto.
- 8-8. Aplicación simón: primera tarjeta del desarrollo de la misma.
- 8-9. Aplicación simón: segunda tarjeta del desarrollo de la misma.
- 8-10. Aplicación simón: incorporando y reordenando dos nuevas tarjetas sobre la marcha.
- 8-11. Aplicación simón: tercera tarjeta del desarrollo de la misma.
- 8-12. Aplicación simón: cuarta tarjeta del desarrollo de la misma.
- 8-13. Interfaz para festival™ realizado con dos campos de textos.
- 8-14. Ejemplo de interpretación de fichero MIDI.
- 8-15. Formato de la tarjeta que permite la especificación de un mensaje y su programación en el tiempo.
- 8-16. Título.
- 9-1. Captura de pantalla de nuestra versión del "antiestrés".
- 9-2. Esquema de los objetos que conforman la aplicación visto desde el "Application Overview" para realizar el "antiestrés".
- 9-3. Expermimentando un espacio de color aditivo: RGB.
- 9-4. Tratamiento de las propiedades de las imágenes: transparencia aplicada a los puntos de una image o a un color.
- 9-5. Transparencies en un color ( segon part de "Tratamiento de las propiedades de las imágenes: transparencia aplicada a los puntos de una image o a un color").
- 9-6. Máscara de visibilitat (3a part de "Tratamiento de las propiedades de las imágenes: transparencia aplicada a los puntos de una image o a un color").
- 9-7. Components de color (4a. part de "Tratamiento de las propiedades de las imágenes: transparencia aplicada a los puntos de una image o a un color").
- 9-8. "External Tutorial": aplicaciones para acelerar el procesado de imágenes mediante librerías externas y la función MatrixConvolve.
- 9-9. Proposta de una BD de pacientes: MEDICAL.
- 9-10. Recuperando información de una base de datos de imágenes.
- 9-11. Recuperando información de una base de datos de imágenes.
- 9-12. Elementos de comunicación con el usuario y las aplicaciones externa."Para't, para't!".
- 9-13. Menú de la aplicación
- 9-14. Mecanismo de parada asíncrona: botón "Para't, para't!".
- 10-1. Profundizando en las posibilidades del objeto player.
- 10-2. Títul.
- 10-3. Títul.
- 10-4. Títul.
- 10-5. Títul.
- 10-6. Títul.
- 10-7. Títul.
- 10-8. Títul.
- 10-9. Captura de l'aproximació inicial.
- 10-10. Ventana de propiedades del objeto grahic "cuet1" donde se puede observar las propiedades que se utilizan y el valor de la primera de ellas.
- 11-1. Capturas de la aplicación realizada donde se muestra la situación inicial y final del contenido de la ventana.
- 11-2. Capturas de la aplicación realizada donde se muestra la situación inicial y final del contenido de la ventana.
- 12-1. No se espera un lujo de detalles en la interfaz, así que se propone una muy austera para acometer la tarea presente.
- 12-2. Ejemplo de inclusión de los controles que permiten reescribir el tutorial: el título i el principio de los contenidos de esta tarjetas ya están traduciodos.
- 13-1. Los dos tutoriales a la vista desde el "Application Overview" de Revolution.
- 13-2. Aspecto de la pila para volcar a fichero los tutoriales de Revolution.
- 13-3. Aspecto final de la pila para volcar a fichero los tutoriales de Revolution.
- 14-1. Galeria de objetos.
- 14-2. Botones.
- 14-3. Galeria de objetos.
- 14-4. Galeria de objetos, segunda versión: modelo de desarrollo basado en un objeto plantilla, botón de creación de ese tipo de botón y botón de asignación de código en el mismo.
- 15-1. Planteamiento incial de la agenda para guardar el historial.
- 15-2. Captura de pantalla de la aplicación historial médico.
- 15-3. Captura de ventana de la supila "datos personales" (fila superior) y de la subpila "hist" (fila inferior) de la aplicación historial médico.
- 15-4. Captura de la ventana de la subpila "image1" de la aplicación historial médico.
- 15-5. Forma final de la subpila "imagen" rediseñada para la aplicación historial médico.
- 16-1. Recorrido de la pila "Application Tutorial".
- 16-2. Volcado a un fichero.
- 16-3. Formateado en HTML del contenido de la pila.
- 17-1. Ejemplos de las etapas intermedias donde primaba el aspecto de desarrollo. Se han incluido para que ser aprecie la diferencia entre la etapa de desarrollo y el resultado final.
- 17-2. Ejemplos de fichero XML: contenido del mismo antes y después de la edición con la herramienta que desarrollamos aquí.
- 18-1. Un ejemplo de ficha del juego realizado directamente con los objetos de MetaCard.
- 18-2. Grafo de la actividad en una ficha del juego.
- 18-3. Un posible recorrido sobre la aplicación de juego de preguntas.
- 18-4. Cambiando el contenido de las cuestiones mostradas.
- 19-1. Formato de la tarjeta que permite la especificación de un mensaje y su programación en el tiempo.
- 19-2. Tarjetas que componen la aplicación, la pila principal: entrada (título), configuración del audio y controles del recordatorio.
- 19-3. Otras pilas forman parte del proyecto, aparte de las habituales del sistema, para informar del estado de la descarga de ficheros desde la web.
- 19-4. Tarjetas de la pila "Ayuda".
- 20-1. Formato de la pila: disposición de los elementos.
- 20-2. *Qué pasa más allà de los 800x600?.
- 20-3. Formato de la pila: jerarquía de controles.
- 20-4. Título.
- 20-5. Título.
- 20-6. Título.
- 20-7. Título.
- 20-8. Título.
- 20-9. Título.
- A-1. Agenda 1.
- A-2. Agenda 2.
- A-3. Agenda 3.
- B-1. 1.
- B-2. 2.
- B-3. 3.
- B-4. 4.
- B-5. 5.