Bon alors maintenant que j’ai terminé d’écrire mon livre, je peux continuer à faire des tutos ici (le mec qui arrête jamais..)
Bref merci pour vos idées dans le post précédent, du coup je vais faire un tuto en plusieurs étapes, pour apprendre à faire un site en Flash, qui couvrira plusieurs trucs : comment préparer la scène, les étiquettes etc, charger du php, charger du XML, faire un lecteur de MP3, une galerie d’images, et un formulaire de contact mail.
Là tout d’abord on va voir comment s’organiser au début et mettre en place le fichier. La source est ici.
Faites un nouveau document Flash, et modifiez la taille de votre scène par la taille que vous voulez. Vous pourrez la modifier plus tard si vous voulez, mais ça risque d’être chiant si vous avez déjà placé vos éléments etc. Mettez aussi la cadence à 30 images secondes si jamais vous avez des animations etc, ça rendra mieux.
Prenez pour habitude de toujours créer un calque pour votre code, et faire en sorte que votre code ne soit que sur ce calque. Pareil pour les étiquettes, mettez un calque spécialement pour ça.
Ensuite, ici j’ai mis un calque pour le fond, et comme ce fond ne change pas au cours du site, ben il s’étend sur toutes les images. Par contre, le calque ‘éléments’, qui contiendra les boutons, le contenu etc, aura un contenu différent pour chaque rubrique, donc j’ai déjà mis des images-clé vides à ces endroits. Ah oui, on va faire un site pour un groupe de musique.
Sur la première image, le code est déjà mis, c’est le code pour charger le site, avec une barre de chargement (un rectangle d’occurrence “barre”). On a déjà vu ça avant donc j’en parle pas..
Sur le calque “menu”, on va mettre le menu de navigation du site. C’est à dire, des boutons qui nous emmenerons à l’étiquette choisie. Comme ce menu sera sur toutes les pages, ce sera la même image sur toutes ces images. Doonc disposez déjà simplement du texte, avec le nom des rubriques.
Ensuite, placez le dernier champ texte sur la droite de la scène, et ouvrez le panneau d’alignement (ctrl + K).
Séléctionnez TOUS les champs texte, et cliquez sur ce bouton du panneau d’alignement. Attention à ce que le bouton “sur la scène” soit décoché. Du coup tous vos champs texte sont à la même distance l’un de l’autre, super. Ici la scène fait 600 de large, et j’ai 5 boutons. Du coup je vais faire un bouton de 120 pixels de large. Pour ça je dessine un rectangle blanc avec une opacité de 20 et je le converti en bouton (F8).
Et puis je le duplique 5 fois, et je positionne bien le tout, en mettant les champs texte par dessus les boutons. (ctrl+shift + fleche haut, pour placer un élément au dessus de tous les autres).
J’ai fait en sorte que sur la 2eme image du bouton, le rectangle blanc soit moins transparent. Ensuite, donnez un nom d’occurrence à chaque bouton, et appelez-les : “bt_news” , “bt_galerie”, “bt_musiques”, “bt_concerts”, “bt_contacts”.
Pour que les boutons aillent aux étiquettes concernées, il faut leur donner une action, et donc passer par un listener (écouteur). En gros, un listener “écoute” les actions placées sur un bouton (ou un clip, un sprite, la scène…) et appelle une fonction.
Par exemple pourle bouton “concerts”, le code serait celui-là :
bt_concerts.addEventListener(MouseEvent.CLICK, vaConcerts);
function vaConcerts(evt:MouseEvent):void{
gotoAndStop("concerts");
}
Le truc chiant, c’est qu’il faudrait créer une fonction pour chaque bouton, simplement pour aller à l’étiquette… On va faire plus simple (enfin, façon de parler) :
bt_concerts.addEventListener(MouseEvent.CLICK, vaEtiquette);
function vaEtiquette(evt:MouseEvent):void{
var nomBouton:String = evt.target.name;
var etiquette:String = nomBouton.slice(3,nomBouton.length)
gotoAndStop(etiquette);
}
(ce code est à placer sur le calque “actionscript”, au niveau de l’étiquette “news”).
Ici, on récupère le nom du bouton dans une variable nomBouton de type String, avec evt.target.name (target étant le bouton sur lequel on a cliqué). Comme chaque bouton a pour nom d’occurrence “bt_concerts” par ex, il faut virer le “bt_” pour récupérer seulement la fin du nom. Pour ça on utilise slice() qui permet de récupérer un morceau de chaîne. Attention, le premier caractère d’une chaine a le numéro 0.
Donc voilà, il suffit d’ajouter un listener pour chaque bouton, et notre menu est fini. Vous pouvez remplir les pages avec nimporte quoi pour tester..
bt_news.addEventListener(MouseEvent.CLICK, vaEtiquette);
bt_galerie.addEventListener(MouseEvent.CLICK, vaEtiquette);
bt_musiques.addEventListener(MouseEvent.CLICK, vaEtiquette);
bt_concerts.addEventListener(MouseEvent.CLICK, vaEtiquette);
bt_contact.addEventListener(MouseEvent.CLICK, vaEtiquette);
function vaEtiquette(evt:MouseEvent):void{
var nomBouton:String = evt.target.name;
var etiquette:String = nomBouton.slice(3,nomBouton.length)
gotoAndStop(etiquette);
}
