FACULTAD DE COMUNICACIONES Y PERIODISMO TALLER DE PERIODISMO DIGITAL
MATERIALES DE TRABAJO DISEÑO DE PORTAFOLIOS MULTIMEDIA (ADOBE FLASH CS4 PROFESSIONAL) SEMESTRE 2011 - 02
ALBERTO MEJÍA MANRIQUE
15 de setiembre de 2011
2
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
3
Taller de Periodismo Digital (PE 53) Macromedia Flash CS4 Professional (PC) Semana 05 (Sesión 02) Alberto Mejía Manrique (alberto.mejia@upc.edu.pe)
Armado del Portafolio: Existen diversas formas de armar una presentación (en adelante portafolio), sin embargo con la idea de enfocarse en dos alternativas, haremos un resumen de dos de ellas.
Método Multipelícula: Es posible construir casi cualquier imagen vectorial usando las herramientas de dibujo de Flash CS4 Professional.
•
Crear una película usando Actionscript 2.0 de 800 pixels de ancho por 600 pixels de alto, en dicha película crear 4 layers llamados: biografía, fotos, videos, audios y barrahorizontal, tal como se muestra en la siguiente figura:
•
Ubicarse en el primer frame del layer barrahorizontal y dibujar un rectángulo de color marrón de 800 pixels de ancho por 80 pixels de alto ubicado en la parte inferior del Stage. Luego colocarse en el primer frame del layer biografía y digitar la palabra BIOGRAFIA usando la herramienta texto, puede seleccionar tipo de letra Verdana, en Bold y de 16 puntos en color blanco para que contraste respecto de la barra horizontal marron. Repetir el paso anterior ubicandose en el primer frame de los otros layers: fotos, videos y audios y separar de forma proporcional los textos.
• •
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
4
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
5
•
Grabar esta película con el nombre menu.fla en una carpeta creada en el escritorio llamada armadoportafoliomultipelicula.
•
Crear un layer adicional en la parte superior llamado zonadereemplazo.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
6
• • • •
Crear un layer adicional en la parte superior llamado zonadereemplazo. Ubicarse en el primer frame del layer zonadereemplazo y dibujar un rectángulo de color amarillo de 800 pixels de ancho por 540 pixels de alto, ubicado en la parte superior del stage tal como se muestra en la figura de la página siguiente. Luego seleccionar dicho rectángulo y convertirlo en movie clip, asignarle el nombre mczonadereemplazo, no olvidar colocar el nombre de instancia: imczonadereemplazo. Finalmente grabar los cambios en esta película menu.fla
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
7
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
8
•
Crear otra película usando Actionscript 2.0 de 800 pixels de ancho por 540 pixels de alto (el mismo tamaño de la zona de reemplazo), en dicha película crear 2 layers llamados: titulo y texto, tal como se muestra en la siguiente figura:
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
9
• •
Ubicarse en el primer frame del layer título escribir Biografía en la parte superior del stage. Ubicarse en el primer frame del layer texto e ingresar un texto simulado
“La Red de redes ha crecido tan rápido en los últimos tiempos que sería complicado dar cifras exactas sobre la cantidad de datos que se mueven a diario en Internet. Sin embargo, gracias a una infografía de Contently tenemos una panorámica de todo lo que se mueve en los principales servicios web. Más de 140 millones de tweets diarios en Twitter, 1.500 millones de fotografías, publicaciones o vídeos en Facebook, 10 millones de post en Tumblr o 1,6 millones de nuevos post son algunos de los datos que nos muestran la ingente cantidad de datos que se mueve cada día en Internet. Pero ahí no queda la cosa, subimos más de 2 millones de vídeos, 5 millones de imágenes y creamos 60.000 nuevos sitios webs. ¿Alguien da más? La imagen que nos ofrece otras curiosidades”.
• • •
Grabar esta película con el nombre biografia.fla en la carpeta llamada armadoportafoliomultipelicula (es decir la misma carpeta donde esta grabada la película menu.fla). Activar la opción File > Publish Settings y aparecerá la ventana titulada de la misma forma. En esa ventana aparecen una serie de formatos de publicación que pueden ser seleccionados, en este caso seleccionar Flash (.swf) Si inspeccionamos la carpeta armadoportafoliomultipelicula observaremos que hay tres archivos dos películas en flash (.fla) y un archivo en formato .swf
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
10
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
11
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
12
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
13
• • • • • • •
Crear otra película usando Actionscript 2.0 de 800 pixels de ancho por 540 pixels de alto (el mismo tamaño de la zona de reemplazo), en dicha película crear 2 layers llamados: titulo y fotos, tal como se muestra en la siguiente figura: Ubicarse en el primer frame del layer título escribir Fotografías en la parte superior del stage. Importar la imagen lobodemar.jpg a la biblioteca. Ubicarse en el primer frame del layer fotos y arrastrar la imagen lobodemar.jpg de la biblioteca al stage. Grabar esta película con el nombre fotos.fla en la carpeta llamada armadoportafoliomultipelicula. Activar la opción File > Publish Settings y aparecerá la ventana titulada de la misma forma. En esa ventana aparecen una serie de formatos de publicación que pueden ser seleccionados, en este caso seleccionar Flash (.swf) Si inspeccionamos la carpeta armadoportafoliomultipelicula observaremos que hay cinco archivos, tres películas en flash (.fla) y dos archivos en formato .swf
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
14
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
15
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
16
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
17 • • • • •
Crear otra película usando Actionscript 2.0 de 800 pixels de ancho por 540 pixels de alto (el mismo tamaño de la zona de reemplazo), en dicha película crear 2 layers llamados: titulo y video, tal como se muestra en la siguiente figura: Ubicarse en el primer frame del layer título escribir Videos en la parte superior del stage. Grabar esta película con el nombre videos.fla en la carpeta llamada armadoportafoliomultipelicula. Activar la opción File > Publish Settings y aparecerá la ventana titulada de la misma forma. En esa ventana aparecen una serie de formatos de publicación que pueden ser seleccionados, en este caso seleccionar Flash (.swf) Si inspeccionamos la carpeta armadoportafoliomultipelicula observaremos que hay siete archivos, cuatro películas en flash (.fla) y tres archivos en formato .swf
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
18
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
19
• • • • •
Crear otra película usando Actionscript 2.0 de 800 pixels de ancho por 540 pixels de alto (el mismo tamaño de la zona de reemplazo), en dicha película crear 2 layers llamados: titulo y audio, tal como se muestra en la siguiente figura: Ubicarse en el primer frame del layer título escribir Audios en la parte superior del stage. Grabar esta película con el nombre audios.fla en la carpeta llamada armadoportafoliomultipelicula. Activar la opción File > Publish Settings y aparecerá la ventana titulada de la misma forma. En esa ventana aparecen una serie de formatos de publicación que pueden ser seleccionados, en este caso seleccionar Flash (.swf) Si inspeccionamos la carpeta armadoportafoliomultipelicula observaremos que hay nueve archivos, cinco películas en flash (.fla) y cuatro archivos en formato .swf
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
20
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
21
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
22 • • •
Una vez que han sido construidos las 5 películas anteriores vamos a regresar a la película menu.fla para programar la carga de películas. Ubicarse en el frame 1 del layer biografia y seleccionar la palabra BIOGRAFIA, convertirla en botón con el nombre botonbiografia, luego pulsar el botón Aceptar y se puede observar que en la biblioteca aparece dicho elemento. Luego hacer la misma conversión a botón de los textos FOTOS, VIDEOS y AUDIOS creando los botones botonfotos, botonvideos y botonaudios.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
23
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
24
•
Ubicarse en el primer frame del layer biografia y seleccionar el botón BIOGRAFIA, luego activar el panel de Actions y asegurarse que el titulo de la ventana sea Action – Button.
•
Digitar lo siguiente en la ventana:
on (press) { loadMovie("biografia.swf", imczonadereemplazo); }
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
25
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
26 •
Finalmente podemos probar la película menú.fla. Para ello activar la opción CTRL + ENTER (en PC) se visualizara la siguiente pantalla, luego activar el botón BIOGRAFIA y el contenido de la instacia imczonadereemplazo se reemplazara por la película biografia.swf de tal forma que podremos visionar el contenido de biografia.swf sin salir de la película menú.fla tal como se muestra en la figura.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
27
•
Del mismo modo programamos los botones FOTOS, VIDEOS y AUDIOS. Para cada caso seleccionar cada uno de los botones y activar el panel de Actions y asegurarse que el titulo de la ventana sea Action – Button e ingresar los siguientes códigos respectivamente:
on (press) { loadMovie("fotos.swf", imczonadereemplazo); }
on (press) { loadMovie("videos.swf", imczonadereemplazo); }
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe
28
on (press) { loadMovie("audios.swf", imczonadereemplazo); }
•
Recuerde algunos detalles importantes que le ahorraran tiempo y esfuerzo: a. Todas las películas en formato fla siempre deben ser grabadas dentro de una misma carpeta. b. Los nombres de las películas deben contener letras minúsculas, sin tildes, sin caracteres extraños y sin espacios en blanco. c. Siempre es necesario generar los archivos en formato swf para que puedan ser cargados en la película menú. Es decir para que todo funcione es necesario publicar las películas biografia.fla, fotos.fla, videos.fla y audios.fla en formato swf. (para hacer esto hay dos formas la primera es usar la opción File > Publish Settings y seleccionar la opción .swf, la otra es pulsar en simultáneo las teclas CTRL + ENTER) d. No olvidar colocar el nombre de la instancia del movie clip mczonadereemplazo, a saber, imczonadereemplazo, e. La prueba de toda la película se hace desde la película menu.fla, esto se hace de dos formas: la primera es usar la opción File > Preview > Flash, la otra opción es pulsar en simultáneo las teclas CTRL + ENTER) f. A veces las películas no cargan en la posición correcta, por ejemplo aparecen como descuadradas en el medio, la solución de este problema tiene que ver con el punto de registro de la instancia imczonadereemplazo. g. Si todo esta bien programado y el portafolio no funciona, normalmente hay varias explicaciones, la primera es que al colocar el código en el botón el nombre que se esta usando como nombre de instancia no es el correcto, la segunda es que el código del botón no ha sido realmente colocado en el botón sino en el frame (recuerde que debe salir Actions - Button y no Actions – Frame). La tercera es que los botones programados se “malograron” y han dejado de funcionar a pesar de tener un código correcto.
Copyright
Alberto Mejía, UPC, 2011
alberto.mejia@upc.edu.pe