Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

28
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

description

En este manual se detallan el armado del portafolio siguiendo la estrategia del metodo multipelicula. Este documento es uno de los manuales que forman parte de la asignatura de Taller de Periodismo Digital que se imparte en la Carrera de Comunicaciones y Periodismo de la Universidad Peruana de Ciencias Aplicadas (UPC) en Lima, Perú.

Transcript of Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Page 1: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

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

Page 2: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

2

Page 3: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

3

Taller de Periodismo Digital (PE 53) Macromedia Flash CS4 Professional (PC)

Semana 05 (Sesión 02)

Alberto Mejía Manrique ([email protected])

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.

Page 4: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

4

Page 5: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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.

Page 6: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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

Page 7: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

7

Page 8: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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:

Page 9: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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

Page 10: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

10

Page 11: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

11

Page 12: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

12

Page 13: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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

Page 14: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

14

Page 15: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

15

Page 16: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

16

Page 17: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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

Page 18: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

18

Page 19: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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

Page 20: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

20

Page 21: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

21

Page 22: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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.

Page 23: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

23

Page 24: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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); }

Page 25: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

25

Page 26: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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.

Page 27: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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); }

Page 28: Taller de Periodismo Digital - Armado Multipelicula (Manual 11 Adobe Flash - PE53)

Copyright Alberto Mejía, UPC, 2011 [email protected]

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.