Sfat rapid Setarea unui cursor nativ utilizând Flash Player 10.2

În acest sfat rapid vă voi arăta cum să setați Cursorul Nativ al sistemului de operare prin AS3, utilizând noua caracteristică din Flash Player 10.2.


Prezentare scurta

Nu ar trebui să lucreze la asta? Va trebui să apucați Flash Player 10.2+?

În SWF veți vedea un buton de pornire. Când faceți clic pe acest buton, mouse-ul dvs. devine un crucișor gata de a face unele daune. Pe măsură ce faceți clic pe scenă, se aude un foc de armă și o grafică cu gloanțe se adaugă la scenă în punctul în care ați făcut clic cu mouse-ul.

Comparați-l cu metoda "vechei școli" pe care am discutat-o ​​ieri:

Nu este la fel de netedă ca noul Cursor Nativ în FP10.2 eh?


Pasul 1: Descărcarea și configurarea SDK-ului Flex

Înainte de a putea codifica Cursorul Nativ, trebuie să vă asigurați că aveți setul SDK corect. Pentru acest tutorial vom folosi tehnologia "Hero" SDK. Am descarcat unul cu data construirii de pe 3 Feb 2011 (4.5.0.19786). Odată ce o descărcați, va trebui să o extrageți; Am extras copia mea la unitatea C:.

Deschideți Flash Builder și accesați Meniu> Fereastră> Preferințe. Alegeți "Flash Builder / Instalat Flex SDKS" apoi faceți clic pe butonul "Adăugați".

Căutați în locația unde ați extras SDK.Apăsați butonul "OK" când ați terminat.

Veți reveni la ecranul SDK instalat.Verificați caseta de lângă SDK-ul nou instalat și apăsați pe "Aplicați". Acum suntem pregătiți să folosim noul SDK.


Pasul 2: Configurarea proiectului Flex

În Flash Builder, mergeți la Meniu> Nou> Proiect Flex. Setați următoarele atribute

  • "Numele proiectului": NativeCursor
  • "Tip de aplicație": Web (rulează în Adobe Flash Player)
  • "Versiunea Flex SDK": Utilizați SDK implicit (în prezent "Flex 4.5")

În "Pachetul Explorer" faceți clic dreapta pe dosarul proiect și mergeți la New> Folder.

Denumiți acest dosar "active".

În descărcarea proiectului există un director sursă. În acest dosar există două fișiere .png și un fișier .mp3; copiați aceste fișiere și inserați-le în noul dosar "assets".


Pasul 3: Configurarea butonului și a containerului Sprite

În NativeCursor.mxml în cadrul s: Aplicare atributul schimba minWidth la "500" și la minHeight la "400". Adauga o lăţime și înălţime atribuiți și setați-le la "500" și, respectiv, "400". În cele din urmă, adăugați a creationComplete = "Setup ()" attribute.The creationComplete atributul stabilește o funcție care trebuie apelată atunci când aplicația este încărcată mai întâi.

 

Puteți șterge fx: Declarații bloc; nu avem nevoie de ea aici.

Adăugați următorul cod în .mxml. s: SpriteVisualElement este folosit ca un container pentru un sprite în care vom plasa butonul și grafica glonțului:

  

Pasul 4: Importați clasele și setați variabilele

Deasupra Button și SpriteVisualElement, adăugați un fx: Script etichetă.

