Share
Suivez les étapes simples de ce didacticiel Premium pour créer un jeu de machine à sous divertissant en Flash. Faites tourner les roues et voyez ce que vous pourriez gagner!
À l'aide des outils de dessin de Flash, nous allons créer une interface graphique attrayante, optimisée par plusieurs classes ActionScript 3..
L'utilisateur pourra miser différents montants pour gagner les prix.
Ouvrez Flash et créez un document de 480 pixels de large, 320 pixels de haut. Définissez la cadence d'images sur 30fps.
Une interface sombre sera affichée; cela implique plusieurs formes, boutons, bitmaps et plus.
Passez aux étapes suivantes pour apprendre à créer cette interface graphique..
Créez un rectangle de 480x320 px et remplissez-le avec ce dégradé radial: # 404040, # 080808.
Utilisez le panneau d’alignement (Cmd + K) pour le centrer dans l’étape..
Ajoutons un titre à notre jeu. En fonction de votre thème de machine à sous, vous pouvez modifier les graphiques en fonction de vos besoins. Ici j'ai utilisé le logo Tuts +.
Utilisez l'outil Rectangle Primitive (R) pour créer un rectangle de 320 x 160 pixels. Changez son rayon de coin en 10 et remplissez-le avec ce dégradé linéaire: # F5DA95, # 967226, # 91723B.
Dupliquez la forme, changez sa taille en 316x156px et changez sa couleur en dégradé linéaire noir précédemment utilisé.
Ce sont les graphismes que nous utiliserons comme éléments de machine à sous. N'hésitez pas à utiliser les graphismes de votre choix dans votre propre jeu.!
Pour créer l’arrière-plan des bobines, utilisez l’outil Rectangle (R) pour créer un rectangle de 98x146px et remplissez-le avec ce dégradé: # 8F8459, # F8F4C7, # 8F8459.
Dupliquez les formes et alignez-les dans la zone des fentes.
Organisez les éléments graphiques dans l'ordre que vous souhaitez et convertissez-les en clips. Nous allons utiliser le rectangle d'arrière-plan de la bobine de la dernière étape pour créer l'effet d'ombre: changez sa couleur en noir et changez ses valeurs alpha en 65, 15, 0.
Cela peut être une partie délicate alors assurez-vous de télécharger les fichiers source pour vous aider..
Comme vous pouvez le constater, j'ai utilisé deux logos Nettuts + et deux logos Psdtuts +, mais un seul des logos Activetuts + et Vectortuts +. Cela signifie qu'il y a une plus grande possibilité de faire correspondre trois logos Nettuts + que de faire correspondre trois logos Activetuts +.
Utilisez l'ombre en tant que calque de masque et le scénario pour animer les éléments vers le bas. J'ai utilisé une animation image par image en déplaçant les éléments de 20 px vers le bas dans chaque image. Vous pouvez utiliser une interpolation, si vous voulez.
Dupliquez ce MoveClip et placez-les dans le fond d’emplacement approprié. Utilisez les noms d'instance suivants: articles1, articles2, articles3.
Les étiquettes de la chronologie seront utilisées pour rechercher une combinaison gagnante. Créer un nouveau calque et étiqueter chaque image où notre article est au centre.
Utilisez l'outil Texte (T) pour créer trois champs de texte statiques: Crédits, Pari et Gagnant payé.
Avec l'outil texte toujours sélectionné, créez trois champs de texte dynamiques, placez-les au-dessus des champs statiques et nommez-les, de gauche à droite: créditsT, mieux et payéT.
Utilisez l'outil Rectangle Primitive pour créer trois carrés de 45x45 pixels, modifiez le rayon de l'angle en 4 et remplissez-le avec: # CD0202, # 910202. Ajoutez l'étiquette de texte correspondante à chacun, convertissez-les en un bouton et nommez-les: payTabB, betMaxB et betOneB.
Le bouton Tourner est un peu plus gros que les autres et a aussi une autre couleur.
Utilisez le même processus que les autres boutons, mais changez la taille en 50x50px et la couleur en: # 5DA012, 3C670C.
Nommez le bouton spinB.
Nous utiliserons les effets sonores pour améliorer la sensation du jeu. Vous pouvez trouver les sons utilisés dans cet exemple sur Soungle.com en utilisant les mots-clés. machine à sous.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans Flash. Cela augmentera les performances et facilitera l'utilisation..
Vous pouvez télécharger TweenNano depuis son site officiel.
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
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; la importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.events.MouseEvent; import com.greensock.TweenNano; import flash.utils.Timer; import flash.events.TimerEvent;
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus sur eux.
var payTable: PayTable; // Une instance Pay Table var timer: Timer; // Objet timer qui contrôle la durée des spins / * Sounds * / var buttonS: ButtonS = new ButtonS (); var spinS: SpinS = new SpinS (); var stopS: StopS = new StopS (); var winS: WinS = new WinS ();
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 lors du premier chargement du fichier SWF s'il appartient à 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
Empêcher les bobines MovieClips de jouer immédiatement.
items1.stop (); items2.stop (); items3.stop ();
Ici, nous utilisons une fonction personnalisée pour ajouter les événements de souris à nos boutons; cette fonction sera créée plus tard dans la classe.
Accentsconagua
buttonListeners ('add'); Ensuite, nous utilisons une autre fonction personnalisée qui empêchera les événements de souris du bouton Tourner.
boutons ('désactiver', spinB); Cette fonction ajoute ou supprime un événement MouseUp aux boutons en fonction du paramètre spécifié..
fonction finale privée buttonListeners (e: String): void if (e == 'add') spinB.addEventListener (MouseEvent.MOUSE_UP, spinBtn); betMaxB.addEventListener (MouseEvent.MOUSE_UP, betMax); betOneB.addEventListener (MouseEvent.MOUSE_UP, betOne); payTabB.addEventListener (MouseEvent.MOUSE_UP, payTableHandler); else spinB.removeEventListener (MouseEvent.MOUSE_UP, spinBtn); betMaxB.removeEventListener (MouseEvent.MOUSE_UP, betMax); betOneB.removeEventListener (MouseEvent.MOUSE_UP, betOne); payTabB.removeEventListener (MouseEvent.MOUSE_UP, payTableHandler);
La fonction suivante utilise ses paramètres pour interpoler la valeur alpha du bouton spécifié et désactiver / activer les interactions avec la souris..
boutons de fonction finale privés (action: String ,? btns): void var btnsLen: int = btns.length; if (action == 'enable') for (var i: int = 0; i < btnsLen; i++) btns[i].enabled = true; btns[i].mouseEnabled = true; TweenNano.to(btns[i], 0.5, alpha:1); else for(var j:int = 0; j < btnsLen; j++) btns[j].enabled = false; btns[j].mouseEnabled = false; TweenNano.to(btns[j], 0.5, alpha:0.2);
Le bouton Bet Max est géré par cette fonction.
Il joue le son de rotation, modifie les champs de texte des crédits, et appelle la fonction de rotation.
fonction finale privée betMax (e: MouseEvent): void / * Sound * / spinS.play (); / * Tourne si suffisamment de crédits * / if (int (creditsT.text)> = 3) betT.text = '3'; des boutons ('disable', spinB, betOneB, betMaxB, payTabB); tourner(); Le bouton Bet One est géré par cette fonction.
Il augmente le pari de un (si possible) et joue le son du bouton correspondant. Il active également le bouton Spin.
fonction finale privée betOne (e: MouseEvent): void / * Sound * / buttonS.play (); / * Bet One * / if (betT.text == '3') betT.text = '1'; else betT.text = String (int (betT.text) + 1); / * Activer le bouton de rotation * / if (spinB.enabled == false) buttons ('enable', spinB); Le bouton Pay Table est géré par cette fonction.
Il vérifie si la table de paiement est déjà sur la scène et, sinon, il utilise un Tween pour l'afficher et le centrer. Les autres boutons sont désactivés pendant l'affichage du tableau.
fonction finale privée payTableHandler (e: MouseEvent): void / * Sound * / buttonS.play (); / * Afficher si pas à l’étape * / if (payTable == null) payTable = new PayTable (); payTable.x = stage.stageWidth * 0.5; payTable.y = stage.stageHeight * 0.5; addChild (payTable); TweenNano.from (payTable, 0.2, scaleX: 0.4, scaleY: 0.4); / * Désactive les boutons * / boutons ('disable', spinB, betMaxB, betOneB); else TweenNano.to (payTable, 0.2, scaleX: 0.1, scaleY: 0.1, alpha: 0, onComplete: function destroyPT (): void removeChild (payTable); payTable = null); / * Bouton d'activation * / if (betT.text! = '0') boutons ('enable', spinB); boutons ('enable', betMaxB, betOneB); Le bouton Spin est géré par cette fonction.
Il joue le son de spin et la fonction Spin si les crédits sont corrects.
fonction finale privée spinBtn (e: MouseEvent): void / * Sound * / spinS.play (); / * Tourne si assez de crédits * / if (int (creditsT.text)> = int (betT.text)) spin (); des boutons ('disable', spinB, betOneB, betMaxB, payTabB); L'une des fonctions principales du jeu, la fonction de rotation, gère les gains et les dépenses en crédits, fait tourner les éléments dans les emplacements et utilise une minuterie pour les arrêter. Lisez les prochaines étapes pour une vue plus détaillée de ces actions..
fonction finale privée spin (): void // Code
Cette vérifie si les crédits sont disponibles pour ajouter de la payéT textfield, et réinitialise sa valeur à 0.
creditsT.text = Chaîne (int (creditsT.text) + int (paidT.text)); paidT.text = '0';
Ceci soustrait les crédits utilisés dans le dernier pari.
creditsT.text = String (int (creditsT.text) - int (betT.text));
Cette fonction anime les rouleaux pour que les articles semblent tourner.
items1.play (); items2.play (); items3.play ();
Ce minuteur détermine (aléatoirement) le temps nécessaire pour que les éléments de la bobine tournent, il est différent à chaque tour..
timer = new Timer (Math.floor (Math.random () * 1000) + 500); timer.addEventListener (TimerEvent.TIMER, handleTimer); timer.start ();
Cette fonction est exécutée chaque fois que la minuterie termine son compte.
Il arrête le slot actuel de tourner et joue le son stop. Lorsque tous les éléments sont arrêtés, le chronomètre est effacé et le checkWin () une fonction.
fonction privée handleTimer (e: TimerEvent): void if (timer.currentCount == 1) stopItem (items1.currentFrame, items1); / * Son * / stopS.play (); if (timer.currentCount == 2) stopItem (items2.currentFrame, items2); / * Son * / stopS.play (); if (timer.currentCount == 3) stopItem (items3.currentFrame, items3); / * Son * / stopS.play (); / * Stop Timer * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, handleTimer); timer = null; Boutons * / Enable * / (boutons 'enable', spinB, betOneB, betMaxB, payTabB); / * Vérifier les éléments pour une combinaison gagnante * / checkWin ();
Comme le chronomètre peut se terminer par une image dans laquelle l'élément en cours n'est pas au centre, nous vérifions l'image en cours du MovieClip et utilisons gotoAndStop () pour afficher l'article le plus proche.
fonction finale privée stopItem (cFrame: int, targetItem: MovieClip): void if (cFrame> = 2 && cFrame <= 5) targetItem.gotoAndStop(5); else if(cFrame >= 6 && cFrame <= 9) targetItem.gotoAndStop(9); else if(cFrame >= 10 && cFrame <= 13) targetItem.gotoAndStop(13); else if(cFrame >= 14 && cFrame <= 17) targetItem.gotoAndStop(17); else if(cFrame >= 18 && cFrame <= 21) targetItem.gotoAndStop(21); else if(cFrame >= 22 && cFrame <= 24) targetItem.gotoAndStop(1); else if(cFrame == 1) targetItem.stop();
Vous devrez peut-être modifier ce code pour qu'il corresponde aux symboles et à l'animation que vous avez choisie..
Cette fonction vérifie si les trois éléments sont égaux. Si la valeur est true, elle joue le son gagnant et ajoute le montant correspondant à la valeur. payé champ de texte.
fonction finale privée checkWin (): void if (items1.currentLabel == items2.currentLabel && items2.currentLabel == items3.currentLabel) / * Son * / winS.play (); / * Récupère l'étiquette actuelle pour déterminer la valeur de l'élément * / var lbl: String = items1.currentLabel; if (lbl == 'a') paidT.text = String (100 * int (betT.text)); else if (lbl == 'v') paidT.text = String (50 * int (betT.text)); else if (lbl == 'p') paidT.text = String (25 * int (betT.text)); else if (lbl == 'n') paidT.text = String (10 * int (betT.text));
Nous utilisons la classe de document dans ce tutoriel. Si vous ne savez pas comment l'utiliser ou êtes un peu confus, veuillez lire cette astuce..
Définissez la classe de documents de votre FLA sur Principale.
Nous sommes maintenant prêts à tester le film et à voir si tout fonctionne comme prévu. N'oubliez pas d'essayer tous les boutons.!
Le résultat final est un jeu personnalisable et divertissant. essayez d'ajouter vos graphiques et vos prix personnalisés! Vous pouvez également essayer de modifier la probabilité de gagner plus facilement ou plus difficilement.
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
