Dynamiser les scripts JSFL

Comme nous l'avons vu au tutorial précédent (Introduction au JSFL) nous pouvons manipuler l'environnement Flash par l'intermédiaire de commandes Javascript, cependant à la fin de ce tutorial nous atteignions une limitation importante, celle de ne pouvoir passer des variables au script afin de le rendre plus dynamique. Nous allons traiter de cet aspect du JSFL dans ce tutorial.

Pour des raisons obscures, Macromedia a choisi de supprimer le menu "Redimensionner et faire pivoter" au profit du panneau "Transformer" alors que les deux approches sont complètement différentes, le menu "Redimensionner et faire pivoter" travaille avec des valeurs relatives alors que le panneau "Transformer" applique des transformations absolues, chaque approche a donc sa place ! Nous allons donc en profiter pour recréer l'option "Redimensionner et faire pivoter". Dans un premier temps nous allons créer un panneau personnalisé et voir comment transmettre les informations saisies dans ce panneau à un script JSFL, ensuite nous reproduirons le menu "Redimensionner et faire pivoter" à l'identique de l'original en recréant une boite de dialogue qui elle même exécutera un script JSFL auquel elle aura transmis les données saisies par l'utilisateur. Le script JSFL exécuté sera toujours le même cependant les interfaces utilisateurs (panneau personnalisé et boite de dialogue) ne sont pas conçues de la même façon. Encore une fois les deux approches ont leur avantages et inconvénients et chacune semblera plus adaptée dans un cas ou un autre, à vous de choisir.

Le script JSFL que nous allons créer permet de redimensionner proportionnellement et appliquer une rotation à une forme ou un symbole. Première étape, réaliser l'opération dans l'environnement auteur et voir si le panneau Historique est capable de mémoriser les commandes. Si c'est le cas il suffira d'enregistrer les actions dans un script JSFL et de l'éditer.

Dans un premier temps créez une forme, convertissez la en clip d'animation, sélectionnez le clip. Appliquez lui une transformation proportionnelle puis une rotation. Votre panneau historique devrait ressembler à ça:

Comme à la figure précédente, sélectionnez les deux dernières actions dans le panneau historique et sauvegardez les sous le nom "Redimensionner et faire pivoter". Une fois l'opération réalisez, éditez le fichier JSFL (C:Documents and Settings%user%Local SettingsApplication DataMacromediaFlash MX 2004frConfigurationCommands sur PC (ou l'équivalent Mac)):

// Portions Copyright 1999-2002 Macromedia, Inc. All rights reserved.
//
// Redimensionner et faire pivoter
//

// Scale: 1.37, 1.37
fl.getDocumentDOM().scaleSelection(1.37, 1.37);

// Rotate: 32.2
fl.getDocumentDOM().rotateSelection(32.2);

Essayez maintenant de réexecuter votre commande à partir du menu "Commandes", vous constaterez que le clip sélectionné est de nouveau redimensionné et tourné. Créez un autre clip ou tout simplement une forme, sélectionnez le et exécutez votre commande, l'opération de redimensionnement et de rotation marche parfaitement. Votre script est donc tout correct et fonctionne pour tous les objets, seul ennui il applique systématiquement le même redimensionnement et la même rotation. Nous allons voir comment fournir des données variables au script JSFL dans la prochaine section.

Création d'un panneau personnalisé utilisant JSFL

Depuis Flash MX il est possible d'ajouter des panneaux personnalisés à l'environnement Flash, un bon exemple est le r_board. Un panneau personnalisé est tout simplement un fichier swf indépendant placé dans un dossier particulier de Flash:

C:Documents and Settings%user%Local SettingsApplication DataMacromediaFlash MX 2004frConfigurationWindowSWF sur PC (ou l'équivalent Mac)

A partir de cet instant (une fois flash fermé puis rouvert) vous pouvez accéder à ce swf en tant que panneau personnalisé via le menu Fenêtre>Autre panneaux. Une fois que vous avez cliqué sur le menu correspondant à votre swf, le swf s'ouvre sous la forme d'un panneau flash que vous pouvez ancrer ou non aux autres panneaux. Dans Flash MX, les panneaux personnalisés ne pouvaient agir sur l'environnement auteur et avaient donc une utilité spécifique (r_board) ou très restreinte.

Avec Flash MX 2004 et le JSFL, les panneaux personnalisés peuvent piloter l'environnement auteur et étendre véritablement les fonctionnalités de Flash. Vous pouvez facilement concevoir des petits outils personnels jusqu'a des plugins très sophistiqués.

Le panneau personnalisé que nous allons créer est très simple, créez deux champs texte de saisie ayant pour nom d'occurrence echelle_txt et rotation_txt. Ensuite créez deux boutons qui auront pour nom d'occurrence reset_btn et ok_btn. Voila à quoi doit ressembler votre animation:

Il nous reste maintenant à ajouter le code.

Pour éviter le redimensionnement du panneau personnalisé insérez ce code sur la première image du calque action que vous aurez ajouté:

Stage.scaleMode="noscale";
Stage.align="TL";

Ajoutez le code suivant à la suite pour définir le gestionnaire onRelease du bouton reset, ce bouton est simplement chargé de remettre les valeurs de transformation à leur valeur d'origine.

// bouton de remise à zéro
reset_btn.onRelease=function () {

echelle_txt.text=100;
rotation_txt.text=0;

}

Il ne nous reste plus qu'a créer le code du bouton OK. Le code placé sur ce bouton doit transmettre les valeurs entrées dans les champs de saisie à un script JSFL et l'exécuter.

En réalité le langage ActionScript possède une fonction MMExecute() qui permet d'exécuter directement un script JSFL passé à la fonction sous forme de chaîne de caractère. MMExecute ne fonctionne qu'au sein d'un panneau personnalisé, ni dans un swf indépendant ni dans l'environnement auteur, ne l'oubliez pas quand vous créerez vos panneaux personnalisés. MMExecute attendant une chaîne de caractère en tant que commande JSFL, il nous suffit donc de créer cette chaîne en profitant des valeurs fournies par les champs de saisie:

// création et exécution de la commande JSFL
ok_btn.onRelease=function () {

var lEchelle=Number(echelle_txt.text)/100;
var lCommande="fl.getDocumentDOM().scaleSelection("+lEchelle+", "+lEchelle+");";
lCommande+="fl.getDocumentDOM().rotateSelection("+rotation_txt.text+");";
MMExecute(lCommande);

}

Vous pouvez maintenant sauver votre fichier, le placer dans le dossier windowSWF, ouvrir et fermer Flash, ouvrir votre panneau personnalisé et profiter de d'une panneau "Redimensionner et faire pivoter" appliquant un dimensionnement relatif comme la boite de dialogue de Flash MX.

Télécharger le fichier complet :

  redimensionner.zip (178.11 KB)