Agregar componentes interactivos en Flash Catalyst

• Abril 23, 2024

En este tutorial, terminaremos la presentación de diapositivas de la cartera en Adobe^R Destello^R Catalizador^R. Si ha estado siguiendo, hemos creado nuestros botones y estamos listos para agregar los efectos especiales. A medida que navegamos por la cartera, queremos que el botón para el logotipo visible se atenúe y los otros botones sean visibles. Por lo tanto, debemos decirle a Catalyst qué botón es para qué página y cuándo atenuar los botones. Luego agregaremos un efecto de transición Fade entre páginas.

Primero atenuaremos el botón del logotipo actual. Cuando el logotipo 1 es visible en el Estado de la página 1, queremos que el botón correspondiente esté atenuado. Necesitamos hacer esto para los tres estados o páginas de nuestra cartera.

1. Haga clic en el icono Página1 en el panel Páginas / Estados para trabajar en esa página. Haga clic en la imagen en miniatura que ahora es nuestro botón para el logotipo 1. En el panel Propiedades, configure la Opacidad en 40. Debido a que el centro del tapete debajo del botón es negro, esto hará que el botón aparezca atenuado.

2. Haga clic en el icono de Página2 en el panel Páginas / Estados. Repita el paso anterior para Página2 atenuando solo el botón que coincida con el logotipo 2. Haga clic en el icono Página3 en el panel Páginas / Estados y repita este paso.

Haga clic en Archivo - Ejecutar proyecto para probar nuestro nuevo efecto. Al hacer clic en los botones, el logotipo correspondiente debe estar visible y ese botón debe estar atenuado.

Lo último que agregaremos a nuestra navegación es una transición de transición entre páginas, usando la línea de tiempo. Regrese a la Página1 haciendo clic en el icono Página1. Eche un vistazo a las capas en la línea de tiempo y verá que tenemos una capa para cada posible transición entre las tres páginas.

Página1> Página2
Página1> Página3
Página2> Página1
Página3> Página1

3. Haga clic en la capa Página1> Página2. Verá que Catalyst nos ha dado las opciones de transición para los logotipos 1 y 2 (atenuados) y los botones 1 y 2. Debido a que nos alejaremos del logotipo 1, tenemos una opción de Desaparición gradual. Pero nos trasladaremos al logotipo 2. Tenemos una opción de fundido de entrada para este logotipo.

Solo agregaremos el efecto Fade Out al logo 1 y el efecto Fade In al logo 2. No necesitamos aplicar el efecto Fade a nuestros botones. Sin embargo, es posible que desee utilizar este efecto en otro proyecto.

Haga clic en el botón Transición suave en la parte inferior de la línea de tiempo. Verá que los controles Fade Out / In se han extendido a medio segundo en todas las capas. Aún en la capa Página1> Página2, debemos desactivar el efecto de los dos botones. Empuje el control deslizante hacia la izquierda para cada botón.

Haga clic en la capa Página1> Página3. Repita el paso anterior para los dos botones y logotipos. Repita nuevamente para la capa Página2> Página1 y la capa Página3> Página1.

Eso se encarga de todas las transiciones para el estado Page1. Pero tenemos tres estados en nuestra cartera. Necesitamos hacer esto nuevamente para los otros dos estados. Haga clic en el icono de Página2 en el panel Páginas / Estados.

Echa un vistazo a las capas en la línea de tiempo. Notará que la configuración que acabamos de establecer para el estado de Página1 se transfiere al estado de Página2 para las transiciones entre Página1> Página2 y Página2> Página3. Solo necesitamos agregar la transición entre Página2> Página3 y Página3> Página2.

4. Repita los pasos anteriores para aplicar las transiciones a los logotipos para el estado de Page2. Debe hacer esto para cada capa en la línea de tiempo.

5. Haga clic en el icono de Página3 en el panel Páginas / Estados. Notará que la configuración de transición se ha transferido de los otros dos estados. Si tuviéramos más páginas, necesitaríamos trabajar en las capas para este estado. Pero como este es el último de los tres estados, estamos listos.

Prueba tu proyecto nuevamente. Si todo funciona, estamos listos para guardar nuestro archivo como LogoPortfolio.fxp.

6. Necesitamos decirle a Catalyst que genere los archivos que mostrarán nuestra cartera de Flash. Haga clic en Archivo - Publicar en SWF. Busque la ubicación correcta en su disco duro y guarde su proyecto. Verás que Catalyst te da dos carpetas. En la carpeta de implementación en la web, tenemos los archivos necesarios para ejecutar la cartera en un servidor web. En run-local, tenemos los archivos para ejecutar la cartera en nuestro escritorio.

Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.

Instrucciones De Vídeo: FlashFacilito - Tutorial Scroll Bar Personalizado en Flash con Actionscript 3 (Abril 2024).