Création d'éléments pour l'interface utilisateur
After Effects met à notre disposition une structure Javascript permettant de créer des éléments pour l'interface utilisateur.
Il existe différents types d'éléments (panneaux, champs de texte, boutons de commande, cases à cocher, barres de défilement...)
qui ont tous pour but d'interagir avec l'utilisateur
afin qu'il puisse contrôler plus directement l'action d'un script.
Les éléments de type bouton, case, slider (curseur) ou texte sont inclus dans un conteneur "Window". Cet objet Window
possède plusieurs attributs dont le principal est sa taille ( bounds ).
On n'écrit pas directement sa taille mais on l'exprime plutôt sous forme d'un tableau représentant les coordonnées du coin supérieur gauche et inférieur droit de la fenêtre,
l'origine du repère étant le coin supérieur gauche de notre application After Effects. Nous délimitons ainsi une zone rectangulaire.
Il existe deux types d'objet Window, la fenêtre de type palette et la fenêtre de type dialog.
Pour cette dernière nous pouvons préciser un nom à afficher dans la bordure supérieure de la fenêtre.
Tous les éléments que l'on peut ajouter dans cet objet "Window" sont disposés dans ce conteneur en précisant leurs coordonnées (coordonnées du coin supérieur gauche et du coin inférieur droit).
On les exprimera par contre par rapport au coin supérieur-gauche du conteneur.
Lorsque l'on ajoutera des éléments éditables ou cliquables (comme des éléments de type button (bouton) par exemple)
il faudra leur associer une action.
A chacune de ces actions il faudra définir une fonction (" function nomFonction(parametres eventuels) {...instructions...;} "),
qui correspondra à l'action que l'on souhaite exécuter.
Chaque classe d'éléments possède ses propres méthodes. On retrouvera par exemple la méthode onClick() pour un élément de type "button" et la méthode onChange() pour un champ de texte éditable.
Nous pourrons consulter le Scripting Guide pour avoir un descriptif de toutes les classes d'élément ainsi que leurs méthodes.
Un exemple complet
Nous allons voir dans cette partie l'intégralité d'un script qui pourra servir d'exemple pour nos futurs scripts en matière d'interface utilisateur.
Il aide à comprendre comment se servir de ces éléments pour interagir avec l'utilisateur.
note : ce script n'a qu'un objectif pédagogique.
Notre allons créer la palette suivante ainsi que les fonctionnalités de ses boutons.
Descriptif de la palette
Notre objet Window principal est de type palette (image du haut). Il contient un champ de texte statique et quatre éléments de type button.
L'un d'eux permet d'ouvrir un deuxième objet Window qui lui est de type dialog (image du bas).
Cette seconde fenêtre contient un titre dans sa bordure, un champ de texte statique ( statictext ) et un élément de type button.
Le bouton 'Solide' crée un solide de couleur aléatoire dans une composition existante (et active), sa taille et son format de pixel sont ceux de la composition.
Le bouton 'Date' crée un calque texte contentant la date à laquelle le bouton a été cliqué.
Le bouton 'clean' supprime tous les calques de la composition.
Le bouton '?' ouvre une nouvelle fenêtre contenant les informations relatives au script.
Le bouton "OK" est reconnu comme tel et il ne sera pas nécessaire de lui spécifier son rôle (cliquer dessus fermera la fenêtre)
Le script au complet
Nous regardons maintenant le script au complet pour se faire un apercu global
et nous reviendrons ensuite en détail sur chacune des parties pour les expliquer
(des commentaires "//..." se trouvent dans le code également).
{
// "palette_test.jsx"
// ecrit par nab pour le Repaire des Scripts
// 12.2005
/////////////////////////////////////
// FONCTIONS LIEES AUX BOUTONS
/////////////////////////////////////
// fonction appelee lorsque le bouton Solide est clique
function on_Solide_click() {
// cree un solide de couleur aleatoire
var W = myComp.width; var H = myComp.height; var PixAsp = myComp.pixelAspect;
var R = Math.random(); var G = Math.random(); var B = Math.random();
myComp.layers.addSolid([R,G,B],"monSolide",W,H,PixAsp);
}
// fonction appelee lorsque le bouton Date est clique
function on_Date_click() {
// cree un calque texte avec la date
myComp.layers.addText(Date());
}
// fonction appelee lorsque le bouton clean est clique
function on_clean_click() {
// supprime tous les calques de la comp
var i = myComp.numLayers;
while(i >= 1) {
myComp.layer(i).remove();
i--;
}
}
// fonction appelee lorsque le bouton ? est clique
function on_about_click() {
var aboutWindow = new Window("dialog", "About");
aboutWindow.bounds = [400, 300, 600, 410];
aboutWindow.add("statictext", [10,5,180,75], " Palette Test by nab, 12.2005\r\r" +
"Solide crée un solide\r" +
"Date affiche la date\r" +
"clean supprime tous les calques");
aboutWindow.add( "button", [70,80,130,100],"OK" );
aboutWindow.show();
}
//////////////////////////
// SCRIPT PRINCIPAL
//////////////////////////
var myProj = app.project;
// si pas de projet alors message d'alerte
if (!myProj)
alert("Vous n'avez pas de projet ouvert.");
else {
// si pas de comp ou comp pas active alors message d'alerte
var myComp = myProj.activeItem;
if (myComp == null || !(myComp instanceof CompItem))
alert("Vous n'avez pas de composition active.");
else {
// creation de la palette
var myPalette = new Window("palette");
myPalette.bounds = [500,400,700,455];
// ajout texte statique
myPalette.add("statictext",[80,5,140,25],"Palette Test");
// ajout boutons
var SolideButton = myPalette.add("button",[10,30,60,50],"Solide");
var DateButton = myPalette.add("button",[70,30,120,50],"Date");
var cleanButton = myPalette.add("button",[130,30,180,50],"clean");
var aboutButton = myPalette.add("button",[177,5,195,25],"?");
// appel des fonctions liees au click
SolideButton.onClick = on_Solide_click;
DateButton.onClick = on_Date_click;
cleanButton.onClick = on_clean_click;
aboutButton.onClick = on_about_click;
// affiche la palette
myPalette.show();
}
}
}
Explications
Lorsqu'un script est exécuté, l'évaluation commence toujours par la partie principale (le "main" ou le "body"), les fonctions quant à elles s'exécutent
uniquement lorsqu'une instruction dans le "main" fait appel à elles. Nos explications suivront le sens de parcours du script.
Script principal
Les premières lignes s'assurent de l'existence d'un projet, s'il n'existe pas ( if(!myProj) ), on utilise la méthode alert() pour avertir l'utilisateur.
Si le projet existe on vérifie que l'élément actif est une compositon, si cet élément n'existe pas ( myComp == null) ou s'il n'est pas une composition
( !(myComp instanceof CompItem) ), on prévient également l'utilisateur avec la méthode alert().
Une fois que ces vérifications ont été effectuées, le script continue. On définit une variable "myPalette" qui représentera un objet Window de type palette. Nous précisons ensuite les coordonnées de cette palette par rapport à la fenêtre After Effects.
Le coin supérieur gauche de la palette sera situera à 500 pixels de la bordure gauche et 400 pixels de la bordure du haut. On utilise l'attribut bounds pour définir les coordonnées des deux coins (supérieur gauche et inférieur droit) de la palette.
On ajoute un élément dans la palette grâce à la méthode add(). Cet élément est de type statictext ce qui signifie que le texte sera affiché en permanence sur la palette et que son champ ne sera pas éditable.
Nous précisons ses coordonnées par rapport au coin supérieur gauche de la palette ainsi que le texte qui sera affiché dans cette zone (myPalette.add("statictext",[80,5,140,25],"Palette Test");).
Nous ajoutons ensuite de la même manière quatre nouveaux éléments, tous de type button, en précisant les coordonnées de la zone qui fera office de bouton ainsi que le texte qui apparaîtra dessus.
Notre palette est construite, très bien. Maintenant nous devons assigner aux boutons des actions. On appelle également cela la "gestion d'évènements". Les éléments de type button possède une méthode onClick() qui agit lorsqu'un click survient sur le bouton.
Si tel est le cas, nous appelons alors la fonction correspondant au bouton cliqué, par exemple SolideButton.onClick = on_Solide_click;. On fait appel à une fonction simplement en mentionnant son nom. Nous faisons de même pour tous les boutons, chaucn ayant sa propre fonction.
Nous terminons le script principal en utilisant la méthode show() qui permet d'afficher la palette à l'écran (myPalette.show();).
Fonctions liées aux boutons
function on_Solide_click()
On définit les variables qui serviront de paramètres pour créer le solide.
On récupère les caractéristiques de la composition (largeur, hauteur et format des pixels) et on calcule trois nombres aléatoires
(entre 0 et 1) que nous utilisons comme couleurs pour le solide.
On se sert ensuite de la méthode addSolid() pour accomplir la tâche. On se rappelle que cette méthode n'agit pas directement sur la composition mais sur sa collection de calques appelée "layers" ( myComp.layers.addSolid([R,G,B],"monSolide",W,H,PixAsp); ).
function on_Date_click()
On crée un calque texte avec la méthode addText(),
on précise l'objet Date() pour chaîne de caractères à afficher. Le calque texte contiendra ainsi la date à
laquelle la fonction a été exécutée, c'est à dire le moment où le bouton a été cliqué ( myComp.layers.addText(Date()); ).
function on_clean_click()
On commence par définir la varible "i" comme étant le nombre de calques dans la composition ( var i = myComp.numLayers ). Ensuite tant que
la valeur de "i" est supérieure à 1 on supprime le calque d'indice "i". On supprimera toujours le calque du bas de la pile ( myComp.layer(i).remove(); ). Le nombre de calques diminuera c'est pourquoi nous faisons également
diminuer la valeur de note itérateur "i" d'une unité ( i--; ). Ainsi à chaque itération le calque du bas sera supprimé et le processus s'arrêtera une fois que la composition ne contiendra plus de calques ("i" sera alors égal à zéro).
function on_about_click()
On crée un nouvel objet Window qui sera cette fois de type dialog. Nous précisons le nom qui s'affichera dans la bordure supérieure de la fenêtre ( aboutWindow = new Window("dialog", "About"); ).
On créer un champ de texte statique qu'on place à l'aide des coordonnées de ses coins et qu'on remplit à l'aide d'une chaîne de caractères. Le \r permet de revenir à la ligne.
Nous lui ajoutons un élément de type button en précisant ses coordonnées par rapport au coin supérieur gauche de la fenêtre After Effects.
En le nommant "OK", on n'aura pas à spécifier d'action pour ce bouton,
il sera automatiquement reconnu comme tel et le fait de cliquer dessus fermera la fenêtre.
La dernière instruction utilise la méthode show() pour afficher la fenêtre.
Et voici à titre d'exemple d'autres types d'éléments que nous pouvons créer : un panneau ( panel ) au sein d'une fenêtre contenant deux slider et deux editText (à gauche), et une palette contenant deux radiobutton (à droite) :
|
