Ayuda ejercicios unidad 18: Navegación - ActionScript



Ejercicio 1: Periódico Digital

Videotutorial YouTube

  1. Abre el programa Flash CS5.
  2. Haz clic en ArchivoNuevo para crear un nuevo documento.
  3. Selecciona Archivo de Flash ActionScript 3 en el diálogo 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 ArchivoGuardar. Dale un nombre (por ejemplo periodico), selecciona una la carpeta donde tienes los swf de las páginas del periódico, que encontrarás en la carpeta ejercicios/periodico y pulsa Guardar.

    Ahora podrás guardar el documento siempre que quieras pulsando Ctrl + S o haciendo clic en ArchivoGuardar.


  5. Empecemos a crear el documento. Primero cambiaremos su tamaño. 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 botón Insertar capa en la línea de tiempo.
  8. Nómbralas de arriba abajo: acciones, hoja, derecha e izquierda.

    En la capa acciones introduciremos el código que vamos a utilizar en la línea de tiempo principal. La capa hoja contendrá la animación de la hoja pasándose.

    En las capas derecha e izquierda introduciremos dos movieclips donde cargaremos las páginas que querremos visualizar en cada momento.
  9. Nuestro próximo paso será crear movieclips donde colocaremos las páginas derecha e izquierda. Abre la Biblioteca, si no está ya abierta, desde VentanaBiblioteca y pulsa el botón Nuevo Símbolo situado al pie de esta.
  10. Dale el nombre de pagina y selecciona Clip de película. Se creará el clip, pero como no queremos introducir nada en él lo dejaremos vacío 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 símbolo que acabamos de crear de la Biblioteca al Escenario.
  12. En el Panel Propiedades cambiaremos las coordenadas de posición, 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 página derecha.
  13. Dale el nombre de instancia pagina_derecha.
  14. Ahora crearemos una instancia para la página izquierda. Selecciona la capa izquierda y arrastra el clip pagina sobre el Escenario.
  15. En el Panel Propiedades dale las coordenadas de posición 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 película que representará la hoja. Haz clic en Nuevo Símbolo (al pie de la Biblioteca) y dale el nombre hoja. Selecciona Clip de película y pulsa el botón Aceptar.
  18. Selecciona la herramienta Rectángulo y dibuja un rectángulo en el Escenario.
  19. Selecciona le herramienta Selección y haz doble clic sobre el rectángulo que acabas de crear para seleccionarlo completamente.
  20. En el Panel Propiedades cambia su Ancho a 300 y su Alto a 400. Colócalo en la posición X 0 e Y 0.
  21. Para que te sea más cómodo, puedes darle un color de relleno al rectángulo.
  22. Ahora crearemos la animación que recreará el movimiento de la hoja. Para ello creamos un nuevo clip, haz clic en el botón Nuevo Símbolo y llámalo hoja_movimiento, selecciona Clip de película y pulsa Aceptar.
  23. Entraremos en el modo de edición del nuevo clip. Arrastra el símbolo hoja que acabamos de crear al Escenario.
  24. Primero crearemos la animación que se reproducirá cuando pasemos a la hoja siguiente. Así que la posición inicial de la página será en la parte de la derecha. Cambiamos la posición desde el Panel Propiedades a X 0 e Y 0.
  25. Y le damos al símbolo el nombre de instancia pagina. En este clip cargaremos las páginas para que dé la sensación 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 película ahí y avanzar al fotograma 2 más tarde para iniciar la animación.
  27. Nos colocamos en el fotograma 41 y creamos otro fotograma clave (F6), aquí terminará la animación de la hoja.
  28. En el fotograma 41 situaremos el símbolo pagina en las coordenadas X -300 e Y 0. Este sería el punto final de la animación, con la hoja totalmente pasada.
  29. Sobre la línea de tiempo, hacemos clic derecho, y en el menú contextual elegimos Crear interpolación clásica. Hemos creado la interpolación.
  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 símbolo pagina y modificamos las coordenadas del símbolo en el Panel Propiedades a X 0 e Y 0, y su ancho AN a 1 px.
  32. Ya tenemos la primera animación de la hoja. Ahora crearemos la animación de simulará que pasamos a la hoja anterior. Para ello creamos un nuevo fotograma clave en la posición 42 (que será la posición inicial de la hoja) y otro en el fotograma 82 (la posición 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 símbolo. Modifica las coordenadas del Panel Propiedades a X 0 e Y 0.
  34. En la línea de tiempo, hacemos clic derecho en cualquier fotograma intermedio (por ejemplo, 60) y seleccionamos Crear interpolación clásica.
  35. Ahora crearemos un fotograma clave en el fotograma 62, donde crearemos la posición 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 animación creada. Mejorémosla ajustando la aceleración de ésta. Para ello, selecciona un fotograma intermedio de la primera animación (por ejemplo, 10) y en el Panel Propiedades escribe -100 en el campo Aceleración.
  38. Haz lo mismo para la tercera animación (en el fotograma 50, por ejemplo).
  39. Para la segunda y cuarta animación (fotogramas 30 y 70, por ejemplo) escribe 100 en Aceleración.

    Ahora sí hemos terminado.
  40. Ahora crearemos una nueva capa donde introduciremos las acciones. Pulsa el botón Insertar capa y llámala 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 animación.
  42. Abre el Panel Acciones desde VentanaAcciones 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 animación se detenga en el principio del todo y después 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 animación y escribe en el Panel Propiedades siguiente.
  44. Le damos la etiqueta anterior al fotograma 42 del mismo modo.
  45. Ahora sólo faltará introducir el código para que se carguen las películas. Pero antes colocaremos el clip que hemos creado en la película principal. Haz clic en Escena 1.
  46. Ahora selecciona la capa hoja y arrastra el clip de película hoja_movimiento al Escenario.
  47. Modifica sus coordenadas en el Panel Propiedades y colócalo en X 300 e Y 0.
  48. Dale el nombre de instancia hoja_movimiento para poder referirnos a él desde el código.
  49. Ahora pasaremos a introducir el código que necesitamos. Sitúate en el fotograma 1 de la capa acciones en la película principal y abre el Panel Acciones (F9).
  50. Escribe lo siguiente:
    stop();
    
    addEventListener("irSiguiente",irSiguiente);
    function irSiguiente(event) {
    	hoja_movimiento.gotoAndPlay('siguiente');
    }
    
    addEventListener("irAnterior",irAnterior);
    function irAnterior(event) {
    	hoja_movimiento.gotoAndPlay('anterior');
    }
    Como se comentaba en el enunciado, al pulsar en los botones de las páginas, se producen los eventos "irAnterior" e "irSiguiente", porque así lo hemos programado en las páginas. 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 símbolo hoja_movimiento para acceder a su línea de tiempo.
  52. En el primer fotograma de la capa acciones, introduce el siguiente código:
    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 película y hemos definido las variables que utilizaremos en el resto de la película.

    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 hojasIzquierda hojasDerecha
    0   portada
    1 actualidad ciencia
    2 deportes espectaculos
    3 naturaleza politica
    4 ultima  


    Acude a esta tabla para entender los siguientes fragmentos de código.
  53. Como el código para cargar los archivos SWF va a ser repetitivo, lo simplificaremos creando la siguiente función:
    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;
    	}
    }
    Lo que hace esta función es utilizar un objeto Loader para cargar un archivo que indicamos en el parámetro archivo y mostrarlo en la página que le indiquemos en enPagina. Además, si archivo está vacío, oculta la página.
  54. Por último, en este mismo fotograma, cargamos la primera página para que no quede la página vacía. Lo hacemos llamando a la función que hemos definido:
    cargarSWF(pagina, hojasDerecha[vista]);
    Con esto haremos que en el símbolo pagina (que se encuentra sobre los símbolos pagina_izquierda y pagina_derecha) se cargue la primera hoja del periódico. Recuerda que la variable vista todavía tiene el valor 0.
  55. Selecciona el fotograma 2 y escribe lo siguiente en el Panel Acciones:
    with (parent) {
    	cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista+1]);
    }
    cargarSWF(pagina, hojasDerecha[vista]);
    Observa el uso de parent para acceder al símbolo pagina_derecha. Lo empleamos porque este símbolo no está dentro del actual (hoja_movimento, a la que nos referimos como this), si no en el nivel superior, en la película general, que es el elemento padre (parent).

    Por tanto, lo que hacemos es cargar el contenido de la hoja de periódico que se va a ver por detrás de hoja_movimiento en pagina_derecha cuando pasemos la página.

    También cargamos en el símbolo pagina la hoja actual.
  56. Selecciona el fotograma 21 y escribe lo siguiente en el Panel Acciones:
    cargarSWF(pagina, hojasIzquierda[vista+1]);
    vista++;
    En este punto el símbolo pagina se encuentra reducido tanto que es invisible. Aprovechamos y cambiamos el contenido con la siguiente hoja (que se encontrará almacenada en la posición 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 después de la línea stop();
    stop();
    with (parent) {
    	cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista]);
    }
    Aquí actualizamos el contenido del símbolo pagina_izquierda por si decidiésemos retroceder en el periódico. Así cuando le demos la vuelta a la página se verá el contenido correcto.
  58. El código en el resto de fotogramas claves es idéntico al que hemos visto (pues la acción es similar) pero disminuyendo la variable vista a cada pasada de página y permutando las matrices hojasIzquierda y hojasDerecha.

    El código en el fotograma 42 es:
    with (parent) {
      cargarSWF(this.parent.pagina_izquierda, hojasIzquierda[vista-1]);
    }
    
    cargarSWF(pagina, hojasIzquierda[vista]);
    El código en el fotograma 62 es:
    cargarSWF(pagina, hojasDerecha[vista-1]);
    vista--;
    Y el código en el fotograma 82 es:
    stop();
    with (parent){
    	cargarSWF(this.parent.pagina_derecha, hojasDerecha[vista]);
    }


Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.