I denne Quick Tip vil jeg vise deg hvordan du angir operativsystemets Native Cursor gjennom AS3, ved hjelp av den nye funksjonen i Flash Player 10.2.
Kort overblikk
Fungerer det ikke? Du må ta Flash Player 10.2+?
I SWF vil du se en Start-knapp. Når du klikker på denne knappen, blir musen et krysshår klar for å gjøre skade. Når du klikker rundt på scenen, blir et skuddlyd og et kulehulls grafikk lagt til scenen ved det punktet du klikket med musen.
Sammenlign det med "old school" -metoden som vi diskuterte i går:
Ikke så glatt som den nye innfødte markøren i FP10.2 eh?
Trinn 1: Nedlasting og konfigurering av Flex SDK
Før du kan kode innfødselsmarkøren må du sørge for at du har riktig Flex SDK. For denne opplæringen vil vi bruke cutting edge "Hero" SDK. Jeg lastet ned den med en byggedato den 3. februar 2011 (4.5.0.19786). Når du laster ned det, må du pakke ut det Jeg hentet min kopi til min C: stasjon.
Åpne Flash Builder og gå til Meny> Vindu> Innstillinger. Velg "Flash Builder / Installed Flex SDKS" og klikk deretter på "Add" -knappen.
Bla til stedet der du hentet SDK. Trykk på "OK" -knappen når du er ferdig.
Du vil bli tatt tilbake til den installerte SDK-skjermen. Merk av i boksen ved siden av den nylig installerte SDK og trykk på "Apply". Vi er nå klar til å bruke den nye SDK.
Trinn 2: Sette opp Flex-prosjektet
I Flash Builder, gå til Meny> Nytt> Flex-prosjekt. Angi følgende attributter
"Prosjektnavn": NativeCursor
"Programtype": Web (kjører i Adobe Flash Player)
"Flex SDK Version": Bruk Standard SDK (for øyeblikket "Flex 4.5")
I "Package Explorer" høyreklikk på prosjektmappen og gå til Ny> Mappe.
Navn denne mappen "eiendeler".
I prosjektnedlastingen er det en kildemappe. I denne mappen er to .pngs og en .mp3-fil; kopier disse filene og lim dem inn i nyopprettede "eiendeler" -mappen.
Trinn 3: Konfigurere knappen og Sprite Containeren
I NativeCursor.mxml i s: Søknad attributt endre minWidth til "500" og minHeight til "400". Legg til en bredde og høyde Tilordne og sett dem til henholdsvis "500" og "400". Til slutt legg til en creationComplete = "Setup ()" attribute.The creationComplete Attributt setter en funksjon som skal ringes når programmet først laster.
Du kan slette FX: Erklæringer blokkere; Vi trenger ikke det her.
Legg til følgende kode i .mxml. De s: SpriteVisualElement brukes som en beholder for en sprite der vi vil plassere knapp og kulelaggrafikk:
Trinn 4: Importer klassene og sett opp variabler
Over knappen og SpriteVisualElement legger du til en fx: Script stikkord.
Innenfor denne taggen, inne i ![CDATA [ delen, legg til følgende kode:
importere flash.ui.Mouse; importer flash.ui.MouseCursor; importer flash.ui.MouseCursorData; importere mx.core.BitmapAsset; // Krysshårfilmen [Embed (source = "assets / crosshair.png")] [Bindbar] var CrossHair: Klasse; // The Bullet Hole Graphics [Embed (kilde = "assets / BulletHole.png")] [Bindable] var BulletHole: Class; // Gunshot [Embed (source = "assets / GunShot.mp3")] [Bindbar] var GunShot: Klasse; // Container å holde knappen og kule Holes var sprite: Sprite; // Brukes til å teste om dette er første gang brukeren skudd var firstShot: Boolean = true; // Skaper et nytt skuddlyd var skudd: Lyd = Ny GunShot (); // Behov for skytevåpen var soundChannel: SoundChannel = new SoundChannel;
Her importerte vi bare klassene vi trenger, og setter opp noen variabler.
Trinn 5: Koding av Oppsett () funksjon
De Oppsett () funksjon kalles når applikasjonen først laster, omtrent som en konstruktørfunksjon. Her legger vi vår Sprite til beholderen, legger til knappen til Sprite og legger til en EventListener på knappen.
De start spill() funksjon kalles når brukeren klikker på "Start" -knappen.
Legg til følgende kode
privat funksjon startTheGame (e: MouseEvent): void // Fjern knappen fra scenen container.removeChild (startGame); // MouseCursorData tillater oss å angi utseendet til musemarkøren var cursorData: MouseCursorData = ny MouseCursorData (); // Vector for å holde bitmapData av bildet vårt (CrossHair) var crossHairData: Vector. = Ny Vector.(); // Lag en ny CrossHair var crossHair: Bitmap = new CrossHair (); // Sett vektoren til bitmapData av crossHair crossHairData [0] = crossHair.bitmapData; // Angi hotspot cursorData.hotSpot = nytt punkt (0,0) // sett markørenData til vektoren som holder crossHairs bitmapData cursorData.data = crossHairData; Mouse.registerCursor ("crossHairCursor", cursorData) Mouse.cursor = "crossHairCursor"; stage.addEventListener (MouseEvent.CLICK, Fireshot);
Det første vi gjør er å fjerne knappen fra scenen.
Deretter oppretter vi en ny MouseCursorData () gjenstand. MuscursorData-klassen lar deg definere utseendet til en "innfødt" musemarkør - det vil si en som erstatter operativsystemets markør. Da kodes vi en vektor for å holde BitmapData av vårt "crossHair" PNG-bilde, som vi innebygde tidligere.
Deretter setter vi hotspotet for vår cursorData. Tenk på hotspot som et "registreringspunkt" det definerer hvor "spissen" av markøren er. Vi satte også cursorData.data eiendom til vår crossHairData Vector, som inneholder BitmapData av "crossHair" bildet.
Til slutt registrerer vi markøren med cursorData objekt vi opprettet, og angi Mouse.cursor eiendom. Vi legger også til en MouseEvent.CLICK hendelseslytter til scenen.
Trinn 6: Koding av Fireshot () funksjon
De Fireshot ()funksjon kalles når brukeren klikker på scenen.
Legg til følgende kode under start spill() funksjon:
privat funksjon fireShot (e: MouseEvent): void // Hvis de har klikket en gang så gjør vi dette hvis (firstShot == false) // opprett nytt BulletHole image var bulletHole: Bitmap = new BulletHole (); // Legg til Bullet hole container.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; // Spill lydlydkanalen = gunshot.play (); firstShot = false;
Vi sjekker først for å se om dette er første gang brukeren har klikket; hvis det ikke er første gang så spiller vi skuddlyden og legger til bulletHole til stillingen på scenen hvor brukeren klikket ved å bruke e.stageX oge.stageY. Vi trekker faktisk 16 fra stage.X og stage.Y slik at bildet blir sentrert med krysshåret (bildet er 32x32px). Arrangementet inneholder informasjon om seg selv, du kan se hva den inneholder ved å bruke spor (e.toString ())
Hvis vi ikke sjekket om dette var første gang, da brukeren først klikket på Start-knappen, ville det legge til et tverrhår og spille skuddlyden - og det vil vi ikke ha.
Konklusjon
En ting du bør merke seg om å bruke Native Cursors er at bildet ikke kan være større enn 32 x 32px.
Du kan også bruke har en animert markør med den innfødte markøren ved å legge til flere Bitmaps (en per animasjonsramme) til crossHairData Vector (Gi oss beskjed hvis du vil ha en full Quick Tips som forklarer dette).
Native Mouse Cursors er et godt tillegg til Flash Player (hvis ikke lenge forsinket!)
Takk for at du leser, og jeg håper du fant denne opplæringen nyttig.
Share
Accentsconagua
