[tutoriel] Créer des images dynamiques avec Flash en AS2

Dans ce tutorial, je vais exposer la méthode qui permet de rendre cliquable les images en flash. Si vous avez déjà été faire un tour sur notre site et que le système vous intrigue alors ce tuto est fait pour vous.
Cependant, je ne m'attarderai pas sur les outils flash. Je serai le plus précis possible en ce qui concerne la mise en place de l'interaction. Pour en apprendre d'avantage sur les outils que j'utiliserai ou les menus, si vous êtes très débutant en flash, je vous conseil d'aller voir les anciens tutoriaux flash axés sur la maitrise des outils ou de me poser des questions à la suite de celui ci, je serai ravi d'y répondre.
Dans un premier temps nous verrons la mise en place graphique du projet. Puis dans la seconde partie, je m'intéresserai au code nécessaire à l'interaction.

I. Création du bouton sur l’image

Avant tout, commencez par ouvrir un nouveau document flash, donner lui le nom que vous souhaitez. Faîtes tout de même attention pour ceux qui utiliserai flash CS3 ou 4 à choisir un document AS2 et non pas AS3 qui est la nouvelle version du code flash. Une fois validé, la scène apparait. Flash est logiciel flexible dont les outils peuvent être rangés comme l’éditeur le souhaite, il est donc possible que la présentation que je vous offre diffère de la votre (hé oui la mienne est personnalisée !). Ensuite choisissez une image, celle que vous voulez rendre interactive et importez la.

Importer une image :
- Cliquer sur File (fichier) dans le menu
- Import (importer)
- Import to Stage (importer sur la scène)



Pour ma part j’ai choisi un dessin de Arana que je trouve super sympa ^________^. Voyons maintenant comment le rendre interactif !
L’idée est simple, on va créer un bouton que l’on placera sur le dinosaure. On appliquera ensuite des effets sur ce bouton pour le rendre invisible.

Pour cela définissez un symbole :
- Insert (insérer)
- New Symbol



Une fenêtre apparaît, on se contente de lui donner un nom ici « bouton » et de cliquer sur OK. Notre symbole se trouve alors dans la bibliothèque. On va le glisser sur la scène (là où se trouve notre image), vous pouvez le déposer là où vous voulez, personnellement je l’ai mis sur le nez du dino comme le montre l’image suivante :



Cliquez alors sur le bouton que vous avez placé sur la scène, l’image derrière devient diffuse, mais vous pouvez toujours la voir. L’idée est alors de donner au bouton la forme du dinosaure ! Alors c’est parti. Chacun sa technique, pour ma part je prends l’outil trait et je parcours tout le contour de l’objet, à la fin je lisse un peu grâce à l’outil sélection. Pas besoin d’être super précis.



Maintenant, on utilise l’outil pot de peinture pour peindre l’intérieur du contour. Attention, si la coloration ne marche, cela signifie que vous avez laissez un trou dans ce contour. Cela ne se voit pas forcément alors zoomez beaucoup et parcourez le contour.



Dorénavant, nous allons appliquer ce qu’on appelle un filtre sur le clip bouton. Pour cela revenez sur la scène, sélectionnez le clip dino en cliquant dessus, un cadre bleu apparaît tout autour.

Appliquer un filtre :
- Sélectionner l’onglet properties (propriété)
- Puis le sous onglet filters (filtres) tout en bas
- Cliquer sur l’icône add filter (ajouter un filtre)

Le filtre que nous allons appliquer aura deux effets, il permettra de rendre transparent notre bouton, il fera apparaitre un halo blanc tout autour de la figure. Lorsque vous ajouter un nouveau filtre sélectionner Glow. Comme sur l’image ci-dessous une fenêtre apparait avec différents paramètres ajustables. Choisissez la couleur blanche, cocher la case knockout (rendre transparent la figure) et ajuster les autres paramètres comme vous le souhaitez, en autre, la longueur du halo, le floutage… Pour ma part j’ai appliqué trois fois Glow pour accentuer l’effet.



II. Programmation

Nous allons maintenant rendre interactif ce dino ! Si votre clip n’est plus sélectionné, sélectionnez-le de nouveau. Dans l’onglet properties se trouve un champ appelé Instance Name (nom d’occurrence je crois), ce champ permet d’assigner un nom à notre objet pour son utilisation future dans le code. Appelez votre objet comme vous le souhaiter, pour ma part j’ai choisi dino.



Maintenant, commençons le code, il y a différentes façons en flash d’assigner des actions à un objet. Pour ma part je préfère rester sur la scène pour tous les gérer. Première étape, reportez vous à la frise de temps tout en haut, sélectionner la première frame, la où se trouve notre dino.



Clique droit, choisissez Action tout en bas. Une console s’ouvre.



Première chose, on cache le bouton dino tant que la souris n’est pas dessus. C’est le role de la première ligne (this.dino._alpha = 0 , alpha renvoie à la transparence du clip, ici 0 % donc on ne le voit pas. On cache aussi la surprise tant qu’à faire (this.surprise._alpha = 0 ).
Ensuite on rend dino cliquable. Tout d’abord, si la souris passe sur le bouton (onRollOver), ce dernier devient opaque (_alpha = 100 . Si la souris sort du bouton (onRollOut), on le fait disparaitre (_alpha = 0 . Enfin si l’utilisateur clique dessus, je laisse le bouton visible, mais en plus je fais apparaître la surprise.

Et bien voilà, je pense que ce n’était pas si compliqué. Ce tutoriel reste basic, sachez qu’il est possible de définir des actions beaucoup plus complexes dans les listeners onRollout, onRelease, onRollOver… Par exemple appeler d’autre fonction externe, appeler une URL, interagir avec un fichier php, enfin tout ce que vous voulez.

Si vous avez d’autres questions, si vous voulez que je continue le tutoriel sur un autre point il n’y a pas de problèmes. Je mets à votre disposition les fichiers sources en liens à la fin. De plus si vous avez un projet flash, inscrivez vous sur le forum Caldeira et nous pourrons voir ça ensemble.


Le swf
Le fla

Enfin ! Un des mystères de la création du studio révélé au grand jour ! Je teste et je vote !

aaaaaaaaaaaaah géniaaaaaaal! je suis en plein déménagement mais dés le retour à mon appart' (cette semaine) je test sur! je te mettrais le résultat! ^^

tu as réussi à chopper flash ?