1. Abre el programa Flash CS5. 2. Haz clic en Archivo Nuevo para crear un nuevo documento. 3.

. Selecciona Archivo de Flash ActionScript 3 en el dilogo que se abrir y pulsa Aceptar. 4. Se abrir un documento en blanco. Lo guardaremos para darle un nombre y poder guardar nuestros progresos de vez en cuando. Para ello haz clic en Archivo Guardar. Dale un nombre (por ejemplo periodico), selecciona una la carpeta donde tienes los swf de las pginas del peridico, y que encontrars en la carpeta http://johnbonilla.wikispaces.com/space/content estan las paginas con el

contenido

pulsa Guardar.

Ahora podrs guardar el documento siempre que quieras pulsando Ctrl + S o haciendo clic en Archivo Guardar.

5. Empecemos a crear el documento. Primero cambiaremos su tamao. Haz clic derecho en cualquier parte del rea de trabajo y selecciona Propiedades del Documento.... 6. Introduce 600 en Anchura y 400 en Altura. Pulsa Aceptar para aplicar los cambios. 7. Inserta 3 nuevas capas utilizando el botn Insertar capa 8. Nmbralas de arriba en la lnea de tiempo.

abajo: acciones, hoja, derecha e izquierda.

En la capa acciones introduciremos el cdigo que vamos a utilizar en la lnea de tiempo principal. La capa hoja contendr la animacin de la hoja pasndose.

En las capas derecha e izquierda introduciremos dos movieclips donde cargaremos las pginas que querremos visualizar en cada momento. 9. Nuestro prximo paso ser crear movieclips donde colocaremos las pginas derecha e izquierda. Abre la Biblioteca, si no est ya abierta, desde Ventana Biblioteca y pulsa el botn Nuevo Smbolo situado al pie de esta. 10. Dale el nombre de pagina y selecciona Clip de pelcula. Se crear el clip, pero como no queremos introducir nada en l lo dejaremos vaco y pulsaremos Escena 1 para volver a la Escena principal.

11. Ahora introduciremos instancias del clip pagina en las capas derecha e izquierda. Selecciona la capa derecha y arrastra el smbolo que acabamos de crear de la Biblioteca al Escenario. 12. En el Panel Propiedades cambiaremos las coordenadas de posicin,

en X escribiremos 300 y en Y 0. As se colocar el clip en el medio del documento, que es donde se encontrar la esquina superior izquierda de la pgina derecha. 13. Dale el nombre de instancia pagina_derecha. 14. Ahora crearemos una instancia para la pgina izquierda. Selecciona la capa izquierda y arrastra el clip pagina sobre el Escenario. 15. En el Panel Propiedades dale las coordenadas de posicin X 0 e Y 0. 16. Cambia su nombre de instancia a pagina_izquierda. 17. Ahora crearemos el movimiento de la hoja. Para ello crearemos un clip de pelcula que representar la hoja. Haz clic en Nuevo Smbolo (al pie de la Biblioteca) y dale el nombre hoja. Selecciona Clip de pelcula y pulsa el botnAceptar. 18. Selecciona la herramienta Rectngulo 19. Selecciona le herramienta Seleccin y dibuja un rectngulo en el Escenario. y haz doble clic sobre el rectngulo que

acabas de crear para seleccionarlo completamente. 20. En el Panel Propiedades cambia su Ancho a 300 y su Alto a 400. Colcalo en la posicin X 0 e Y 0. 21. Para que te sea ms cmodo, puedes darle un color de relleno al rectngulo. 22. Ahora crearemos la animacin que recrear el movimiento de la hoja. Para ello creamos un nuevo clip, haz clic en el botn Nuevo Smbolo y llmalo hoja_movimiento, selecciona Clip de pelcula y pulsa Aceptar. 23. Entraremos en el modo de edicin del nuevo clip. Arrastra el smbolo hoja que acabamos de crear al Escenario. 24. Primero crearemos la animacin que se reproducir cuando pasemos a la hoja siguiente. As que la posicin inicial de la pgina ser en la parte de la derecha. Cambiamos la posicin desde el Panel Propiedades a X 0 e Y 0. 25. Y le damos al smbolo el nombre de instancia pagina. En este clip cargaremos las pginas para que d la sensacin de que estamos pasando las hojas.

