En este Consejo rápido, le mostraré cómo configurar el Cursor nativo del sistema operativo a través de AS3, utilizando la nueva función en Flash Player 10.2.
Breve descripción
¿No trabajar en eso debería? Tendrás que agarrar Flash Player 10.2+?
En el SWF verás un botón de Inicio. Cuando haces clic en este botón, tu mouse se convierte en un punto de mira listo para hacer algún daño. Al hacer clic en el escenario, suena un disparo y se agrega un gráfico de agujero de bala al escenario en el punto en el que hizo clic con el mouse..
Compáralo con el método de la "vieja escuela" que discutimos ayer:
No tan suave como el nuevo Cursor nativo en FP10.2 eh?
Paso 1: Descarga y configuración del SDK de Flex
Antes de poder codificar el Cursor nativo, debe asegurarse de tener el SDK de Flex correcto. Para este tutorial utilizaremos el SDK "Hero" de vanguardia. Descargué el que tenía una fecha de compilación del 3 de febrero de 2011 (4.5.0.19786). Una vez que lo descargues necesitarás extraerlo; Extraje mi copia a mi disco C:.
Abra Flash Builder y vaya a Menú> Ventana> Preferencias. Seleccione "Flash Builder / Install SDK de Flex", luego haga clic en el botón "Agregar".
Vaya a la ubicación donde extrajo el SDK. Presione el botón "Aceptar" cuando haya terminado..
Volverá a la pantalla del SDK instalado. Marque la casilla junto al SDK recién instalado y presione "Aplicar". Ahora estamos listos para usar el nuevo SDK..
Paso 2: Configuración del proyecto Flex
En Flash Builder, vaya a Menú> Nuevo> Proyecto Flex. Establece los siguientes atributos
"Nombre del proyecto": NativeCursor
"Tipo de aplicación": Web (se ejecuta en Adobe Flash Player)
"Versión de Flex SDK": usar el SDK predeterminado (actualmente "Flex 4.5")
En el "Explorador de paquetes", haga clic derecho en la carpeta del proyecto y vaya a Nuevo> Carpeta.
Nombre esta carpeta "activos".
En la descarga del proyecto hay una carpeta fuente. En esta carpeta hay dos archivos .pngs y un archivo .mp3; copia estos archivos y pégalos en la carpeta de "activos" recién creada.
Paso 3: Configuración del botón y el contenedor de Sprite
En el NativeCursor.mxml dentro del s: Aplicación atributo cambiar el minwidth a "500" y la minHeight a "400". Agrega un anchura y altura atribúyalos y ajústelos a "500" y "400" respectivamente. Por último añadir un creationComplete = "Setup ()" atributo.El creaciónCompleta atributo establece una función para que se llame cuando la aplicación se carga por primera vez.
Puedes borrar el fx: Declaraciones bloquear; no lo necesitamos aqui.
Agregue el siguiente código al .mxml. los s: SpriteVisualElement se utiliza como un contenedor para un sprite en el que colocaremos los gráficos de los botones y los agujeros de bala:
Paso 4: importar las clases y configurar variables
Sobre el botón y SpriteVisualElement, agregue un fx: Script etiqueta.
Dentro de esta etiqueta, dentro de la ![CDATA [ sección, agregue el siguiente código:
importar flash.ui.Mouse; importar flash.ui.MouseCursor; importar flash.ui.MouseCursorData; importar mx.core.BitmapAsset; // The crosshair graphic [Embed (source = "asset / crosshair.png")] [Bindable] var CrossHair: Class; // El gráfico Bullet Hole [Incrustar (source = "asset / BulletHole.png")] [Bindable] var BulletHole: Class; // Gunshot [Embed (source = "asset / GunShot.mp3")] [Bindable] var GunShot: Class; // Contenedor para mantener el botón y la bala Agujeros var sprite: Sprite; // Se usa para probar si esta es la primera vez que el usuario dispara var firstShot: Boolean = true; // Crea un nuevo sonido de disparo var disparo: sonido = nuevo GunShot (); // Necesario para el sonido de disparo var soundChannel: SoundChannel = new SoundChannel;
Aquí solo importamos las clases que necesitamos y configuramos algunas variables.
Paso 5: Codificando el Preparar() función
los Preparar() La función se llama cuando la aplicación se carga por primera vez, de manera muy similar a una función de constructor. Aquí agregamos nuestro Sprite al contenedor, agregamos el botón a ese Sprite y agregamos un EventListener al botón.
los empezar juego() La función se llama cuando el usuario hace clic en el botón "Inicio".
Agregue el siguiente código
función privada startTheGame (e: MouseEvent): void // Quita el botón del escenario container.removeChild (startGame); // MouseCursorData nos permite establecer la apariencia del cursor del mouse var cursorData: MouseCursorData = new MouseCursorData (); // Vector para mantener el bitmapData de nuestra imagen (el CrossHair) var crossHairData: Vector. = nuevo vector.(); // Crear un nuevo CrossHair var crossHair: Bitmap = new CrossHair (); // Establecer el vector en el bitmapData de crossHair crossHairData [0] = crossHair.bitmapData; // Especifique el hotspot cursorData.hotSpot = new Point (0,0) // establezca el cursorData en el vector que contiene el crossHairs bitmapData cursorData.data = crossHairData; Mouse.registerCursor ("crossHairCursor", cursorData) Mouse.cursor = "crossHairCursor"; stage.addEventListener (MouseEvent.CLICK, fireShot);
Lo primero que hacemos es quitar el botón del escenario..
A continuación creamos una nueva. MouseCursorData () objeto. La clase MouseCursorData le permite definir la apariencia de un cursor de ratón "nativo", es decir, uno que reemplaza el cursor de su sistema operativo. Luego codificamos un Vector para mantener el BitmapData de nuestra imagen PNG "crossHair", que incrustamos anteriormente.
A continuación, configuramos el punto de acceso para nuestro cursorData. Piense en el punto de acceso como un punto de "registro"; define donde está la "punta" del cursor. También establecemos el cursorData.data propiedad a nuestro crossHairData Vector, que contiene el BitmapData de la imagen "crossHair".
Por último registramos el cursor con el cursorData objeto que creamos, y establecer el Cursor del ratón propiedad. También agregamos un MouseEvent.CLICK oyente del evento al escenario.
Paso 6: Codificando el disparo de fuego() función
los disparo de fuego()La función se llama cada vez que el usuario hace clic en el escenario..
Agregue el siguiente código debajo de empezar juego() función:
función privada fireShot (e: MouseEvent): void // Si han hecho clic una vez, lo hacemos si (firstShot == false) // crea una nueva imagen BulletHole var bulletHole: Bitmap = new BulletHole (); // Agregar Bullet hole container.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; // Reproducir el sonido soundChannel = gunshot.play (); firstShot = falso;
Primero verificamos si esta es la primera vez que el usuario ha hecho clic; Si no es la primera vez, reproducimos el sonido de disparo y agregamos el agujero de bala a la posición en el escenario donde el usuario hizo clic con el botón e.stageX ye.estageY. En realidad restamos 16 de la etapa.X y teatral por lo que la imagen se centrará con la cruz (la imagen es de 32x32px). El evento contiene información sobre sí mismo, puede ver lo que contiene utilizando trace (e.toString ())
Si no verificamos si esta fue la primera vez, entonces cuando el usuario hizo clic por primera vez en el botón de inicio, agregaría una cruz y reproducirá el sonido de disparo, y no queremos eso..
Conclusión
Una cosa que debe tener en cuenta sobre el uso de los cursores nativos es que la imagen no puede tener un tamaño superior a 32 x 32 px.
También puede usar un cursor animado con el cursor nativo agregando múltiples mapas de bits (uno por cuadro de animación) al vector de crossHairData (déjenos saber si desea una sugerencia rápida completa que explique esto).
Los cursores de mouse nativos son una adición bienvenida al Flash Player (¡si no hace mucho tiempo!)
Gracias por leer y espero que hayan encontrado útil este tutorial..
Share
Accentsconagua
