 |
 |
 |
|||
 |
|
 |
|||
 |
 |
 |
Un puzzle dans Director
nous vous proposons de suivre la réalisation d'un puzzle dans Director. La création puis le découpage des pièces du puzzle dans Illustrator et Photoshop constitue un préalable essentiel à la réalisation de ce travail. Parce que cette préparation révèle une astuce à utiliser aussi en PAO, nous en détaillons les étapes ici.
La création des pièces dans Illustrator 8
C'est dans Illustrator que commence notre travail. On réalise d'abord un tracé anguleux en 5 coups de plume puis, à l'aide de l'outil de conversion de points d'ancrage (un petit "V" à l'envers), on glisse sur le sommet du tracé jusqu'à obtenir la forme souhaitée. Une copie symétrique réalisée par double-clic sur l'outil miroir (deux triangle en vis-à-vis) permet alors de créer une première découpe (Troisième tracé sur notre copie d'écran).
On va maintenant faire pivoter à 90° une copie du tracé en le sélectionnant et en double-cliquant sur l'outil rotation. Dans la boîte de dialogue on n'oubliera pas de cliquer sur Copier. Le résultat (une "croix")est déplacée avec la touche option (Alt) enfoncée afin de construire par copie successives les "mailles" du puzzle.
C'est fait. Nous devons maintenant définir les dimensions de notre puzzle en plaçant un rectangle par dessus le maillage. Ce rectangle va jouer le rôle d'un emporte-pièce aussi nous devons veiller à ce qu'il coupe les pièces intelligemment:
Dans Illustrator 8, les commandes du Pathfinder sont accessibles via une palette flottante. Pour découper les seules pièces utiles nous appelons cette palette dans le menu Fenêtre, nous sélectionnons tous les tracés et choisissons Division.
Le résultat après Pathfinder/Division. Les tracés résultant sont tous associés. Il faut sélectionner avec la flèches blanche plus (+) les tracés transparents dont on n'a plus l'usage. La mise en couleurs des tracés restant permet de bien voir ceux qui doivent être fusionnés pour ne constituer qu'une pièce.
De nouveau, le Pathfinder est mis à contribution pour créer des pièces complètes sur les bords. Le puzzle est complet après sélection des tracés de même couleur et l'application de Pathfinder/Réunion. On sélectionne les tracés et on les copie dans le presse-papiers (Cmd - C).
Importation dans Photoshop 5
La suite, c'est dans Photoshop. On ouvre l'image que l'on souhaite découper (Afin que notre puzzle soit manipulable sur la scène de Director, une dimension de 320 x 240 pixels semble adaptée). On affiche la palette des couche et l'on clique sur l'icône de création de couche vierge (un petite page blanche cornée). C'est sur cette couche alpha que nous récupérons la tracé Illustrator en appelant la commande coller (Cmd - V). Photoshop propose alors de pixéliser le contenu du Presse-papiers ou de le restituer en tant que tracé. C'est ce dernier choix que nous faisons.
Dans Photoshop 5, rappelons-le, il est possible d'appliquer à un tracé les commandes de déformation (homothétie, rotation...). C'est grâce à cette nouvelle fonctionnalité que nous pouvons accorder notre tracé aux dimension finales de l'image.
Sur notre copie d'écran, le tracé est visible au dessus de la couche alpha. On appelle la commande "Transformer les points" pour l'accorder au dimension du document. Nous nous nous proposons de demander à Photoshop de reprendre au crayon les contours du tracé. Nous devons donc régler d'abord cet outil. Dans la palette des formes, on choisit une petite forme d'outil. Dans la palette des options du crayon accessible par double-clic sur l'outil, on s'assure que l'opacité est au maximum , le mode d'application normal, l'option Estomper décochée... Alors seulement on peut cliquer dans la palette des tracés sur l'icône "contours de tracé", "décalquant" ainsi, en blanc notre puzzle sur la couche alpha.
Cette couche va nous servir d'emporte-pièce mais auparavant nous allons nous en servir pour doter le puzzle d'un effet de biseau. Pour ce faire on commence par la dupliquer en la glissant sur l'icône de création de couche en bas de la palette des couches. Sur la copie on applique un flou gaussien léger qui atténue la dureté des traits blancs. Revenu su l'image composite RVB dans la palette des couche, on appelle le filtre éclairage (Menu Filtres/Rendu/Éclairage). Les réglages qui permettent ici d'obtenir un relief intéressant dépendent bien sûr de la photo choisie mais on peut suggérer facilement de choisir un éclairage de type projecteur au cône de lumière large, arrivant par le haut et la gauche. Dans le bas de la boîte de paramètrage, "Texture", on désigne la deuxième couche alpha et l'on joue des options afin d'obtenir l'effet de creux escompté. Nous pouvons dès lors découper les pièces une à une : On repasse sur la première couche alpha (dont les traits blancs sont nets), et c'est à l'aide de la baguette magique (tolérance 0, pas de lissage) que l'on sélectionne une première pièce. Un clic sur la "couche" RVB nous permet d'utiliser la sélection obtenue depuis la couche alpha, sur le document composite. La création d'un nouveau document par Fichier/Nouveau nous permet de copier/coller notre pièce de puzzle. Pour chacune, on procédera de la sorte : activation de la couche alpha et sélection d'une zone à la baguette magique. activation de la couche composite puis Copie à destination de l'autre document. Au final, on obtient un document de 12 calques dont chacun contient une pièce du puzzle. La dernière étape de notre travail dans Photoshop va consister à créer autant d'acteurs pour Director. On masque tous les calques sauf celui qui contient la pièce à enregistrer (Option/Alt clic sur l'œil devant ce calque) et l'on appelle la commande Enregistrer une copie du menu Fichier. Cette commande permet de créer une copie en forçant le format PICT, en aplatissant les calques visibles si nécessaire. Il nous faut répéter l'opération 11 fois.
Nos 12 acteurs sont fin prêts pour Director. Nous pouvons quitter Photoshop et lancer le logiciel auteur.
Montage dans Director
Un fois importées dans Director, les pièces sont disposées sur la scène dans leur position finale. Nous avons ajouté une forme rectangulaire créée avec l'outil forme, pour délimiter le puzzle. Nous souhaitons que Director fournisse une aide au placement des pièces lors du jeu à venir. Un magnétisme léger accompagné d'un "clic" devra permettre aux joueurs de savoir que la pièce a été bien placée. Nous allons pour obtenir cela marquer définitivement la position idéale de chaque pièces et ce sans prendre aucune note au crayon. On sélectionne dans le scénario les 12 pistes occupées par les sprites et on déplace l'intégralité de la sélection avec la touche Option/Alt afin de la recopier 10 pistes plus bas très exactement (pistes 21 à 32). On obtient donc une double parfait de notre jeu situé lui 10 piste plus bas. Nous devons maintenant créer un acteur bitmap de petite taille (nous créons un cercle rouge dans la fenêtre dessin) et l'envoyer remplacer les sprites 21 à 32 sur la scène. On sélectionne l'acteur bitmap dans la distribution puis les sprite dupliqués dans le scénario avant d'appeler la commande Échanger les acteurs du menu Édition. Notre copie d'écran plus bas montre le résultat de l'opération. Chaque pièce de puzzle (pistes 1 à 12) voit sa position marquée par un cercle rouge de petite taille (pistes 21 à 23) . Ces cercles rouges seront bien sûr rendu invisibles mais ils vont nous permettre de savoir si un pièce déplacée est approximativement bien placée (si elle approche le cercle qui correspond à sa place), et éventuellement d'ajuster la position d'une pièce (en la calant sur son cercle).
À ce stade nous pourrions considérer que notre travail de scénario est fini. Mais les pièces de puzzle lorsqu'on les déplace sur la scène passent parfois les unes au dessous des autres suivant leur ordre d'empilement dans le scénario. Nous ne saurions obliger les utilisateurs de notre puzzle à glisser les pièces SOUS le jeu !!! Pour éviter cet effet nous allons nous doter d'un deuxième jeu complet de pièces, placées, celles-ci, au-dessus du vrai puzzle. En substituant, lors de chaque déplacement, une pièce de ce jeu nous serons assurés que toujours les pièces déplacées passeront au dessus le jeu (les utilisateurs de D7 feront plus simplement appel eux à la propriétés locZ). Pour créer ce deuxième jeu, nous effectuons la copie des pistes 1 à 12 comme précédemment mais cette fois à destination des pistes 41 à 52. Immédiatement après la copie ces pistes sont rendues invisibles (on coche les boutons carrés placés en tête de chacune des pistes. Notre copie d'écran montre le scénario Director tel qu'obtenu après ces étapes. Pistes 1 à 12, les pièces du puzzle; pistes 21 à 32, les apparition de l'acteur bitmap marquant chaque emplacement final des pièces; piste 35, un acteur forme délimitant le puzzle; enfin piste 41 et suivantes, le jeu complet invisible résultat de notre copie.
Le dernier tableau (frame) doit recevoir un script immobilisant la tête de lecture : Dans le scénario, on double clique sur la cellule située à l'intersection de la colonne concernée (18) et de la piste des script. On saisit : on exitFrame go to the frame end
Il ne nous reste plus qu'à éparpiller les pièces du puzzle sur la scène et à attacher à chacune un même comportement. Ici les comportement (behaviours) de Director 6 nous épargne l'utilisation d'un script parent et la création d'objets. Création du comportement (Director 6 et +)
Pour créer un magnétisme des pièces nous allons rédiger un script régissant un comportement commun à chaque pièce. bien sûr notre script ne sera valable pour toute les pièces que s'il évite soigneusement toute dénomination particulière: Dans la partie supérieure du scénario, on clique sur le losange pour ouvrir l'inspecteur des comportements.
On demande à créer un nouveau "behaviour" en pressant sur le "+". Nommons ce comportement "pièces puzzle". On clique alors sur l'icône ouvrant l'éditeur de script (la petite feuille blanche).
Nous gérons d'abord les déplacements de l'utilisateur. N'oublions pas que nous devons remplacer toute pièce déplacée par sa jumelle située dans le scénario, 40 piste plus bas, c'est-à-dire, sur la scène, au dessus du puzzle. Parce que nous ne voulons rédiger qu'un seul script, nous désignons le sprite concerné par le terme générique "me"
on mousedown me
end -- Si l'utilisateur maintenant, relâche le bouton de la souris
alors
on mouseup me
end
Pour attacher ce comportement aux pièces, nous sélectionnons toutes les pistes 1 à 12 dans le scénario, et déroulons le pop-up menu situé en haut du scénario, à droite du losange. Dans ce menu nous choisissons le comportement "pièce puzzle". Voilà. Ce puzzle est aussi un procédé efficace pour faire apparaître ou disparaître une image. Pensez-y !
|
||
