Ejercicio 1: Peridico Digital

1. Abre el programa Flash 8.

2. Haz clic en Archivo Nuevo para crear un nuevo documento.

3. Selecciona Documento de Flash 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, selecciona una carpeta y pulsa Guardar. Ahora podrs guardar el documento siempre que quieras pulsando Ctrl + G 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 lnea de tiempo.

en la

8. Nmbralas de arriba 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 en la lnea de tiempo 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 laBiblioteca 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 botn Aceptar.

18. Selecciona la herramienta Rectngulo rectngulo en el Escenario.

y dibuja un

19. Selecciona le herramienta Seleccin y haz doble clic sobre el rectngulo que acabas de crear para seleccionarlo completamente.

20. En el Panel Propiedades cambia su Alto a 400 y su Ancho a 300. Colcalo en la posicin X 0 e Y 0.

21. 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 llmalohoja_movimiento, selecciona Clip de pelcula y pulsa Aceptar.

22. Entraremos en el modo de edicin del nuevo clip. Arrastra el smbolo hoja que acabamos de crear al Escenario.

23. 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 300 e Y 0.

24. Y le damos al smbolo el nombre de instancia pagina. En este clip cargaremos las pginas para que de la sensacin de que estamos pasando las hojas.

25. 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 alfotograma 2 ms tarde para iniciar la animacin.

26. Nos colocamos en el fotograma 41 y creamos otro fotograma clave (F6), aqu terminar la animacin de la hoja.

27. Seleccionamos un fotograma intermedio (por ejemplo, 25) y seleccionamos Movimiento en el desplegable Animar del Panel Propiedades. Hemos creado la interpolacin.

28. En el fotograma 41 situaremos el smbolo pagina en las coordenadas X 0 e Y 0. Este sera el punto final de la animacin, con la hoja totalmente pasada.

29. Ahora crearemos el punto intermedio. Nos colocamos en el fotograma 21 y creamos un fotograma clave (de nuevo F6).

30. En este fotograma, seleccionamos el smbolo pagina y hacemos clic en Modificar Transformar Rotar y Sesgar.

31. Colocamos el cursor sobre la gua medio derecha y cuando tome la forma de una doble flecha horizontal hacemos clic y arrastramos hasta que el rectngulo se convierta en una lnea discontinua.

32. Modificamos las coordenadas del smbolo en el Panel Propiedades a X 300 e Y 0.

33. 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).

34. Nos colocamos en cualquier fotograma intermedio (por ejemplo, 60) y seleccionamos Movimiento en el desplegable Animar del Panel Propiedades.

35. 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 300 e Y 0.

36. Ahora crearemos un fotograma clave en el fotograma 62, donde crearemos la posicin intermedia.

37. Selecciona el smbolo y haz clic en Modificar Transformar Rotar y Sesgar. Coloca el cursor en el gua medio derecha y reduce el rectngulo a una lnea. Suelta el botn del ratn cuando la lnea tome un aspecto discontinuo, esto significar que la has reducido a la expresin mnima.

38. Modifica las coordenadas a X 300 e Y 0 en el Panel Propiedades.

39. 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 campo Aceleracin.

40. Haz lo mismo para la tercera animacin (en el fotograma 50, por ejemplo).

41. Para la segunda y cuarta animacin (fotogramas 30 y 70, por ejemplo) escribe 100 en Aceleracin. Ahora s hemos terminado.

42. Ahora crearemos una nueva capa donde introduciremos las acciones. Pulsa el botn Insertar capa y llmala acciones.

43. 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.

44. 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.

45. 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.

46. Le damos la etiqueta anterior al fotograma 42 del mismo modo.

47. 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 enEscena 1 en la lnea de tiempo.

48. Ahora selecciona la capa hoja y arrastra el clip de pelcula hoja_movimiento al Escenario.

49. Modifica sus coordenadas en el Panel Propiedades y colcalo en X 300 e Y 0.

50. Dale el nombre de instancia hoja_movimiento para poder referirnos a l desde el cdigo.

51. 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).

52.
53. 54. 55. 56. 57.

Escribe lo siguiente:
stop();

_global.vista = 0;

_global.hojasIzquierda = ["", "contenido_actualidad.swf", "contenido_deportes.swf", "contenido_naturaleza.swf", "contenido_ultima.swf"];

58. _global.hojasDerecha = ["contenido_portada.swf", "contenido_ciencia.swf", "contenido_espectaculos.swf", "contenido_politica.swf", ""];

Aqu hemos parado la pelcula y hemos definido las variables (de tipo global) que utilizaremos en el resto de la pelcula. En la variable vista almacenamos el momento en el que nos encontramos, y en las matrices hojasIzquierda y hojasDerecha introducimos los archivos SWF que deberemos cargar. Para ello hemos tenido en cuenta la siguiente tabla:
vista 0 1 2 actualidad deportes hojasIzquierda hojasDerecha portada ciencia espectaculos

3 4

naturaleza ultima

politica

Acude a esta tabla para entender los siguientes fragmentos de cdigo.

59. Haz doble clic sobre el smbolo hoja_movimiento para acceder a su lnea de tiempo.

60. Ahora introduciremos las acciones en la capa acciones. Selecciona el fotograma 1 de dicha capa y abre el Panel Acciones.

61. Debajo de la lnea en la que hemos introducido el stop(); escribimos lo siguiente:

pagina.loadMovie(hojasDerecha[vista]);

Con esto haremos que en el smbolo pagina (que se encuentra sobre los smbolos pagina_izquierda y pagina_derecha) se cargue la primera hoja del peridico. Recuerda que la variable vista todava tiene el valor 0.

62. Selecciona el fotograma 2 y escribe lo siguiente en el Panel Acciones:

63. 64. pagina.loadMovie(hojasDerecha[vista]); _parent.pagina_derecha.loadMovie(hojasDerecha[vista+1]);

En la primera lnea cargamos el contenido de la hoja de peridico que se va a ver por detrs de hoja_movimiento en pagina_derecha cunado pasemos la pgina. Tambin cargamos en el smbolo pagina la hoja actual.

65. Selecciona el fotograma 21 y escribe lo siguiente en el Panel Acciones:

66. 67. vista++; pagina.loadMovie(hojasIzquierda[vista+1]);

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 listos.

68. Selecciona el fotograma 41 y escribe lo siguiente en el Panel Acciones despus de la lnea stop();
_parent.pagina_izquierda.loadMovie(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.

69. 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:
70. 71. pagina.loadMovie(hojasIzquierda[vista]); _parent.pagina_izquierda.loadMovie(hojasIzquierda[vista1]);

El cdigo en el fotograma 62 es:

pagina.loadMovie(hojasDerecha[vista-1]);

vista--;

Y el cdigo en el fotograma 82 es:

stop();

_parent.pagina_derecha.loadMovie(hojasDerecha[vista]);