Share
La façon dont vous abordez un problème est dans une certaine mesure votre clé pour accomplir un travail solide et de qualité. Cette procédure pas à pas vous guidera dans les six méthodes les plus couramment utilisées pour la création de boutons et vous indiquera les situations dans lesquelles elles sont le mieux utilisées..
Laissez-moi vous raconter une petite histoire sur la façon dont tout ce conflit d’interaction de bouton a commencé. Un jour Adam et Eve étaient dans le jardin d'Eden.
ADAM: Hey Eve, tu es différente aujourd'hui, qu'est-ce qui ne va pas??
VEILLE: J'ai vraiment soif et nous n'avons plus d'eau douce.
ADAM: Reste ici.
Adam se rendit dans un distributeur automatique à proximité, vit une boîte de jus de pomme, mémorisa son numéro, inséra une pièce de monnaie et appuyé sur le bouton! Rien ne s'est passé. Il y avait un bug.
Vous voyez, Adam a lancé un événement qui aurait dû déclencher une action. Heureusement, étant un bon programmeur ActionScript, il a branché son compilateur ActionScript USB dans la fente de programmation USB ActionScript du distributeur et a commencé à déboguer le code..
Il avait une forme allongée sur la scène qui ressemblait à un bouton et rien d’autre. Quelqu'un avait oublié de créer le code. Il lui incombait maintenant de trouver la méthode la plus appropriée pour aborder ce problème et se connecter à la boîte à jus..
Lorsque vous ouvrez Flash 5 pour la première fois, vous êtes invité à visionner quelques didacticiels si vous le souhaitez. L'un de ces didacticiels vous explique comment effectuer une interaction de bouton simple et que vous suivez la plupart du temps votre code ActionScript 1 et 2..
Cela fonctionne à peu près comme ceci:
Accentsconagua
on (presse) trace ("hihi qui chatouille"); Même si ce n'est plus une pratique courante, il y a beaucoup de concepteurs que je connais qui utilisent encore cette méthode. C'est toujours très utile si les délais sont serrés, si vous travaillez sur une bannière limitée à Flash Player 5 ou une version inférieure (oui, de telles restrictions existent encore de nos jours) et que vous devez compter sur un concepteur pour créer et animer des contenus. La bannière. En fin de compte, tout ce dont vous avez besoin est un bouton clickTag.
Remarque: un clickTag est une variable qu'un hôte de publicité injecte dans un objet swf via HTML. Il contient l'URL vers laquelle la bannière doit naviguer. Découvrez le clickTag tut de Victor Jackson pour plus d'informations.
Téléchargez l'exemple 1 pour voir cette méthode en action.
Plus tard dans votre vie ActionScript, lorsque la version 2.0 est arrivée, il était également possible d'associer des fonctions à des événements dans des objets MovieClip. En utilisant cette méthode, vous pouvez créer votre propre bouton basé sur un MovieClip et la meilleure chose à faire est que tout votre code puisse être stocké à un seul endroit. Ceci est très utile pour les menus, dommage que ce ne soit disponible que dans Flash Player 6.
Voici à quoi ressemble ce flux de travail.
myMovieclip.onRollOver = function () trace ("hihi, ça chatouille"); myMovieclip.onPress = function () trace ("hihi, ça chatouille aussi"); myMovieclip.onRollOut = function () trace ("ouch, maintenant ça fait mal !!"); Si vous avez une limite de lecteur jusqu'à la version 8 ou que vous n'êtes pas habitué à AS3 et vous construisez quelque chose avec peu d'interaction, c'est la voie à suivre.
Téléchargez l'exemple 2 pour voir cette méthode en action.
Pour les modèles plus complexes, où la structure implique des MovieClips imbriqués, par exemple, vous pouvez réellement déléguer des fonctions et définir une nouvelle portée pour la fonction. Cela peut sembler déroutant alors vérifiez la différence ci-dessous.
// Code normal myMovieclip.stop_bt.onPress = function () this._parent.myAnimation.stop (); ; myMovieclip.play_bt.onPress = function () this._parent.myAnimation.play (); ; // Déléguer import mx.utils.Delegate; myMovieclip.onPlayClick = function () this.myAnimation.play (); ; myMovieclip.onStopClick = function () this.myAnimation.stop (); ; myMovieclip.play_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onPlayClick); myMovieclip.stop_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onStopClick);
Comme vous pouvez le constater, il n'est pas nécessaire d'appeler le parent. Je peux simplement redéfinir la portée de l'objet. Ceci est un exemple assez simple, mais vous pouvez voir comment cela pourrait être utile dans une situation plus complexe.
Téléchargez l'exemple 3 pour voir cette méthode en action.
C'est très joli, mais si vous n'avez aucune restriction concernant la version du lecteur, ignorez toutes les étapes ci-dessus et concentrez-vous sur ActionScript 3.0. Ne pas se sentir à l'aise avec la langue n'est pas une excuse, vous ne serez jamais à l'aise avec quelque chose à moins de l'utiliser. Après quelques heures de compréhension de la syntaxe et quelques jours avec la feuille de triche AS2 à AS3 à côté de vous, vous vous sentirez comme à la maison. Il n’est pas nécessaire qu’il soit entièrement basé sur la classe OOP. Si vous êtes habitué à la programmation par timeline, vous pouvez continuer à le faire. L'IDE Flash va construire une classe MainTimeline dès que vous exportez votre film..
Écrivez simplement ceci dans la première image de votre fichier FLA, considérez que vous avez un symbole MovieClip sur cette image clé (couche différente cependant, juste pour aider l'organisation) avec une instance de myMovieClip..
myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler) fonction onClickHandler (e) trace ("J'ai dit que ça chatouille !! NOW STOP!"); Cependant, l’utilisation de cette méthode présente quelques inconvénients:
Mais je dois avouer que j’utilise trop souvent cette méthode. Principalement pour des raisons de commodité, mais je le regrette la plupart du temps. Mon conseil est de programmer dans la chronologie uniquement des bannières publicitaires et de petits mini / micro sites simples. Même dans ces cas, vous pouvez importer une classe de curseur, une classe de diaporama, une classe d'interpolation, une classe de fabrication de neige, etc. que vous construirez spécifiquement pour ce projet..
Téléchargez l'exemple 4 pour voir cette méthode en action.
Faisons de même avec une approche POO complète. Dites que le concepteur a construit le fichier Flash et a laissé les graphiques sur scène, voici ce qu'il faut faire.
Dans l'IDE Flash, convertissez le graphique en symbole et donnez-lui un nom d'occurrence. Dans un nouveau fichier AS nommé Main.as écrivez le code suivant:
package import flash.display.Sprite; import flash.display.MovieClip; import flash.events.MouseEvent; classe publique Main étend Sprite private var myMovieClip: MovieClip; fonction publique Main (): void myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler); fonction privée onClickHandler (e: MouseEvent): void trace ("c'est l'endroit idéal ..."); Probablement la méthode qui fait des cauchemars pour les nouveaux venus du monde AS3 et OOP, et probablement la meilleure méthode pour les projets Flash légers à complexes.
Considérez cela comme une programmation chronologique avec quelques caractères supplémentaires qui vous aideront à créer un code robuste et réutilisable. Vous saurez toujours où il se trouve, ce qui facilitera la lecture et la compréhension de votre travail.
Téléchargez l'exemple 5 pour voir cette méthode en action.
Remarque: si la conception du bouton est suffisamment simple, nous aurions pu le construire à l'intérieur de la classe sans avoir besoin de Flash IDE et de ses outils de conception sophistiqués. La plupart du temps, ce n'est tout simplement pas pratique.
De retour à l'histoire principale, Adam a accidentellement supprimé la forme que quelqu'un avait créée en tant que bouton et, ne sachant pas comment utiliser l'outil Rectangle pour dessiner un nouveau bouton, il a emprunté la route des composants. Voici comment il l'a fait.
package import fl.controls.Button; import flash.display.Sprite; import flash.events.MouseEvent; Classe publique MyButton étend Sprite private var b1: Button; fonction publique MyButton () setupButtons (); fonction privée setupButtons (): void b1 = new Button (); largeur1.1 = 160; b1.move (10,10); b1.label = "Jus de pomme"; b1.addEventListener (MouseEvent.CLICK, buttonClick); addChild (b1); bouton de fonction privéeCliquez sur (e: MouseEvent) bouton var: Bouton = e.target as Button; trace (button.label + "chatouille");
Quand l'utiliser? Si vous envisagez de créer une interface utilisateur pour une application Internet riche et que, au lieu d'utiliser Flex, vous souhaitez essayer Flash, c'est le moyen de le faire. (Mon conseil serait d'utiliser plutôt Flash Builder) ou si vous avez simplement besoin d'une interface utilisateur simple, quelle que soit la forme que vous créez, qui ne nécessite pas beaucoup de travail de conception. Bien sûr, vous pouvez personnaliser un composant de bouton, mais cela prend trop de temps par rapport à la création d'un bouton à partir de zéro..
Téléchargez l'exemple 6 pour voir cette méthode en action.
En fin de compte, la décision vous appartient. J'ai numéroté les méthodes que j'ai appris à connaître et à utiliser tout au long de ma carrière de développeur Flash et les opinions mentionnées ici sont celles que je me suis rendu compte tout en travaillant sur différents projets..
Si vous vous sentez à l'aise avec votre méthode de création de boutons et estimez qu'elle vous convient, tout va bien, tant que cela fonctionne, mais vous finirez par comprendre pourquoi le code ActionScript structuré OOP est une pratique recommandée. Pas parce que c'est geekier, mais parce que c'est en fait plus facile d'écrire, de lire et donc de comprendre.
Merci d'avoir lu, j'espère que vous avez aimé, et passez une bonne année 2010!
Remarque: Adam a réussi à mettre la main sur la boîte de jus de pomme qu’il a donnée à Eve. Le reste de l'histoire, vous le savez probablement…