26. Nos colocamos en el fotograma 2 y creamos un nuevo fotograma clave pulsando F6. Dejaremos el fotograma 1 libre para detener la pelcula ah y avanzar al fotograma 2 ms tarde para iniciar la animacin. 27. Nos colocamos en el fotograma 41 y creamos otro fotograma clave (F6), aqu terminar la animacin de la hoja. 28. En el fotograma 41 situaremos el smbolo pagina en las coordenadas X -300 e Y 0. Este sera el punto final de la animacin, con la hoja totalmente pasada. 29. Sobre la lnea de tiempo, hacemos clic derecho, y en el men contextual elegimos Crear interpolacin clsica. Hemos creado la interpolacin. 30. Ahora crearemos el punto intermedio. Nos colocamos en el fotograma 21 y creamos un fotograma clave (de nuevo F6). 31. En este fotograma, seleccionamos el smbolo pagina y modificamos las coordenadas del smbolo en el Panel Propiedades a X 0 e Y 0, y su ancho AN a 1 px. 32. Ya tenemos la primera animacin de la hoja. Ahora crearemos la animacin de simular que pasamos a la hoja anterior. Para ello creamos un nuevo fotograma clave en la posicin 42 (que ser la posicin inicial de la hoja) y otro en el fotograma 82 (la posicin final). 33. Igual que antes, colocamos la hoja en su sitio en el fotograma 82, esto es, en la parte derecha. Para ello, selecciona el fotograma y en l haz clic en el smbolo. Modifica las coordenadas del Panel Propiedades a X 0 e Y 0. 34. En la lnea de tiempo, hacemos clic derecho en cualquier fotograma intermedio (por ejemplo, 60) y seleccionamos Crear interpolacin clsica. 35. Ahora crearemos un fotograma clave en el fotograma 62, donde crearemos la posicin intermedia. 36. Modifica las coordenadas a X 0 e Y 0 en el Panel Propiedades, y el ancho AN a 1. 37. Ya tenemos la animacin creada. Mejormosla ajustando la aceleracin de sta. Para ello, selecciona un fotograma intermedio de la primera animacin (por ejemplo, 10) y en el Panel Propiedades escribe -100 en el campoAceleracin. 38. Haz lo mismo para la tercera animacin (en el fotograma 50, por ejemplo). 39. Para la segunda y cuarta animacin (fotogramas 30 y 70, por ejemplo)

escribe 100 en Aceleracin.

Ahora s hemos terminado. 40. Ahora crearemos una nueva capa donde introduciremos las acciones. Pulsa el botn Insertar capa y llmala acciones.

41. Crea fotogramas clave en las posiciones 1, 2, 21, 41, 42, 62 y 82. O lo que es lo mismo, en las mismas posiciones en las que encontraras fotogramas claves en la capa de la animacin. 42. Abre el Panel Acciones desde Ventana Acciones selecciona el fotograma 1 y escribe en el Panel Acciones stop();. Haz lo mismo en los fotogramas 41 y 82. Esto es para que la animacin se detenga en el principio del todo y despus de que realice la pasada de hoja. 43. Crearemos las etiquetas de fotograma que indicaba el enunciado. Selecciona

el fotograma 2 de la capa donde tienes la animacin y escribe en el Panel Propiedades siguiente. 44. Le damos la etiqueta anterior al fotograma 42 del mismo modo. 45. Ahora slo faltar introducir el cdigo para que se carguen las pelculas. Pero antes colocaremos el clip que hemos creado en la pelcula principal. Haz clic en Escena 1. 46. Ahora selecciona la capa hoja y arrastra el clip de

pelcula hoja_movimiento al Escenario. 47. Modifica sus coordenadas en el Panel Propiedades y colcalo en X 300 e Y 0. 48. Dale el nombre de instancia hoja_movimiento para poder referirnos a l desde el cdigo. 49. Ahora pasaremos a introducir el cdigo que necesitamos. Sitate en el fotograma 1 de la capa acciones en la pelcula principal y abre el Panel Acciones (F9). 50. Escribe lo siguiente: ?

1 2 3 4 5

stop();

addEventListener("irSiguiente",irSiguiente); function irSiguiente(event) { hoja_movimiento.gotoAndPlay('siguiente'); }

6 7 8 9 10 11
Como se comentaba en el enunciado, al pulsar en los botones de las pginas, se producen los eventos "irAnterior" e "irSiguiente", porque as lo hemos programado en las pginas. Lo que haremos ser escuchar esos eventos, y cuando se produzcan, ir a la etiqueta correspondiente de hoja_movimiento para simular el movimiento. 51. Haz doble clic sobre el smbolo hoja_movimiento para acceder a su lnea de tiempo. 52. En el primer fotograma de la capa acciones, introduce el siguiente cdigo: ? addEventListener("irAnterior",irAnterior); function irAnterior(event) { hoja_movimiento.gotoAndPlay('anterior'); }