În interiorul acestei etichete, în interiorul ![CDATA [ secțiune, adăugați următorul cod:

 import flash.ui.Mouse; import flash.ui.MouseCursor; import flash.ui.MouseCursorData; import mx.core.BitmapAsset; // Grafica încrucișată [Embed (sursă = "active / crosshair.png")] [Bindable] var CrossHair: Clasă; // Grafica pentru gloanțe [Embed (sursă = "active / BulletHole.png")] [Bindable] var BulletHole: Class; // Gunshot [Embed (sursă = "active / GunShot.mp3")] [Bindable] var GunShot: Clasă; // Container pentru a ține butonul și bullet Holes var sprite: Sprite; // Folosit pentru a testa dacă acesta este prima dată când utilizatorul lovi primul varShot: Boolean = true; // Creează un nou foc de armă cu focuri de armă: sunet = nou GunShot (); // Necesar pentru sunetul cu focuri de armă var soundChannel: SoundChannel = nou SoundChannel;

Aici am importat clasele de care avem nevoie și am creat câteva variabile.


Pasul 5: Codarea codului Înființat() funcţie

Înființat() funcția se numește atunci când aplicația se încarcă mai întâi, la fel ca o funcție a constructorului. Aici adăugăm Sprite-ul nostru în container, adăugăm butonul la Sprite și adăugăm un buton EventListener la buton.

 sprite = Sprite nou (); container.addChild (sprite); container.addChild (startGame); startGame.addEventListener (MouseEvent.CLICK, startTheGame);

Pasul 5: Codarea codului incepe jocul() funcţie

incepe jocul() este apelată când utilizatorul face clic pe butonul "Start".

Adăugați următorul cod

 funcția privată startTheGame (e: MouseEvent): void // Scoateți butonul din containerul stage.removeChild (startGame); // MouseCursorData ne permite să setăm aspectul mouse-ului Cursor var cursorData: MouseCursorData = noi MouseCursorData (); // Vector pentru a ține datele bitmap a imaginii noastre (CrossHair) var crossHairData: Vector. = Vector nou.(); // Creați o nouă CrossHair var crossHair: Bitmap = CrossHair nou (); // Setați vectorul la data bitmapData CrossHair crossHairData [0] = crossHair.bitmapData; // Specificați cursorul hotspotData.hotSpot = punct nou (0,0) // setați data cursorului la vectorul care deține cursorul bitmapData crossHairsData.data = crossHairData; Mouse.registerCursor ("CrossHairCursor", cursorData) Mouse.cursor = "CrossHairCursor"; stage.addEventListener (MouseEvent.CLICK, FireShot); 

Primul lucru pe care îl facem este să scoatem butonul din scenă.

Apoi vom crea un nou MouseCursorData () obiect. Clasa MouseCursorData vă permite să definiți aspectul unui cursor "nativ" al mouse-ului - adică unul care înlocuiește cursorul sistemului de operare. Apoi codificăm un Vector pentru a ține BitmapData imaginii PNG "crosshair", pe care am încorporat-o mai devreme.

Apoi am setat hotspot pentru noi cursorData. Gândiți-vă la hotspot ca punct de "înregistrare"; definește unde este "vârful" cursorului. Am setat și cursorData.data proprietatea noastră crossHairData Vector, care deține BitmapData imaginii "crossHair".

În sfârșit, înregistrăm cursorul cu cursorData obiect pe care l-am creat și setat Mouse.cursor proprietate. Adăugăm, de asemenea, a MouseEvent.CLICK eveniment ascultător pe scenă.


Pasul 6: Codarea codului FireShot () funcţie

FireShot ()funcția este apelată ori de câte ori utilizatorul face clic pe scenă.

Adăugați următorul cod de mai jos incepe jocul() funcţie:

 funcția privată fireShot (e: MouseEvent): void // Dacă au făcut clic o dată, atunci vom face acest lucru dacă (firstShot == false) // creați o nouă imagine BulletHole var bulletHole: Bitmap = nou BulletHole (); // Adăugați Bullet hole.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; // Redați sunetul soundChannel = gunshot.play ();  firstShot = false; 

Mai întâi verificăm dacă este prima dată când utilizatorul a făcut clic; dacă nu este prima dată, atunci vom juca sunetul de foc și vom adăuga bulletHole la poziția de pe scena în care utilizatorul a dat clic cu ajutorul e.stageX șie.stageY. De fapt scădem 16 din stage.X și stage.Y astfel încât imaginea va fi centrat pe cruce (imaginea este 32x32px). Evenimentul deține informații despre el însuși, puteți vedea ce conține prin utilizarea acestuia trace (e.toString ())

Dacă nu am verificat dacă a fost prima dată, atunci când utilizatorul a dat clic pe butonul Start, s-ar adăuga o cruce și va reda sunetul - și nu vrem.


Concluzie

Un lucru pe care ar trebui să-l notezi despre folosirea cursorilor nativi este că imaginea nu poate fi mai mare decât 32 x 32 px.

De asemenea, puteți utiliza un cursor animat cu Cursorul Nativ prin adăugarea mai multor Bitmaps (câte unul pe cadru de animație) în vectorul crossHairData (anunțați-ne dacă doriți un sfat rapid complet care să explice acest lucru).

Native Mouse Cursors sunt un plus de bun venit pentru Flash Player (dacă nu de mult timp!)

Vă mulțumim pentru lectură și sper că ați găsit acest tutorial util.

Cod