In diesem Schnelltipp zeige ich Ihnen, wie Sie den nativen Cursor des Betriebssystems über AS3 einstellen, indem Sie die neue Funktion in Flash Player 10.2 verwenden.
Kurzübersicht
Nicht daran arbeiten sollte? Sie benötigen Flash Player 10.2+?
In der SWF-Datei wird eine Schaltfläche Start angezeigt. Wenn Sie auf diese Schaltfläche klicken, wird Ihre Maus zu einem Fadenkreuz, das Schaden anrichten kann. Wenn Sie auf der Bühne herum klicken, ertönt ein Schuss und eine Einschussgrafik wird an der Stelle der Bühne hinzugefügt, an der Sie mit der Maus geklickt haben.
Vergleichen Sie es mit der "old school" -Methode, die wir gestern besprochen haben:
Nicht so glatt wie der neue native Cursor in FP10.2?
Schritt 1: Herunterladen und Einrichten des Flex SDK
Bevor Sie den nativen Cursor codieren können, müssen Sie sicherstellen, dass Sie über das richtige Flex-SDK verfügen. Für dieses Tutorial verwenden wir das neueste "Hero" SDK. Ich habe den Download mit einem Build-Datum vom 3. Februar 2011 (4.5.0.19786) heruntergeladen. Nachdem Sie es heruntergeladen haben, müssen Sie es extrahieren. Ich habe meine Kopie auf mein Laufwerk C: extrahiert.
Öffnen Sie Flash Builder und wählen Sie Menü> Fenster> Voreinstellungen. Wählen Sie "Flash Builder / Installed Flex SDKS" und klicken Sie auf die Schaltfläche "Hinzufügen".
Navigieren Sie zu dem Speicherort, an dem Sie das SDK extrahiert haben. Drücken Sie die "OK" -Taste, wenn Sie fertig sind.
Sie werden zum Bildschirm des installierten SDKs zurückgeführt. Aktivieren Sie das Kontrollkästchen neben dem neu installierten SDK und klicken Sie auf "Übernehmen". Jetzt können Sie das neue SDK verwenden.
Schritt 2: Einrichten des Flex-Projekts
Wechseln Sie in Flash Builder zu Menü> Neu> Flex-Projekt. Legen Sie die folgenden Attribute fest
"Projektname": NativeCursor
"Anwendungstyp": Web (läuft in Adobe Flash Player)
Klicken Sie im "Paket-Explorer" mit der rechten Maustaste auf den Projektordner und wählen Sie Neu> Ordner.
Nennen Sie diesen Ordner "Assets"..
Im Projekt-Download befindet sich ein Quellordner. In diesem Ordner befinden sich zwei PNG- und eine MP3-Datei. Kopieren Sie diese Dateien und fügen Sie sie in den neu erstellten Ordner "Assets" ein.
Schritt 3: Button und Sprite-Container einrichten
In der NativeCursor.mxml innerhalb der s: Anwendung Attribut ändern die minWidth auf "500" und die minHöhe bis "400". Füge hinzu ein Breite und Höhe Attribut und setzen sie auf "500" bzw. "400". Zum Schluss noch eine creationComplete = "Setup ()" Attribut.Der creationComplete Attribut legt eine Funktion fest, die beim ersten Laden der Anwendung aufgerufen wird.
Sie können das löschen fx: Erklärungen Block; wir brauchen es hier nicht.
Fügen Sie der .mxml den folgenden Code hinzu. Das s: SpriteVisualElement wird als Container für ein Sprite verwendet, in dem die Grafiken für Schaltflächen und Einschusslöcher platziert werden:
Schritt 4: Importieren Sie die Klassen und die Einrichtungsvariablen
Fügen Sie über dem Button und SpriteVisualElement ein fx: Skript Etikett.
Innerhalb dieses Tags innerhalb der ![CDATA [ Fügen Sie den folgenden Code hinzu:
import flash.ui.Mouse; import flash.ui.MouseCursor; import flash.ui.MouseCursorData; import mx.core.BitmapAsset; // Die Fadenkreuzgrafik [Einbetten (source = "assets / crosshair.png")] [Bindbar] var CrossHair: Class; // Die Einschusslochgrafik [Einbetten (Quelle = "assets / BulletHole.png")] [Bindbar] var BulletHole: Class; // Gunshot [Einbetten (Quelle = "assets / GunShot.mp3")] [Bindbar] var GunShot: Klasse; // Container zum Halten von Knöpfen und Aufzählungszeichen. Löcher Sprite: Sprite; // Wird verwendet, um zu testen, ob der Benutzer zum ersten Mal schießt. Var firstShot: Boolean = true; // Erzeugt einen neuen Schußton var gunshot: Sound = new GunShot (); // Benötigt für den Schußklang var soundChannel: SoundChannel = new SoundChannel;
Hier haben wir nur die benötigten Klassen importiert und einige Variablen eingerichtet.
Schritt 5: Codierung der Konfiguration() Funktion
Das Konfiguration() Funktion wird beim ersten Laden der Anwendung aufgerufen, ähnlich wie eine Konstruktorfunktion. Hier fügen wir unserem Container unser Sprite hinzu, fügen dem Sprite die Schaltfläche hinzu und fügen der Schaltfläche einen EventListener hinzu.
Schritt 5: Codierung der Spiel beginnen() Funktion
Das Spiel beginnen() Die Funktion wird aufgerufen, wenn der Benutzer auf die Schaltfläche "Start" klickt.
Fügen Sie den folgenden Code hinzu
private Funktion startTheGame (e: MouseEvent): void // Entferne die Schaltfläche von der Bühne container.removeChild (startGame); // MouseCursorData ermöglicht das Festlegen des Erscheinungsbilds des Mauscursors var cursorData: MouseCursorData = new MouseCursorData (); // Vektor für die BitmapData unseres Bildes (das CrossHair) var crossHairData: Vector. = neuer Vektor.(); // Ein neues CrossHair erstellen var crossHair: Bitmap = new CrossHair (); // Setze den Vektor auf die BitmapData des crossHair crossHairData [0] = crossHair.bitmapData; // Den Hotspot angeben cursorData.hotSpot = new Point (0,0) // setze die CursorData auf den Vektor, der die crossHairs enthält bitmapData CursorData.data = CrossHairData; Mouse.registerCursor ("crossHairCursor", cursorData) Mouse.cursor = "crossHairCursor"; stage.addEventListener (MouseEvent.CLICK, fireShot);
Als Erstes entfernen wir den Button von der Bühne.
Als nächstes erstellen wir ein neues MouseCursorData () Objekt. Mit der MouseCursorData-Klasse können Sie das Erscheinungsbild eines "nativen" Mauszeigers definieren, d. H. Eines Mauszeigers, der den Cursor des Betriebssystems ersetzt. Dann kodieren wir einen Vektor, um die BitmapData unseres "crossHair" PNG-Bildes zu speichern, das wir zuvor eingebettet haben.
Als nächstes setzen wir den Hotspot für unseren CursorData. Betrachten Sie den Hotspot als "Registrierungspunkt". Es definiert, wo sich der "Tipp" des Cursors befindet. Wir setzen auch die CursorData.data Eigentum an unserem crossHairData Vektor, der die BitmapData des "crossHair" -Bilds enthält.
Zuletzt registrieren wir den Cursor mit der CursorData Objekt, das wir erstellt haben, und setzen das Mauszeiger Eigentum. Wir fügen auch eine MouseEvent.CLICK Event-Listener auf die Bühne.
Schritt 6: Codierung der fireShot () Funktion
Das fireShot ()Die Funktion wird aufgerufen, wenn der Benutzer auf die Bühne klickt.
Fügen Sie den folgenden Code unter dem hinzu Spiel beginnen() Funktion:
private Funktion fireShot (e: MouseEvent): void // Wenn sie einmal geklickt haben, machen wir dies, wenn (firstShot == false) // Neues BulletHole-Image erstellen var bulletHole: Bitmap = new BulletHole (); // Einschussloch hinzufügen container.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; // den Sound abspielen soundChannel = gunshot.play (); firstShot = falsch;
Wir prüfen zunächst, ob der Benutzer zum ersten Mal geklickt hat. Wenn es nicht das erste Mal ist, spielen wir den Schußton und fügen das bulletHole der Position auf der Bühne hinzu, auf die der Benutzer geklickt hat e.stageX unde.stageY. Wir subtrahieren tatsächlich 16 von stage.X und Bühne Das Bild wird also mit dem Fadenkreuz zentriert (das Bild ist 32x32px). Das Ereignis enthält Informationen über sich selbst. Sie können sehen, was darin enthalten ist trace (e.toString ())
Wenn wir nicht nachsehen, ob dies das erste Mal war, fügte der Benutzer beim ersten Klicken auf die Schaltfläche Start ein Fadenkreuz hinzu und spielte den Schußton ab - und das wollen wir nicht.
Fazit
Bei der Verwendung von Native Cursors sollten Sie beachten, dass das Bild nicht größer als 32 x 32 Pixel sein darf.
Sie können auch einen animierten Cursor mit dem nativen Cursor verwenden, indem Sie dem crossHairData-Vektor mehrere Bitmaps (eines pro Animationsbild) hinzufügen (lassen Sie uns wissen, ob Sie einen vollständigen Schnelltipp benötigen, der dies erklärt)..
Einheimische Mauszeiger sind eine willkommene Ergänzung zum Flash Player (wenn nicht lange überfällig!)
Vielen Dank für das Lesen und ich hoffe, Sie fanden dieses Tutorial hilfreich.
Share
Accentsconagua
