In deze Snelle tip laat ik je zien hoe je de Native Cursor van het besturingssysteem via AS3 instelt, met behulp van de nieuwe functie in Flash Player 10.2.
Kort overzicht
Werkt het niet? Je moet Flash Player 10.2 pakken+?
In de SWF zie je een startknop. Als je op deze knop klikt, wordt je muis een draadkruis dat klaar is om wat schade aan te richten. Terwijl je op het podium klikt, klinkt er een schot en wordt er een afbeelding van een kogelgat toegevoegd aan het podium op het punt waar je met de muis hebt geklikt.
Vergelijk het met de "old school" -methode die we gisteren bespraken:
Niet zo soepel als de nieuwe Native Cursor in FP10.2 eh?
Stap 1: Downloaden en instellen van de Flex SDK
Voordat je de Native Cursor kunt coderen, moet je ervoor zorgen dat je de juiste Flex SDK hebt. Voor deze zelfstudie gebruiken we de geavanceerde 'Hero'-SDK. Ik heb de versie gedownload met de builddatum van donderdag 3 februari 2011 (4.5.0.19786). Zodra je het hebt gedownload, moet je het uitpakken; Ik heb mijn exemplaar uitgepakt naar mijn C: schijf.
Open Flash Builder en ga naar Menu> Venster> Voorkeuren. Kies "Flash Builder / Installed Flex SDKS" en klik vervolgens op de knop "Toevoegen".
Blader naar de locatie waar u de SDK hebt geëxtraheerd. Druk op de knop "OK" wanneer u klaar bent.
U wordt teruggebracht naar het scherm van de geïnstalleerde SDK. Schakel het selectievakje in naast de nieuw geïnstalleerde SDK en druk op 'Toepassen'. We zijn nu klaar om de nieuwe SDK te gebruiken.
Stap 2: Het Flex-project opzetten
Ga in Flash Builder naar Menu> Nieuw> Flex-project. Stel de volgende attributen in
"Projectnaam": NativeCursor
"Toepassingstype": Web (wordt uitgevoerd in Adobe Flash Player)
"Flex SDK-versie": gebruik standaard SDK (momenteel "Flex 4.5")
Klik in de "Pakketverkenner" met de rechtermuisknop op de projectmap en ga naar Nieuw> Map.
Noem deze map "assets".
Bij het downloaden van het project is er een bronmap. In deze map staan twee .pngs en één .mp3-bestand; kopieer deze bestanden en plak ze in de nieuwe map "assets".
Stap 3: De knop en Sprite-container instellen
In de NativeCursor.mxml in de s: Application attribuut verander de minWidth tot "500" en de minHeight tot "400". Voeg een ... toe breedte en hoogte attribuut en stel ze in op respectievelijk "500" en "400". Voeg ten slotte een toe creationComplete = "Setup ()" attribute.The creationComplete kenmerk stelt een functie in die moet worden aangeroepen wanneer de toepassing voor het eerst wordt geladen.
U kunt de verwijderen fx: Verklaringen blok; we hebben het hier niet nodig.
Voeg de volgende code toe aan de .mxml. De s: SpriteVisualElement wordt gebruikt als een container voor een sprite waarin we de grafische afbeeldingen van de knop en het kogelgat zullen plaatsen:
Stap 4: importeer de klassen en stel variabelen in
Boven de Button en SpriteVisualElement voegt u een toe fx: Script label.
Binnen deze tag, binnen de ![CDATA [ sectie, voeg de volgende code toe:
import flash.ui.Mouse; import flash.ui.MouseCursor; import flash.ui.MouseCursorData; importeer mx.core.BitmapAsset; // De crosshair-afbeelding [Embed (source = "assets / crosshair.png")] [Bindbaar] var CrossHair: Class; // De Bullet Hole-afbeelding [Embed (source = "assets / BulletHole.png")] [Bindable] var BulletHole: Class; // Gunshot [Embed (bron = "assets / GunShot.mp3")] [Bindable] var GunShot: Class; // Container om knop en opsommingsteken te houden Gaten var sprite: Sprite; // Wordt gebruikt om te testen of dit de eerste keer is dat de gebruiker var firstShot: Boolean = true; / / Maakt een nieuw schot geluid var schot: Geluid = nieuwe GunShot (); // Nodig voor het schotschot var soundChannel: SoundChannel = nieuw SoundChannel;
Hier hebben we de klassen die we nodig hebben net geïmporteerd en enkele variabelen ingesteld.
Stap 5: Codering van de Opstelling() functie
De Opstelling() functie wordt aangeroepen wanneer de toepassing voor het eerst wordt geladen, ongeveer zoals een constructorfunctie. Hier voegen we onze Sprite toe aan de container, voegen we de knop toe aan die Sprite en voegen we een EventListener toe aan de knop.
De start het spel() functie wordt aangeroepen wanneer de gebruiker op de knop "Start" klikt.
Voeg de volgende code toe
private function startTheGame (e: MouseEvent): void // Verwijder de knop uit de stage container.removeChild (startGame); // MouseCursorData stelt ons in staat om de verschijning van de muiscursor var cursorData: MouseCursorData = nieuwe MouseCursorData (); // Vector om de bitmapData van onze afbeelding (de CrossHair) var crossHairData: Vector te houden. = nieuwe Vector.(); // Maak een nieuwe CrossHair var crossHair: Bitmap = nieuwe CrossHair (); // Stel de vector in op de bitmapData van de crossHair crossHairData [0] = crossHair.bitmapData; // Geef de hotspot-cursor opData.hotSpot = new Point (0,0) // stel de cursorData in op de vector die de crossHairs-bitmapData bevat cursorData.data = crossHairData; Mouse.registerCursor ("crossHairCursor", cursorData) Mouse.cursor = "crossHairCursor"; stage.addEventListener (MouseEvent.CLICK, FireShot);
Het eerste dat we doen is de knop van het podium verwijderen.
Vervolgens maken we een nieuwe MouseCursorData () voorwerp. Met de klasse MouseCursorData kunt u het uiterlijk van een "native" muisaanwijzer definiëren, dat wil zeggen een cursor die de cursor van uw besturingssysteem vervangt. Vervolgens coderen we een Vector om de BitmapData van onze "crossHair" PNG-afbeelding vast te houden, die we eerder hebben ingesloten.
Vervolgens zetten we de hotspot voor onze cursorData. Zie de hotspot als een "registratiepunt"; het definieert waar de "tip" van de cursor is. We hebben ook de cursorData.data eigendom van onze crossHairData Vector, die de BitmapData van de "crossHair" -afbeelding bevat.
Ten slotte registreren we de cursor bij de cursorData object dat we hebben gemaakt en stel het in Muis cursor eigendom. We voegen ook een toe MouseEvent.CLICK gebeurtenis luisteraar naar het podium.
Stap 6: Codering van de FireShot () functie
De FireShot ()functie wordt aangeroepen wanneer de gebruiker op het werkgebied klikt.
Voeg de volgende code toe onder de start het spel() functie:
private function fireShot (e: MouseEvent): void // Als ze eenmaal hebben geklikt, doen we dit als (firstShot == false) // nieuwe BulletHole-afbeelding var maken var bulletHole: Bitmap = new BulletHole (); // Voeg bullet container toe.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; // Speel het geluid soundChannel = gunshot.play (); firstShot = false;
We controleren eerst of dit de eerste keer is dat de gebruiker heeft geklikt; als het niet de eerste keer is, spelen we het schotschot en voegen we de opsommingsteken toe aan de positie op het podium waar de gebruiker op klikte door te gebruiken e.stageX ene.stageY. We trekken er 16 af van de stage.X en stage.Y dus het beeld wordt gecentreerd met het dradenkruis (de afbeelding is 32x32px). Het evenement bevat informatie over zichzelf, je kunt zien wat het bevat door het te gebruiken trace (e.toString ())
Als we niet zouden controleren of dit de eerste keer was, toen de gebruiker voor het eerst op de Start-knop klikte, voegde hij een vizier toe en speelde het schot-geluid - en dat willen we niet.
Conclusie
Een ding dat je moet opmerken over het gebruik van Native Cursors is dat de afbeelding niet groter kan zijn dan 32 x 32 px.
Je kunt ook een geanimeerde cursor gebruiken met de Native Cursor door meerdere Bitmaps (één per frame van animatie) aan de crossHairData Vector toe te voegen (laat ons weten of je een volledige Quick Tip wilt gebruiken om dit uit te leggen).
Native Mouse Cursors zijn een welkome aanvulling op de Flash Player (indien niet al te lang geleden!)
Bedankt voor het lezen en ik hoop dat je deze tutorial nuttig hebt gevonden.
Share
Accentsconagua
