Placer un bouton dans un fichier .swf avec le logiciel FLASH, de façon à montrer une image avant et après retouche

Nous allons apprendre à placer un bouton qui possède 2 comportements en fonction de la souris :

1. souris en dehors du bouton l'image 1 est affichée;
2. souris qui survole le bouton l'image 2 est affichée.

L'objectif:

Autre exemple plus compliqué ici

Le préalable

• Partir de 2 photos déjà prédimensionnées ici dans l 'exemple 700 de large ou 483 de haut .

  ( J'en profite pour remercier RB77 et Arc en ciel du forum I'Magie qui m'ont fourni la photo originale et sa retouche)

Les étapes successives nécessaires seront :

1. La création d'un nouveau document flash
2. La création d'un bouton qui contient les deux images
3. Son insertion dans le fichier flash

Prêt? Allons-y!

Début du tuto

............Ouvrir FLASH.............;-)

1.Donner à notre fichier les dimensions des photos à intégrer

• Ces paramètres sont à fournir dans la partie "propriétes"
• l'enregistrer pour ne pas le perdre ;-)

2.Création du bouton

• Menu insertion /nouveau symbole, nommer alors le bouton et cocher "bouton" (voir image)

• Un nouveau plan de travail apparaît:

• Remarquez :

en 1 les 4 états (comportements) possibles que pourra prendre le bouton en fonction de la souris (survol, en dehors, cliqué relaché) .

en 2 que l'on peut repasser à la scène principale de l'animation, celle qui accueillera notre bouton.

Dans l'état nommé "haut", c'est à dire quand la souris est en dehors du bouton, nous allons mettre la photo non retouchée.

• Pour cela se rendre dans le menu fichier/importer et parcourir l'ordi à la recherche de la photo non retouchée ( il est à noter qu'à la différence de la création de page WEB la photo n'a pas à être dans le même dossier que le fichier flash sur lequel vous travaillez , son emplacement n'a aucune importance)

• Le menu fenetre /aligner ( ou son racourci crtl+K) font apparaître une fenêtre qui permet de centrer cette photo : c'est important

Nous allons maintenant faire la même chose dans l'état survolé (deuxieme image de notre bouton)

• Mais il faut auparavant créer une image clé vide qui accueillera l'image retouchée , pour cela menu insertion /image clé vide

Cela crée une image vide symbolisée par le rond vide (voir image ci-dessous)

• On reprend la démarche précedente : menu fichier/importer et l'on va chercher l'image retouchée , on la centre.

  Notre bouton est prêt

Nous allons donc l'insérer dans l'animation principale:

• Il faut auparavant retourner dans celle-ci en cliquant sur séquence 1

Nous sommes donc maintenant revenu sur le plan de travail principal

• Pour retrouver notre bouton, de façon à le déposer sur la scène, nous allons afficher la bibliothèque qui contient le matériel graphique ou sonore de l'animation , pour cela : touche F11 ou fenêtre /bibliothèque

• Une nouvelle fenêtre est apparue elle contient le bouton qu'on a créé précédemment , par glisser déposer vous allez le mettre sur la scène et le centrer quand il sera en place grâce à la fenêtre "aligner " utilisée pour le bouton .

C'est prêt , on va le tester (menu contrôle /tester) et si ça convient on va finaliser le projet en enregistrant et en publiant (menu fichier/publier) ce qui créera le fichier .swf qui est le produit final capable d'être lu par les navigateurs

Le fichier .fla , lui , est celui qui est lu par flash et qu'il est possible de retravailler

A vous de jouer ....

Tuto réalisé avec les CSS grâce à Gérald du forum I'Magie

retour vers les autres tutos