Tutorial: Creación de una película interactiva

Tutorial: Creación de una película
interactiva
Bienvenidos a Corel R.A.V.E.™, un potente programa de animación basado en objetos diseñado para crear
gráficos animados.
Temas tratados
En este tutorial, va a crear una película interactiva. Mediante la aplicación de comportamientos a fotogramas y
objetos, creará un juego que permita a los usuarios generar veintisiete caras distintas combinando pelo, ojos y
bocas. Para ver un ejemplo del proyecto, haga clic aquí.
Durante este proyecto, aprenderá a realizar las siguientes operaciones:
§ Aplicar etiquetas y comportamientos a fotogramas
§ Aplicar comportamientos a objetos
§ Guardar y exportar una película
Explicación de este proyecto
En este proyecto, va a configurar cuatro películas para que funcionen conjuntamente como una sola.
Las tres películas ya se han creado y se han suministrado con los formatos Corel R.A.V.E. (CLK) y Macromedia
Flash™ (SWF). Los archivos se llaman top.clk y top.swf, mid.clk y mid.swf y bot.clk y bot.swf. Estas tres
películas tienen un funcionamiento similar. Ahora dedicaremos un momento a explorar una de ellas.
1 Haga clic en el menú Archivo } Abrir.
2 Elija la carpeta donde haya guardado los archivos de ejemplo.
3 Haga doble clic en el nombre del archivo top.clk.
Observará que se trata de un archivo complejo que contiene animaciones, etiquetas de fotograma,
comportamientos e imágenes cambiantes que funcionan de manera conjunta.
1 de 11
Tutorial: Creación de una película interactiva
Animaciones
El archivo top.clk contiene nueve animaciones que comienzan en los fotogramas 1, 6, 11, 17, 23 y 29. En la
ventana acoplable/paleta Línea de tiempo, llevan la etiqueta “Scroll Left” o “Scroll Right” (Desplazamiento
izquierdo o derecho). En el proyecto terminado, estas animaciones se reproducen al desplazarse por las
distintas áreas de la cara.
Etiquetas y comportamientos de fotograma
El archivo top.clk utiliza treinta y cuatro fotogramas. A algunos de los fotogramas se les han aplicado etiquetas
o comportamientos.
2 de 11
Tutorial: Creación de una película interactiva
Una etiqueta es un nombre que puede asociar a un fotograma para poder hacer referencia al mismo con más
facilidad. En la ventana acoplable/paleta Línea de tiempo, los fotogramas con etiquetas aparecen marcados
con un distintivo
.
Un comportamiento es un comando que se ejecuta cuando una película alcanza un punto específico o cuando el
usuario interactúa con un objeto. En la ventana acoplable/paleta Línea de tiempo, los fotogramas con
comportamientos aparecen marcados con un rombo
.
Para consultar la etiqueta y el comportamiento de un fotograma, puede hacer clic en el botón Comportamientos
de la ventana acoplable/paleta Línea de tiempo.
§ Los fotogramas 1, 6 y 11 se han configurado para impedir la reproducción automática de las animaciones que
empiezan en dichos fotogramas.
§ Los fotogramas 17, 23 y 29 se han configurado para reproducir las animaciones que empiezan en dichos
fotogramas.
§ Los fotogramas 16 y 28 se han configurado para ir al fotograma 1.
§ El fotograma 22 se ha configurado para ir al fotograma 11.
§ El fotograma 34 se ha configurado para ir al fotograma 6.
Imágenes cambiantes y comportamientos
El archivo top.clk también contiene seis imágenes cambiantes a las cuales se han aplicado comportamientos.
En la ventana acoplable/paleta Línea de tiempo, llevan la etiqueta “Left Button” o “Right Button” (Botón
izquierdo o derecho).
Las imágenes cambiantes tienen tres estados: “Normal”, “Bajo cursor” y “Presionado”. En este caso, los
comportamientos se han aplicado al estado “Presionado” de las imágenes cambiantes. Para ver el
comportamiento de una imagen cambiante, haga clic en la misma, elija Presionado en el cuadro de lista Estado
activo de imagen cambiante
en la barra de herramientas Internet y haga clic en el menú
Película } Comportamientos. (Si la barra de herramientas Internet no está visible, haga clic en el menú
Ventana } Barras de herramientas } Internet).
§ En el fotograma 1, la imagen cambiante del botón izquierdo se ha configurado para ir al fotograma 17 y la del
botón derecho para reproducir la animación que empieza en el fotograma 1.
§ En el fotograma 6, la imagen cambiante del botón izquierdo se ha configurado para ir al fotograma 23 y la del
botón derecho para reproducir la animación que empieza en el fotograma 6.
§ En el fotograma 11, la imagen cambiante del botón izquierdo se ha configurado para ir al fotograma 29 y la
del botón derecho para reproducir la animación que empieza en el fotograma 11.
3 de 11
Tutorial: Creación de una película interactiva
Los archivos mid.clk y bot.clk son similares a top.clk. Los comportamientos de los fotogramas e imágenes
cambiantes controlan las películas.
Cuando termine de visualizar los archivos, haga clic en el menú Archivo } Cerrar.
La película exportada
Ahora vamos a echar un vistazo a la película exportada top.swf. Para ello, haga clic aquí.
En la película exportada, las animaciones, etiquetas de fotograma, comportamientos e imágenes cambiantes
funcionan de forma conjunta. Al hacer clic en una imagen cambiante, se activa un comportamiento que
reproduce una de las nueve secuencias de animación.
La película interactiva que va a crear ahora integrará las tres películas top.swf, mid.swf y bot.swf.
Apertura de la película principal
Ahora que se ha familiarizado con el funcionamiento de las películas individuales, vamos a configurar la película
principal que se encargará de mostrarlas.
Para ello, en primer lugar abrirá un archivo que contiene todos los elementos que necesitará para la película.
Si la barra de herramientas Internet está oculta, conviene mostrarla antes de empezar a trabajar con la película.
Para abrir el archivo
1 Haga clic en el menú Archivo } Abrir.
2 Elija la carpeta donde haya guardado los archivos de ejemplo.
3 Haga doble clic en el nombre del archivo faces_user.clk.
Observará que esta película sólo contiene dos fotogramas. El fotograma 1 muestra dos botones de imagen
cambiante: una flecha verde (llamada “Reset Button”, Botón Restablecer) y una “X” roja (denominada “End
Button”, Botón Finalizar). El fotograma 2 muestra las veintisiete caras diferentes que puede crear con la
película final, además de un botón de imagen cambiante con una flecha verde.
4 de 11
Tutorial: Creación de una película interactiva
Para mostrar la barra de herramientas Internet:
1 Haga clic en el menú Ventana } Barras de herramientas y, a continuación, en Internet.
2 Para acoplar la barra de herramientas, haga clic en su área de arrastre y arrástrela hasta cualquier borde de
la ventana de aplicación.
Es posible que quiera acoplarla debajo de la Barra de propiedades.
Configuración de los comportamientos del fotograma 1
Ahora va a aplicar una etiqueta al fotograma 1. También aplicará comportamientos a dicho fotograma, de forma
que éste cargue las tres películas individuales. Además, aplicará un comportamiento que mantenga la película
en el fotograma 1.
Para aplicar comportamientos Cargar película
1 En la ventana acoplable/paleta Línea de tiempo, haga clic en el fotograma 1.
2 Haga clic en el menú Película } Comportamientos.
3 En el cuadro Nombre de etiqueta de fotograma, escriba Inicio.
4 En el cuadro de lista Comportamiento, elija Cargar película.
5 En el cuadro Ubicación, escriba top.swf y presione Intro.
Esto permite especificar el archivo que se cargará.
5 de 11
Tutorial: Creación de una película interactiva
6 En el cuadro Nivel, escriba 1.
Cuando se cargan varias películas en otra película, a cada una se le asigna un nivel. En este caso se asigna
a la película top.swf el nivel 1.
7 Haga clic en Aplicar.
El comportamiento se muestra en el lado derecho del cuadro de diálogo.
8 Repita los pasos 4 a 7, esta vez con los siguientes valores:
Ÿ Ubicación: mid.swf
Ÿ Nivel: 2
El comportamiento se muestra en el lado derecho del cuadro de diálogo.
9 Repita los pasos 4 a 7, esta vez con los siguientes valores:
Ÿ Ubicación: bot.swf
Ÿ Nivel: 3
El comportamiento se muestra en el lado derecho del cuadro de diálogo.
10 Haga clic en Aceptar/OK.
Para aplicar un comportamiento Detener
1
Haga clic en el menú Película } Comportamientos.
2 En el cuadro de lista Comportamiento, elija Detener.
En el cuadro de lista Dirigir a aparece de forma predeterminada faces_user.clk.
3 Haga clic en Aplicar.
El comportamiento se muestra en el lado derecho del cuadro de diálogo.
4 Haga clic en Aceptar/OK.
6 de 11
Tutorial: Creación de una película interactiva
Configuración de los comportamientos del fotograma 2
Ahora va a aplicar una etiqueta y un comportamiento al fotograma 2. También aplicará un comportamiento al
botón de imagen cambiante que aparece en el fotograma 2.
Para establecer un comportamiento para el fotograma 2:
1 En la ventana acoplable/paleta Línea de tiempo, haga clic en el fotograma 2.
2 Haga clic en el menú Película } Comportamientos.
3 En el cuadro Nombre de etiqueta de fotograma, escriba Fin.
4 En el cuadro de lista Comportamiento, elija Detener.
5 Haga clic en Aplicar.
El comportamiento se muestra en el lado derecho del cuadro de diálogo.
6 Haga clic en Aceptar/OK.
Para establecer un comportamiento para el botón de imagen cambiante del
fotograma 2:
1 En la escena, haga clic en el botón de imagen cambiante de la flecha verde.
2 En el cuadro de lista Estado activo de imagen cambiante de la barra de herramientas Internet, elija
Presionado.
Así se aplica el comportamiento al estado “Presionado” del botón de imagen cambiante.
3 Haga clic en el menú Película } Comportamientos.
4 En el cuadro de lista Comportamiento, elija Ir a.
5 Active la opción Etiqueta y, en el cuadro de lista Etiqueta, elija Inicio y presione Intro.
Así se indica al botón de imagen cambiante que vaya al fotograma llamado “Inicio” cuando el usuario haga
clic en él. Recuerde que asignó la etiqueta “Inicio” al fotograma 1 en el apartado anterior.
6 Haga clic en Aplicar.
El comportamiento se muestra en el lado derecho del cuadro de diálogo.
7 de 11
Tutorial: Creación de una película interactiva
7 Haga clic en Aceptar/OK.
8 En el cuadro de lista Estado activo de imagen cambiante de la barra de herramientas Internet, elija No
presionado.
Así se recupera el estado predeterminado de la imagen cambiante.
Aplicación de los comportamientos a los botones de imagen
cambiante del fotograma 1
Ahora va a volver al fotograma 1 para aplicar comportamientos a los dos botones de imagen cambiante
contenidos en este fotograma.
Al botón de imagen cambiante de la flecha verde, aplicará comportamientos que vuelvan a cargar las tres
películas top.swf, mid.swf y bot.swf. Así se restablecerá la película.
Al botón de imagen cambiante de la “X” roja, aplicará un comportamiento que reproduzca la película para que
avance hasta el fotograma 2. Recuerde que el fotograma 2 muestra las veintisiete caras diferentes de la
película.
Para aplicar comportamientos al botón de imagen cambiante de la flecha verde:
1 En la ventana acoplable/paleta Línea de tiempo, haga clic en el fotograma 1.
2 En la escena, haga clic en el botón de imagen cambiante de la flecha verde.
3
En el cuadro de lista Estado activo de imagen cambiante de la barra de herramientas Internet, elija
Presionado.
Así se aplica el comportamiento al estado “Presionado” del botón de imagen cambiante.
8 de 11
Tutorial: Creación de una película interactiva
4 Haga clic en el menú Película } Comportamientos.
5 En el cuadro de lista Comportamiento, elija Cargar película.
6 En el cuadro Ubicación, escriba top.swf y presione Intro.
7 En el cuadro Nivel, escriba 1.
8 Haga clic en Aplicar.
El comportamiento se muestra en el lado derecho del cuadro de diálogo.
9 Repita los pasos 5 a 8, esta vez con los siguientes valores:
Ÿ Ubicación: mid.swf
Ÿ Nivel: 2
10 Repita los pasos 5 a 8, esta vez con los siguientes valores:
Ÿ Ubicación: bot.swf
Ÿ Nivel: 3
11 Haga clic en Aceptar/OK.
12 En el cuadro de lista Estado activo de imagen cambiante de la barra de herramientas Internet, elija No
presionado.
Así se recupera el estado predeterminado de la imagen cambiante.
Para aplicar un comportamiento al botón de imagen cambiante de la “X” roja:
1 En la escena, haga clic en el botón de imagen cambiante de la “X” roja.
2
En el cuadro de lista Estado activo de imagen cambiante de la barra de herramientas Internet, elija
Presionado.
Así se aplica el comportamiento al estado “Presionado” del botón de imagen cambiante.
3 Haga clic en el menú Película } Comportamientos.
4
En el cuadro de lista Comportamiento, elija Reproducir.
9 de 11
Tutorial: Creación de una película interactiva
5 Haga clic en Aplicar.
El comportamiento se muestra en el lado derecho del cuadro de diálogo.
6 Haga clic en Aceptar/OK.
7 En el cuadro de lista Estado activo de imagen cambiante de la barra de herramientas Internet, elija No
presionado.
Así se recupera el estado predeterminado de la imagen cambiante.
Almacenamiento y exportación de la película
Para probar la película, va a exportarla con el formato Macromedia Flash (SWF).
Es recomendable guardar el archivo antes de exportar la película.
Para guardar la película
1 Haga clic en el menú Archivo } Guardar como.
2 Elija la carpeta donde haya guardado los archivos de ejemplo.
3 Escriba testing.clk en el cuadro de lista Nombre de archivo (Windows) o Guardar como (Macintosh).
4 Haga clic en Guardar.
Para exportar la película
1 Haga clic en el menú Archivo } Exportar.
2 En el cuadro de lista Guardar en (Windows) o Dónde (Macintosh), elija la carpeta donde haya guardado los
archivos de ejemplo.
3 Realice uno de los pasos siguientes:
Ÿ (Windows) En el cuadro de lista Guardar como tipo, elija SWF - Macromedia Flash.
Ÿ (Macintosh) En el cuadro de lista Formato, elija Macromedia Flash.
10 de 11
Tutorial: Creación de una película interactiva
4 Haga clic en Exportar.
5 Haga clic en Aceptar/OK.
Reproducción de la película
Ya puede probar la película que ha creado. Para ello, haga clic aquí.
Si el archivo no se abre, asegúrese de haber exportado testing.swf en la carpeta donde haya
guardado los archivos de ejemplo.
Cuando se abra el archivo testing.swf, éste cargará las películas individuales top.swf, mid.swf y bot.swf en
los lugares adecuados.
Realice cualquiera de los pasos siguientes:
§ Haga clic en los botones de imagen cambiante izquierdo y derecho. Así se desplazará por las nueve
animaciones distintas disponibles en top.swf, mid.swf y bot.swf.
§ Haga clic en el botón de imagen cambiante de la flecha verde. Así se restablece la película.
§ Haga clic en el botón de imagen cambiante de la “X” roja. Así se muestran las veintisiete caras diferentes que
se pueden crear. Para volver al comienzo, haga clic en el botón de imagen cambiante de la flecha verde.
Información más detallada
Puede explorar Corel R.A.V.E. por su cuenta, o bien aumentar su productividad rápidamente siguiendo otros
tutoriales de CorelTUTOR™.
Si desea obtener más información sobre los temas y las herramientas tratados en este tutorial, consulte la
Ayuda.
© 2002 Corel Corporation. Reservados todos los derechos. Todas las marcas comerciales o registradas son
propiedad de sus respectivas empresas.
11 de 11