Share
Durante este tutorial de Basix, aprenderemos cómo agregar las características finales a nuestro proyecto existente de Flash Catalyst. Veremos una interacción suave entre páginas, acciones de desplazamiento adicionales, sonidos y video. Al igual que en el tutorial anterior, no se requiere código.!
Nota: puede guardar su Flash Catalyst Project en cualquier momento y luego continuar cuando le resulte cómodo. Para hacer esto, vaya a Archivo> Guardar como ... asigne un nombre al proyecto y guárdelo en un directorio apropiado.
Echa un vistazo al resultado final que queremos lograr. Al cubrir los aspectos básicos de Catalyst, aprenderemos cómo crear transiciones de página suaves, aplicar animación 3D, agregar sonido a nuestros botones y también agregar algunos videos.
Abra Adobe Flash Catalyst. En la ventana inicial, seleccione Abrir proyecto> Archivo descargado. Seleccione Galaxy2.fxp, que puede obtener de la descarga de Source en la parte superior de la página.
Abra el panel de líneas de tiempo haciendo doble clic en su nombre. Nos presentan todas las interacciones posibles entre las páginas:
Si desea ver las interacciones que tratan con una determinada página, escriba su nombre en la ventana de búsqueda:
También puedes hacer esto con el menú desplegable:
Ahora vamos a cubrir algunas cosas con respecto a la línea de tiempo en sí. Aquí tenemos 5 puntos importantes:
Ok, ahora estás familiarizado con la línea de tiempo para que podamos agregar animación a nuestras páginas. Comencemos con la transición entre la página principal y la página de Photoshop. En el Panel de líneas de tiempo con la Capa de Photoshop seleccionada (si está seleccionada, verá el relleno azul), haga clic en la flecha cerca del botón Transición suave:
Aquí vemos el menú que nos permite configurar ciertos parámetros. "Duración" es la duración de la animación; Decidí configurarlo en 1 segundo y para el Tiempo he usado la opción "Smart Smoothing". No necesitamos "Simultáneo" ya que solo aplicamos animación a una capa. Y, por supuesto, no necesitamos sobrescribir nada, así que deje en blanco el campo de la marca de verificación.
Hemos aplicado una transición suave a una de las páginas. Veamos la imagen y veamos qué ha cambiado:
En primer lugar, puede previsualizar el efecto que hemos establecido con el botón Reproducir. Aquí puede ver que ahora tenemos una línea azul sólida con las palabras "Fade In" en el interior. Esto significa que hemos aplicado la animación a nuestra Capa de Photoshop. Haga clic en esa línea sólida azul y examine el Panel de propiedades:
Vemos que dice Fade en la parte superior; esto indica el nombre del efecto aplicado. Tenemos algunas opciones adicionales: La opacidad se establece en Auto, pero si desea ajustarlo usted mismo, simplemente desmarque la marca de verificación y establezca sus propios parámetros en "De" y "Hasta". También puede ver que podemos cambiar la duración e incluso configurar el tiempo de retardo para el efecto. La aceleración es otra opción importante, especialmente si está familiarizado con Flash Professional. Lo dejaré por defecto, pero siéntete libre de experimentar con él..
Lo siguiente que debemos hacer es aplicar la animación al botón Salir. Seleccione la capa "Botón" en el Panel de líneas de tiempo (recuerde: la transición Principal> Photoshop debe seleccionarse en la ventana inferior izquierda del Panel de líneas de tiempo) y nuevamente haga clic en la flecha cerca del botón Transición suave. En el cuadro de diálogo, establezca la duración en 0.5 seg:
Vamos a separar el tiempo de animación. Seleccione la capa "Salir botón". Tenemos dos métodos para hacer esto..
Vaya al Panel de propiedades y establezca el Retardo de la capa del botón Salir en 1 segundo:
Alternativamente, puede seleccionar la línea verde en la capa del botón Salir para que se convierta en azul sólido, luego haga clic y arrástrela al segmento en la línea de tiempo que nos convenga (en nuestro caso, esto es 1 segundo):
Hay una manera más de ajustar la duración de la animación. Es muy importante y muy fácil de usar. Para cambiar la duración de la animación simplemente con la capa seleccionada, pase el mouse sobre la pequeña flecha al final del segmento de animación, mantenga presionado el botón izquierdo del ratón y arrastre en la dirección que desee (derecha - extender, izquierda - acortar):
Vayamos a otra página; la página flash. En el panel "Líneas de tiempo", seleccione Principal> Transición de Flash. Nuevamente, configure el mismo efecto de atenuación en ambas capas como lo hicimos en los pasos 5-7:
Vamos a añadir un poco más de interacción. En el panel "Líneas de tiempo" con la capa "Flash" seleccionada, haga clic en la parte inferior central del botón "+ Agregar acción". En el menú desplegable, seleccione Rotar:
Ahora tenemos tres elementos de nuestra Capa de Flash seleccionados y puedes ver que todos tienen el efecto Rotar aplicado:
De acuerdo, elija uno de los efectos de Rotar (el efecto de Rotar en el que ha hecho clic se vuelve azul fijo) en el Panel de líneas de tiempo y vaya a la ventana Propiedades. Una vez que haya establecido la primera opción en un ángulo específico y el ángulo en sí mismo establecido en 360 °, esto completará la rotación. La duración de 0.5 segundos debería estar bien, pero tienes libertad para experimentar. Mi objetivo es solo mostrarte lo que puedes hacer :)
Después de aplicarlo a uno de los elementos, establezca la misma configuración en los dos restantes, para que los tres tengan una rotación de 360 ° y la misma duración. Después puedes previsualizar la animación. Ahora tenemos efectos de Rotación y Fundido para esta página Flash..
Continuemos y agreguemos efectos a la página de Dreamweaver. En el panel Líneas de tiempo, seleccione Principal> Transición de Dreamweaver. Repita de nuevo los pasos 5-7 a la página para que haya efecto de fundido:
Con la capa de Dreamweaver seleccionada, haga clic en el botón "+ Agregar acción" y seleccione "Girar 3D" en el menú desplegable.
Ahora deberías estar viendo algo similar a esto (el efecto Rotar 3D se aplica a los tres elementos en la línea de tiempo):
Vamos a personalizarlos. Seleccione una de las animaciones de Rotate 3D y vaya al Panel de propiedades. Ahí tenemos un par de opciones. Además de la Duración, el Retraso y la Facilitación, tenemos tres tipos de Rotación. Entonces, de izquierda a derecha: Primero: gira el objeto alrededor del eje X, Segundo: gira el objeto alrededor del eje Y, y el tercero es una rotación simple que teníamos en la página de Flash. Y para cada tipo de rotación podemos configurar el ángulo de inicio y su valor final.
Para DreamweaverRect utilizo la rotación de 0 a 360 ° alrededor del eje Y:
Para DreamweaverIcon y Text, uso la rotación de 0 a 360 ° alrededor del eje X con 0.5 Delay:
Por lo tanto, debes tener la siguiente imagen y puedes probar tu animación con el botón Reproducir:
Lo siguiente que debemos lograr es configurar el video. Agregaremos video a la página de Flash ya que el video en sí es sobre Flash Catalyst y Flash Player. Para hacer esto elige nuestra página Flash. Luego vaya a Archivo> Importar> Archivo de video / sonido. Elija el archivo Adobe.flv descargado desde el archivo zip de Source en la parte superior del tutorial.
Lo siguiente que necesitamos es asignar el archivo al grupo de Flash. Simplemente seleccione el Reproductor de video en el Panel de capas, mantenga presionado el botón izquierdo del mouse y arrastre ese Reproductor de video a la capa del grupo Flash hasta que se expanda e insértelo. Habiendo hecho esto deberías ver lo siguiente:
Ahora ocultemos el ícono y el texto de Flash para que solo haya video. Para hacer esto, haga clic en los íconos de ojo en estas capas para que desaparezcan (también puede eliminar estas capas, usted puede elegirlas; simplemente seleccione estas capas y haga clic en el icono de Papelera en la parte inferior derecha del Panel de capas).
Lo siguiente que debe hacer es cambiar el tamaño de nuestro video para que quepa dentro del rectángulo. Seleccione la capa "Video Player" y el mouse sobre la esquina superior izquierda del video para que pueda ver dos flechas que apuntan en direcciones diferentes (el mouse debe estar sobre el cuadrado blanco). Mantén presionado el botón izquierdo del ratón y comienza a arrastrar. También notará que hay otros cuadrados blancos y el cuadrado azul en el centro. Del mismo modo, arrástrelos para que coloque el video de manera central (si desea arrastrar el video en sí mismo, no sus esquinas, coloque el mouse en el centro del video y arrástrelo).
Vayamos al panel de propiedades y exploremos lo que se ofrece..
En primer lugar vemos la posición del video en el escenario, su anchura y altura. Si desea ajustarlos como configuré las siguientes opciones: X - 179, Y - 89, Ancho (W) - 281, Altura (H) - 154. Entonces notará que ya tenemos los controles de video: el El Panel de propiedades nos ofrece dos controles de video prefabricados (Estructura alámbrica y Estándar), pero agregaremos nuestros propios botones para controlar el video, así que configúrelo en Ninguno.
Para el modo de escala también he optado por establecer "Ninguno". Además de Ninguno, podemos configurar el Modo de escala en Estirar, Letterbox o Zoom: aquí puede experimentar y configurar lo mejor que le convenga. Si desea obtener una vista previa de cómo se verá, marque la opción "Reproducción automática" (recuerde que cuando haya terminado de experimentar, deseleccione la opción Reproducción automática).
Además de Auto Play tenemos la opción "Loop" y "Muted". No necesitamos hacer Loop Video, así que déjelo sin marcar y también queremos escuchar el sonido, por lo que la opción Silencio también debe estar desactivada.
Ahora vamos a los submenús de Componentes y Apariencia. Asegúrese de que la opción "Aceptar evento de ratón" esté marcada (si no está marcada, no podremos configurar nuestros propios botones para el video). La opción "Información sobre herramientas" nos permite escribir la descripción del video y, cuando el usuario se mueva sobre él, verá la descripción..
"Volumen", creo, está claro.
En la opción Apariencia puede establecer un cierto "Modo de fusión" y también puede marcar la opción "Cursor de mano" para que cuando el usuario se desplace sobre el video, la flecha del mouse se convierta en el cursor de la mano..
Ahora es el momento de configurar los botones de control de nuestro video. Con el grupo de capas de Flash seleccionado, vaya a Archivo> Importar> Imagen e importe Play.png. Hacer lo mismo para Stop.png. Conviértalos en botones y colóquelos debajo del video (siempre es una buena práctica cambiarles el nombre). También puede aplicarles algunos efectos, pero no es necesario. He establecido la Opacidad en el estado Up para ellos en 75 (si no sabe cómo hacerlo, asegúrese de ver mi primer tutorial en Flash Catalyst, donde discutir tales cosas).
... y la situación en el Panel de Capas debería ser así:
Ahora para la parte más fácil hasta ahora: vaya al Panel de Interacciones, seleccione el botón Reproducir y en el Panel de Interacciones elija las siguientes opciones: Primero - Al hacer clic, segundo - Reproducir video, tercero - seleccione nuestro Video "Adobe1.flv", cuarto - solo cuando en la pagina flash:
Haga lo mismo con el botón Detener, pero en lugar de "Reproducir video", configúrelo como "Detener video".
Ahora que hemos establecido los controles en nuestro video, vamos a probarlo: presione Ctrl + Intro o vaya a Archivo> Ejecutar proyecto.
Lo último que debemos hacer es aplicar sonido a nuestros botones. En primer lugar vamos a importar el sonido. Vaya a Archivo> Importar> Archivo de video / sonido y navegue a la carpeta raíz de Flash Catalyst instalada. Allí, seleccione "Efectos de sonido / Flash Beep.mp3". Por supuesto, podemos usar nuestros propios sonidos, pero quería mostrarle que Flash Catalyst tiene un paquete de sonidos preinstalado. Elige la que más te convenga. Una vez que se haya importado, puede obtener una vista previa: vaya al Panel de la biblioteca y, en la parte inferior, navegue a la subcarpeta de Medios y seleccione "Flash Beep.mp3". Notará que en la ventana superior ha aparecido el botón Reproducir. Si haces clic en él, escucharás el sonido del botón:
Nota: Aquí también encontrarás todos nuestros archivos gráficos, medios y componentes..
Vamos a finalizar nuestro proyecto y agregar sonido a los botones durante sus estados superiores. Para hacer esto, seleccione uno de los botones en el panel "Capas", vaya a su estado superior. En el panel "Líneas de tiempo" con el icono en el escenario seleccionado, haga clic en el botón "+ Agregar acción" y seleccione Efecto de sonido:
En el cuadro de diálogo, seleccione "Flash Beep" y haga clic en Aceptar:
La situación en la línea de tiempo debe ser la siguiente:
Repita este paso en los iconos de Flash y Photoshop y listo. Ejecutar el proyecto!
Ahora ya sabe no solo cómo convertir sus ilustraciones en componentes, sino también cómo agregar una interacción fluida entre las páginas, aplicar diferentes variantes de animación, usar video y sonido en sus proyectos y controlarlos. Flash Catalyst es una aplicación increíble y ahora puede escribir fácilmente una obra de arte sin necesidad de escribir una sola línea de código..
Espero que hayas disfrutado siguiendo este proyecto y aprendiendo a usar Flash Catalyst. ¡Practica y lograrás grandes resultados! Gracias también por leer mi tutorial :)
Accentsconagua