1 2 3 4 5 6 7

stop();

var vista:Number=0; var hojasIzquierda:Array=["","contenido_actualidad.swf","contenido_deportes.swf", "contenido_naturaleza.swf","contenido_ultima.swf"]; var hojasDerecha:Array=["contenido_portada.swf","contenido_ciencia.swf", "contenido_espectaculos.swf","contenido_politica.swf",""];

Aqu hemos parado la pelcula y hemos definido las variables que utilizaremos en el resto de la pelcula.

En la variable vista almacenamos el momento en el que nos encontramos, y en los arrays hojasIzquierda y hojasDerecha introducimos los archivos SWF que deberemos cargar. Para ello hemos tenido en cuenta la siguiente tabla:

vista
0

hojasIzquierda

hojasDerecha
portada

1 2 3 4

actualidad deportes naturaleza ultima

ciencia espectaculos politica

Acude a esta tabla para entender los siguientes fragmentos de cdigo. 53. Como el cdigo para cargar los archivos SWF va a ser repetitivo, lo simplificaremos creando la siguiente funcin: ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14
Lo que hace esta funcin es utilizar un objeto Loader para cargar un archivo que indicamos en el parmetro archivo y mostrarlo en la pgina que le indiquemos en enPagina. Adems, si archivo est vaco, oculta la pgina. } function cargarSWF(enPagina:MovieClip, archivo:String) { if(archivo!="") { enPagina.visible = true; var loader:Loader; loader = new Loader(); loader.load(new URLRequest(archivo)); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, insertar); function insertar(event):void { enPagina.addChild(loader); } } else { enPagina.visible=false; }

54. Por ltimo, en este mismo fotograma, cargamos la primera pgina para que no quede la pgina vaca. Lo hacemos llamando a la funcin que hemos definido: ?

cargarSWF(pagina, hojasDerecha[vista]); que en el smbolo pagina (que se encuentra sobre los

Con esto haremos

smbolos pagina_izquierda y pagina_derecha) se cargue la primera hoja del peridico. Recuerda que la variable vista todava tiene el valor 0. 55. Selecciona el fotograma 2 y escribe lo siguiente en el Panel Acciones: ?

1 2 3 4

with (parent) { cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista+1]); } cargarSWF(pagina, hojasDerecha[vista]);

Observa el uso de parent para acceder al smbolo pagina_derecha. Lo empleamos porque este smbolo no est dentro del actual ( hoja_movimento, a la que nos referimos como this), si no en el nivel superior, en la pelcula general, que es el elemento padre (parent). Por tanto, lo que hacemos es cargar el contenido de la hoja de peridico que se va a ver por detrs de hoja_movimiento en pagina_derecha cuando pasemos la pgina.

Tambin cargamos en el smbolo pagina la hoja actual. 56. Selecciona el fotograma 21 y escribe lo siguiente en el Panel Acciones: ?

1 2

cargarSWF(pagina, hojasIzquierda[vista+1]); vista++;

En este punto el smbolo pagina se encuentra reducido tanto que es invisible. Aprovechamos y cambiamos el contenido con la siguiente hoja (que se encontrar

almacenada

en

la

posicin vista+1).

Aumentamos la variable vista en 1 con vista++; y listo. 57. Selecciona el fotograma 41 y escribe lo siguiente en el Panel Acciones despus de la lnea stop(); ?

1 2 3 4

stop(); with (parent) { cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista]); }

Aqu actualizamos el contenido del smbolo pagina_izquierda por si decidisemos retroceder en el peridico. As cuando le demos la vuelta a la pgina se ver el contenido correcto. 58. El cdigo en el resto de fotogramas claves es idntico al que hemos visto (pues la accin es similar) pero disminuyendo la variable vista a cada pasada de pgina y permutando las matrices hojasIzquierda y hojasDerecha.

El cdigo en el fotograma 42 es: ?

1 2 3 4 5

with (parent) { cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista-1]); }

cargarSWF(pagina, hojasIzquierda[vista]);

El cdigo en el fotograma 62 es: ?

1 2

cargarSWF(pagina, hojasDerecha[vista-1]); vista--;

Y el cdigo en el fotograma 82 es: ?

1 2 3 4

stop(); with (parent){ cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista]); }