Taller de Periodismo Digital - Scrolling de Texto (Manual 07 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

14 de abril de 2010

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 04 Sesión 02 Alberto Mejía Manrique (alberto.mejia@upc.edu.pe)

Scrolling de Texto:



Este ejercicio conceptualmente incorpora los tres tipos de elementos de Flash (Graficos, Botones y Movie Clips) además nos permite trabajar con el anidamiento de elementos lo que requiere considerar detalles nuevos dentro de la programación de scripts.



Visionar el siguiente ejemplo ubicado en la siguiente dirección para darnos una idea del producto final.



Abrir un archivo de Adobe Flash (Action Script 2.0), modificar el tamaño a 800 x 600, mantener el Frame Rate a 20 fps, además activar el panel Library para ser consciente en todo momento de los elementos que incluiremos en esta animación.



Insertar un movie clip con el nombre de mctexto (Insert > New Symbol > Movie Clip), en ese momento observe que aparece un Timeline Secundario similar al Timeline Principal. Nos damos cuenta de dicho detalle porque en la parte superior del stage aparecen pestañas anidadas, la pestaña Scene 1 y la pestaña mctexto a su derecha.

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

4 

Crear tres layers según se muestra en la siguiente figura: Acciones, Mascara y Texto.



Ubicarse en el primer frame del layer Texto y agregar el siguiente texto (de color negro) que esta en el documento ¿Cuánta información publicamos a diario en Internet? en FB dentro del grupo TPD 201101 (es un texto de 3 párrafos). Use tipo de letra Verdana y un tamaño de letra 16 puntos. Coloque el texto en una caja de texto que sea mas alta que larga según se muestra en la figura usando la herramienta texto.



Ubicarse en el primer frame del layer Mascara y dibuje un rectángulo rojo (sin borde) que cubra la parte superior del texto anteriormente ingresado. A este rectángulo en adelante le llamaremos rectángulo de visualización y es la ventana mediante la cual visionaremos parte del

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

5 texto que hemos copiado. Observe que este rectángulo solo cubre la parte superior del texto ingresado y en principio tienen un ancho que es mayor o igual al texto ingresado.



En este caso la duración de la animación no depende del tiempo sino de lo rápido que en promedio se puede leer el texto usando un scrolling. Consideremos que para la longitud del texto ingresado, 3 segundos son suficientes, al final del ejercicio este tiempo puede reducirse o ampliarse. Con esta idea la animación nos tomara 3*20 frames = 60 frames.



Nos ubicamos en el primer frame del layer Texto, seleccionamos el texto en el stage y lo convertimos en Graphic debido a que en esta película es el texto el que se moverá detrás de la mascara. Luego nos ubicamos en el frame 60 del mismo layer Texto e insertamos un Keyframe (F6). Nos ubicamos en un punto intermedio (entre el frame 2 y 59) e insertamos un Classic Tween.

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

6

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

7 

Nos ubicamos en el frame 60 del layer Mascara e insertamos un frame (F5) esto es debido a que este elemento no tienen animación. Ahora ambos elementos están ubicados en los primeros 60 layers.



Ubicarse en el frame 60 del layer Texto, seleccionar el texto ubicado en el stage y moverlo de tal forma que la parte inferior del texto quede al mismo nivel que la parte inferior del rectangulo de visualizacion tal como se muestra en la figura.



Ubicarse en el frame 60 del layer Acciones e insertar un frame (F5)



Ubicarse en el primer frame del layer Acciones, activar el panel de Actions (asegúrese que el titulo de la ventana Actions sea Actions Frame)



Ingresar el siguiente script de frame:

stop();



Como hemos insertado un frame en el frame 60 del layer Acciones observe que apenas digitamos este script todos los frames de dicho layer cambian al color gris, con lo cual se deduce que todos los 60 frames tienen el mismo script.

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

8



Ubicarse sobre el nombre del layer Mascara y activar la Mascara.

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

9 

Hasta ahora todo el contenido ha sido creado dentro del movie clip mctexto y hemos trabajado en un Timeline Secundario. Ahora salimos de la instancia para reingresar al Timeline Principal activando la pestaña Scene 1.



Al ingresar al Timeline Principal veremos que el stage esta vacio y que en la library aparecen dos elementos: mctexto y texto.



En el Timeline Principal (en adelante Timeline “a secas”) crear tres layers: Botonbajar, Texto y Botonsubir y ubicarlos según se muestra en la figura.



Ubicarse en el primer frame del layer Texto y arrastar el movie clip mctexto del library al stage, luego colocarle a esta instancia del movie clip mctexto el nombre de instancia imctexto (como en los ejemplos anteriores) usando el panel Properties.

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

10



Ubicarse en el primer frame del layer Botonbajar y dibujar un círculo rojo sin borde cerca a la esquina superior derecha del texto que se ve en el stage. Seleccionar este circulo rojo y convertirlo en Boton, asignarle el nombre botonrojo.



Ubicarse en el primer frame del layer Botonsubir y arrastar el botonrojo del library al stage y ubicarlo cerca a la parte inferior derecha del texto que se ven en el stage.

Observe que no fue necesario crear dos botones diferentes, estamos usando el mismo, solo que tendrán diferente funcionalidad, es decir diferentes scripts.

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

11



Ubicarse en el primer frame del layer Botonsubir, seleccionar el botonrojo que le corresponde en el stage, activar el panel de Actions (asegúrese que el titulo de la ventana Actions sea Actions Button)



Ingresar el siguiente script de boton:

on (press) { imctexto.nextFrame(); }

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

12



Ubicarse en el primer frame del layer Botonbajar, seleccionar el botonrojo que le corresponde en el stage, activar el panel de Actions (asegúrese que el titulo de la ventana Actions sea Actions Button)



Ingresar el siguiente script de botón:

on (press) { imctexto.prevFrame(); }

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe

13 

Para verificar lo que hemos hecho activamos la opción File > Publish Settings > Flash y podremos ver la animación del efecto creado.



Grabar la película con el nombre scrollingdetexto.fla



Observe que para ingresar los comando en Flash lo podemos digitar directamente, pero hay que tener cuidado con la sintaxis del Actionscript 2.0 (por ejemplo en el comando nextFrame(); la F esta en alta, si la digitan en bajas el programa no reconocerá el comando.



Por lo que es un buen hábito encontrar estos comandos en el menú de la derecha dentro del panel Actions de esta forma no tendremos que preocuparnos de la sintaxis sino de cuales son los comandos que debo utilizar.

Copyright



Alberto Mejía, UPC, 2011

alberto.mejia@upc.edu.pe