Dans cette astuce, je vais vous montrer comment définir le curseur natif du système d'exploitation via AS3, à l'aide de la nouvelle fonctionnalité de Flash Player 10.2..
Bref aperçu
Ne pas travailler à cela devrait? Vous aurez besoin de télécharger Flash Player 10.2+?
Un bouton Démarrer apparaît dans le fichier SWF. Lorsque vous cliquez sur ce bouton, votre souris devient un réticule prêt à faire des dégâts. Lorsque vous cliquez sur la scène, un coup de feu retentit et un graphique de trou de balle est ajouté à la scène au point où vous avez cliqué avec la souris..
Comparez cela à la méthode "old school" dont nous avons parlé hier:
Pas aussi lisse que le nouveau curseur natif dans FP10.2 hein?
Étape 1: téléchargement et configuration du kit SDK Flex
Avant de pouvoir coder le curseur natif, vous devez vous assurer que vous disposez du bon SDK Flex. Pour ce tutoriel, nous utiliserons le SDK "Hero". J'ai téléchargé celui avec une date de construction de Jeu 3 février 2011 (4.5.0.19786). Une fois que vous l'avez téléchargé, vous devrez l'extraire. J'ai extrait ma copie sur mon lecteur C:.
Ouvrez Flash Builder et sélectionnez Menu> Fenêtre> Préférences. Choisissez "Flash Builder / Flex SDKS installé", puis cliquez sur le bouton "Ajouter"..
Naviguez jusqu'à l'emplacement où vous avez extrait le SDK.Appuyez sur le bouton "OK" lorsque vous avez terminé..
Vous serez ramené à l'écran du SDK installé. Cochez la case en regard du SDK nouvellement installé et cliquez sur "Appliquer". Nous sommes maintenant prêts à utiliser le nouveau SDK..
Étape 2: Configuration du projet Flex
Dans Flash Builder, accédez à Menu> Nouveau> Projet Flex. Définir les attributs suivants
"Nom du projet": NativeCursor
"Type d'application": Web (s'exécute dans Adobe Flash Player)
"Version du SDK Flex": Utiliser le SDK par défaut (actuellement "Flex 4.5")
Dans "Package Explorer", cliquez avec le bouton droit de la souris sur le dossier du projet et sélectionnez Nouveau> Dossier..
Nommez ce dossier "assets".
Dans le téléchargement du projet, il y a un dossier source. Dans ce dossier se trouvent deux fichiers .pngs et un fichier .mp3; copier ces fichiers et les coller dans le dossier "assets" nouvellement créé.
Étape 3: Configuration du conteneur Button et Sprite
Dans NativeCursor.mxml dans le s: application attribuer changer le minWidth à "500" et le minHeight à "400". Ajouter un largeur et la taille attribuez-les et réglez-les sur "500" et "400" respectivement. Enfin ajouter un creationComplete = "Setup ()" attribut. créationComplete attribut définit une fonction à appeler lors du premier chargement de l'application.
Vous pouvez supprimer le fx: Déclarations bloc; on n'en a pas besoin ici.
Ajoutez le code suivant au fichier .mxml. le s: SpriteVisualElement est utilisé comme conteneur pour une image-objet dans laquelle nous placerons les graphiques de trous de bouton et de balle:
Étape 4: Importez les classes et configurez les variables
Au-dessus du bouton et de SpriteVisualElement, ajoutez un fx: script étiquette.
Dans cette balise, à l'intérieur du ![CDATA [ section, ajoutez le code suivant:
import flash.ui.Mouse; import flash.ui.MouseCursor; import flash.ui.MouseCursorData; importer mx.core.BitmapAsset; // Le graphique de réticule [Incorporer (source = "assets / crosshair.png")]] [Bindable] var CrossHair: Class; // Le graphique Bullet Hole [Embed (source = "assets / BulletHole.png")]] [Bindable] var BulletHole: Class; // Gunshot [Incorporer (source = "assets / GunShot.mp3")] [Lié] var GunShot: Class; // Conteneur contenant le bouton et la balle Holes var sprite: Sprite; // Utilisé pour tester s'il s'agit de la première fois que l'utilisateur tire var firstShot: Boolean = true; // Crée un nouveau son de coup de feu var gunshot: Sound = new GunShot (); // Nécessaire pour le son de coup de feu var soundChannel: SoundChannel = new SoundChannel;
Ici, nous venons d'importer les classes dont nous avons besoin et de configurer certaines variables.
Étape 5: Codage du Installer() une fonction
le Installer() La fonction est appelée lors du premier chargement de l'application, un peu comme une fonction constructeur. Ici, nous ajoutons notre Sprite au conteneur, ajoutons le bouton à cette Sprite et ajoutons un EventListener au bouton..
le démarrer jeu() la fonction est appelée lorsque l'utilisateur clique sur le bouton "Démarrer".
Ajoutez le code suivant
fonction privée startTheGame (e: MouseEvent): void // Supprime le bouton de la scène container.removeChild (startGame); // MouseCursorData nous permet de définir l'apparence du curseur de la souris var cursorData: MouseCursorData = new MouseCursorData (); // Vecteur pour contenir le bitmapData de notre image (le CrossHair) var crossHairData: Vector. = nouveau vecteur.(); // Créer un nouveau CrossHair var crossHair: Bitmap = new CrossHair (); // Définit le vecteur sur le bitmapData du crossHair. CrossHairData [0] = crossHair.bitmapData; // Spécifie le point d'accès du curseur cursorData.hotSpot = new Point (0,0) // définit le curseurData sur le vecteur qui contient le crossHairs bitmapData cursorData.data = crossHairData; Mouse.registerCursor ("crossHairCursor", cursorData) Mouse.cursor = "crossHairCursor"; stage.addEventListener (MouseEvent.CLICK, fireShot);
La première chose à faire est de retirer le bouton de la scène.
Ensuite, nous créons un nouveau MouseCursorData () objet. La classe MouseCursorData vous permet de définir l’apparence d’un curseur de souris "natif", c’est-à-dire qui remplace le curseur de votre système d’exploitation. Ensuite, nous codons un vecteur pour contenir le bitmapData de notre image PNG "crossHair", que nous avons précédemment intégrée..
Ensuite, nous définissons le hotspot pour notre CurseurDonnées. Pensez au hotspot comme un point "d'enregistrement"; il définit où se trouve la "pointe" du curseur. Nous avons également mis le cursorData.data propriété à notre crossHairData Vecteur, qui contient le BitmapData de l'image "crossHair".
Enfin, nous enregistrons le curseur avec le CurseurDonnées objet que nous avons créé, et définissez la Curseur de la souris propriété. Nous ajoutons aussi un MouseEvent.CLICK écouteur d'événement à la scène.
Étape 6: Codage du Coup de feu() une fonction
le Coup de feu()la fonction est appelée chaque fois que l'utilisateur clique sur la scène.
Ajoutez le code suivant sous le démarrer jeu() une fonction:
fonction privée fireShot (e: MouseEvent): void // S'ils ont cliqué une fois, nous le faisons si (firstShot == false) // crée une nouvelle image BulletHole. var bulletHole: Bitmap = new BulletHole (); // Ajouter un trou de balle container.addChild (bulletHole); bulletHole.x = e.stageX-16; bulletHole.y = e.stageY-16; // Joue le son soundChannel = gunshot.play (); firstShot = false;
Nous vérifions d’abord si c’est la première fois que l’utilisateur clique; si ce n’est pas la première fois, nous jouons le son du coup de feu et ajoutons le bulletHole à la position sur la scène où l’utilisateur a cliqué en utilisant e.stageX ete.stageY. Nous soustrayons en fait 16 de la stage.X et théâtral de sorte que l'image sera centrée avec le réticule (l'image est 32x32px). L'événement contient des informations sur lui-même, vous pouvez voir ce qu'il contient en utilisant trace (e.toString ())
Si nous ne vérifions pas si c'était la première fois, lorsque l'utilisateur clique pour la première fois sur le bouton Démarrer, il ajoute un réticule et lit le son du coup de feu - et nous ne le voulons pas..
Conclusion
Une chose à noter sur l'utilisation des curseurs natifs est que l'image ne peut pas dépasser 32 x 32 pixels..
Vous pouvez également utiliser un curseur animé avec le curseur natif en ajoutant plusieurs bitmaps (une par image d'animation) au vecteur crossHairData (laissez-nous savoir si vous souhaitez une astuce complète expliquant cela)..
Les curseurs de souris natifs sont un ajout bienvenu à Flash Player (si ce n’est pas trop tardif!)
Merci d'avoir lu et j'espère que vous avez trouvé ce tutoriel utile.
Share
Accentsconagua
