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
-- Dès l'intervention de l'utilisateur
-- Une pièce plus haut placée est substituée
-- à la pièce saisie que l'on rend invisible.
set the visible of sprite (the spritenum of me + 40)
to true
set the visible of sprite (the spritenum of me) to false
-- La pièce doit suivre les mouvement de la souris
mais la souris
-- n'est pas forcément alignée sur le centre
de la pièce. Nous devons mesurer
-- l'écart initial afin d'éviter un à-coup :
set differenceh to the loch of sprite the spritenum of
me - the mouseh
set differencev to the locv of sprite the spritenum of
me - the mousev
-- Dès lors , tant que la souris est enfoncée,
la pièce est déplacée avec elle :
repeat while the stilldown
set the loc of sprite (the spritenum of me
+ 40) to point(the mouseh + differenceh, ¬
the mousev + differencev)
updatestage
end repeat
end
-- Si l'utilisateur maintenant, relâche le bouton
de la souris alors
-- que la pièces est bien placée, c'est-à-dire
au dessus du cercle rouge
-- invisible qui marque le bon emplacement ( 20 piste plus
bas), Director doit ajuster
-- sa position et pour simuler un magnétisme, jouer
un son
on mouseup me
if inside(the loc of sprite (the spritenum of me + 40),
the rect of ¬
sprite (the spritenum of me + 20)) then
set the loc of sprite (the spritenum
of me + 40) to the loc of ¬
sprite (the spritenum of me +
20)
puppetsound 1, "Click.aiff"
end if
-- Si la pièce n'est plus déplacée,
nous pouvons
-- réafficher le jeu inférieur et masquer
la pièce haute
-- nous commençons par la placer au bon endroit :
set the loc of sprite (the spritenum of me) to the loc
of sprite (the spritenum of me + 40)
updatestage
set the visible of sprite (the spritenum of me + 40)
to false
set the visible of sprite (the spritenum of me) to true
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
!
