Share
Este es un tutorial de Basix durante el cual construiremos nuestro primer proyecto en Flash Catalyst a partir de un archivo PSD pre-hecho. Cubriremos los aspectos básicos de Catalyst: convertir el arte en componentes, crear algunos efectos y hacer que estos componentes estén activos, sin necesidad de código!
En este tutorial, aprenderá cómo manejar las ilustraciones en Flash Catalyst y cómo cobrar vida.
En la segunda parte del tutorial, una vez que se haya familiarizado con el programa, haremos algunas cosas más complicadas y agregaremos más interactividad..
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 ..., dele un nombre al proyecto y guárdelo donde desee..
Aquí está el resultado final que lograremos. Al aprender los conceptos básicos de trabajar con uno de los productos más nuevos de Adobe, convertiremos nuestra obra de arte en componentes, crearemos algunos efectos de brillo, especificaremos iconos y haremos transiciones a las páginas. También haremos un ícono de Adobe como un botón que conduce a una URL específica: http://active.tutsplus.com
Esto puede parecer un ejemplo extremadamente básico. Lo importante es la forma en que logramos la interactividad. Todo el proceso es apuntar y hacer clic, No hay una sola línea de codificación involucrada.
Abra Adobe Flash Catalyst, luego en la ventana de inicio, seleccione "Crear nuevo proyecto desde el archivo de diseño"> "Desde el archivo PSD de Adobe Photoshop ...".
Seleccionar Galaxy.PSD (Puede obtener esto de la descarga de Source en la parte superior del tutorial). Asegúrese de que la opción "Importar capas no visibles" esté marcada y presione OK.
En primer lugar, debemos asignar los llamados "Estados" para nuestro proyecto. Los estados (también llamados "Páginas") representan los cambios que ocurrirán después de que los usuarios realicen ciertas acciones (por ejemplo, él o ella pulsa un botón).
En nuestro proyecto, el objetivo es el siguiente: después de que el usuario haga clic en uno de los íconos (Flash, Photoshop o Dreamweaver), aparecerá un rectángulo con información sobre el producto. Como tenemos tres iconos, debemos agregar tres estados adicionales (páginas). Para hacer esto, pulsa "Estado duplicado" tres veces en el panel Páginas / Estados. Esto crea tres copias de nuestra página principal, en la que haremos algunos cambios..
Ahora es sabio establecer los nombres de los estados. Haga doble clic en el nombre de cada estado y cámbielo a algo significativo. He elegido los siguientes nombres que comienzan con el primer estado: Principal, Photoshop, Flash, Dreamweaver. Te recomiendo que le des los mismos nombres a estos estados, esto te ayudará a seguir el tutorial y evitar confusiones..
Nota: Es muy importante mantener su proyecto estructurado y asignar nombres significativos a sus componentes. Al hacerlo, lo ayudará a encontrar lo que necesita y a decidir dónde colocar los activos futuros..
Así que hemos asignado los estados para nuestro proyecto. Ahora vamos a crear algunos botones. Para hacer esto elige el grupo de capas Flash. El panel de HUD debería aparecer (si no, presione F7). Entre paréntesis verá "2 elementos", que muestran que dos elementos están seleccionados. Ahora haga clic Convertir ilustraciones a componentes> Elegir componentes y desde el menú, seleccione Botón y haga clic en él. Esto convertirá nuestro grupo de capas en un botón. Haz lo mismo con los grupos de Photoshop y Dreamweaver..
Después de hacer esto en el Panel de capas y en el Panel de HUD, debería verse así (observe el "Botón" en el Panel de HUD y en el Panel de capas, nuestros grupos se convierten en las capas con el botón de nombre):
Lo siguiente que debemos hacer es asignar estados a nuestros botones. Si está familiarizado con Flash Professional, sabe que los botones existen con cuatro estados; lo mismo ocurre aquí. En nuestro proyecto estamos interesados en los estados Over and Down..
Permítanme aclarar el significado de todos los estados para aquellos que no están familiarizados con ellos.
Comencemos con el estado Sobre del botón de Photoshop: en el Panel de HUD, haga clic en "Sobre el estado". Dirija su atención al Panel de páginas / estados donde, por ahora, solo tenemos cuatro estados (arriba, abajo, abajo, deshabilitado). También puede ver que solo nuestro botón es completamente visible y la otra ilustración se desvanece en el fondo.
También eche un vistazo a nuestro Panel de capas donde puede ver el grupo de Photoshop:
Expandir el grupo de Photoshop. Seleccione la capa PhotoshopIcon desde el Panel de capas, luego vaya a Panel de propiedades> Filtros> Agregar filtro> Resplandor. Elige el color que te guste (he usado el color del icono - # 179AFF), ajusta Blur a 16 y Fuerza a 1.
Nota: Recuerde que todo esto se hace en Over State en el Panel de Pages / States..
Elija la capa Rectángulo en el Panel de capas. Mire la escena y verá que el objeto está seleccionado, pero está detrás del PhotoshopIcon. Simplemente extienda el rectángulo colocando el mouse en el lado derecho del rectángulo, coloque la flecha en el centro entre las esquinas superior e inferior. Amplíelo para que tengamos espacio para escribir la etiqueta "Photoshop"..
Así que hemos extendido el rectángulo. Ahora tome la Herramienta de texto (acceso directo T) y en la parte superior del rectángulo escriba la palabra "Photoshop". En el panel de propiedades de la herramienta de texto, he elegido las siguientes propiedades (puede elegir las mismas):
Por ahora deberías tener algo que se vea así (he deseleccionado las capas):
OK, hemos configurado Over State para el botón de Photoshop. Puede probar su proyecto con el atajo de teclado Ctrl + Enter o ir a Archivo> Ejecutar proyecto. Si has seguido el tutorial y has hecho todo correctamente, el ícono de Photoshop debería brillar y el texto con un rectángulo debería aparecer mientras pasas el mouse sobre el botón..
De vuelta en nuestro proyecto, puede ir a la escena principal simplemente haciendo clic dos veces en el espacio vacío o presionando Esc en el teclado. También puede hacer clic en los enlaces de la migaja de pan en la esquina superior izquierda de la escena donde se ve Galaxy / PhotoshopButton.
Repita los pasos 7 a 9 con los botones Flash y Dreamweaver. Tenga en cuenta que en sus efectos de brillo es mejor usar los colores de los iconos.
Este paso es opcional. Me gustaría agregar algo de brillo cuando un usuario haga clic en uno de los botones. Para hacer esto, seleccionamos uno de los botones en el Panel de Capa, luego seleccionamos el Estado Abajo en el Panel de HUD. Luego, en el Panel de capas, vaya al grupo de Dreamweaver (o al grupo que prefiera abordar primero), seleccione la capa DreamweaverIcon. Una vez allí, vaya al Panel de propiedades, elija Filtros> Agregar filtro> Brillo y seleccione las preferencias que desee (He usado gris oscuro- # 333333). Repita este paso para los otros grupos..
Durante este paso, convertiremos la capa AdobeIcon en un botón y asignaremos cursores manuales para nuestros iconos. En primer lugar, seleccione la capa AdobeIcon. Vaya al Panel de HUD y haga clic en Elegir componente> Botón. Una vez que haya terminado, seleccione el nuevo botón, vaya a Apariencia y verifique el campo "Cursor de mano". Haga esto para todos los demás botones (Photoshop, Flash y Dreamweaver).
Si prueba su proyecto, notará que el cursor de mano aparece cuando pasamos el mouse sobre los iconos. Hemos ilustrado a nuestros usuarios que estos iconos son botones. El siguiente paso es asignar esta opción a otras páginas. Se puede hacer muy fácilmente: para ello, simplemente seleccione uno de los íconos, vaya al Panel de HUD y una vez allí elija la opción "Hacer lo mismo en todos los demás estados". Al hacer esto, el cursor de mano aparecerá en las otras páginas también.
Nota: También notará que las capas con iconos tienen el mismo nombre "Botón". Esto está bien para un proyecto simple como este, pero para otros más complicados le recomiendo que cambie el nombre de las capas y les dé nombres significativos..
Estamos un paso más cerca del final. Ahora tratemos con las interacciones. En Flash Catalyst, las interacciones nos permiten cambiar entre diferentes páginas (estados), ir a una URL específica, reproducir, pausar o detener video.
Empecemos con nuestra primera interacción. Elija el botón AdobeIcon y haga doble clic en el panel de interacciones si está oculto. Con la capa seleccionada, haga clic en el botón Agregar interacción:
Aquí puedes ver la lista desplegable. Como nos interesa la interacción de URL, elija las siguientes opciones:
Al usar estos parámetros, le decimos a Catalyst que cuando un usuario haga clic en el botón, se lo enviará a la URL que hemos asignado y que el sitio se abrirá en una nueva ventana del navegador. También hemos definido que esta interacción solo es posible cuando estamos en el estado principal (página).
Ahora vamos a crear las interacciones entre las páginas. En primer lugar, debemos mover la capa AdobeIcon para que esté debajo de la capa del grupo Rectangles. Esto nos permitirá ver rectángulos encima de los otros objetos. Para hacer esto, simplemente arrastre las capas para alterar su orden. El siguiente orden de capa se aplicará a todos los demás estados:
Lo siguiente que necesitamos es cambiar el aspecto de las páginas específicas editando el contenido. Elige la página de Photoshop. En el Panel de capas, seleccione la capa del grupo Rectángulos y muéstrela haciendo clic donde se indica aquí:
El ícono del ojo se mostrará y en la página verá el rectángulo de Adobe Dreamweaver con el texto y el ícono en su interior. Como se trata de Photoshop Page, solo debemos revelar el contenido relevante para ella. Expanda la capa del grupo Rectángulo y desactive los íconos de los grupos Flash y Dreamweaver; esto nos permitirá ver solo el contenido relevante de Photoshop:
Repita estas acciones para las páginas de Flash y Dreamweaver para que los rectángulos visibles sean relevantes para el software..
Si hizo todo correctamente, los pulgares de su panel de Páginas / Estados deberían tener este aspecto:
Ahora agreguemos la interacción entre nuestras páginas principales y de Photoshop. En el panel Páginas / Estados, seleccione nuestra Página principal. Luego vaya al Panel de capas y elija el botón PhotoshopIcon. Como hicimos anteriormente, vaya al panel de Interacciones y elija las siguientes opciones:
Repita este paso para Dreamweaver y Flash Pages para que, al hacer clic en un icono, nos lleve a la página correspondiente..
Nuestro siguiente paso es importar una imagen más a la biblioteca para que podamos reproducir la transición a la página principal. Ir a la página de Photoshop. Seleccione la capa del grupo Rectángulo en el Panel de capas. Escoger Archivo> Importar y seleccione el icono exit.gif (nuevamente, esto está disponible en la descarga de Source en la parte superior del tutorial):
La imagen debe aparecer en el centro del rectángulo:
Y el Panel de Capas debería aparecer así:
Ahora, con la ayuda del mouse, simplemente coloque el icono Salir en la parte inferior derecha del rectángulo blanco:
Flash Catalyst es lo suficientemente inteligente como para colocar la imagen en el lugar correcto en otras páginas. Solo tenemos que revelar la imagen haciendo clic en el icono del ojo:
Ahora necesitamos convertir el ícono Salir en un botón y configurar un efecto.
Seleccione el icono Salir, vaya al panel de HUD y conviértalo en un botón como lo hicimos anteriormente.
Seleccione el estado arriba, y en el panel de propiedades elija Común> Opacidad. Establezca la Opacidad en 50. Esto nos permitirá revelar la opacidad completa solo cuando pasamos el mouse sobre el botón o lo presionamos:
Agreguemos una interacción simple a nuestro botón Salir. En la página de Photoshop, seleccione la capa con el icono, haga clic en Agregar interacción como lo hicimos anteriormente y configure las opciones que se muestran en la imagen a continuación. La única diferencia es que debe jugar la transición al estado principal mientras se encuentra en cualquier estado:
Ha completado la primera parte de este tutorial de dos partes sobre los conceptos básicos de Flash Catalyst. Presione Ctrl + Enter o Archivo> Ejecutar proyecto para comprobar si todo funciona bien. Por ahora, debería haber efectos luminosos y el ícono de Adobe debería conducir a la URL que ha especificado. Los otros íconos (Photoshop, Flash, Dreamweaver) deben reproducir transiciones a sus páginas y el ícono de salida debe reproducir una transición a la página principal.
En la siguiente parte del tutorial aprenderemos cómo agregar animación a nuestro proyecto, agregar sonido y configurar video..
Accentsconagua