Share
Una de las mecánicas de juego más simples es permitir que el jugador encuentre un objeto oculto. Los juegos basados en esto toman muchas formas: ¿Dónde está Waldo, Peek-A-Boo, Spot the Difference, Hide and Seek y, por supuesto, Objeto Oculto? En este tutorial Premium, te mostraré dos métodos para ocultar una escena para que el jugador pueda descubrirla más tarde.
En el primer SWF, haz clic como loco para hacer estallar todos los globos. De acuerdo, no hay muchos desafíos, pero imagínate hacerlo contra el reloj o con más globos apareciendo todo el tiempo..
En el segundo SWF, limpie la suciedad deslizando el mouse sobre la imagen. Este mecánico se usó en Window Washy, uno de los primeros juegos para PS2 EyeToy, por no mencionar en innumerables rasca y gana.!
Necesitamos crear los globos antes de que podamos reventarlos. Usaré Flash Pro CS3 para hacer esto; Si no tiene Flash Pro, puede dibujar por su cuenta usando el método que use normalmente, o usar el SWC del paquete de descarga y repasar todos los pasos de este tutorial que explica cómo dibujar. Incluiré instrucciones para usuarios de otros editores cuando sea relevante..
Abra Flash Pro y cree un nuevo archivo Flash (ActionScript 3.0). Voy a basar el diseño de mis globos en este tutorial de Illustrator de Vectortuts + - pero usando las herramientas de Flash, obviamente.
Seleccione la herramienta Lápiz y póngala en modo Suave, con un trazo negro de 1px. He utilizado el valor de suavizado predeterminado de 50.
Ahora, dibuja una forma de globo en bruto. No te preocupes por hacerlo perfecto; Lo ajustaremos en un segundo. Aquí está el mío:
Hmm ¿Ves esas esquinas afiladas? Suavizarlos. Use la herramienta Selección para seleccionar esa sección de la línea, luego haga clic en el botón Suavizar unas cuantas veces.
Estoy seguro de que hay una mejor manera en que los profesionales lo utilizan, pero eso generalmente funciona para mí. Modifique la forma del globo como desee, recuerde que puede hacer clic y arrastrar cualquier punto de la línea para estirarlo..
Esto es lo que he terminado con:
Ahora agregue el nudo. Como dice Jesse en el tutorial de Vectortuts + mencionado anteriormente, "es solo un círculo simple con una forma de triángulo redondeado en forma de esquina debajo".
Bien, ahora llena el globo con un color pastel agradable (elegí # dae8b3, que es nuevamente del tutorial Vectortuts +) y borra todas las líneas.
¡No está mal! Si desea agregar un brillo, use la herramienta de línea, con un ancho de trazo más grueso (he usado 3px) y un color blanco, para dibujar una línea recta a través de una "esquina", luego use la herramienta Selección para curvarla..
Seleccione esta línea de brillo, luego haga clic en Modificar | Forma | Convertir líneas a rellenos -- De esta manera, si cambia el tamaño del globo, el brillo se mantendrá del mismo tamaño proporcional al resto del globo..
Para interactuar con un globo usando ActionScript, necesitamos convertirlo en un símbolo. Seleccione su arte, luego haga clic en Modificar | Convertir a símbolo. Haz que sea un símbolo de clip de película llamado Globo, y exportarlo para ActionScript utilizando el mismo nombre de clase.
Ignora la advertencia de que no hay una clase con el mismo nombre, si aparece después de hacer clic en Aceptar.
Puede encontrar un FLA y SWC de los activos utilizados hasta ahora en la carpeta BalloonsStep2 de la descarga de origen.
Elija un telón de fondo para su flotar en frente de. Escogí este fondo de pantalla (crédito LGLab y envato) y lo recorté ligeramente:
Si está utilizando Flash Professional, agregue una nueva capa al escenario e importe su imagen. De lo contrario, incruste el gráfico y agréguelo al final de la lista de visualización utilizando el método que prefiera. Tal vez desee cambiar el tamaño de su escenario para que se ajuste a la imagen, como lo he hecho.
A continuación haremos desaparecer este globo solitario cuando se haga clic..
Tiempo para algun codigo!
Cree una clase, llamada Main.as, en el mismo directorio que su FLA, y vincúlela a la FLA como clase de documento; consulte aquí para obtener más información. (Si no estás usando Flash Pro, asumiré que sabes cómo hacer el equivalente en tu editor; ya debes haber creado una clase principal para poder acceder al escenario).
paquete import flash.display.MovieClip; clase pública principal extiende MovieClip función pública principal ()
Necesitamos acceder al globo desde la clase de documento, y así debemos darle un nombre de clase.
Si está utilizando Flash Professional, seleccione el globo en el escenario y escriba El globo en el cuadro en el panel Propiedades. Luego, haga clic en Archivo | Configuración de publicación, abre el Destello pestaña, haga clic en Ajustes? junto al cuadro desplegable de la versión de ActionScript, y desmarque la casilla "Declarar instancias de escenario automáticamente". (Esto no es estrictamente necesario, pero permite que el código sea el mismo independientemente de si está utilizando Flash Pro o algún otro editor).
Luego, modifique su clase de documento de esta manera:
paquete import flash.display.MovieClip; La clase pública Main extiende MovieClip public var theBalloon: Balloon; Función pública principal ()
Si está utilizando otro editor, agregue una instancia de la clase de globo a la lista de visualización en cualquier coordenada que desee (siempre que esté en frente del fondo), dándole un nombre de instancia de El globo.
Usaremos un agente de escucha MouseEvent para detectar cuándo se hace clic en el globo y una función de controlador para eliminarlo:
paquete import flash.display.MovieClip; import flash.events.MouseEvent; La clase pública Main extiende MovieClip public var theBalloon: Balloon; función pública Main () theBalloon.addEventListener (MouseEvent.CLICK, onClickBalloon); función privada onClickBalloon (a_event: MouseEvent): void this.removeChild (theBalloon); theBalloon.removeEventListener (MouseEvent.CLICK, onClickBalloon);
Cosas simples. Pruébalo
Nada alucinante, pero al menos funciona..
No hay mucho desafío en esto, ¿verdad? Arrastre algunos globos más al escenario, en la misma capa que el original:
¿Cómo vamos a acceder a estos en código? Supongo que podríamos darles todos los nombres de instancia como greenBalloon1, greenBalloon2, y así sucesivamente, y agregar un oyente MouseEvent a cada uno? ugh Estamos codificando, podemos automatizar esto..
La clase de documento es un Clip de película, lo que significa que es un DisplayObjectContainer (hurra por herencia), lo que significa que tiene una función getChildAt () y una propiedad numChildren, lo que significa que podemos usar un para bucle para iterar a través de todos los objetos en el escenario. Lo probaré. Modifique su función principal () contsructor así:
función pública Main () for (var i: int = 0; i < this.numChildren; i++) trace(getChildAt(i)); theBalloon.addEventListener(MouseEvent.CLICK, onClickBalloon);
(Puede dejar el código para eliminar el globo original). Ejecute el SWF y verifique su panel de Salida:
[Forma del objeto] [objeto Globo] [objeto Globo] [objeto Globo] [objeto Globo] [objeto Globo] [objeto Globo] [objeto Globo] [objeto Globo] [objeto Globo] [objeto Globo]
El código devuelve el tipo de cada elemento secundario de Main, es decir, cada objeto en la lista de visualización, desde la parte inferior (getChildAt (0)) hasta arriba (getChildAt (10)). Como no exporté la imagen de fondo para ActionScript, todo lo que Flash sabe es que es una especie de Forma.
Necesitamos agregar el onClickBalloon () Escucha a cada uno de los globos, pero no al fondo. Afortunadamente, hay una palabra clave que nos permite verificar la clase de un objeto: es. Podemos usarlo así:
función pública Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon);
(Tenga en cuenta que he eliminado la línea que agrega específicamente el detector de eventos a la El globo ejemplo.)
Probar el SWF:
Hmm No del todo bien, ¿verdad??
No importa en qué globo haga clic, se eliminará el globo original. La causa de esto es fácil de detectar:
función pública Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); private function onClickBalloon(a_event:MouseEvent):void this.removeChild(theBalloon); theBalloon.removeEventListener(MouseEvent.CLICK, onClickBalloon);
En la línea 16, estamos agregando el detector de eventos a cada globo; Sin embargo, en las líneas 23 y 24, estamos eliminando específicamente el El globo ejemplo. En la función de controlador de eventos, debemos eliminar el globo en el que se hizo clic, en su lugar. Esto se llama objetivo del evento, y se puede acceder a través de la a_event.target propiedad. Entonces, esperas que esto funcione:
función privada onClickBalloon (a_event: MouseEvent): void this.removeChild (a_event.target); a_event.target.removeEventListener (MouseEvent.CLICK, onClickBalloon);
? pero no lo hace; obtenemos un error:
1118: Coacción implícita de un valor con tipo estático Objeto a un tipo posiblemente no relacionado flash.display: DisplayObject.
Ver, Flash no sabe qué clase de objeto es el objetivo del evento, por lo que no está seguro de que pueda ser removeChild ()-Ed o que puede tener algún oyente de eventos adjunto. Necesitamos decirle a Flash que trate el objetivo del evento. como una instancia de la clase de globo, así:
función privada onClickBalloon (a_event: MouseEvent): void this.removeChild ((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
Pruébalo ahora:
¡Genial! Ese es un hito decente; Usted puede encontrar todos los archivos creados hasta ahora en el Globospaso 8 carpeta en la fuente de descarga.
Reto: Intente contar cuántos globos hay cuando se carga el SWF por primera vez, contar cuántos se eliminan al hacer clic y mostrar un texto de felicitación o reproducir un sonido de victoria cuando todos los globos hayan desaparecido..
A continuación, hagamos estallar los globos con una pequeña animación cuando se hace clic.
No estaba seguro de cómo animar esto, así que miré un video a cámara lenta de un globo real que se está explotando:
Desafortunadamente, esto solo me parece falso (lo sé), así que intenté algo más.
Edita tu globo y agrega un nuevo marco a la línea de tiempo. En este marco, dibuja un gran lío puntiagudo con la herramienta de lápiz:
Elimine la línea de brillo (rellénela con el color del globo) y dibuje algunas líneas desde el lío puntiagudo hasta el borde del globo:
Haga clic en cada sección, conviértalo en un grupo (CTRL-G), sepárelo ligeramente de los demás y elimine las líneas:
Cree un nuevo fotograma clave y modifique los bits separados utilizando la herramienta Transformación libre y estirando algunos de los bordes de los rellenos. He activado el Desollado de cebolla aquí para que pueda ver cómo se comparan mis secciones con sus posiciones en el marco antes:
Descubrí que es útil mantener las piezas del globo dentro de la misma área que el globo antes, pero puedes experimentar con esto. A continuación, cree otro fotograma clave y haga que todos los segmentos sean aún más pequeños:
He hecho que los segmentos caigan un poco aquí, como si fuera debido a la gravedad. Ahora agregue un nuevo fotograma clave, totalmente vacío. Pruebe su animación (es posible que desee ajustar la velocidad de fotogramas de su película; fui a 24 fps).
Increíble. Por supuesto, si ejecuta su SWF ahora, todos los globos seguirán apareciendo una y otra vez:
? así que abra el panel Acciones en el primer fotograma de la línea de tiempo del globo y agregue este código:
detener();
La animación del globo se incluye en el SWC y FLA dentro de la carpeta BalloonsStep9 de la descarga de la fuente.
Para hacer un globo emergente solo cuando se hace clic, solo tenemos que hacer la animación jugar():
función privada onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); this.removeChild ((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
? er, excepto que no funcionará, porque el globo se eliminará instantáneamente de la lista de visualización, ¿no es así? Solo comente el removeChild () Línea por ahora y asegúrese de que el SWF funciona:
Oh, cierto, necesitamos detener() La animación una vez hecha. Abra el fotograma clave en blanco en la línea de tiempo del globo y agregue esto:
detener();
En realidad, mientras estamos aquí, podríamos resolver nuestro removeChild () problema. Si hacemos el envío del globo un COMPLETAR evento cuando su animación de ráfaga ha terminado, podríamos escuchar este evento en Main.as, y retire el globo de la lista de visualización una vez que lo escuchemos. Agregue esta línea a las acciones del fotograma clave en blanco:
detener(); dispatchEvent (nuevo evento (Event.COMPLETE));
(Todo esto está en el BalloonsStep10 SWC y FLA, no te preocupes.) Ahora, en Main.as, modifica tu onClickBalloon () función de controlador:
función privada onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); //this.removeChild((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target as Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
? crear un onBalloonBurst () Función de controlador, que se ejecutará una vez que la animación haya terminado:
función privada onBalloonBurst (a_event: Event): void this.removeChild (a_event.target as Balloon);
? e importar la clase de evento:
paquete import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent;
Pruébalo
Luciendo bien hasta ahora.
Reto: ¿Qué tal animar los globos para que se muevan un poco antes de hacer clic en ellos??
Encontré un efecto de sonido perfecto para esto en AudioJungle: Balloon Pop. No puedo incluirlo en la descarga de origen, pero puedes comprarlo por solo un dólar.
Si lo desea, compre este efecto o busque otro en línea y hágalo funcionar cuando se haga estallar un globo. Para hacer esto, primero agréguelo a su biblioteca y expórtelo para ActionScript (o intégrelo en su proyecto, para usuarios que no sean de Flash Pro), con un nombre de clase de PopSWF.
Entonces, en Main.as, Crea una instancia privada del sonido:
La clase pública Main extiende MovieClip public var theBalloon: Balloon; private var popSfx: PopSFX = new PopSFX ();
? y jugar cuando sea necesario:
función privada onClickBalloon (a_event: MouseEvent): void popSfx.play (); (a_event.target as Balloon) .play (); //this.removeChild((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target as Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
Pruébalo:
Vamos a llenar la pantalla con múltiples colores de globos. Duplica el símbolo del globo en la biblioteca y llámalo BlueBalloon, con un Clase de BlueBalloon. Manténgalo idéntico al globo original, pero con un relleno azul (he usado # c1e6ee, nuevamente de ese tutorial de Vectortuts +).
Arrastra algunas instancias al escenario. Recuerde que puede eliminar algunos de los globos verdes y puede cambiar el tamaño de cualquiera de los globos si lo desea:
Si pruebas el SWF, los globos azules todavía no hacen nada:
Los globos azules no hacen nada porque todo nuestro código está escrito para tratar con el Globo clase, y no la BlueBalloon clase. Podríamos duplicar todo nuestro código para tratar con diferentes colores de globo, pero eso es complicado, y sería un dolor cambiarlo más adelante si quisiéramos.
En su lugar, hagamos que el globo azul y el globo verde usen la misma clase, usando el poder de la herencia. Seleccione su símbolo de globo original en la biblioteca y cambie su nombre a GreenBalloon; cambiar la clase a GreenBalloon también.
Nuestro objetivo es dar a ambos globos una Clase Base de Globo; esto significará que cada globo verde se ve como un ejemplo de Globo así como de GreenBalloon, y cada globo azul es visto como una instancia de Globo tanto como BlueBalloon -- Nuestro código, que está escrito teniendo en cuenta la clase Balloon, funcionará bien.
Desafortunadamente, aunque podemos establecer la Clase de un símbolo con el nombre de una clase que no existe, no podemos hacer lo mismo con la Clase Base. Debemos crear un archivo de clase que los dos globos pueden heredar..
Crear un nuevo archivo de clase, Globo.as, en el mismo directorio que su FLA, e ingrese este código:
paquete import flash.display.MovieClip; la clase pública Balloon extiende MovieClip public function Balloon ()
Eso es todo lo que necesitas. Debe extender Clip de película porque los dos globos usan animaciones; si extendemos digamos, Duende en su lugar, entonces los dos símbolos de globo no podrían usar una línea de tiempo, y serían imágenes estáticas.
Establezca la Clase base de cada uno de los símbolos de globo en la Biblioteca para Globo, y ejecute el SWF:
¡Genial! Ahora será fácil agregar cualquier otro color de globo. Solo para probarlo, vamos a añadir los rojos y los amarillos..
Este es un paso fácil. Duplique el símbolo del globo verde dos veces más y vuelva a colorear uno rojo pastel (# f2daea), con un Nombre y una Clase de Globo rojo, y el otro amarillo pastel (# f6f5b4), con un Nombre y una Clase de YellowBalloon. En cada caso, establezca la Clase base en Globo. Añadir un montón de cada uno al escenario..
Ejecutar el SWF; Los nuevos globos deberían funcionar sin problemas..
Si algún color se niega a aparecer, asegúrese de que la Clase base del símbolo esté configurada en Globo.
Estamos condicionados a pensar que los objetos de Flash solo se pueden hacer clic si el cursor del mouse se convierte en una mano cuando nos movemos sobre ellos. Para que aparezca esta mano, solo tenemos que configurar el globo. buttonMode propiedad a cierto.
El lugar más fácil para hacer esto es en el para bucle donde añadimos el HACER CLIC escucha del evento a cada globo. Sin embargo, todo lo que Flash sabe sobre los globos en esta etapa es que son instancias de DisplayObject, ya que eso es lo que getChildAt () regresa - pero buttonMode Es una propiedad de la clase Sprite. Esto significa que necesitamos usar el como palabra clave de nuevo. Podríamos escribir:
función pública Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); (getChildAt(i) as Sprite).buttonMode = true;
? y luego importar el flash.display.Sprite clase, pero en aras de la simplicidad voy a utilizar el Globo clase en su lugar:
función pública Main () for (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); (getChildAt(i) as Balloon).buttonMode = true;
Ejecutar el SWF:
Reto: Para seguir con el tema de hacer estallar globos, puede cambiar el cursor del mouse a una aguja o un alfiler. Para obtener ayuda, eche un vistazo a este Consejo rápido para hacerlo haciendo un clip de película siguiendo el mouse, o este al cambiar el cursor nativo del sistema operativo.
¡Felicidades, has terminado esta sección del tutorial! Si has seguido todos los desafíos hasta el momento, deberías estar bien encaminado hacia un minijuego pequeño y ordenado..
Vamos a correr a través de esto. Si está utilizando Flash Pro:
Si está utilizando un editor diferente, simplemente cree un nuevo proyecto AS3 utilizando el método que normalmente usaría. Llama al proyecto Limpieza de ventanas y la clase principal Main.as, Para que este tutorial sea más fácil de seguir..
En cualquier caso, su clase principal debería verse así:
paquete import flash.display.MovieClip; clase pública principal extiende MovieClip función pública principal ()
Algunas versiones de Flash y algunos editores pueden generar un código ligeramente diferente para esta clase; eso está bien, solo ve con sus valores por defecto. Si tu editor no genera automáticamente ningún código, copia el mío desde arriba.
Para empezar, vamos a crear un sólido rectángulo de color y limpiarlo; Pasaremos a imágenes más complicadas más tarde..
En su clase principal, cree un nuevo Sprite para contener este rectángulo "sucio":
paquete import flash.display.MovieClip; importar flash.display.Sprite; La clase pública Main extiende MovieClip public var dirt: Sprite = new Sprite (); Función pública principal ()
A continuación, utilice el Sprite gráfico Propiedad para crear un rectángulo de color del tamaño del escenario. Podría codificar los valores, si lo desea (mi FLA es 500x400px), o configurar los valores dinámicamente como lo he hecho aquí:
paquete import flash.display.MovieClip; importar flash.display.Sprite; La clase pública Main extiende MovieClip public var dirt: Sprite = new Sprite (); función pública Main () dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Sin embargo, esto no será visible a menos que escojamos un color de relleno. He elegido # 440000, un rojo intenso..
función pública Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Oh, necesitamos añadir el suciedad Sprite a la lista de visualización:
función pública Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (dirt);
Ejecute su SWF. Si no ve un color sólido, tal vez su FLA no esté conectada correctamente a su clase de documento.
En el tutorial de Carlos Yáñez, Crear una aplicación de dibujo básica con Flash, nos mostró cómo crear la apariencia de que los colores de un lienzo habían sido borrados por el cursor del mouse, simplemente dibujando una línea blanca gruesa que sigue al mouse. Usaremos el mismo truco aquí.
Primero, debemos crear un oyente MouseEvent para rastrear el mouse a medida que se mueve, y una función de controlador para cuando lo hace:
paquete import flash.display.MovieClip; importar flash.display.Sprite; import flash.events.MouseEvent; La clase pública Main extiende MovieClip public var dirt: Sprite = new Sprite (); función pública Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (dirt); dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); función privada enMouseMoveOverDirt (a_event: MouseEvent): void
A continuación, debemos dibujar una línea desde la posición anterior del ratón hasta su posición actual:
función privada onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY);
No olvides el lineStyle () llamada; la primera línea es el grosor de la línea (en píxeles); el segundo define su color (#ffffff es blanco).
Pruébalo:
¿Wow eso es? Un efecto interesante, ¡pero no para lo que íbamos! El problema aquí es que lineTo () dibuja una línea desde el suciedad objeto gráfico posición actual del dibujo a cualquier punto que especifique (las coordenadas del mouse, en este caso). Sin embargo, no estamos moviendo la posición actual del dibujo, por lo que se mantiene en (0, 0), La esquina superior izquierda del escenario. Necesitamos la posición de dibujo para seguir al ratón, también; podemos hacer esto con el mover a() método:
función privada onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Prueba el SWF ahora:
Bastante bien, excepto que el punto inicial se establece en (0, 0), lo que significa que la primera línea dibujada siempre saltará desde la esquina superior izquierda. Además, si mueve el mouse fuera del SWF en un lugar y en el SWF en otro, la línea vuelve a saltar..
Para resolver ambos problemas, debemos:
Aquí está el código para eso. Si no sigue completamente la lógica, intente comentar ciertas líneas o agregar las suyas para ver cómo cambia el efecto final..
paquete import flash.display.MovieClip; importar flash.display.Sprite; import flash.events.MouseEvent; La clase pública Main extiende MovieClip public var dirt: Sprite = new Sprite (); función pública Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (dirt); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt); función privada enMouseLeaveDirt (a_event: MouseEvent): void dirt.removeEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); función privada onMouseReturnToDirt (a_event: MouseEvent): void dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); dirt.graphics.moveTo (mouseX, mouseY); private function onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Ejecute su SWF:
¡Bastante bueno! No es perfecto, pero demuestra lo que queremos hacer lo suficientemente bien.
Nuestro objetivo final es borrar un primer plano para revelar un fondo. En el momento, parece que estamos borrando un primer plano rojo para revelar un fondo blanco; Ahora vamos a añadir un fondo más interesante.
He elegido esta imagen de la puerta principal de la oficina de Envato de Flickr (crédito para envato), recortado para adaptarse a mi FLA:
Si está utilizando Flash Pro, cree un nuevo símbolo de clip de película, arrastre su imagen elegida (o cree la suya propia con las herramientas de dibujo) y exporte el símbolo para ActionScript con un nombre de clase de Fondo. Si está utilizando otro editor, intégrelo en su proyecto (también con el nombre Fondo) utilizando su método habitual. He incluido esta imagen en WindowWashing.swc dentro de la fuente de descarga.
En lugar de arrastrarlo al escenario, use el código para agregarlo a la lista de visualización debajo de la suciedad:
paquete import flash.display.MovieClip; importar flash.display.Sprite; import flash.events.MouseEvent; La clase pública Main extiende MovieClip public var dirt: Sprite = new Sprite (); Fondo de var público: Fondo = fondo nuevo (); función pública Main () this.addChild (background); dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (dirt); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt);
Así que ahora el fondo está debajo de la suciedad, pero podemos verlo?
Er, no.
La forma más fácil de verificar que el fondo es en realidad es reducir el alfa del primer plano para que sea
Accentsconagua