Unidad 18. Ejercicio: Crear una película cargando archivos

Objetivo.

Crearemos una película parecida a esta:

Animación no reproducible

Ejercicio paso a paso.

Como siempre, utilizaremos el tipo de documento ActionScript 3.0.

Vamos a crear el elemento con forma de estrella. Para el resto, seguiremos los mismos pasos:

1. Haz clic en el botón Nuevo Símbolo al pie de la Biblioteca.
2. Dale un nombre, en nuestro ejemplo estrella, y selecciona Clip de película.
3. Dibuja la forma que quieras mostrar en el escenario.
4. Con ayuda del panel Alinear (Ctrl + K) coloca la forma centrada con respecto al punto de referencia (mira el ejemplo).
   
5. Haz clic en Escena 1 en la línea de tiempo para volver a la película principal.
6. Arrastra el símbolo que acabamos de crear y añádelo al Escenario.
7. Dale un nombre de instancia significativo al cual nos referiremos más tarde, en nuestro ejemplo hemos usado estrella.
8. Crea una nueva capa y añade la siguiente línea en el Panel Acciones para el fotograma 1 de la película principal:

   estrella.addEventListener(MouseEvent.MOUSE_DOWN,arrastrar);
   function arrastrar(event):void {  //Nombre de  la nuestra función
   	estrella.startDrag();         //Nombre del símbolo
   }
   
   estrella.addEventListener(MouseEvent.MOUSE_UP,soltar);
   function soltar(event):void {  //Nombre de  la nuestra función
   	estrella.stopDrag();         //Nombre del símbolo
   }

   Este código hace que al pulsar el ratón, se comience a arrastrar el elemento, y al soltarlo deje de hacerlo.
9. Guarda el documento con el nombre estrella, publica la película desde Archivo → Publicar, y ciérralo.
10. Repite estos pasos para cada una de las formas que quieras añadir.

Ahora pasaremos a crear la película principal.

1. Abre un documento en blanco.
2. Dibuja un rectángulo y dale las dimensiones del documento utilizando el botón del Panel Alinear. Puedes hacer que tome un mapa de bits como fondo seleccionando Mapa de bits en el desplegable Tipo del Panel Color.
3. Ahora añadiremos los botones que utilizaremos. Nosotros hemos importado la biblioteca de los elementos anteriores para utilizar las mismas formas. Para ello haz clic en Archivo → Importar → Abrir biblioteca externa.
4. Seleccionar los archivos que quieras abrir y arrastra el símbolo al Escenario. En nuestro caso, comenzamos por estrella.fla.
5. Redimensiónalo con la herramienta Transformación Libre .
6. En el panel de Propiedades, le damos el nombre a la instancia. En nuestro ejemplo la hemos llamado btn_mostrarEstrella por ser el botón que mostrará la estrella.
7. También en el panel propiedades, especificamos el tipo Botón. Lo hacemos únicamente para que el cursor cambie a la mano al pasar sobre él.

   

8. Arrastra otro símbolo y colócalo al pie del Escenario (este será el que hará que rote el elemento).
9. Redimensiónalo si lo crees necesario, dale un nombre de instancia y conviértelo a botón. Nosotros lo hemos llamado btn_rotarEstrella.
10. Repite estos pasos para cada una de las formas que hayas creado, utilizando los nombres de instancia apropiados.


11. Una vez ya estén todos los botones en el Escenario pasaremos a escribir el código asociado. Para ver cómo hacerlo, vamos a cargarlo los archivos publicados (swf) desde el código.
12. Crea una nueva capa pulsando el botón Insertar Capa .
13. En el fotograma 1 de la nueva capa escribe lo siguiente en el Panel Acciones, que afectará al símbolo estrella:

    var estrella:Loader = new Loader();//Utilizamos un Loader para cargar archivos
    estrella.load(new URLRequest("estrella.swf"));//Indicamos la ruta del archivo
    var estrellaMC:MovieClip; //Un objeto MovieClip que será la estrella
    estrella.contentLoaderInfo.addEventListener(Event.COMPLETE, insertarEstrella);
    //Utilizamos este evento para asegurarnos de que se ha cargado completamente
    //antes de agregarlo a la escena
    function insertarEstrella(e:Event):void {
    estrellaMC = e.target.content;	//Almacenamos el elemento que produce el evento
                         //en nuestro movie clip
    estrellaMC.visible = false; //Lo ocultamos para que no se vea por defecto
    estrellaMC.x=100;
    estrellaMC.y=80; //Le damos la posición inicial que queramos
    addChild(estrellaMC) as MovieClip;//Añadimos el archivo cargado a la escena
    	//Aún no se verá porque visible=false
    }
    
    btn_mostrarEstrella.addEventListener(MouseEvent.MOUSE_UP, mostrarOcultarEstrella);
    //Detectamos cuando se pulsa el botón para mostrar/ocultar el elemento
    function mostrarOcultarEstrella(e:Event):void {
    	estrellaMC.visible=! estrellaMC.visible;
    	//Al negar una propiedad booleana como ésta, la invertimos.
    	//por lo que cada al pulsar el botón se mostrará si está oculta o
    	//o se ocultará si está visible
    }

14. Guarda el proyecto y pruébalo (Control → Probar película) para ver que funciona.
15. Ahora escribiremos el código necesario para que al pulsar el otro botón (btn_rotarEstrella) el elemento gire:

    btn_rotarEstrella.addEventListener(MouseEvent.CLICK, girarEstrella);
    function girarEstrella(event):void {
    	//Para que gire, aumentamos la propiedad rotation
    	estrellaMC.getChildAt(0).rotation+=15;
    	//Utilizamos getChildAt porque en nuestro caso no queremos que rote todo
    	//el SWF, sólo el elemento que pusimos dentro como un símbolo, que al ser
    	//el único hijo, está en la posición 0
    }

    Como puedes ver, utilizamos la propiedad rotation, para referenciarnos al objeto en cuestión sólo es necesario escribir delante de la propiedad la variable que lo contiene. Definimos la función que al hacer clic girará nuestro objeto.
16. Repite estos pasos para cada uno de los botones. Recuerda escribir bien los nombres de instancia y los nombre de funciones.
17. Una vez terminado prueba la película desde Control → Probar película.