Créer un mini site en FLASH

le 31 octobre 2009 • Flash • par Dawlin

Salut tout le monde, vu que je m'amuse bien à rien faire, je vous écris un petit tutoriel pour vous apprendre à créer un mini-site tout ce qu'il y a de plus simple en flash...

Nous verrons dans cette première partie la création des pages, puis le tutoriel se poursuivra dans les parties suivantes :

Créer des transitions

Charger le contenu depuis des pages PHP

Donc, on va se faire un mini-site de 800x600 px, à fond rougeoyant.

Nous utiliserons pour le créer les mêmes interactions sur la timeline que pour une animation,sauf que chaque image-clé sera une page, et que les boutons iront sur ces pages.

Je crée tout d'abord une base de design : un calque avec le titre du site, un calque avec le fond de la barre de menu, un calque avec le logo.

Puis maintenant, passage technique, je dessine un super bouton que je t'en vais me placer dans la barre de menu. Ce bouton est vide, et chez moi il ressemble à ça :

Donc je vais dupliquer ce bouton sur un calque que j'ai nommé "btns_samples" (boutons simples) et du coup je rajoute un calque avec les noms des boutons, ici j'ai 4 boutons :

Après vous faites comme vous voulez... tous ces calques ressemblent à ça :

Et je les mets dans un dossier appelé "statique" parce que ces images ne vont pas changer en fonction des pages...

Après avoir replié ce dossier je lui donne autant d'images qu'il y aura de pages dans mon site, et Ô !! Tous les calques à l'intérieur du dossier on reçu le même nombre d'images ! Ok, je verrouille le dossier.

Nouveaux calques :

ACTIONS
Nom des pages
Contenu

Ces pages sont dynamiques, c'est à dire qu'elles vont changer suivant les pages auxquelles j'accède, je leur donne donc 4 images-clés pour 4 pages...

Sur nom des pages, quand je clique sur une image-clé dans la timeline, et je lui donne un nom d'occurrence, ici j'ai mis

accueil pour Accueil
mavie pour Ma Vie
monlive pour Mon Live
k pour K

Ensuite, sur chacun de mes boutons je vais mettre le même code qui dit "aller à telle image" en changeant le nom de l'image à chaque fois... Ici un exemple pour le bouton "Ma vie" (que je mets dans les actions du bouton en faisant F9 après avoir cliqué sur le bouton)


on(release){
//après bien sûr on changera chaque nom pour avoir la bonne image
gotoAndStop("mavie");
}

Après on dessine n'importe quoi sur chacune des 4 images et on teste, et ôôôôôôôôôôôôô ! ça change de page, magnifique.

Bon, maintenant, passage technique : je crée un symbole clip (ctrl+F8) que j'appelle "cont_page". dedans je mets, séparés sur des calques, ces éléments :

Un fond
Un champ de texte pour le titre de la page, d'occurrence "ttitre"
Un champ de texte pour le contenu de la page, d'occurrence "tcont" (attention à bien cocher l'option "multilignes" ;-) )
Une "UIscrollBar" trouvée dans les composants qu'on fera glisser dans le champ "tcont" et elle s'adaptera toute seule

Ensuite, on revient et on place ce clip sur le calque "contenu" de notre site (une seule image-clé suffira pour les 4 pages, si on rajoute le bon nombre d'images) avec une occurrence "contp".

Et alors là, magie. Puisqu'on a défini tous nos éléments de contenu avec des occurrences, ils sont donc tous configurables...

Donc sur chaque image-clé du calque action, correspondant à chaque page, je colle un code comme ceci :


stop();
contp.ttitre.text = "Titre page";
contp.tcont.text = "Contenu du texte de la page.";

Et ainsi chaque fois qu'on change de page, les champs de textes vont s'adapter en fonction de ce qu'il y a dans le code de l'image-clé de la page !!

Faites un test, vous verrez !

Donc, maintenant, pour plus pratique dans la suite, on va stocker le tout dans une "array" (voir le tuto sur les arrays au cas où)

Donc sur la 1ere image-clé, pour que ça soit lu dès le début je vais créer 4 petites arrays qui contiendront une entrée appellée "titre" et une entrée appellée "cont" :


var arrAccueil:Array = new Array();
arrAccueil['titre'] = "Accueil";
arrAccueil['cont'] = "Ceci est le contenu de la page d'accueil !!";

var arrMavie:Array = new Array();
arrMavie['titre'] = "Ma vie";
arrMavie['cont'] = "Alors ici je parle de ma vie c'est cool";

var arrMonlive:Array = new Array();
arrMonlive['titre'] = "Mon Live";
arrMonlive['cont'] = "Ba ouais : ma vie mon live quoi !";

var arrK:Array = new Array();
arrK['titre'] = "Kommunauty";
arrK['cont'] = "Alors ici je vous parle d'un super site qui s'appelle Kommunauty.fr !!";

Ok, et maintenant, une grosse Array qui va carrément tout englober :


var full:Array = new Array();
full['accueil'] = arrAccueil;
full['mavie'] = arrMavie;
full['monlive'] = arrMonlive;
full['k'] = arrK;
//trace (full['accueil']['cont']);

Note : j'ai donné les mêmes noms que pour les occurrences d'images, c'est pour faire d'une pierre deux coups plus tard, dans le tuto suivant.

Et maintenant sur nos pages on va changer et on va mettre ce code (ici un exemple avec la page 'mavie') :


stop();
contp.ttitre.text = full['mavie']['titre'];
contp.tcont.text =  full['mavie']['cont'];

Et on teste et... ça fait exactement comme avant... ben oui, mais c'est que de une c'est plus pratique du point de vue de la modification, mais en plus vous verrez dans les deux tutoriels suivants que c'est indispensable !!

C'est la fin de ce tutoriel, voici ce que vous avez normalement réalisé :

Voici la source téléchargeable et modifiable : Source

Pour continuer la création du mini-site FLASH, c'est ici :

Créer un mini site en FLASH : 2/3 »

Créer un mini site en FLASH

Lisez aussi...

Flash : Le principe d'une Map

Flash : Charger et exploiter un fichier XML externe