SlideShare una empresa de Scribd logo
1 de 18
Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú
Portafolios digitales
proceso de construcción
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
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).
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
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
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
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
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
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
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
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.
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
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
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
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
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.
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
Escuela de Diseño y Multimedia | Instituto Profesional Arcos
Portafolios digitales | Jorge Cantú

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Diarios de campo
Diarios de campoDiarios de campo
Diarios de campo
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Unidad 6
Unidad  6Unidad  6
Unidad 6
 
Multimedia.mayra elizabethsimbaña espimbera.actividad2 1
Multimedia.mayra elizabethsimbaña espimbera.actividad2 1Multimedia.mayra elizabethsimbaña espimbera.actividad2 1
Multimedia.mayra elizabethsimbaña espimbera.actividad2 1
 
Cómo crear un power point como video
Cómo crear un power point como videoCómo crear un power point como video
Cómo crear un power point como video
 
U3
U3U3
U3
 
Unidad 3 apps
Unidad 3 appsUnidad 3 apps
Unidad 3 apps
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Herramientas de Vdeomarketing. Videoscribe
Herramientas de Vdeomarketing. VideoscribeHerramientas de Vdeomarketing. Videoscribe
Herramientas de Vdeomarketing. Videoscribe
 
Como grabar pantalla en zoom
Como grabar pantalla en zoomComo grabar pantalla en zoom
Como grabar pantalla en zoom
 
Tutorial como realizar un video con camtasia
Tutorial como realizar un video con camtasiaTutorial como realizar un video con camtasia
Tutorial como realizar un video con camtasia
 
Andrea Quiñonez 2.1. multimedia
Andrea Quiñonez 2.1. multimediaAndrea Quiñonez 2.1. multimedia
Andrea Quiñonez 2.1. multimedia
 
Unidad2
Unidad2Unidad2
Unidad2
 
Unidad6
Unidad6 Unidad6
Unidad6
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Tutorial: Cómo realizar capturas de pantalla en los distintos sistemas opera...
Tutorial: Cómo realizar capturas de pantalla en los distintos sistemas opera...Tutorial: Cómo realizar capturas de pantalla en los distintos sistemas opera...
Tutorial: Cómo realizar capturas de pantalla en los distintos sistemas opera...
 
Cómo capturar-pantallas-gseex
 Cómo capturar-pantallas-gseex Cómo capturar-pantallas-gseex
Cómo capturar-pantallas-gseex
 
Tutorial básico del uso de CamStudio
Tutorial básico del uso de CamStudioTutorial básico del uso de CamStudio
Tutorial básico del uso de CamStudio
 

Similar a Portafolios digitales proceso construcción Flash 40car

Similar a Portafolios digitales proceso construcción Flash 40car (20)

Crossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flashCrossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flash
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Jeison bello trabajo n° 1
Jeison bello trabajo  n° 1Jeison bello trabajo  n° 1
Jeison bello trabajo n° 1
 
Adobe Flash 8
Adobe Flash 8Adobe Flash 8
Adobe Flash 8
 
Unidad 6 gaem
Unidad 6 gaemUnidad 6 gaem
Unidad 6 gaem
 
Unidad 6 gaem
Unidad 6 gaemUnidad 6 gaem
Unidad 6 gaem
 
Unidad6 121102133951-phpapp01
Unidad6 121102133951-phpapp01Unidad6 121102133951-phpapp01
Unidad6 121102133951-phpapp01
 
Araque laura a2.doc
Araque laura a2.docAraque laura a2.doc
Araque laura a2.doc
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Unidad(6)
Unidad(6)Unidad(6)
Unidad(6)
 
Qué es flash
Qué es flashQué es flash
Qué es flash
 
Unidad 6
Unidad 6Unidad 6
Unidad 6
 
Gaem unidad 6
Gaem unidad 6Gaem unidad 6
Gaem unidad 6
 
Unidad#6
Unidad#6Unidad#6
Unidad#6
 
Combinar photoshop con premier
Combinar photoshop con premierCombinar photoshop con premier
Combinar photoshop con premier
 
Unidad 6
Unidad  6Unidad  6
Unidad 6
 
Flash educacion
Flash educacionFlash educacion
Flash educacion
 

Más de Jorge Cantú López

CMS (administradores de contenidos)
CMS (administradores de contenidos)CMS (administradores de contenidos)
CMS (administradores de contenidos)Jorge Cantú López
 
servidores, navegadores y desarrollo web
servidores, navegadores y desarrollo webservidores, navegadores y desarrollo web
servidores, navegadores y desarrollo webJorge Cantú López
 
Taller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasTaller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasJorge Cantú López
 
Taller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioTaller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioJorge Cantú López
 
Taller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaTaller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaJorge Cantú López
 
Guionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioGuionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioJorge Cantú López
 
introducción Portafolios Digitales
introducción Portafolios Digitalesintroducción Portafolios Digitales
introducción Portafolios DigitalesJorge Cantú López
 
Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Jorge Cantú López
 

Más de Jorge Cantú López (20)

Digu 05. guías de estilo
Digu 05. guías de estiloDigu 05. guías de estilo
Digu 05. guías de estilo
 
Digu 04. modelos y affordances
Digu 04. modelos y affordancesDigu 04. modelos y affordances
Digu 04. modelos y affordances
 
Digu 03. Estilos de interfaz
Digu 03. Estilos de interfazDigu 03. Estilos de interfaz
Digu 03. Estilos de interfaz
 
DIGU 02. diseño de interfaces
DIGU 02. diseño de interfacesDIGU 02. diseño de interfaces
DIGU 02. diseño de interfaces
 
DIGU 01. interfaces
DIGU 01. interfacesDIGU 01. interfaces
DIGU 01. interfaces
 
CMS (administradores de contenidos)
CMS (administradores de contenidos)CMS (administradores de contenidos)
CMS (administradores de contenidos)
 
servidores, navegadores y desarrollo web
servidores, navegadores y desarrollo webservidores, navegadores y desarrollo web
servidores, navegadores y desarrollo web
 
Modelos comunicación digital
Modelos comunicación digitalModelos comunicación digital
Modelos comunicación digital
 
Imagenes para la web
Imagenes para la webImagenes para la web
Imagenes para la web
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
Interfaces gráficas
Interfaces gráficasInterfaces gráficas
Interfaces gráficas
 
Portafolio intro
Portafolio introPortafolio intro
Portafolio intro
 
Taller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasTaller MM I : Análisis de audiencias
Taller MM I : Análisis de audiencias
 
HTML5+CSS3 01
HTML5+CSS3 01HTML5+CSS3 01
HTML5+CSS3 01
 
Taller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioTaller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuario
 
Taller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaTaller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimedia
 
Guionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioGuionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuario
 
introducción Portafolios Digitales
introducción Portafolios Digitalesintroducción Portafolios Digitales
introducción Portafolios Digitales
 
Crossmedia 00: presentación
Crossmedia 00: presentaciónCrossmedia 00: presentación
Crossmedia 00: presentación
 
Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012
 

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ú