Share
L'un des mécanismes de jeu les plus simples consiste à laisser le joueur chercher un objet caché. Les jeux basés sur cela prennent de nombreuses formes: Où est Waldo, Peek-A-Boo, Trouvez-vous la différence, Cache-cache et, bien sûr, Objets cachés. Dans ce tutoriel Premium, je vais vous montrer deux méthodes pour obscurcir une scène afin que le joueur puisse la découvrir plus tard..
Dans le premier fichier SWF, cliquez comme fou pour faire apparaître tous les ballons. D'accord, il n'y a pas beaucoup de défi, mais imaginez le faire contre la montre ou avec plus de ballons qui apparaissent tout le temps.
Dans le deuxième fichier SWF, éliminez la saleté en passant votre souris sur l'image. Ce mécanisme était utilisé dans Window Washy, l’un des premiers jeux pour la PS2 EyeToy - sans parler d’innombrables cartes à gratter.!
Nous devons créer les ballons avant de pouvoir les éclater. Je vais utiliser Flash Pro CS3 pour le faire; Si vous ne possédez pas Flash Pro, vous pouvez dessiner la vôtre en utilisant la méthode que vous utilisez habituellement ou utiliser le SWC du package de téléchargement et parcourir toutes les étapes de ce tutoriel en expliquant comment dessiner. J'inclurai des instructions pour les utilisateurs d'autres éditeurs, le cas échéant.
Ouvrez Flash Pro et créez un nouveau fichier Flash (ActionScript 3.0). Je vais fonder la conception de mes bulles sur ce didacticiel Illustrator de Vectortuts + - mais en utilisant les outils de Flash, bien évidemment..
Sélectionnez l'outil Crayon et mettez-le en mode Lisser, avec un trait noir de 1px. J'ai utilisé la valeur de lissage par défaut de 50.
Maintenant, dessinez une forme de ballon rugueux. Ne vous inquiétez pas pour que tout soit parfait. nous l'ajusterons dans une seconde. Voilà le mien:
Hmm. Voir ces coins pointus? Les lisser. Utilisez l'outil Sélection pour sélectionner cette section de la ligne, puis cliquez plusieurs fois sur le bouton Lisser..
Je suis sûr que les professionnels utilisent mieux, mais cela me convient généralement mieux. Modifiez la forme du ballon comme bon vous semble. Rappelez-vous que vous pouvez cliquer et faire glisser un point de la ligne pour l'étirer..
Voici ce que j'ai fini avec:
Maintenant, ajoutez le noeud. Comme Jesse le dit dans le didacticiel Vectortuts + susmentionné, "il ne s'agit que d'un simple cercle avec une forme de triangle arrondi en dessous."
D'accord, remplissez maintenant le ballon avec une couleur pastel agréable (j'ai choisi # dae8b3, qui est à nouveau tiré du didacticiel Vectortuts +) et supprimez toutes les lignes..
Pas mal! Si vous souhaitez ajouter une brillance, utilisez l'outil Ligne, avec une largeur de trait plus épaisse (3px) et une couleur blanche, pour tracer une ligne droite sur un "coin", puis utilisez l'outil Sélection pour le courber..
Sélectionnez cette ligne brillante, puis cliquez sur Modifier | Forme | Convertir les lignes en remplissages -- Ainsi, si vous redimensionnez le ballon, la brillance restera identique à celle du reste du ballon..
Pour interagir avec une bulle en utilisant ActionScript, nous devons la convertir en symbole. Sélectionnez votre art, puis cliquez sur Modifier | Convertir en symbole. Faites-en un symbole de clip appelé Ballon, et exportez-le pour ActionScript en utilisant le même nom de classe.
Ignore l'avertissement selon lequel il n'y a pas de classe avec le même nom, si elle apparaît après avoir cliqué sur OK.
Vous pouvez trouver une FLA et un SWC des ressources utilisées jusqu'à présent dans le dossier BalloonsStep2 du téléchargement source..
Choisissez un fond pour que vous puissiez flotter devant. J'ai choisi ce fond d'écran (crédit LGLab et envato) et l'a rogné légèrement:
Si vous utilisez Flash Professional, ajoutez un nouveau calque à la scène et importez votre image. Sinon, incorporez le graphique et ajoutez-le au bas de la liste d'affichage en utilisant la méthode de votre choix. Vous voudrez peut-être redimensionner votre scène pour l’ajuster, comme je l’ai fait.
Ensuite, nous allons faire disparaître ce ballon isolé quand on clique dessus.
Temps pour du code!
Créez une classe, appelée Main.as, dans le même répertoire que votre FLA et reliez-la à la FLA en tant que classe de document - pour plus de détails, voir ici. (Si vous n'utilisez pas Flash Pro, je suppose que vous savez faire l'équivalent dans votre éditeur. Vous devez déjà avoir créé une classe principale pour que l'arrière-plan apparaisse sur la scène.)
package import flash.display.MovieClip; Classe publique Main étend MovieClip fonction publique Main ()
Nous devons accéder au ballon à partir de la classe de document et lui donner un nom de classe..
Si vous utilisez Flash Professional, sélectionnez la bulle sur la scène et tapez le ballon dans le dans le panneau Propriétés. Puis clique Fichier | Publier les paramètres, ouvrir le Flash onglet, cliquez Réglages? et décochez la case "Déclarer automatiquement les occurrences de la scène" en regard de la liste déroulante Version ActionScript. (Cela n'est pas strictement nécessaire, mais permet au code d'être identique, que vous utilisiez Flash Pro ou un autre éditeur.)
Ensuite, modifiez votre classe de document comme suit:
package import flash.display.MovieClip; classe publique Main étend MovieClip public var theBalloon: Balloon; fonction publique Main ()
Si vous utilisez un autre éditeur, ajoutez une occurrence de la classe Balloon à la liste d'affichage aux coordonnées de votre choix (à condition qu'elle se trouve en arrière-plan), en lui attribuant un nom d'occurrence. le ballon.
Nous utiliserons un écouteur MouseEvent pour détecter le déclic de la bulle et une fonction de gestionnaire pour la supprimer:
package import flash.display.MovieClip; import flash.events.MouseEvent; classe publique Main étend MovieClip public var theBalloon: Balloon; fonction publique Main () theBalloon.addEventListener (MouseEvent.CLICK, onClickBalloon); fonction privée onClickBalloon (a_event: MouseEvent): void this.removeChild (theBalloon); theBalloon.removeEventListener (MouseEvent.CLICK, onClickBalloon);
Des trucs simples. Testez-le:
Rien d'originalité, mais au moins ça marche.
Pas beaucoup de défi dans cela, est-ce? Faites glisser quelques autres ballons sur la scène, sur le même calque que l'original:
Comment allons-nous accéder à ces codes? Je suppose que nous pourrions leur donner tous les noms d'instance comme greenBalloon1, greenBalloon2, et ainsi de suite, et ajoutez un auditeur MouseEvent à chacun? Pouah. Nous codons, nous pouvons automatiser cela.
La classe de document est un MovieClip, ce qui signifie que c'est un DisplayObjectContainer (hourra pour héritage), ce qui signifie qu’il a une fonction getChildAt () et une propriété numChildren, ce qui signifie que nous pouvons utiliser un pour boucle pour parcourir tous les objets sur la scène. Je vais le prouver. Modifiez votre fonction de constructeur Main () de la manière suivante:
fonction publique Main () pour (var i: int = 0; i < this.numChildren; i++) trace(getChildAt(i)); theBalloon.addEventListener(MouseEvent.CLICK, onClickBalloon);
(Vous pouvez laisser le code pour supprimer la bulle d'origine.) Exécutez le fichier SWF et vérifiez votre panneau de sortie:
[objet Forme] [objet Ballon] [objet Ballon] [objet Ballon] [objet Ballon] [objet Ballon] [objet Ballon] [objet Ballon] [objet Ballon] [objet Ballon] [objet Ballon]
Le code renvoie le type de chaque enfant de Main - c’est-à-dire chaque objet de la liste d’affichage, à partir du bas (getChildAt (0)) en haut (getChildAt (10)). Comme je n’ai pas exporté l’image d’arrière-plan pour ActionScript, tout ce que Flash sait est que c’est une sorte de Forme.
Nous devons ajouter le onClickBalloon () auditeur à chacun des ballons, mais pas à l'arrière-plan. Heureusement, il existe un mot clé qui nous permet de vérifier la classe d'un objet: est. Nous pouvons l'utiliser comme ceci:
fonction publique Main () pour (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon);
(Notez que j'ai supprimé la ligne qui ajoute spécifiquement l'écouteur d'événements au le ballon exemple.)
Testez le fichier SWF:
Hmm. Pas tout à fait raison, est-ce?
Peu importe le ballon sur lequel vous cliquez, le ballon d'origine est supprimé. La cause de ceci est facile à repérer:
fonction publique Main () pour (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); private function onClickBalloon(a_event:MouseEvent):void this.removeChild(theBalloon); theBalloon.removeEventListener(MouseEvent.CLICK, onClickBalloon);
À la ligne 16, nous ajoutons l'écouteur d'événement à chaque bulle. toutefois, aux lignes 23 et 24, nous supprimons spécifiquement le le ballon exemple. Dans la fonction de gestionnaire d'événements, nous devons supprimer le ballon sur lequel l'utilisateur a cliqué. Ceci est appelé le cible de l'événement, et peut être consulté via le a_event.target propriété. Donc, vous vous attendez à ce que cela fonctionne:
fonction privée onClickBalloon (a_event: MouseEvent): void this.removeChild (a_event.target); a_event.target.removeEventListener (MouseEvent.CLICK, onClickBalloon);
? mais ce n'est pas le cas; nous obtenons une erreur:
1118: Coercition implicite d'une valeur de type statique Object sur un type éventuellement non lié flash.display: DisplayObject.
Vous voyez, Flash ne sait pas quelle classe d'objet est la cible de l'événement, donc il ne sait pas avec certitude qu'il peut être removeChild ()-ed ou qu’il peut avoir des écouteurs d’événement attachés. Nous devons dire à Flash de traiter la cible de l'événement comme une instance de la classe Balloon, comme ceci:
fonction privée onClickBalloon (a_event: MouseEvent): void this.removeChild ((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
Essayez-le maintenant:
Génial! C'est une étape décente; vous pouvez trouver tous les fichiers créés jusqu’à présent dans le BalloonsStep8 dossier dans le téléchargement source.
Défi: Essayez de compter le nombre de ballons présents lors du premier chargement du fichier SWF, de compter le nombre de ballons supprimés au clic et d'afficher un texte de félicitations ou de reproduire un son de victoire lorsque tous les ballons ont disparu..
Ensuite, faisons apparaître les ballons avec une petite animation quand ils cliquent dessus.
Je ne savais pas comment animer ça, alors j'ai regardé une vidéo au ralenti montrant un vrai ballon en train d'éclater:
Malheureusement, cela me semble faux (je sais), alors j'ai essayé autre chose.
Modifiez votre bulle et ajoutez une nouvelle image à la chronologie. Dans ce cadre, dessinez un gros bazar avec l'outil Crayon:
Supprimez la ligne de brillance (remplissez-la de la couleur du ballon) et tracez quelques lignes du désordre épineux jusqu'au bord du ballon:
Cliquez sur chaque section, transformez-la en groupe (CTRL-G), séparez-la légèrement des autres et supprimez les lignes:
Créez une nouvelle image clé et modifiez les bits séparés à l'aide de l'outil de transformation libre et en étirant certains des bords des remplissages. J'ai activé Onion Skinning ici pour que vous puissiez voir comment mes sections se comparent à leurs positions dans le cadre auparavant:
J'ai trouvé qu'il était utile de garder les pièces du ballon dans la même zone que celle du ballon auparavant, mais vous pouvez expérimenter avec cela. Ensuite, créez une autre image clé et réduisez tous les segments:
J'ai fait un peu chuter les segments ici, comme par gravité. Ajoutez maintenant une nouvelle image clé, totalement vide. Testez votre animation (vous voudrez peut-être ajuster la cadence de votre film; je suis allé pour 24 images par seconde).
Impressionnant. Bien sûr, si vous utilisez votre fichier SWF maintenant, tous les ballons continueront à apparaître:
? alors ouvrez le panneau Actions dans la première image du scénario de la bulle et ajoutez ce code:
Arrêtez();
L'animation de la bulle est incluse dans le fichier SWC et FLA dans le dossier BalloonsStep9 du téléchargement source..
Pour faire un ballon pop uniquement lorsque vous cliquez dessus, il suffit de faire l'animation jouer():
fonction privée onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); this.removeChild ((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon);
? euh, sauf que ça ne marchera pas, parce que la bulle sera instantanément retirée de la liste d'affichage, n'est-ce pas? Juste commenter le removeChild () pour le moment et assurez-vous que le fichier SWF fonctionne:
Oh, d'accord, nous devons Arrêtez() l'animation une fois que c'est fait. Ouvrez l'image clé vide dans la chronologie de la bulle et ajoutez ceci:
Arrêtez();
En fait, pendant que nous sommes ici, nous pourrions résoudre notre removeChild () problème. Si nous faisons le ballon envoyer un ACHEVÉE événement lorsque son animation éclatante est terminée, nous pourrions écouter pour cet événement Main.as, et retirez le ballon de la liste d’affichage une fois que nous l’avons entendu. Ajoutez cette ligne aux actions de l'image clé vide:
Arrêtez(); dispatchEvent (nouvel événement (Event.COMPLETE));
(Tout cela se trouve dans BalloonsStep10 SWC et FLA, ne vous inquiétez pas.) Maintenant, dans Main.as, modifiez votre onClickBalloon () fonction de gestionnaire:
fonction privée onClickBalloon (a_event: MouseEvent): void (a_event.target as Balloon) .play (); //this.removeChild((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target as Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
? créé un onBalloonBurst () fonction de gestionnaire, qui sera exécutée une fois l'animation terminée:
fonction privée onBalloonBurst (a_event: Event): void this.removeChild (a_event.target as Balloon);
? et importer la classe Event:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent;
Testez-le:
Vous cherchez bien jusqu'ici.
Défi: Que diriez-vous d’animer les ballons pour qu’ils bougent un peu avant de cliquer dessus?
J'ai trouvé un effet sonore parfait sur AudioJungle: Balloon Pop. Je ne peux pas l'inclure dans le téléchargement source, mais vous pouvez l'acheter pour seulement un dollar.
Si vous le souhaitez, achetez cet effet, ou trouvez-en un autre en ligne, et faites-le jouer lorsqu'un ballon est éclaté. Pour ce faire, commencez par l'ajouter à votre bibliothèque, puis exportez-le vers ActionScript (ou intégrez-le dans votre projet, pour les utilisateurs non Flash Pro), avec le nom de classe suivant. PopSWF.
Puis dans Main.as, créer une instance privée du son:
classe publique Main étend MovieClip public var theBalloon: Balloon; var privé popSfx: PopSFX = new PopSFX ();
? et y jouer quand vous en avez besoin:
fonction privée onClickBalloon (a_event: MouseEvent): void popSfx.play (); (a_event.target as Balloon) .play (); //this.removeChild((a_event.target as Balloon)); (a_event.target as Balloon) .removeEventListener (MouseEvent.CLICK, onClickBalloon); (a_event.target as Balloon) .addEventListener (Event.COMPLETE, onBalloonBurst);
Essaye le:
Remplissons l'écran avec plusieurs couleurs de ballons. Dupliquez le symbole du ballon dans la bibliothèque et appelez-le BlueBalloon, avec un Classe de BlueBalloon. Gardez-le identique au ballon d'origine, mais avec un remplissage bleu (j'ai utilisé # c1e6ee, encore une fois à partir de ce tutoriel Vectortuts +).
Faites glisser quelques instances sur la scène. N'oubliez pas que vous pouvez supprimer certains ballons verts et redimensionner n'importe lequel des ballons si vous le souhaitez:
Si vous testez le fichier SWF, les ballons bleus ne font encore rien:
Les ballons bleus ne font rien parce que tout notre code est écrit pour faire face à la Ballon classe, et non la BlueBalloon classe. Nous pourrions dupliquer tout notre code pour traiter différentes couleurs de ballon, mais c'est compliqué et il serait difficile de changer plus tard si nous voulions.
Au lieu de cela, faisons en sorte que le ballon bleu et le ballon vert utilisent la même classe, en utilisant le pouvoir de l'héritage. Sélectionnez votre symbole de ballon original dans la bibliothèque et renommez-le en GreenBalloon; changer la classe à GreenBalloon ainsi que.
Notre objectif est de donner aux deux ballons une classe de base de Ballon; cela signifie que chaque ballon vert est considéré comme un exemple de Ballon ainsi que de GreenBalloon, et chaque ballon bleu est vu comme une instance de Ballon aussi bien que BlueBalloon -- notre code, qui est écrit avec la classe Balloon en tête, fonctionnera parfaitement.
Malheureusement, bien que nous puissions attribuer à la classe d'un symbole le nom d'une classe qui n'existe pas, nous ne pouvons pas faire la même chose avec la classe de base. Nous devons créer un fichier de classe dont les deux bulles peuvent hériter..
Créer un nouveau fichier de classe, Balloon.as, dans le même répertoire que votre FLA et entrez le code suivant:
package import flash.display.MovieClip; Classe publique Balloon étend MovieClip fonction publique Balloon ()
C'est tout ce dont vous avez besoin. Il doit s'étendre MovieClip parce que les deux ballons utilisent des animations; si nous avons prolongé, disons, Lutin au lieu de cela, les deux symboles de la bulle ne pourraient pas utiliser une timeline, et seraient des images statiques.
Définissez la classe de base de chacun des symboles de ballon de la bibliothèque sur Ballon, et exécutez le fichier SWF:
Génial! Il sera maintenant facile d'ajouter une autre couleur de ballon. Juste pour le prouver, ajoutons les rouges et les jaunes.
C'est une étape facile. Dupliquez encore deux fois le symbole du ballon vert et recolorez un rouge pastel (# f2daea), avec un nom et une classe de Ballon rouge, et l’autre jaune pastel (# f6f5b4), avec un nom et une classe de YellowBalloon. Dans chaque cas, définissez la classe de base sur Ballon. Ajouter beaucoup de chaque à la scène.
Exécutez le fichier SWF; les nouveaux ballons devraient fonctionner sans problème.
Si l'une des couleurs refuse de apparaître, assurez-vous que la classe de base du symbole est définie sur Ballon.
Nous sommes conditionnés à penser que les objets Flash ne sont cliquables que si le curseur de la souris se transforme en une main lorsque nous les survolons. Pour faire apparaître cette main, il suffit de régler le ballon boutonMode propriété à vrai.
Le lieu le plus facile à faire est dans la pour boucle où l'on ajoute le CLIQUEZ SUR écouteur d'événement à chaque ballon. Cependant, tout ce que Flash sait sur les bulles à ce stade est qu’il s’agit de cas de DisplayObject, puisque c'est ce que getChildAt () retourne - mais boutonMode est une propriété de la classe Sprite. Cela signifie que nous devons utiliser le comme mot-clé à nouveau. Nous pourrions écrire:
fonction publique Main () pour (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); (getChildAt(i) as Sprite).buttonMode = true;
? puis importez le flash.display.Sprite classe, mais par souci de simplicité, je vais utiliser le Ballon classe à la place:
fonction publique Main () pour (var i: int = 0; i < this.numChildren; i++) if (getChildAt(i) is Balloon) getChildAt(i).addEventListener(MouseEvent.CLICK, onClickBalloon); (getChildAt(i) as Balloon).buttonMode = true;
Exécutez le fichier SWF:
Défi: Pour rester sur le thème des ballons éclatants, vous pouvez changer le curseur de la souris en aiguille ou en épingle. Pour obtenir de l'aide, jetez un coup d'œil à cette astuce en faisant suivre un clip à la souris ou à celui-ci pour changer le curseur natif du système d'exploitation..
Félicitations, vous avez terminé cette section du didacticiel! Si vous avez suivi tous les défis jusqu'à présent, vous devriez être sur la bonne voie pour un joli petit jeu..
Faisons vite. Si vous utilisez Flash Pro:
Si vous utilisez un autre éditeur, créez simplement un nouveau projet AS3 en utilisant la méthode habituelle. Appeler le projet Le nettoyage des vitres et la classe principale Main.as, pour rendre ce tutoriel plus facile à suivre.
Dans les deux cas, votre classe principale devrait ressembler à ceci:
package import flash.display.MovieClip; Classe publique Main étend MovieClip fonction publique Main ()
Certaines versions de Flash et certains éditeurs peuvent générer un code légèrement différent pour cette classe; c'est bien, allez juste avec ses valeurs par défaut. Si votre éditeur ne génère aucun code, copiez le mien ci-dessus..
Pour commencer, nous allons créer un rectangle de couleur solide et le nettoyer; nous passerons à des images plus compliquées plus tard.
Dans votre classe Main, créez un nouveau Sprite contenant ce rectangle "sale":
package import flash.display.MovieClip; import flash.display.Sprite; public class Main étend MovieClip public var dirt: Sprite = new Sprite (); fonction publique Main ()
Ensuite, utilisez le Sprite graphique propriété pour créer un rectangle de couleur de la taille de la scène. Vous pouvez coder les valeurs dans, si vous voulez (ma FLA est 500x400px), ou définir les valeurs dynamiquement comme je l'ai fait ici:
package import flash.display.MovieClip; import flash.display.Sprite; public class Main étend MovieClip public var dirt: Sprite = new Sprite (); fonction publique Main () dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Cela ne sera visible que si nous sélectionnons une couleur de remplissage. J'ai choisi le # 440000, un rouge profond.
fonction publique Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight);
Oh, nous devons ajouter le saleté Sprite à la liste d'affichage:
fonction publique Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (terre);
Exécutez votre fichier SWF. Si vous ne voyez pas de couleur unie, votre FLA n'est peut-être pas correctement connectée à votre classe de documents..
Dans le didacticiel intitulé Créer une application de dessin de base avec Flash, Carlos Yanez nous a montré comment créer l'apparence que les couleurs d'une toile ont été effacées par le curseur de la souris, simplement en traçant une ligne blanche épaisse qui suit la souris. Nous allons utiliser le même truc ici.
Tout d'abord, nous devons créer un écouteur MouseEvent pour suivre la souris au fur et à mesure de son déplacement, ainsi qu'une fonction de gestionnaire pour le cas échéant:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main étend MovieClip public var dirt: Sprite = new Sprite (); fonction publique Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); this.addChild (terre); dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); fonction privée onMouseMoveOverDirt (a_event: MouseEvent): void
Ensuite, nous devons tracer une ligne de la position précédente de la souris à sa position actuelle:
fonction privée onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY);
N'oublie pas le lineStyle () appel; la première ligne est l'épaisseur de la ligne (en pixels); la seconde définit sa couleur (#ffffff est blanc).
Essaye le:
Wow, c'est ça? un effet intéressant, mais pas ce que nous allions faire! Le problème ici est que lineTo () trace une ligne de la saleté objet graphique position de dessin actuelle selon le point que vous spécifiez (les coordonnées de la souris, dans ce cas). Cependant, nous ne déplaçons pas la position de dessin actuelle, elle reste donc à (0, 0), le coin supérieur gauche de la scène. Nous avons également besoin de la position de dessin pour suivre la souris; nous pouvons le faire avec le déménager à() méthode:
fonction privée onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Essayez le SWF maintenant:
Très bon, sauf que le point initial est réglé sur (0, 0), ce qui signifie que la première ligne tracée sautera toujours à partir du coin supérieur gauche. De plus, si vous déplacez votre souris du fichier SWF à un endroit et que vous le placez à un autre, la ligne saute à nouveau..
Pour résoudre ces deux problèmes, nous devrions:
Voici le code pour cela. Si vous ne suivez pas entièrement la logique, essayez de commenter certaines lignes ou ajoutez la vôtre pour voir comment cela change l'effet final..
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; public class Main étend MovieClip public var dirt: Sprite = new Sprite (); fonction publique Main () dirt.graphics.beginFill (0x440000); dirt.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); dirt.graphics.moveTo (mouseX, mouseY); this.addChild (terre); dirt.addEventListener (MouseEvent.MOUSE_OUT, onMouseLeaveDirt); dirt.addEventListener (MouseEvent.MOUSE_OVER, onMouseReturnToDirt); fonction privée onMouseLeaveDirt (a_event: MouseEvent): void dirt.removeEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); fonction privée onMouseReturnToDirt (a_event: MouseEvent): void dirt.addEventListener (MouseEvent.MOUSE_MOVE, onMouseMoveOverDirt); dirt.graphics.moveTo (mouseX, mouseY); fonction privée onMouseMoveOverDirt (a_event: MouseEvent): void dirt.graphics.lineStyle (10, 0xffffff); dirt.graphics.lineTo (mouseX, mouseY); dirt.graphics.moveTo (mouseX, mouseY);
Exécutez votre fichier SWF:
Assez bon! Ce n'est pas parfait, mais cela montre bien ce que nous voulons bien faire..
Notre objectif final est d’effacer un premier plan pour révéler un arrière-plan. À la minute, nous semblons effacer un avant-plan rouge pour révéler un arrière-plan blanc; ajoutons maintenant un fond plus intéressant.
J'ai choisi cette image de la porte d'entrée du bureau d'Envato dans Flickr (crédit envato), ajusté pour correspondre à ma FLA:
Si vous utilisez Flash Pro, créez un nouveau symbole de clip, faites-y glisser l'image de votre choix (ou créez la vôtre à l'aide des outils de dessin), puis exportez le symbole pour ActionScript avec le nom de classe suivant. Contexte. Si vous utilisez un autre éditeur, intégrez-le dans votre projet (également avec le nom Contexte) en utilisant votre méthode habituelle. J'ai inclus cette image dans WindowWashing.swc à l'intérieur du téléchargement source.
Au lieu de le faire glisser sur la scène, utilisez du code pour l'ajouter à la liste d'affichage sous la terre:
Accentsconagua