Portafolio (proceso de construcción)

Escuela de Diseño y Multimedia | Instituto Profesional Arcos

Portafolios digitales | Jorge Cantú

Portafolios digitalesproceso de construcción



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



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).



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



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



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



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



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



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



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



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.



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



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



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



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



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.



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



Documents

Portafolio (proceso de construcción)