Share
Dans ma dernière tâche: Créer de nouvelles fonctionnalités pour Flash avec JSFL, nous avons créé de nouvelles commandes pour Flash. Nous allons maintenant aller plus loin en créant de tout nouveaux panneaux dans l'environnement de création Flash..
Pour essayer le panneau Buttonizer, téléchargez le fichier zip source et extrayez le fichier Buttonizer.swf dans le dossier indiqué à l'étape 3. Redémarrez Flash et vous le trouverez dans Fenêtre> Autres panneaux.
Un panneau Flash est simplement un fichier SWF standard que vous indiquez à Flash de s'exécuter dans un panneau plutôt que dans une fenêtre séparée. Tout ce que vous avez à faire est de créer une nouvelle FLA. Le nom de la FLA sera affiché comme titre du panneau. J'appelle le mien Buttonizer.fla. Nous allons utiliser AS3 pour ce tutoriel.
Un simple panneau blanc est inutile, bien sûr, alors complétons-le. Redimensionnez la scène à 250 pixels de large et 170 pixels de haut (ce n’est pas important - j’ai choisi ces chiffres car je sais qu’ils sont assez grands pour ce que j’ai prévu plus tard) et changez la couleur d’arrière-plan en #EDEDED (cela correspond aux arrière-plans de les panneaux sur mon système, de toute façon).
Ouvrez le panneau Composants (Fenêtre> Composants) et faites glisser un bouton du dossier Interface utilisateur sur la scène.
Compilez un fichier SWF à partir de cette FLA. Pour que Flash l’utilise comme panneau, il suffit de faire glisser le fichier SWF dans le dossier approprié, puis de redémarrer Flash..
Le dossier s'appelle WindowSWF et son emplacement varie en fonction de votre système d'exploitation:
le Nom d'utilisateur dossier correspondra au nom que vous utilisez pour vous connecter avec, la langue changera en fonction de ce que vous avez choisi lors de l’installation de Flash (pour les anglophones, ce sera probablement en-nous ou juste en), et si vous utilisez une version plus récente de Flash que CS3, ce dossier changera également.
(Franchement, il est probablement plus facile de rechercher sur votre ordinateur tous les dossiers nommés WindowSWF. L'un d'eux sera correct.)
Faites glisser votre fichier SWF vers le WindowSWF dossier puis redémarrez Flash. Ne vous inquiétez pas, vous ne devrez pas redémarrer Flash à chaque fois que vous apporterez une modification. Une fois que vous avez ouvert à nouveau, consultez le Fenêtre> Autres panneaux sous-menu et vous devriez voir Buttonizer Comme une option. Cliquez dessus:
Impressionnant.
Avec le panneau ouvert, déplacez le bouton dans le fichier FLA, puis recompilez le fichier SWF. Le panneau ne change pas.
Déplacez le fichier SWF vers le WindowSWF dossier. Le panneau ne change toujours pas.
Fermez le panneau et rouvrez-le depuis le menu. Ça change.
Nous pouvons accélérer le processus en faisant publier le fichier SWF du panneau directement sur le WindowSWF dossier. Cliquez sur Fichier> Paramètres de publication, puis cliquez sur l'icône de dossier à côté de la boîte qui dit Buttonizer.swf, naviguez jusqu'à votre WindowSWF dossier et cliquez sur Enregistrer.
Décocher la HTML case à cocher aussi; tu n'en as pas besoin.
Maintenant déplacez à nouveau le bouton, recompilez le fichier SWF (vous pouvez appuyer sur Shift-F12 pour le faire sans faire apparaître Flash Player), fermez le panneau, rouvrez-le et il aura été mis à jour..
Comme le panneau est un fichier SWF fonctionnel, nous ne sommes pas obligés de changer son apparence. nous pouvons ajouter du code aussi.
Créez un nouveau fichier AS appelé Buttonizer.as et configurez-le en tant que classe de document de votre fichier FLA. Voici le code de base:
package import flash.display.MovieClip; Classe publique Buttonizer étend MovieClip fonction publique Buttonizer ()
(Si vous n'êtes pas familier avec l'utilisation d'une classe de document, consultez cette introduction rapide.)
Pour prouver que le code fonctionne, nous allons changer le texte sur le bouton. Dans la FLA, attribuez au bouton un nom d'instance de le bouton (imaginative), puis dans votre fonction constructeur, ajoutez cette ligne de code:
theButton.label = "Buttonize";
Appuyez sur Maj-F12, fermez et rouvrez le panneau et vous verrez que le texte a changé..
Sinon, vérifiez que vous avez lié le fichier FLA à la classe de document et nommé le bouton..
Mettons une fonction pour gérer le bouton enfoncé:
Accentsconagua
package import flash.display.MovieClip; import flash.events.MouseEvent; Classe publique Buttonizer étend MovieClip fonction publique Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); fonction privée onClickTheButton (a_event: MouseEvent): void trace ("Bouton cliqué"); Rien de compliqué là-bas. J'ai utilisé une trace () pour m'assurer que tout est correctement branché. Rechargez le panneau et assurez-vous qu'il fonctionne.
Oh… ça ne marche pas?
C'est vrai; la fonction trace () AS3 ne trace pas les résultats dans le panneau de sortie lorsqu’elle est exécutée à partir d’un autre panneau. Je déteste travailler sans trace (), nous devrons donc contourner cela d'une manière ou d'une autre.
Dans mon tutoriel JSFL, je vous ai montré la fonction JavaScript fl.trace (). Il trace le texte dans le panneau de sortie, mais est exécuté dans l'environnement de création Flash lui-même plutôt que depuis une fenêtre de Flash Player. C'est génial - cela signifie que nous pouvons l'exécuter depuis notre panel!
Mais nous ne pouvons pas simplement taper fl.trace ("Bouton cliqué"); dans notre code AS3, car ce n'est pas une fonction AS3. Nous devons dire à Flash d’exécuter ceci en tant que JSFL, et pour ce faire, nous utilisons la fonction adobe.utils.MMExecute (), qui est AS3:
package import adobe.utils.MMExecute; // n'oublie pas ça! import flash.display.MovieClip; import flash.events.MouseEvent; Classe publique Buttonizer étend MovieClip fonction publique Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); fonction privée onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.trace ('Button clicked');"); // les guillemets deviennent confus MMExecute () prend une chaîne et l'exécute en tant qu'appel JSFL. Il est complètement ignoré par la fenêtre de Flash Player.
Si vous testez cela maintenant, cliquez sur le bouton pour accéder au panneau de sortie. Excellent.
Il serait gênant de prendre un script plus long et de le pousser via un appel MMExecute (). Au lieu de cela, nous pouvons enregistrer le fichier JSFL dans un fichier de script et dire à Flash d’exécuter ce programme..
Si vous avez suivi mon tutoriel JSFL, vous aurez déjà un fichier Buttonize.jsfl; sinon, copiez le code suivant dans un nouveau fichier JSFL:
if (fl.getDocumentDOM (). selection.length == 1) if (fl.getDocumentDOM (). selection [0] .elementType == "text") var textLeft = fl.getDocumentDOM (). selection [0] .X; var textTop = fl.getDocumentDOM (). selection [0] .y; var textRight = fl.getDocumentDOM (). selection [0] .x + fl.getDocumentDOM (). selection [0] .width; var textBottom = fl.getDocumentDOM (). selection [0] .y + fl.getDocumentDOM (). selection [0] .height; var textText = fl.getDocumentDOM (). selection [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ('button', textText, 'en haut à gauche'); var lib = fl.getDocumentDOM (). library; if (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); else lib.setItemProperty ('linkageExportForAS', false); lib.setItemProperty ('linkageExportForRS', false); lib.setItemProperty ('scalingGrid', false); fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0); Enregistrez-le sous Buttonize.jsfl n'importe où sur votre disque dur. Vous pouvez maintenant exécuter ce script en appelant (en AS3):
MMExecute ("fl.runScript ('(chemin d'accès à votre script)' + '/Buttonize.jsfl')"); Pour simplifier les choses, déplacez votre fichier JSFL dans votre répertoire WindowSWF. Vous pouvez maintenant remplacer '(chemin d'accès à votre script)' avec fl.configURI + 'WindowSWF /'. Essayons-le:
package import adobe.utils.MMExecute; import flash.display.MovieClip; import flash.events.MouseEvent; Classe publique Buttonizer étend MovieClip fonction publique Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); fonction privée onClickTheButton (a_event: MouseEvent): void MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl')"); Commencez une nouvelle FLA, créez du texte, sélectionnez-le et cliquez sur le bouton Buttonize. Il devrait se transformer en un bouton, tout comme le script normalement.
De retour dans le FLA Buttonizer, faites glisser un ColorPicker et une étiquette des composants de l'interface utilisateur sur la scène. Nous allons utiliser le sélecteur de couleur pour changer la couleur du texte dans l'état Down du bouton. Disposez les composants de manière appropriée:
Donnez au sélecteur de couleur un nom d'instance de downColorPicker.
Nous devrons passer la couleur de ColorPicker au script Buttonize, mais nous allons d’abord transformer le script en une fonction permettant d’accepter des arguments..
Modifiez-le comme suit:
function makeButtonFromText (downColor) if (fl.getDocumentDOM (). selection.length == 1) if (fl.getDocumentDOM (). selection [0] .elementType == "text") var textLeft = fl.getDocumentDOM ( ) .sélection [0] .x; var textTop = fl.getDocumentDOM (). selection [0] .y; var textRight = fl.getDocumentDOM (). selection [0] .x + fl.getDocumentDOM (). selection [0] .width; var textBottom = fl.getDocumentDOM (). selection [0] .y + fl.getDocumentDOM (). selection [0] .height; var textText = fl.getDocumentDOM (). selection [0] .getTextString (); fl.getDocumentDOM (). convertToSymbol ('button', textText, 'en haut à gauche'); var lib = fl.getDocumentDOM (). library; if (lib.getItemProperty ('linkageImportForRS') == true) lib.setItemProperty ('linkageImportForRS', false); else lib.setItemProperty ('linkageExportForAS', false); lib.setItemProperty ('linkageExportForRS', false); lib.setItemProperty ('scalingGrid', false); fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0); Nous devons maintenant modifier l'appel MMExecute () pour faire référence à cette fonction spécifique dans le script. Tout ce qui est nécessaire est de passer le nom de la fonction en tant que second paramètre:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Pour chaque argument que nous souhaitons transmettre à la fonction JSFL, nous ajoutons simplement un autre paramètre à l'appel MMExecute (). Donc, pour passer la couleur sélectionnée:
MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + downColorPicker.selectedColor.toString () + ")"); Nous devons sortir des guillemets doubles pour inclure cet argument, puisque nous l'obtenons via AS3 et non via JSFL. C'est désordonné, et plus qu'un peu déroutant, je sais.
Ajoutons une simple trace à la fonction JSFL pour s’assurer que cela fonctionne:
fonction makeButtonFromText (downColor) fl.trace ("color:" + downColor); if (fl.getDocumentDOM (). selection.length == 1) (Comme il se situe au-dessus de la condition de sélection, vous pouvez voir le tracé sans avoir à boutonner du texte.)
Je l'ai essayé en noir puis en blanc, et voici ce qui est apparu dans le panneau de sortie:
couleur: 0
couleur: 16777215
On dirait que ça marche pour moi.
Pour savoir ce que JSFL doit utiliser pour changer la couleur du texte, utilisez l’astuce du tut JSFL; appuyez sur "Sélectionner tout", puis changez la couleur de remplissage et jetez un coup d'oeil au code dans le panneau Historique:
fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor ('# 009999'); Uh-oh. Allons-nous devoir convertir la couleur uint obtenue du ColorPicker en chaîne HTML? Heureusement non. la page d’aide document.setFillColor () nous indique que nous pouvons utiliser le format.
Donc, tout ce que nous avons à faire est d’insérer ce nouveau script au bon endroit. Puisque le cadre "Down" est le troisième, nous devrions l'insérer après le deuxième convertToKeyframes () appel:
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). selectAll (); // nouvelle ligne fl.getDocumentDOM (). setFillColor (downColor); // nouvelle ligne fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). addNewRectangle (left: textLeft, top: textTop, right: textRight, bottom: textBottom, 0); Cela marche:
Ajouter un nouveau ColorPicker (overColorPicker) et Label pour permettre à l'utilisateur de changer la couleur du texte "Sur":
Modifiez la signature de la fonction JSFL pour accepter cette autre couleur:
fonction makeButtonFromText (overColor, downColor)
Pendant l’édition de la fonction JSFL, nous pourrions aussi bien ajouter le script pour changer la couleur de l’état "Over":
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). getTimeline (). convertToKeyframes (); fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor (overColor); Modifions maintenant l'appel à MMExecute () dans l'AS3 afin qu'il transmette la couleur "Over":
MMExecute ("fl.runScript (fl.configURI +" WindowSWF / "+" /Buttonize.jsfl "," makeButtonFromText "," + overColorPicker.selectedColor.toString () + "," + downColorPicker.selectedColor.toString () ) "); … Ugh. C'est trop compliqué et ça va empirer. Comment pouvons-nous régler ceci?
Steven Sacks et Steven Hargrove ont mis au point une petite fonction bien conçue pour faciliter cet appel. Je l'ai adapté ici:
fonction privée runButtonizeScript (… args): String if (args.length> 0) return MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText'," + args .join (",") + ");"); else return MMExecute ("fl.runScript (fl.configURI + 'WindowSWF /' + '/Buttonize.jsfl', 'makeButtonFromText')"); Alors maintenant, nous pouvons appeler:
fonction privée onClickTheButton (a_event: MouseEvent): void runButtonizeScript (overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Beaucoup plus propre!
Ajouter de nouveaux composants:
Changer la signature de la fonction JSFL:
fonction makeButtonFromText (upColor, overColor, downColor)
Faire en sorte que JSFL change la couleur du texte:
fl.getDocumentDOM (). enterEditMode ('inPlace'); fl.getDocumentDOM (). selectAll (); fl.getDocumentDOM (). setFillColor (upColor); Passez la couleur "Up" à JSFL depuis AS3:
fonction privée onClickTheButton (a_event: MouseEvent): void runButtonizeScript (upColorPicker.selectedColor.toString (), overColorPicker.selectedColor.toString (), downColorPicker.selectedColor.toString ());
Essaye-le:
Brillant. Il ne reste qu'une chose.
Les chances sont, l'utilisateur va vouloir coller avec la couleur qu'ils ont choisie pour le texte pour au moins un des trois états. Mais nous commençons les trois ColorPickers avec le noir comme couleur sélectionnée.
Nous devons donc maintenant récupérer la couleur de remplissage existante de l'objet texte et utiliser JSFL pour la transmettre au panneau, puis utiliser AS3 pour modifier la couleur des ColorPickers. C'est le contraire de ce que nous avons fait, vraiment.
Où dans notre code AS3 devrions-nous définir la couleur de nos sélecteurs, cependant? Je vois trois choix:
Donc, ajoutez un nouveau bouton au Buttonizer, intitulé "Set Defaults". Donnez-lui un nom d'instance de setDefaults.
De retour dans Buttonizer.as:
fonction publique Buttonizer () theButton.label = "Buttonize"; theButton.addEventListener (MouseEvent.CLICK, onClickTheButton); setDefaults.addEventListener (MouseEvent.CLICK, onClickSetDefaults); fonction privée onClickSetDefaults (a_event: MouseEvent): void
Juste pour nous assurer que cela fonctionnera lorsque nous aurons les données correctes:
fonction privée onClickSetDefaults (a_event: MouseEvent): void var defaultColor: int = 0x000000; // noir upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor;
Assurez-vous que cela fonctionne en définissant des couleurs aléatoires, puis en cliquant sur le bouton Définir par défaut. Il devrait les réinitialiser tous au noir.
La fonction MMExecute () renvoie la valeur de retour de toute fonction exécutée. (Si plusieurs fonctions sont exécutées, la valeur renvoyée par la dernière est renvoyée.)
Pour obtenir la couleur du texte sélectionné, nous pouvons utiliser la fonction JSFL document.getCustomFill ('selection'). Ceci retourne un objet Fill, dont Couleur la propriété est ce dont nous avons besoin. Ainsi, nous pouvons obtenir la couleur comme suit:
MMExecute ("document.getCustomFill ('selection') .color"); Ce n'est en fait pas tout à fait ce que nous souhaitons, car il renvoie la couleur au format CSS String: "# AA43E2", par exemple. J'ai écrit un peu de code supplémentaire pour convertir ceci au format uint dont nous avons besoin:
fonction privée onClickSetDefaults (a_event: MouseEvent): void var cssFormatDefaultColor: String = MMExecute ("document.getCustomFill ('selection') .color"); cssFormatDefaultColor = cssFormatDefaultColor.replace ("#", "0x"); var defaultColor = uint (cssFormatDefaultColor); upColorPicker.selectedColor = defaultColor; overColorPicker.selectedColor = defaultColor; downColorPicker.selectedColor = defaultColor; Essayez ceci:
Impressionnant :)
Retournez à ce que vous avez appris. Vous pouvez désormais créer vos propres panneaux dans Flash, exécuter des commandes et des scripts JSFL, transmettre des données d'un panneau à la scène et même obtenir des données de la scène à utiliser dans le panneau. félicitations!
