I den här snabba tipsen visar jag hur du ställer in operativsystemets infödda markör genom AS3, med den nya funktionen i Flash Player 10.2.
Kort överblick
Fungerar det inte? Du måste ta Flash Player 10.2+?
I SWF ser du en Start-knapp. När du klickar på den här knappen blir musen en crosshair redo att göra skada. När du klickar på scenen hörs en skottljud och ett kulhåls grafik läggs till scenen vid den punkt där du klickade med musen.
Jämför det med den "gamla skolan" -metoden som vi diskuterade igår:
Inte lika smidig som den nya infödda markören i FP10.2 eh?
Steg 1: Hämta och konfigurera Flex SDK
Innan du kan koda den infödda markören måste du se till att du har rätt Flex SDK. För den här handledningen kommer vi att använda framkanten "Hero" SDK. Jag hämtade den med ett byggnadsdatum den 3 februari 2011 (4.5.0.19786). När du har hämtat det måste du extrahera det; Jag tog ut min kopia till min C: enhet.
Öppna Flash Builder och gå till Meny> Fönster> Inställningar. Välj "Flash Builder / Installed Flex SDKS" och klicka sedan på "Add" -knappen.
Bläddra till den plats där du extraherade SDK. Tryck på "OK" knappen när du är klar.
Du kommer att tas tillbaka till den installerade SDK: s skärm. Markera rutan bredvid den nyligen installerade SDK och tryck på "Apply". Vi är nu redo att använda det nya SDK.
Steg 2: Ställa in Flex-projektet
I Flash Builder, gå till Meny> Nytt> Flexprojekt. Ange följande attribut
"Projektnamn": NativeCursor
"Applikationstyp": Webben (körs i Adobe Flash Player)
"Flex SDK Version": Använd Standard SDK (för närvarande "Flex 4.5")
I "Paket Explorer" högerklickar du på projektmappen och går till Ny> Mappa.
Namn den här mappen "tillgångar".
I projektnedladdning finns en källkatalog. I den här mappen finns två .pngs och en .mp3-fil; kopiera dessa filer och klistra in dem i den nyskapade "assets" -mappen.
Steg 3: Ställa in knappen och Sprite Containern
I NativeCursor.mxml inom s: Tillämpning attribut förändra minWidth till "500" och minHeight till "400". Lägg till en bredd och höjd ange och sätt dem till "500" respektive "400". Till sist lägg till en creationComplete = "Setup ()" attribute.The creationComplete attribut anger en funktion som ska ringas när applikationen laddas först.
Du kan radera fx: Förklaringar blockera; Vi behöver inte det här.
Lägg till följande kod till .mxml. De s: SpriteVisualElement används som en behållare för en sprite där vi placerar knapp- och kulhålsgrafik:
Steg 4: Importera klasserna och ställa in variabler
Ovanför knappen och SpriteVisualElement lägger du till en fx: Script märka.
Inom denna tagg, inuti ![CDATA [ avsnitt, lägg till följande kod:
importera flash.ui.Mouse; importera flash.ui.MouseCursor; importera flash.ui.MouseCursorData; importera mx.core.BitmapAsset; // The crosshair graphic [Embed (source = "assets / crosshair.png")] [Bindbar] var CrossHair: Klass; // The Bullet Hole Graphic [Bädda in (source = "assets / BulletHole.png")] [Bindbar] var BulletHole: Class; // Gunshot [Bädda in (source = "assets / GunShot.mp3")] [Bindable] var GunShot: Class; // Container att hålla knappen och kula Holes var sprite: Sprite; // Används för att testa om det här är första gången användarens skott var firstShot: Boolean = true; // Skapar ett nytt skottljud var skott: Ljud = Ny GunShot (); // Behovet för skottljudet var soundChannel: SoundChannel = new SoundChannel;
Här importerade vi bara de klasser vi behöver och ställer in några variabler.
Steg 5: Kodning av Inrätta() fungera
De Inrätta() funktion kallas när applikationen laddas först, ungefär som en konstruktörfunktion. Här lägger vi till vår Sprite i behållaren, lägger till knappen till den Sprite och lägger till en EventListener på knappen.
De starta spelet() funktion kallas när användaren klickar på "Start" -knappen.
Lägg till följande kod
privat funktion startTheGame (e: MouseEvent): void // Ta bort knappen från scenen container.removeChild (startGame); // MouseCursorData tillåter oss att ange utseendet på musmarkören var cursorData: MouseCursorData = ny MouseCursorData (); // Vektor för att hålla bitmapData i vår bild (CrossHair) var crossHairData: Vector. = ny vektor.(); // Skapa en ny CrossHair var crossHair: Bitmap = new CrossHair (); // Ställ in vektorn i bitmapData i crossHair crossHairData [0] = crossHair.bitmapData; // Ange hotspot cursorData.hotSpot = new Point (0,0) // ställa in cursorData till vektorn som håller crossHairs bitmapData cursorData.data = crossHairData; Mouse.registerCursor ("crossHairCursor", cursorData) Mouse.cursor = "crossHairCursor"; stage.addEventListener (MouseEvent.CLICK, Fireshot);
Det första vi gör är att ta bort knappen från scenen.
Nästa skapar vi en ny MouseCursorData () objekt. Klassen MouseCursorData kan du definiera utseendet på en "inbyggd" muspekare - det vill säga en som ersätter operativsystemets markör. Då kodar vi en vektor för att hålla BitmapData i vår "crossHair" PNG-bild, som vi inbäddade tidigare.
Därefter ställer vi upp hotspot för vårt cursorData. Tänk på hotspot som en "registrering" -punkt det definierar var markörens "tips" är. Vi ställer också in cursorData.data egendom till vår crossHairData Vector, som rymmer BitmapData av "crossHair" -bilden.
Slutligen registrerar vi markören med cursorData objekt vi skapade och ställa in Mouse.cursor fast egendom. Vi lägger också till en MouseEvent.CLICK händelse lyssnare till scenen.
Steg 6: Kodning av Fireshot () fungera
De Fireshot ()funktion kallas när användaren klickar på scenen.
Lägg till följande kod nedanför starta spelet() fungera:
privat funktion fireShot (e: MouseEvent): void // Om de har klickat en gång så gör vi det här om (firstShot == false) // skapa ny BulletHole image var bulletHole: Bitmap = new BulletHole (); // Lägg till kula hål container.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; // Spela ljudet soundChannel = gunshot.play (); firstShot = false;
Vi kontrollerar först för att se om det här är första gången användaren har klickat på; om det inte är första gången spelar vi skottljudet och lägger till bulletHole till positionen på scenen där användaren klickade på med hjälp av e.stageX oche.stageY. Vi subtraherar faktiskt 16 från stage.X och stage.Y så bilden kommer att centreras med crosshairen (bilden är 32x32px). Händelsen innehåller information om sig själv, du kan se vad den innehåller genom att använda trace (e.toString ())
Om vi inte kollade om det här var första gången, då användaren först klickade på Start-knappen skulle det lägga till en crosshair och spela skottljudet - och vi vill inte ha det.
Slutsats
En sak du bör notera om att använda infödda markörer är att bilden inte kan vara större än 32 x 32px.
Du kan också använda har en animerad markör med den infödda markören genom att lägga till flera bitmappar (en per bild av animering) till crossHairData Vector (låt oss veta om du vill ha en fullständig snabbtips som förklarar detta).
Native Mouse Cursors är ett välkommet tillägg till Flash Player (om inte länge sen!)
Tack för att du läste och jag hoppas att du hittade denna handledning användbar.
Share
Accentsconagua
