Tutorial: Creación de una película interactiva

Transcripción

1 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. 1de11

2 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. 2de11

3 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, 6y11sehanconfigurado 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. 3de11

4 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. 4de11

5 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á. 5de11

6 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. 8 Repita los pasos 4a7,estavezconlossiguientes valores: Ubicación: mid.swf Nivel: 2 9 Repita los pasos 4a7,estavezconlossiguientes valores: Ubicación: bot.swf Nivel: 3 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. 4 Haga clic en Aceptar/OK. 6de11

7 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. 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. 7de11

8 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. 8de11

9 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. 9 Repita los pasos 5a8,estavezconlossiguientes valores: Ubicación: mid.swf Nivel: 2 10 Repita los pasos 5a8,estavezconlossiguientes 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. 9de11

10 5 Haga clic en Aplicar. 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

11 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 Corel Corporation. Reservados todos los derechos. Todas las marcas comerciales o registradas son propiedad de sus respectivas empresas. 11 de 11