Les diverses utilisations de Director
Les bases de Director
Ceux qui ont déjà ouvert des programme comme Flash ou Adobe Premiere (ou n'importe quel autre programme de montage) ne seront pas trop dépaysés en ouvrant Director.
L'interface contient les éléments suivant :
- Une scène (stage en anglais) qui sert à visualiser le travail encours
- Une ligne du temps (timeline) constituée de sprites (couches) et de frames (images)
- Une distribution (cast en anglais) qui contient tous les acteurs (members en anglais) qui sont les fichiers importés.
- Une barre d'outils
- Une barre de propriétés
Ainsi, Director porte bien son nom puisque nous plaçons des acteurs sur la scène, qui évolueront dans le temps.
Les scripts
Parmis tous les types d'acteurs possibles, il existe les scripts. Ce sont ces derniers qui contiennent les instructions de programmation.
Il en existe 3 types :
- scripts d'animation (movie) qui affectent toute l'application
- scripts de comportement (behavior) qui affectent un sprite
- scripts parent, qui ne sont utilisés qu'en programmation complexe (POO)
Pour spécifier le type d'un script, il suffit de modifier la valeur dans le panneau de propriétés (à droite). Ceci modifiera visuellement l'icone attribuée au script.
Il est très important de bien définir le type de script, car il détermine les évènements Director disponibles.
Les diverses utilisations de Director
Director peut donc s'utiliser de plusieurs manières que je vais citer avant de développer :
- de manière très simple, en plaçant les éléments sur la timeline, avec très peu de code
- toujours en utilisant la timeline, mais en programmant certains comportements
- n'utilisant plus de timeline, en programmant le tout
- en programmant le tout, en utilisant la POO (programmation orientée objet)
Pour ce tutorial, je vais prendre comme exemple une scène avec un bouton et un texte. Et lorsque l'utilisateur clique sur le bouton, l'opacité du texte changera (passera de 100 à 10 pourcents).
1/ Timeline
Bien, nous commençons. La scène est encore vide mais vous avez déjà créé ou importé un bouton (que nous nommerons “bouton_btn”) et un texte (que nous nommerons “texte_txt”).
Pour placer le bouton sur la timeline, il suffit de faire un drag&drop.
Placez le sur le sprite 1, en commençant à la frame 1, puis ajustez la longueur (drag&drop sur la dernière image du sprite) pour que la dernière image soit à 50.
Faites ensuite de même pour le texte, mais sur le deuxième sprite.
Les éléments sont placés, mais rien ne se passe encore, il nous reste à préparer le changement d'opacité.
Faites un clic droit sur le sprite 2 (contenant notre texte) à la frame 25 et cliquez sur “Insérez une image clés”, puis refaites l'opération à la frame 50.
Vous remarquerez que vous avez créé des petits ronds sur ces images.
Cliquez sur le petit rond à la frame 50, puis dans l'inspecteur de propriétés modifiez le pourcentage d'opacité de l'encre (que vous pouvez laisser en copy) pour l'amener à 10.
Si vous appuyez sur play, vous verrez que l'animation tourne en boucle. C'est normal, il manque les stop.
Nous allons programmer un script de comportement que nous appelerons “stop”.
Cliquez sur l'avant dernière icone du menu supérieur “Fenêtre de script” et écrivez le code suivant :
on exitframe me go to the frame end
Ce qui signifie “lorsque je quitte cette frame, je reviens dessus”…
Placez ensuite ce script de comportement (vérifiez bien qu'il est défini comme tel dans l'inspecteur de propriétés) sur la timeline, sur le sprite 0 (sprite réservé au code seul) à la frame 25 et 50.
Relancez l'application, la tête de lecture s'arrête bien à la frame 25, il ne reste plus qu'à coder le bouton.
Créez un nouveau script de comportement appelé “bouton_script” et qui contiendra le code suivant :
on mouseup me -- Envois la tête de lecture à la frame 26 -- go to frame(26) end
Placez ensuite ce script sur le sprite 1 (contenant notre bouton).
Désormais, l'application fonctionne correctement ; lorsque l'on clique sur le bouton, le texte disparait peu à peu.
Vous venez donc de créer votre première application Director !
En utilisant plusieurs “go to frame()” à diverses endroit vous pourrez déjà créer facilement des présentations interactives.
Note : Il est tout à fait possible d'utiliser Director sans écrire de script et programmer.
En effet, il existe également de nombreux comportements pré-existants dans Director, utilisables à partir de la bibliothèque.
Nous aurions donc pu réaliser cet exemple sans devoir programmer le “stop” et le “go to”.
2/ Programmation et timeline
Repartez d'un fichier vierge contenant uniquement votre bouton, votre texte et un script stop.
Préparez votre scène en plaçant à nouveau le bouton en sprite 1 de la frame 1 à 50, le texte sur le sprite 2 de la frame 1 à 50 et le stop à la frame 50 (le nombre de frame n'a aucune importance, mais nous resterons cohérents et visuels en utilisant ce chiffre).
Nous allons ensuite programmer le comportement de notre texte, appelé “texte_script”, comme ceci :
property pActivated on beginsprite me -- initialise la variable de propriété pActivated -- pActivated = false end on changeStatut me -- change le statut de la variable de propriété pActivated -- if pActivated = true then pActivated = false else pActivated = true end if end on exitframe me -- Boucle d'animation -- if pActivated = true then if sprite(me.spritenum).blend > 10 then -- tant que l'opacité est plus élevée que 10, on la diminue -- sprite(me.spritenum).blend = sprite(me.spritenum).blend - 5 end if else if sprite(me.spritenum).blend < 100 then -- tant que l'opacité est plus petite que 100, on l'augmente -- sprite(me.spritenum).blend = sprite(me.spritenum).blend + 5 end if end if end
Reste à programmer le script du bouton, toujours appelé “bouton_script”, pour qu'il appelle la fonction “changeStatut” :
on mouseup me sendSprite(2, #changeStatut) end
Voilà, le tout fonctionne correctement, et ce dans les deux sens !
En effet, puisque nous avons programmé un simple changement de statut, il était assez simple de gérer l'apparition/disparition du texte avec le même bouton.
3/ Programmation sans timeline
Tout ce que nous allons faire dans cette exemple, c'est tout retirer de la timeline (sauf le stop) et remplacer cette phase manuelle par de la programmation.
Pour ce faire nous allons utiliser un script de movie, appelé “global” que nous allons compléter comme ceci :
global gTexteSprite on startmovie -- place le bouton -- tSp = findEmptyChannel(1) channel(tSp).makescriptedsprite(member("bouton_btn"), point(320,160)) -- place le script sur le bouton -- tScript = script("bouton_script").new() sprite(tSp).scriptInstanceList.add(tScript) -- place le texte -- tSp = findEmptyChannel(tSp) channel(tSp).makescriptedsprite(member("text_txt"), point(62,231)) -- place le script sur le texte -- tScript = script("texte_script").new() sprite(tSp).scriptInstanceList.add(tScript) -- Retiens le numéro du sprite du texte dans une variable globale -- gTexteSprite = tSp end on findEmptyChannel tStart -- Fonction trouve le premier sprite vide et retourne sa valeur -- tSprite = 0 repeat with i = tStart to 150 if sprite(i).membernum = 0 then if sprite(i).puppet = false then tSprite = i exit repeat end if end if end repeat return tSprite end
Et pour enfin pouvoir se détacher complètement de la gestion des sprites, nous devons modifier le bouton_script comme ceci :
global gTexteSprite on mouseup me -- utilisation de la variable globale plutôt qu'un integer fixe -- sendSprite(gTexteSprite, #changeStatut) end
Voilà, votre application fonctionne, et vous n'avez plus à gérer vous même les sprites. Ceci peut s'avérer très pratique lors de programmes complexes qui créent et effacent de nombreux sprites à la volée.
4/ La programmation orientée objet
La POO est une programmation particulière, je vous invite à parcourir les tutoriaux dédiés uniquement à ce sujet.
Pour cette exemple, nous aurions probablement créé un objet “texte” et un objet “bouton” que nous aurions pu faire interagir entre eux utilisant des assesseurs et des mutateurs.
En savoir plus
