Portafolios digitales proceso construcción Flash 40car
1. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Portafolios digitales
proceso de construcción
2. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Se genera la interfaz de las pantallas en base a un
archivo .psd armado por capas identificadas
claramente con nombre. Utilizaremos un formato de
pantalla completa con un mínimo de 1024 x 768 px.
Se separan en capas todos los elementos que luego
van a ser independientes, tanto para la animación o
movimiento en pantalla, como para la interacción
(botones).
Armado en
Photoshop
3. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Armado en
Flash
Se comienza por definir el tipo de documento y sus
dimensiones. Para efecto de este trabajo utilizaremos
Actionscript 2.0 y una película compatible con lo
desarrollado en Photoshop (1024 x 768 px u otra).
4. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Es posible importar el archivo .psd directamente al flash
conservando la individualización de las capas. Las imágenes
importadas pueden ser optimizadas mediante una compresión
optimizada (generalmente entre 40 y 60%). Así mismo es
conveniente crear clip de película para cada capa, a fin de
preparar la animación posterior.
Importación
a Flash
5. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Una vez importadas las imágenes a capas individuales están
preparadas para animar o programar al ser convertidas a
símbolo. Sin embargo, los elementos que funcionarán como
botones deben ser convertidos a símbolo de “botón”. Se debe
cuidar el conservar la individualidad de cada elemento.
Símbolos en
Flash
6. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Para animar cada símbolo es necesario crear la “interpolación”
o pasos intermedios que permitirán la visualización de la
animación. Es posible crear interpolación de movimiento o
“clásica” con distintos grados de complejidad.
En cada uno de los fotogramas, es posible cambiar los
parámetros de las propiedades del símbolo (posición, tamaño,
efectos, filtros, etc.).
Animación
en Flash
7. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Terminado el proceso de animar mediante interpolación cada
una de las capas, podremos probar el resultado de nuestra
película en el menú Control > Probar película.
Animación
en Flash
8. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Cada pantalla o sección de nuestro interactivo estará armado
en una escena de flash independiente. Para ver y crear
nuevas escenas, activar el panel desde el menú Ventana >
Otros paneles > Escena.
Escenas en
Flash
9. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Los símbolos de botón poseen la característica de poder ser
configurados en cada uno de sus “estados “ (reposo, sobre y
presionado). Para ello debemos ingresar al botón haciendo
doble clic sobre él, insertar fotogramas clave en cada uno de
los estados a configurar y realizar las modificaciones de
tamaño, filtros y/o efectos, así como cambios en eventuales
capas adicionales, utilizadas para incorporar otro tipo de
información, como texto u otros.
Botones en
Flash
10. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
La incorporación de comportamiento en flash se realiza
mediante la configuración de acciones escritas en el lenguaje
Action Script, del cual en la actualidad disponemos de 3
versiones. Este trabajo se realizará en AS2.
Programación
en Flash
11. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Vamos a utilizar dos tipos de acciones: Acciones de
Fotograma (asociadas a la reproducción general de la línea de
tiempo de la película) y las Acciones de Botón (asociadas a la
interacción del usuario con los símbolos de botón). Cada una
de ellas se activa al seleccionar el elemento correspondiente
(un fotograma particular en la línea de tiempo o un botón
particular dentro del escenario).
Acciones en
Flash
Además,
trabajaremos
activando la opción
de “Asistente de
script” para auto
completar parte del
código.
12. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Las primeras acciones a incorporar en flash, serán las que nos
permitirán detener la reproducción de la película, para evitar
que pase automáticamente a otra escena. Esta acción se
incorpora en el último fotograma de la escena actual,
generalmente en una capa especial a la que se le inserta un
fotograma clave, y mediante el Asistente de script se inserta la
acción de “stop”.
Detener
película Flash
13. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
La acción para programar un botón se incorpora
seleccionando el símbolo y mediante el Asistente de script se
inserta la acción de “goto”, definiendo el nombre de la escena
a la cual se quiere mandar la película.
Programación
botones Flash
14. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
La película debe iniciar su reproducción en modo “pantalla
completa”, para esto podemos incorporar una acción de
fotograma, en el primer fotograma de la primera escena, con
la acción “fscommand”, utilizando el comando “fullscreen” y el
parámetro “true” para activarlo.
Configuración
Película Flash
15. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Junto con lo anterior, debemos crear un botón para salir del
portafolio, ya que este, al estar en modo pantalla completa,
perderá los botones de cerrar ventana, propios del sistema
operativo. Se debe incorporar una acción de botón, con la
acción “fscommand”, utilizando esta vez el comando “quit”.
Configuración
Película Flash
16. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Una vez creadas todas las escenas y programados los
botones se genera la película definitiva mediante el menú
Archivo > Configuración de la publicación.
Publicación
final Flash
Acá debemos
activar la opción de
Proyector para
Windows y para
Macintosh.
Esto permitirá que
el portafolio corra
en cualquier
sistema operativo
de forma autónoma.
17. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Finalmente debemos crear un documento de texto con el
nombre “autorun.inf” que incluya las instrucciones para que el
CD se autoejecute al momento de insertar el CD.
En el Cd se deben grabar, el archivo ejecutable .exe, la
carpeta .app para Mac, el archivo autorun.inf y si se utilizaron
videos, los archivos .flv y los .swf de los controladores de
video.
CD
Autoejecutable
18. Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú