Quick Tips: Sette en Native Markør hjelp av Flash Player 10.2
Del
Del
2
Del
Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne hurtig Tips vil jeg vise deg hvordan du setter operativsystemets Native Markør gjennom AS3, ved hjelp av den nye funksjonen i Flash Player 10.2.
< hr>
kort oversikt
Ikke jobbe på den skal? Du må hente Flash Player 10.2+ ..
I SWF du vil se en start button.When du klikker på denne knappen, musen blir et trådkors klar til å gjøre noen skade. Når du klikker rundt på scenen, får en skuddlyder og et kulehull grafisk lagt til scenen på det punktet der du klikket med musen.
Sammenlign den til "old school" metode som vi diskuterte i går :
Ikke så glatt som den nye Native Markør i FP10.2 eh
Trinn 1: Laste ned og Sette opp Flex SDK
Før du kan kode Native markø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 en med en bygge dato for to 3 februar 2011 (4.5.0.19786). Når du har lastet det må du pakke den ut; Jeg hentet min kopi til min C: stasjonen
Åpne Flash Builder og gå til Meny >. Vindu > Innstillinger. Velg "Flash Builder /Installert Flex SDK" klikk på "Legg til" knappen.
Bla til stedet der du pakket ut SDK.Press på "OK" -knappen når du er ferdig.
Du vil bli tatt tilbake til installert SDK screen.Check boksen ved siden av den nylig installerte SDK og trykk "Apply" Vi er nå klar til å bruke den nye SDK
Trinn 2:. Setting opp Flex-prosjektet
i Flash Builder, gå til Meny > New > Flex Prosjekt i "Package Explorer" høyreklikk på prosjektet mappen og dra til New > Folder. Navn denne mappen "eiendeler". I prosjektet nedlasting er det en kilde mappe. I denne mappen er to .pngs og en mp3-fil; kopiere disse filene og lime dem inn i den nyopprettede "eiendeler" -mappen I NativeCursor.mxml innenfor s: Søknad attributt endre minWidth til "500" og minHeight til "400". Legg til en bredde og høyde attributt og sett dem til henholdsvis "500" og "400". Til slutt legger du til en creationComplete = "Setup ()" attribute.The creationComplete attributt setter en funksjon som skal kalles når programmet først laster Du kan slette fx: Erklæringer block; vi trenger ikke det her. Legg til følgende kode i .mxml. Den s: SpriteVisualElement brukes som en beholder for en sprite der vi vil plassere knappen og kulehullet grafikk: over knappen og SpriteVisualElement, legg en fx: .! skriptmerket i denne koden, inne i [CDATA [seksjonen, legg til følgende kode: Her er vi bare importert klassene vi trenger, og sette opp noen variabler Setup () funksjonen kalles når programmet først laster, mye som en konstruktør funksjon. Her legger vi vår Sprite til beholderen, legg på knappen for å at Sprite og legge en EventListener til knappen. startGame () funksjonen kalles når brukeren klikker på "Start" -knappen Legg til følgende kode Det første vi gjør er å fjerne knappen fra scenen. Neste skaper vi en ny MouseCursorData () objekt. Den MouseCursorData klassen lar deg definere utseendet til en "native" musepekeren - det vil si, en som erstatter operativsystemets markøren. Da vi kode en vektor for å holde BitmapData av vår "trådkors" PNG-bilde, som vi forankret tidligere. Neste vi setter hotspot for vår cursorData. Tenk på hotspot som en "registrering" punkt; den definerer hvor "tips" for markøren er. Vi har også satt den cursorData.data egenskapen til vår crossHairData Vector, som holder BitmapData av "trådkors" image. Til slutt vi registrerer markøren med cursorData objektet vi opprettet, og angi Mouse.cursor eiendom. Vi legger også til en MouseEvent.CLICK hendelse lytteren til scenen Fireshot () funksjonen kalles når brukeren klikker på . stadiet Legg til følgende kode under startGame () -funksjonen: Vi sjekker først for å se om dette er første gang brukeren har klikket; hvis det er ikke første gang så vi spiller skudd lyd og legge til bulletHole til posisjonen på scenen der brukeren klikket ved hjelp e.stageX ande.stageY. Vi har faktisk trekke 16 fra stage.X og stage.Y slik at bildet blir sentrert med trådkorset (bildet er 32x32px). Arrangementet inneholder informasjon om seg selv, kan du se hva den inneholder ved hjelp av spor (e.toString ()) Hvis vi ikke sjekke om dette var første gang, så når brukeren har klikket på Start knappen det ville legge til et trådkors og spille av skudd lyd - og vi ønsker ikke at en ting du bør være oppmerksom på om bruk av Native Markører er at bildet. kan ikke være større enn 32 x 32 piksler. du kan også bruke ha en animert markøren med Native markøren ved å legge til flere punktgrafikk (ett per ramme av animasjon) til crossHairData Vector (gi oss beskjed hvis du ønsker en full Quick Tips forklare dette). Native musepekere er et kjærkomment tilskudd til Flash Player (hvis ikke lang forfallen!) Takk for lesing, og jeg håper du fant denne opplæringen nyttig.
. Angi følgende attributter
"Project Name": NativeCursor
"Application Type": Web (kjører i Adobe Flash Player)
"Flex SDK versjon": bruk standard SDK (for tiden "Flex 4.5")
Trinn 3:. Sette opp Button og Sprite Container
< s:. Søknad xmlns: fx = "http://ns.adobe.com/MXML /2009 "xmlns: s =" bibliotek: //ns.adobe.com/flex/spark "xmlns: mx =" bibliotek: //ns.adobe.com/flex/mx "minWidth =" 500 "minHeight =" 400 "width =" 500 "height =" 400 "creationComplete =" Setup () ">
< s: Button x = "199" y = "199" label = "Start" id = " startGame "/> < s: SpriteVisualElement id =" container "/>
Trinn 4: Import klassene og sette opp variabler
import flash.ui.Mouse, import flash.ui.MouseCursor, import flash.ui.MouseCursorData; import mx.core.BitmapAsset; //Den trådkors grafiske [Embed (kilde = "assets /crosshair.png")] [bind] Var trådkors: Klasse; //The Bullet Hole grafisk [Embed (kilde = "assets /BulletHole.png")] [bind] Var BulletHole: klasse; //pistolskudd [Embed (kilde = "assets /GunShot.mp3")] [bind] Var skudd: klasse; //Container å holde knappen og bullet Holesvar sprite: Sprite; //Brukes til å teste om dette er første gang bruker shootsvar firstShot: Boolean = true; //Oppretter et nytt skudd soundvar skudd: Sound = ny skudd (); //trengs for skudd soundvar soundChannel: SoundChannel = nye SoundChannel;
Trinn 5: Coding SetUp () -funksjonen
Sprite = new Sprite();container.addChild(sprite);container.addChild(startGame);startGame.addEventListener(MouseEvent.CLICK,startTheGame);
Step 5:. Koding av startGame () -funksjonen
privat funksjon startTheGame (e : Mouseevent): void {//Fjern knappen fra scenen container.removeChild (startGame); //MouseCursorData tillater oss å sette utseendet på musepekeren Var cursorData: MouseCursorData = new MouseCursorData (); //Vector å holde bitmapData av vårt bilde (trådkorset) Var crossHairData. Vector < BitmapData > = New Vector. ≪ BitmapData > (); //Opprett en ny trådkors Var trådkors: Bitmap = new Crosshair (); //Sett vektoren til bitmapData av trådkorset crossHairData [0] = crossHair.bitmapData; //Angi hotspot cursorData.hotSpot = new Point (0,0) //setter cursorData til vektoren som holder trådkorset bitmapData cursorData.data = crossHairData; Mouse.registerCursor ( "crossHairCursor", cursorData) Mouse.cursor = "crossHairCursor"; stage.addEventListener (MouseEvent.CLICK, Fireshot); }
Trinn 6:. Koding av Fireshot () -funksjonen
privat funksjon Fireshot (e: Mouseevent): void {//Hvis de har klikket en gang da vi gjør dette hvis (firstShot == false ) {//skape ny BulletHole bilde Var bulletHole: Bitmap = new BulletHole (); //Legg Bullet hole container.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; //Spill av lyden soundChannel = gunshot.play (); } FirstShot = false; }
Konklusjon