Share
Aujourd'hui, je vais vous montrer comment créer une recherche de mots simple avec une interface "surligneur" élégante, qui est facile à modifier avec vos propres mots et votre mise en page. Nous allons utiliser Flash et AS3. Continuer à lire!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Dans ce didacticiel, nous utiliserons une série de classes ActionScript pour créer un jeu de recherche de mots classique Alphabet Soup. L'objectif du jeu est de mettre en évidence des lettres pour former un mot. Vous pourrez créer votre propre soupe à l'alphabet et y inclure vos propres mots.
Ouvrez Flash et créez un document 320x480px. Définir le taux de trame à 24fps.
Une interface orange simple sera utilisée, comportant plusieurs formes, boutons et MovieClips; continuez avec les prochaines étapes pour construire cette interface graphique.
Cet arrière-plan a été créé dans Flash à l'aide de formes rectangulaires simples. La couleur hexadécimale de l'orange est # EE923F.
Pour créer le titre, sélectionnez d'abord l'outil Texte (T), changez la couleur en #EEEEEE et écrivez votre texte de titre. Ensuite, dupliquez le champ de texte (Cmd + D), remplacez la couleur par # C97B35 et envoyez le nouveau champ de texte à l’arrière pour créer l’effet de typographie..
Utilisez à nouveau le Outil texte pour créer deux boutons comme indiqué dans l'image ci-dessus. Convertissez-les en boutons et donnez-leur des noms d'instances descriptifs pour pouvoir les utiliser facilement plus tard dans le code. Convertir les graphiques en phase en un seul MovieClip et nommez-le TitleView - n'oubliez pas de vérifier la Exporter pour ActionScript boîte.
Voici l’écran de jeu - son arrière-plan, car tout dans cet écran sera créé de façon dynamique à l’aide d’ActionScript 3..
le Sur l'écran apparaîtra devant le Titre Écran; utilisez les graphiques et les polices utilisés auparavant pour le disposer. Nomme le AboutView et n'oubliez pas de vérifier la Exporter pour ActionScript boîte.
Une alerte sera affichée lorsque tous les mots seront trouvés, elle affichera un message de jeu et des instructions. Utilisez le Outil Rectangle pour le créer et définir son nom d'instance sur AlertView, . Encore une fois marquer le Exporter pour ActionScript boîte.
Nous utiliserons des effets sonores pour améliorer le ressenti du jeu. Vous pouvez trouver le son utilisé dans cet exemple sur Soungle.com en utilisant le mot-clé cloche.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans le flash, ce qui augmentera les performances et facilitera l'utilisation..
Vous pouvez télécharger TweenNano depuis son site officiel.
Nous allons rendre notre application interactive en utilisant une classe externe. Ajoutez son nom (Principale) au Classe champ dans le Publier section de la Propriétés panneau pour associer la FLA à la classe de document Main.
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe. Ce sera la classe de document.
Créez votre structure de classe de base pour commencer à écrire votre code.
package import flash.display.Sprite; classe publique Main étend Sprite fonction publique Main (): void // code constructeur
Ce sont les classes que nous devons importer pour que notre classe fonctionne. le importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.display.Shape; import flash.events.MouseEvent; import flash.display.MovieClip; import com.greensock.TweenNano; importer com.greensock.easing.Bounce; import flash.net.navigateToURL; import flash.net.URLRequest;
Ce sont les variables que nous allons utiliser; lisez les commentaires dans le code pour en savoir plus. Certains de leurs noms s’expliquent d'eux-mêmes, il n'y aura donc aucun commentaire..
private var titleView: TitleView = new TitleView (); var privé à propos de: AboutView; // mots à trouver privé const L1: vecteur.= nouveau ['CLASS', 'PUBLISH', 'DEFAULT', 'SETTINGS', 'FLASH']; // Utilisé pour positionner les mots dans l'étape privée const L1Map: Array = [[0, 0, 'C', 0, 0, 0, 0, 0, 0, 0], [0, 0, 'L', 0, 0, 0, 0, 0, 0, 0], [0, 0, 'A', 0, 0, 0, 0, 0, 0, 'S'], [0, 0, 'S', 0, 0, 0, 0, 0, 0, 'E'], [0, 0, 'S', 0, 0, 0, 0, 0, 0, 'T'], [0, 0, 0, 0, 0, 0, 0, 0, 'F', 'T'], ['D', 'E', 'F', 'A', 'U', 'L', 'T', 'T', 0, 'L', 'I'], [0, 0, 0, 0, 0, 0, 0, 0, 'A', 'N'], [0, 0, 0, 0, 0, 0, 0, 0, 0, 'S', 'G'], [0, 0, 'P', 'U', 'B', 'L', 'I', 'S', 'H', 'S'], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0]]; alphabet privé var: vecteur. = nouveau ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", " M ',' N ',' O ',' P ',' Q ',' R ',' S ',' T ',' U ',' V ',' W ',' X ',' Y ' , 'Z']; private var soupFmt: TextFormat = new TextFormat ('Arial', 19, 0x666666); private var wordsFmt: TextFormat = new TextFormat ('Arial', 12, 0xEEEEEE); private var wordsList: TextField = new TextField (); ligne var privée: Shape = new Shape (); var privé tfs: MovieClip = new MovieClip (); Cloche var privée: Bell = new Bell (); var privé correct: int = 0; // nombre de mots trouvés jusqu'à présent
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou s'exécute lorsque le fichier FLA est chargé si une partie de la classe de document.
Il appelle les fonctions nécessaires pour démarrer le jeu. Vérifiez ces fonctions dans les prochaines étapes.
fonction finale publique Main (): void // Code
Nous commençons par ajouter TitleView de la bibliothèque à la scène.
addChild (titleView);
Cela ajoutera les écouteurs de la souris aux boutons de la vue du titre, ce qui nous mènera à l'écran de jeu ou de crédits..
fonction finale privée startButtonListeners (action: String = 'add'): void if (action == 'add') titleView.aboutBtn.addEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startBtn.addEventListener (MouseEvent.MOUSE_UP, showGameView); else titleView.aboutBtn.removeEventListener (MouseEvent.MOUSE_UP, showCredits); titleView.startBtn.removeEventListener (MouseEvent.MOUSE_UP, showGameView);
le Crédits l’écran s’affiche lorsque l’utilisateur clique sur le bouton des crédits; un écouteur de souris est ajouté au complet MovieClip l'enlever.
fonction finale privée showCredits (e: MouseEvent): void titleView.aboutBtn.visible = false; titleView.startBtn.visible = false; about = new AboutView (); about.y = stage.stageHeight + about.height; addChild (environ); TweenNano.to (about, 0.3, y: stage.stageHeight-about.height, onComplete: function (): void about.addEventListener (MouseEvent.MOUSE_UP, hideCredits););
Quand le Crédits l'écran est cliqué, il sera interpolé et retiré de la scène.
fonction finale privée hideCredits (e: MouseEvent): void TweenNano.to (environ, 0,3, y: stage.stageHeight + about.height, onComplete: fonction (): void titleView.aboutBtn.visible = true; titleView.startBtn .visible = true; about.removeEventListener (MouseEvent.MOUSE_UP, hideCredits); removeChild (about); about = null;);
Les lignes suivantes suppriment le Titre écran et quitter le Jeu écran visible. Il appelle également les fonctions nécessaires pour démarrer le jeu - nous les ajouterons dans les prochaines étapes..
Accentsconagua
fonction finale privée showGameView (e: MouseEvent): void TweenNano.to (titleView, 0.3, y: -titleView.height, onComplete: fonction (): void startButtonListeners ('rmv'); removeChild (titleView); titleView = nul; ); buildSoup (); gameListeners ('add'); Arrêtons-nous ici pour faire un test rapide et nous assurer que notre code de jeu fonctionne:
Gardez à l'esprit que certaines lignes ont été commentées car certaines fonctions n'ont pas encore été créées..
N'oubliez pas que les fichiers Milestone sont inclus dans le téléchargement de la source. Si, pour une raison quelconque, votre fichier ne l'imite pas, jetez un coup d'œil à la source pour voir quelle en est la cause..
Cette fonction ajoute les écouteurs de la souris nécessaires pour dessiner la ligne qui mettra les lettres en surbrillance.
fonction finale privée gameListeners (action: String): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_DOWN, startDraw); stage.addEventListener (MouseEvent.MOUSE_UP, detectLetters); else stage.removeEventListener (MouseEvent.MOUSE_DOWN, startDraw); stage.removeEventListener (MouseEvent.MOUSE_UP, detectLetters);
Une des fonctions les plus importantes du jeu. Il va créer et positionner les personnages pour construire la soupe à l'alphabet. Nous allons coder son comportement au cours des prochaines étapes.
fonction finale privée buildSoup (): void // Code…
Les boucles for imbriquées sont utilisées pour lire le tableau multidimensionnel; un TextField est créé pour chaque élément trouvé et une position est donnée à ce champ de texte.
pour (var i: int = 0; i < 10; i++) for(var j:int = 0; j < 12; j++) var tf:TextField = new TextField(); tf.width = 22; tf.height = 22; tf.defaultTextFormat = soupFmt; tf.selectable = false; tf.x = 10 + (31.3 * i); tf.y = 10 + (35 * j)
Les mots sont déjà définis dans le tableau de lettres d'origine. Le code suivant modifiera donc les 0 en caractères aléatoires obtenus à partir du tableau Alphabet. Comme cela ne change que les 0, les caractères originaux ne seront pas changés.
/ * Change les 0 en lettres aléatoires * / if (L1Map [j] [i] == 0) L1Map [j] [i] = alphabet [Math.floor (Math.random () * alphabet.length)]; tf.text = L1Map [j] [i]; addChild (tfs); tfs.addChild (tf);
Ce TextField montre les mots à trouver, il est placé au bas de la scène.
/ * Ajouter une liste de mots * / wordsList.selectable = false; wordsList.x = 5; wordsList.y = 430; wordsList.autoSize = TextFieldAutoSize.LEFT; wordsList.defaultTextFormat = wordsFmt;
Pour afficher correctement les mots du tableau, nous pouvons le convertir en chaîne, mais nous devons supprimer les virgules ajoutées automatiquement..
/ * Supprimer ',' * / var chaîne: String = "; pour (var k: int = 0; k < L1.length; k++) string += String(String(L1[k]).replace(',',")) +"; wordsList.text = string; addChild(wordsList); Ceci conclut la buildSoup () une fonction.
La ligne de sélection commencera à s'afficher lorsque l'utilisateur cliquera sur la scène. cette fonction crée la forme et ajoute un auditeur pour suivre le mouvement de la souris.
fonction finale privée startDraw (e: MouseEvent): void line = new Shape (); addChild (line); line.graphics.moveTo (mouseX, mouseY); line.graphics.lineStyle (16, 0xFF8E2A, 0.4); stage.addEventListener (MouseEvent.MOUSE_MOVE, drawLine);
Le code suivant trace la ligne dans le sens de la souris.
fonction finale privée drawLine (e: MouseEvent): void line.graphics.lineTo (mouseX, mouseY);
Arrêtons-nous ici pour faire un test rapide et nous assurer que notre code de jeu fonctionne:
Il trace la ligne, mais ne s'arrête pas. Nous en traiterons dans la prochaine étape.
Gardez à l'esprit que certaines lignes ont été commentées car certaines fonctions n'ont pas encore été créées..
Rappelez-vous que les jalons sont inclus dans les fichiers source. Si, pour une raison quelconque, votre fichier ne l'imite pas, jetez un coup d'œil à la source pour voir ce qui pourrait le causer..
Lorsque le bouton de la souris est levé, la méthode de dessin s’arrête et le code permettant de détecter les mots en surbrillance s’exécute. J'explique ce code dans les prochaines étapes.
fonction finale privée detectLetters (e: MouseEvent): void
Pour détecter les caractères en surbrillance, nous créons une variable chaîne qui stockera les champs de texte touchés par la ligne de sélection..
/ * Obtenir les lettres sélectionnées * / var selectedWord: String = "; for (var i: int = 0; i < tfs.numChildren; i++) if(line.hitTestObject(tfs.getChildAt(i))) selectedWord += (tfs.getChildAt(i) as TextField).text;
Ensuite, nous comparons le résultat à chaque mot du tableau prédéfini. si le mot est trouvé, un son est joué, le correct la variable est incrémentée et le mot change de couleur dans la barre inférieure.
/ * Vérifie si le mot est sur la liste * / pour (var j: int = 0; j < L1.length; j++) if(selectedWord == L1[j]) wordsList.htmlText = wordsList.htmlText.replace( selectedWord, ""+ selectedWord +""); bell.play (); correct ++;
Ce code appelle et alerte lorsque tous les mots sont trouvés.
if (correct == L1.length) alert ();
Cette fonction arrêtera le jeu et affichera son message, elle ajoutera également un écouteur à la souris pour réinitialiser le jeu en cas de clic..
fonction finale privée alert (): void gameListeners ('rm'); var alert: AlertView = new AlertView (); addChild (alerte); alert.addEventListener (MouseEvent.MOUSE_UP, restart); // ou niveau supérieur! TweenNano.from (alert.messageBox, 0.5, y: -alert.messageBox.height, facilité: Bounce.easeOut); Ceci conclut la detectLetters () une fonction.
La fonction suivante rechargera le fichier SWF, réinitialisant les variables et les méthodes et revenant au premier écran..
redémarrage de la fonction finale privée (e: MouseEvent): void browseToURL (new URLRequest (stage.loaderInfo.url), '_level0');
Nous sommes maintenant prêts à tester notre jeu et voir si tout fonctionne comme prévu.
Vous pouvez changer la liste de mots en changeant simplement cette ligne dans le code:
const privé L1: vecteur.= nouveau ['CLASS', 'PUBLISH', 'DEFAULT', 'SETTINGS', 'FLASH']; // Mots à trouver
Cela ne fera que changer la liste de mots que le code devrait détecter; pour que les mots apparaissent réellement dans la soupe à l'alphabet, lisez l'étape suivante.
La soupe Alphabet est créée à partir de ce tableau de cartes 10x12. Changez simplement les lettres en lettres désirées pour ajouter et positionner les mots et utilisez des 0 pour tout le reste. Les guillemets peuvent rendre le processus difficile, je vous recommande donc d’écrire les caractères seulement au début, puis d’ajouter les guillemets lorsque la carte est prête..
private const L1Map: Tableau = [[0, 0, 'C', 0, 0, 0, 0, 0, 0, 0], [0, 0, 'L', 0, 0, 0, 0, 0, 0, 0], [0, 0, 'A', 0, 0, 0, 0, 0, 0, 'S'], [0, 0, 'S', 0, 0, 0, 0, 0, 0, 'E'], [0, 0, 'S', 0, 0, 0, 0, 0, 0, 'T'], [0, 0, 0, 0, 0, 0, 0, 0, 0, 'F', 'T'], ['D', 'E', 'F', 'A', 'U', 'L', 'T', 0, 'L', 'I'], [ 0, 0, 0, 0, 0, 0, 0, 0, 'A', 'N'], [0, 0, 0, 0, 0, 0, 0, 0, 'S', 'G'] , [0, 0, 'P', 'U', 'B', 'L', 'I', 'S', 'H', 'S'], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];
Créez vos propres soupes alphabet en utilisant le tableau ci-dessus.
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
