Réaliser un site web en Flash peut paraître une tâche lourde, mais avec un peu de méthodologie, la création d’un site en Flash vous paraîtra tout de suite moins ardue.

C’est au cours de plusieurs articles que je vais vous montrer comment réaliser un site animé en Flash. Ce premier article vous donnera un rendu certes pas digne des sites des films hollywoodiens, mais est, d’après mon expérience, une excellente base pour la suite.
Ce premier tutoriel est destiné aux personnes ayant déjà utilisé Flash et intégré certaines notions. Je publierai sûrement par la suite des articles pour les novices.
Pour réaliser ce tutoriel, nous allons utiliser la version CS4 de Flash, mais ne vous inquiétez pas, j’ai essayé de rendre ce tutoriel au maximum compatible avec les versions antérieures.

Commençons par créer un nouveau document:

Veillez à bien mettre votre document en AS 2.0 car le tutoriel ne marchera pas en AS 3.0 pour des raisons de rétrocompatibilité avec les versions antérieures à CS4.

Une fois ce nouveau document créé, renommez-le calque 1 dans le scénario en boutons.

A présent, créez un nouveau texte avec écrit Accueil. Faites copier (Ctrl+C) puis coller (Crtl+V) puis déplacez le texte et changez-le en Produits. Répétez l’opération encore 2 fois et donnez les noms Tarifs et Contact.

Comme vous pouvez le constater, les textes ne sont pas forcément bien alignés et écartés. Il existe des outils pour corriger tout cela. Pour les utiliser, ouvrez la fenêtre Aligner (Fenêtre -> Aligner ou raccourci Ctrl+K). Sélectionnez l’ensemble de vos textes avec l’outil de sélection (raccourci V). Puis cliquez dans la fenêtre Aligner sur Aligner les bords gauches puis sur Répartir par rapport aux bords supérieurs.

A présent que nos textes sont alignés, nous allons en faire des boutons cliquables. Pour cela, faîtes clic droit sur le texte Accueil puis Convertir en symbole.

Donnez un nom à votre bouton comme suit:

Répétez maintenant la même opération pour le reste des textes en choisissant un nom approprié pour chaque bouton. Vous devriez voir apparaître ceci dans votre bibliothèque:

Nous allons maintenant apporter une légère touche de modifications aux boutons. Double cliquez sur le bouton Accueil. Vous devriez voir ceci au niveau du scénario:

Dans ce scénario sont décrits les différents stades du bouton. Haut, Dessus, Abaissé, Cliqué. Les trois premières notions sont explicites, Cliqué, lui, détermine la zone cliquable. Sélectionnez l’image clé pour Dessus et appuyez sur F6 (ajout d’images clés) 3 fois.

Vous remplissez ainsi d’images clés les différents stades du bouton. A présent, sélectionnez le stade Dessus puis sélectionnez le texte et appliquez-lui une couleur bleue. Appuyez sur Ctrl+Entrée pour avoir un aperçu. Lorsque que vous passez la souris au dessus de Accueil, il devient bleu.

Retournez à la séquence 1 de votre animation flash et faites de même avec les 3 autres boutons. Vous avez à présent 4 boutons réagissant au survol.

Nous allons maintenant passer à la navigation. Pour cela, créez un nouveau calque et renommez-le Flag.

A présent, nous allons modifier le Scénario. Insérez une image (F5) à la 19ème image de votre scénario sur le calque boutons. Puis ajoutez une image clé (F6) toutes les 5 images sur le calque Flag. Vous devriez avoir en résultat ceci:

La prochaine étape consiste à éditer le calque Flag. En effet, il sera la base de notre navigation. Pour ce faire, cliquez sur le premier cercle vide puis dans Propriétés, nommez-le accueil. Faites de même pour les cercles vides suivants et donnez-leur des noms appropriés comme produits, tarifs et contact. Voici le résultat:

A présent nous allons générer le contenu du site. Pour cela, créez un calque et nommez le Contenu. Insérez des images clés (F6) toutes les 5 images afin d’obtenir ceci:

Comme vous pouvez vous apercevoir le calque contenu correspond exactement au calque flag. A présent nous allons mettre du texte pour notre calque contenu. Sélectionnez le premier point vide dans le calque contenu et insérez une zone de texte dans l’aperçu principal et ajoutez lui un contenu.

Faites un copier (Ctrl+C) de cette zone de texte puis allez sur le deuxième rond vide puis faites Ctrl+Shift+V pour coller exactement le texte au même endroit. Répétez cette étape sur les autres ronds vides du calque contenu.

Éditez maintenant chacun des textes de manière personnalisée en fonction de la rubrique de votre futur site. Une fois les contenus édités appuyer sur Ctrl+Entrée pour avoir un aperçu. Vous devriez constater que les contenus défilent sans jamais s’arrêter. Nous allons y remédier en passant à la partie Action Script de ce tutoriel.

Insérez un nouveau calque et nommez-le AS. Sélectionnez le premier rond vide et affichez la fenêtre d’actions (raccourci F9). Tapez le code non moins explicite:

stop();

Faites Ctrl+Entrée, votre animation reste bloquée sur le contenu d’accueil. La prochaine étape est la création des actions sur les boutons pour naviguer entre les contenus.

Pour ce faire, sélectionnez avec l’outil de sélection (raccourci V) le bouton accueil puis faites F9. Ajoutez le code suivant:

on(release)

{

gotoAndStop(”accueil”); //valeur égale au flag correspondant

}

Répétez cette opération pour les différents boutons en veillant à bien  mettre dans la fonction gotoAndStop la valeur du flag correspondant au bouton. Par exemple, pour le bouton produits, tapez le code suivant en sélectionnant bien le bouton produits:

on(release)

{

gotoAndStop(”produits”); //valeur égale au flag correspondant

}

Après avoir édité le code pour chacun de vos boutons, il ne vous reste plus qu’à faire Ctrl+Entrée et là vous aurez en visuel votre premier site web en Flash. Impressionnant, non?

Ce tutoriel basic est fini, je mettrai en ligne très prochainement un nouvel article pour aller plus loin et commencer à faire de jolies choses.

Vous pouvez télécharger le code source en cliquant sur: tuto flash site web v1