Portafolio (proceso de construcción)

  • 1,117 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,117
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
17
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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ú