In questo suggerimento rapido ti mostrerò come impostare il cursore nativo del sistema operativo tramite AS3, utilizzando la nuova funzione di Flash Player 10.2.
Breve panoramica
Non dovrebbe funzionare? Dovrai prendere Flash Player 10.2+?
Nel file SWF vedrai un pulsante Start. Quando fai clic su questo pulsante, il tuo mouse diventa un mirino pronto a fare danni. Mentre clicchi sul palco, un colpo di fucile suona e un grafico di proiettile viene aggiunto al palco nel punto in cui hai fatto clic con il mouse.
Confrontalo con il metodo "vecchia scuola" di cui abbiamo discusso ieri:
Non è liscio come il nuovo Native Cursor in FP10.2 eh?
Passaggio 1: download e impostazione di Flex SDK
Prima di poter codificare il Cursore nativo, è necessario assicurarsi di disporre del Flex SDK corretto. Per questo tutorial utilizzeremo l'SDK "Hero" all'avanguardia. Ho scaricato quello con una data di costruzione di Thu 3 febbraio 2011 (4.5.0.19786). Una volta scaricato, dovrai estrarlo; Ho estratto la mia copia sul mio C: drive.
Apri Flash Builder e vai a Menu> Finestra> Preferenze. Scegli "Flash Builder / Installato Flex SDKS" quindi fai clic sul pulsante "Aggiungi".
Passare al percorso in cui è stato estratto l'SDK.Premere il pulsante "OK" al termine.
Verrai reindirizzato allo schermo dell'SDK installato. Seleziona la casella accanto all'SDK appena installato e premi "Applica". Siamo pronti per utilizzare il nuovo SDK.
Passaggio 2: impostazione del progetto Flex
In Flash Builder, vai a Menu> Nuovo> Progetto Flex. Imposta i seguenti attributi
"Nome progetto": NativeCursor
"Tipo di applicazione": Web (eseguito in Adobe Flash Player)
"Versione Flex SDK": Usa SDK predefinito (attualmente "Flex 4.5")
Nel "Package Explorer" fai clic destro sulla cartella del progetto e vai su Nuovo> Cartella.
Denominare questa cartella "assets".
Nel download del progetto c'è una cartella sorgente. In questa cartella ci sono due file .png e un file .mp3; copia questi file e incollali nella cartella "assets" appena creata.
Passaggio 3: impostazione del contenitore pulsante e sprite
In NativeCursor.mxml all'interno di s: Application attributo cambia il minWidth a "500" e il minHeight a "400". Aggiungere un larghezza e altezza attributo e impostarli rispettivamente su "500" e "400". Infine aggiungi un creationComplete = "Setup ()" attribute.The creationComplete attributo imposta una funzione da chiamare quando l'applicazione carica prima.
È possibile eliminare il fx: Dichiarazioni bloccare; non ne abbiamo bisogno qui.
Aggiungi il seguente codice a .mxml. Il s: SpriteVisualElement è usato come contenitore per uno sprite in cui metteremo il pulsante e la grafica del foro di proiettile:
Passaggio 4: importa le classi e imposta le variabili
Sopra il pulsante e SpriteVisualElement, aggiungere un fx: Script etichetta.
All'interno di questo tag, all'interno del ![CDATA [ sezione, aggiungi il seguente codice:
import flash.ui.Mouse; import flash.ui.MouseCursor; import flash.ui.MouseCursorData; import mx.core.BitmapAsset; // Il mirino grafico [Incorpora (source = "assets / crosshair.png")] [Bindable] var CrossHair: Class; // Il grafico Bullet Hole [Incorpora (source = "assets / BulletHole.png")] [Bindable] var BulletHole: Class; // Gunshot [Incorpora (source = "assets / GunShot.mp3")] [Bindable] var GunShot: Class; // Contenitore per tenere premuto il pulsante e il proiettile Holes var sprite: Sprite; // Utilizzato per verificare se questa è la prima volta che l'utente spara var firstShot: Boolean = true; // Crea un nuovo suono di arma da fuoco var gunshot: Sound = new GunShot (); // Necessario per il suono dello sparo var soundChannel: SoundChannel = new SoundChannel;
Qui abbiamo appena importato le classi di cui abbiamo bisogno e impostato alcune variabili.
Passaggio 5: codifica del Impostare() funzione
Il Impostare() la funzione viene chiamata quando l'applicazione viene caricata per la prima volta, proprio come una funzione di costruzione. Qui aggiungiamo il nostro Sprite al contenitore, aggiungiamo il pulsante a quello Sprite e aggiungiamo un EventListener al pulsante.
Passaggio 5: codifica del inizia il gioco() funzione
Il inizia il gioco() la funzione viene chiamata quando l'utente fa clic sul pulsante "Start".
Aggiungi il seguente codice
funzione privata startTheGame (e: MouseEvent): void // Rimuovi il pulsante dallo stage container.removeChild (startGame); // MouseCursorData ci consente di impostare l'aspetto del cursore del mouse var cursorData: MouseCursorData = new MouseCursorData (); // Vector per contenere i bitmapData della nostra immagine (il CrossHair) var crossHairData: Vector. = nuovo vettore.(); // Crea un nuovo CrossHair var crossHair: Bitmap = new CrossHair (); // Imposta il vettore sul bitmapData di crossHair crossHairData [0] = crossHair.bitmapData; // Specifica il cursore dell'hotspotData.hotSpot = new Point (0,0) // imposta il cursoreData sul vettore che contiene il crossHairs bitmapData cursorData.data = crossHairData; Mouse.registerCursor ("crossHairCursor", cursorData) Mouse.cursor = "crossHairCursor"; stage.addEventListener (MouseEvent.CLICK, FireShot);
La prima cosa che facciamo è rimuovere il pulsante dal palco.
Quindi creiamo un nuovo MouseCursorData () oggetto. La classe MouseCursorData consente di definire l'aspetto di un cursore del mouse "nativo", ad esempio quello che sostituisce il cursore del sistema operativo. Quindi codifichiamo un vettore per contenere i BitmapData della nostra immagine PNG "crossHair", che abbiamo incorporato in precedenza.
Quindi impostiamo l'hotspot per il nostro cursorData. Pensa all'hotspot come a un punto di "registrazione"; definisce dove si trova la "punta" del cursore. Abbiamo anche impostato il cursorData.data proprietà al nostro crossHairData Vector, che contiene i BitmapData dell'immagine "crossHair".
Infine registriamo il cursore con il cursorData oggetto che abbiamo creato e impostato il Mouse.cursor proprietà. Inoltre aggiungiamo a MouseEvent.CLICK ascoltatore di eventi sul palco.
Passaggio 6: codifica del FireShot () funzione
Il FireShot ()la funzione viene chiamata ogni volta che l'utente fa clic sul palco.
Aggiungi il seguente codice sotto il inizia il gioco() funzione:
funzione privata fireShot (e: MouseEvent): void // Se hanno fatto clic una volta, lo facciamo se (firstShot == false) // crea una nuova immagine BulletHole var bulletHole: Bitmap = new BulletHole (); // Aggiungi Bullet hole container.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; // Riproduci il suono soundChannel = gunshot.play (); firstShot = false;
Per prima cosa controlliamo se questa è la prima volta che l'utente fa clic; se non è la prima volta suoniamo il suono di arma da fuoco e aggiungiamo il proiettile alla posizione sul palco dove l'utente ha cliccato usando e.stageX ee.stageY. In realtà sottraiamo 16 dal stage.X e teatrale quindi l'immagine sarà centrata con il mirino (l'immagine è 32x32px). L'evento contiene informazioni su se stesso, puoi vedere cosa contiene usando trace (e.toString ())
Se non avessimo verificato se fosse la prima volta, quando l'utente ha fatto prima clic sul pulsante Start, aggiungeva un mirino e riproduceva il suono di arma da fuoco - e non lo vogliamo.
Conclusione
Una cosa che dovresti notare sull'uso di Native Cursors è che l'immagine non può essere più grande di 32 x 32px.
Puoi anche usare un cursore animato con il cursore nativo aggiungendo più bitmap (uno per fotogramma di animazione) al vettore crossHairData (facci sapere se desideri un suggerimento completo che spieghi questo).
I cursori nativi del mouse sono una gradita aggiunta a Flash Player (se non sono in ritardo!)
Grazie per la lettura e spero che tu abbia trovato utile questo tutorial.
Share
Accentsconagua
