Segundo Práctico de Flash
Vamos a hacer una carpeta de trabajos en Flash. Hay que presentar por lo menos cuatro trabajos. Vamos por partes…
Paso 1 | Documento nuevo
Creamos un documento nuevo. Le damos un tamaño 1024 x 768 px. Para darle el tamaño debemos hacer clic en Size - Medidas, en el panel de Propiedades. Definimos el color del fondo desde el panel de Propiedades.
Figura 1. Panel Propiedades de nuestro documento nuevo.
Paso 2 | Portada
Vamos a diseñar la portada de nuestro porfolio. Escribimos los textos en una tipografía adecuada.
Ponemos cada texto en una capa independiente. Nombramos las capas con nombres identificables.
El orden en este paso es esencial.
Podemos agregar un logotipo vectorial (es lo mejor) o de píxeles.
Figura 2: Diseñamos la portada de la presentación. Cada elemento en una capa.
Paso 3 - Convertir en símbolos
Convertimos cada elemento (línea de texto o imagen) en un símbolo (F8). Elegimos Movie clip.
Si usamos algún elemento gráfico también se debe convertir en símbolo.
Llamar a cada símbolo con un nombre que lo identifique. Los símbolos quedarán almacenados en el panel Library / Biblioteca.
Figura 3: Transformamos todos los elementos en símbolo.
Paso 4 | Creamos los botones
Vamos al menú Insert > New Symbol… y, en la ventana que se despliega, elegimos la opción Button / Botón.
Aparece la línea de tiempo de botón. Los botones tienen una línea de tiempo de cuatro fotogramas:
- Up: Muestra la apariencia normal del botón, antes de ninguna acción por parte del usuario.
- Over: Muestra la apariencia del botón cuando el usuario pasa el ratón por encima.
- Down: Muestra la apariencia del botón cuando el usuario presiona el botón del ratón.
- Hit: El objeto que dibujemos en este fotograma va a definir el área sensible del botón, en donde el puntero del ratón se transforma en manito y, si hacemos clic, el botón funciona. Entonces, en este fotograma debe ir un rectángulo que indique el "área de botón".
Estos cuatro fotogramas son fotogramas clave. Recordar que para crear un fotograma clave hay que presionar F6.
Hacemos cuatro botones con texto (trabajo1, trabajo2, trabajo3 y trabajo4). Los ubicamos en una capa nueva.
Tip. Podemos aprovechar el fotograma Over para poner alguna información extra sobre el botón o que aparezca alguna imagen. Por ejemplo el tercer botón de la figura 4.
Hacemos un botón home, para volver a la ventana principal.
Importante. Terminar estos cuatro pasos antes de seguir. Si después cambiamos de idea sobre el diseño puede ser muy difícil modificarlo.
Figura 4: Creamos los botones.
Paso 5 | Terminamos la animación de introducción
Hacemos un fotograma clave (F6) en el fotograma 40, por ejemplo, en todas las capas de la película.
En este fotograma va a terminar la introducción. Los cuarenta fotogramas representan poco más de tres segundos. Pueden ser más o menos, para estos casos elegir un fotograma diferente.
Ahora cada elemento de la intro está en dos fotogramas: en el del inicio y en el del final.
Figura 5: Hacemos fotogramas clave en todas las capas en el fotograma 40.
Paso 6 | Definir el inicio de la presentación
Seleccionamos todos los fotogramas 1 de cada capa y le damos una animación de movimiento: Tween > Motion.
En el fotograma número uno cambiamos la ubicación de cada uno de los elementos. Dejamos sin modificar la ubicación de los elementos en el fotograma 40.
Podemos hacer que la animación tenga giros y/o aceleraciones.
Figura 6: Seleccionamos los primeros fotogramas de cada capa y elegimos Tween > Motion en el panel de Propiedades.
Ver animación hasta ahora.
Paso 7 | Ponemos un Stop
Haremos que la película se detenga en el fotograma 40. Para esto es necesario colocar una "acción" un aorden de programación situada en ese fotograma. Conviene que estas órdenes estén situadas en una capa especial: una capa llamada Acciones. Procedemos del siguientre modo:
• Creamos una capa nueva, arriba de todas las anteriores y la llamamos Acciones.
• Seleccionamos el fotograma 40 de la capa Acciones (ver figura 7) .
• Desplegamos el panel Acciones del menú Ventana. Ciudemos que esté en el modo de Asistente de Scripts | Scripts Assist (ver figura 7).
• Vamos a Global Functions > Timeline control, y hacemos doble clic en Stop. Si todo ha salido bien, el panel Acciones deberá verse como en la figura 8.
Figura 7: Creamos una capa nueva y le ponemos un fotograma clave en el fotograma 40.
Figura 8: Panel de acciones del STOP en el fotograma 40.
Paso 8 | Los trabajos 1
En la capa Acciones, después del Stop, creamos varios fotogramas clave, uno por cada trabajo que vamos a presentar. Debemos presentar cuatro como mínimo. Los fotogramas, para mayor comodidad, pueden estar separados entre sí por cinco o diez fotogramas.
A cada uno de estos fotogramas les pondremos una etiqueta o Label. Para hacer esto seleccionamos el fotograma y vamos al panel de Propiedades. Veremos que tiene un campo de texto vacío llamado Frame. Aquí ponemos los nombres uno, dos, tres y cuatro. Cada uno corresponderá a un trabajo.
En la figura 9 vemos como queda la línea de tiempo y dónde se pone la etiqueta a los fotogramas clave.
Figura 9: En la capa Acciones
Paso 9 | Los trabajos 2
Creamos una capa nueva que va a contener los trabajos y a la que llamamos Trabajos. Creamos cuatro fotogramas clave coincidentes con los cuatro fotogramas creados en el paso anterior. En la figura 10 vemos esto realizado.
En cada fotograma clave de la capa Trabajos colocamos uno de los trabajos. Los formatos que podemos elegir son: JPG, PDF, AI, SWF, PNG, entre otros.
Figura 10: Creamos una capa llamada "Trabajos" y le hacemos cuatro fotogramas clave.
Paso 10 | Terminar los botones
Vamos a terminar el trabajo dando un comportamiento a los botones: al hacer clic la película deberá saltar al fotograma del trabajo correspondiente. Hacemos lo siguiente.
• Seleccionamos el primer botón.
• Desplegamos el panel Acciones del menú Ventana. Ciudemos que esté en el modo de Asistente de Scripts | Scripts Assist.
• Vamos a Global Functions > Timeline control, y hacemos doble clic en goto y configuramos de acuerdo a lo siguiente:
—
Go to and stop.
— Type: Frame Label.
— Frame: Nombre del fotograma, el que le pusimos en el paso 8.
El panel Acciones deberá verse como en la figura 11.
Figura 11: Panel acciones del botón 1.
Entregar el SWF, que se guarda en la misma carpeta y con el mismo nombre del archivo Fla. Se crea y renueva cuando hacemos Ctrl + Enter (Cmd + Enter en Mac).