Taller de Periodismo Digital - Introduccion (Manual 01 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 - 01

ALBERTO MEJÍA MANRIQUE

22 de marzo de 2011

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

2


3

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

Semana 01 Sesión 01

Alberto Mejía Manrique ([email protected])

Flash CS4 (versión 10.0) es uno de los productos más exitosos de la empresa Adobe (antes el propietario del software era Macromedia). Fue introducida en el mercado en el año 1999 aproximadamente (versión 3.0) cuando Macromedia compro Splash, luego Adobe compro Macromedia y lo fue transformando sucesivamente hasta la versión que ahora tenemos. Flash CS4 (que forma parte de Adobe Web Premium CS4) es una herramienta de autoría multimedia orientada a la construcción de productos (animaciones, web sites, aplicaciones) que principalmente se ejecutan en Internet, aunque su uso para la construcción de contenido multimedia en formato Cdrom también está ampliamente difundido. Desde sus versiones originales incorporo la forma de trabajo y potencialidades reconocidas de su hermano mayor Macromedia Director, de ésta manera ahora podemos decir que es la herramienta de autoría multimedia más difundida en el mercado con realmente pocos productos que lo equiparen en potencia, flexibilidad y funcionalidad.


4


5

Es posible descargar de manera gratuita el software desde http://www.adobe.com, a partir de allí ingresar a Trial Downloads, luego seleccionar la opción Adobe Flash® CS4 Professional Try, recuerde que para realizar una descarga necesita crear una cuenta gratuita en Adobe. Su uso está permitido durante un mes contado desde el momento de su instalación, luego el software se bloquea y pide un número de serie para continuar funcionando. Nota: Construya una carpeta en su computadora con su propio nombre y apellido (por ejemplo E:\nombre_apellido_archivos) allí almacenará todos los archivos ejemplos y realizaremos todas las pruebas de publicación en los diferentes formatos.

Para activar el programa ir a Start > Programs > Adobe Web Premiun CS4 > Adobe Flash CS4 Professional, aparecerá entonces la siguiente pantalla: Seleccionar de la columna Crear nuevo la opción Archivo de Flash (AS 2.0). La abreviatura AS significa actionscript que es lenguaje de programación que usa Adobe Flash. Seleccionamos AS 2.0 por que la opción AS 3.0 esta relacionada con actionscript 3.0 que es la última versión del lenguaje de programación pero que consideramos excesivamente compleja para los objetivos de esta asignatura.


6


7 El ambiente de trabajo de Flash CS4 Professional Cuando se inicia el trabajo con Flash se debe reconocer el entorno de trabajo posee 4 componentes principales. La línea de tiempo (timeline) Las herramientas y el escenario (stage) La biblioteca (library)


8 y luego un conjunto de paneles con distintas funcionalidades (panels) que se ubican en la parte derecha de la pantalla.

Construyendo diagramas con Flash CS4 Professional Flash permite esta pensado para el uso intensivo de imágenes vectoriales, es decir aquellas que al aumentarse de tamaño no se “pixelean”, por ello cuenta con un conjunto bastante completo de herramientas de dibujo con las cuales podemos construir casi cualquier cosa. Aquí tenemos un primer punto de utilidad, pues estas imágenes así construidas pueden incorporar flujogramas de trabajo, o diagramas que simplemente acompañen a alguna de nuestras presentaciones. Cada una de estas imágenes pueden ser exportadas en formato *.jpg o *.gif e incorporadas en presentaciones convencionales en PowerPoint, documentos de Word o libros en Excel. Ejercicio introductorio: Es posible construir casi cualquier imagen vectorial usando las herramientas de dibujo de Flash CS4 Professional. • Seleccione la herramienta Óvalo (Oval Tool) de la paleta herramientas (Tools). Verificar que las

herramientas Color de relleno (Fill Color) y Color de trazo (Stroke Color) tengan un color seleccionado.

• En ese momento el cursor se convierte en una cruz, luego muévalo hacia el escenario (stage), pulse el botón izquierdo del mouse con la tecla shift en simultáneo y arrástrelo en diagonal.

• En ese momento habrá dibujado un círculo y una circunferencia. • Al observar con detalle vera que el círculo (si no hemos cambiado las opciones originales) es de

color azul y la circunferencia (borde) es de color negro. Ambos colores se asocian a las


9 herramientas Color de relleno (Fill Color) y Color de trazo (Stroke Color) que están dentro de la sección Colores (Colors) de la paleta Tools.

Es posible seleccionar sólo el borde (circunferencia), sólo el contenido (círculo) o ambos al mismo tiempo. • Para seleccionar sólo el borde haga un clic con el botón izquierdo del mouse sobre alguna parte

del borde, observe que el borde aparece seleccionado con una línea un poco más gruesa. • Para seleccionar sólo el contenido esta vez haga clic sobre el contenido, observe que se

selecciona cada punto que lo conforma. • Para seleccionar el borde y contenido (círculo y circunferencia) es necesario que haga doble clic

sobre el contenido.


10

Ahora a este elemento así formado, se le puede modificar fácilmente tanto su forma como su color. • Seleccione la herramienta Selección (Selection Tool osea el cursor negro) de la barra

herramientas (Tools) y acerque la punta del cursor al borde del círculo (osea a la circunferencia), en ese momento aparecerá en la parte posterior del cursor un arco. Este es el indicador que nos permitirá modificar la forma de este elemento.

• Para ello pulse el botón izquierdo del mouse y arrastre hacia afuera. • Observe ahora como es que la figura se ha deformado.

• Grábelo con el nombre ejercicio_introductorio.fla con la opción Guardar como … (Save As ...) • Recuerde que si en casa tiene una versión anterior (como Flash CS3) debe grabar su trabajo en

dicho formato. Si cuenta en casa con una Mac, existe total compatibilidad de archivos entre Mac y PC, siempre y cuando sea la misma versión.

Ejercicio Visibilidad: Ahora bien, normalmente una animación normalmente requiere de la participación de un conjunto de personajes (fotografías, dibujos, sonidos, textos, videos, animaciones, etc). Se hace necesario entonces el uso de las capas y cuadros (layers y frames respectivamente) que permiten incorporarle temporalidad a cada personaje. Es decir determinan el momento específico durante la ejecución de la animación (que en adelante llamaremos película o movie) en el cual aparecen y desaparecen. Como regla general se usará una layer para cada personaje, pero ¿Qué personaje debe estar en cada capa (layer)? ¿Cuál es la “visibilidad” que hay que respetar? • Abra un nuevo archivo en flash con la opción Archivo > Nuevo … (File > New ...). Observe que

se muestra la siguiente ventana con la pestaña General activa por defecto. Recuerde que debe seleccionar la opción Archivo de Flash (AS 2.0) si se equivoca en esta elección los scripts (programas que crearemos mas adelante no funcionaran)


11

• Centrémonos unos instantes en la Línea de Tiempo (Timeline)

• En la parte inferior izquierda de la Línea de Tiempo (Timeline) aparece un conjunto de íconos,

tres a la izquierda, para crear una nueva capa, una nueva carpeta y eliminar la capa activa (en donde esta ubicada la celda seleccionada).

• Utilizando el primer ícono de la izquierda inserte dos capas (layers) adicionales, en total debes tener tres capas.

• Ensaye cambiando de nombre a dichos layers, para ello haga doble clic sobre cada nombre y escriba el nuevo nombre. Por esta vez usemos los nombres tal y como se muestran en la pantalla siguiente:


12

• Observe que lo que esta seleccionado en la pantalla anterior es el cuadro 1 (frame 1) del layer Cuadrado, esto se deduce a partir de que layer esta azul y donde se encuentra el cabezal de ejecución (barra vertical de color rojo que se encuentra sobre la numeración de los cuadros- frames en la parte superior de la Línea de Tiempo - Timeline)

• Ahora, ubicarse en el cuadro 1 (frame 1) de la capa (layer) Círculo dibuje un círculo de color rojo (y borde negro)

• Seleccione el cuadro 1 del layer Cuadrado y dibuje un cuadrado de color azul (y borde negro) • Finalmente seleccione el cuadro 1 del layer Triángulo y dibuje un triángulo de color verde, pero

¿no hay herramienta triángulo? ¿Cómo lo construimos? • Para construir un triángulo, dibuje un cuadrado de color verde, y con el cursor seleccione una

de sus esquinas y arrástrela hacia la esquina vecina y observe como el cuadrado se transforma en un triángulo rectángulo.

• Ahora debemos reconocer que los tres elementos están en capas (layers) distintas, es decir en

tres planos distintos. • Ahora seleccione el triángulo verde y su borde, haciendo doble clic sobre él y arrástrelo hasta

intentar superponerlo parcialmente sobre el círculo rojo. • Observe lo que pasa en la línea de tiempo (Timeline) y en el escenario (Stage). • Si observa con cuidado el triángulo verde queda detrás del círculo rojo. • ¿Cuál es la explicación? Lo que sucede es que la capa (layer) Círculo se ve delante de la capa

(layer) Triángulo. • Ahora seleccione el cuadrado azul (y su borde) y arrástrelo hasta superponerlo parcialmente

sobre el círculo rojo y al triángulo verde.


13


14 • Observe que los elementos intentaron superponerse y la visibilidad es de arriba hacia abajo. Es

decir que los personajes que en una animación forman parte del fondo deben estar en las capas (layers) inferiores (como la capa Cuadrado) y los personajes que están mas cerca del observador deben estar en las capas (layers) superiores (como la capa Círculo)

• Grábelo con el nombre ejercicio_visibilidad.fla con la opción Guardar como … (Save As ...) • Recuerde que si en casa tiene una versión anterior (como Flash CS3) debe grabar su trabajo en

dicho formato. Si cuenta en casa con una Mac, existe total compatibilidad de archivos entre Mac y PC, siempre y cuando sea la misma versión.

Documents

Taller de Periodismo Digital - Introduccion (Manual 01 Adobe Flash - PE53)