Dans ce tutoriel, nous allons créer un website dynamique qui utilisera les bibliothèques SWFAddress et SWFObject. La bibliothèque SWFAddress, permet entre autre de gérer plus simplement le référencement de votre site, mais aussi de séparer vos différentes pages pour permettre à l'utilisateur de naviguer dans le site avec son navigateur (suivant,précédent). Nous utiliserons aussi la bibliothèque SWFObject pour gérer l'intégration du projet dans la page html. Donc à la différence de mon premier tutoriel, ce mini site utilise les dernières technologies javascript permettant de déployer notre site dans de meilleures conditions.
L'intégration se fera donc plus simplement et offrira par la même occasion de nouvelles fonctionnalités. Pour ce qui est du site en lui-même, nous utiliserons la classe TweenMax de Greensock pour que la navigation soit beaucoup plus dynamique qu'une navigation standard.
Voici quelques-unes des fonctionnalités de ce website:
- Menu dynamique avec rollover out
- Déplacement avec effet de vitesse pour le corps du website
- Contenu textuel géré via un fichier xml (facilement modifiable)
- Désactivation du menu pendant les mouvements de la page
- Gestion du flash player grâce au SWFObject
- Intégration optimisé du swf grâce au SWFObject
- Séparation du contenu et optimisation du référencement via SWFAddresse
- Gestion des erreurs de chargements
Voici ce que nous passerons en revu dans ce tutoriel:
I) L'interface
- Création du background sur Photoshop
- Création du menu avec chacun des états des boutons
- Utilisations des filtres pour les éléments graphiques
- Mise en place du footer, du corps et du menu
II) La classe Website:
- Import des différentes classes utilisés dans le projet
- Mise en place des variables et constantes du projet
- Regroupement des éléments dans divers Array
- Gestion du chargement xml et récupération des données sans la moindre boucle
- Gestion de la modification du texte et des mouvements du corps
- Utilisation de la Classe SWFAddress pour la gestion des pages dans le navigateur
- Gestion des états des boutons (over,out et clic)
- Gestion des erreurs liées au chargement du fichier xml
III) Intégration.
- Téléchargement des bibliothèques adéquates
- Importation des Bibliothèque javascript
- Mise en place du contenu html avec utilisation de SWFObject
>>TESTER LE RÉSULTAT DU TUTORIEL WEBSITE<<
Mise à jour des fichiers sources:
Vous trouverez un pack un plus complet que celui qui vous a été proposé à l'origine. Une classe "Precharg" qui gère l'ensemble des chargements du website a été ajouté, cette classe peut facilement être adaptée sur vos différents projets et il est possible de modifier la couleur du thème en redéfinissant simplement la variable "_couleur".
Vous vous rendrez aussi compte que le projet comporte désormais un nouveau swf nommé "chargeur", celui-ci est utilisé pour le pré-chargement.
Un tutoriel sur l'utilisation et la mise en place de cette classe sera proposé gratuitement sur weecast. En attendant, vous trouverez un fichier "lisez-moi.txt" vous donnant toutes les indications pour utiliser correctement cette classe.
Contenu du pack:- index.html (apel SWFObject et Address.js)
- Chargeur.swf
- SWFAddress.js,SWFAddress.as et SWFAddressEvent.as
- swfobject.js, expressinstall.swf
- contenu.xml
- interface.swf
- Website.as
- Precharg.as
- chargeur.fla,interface.fla
- Lisez-moi.txt
Mise à jour:
- Initialisation du projet, titre affiché dès le début grace à l'événement INIT (écouteur ajouté).
Jetez un oeil à ces autres tuto ActionScript 3, Flash CS4
Transmission de données Flash…
Dans ce tuto Flash PHP, vous allez apprendre à transmettre…
Carrousel 3D Flash Papervision…
Ce tuto Flash / Actionscript 3 vous expliquera comment réaliser…
Coverflow iTunes en Papervision3D…
Ce tuto Flash Actionscript 3 vous expliquera comment fonctionne…
Cube 3D Flash Papervision
Ce tuto Flash / Actionscript 3 utilise la bibliothèque Papervision3d…
Carrousel Flash en Action…
Dans cette formation vidéo d'un peu plus d'une heure, vous…
Créer un website avec gestion…
Dans ce tutoriel nous allons créer ensemble un mini site internet…
Galerie 3d interactive avec…
Dans ce tutorial Flash ActionScript de près d'une heure, nous…
Créez un site flash de type…
Apprenez dans cette formation à réaliser un site complet en…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto ActionScript 3, Flash CS4 de 1 heure 37 minutes est proposée dans une résolution plus grande que l’extrait suivant :
artkabis
a vendu plus de 1.500 tutos, formateur certifié par Tuto.com.
Passionné par le webdesign, j'aime acquérir de nouvelles connaissances en ratissant la toile. Au fil du temps j'ai su mettre à profit mes compétences de webdesigner pour mélanger interactivité, design et animation. Curieux, j'aime être au courant des dernières nouveautés en matière d'applications internet riches (RIA). Autodidacte, je sais m'adapter aux différents outils de création web. J'utilise au quotidien une multitude de logiciels pour parfaire ma soif de création.
Témoignage de ses clients
odst51 dit Excellent, très bon travail, perso j adore.
Tuto du même auteur
Menu déroulant avec fondu de couleurs
Dans ce tutoriel vidéo, nous allons apprendre à créer un menu déroulant avec auto-scroll et…
menu slider avec colorPicker et son évaporation de couleur
…
Un menu avec des tooltips ou info bulles (as3)
Dans ce tutoriel nous allons créer des Tooltips, plus communément appelés "info bulle". Pour que…
Créer votre propre lecteur de flux RSS (as3)
Dans ce tutoriel nous allons créer un lecteur RSS avec affichage dynamique des donnés. Vous pourrez…
Notes attribuées par les utilisateurs

Les avis / Questions des utilisateurs
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto ActionScript 3, Flash CS4 d’une durée de 1 heure 37 minutes a été acheté plus de 150 fois et a reçu une note moyenne de 4/5.
Ce tuto a été publié par artkabis, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,1/5 pour l’ensemble de ses vidéos.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto qui se présente sous la forme d’une vidéo,
vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.















(a acheté le tuto)
" Merci pour ce tutoriel extra artkabis. Par contre j'ai un petit truc à souligner, tu as oublié d'importer la classe pour les Back.
Aussi, j'aimerai te contacter si possible car chez moi la transition entre les pages ne s'effectue pas... si je pouvais avoir ton email stp...
Amicalement, DevAddict. "
(auteur de ce tuto)
" Salut, alors tu peux me contacter à cette adresse, artkabis@hotmail.fr "
(a acheté le tuto)
" Super tutos, vraiment de bonne qualité. Juste pour moi, ça fonctionne mais sur un serveur local, pas en ouvrant le fichier HTML directement.
Vraiment super je le redis car c'est vrai.
un petit commentaire (car personne n'est parfait), commenté les cources serait un plus :p
leonidas "
(auteur de ce tuto)
" Alors ce qui est bizarre, c'est que tout fonctionne pour moi, vous pouvez d'ailleurs vous en rendre compte avec le lien d'aperçu que je vous ai proposé dans la description du tuto :http://artkab.free.fr//WIDGETS/websiteXML/
Sinon, merci pour le commentaire leonidas, comme tu l'as dit, ceci est toujours un plus. "
(a acheté le tuto)
" finalement l'envie dans savoir plus sur flash a fini par m'amener jusqu ici ...bien jouer déja sur artka c'est bien dévelopé mais la c'est encore mieu.
trés bon tuto.. "
(auteur de ce tuto)
" Merci bordat ;) "
(n'a pas acheté le tuto)
" Salut, J'ai vraiment apprécié ton tuto.
La première partie est très claire. On arrive vraiment à suivre et à avoir un résultat semblable au tien. Je ne connais que très peu flash et ça à été parfaitement. Le résultat est vraiment sympa, merci aussi pour la vidéo pour le pré-chargement du site.
J'aurais juste une petite reproche, vis à vis du code. Tu sais tellement bien ce que tu fais que tu pose tes variable,types, etc, avant même d'attaquer, c'est normal.
Mais en fait je me suis retrouvé en décalage, à suivre ce que toi tu faisais sans le faire par moi-même dans le sens où je suivais, mais n'ayant la logique du projet complet certaines étapes n'étaient que du recopiage en quelques sorte. Même si lorsque le projet est complet je comprends le code.
Par contre j'aimerais te demander un truc tout bête, est il possible d'intégré dans le XML des photos ou vidéos, pour que la section portfolio par exemple soit plus gaï ?
Merci d'avance. "
(a acheté le tuto)
" Même Question, ça serait très cool de pouvoir y intégrer photos et vidéo et dc possibilité de scrollé à l'interieur du corp... !!!
Peut-être est-ce l'objet d'un futur tuto ... ?
j'ai une petite idée de comment effectuer ça mais à l'image de ce tuto c'est tellement plus simple quand on est guidé !!!!
Merci d'avance et Big Up à Weecast !
Merci. "
(auteur de ce tuto)
" Pour Technopod:
Alors je comprend ton point de vue, mais j'avoue que ce tutoriel s'adresse aux personnes qui ont déjà quelques bases en as3, au moins sur la déclaration de variables et le modèle événementiel. Mais encore une fois, même si le tuto est assez détaillé, tout ce qui touche au codage simple l'est tout de même un peu moins. En même temps, on est obligé de faire des choix et les éléments les plus simple passent parfois à la trappe.
Concernant la page portfolio, il est bien sûr possible d'y ajouter une partie un peu plus complète comme une galerie xml, mais là c'est l'objet d'un autre tuto, alors si j'avais pu t'expliquer ceci dans ce message je l'aurais fait, mais je pense que tu comprendras que ceci n'est pas possible. J'ai d'ailleurs proposé un tutoriel sur ce thème (une galerie avec gestion des images, titres et descriptions en xml) : http://www.weecast.fr/flash_actionscript/galerie-rotator-gestion-xml-des-images-et-descriptions,5003.html Comme tu peux le voir le tuto dur pas loin d'1h30, alors c'est vrai que ça aurait été compliqué de proposé ceci dans le tuto website xml.
Voilà, sinon je pense que je proposerais prochainement un tutoriel (complet) sur les bases de l'as3, ceci permettra à n'importe quelle personne commençant son apprentissage avec flash de suivre mes tutos.
Cordialement, artkabis
Pour gabi:
Alors je vais te dire à peu près la même chose (désolais), une galerie xml reste tout de même quelque chose de pas forcément simple à développer et ceci demande malheureusement quelques connaissances en actionscript.
Comme tu l'as évoqué, ceci à déjà fait l'objet d'un autre tutoriel, ( celui-ci http://www.weecast.fr/flash_actionscript/galerie-rotator-gestion-xml-des-images-et-descriptions,5003.html ou encore celui-ci (mais qui reste peut être légèrement différent d'un contexte de portfolio) http://www.weecast.fr/flash_actionscript/galerie-slider-xml-gestion-vitesse-de-defilement,5449.html ) .
Voilà, en tout cas merci à vous deux d'avoir choisie ce tutoriel, j'espère qu'il vous aura permis d'apprendre quelques techniques. Bref, si vous avez d'autres questions, n'hésitez pas ;) "
(n'a pas acheté le tuto)
" Salut à tous, déjà un bravo pour se tuto !!
Tout c'est très bien passé lors de la réalisation, mais mon seul problème est qu'il marche tout bien en local, mais pas sur un serveur (j'ai essayé sur plusieurs) !
Est-ce que quelqu'un à eu le même problème, et si oui, comment a t il était résollu ?
Merci d'avance,
encore bravo à Artkabis ! "
(auteur de ce tuto)
" Peux-tu préciser quelques problème apparait ? "
(n'a pas acheté le tuto)
" Oui,
quand l'application se lance une première page (vide) apparait. Ensuite lorsque je clique sur un bouton, elle sans va pour faire arriver la page cliqué correspondante, mais aucune page ne reviens ensuite !
Pourtant dans mon URL, le chemin et identique au tiens ex : www.monsite.fr/index.html#/Contacts.
Quand j'utilise les flèches du navigateur, mon URL change bien aussi.
Mais aucune page n'apparait à un moment.
On se retrouve donc seul avec le menu.
Le truc c'est qu'en local tout marche bien, et je n'est pas cette page vide au début non plus...
Lien : http://www.monaubergeespagnole.com/graphisme/mae/index.html
Merci de ta réponse rapide "
(auteur de ce tuto)
" Alors le problème, c'est que ton fichier xml n'a pas l'air d'être charger lors du clic sur l'un des boutons de ton menu, regardes si ton fichier xml est bien dans un dossier xml à la racine de ton projet (là ou il y ton fichier fla). Si vraiment tu n'arrives pas à résoudre ton problème, envoies moi l'ensemble de ton projet zipper via le site http://dl.free.fr , tu devras ensuite récupérer le lien et le poster ici même.
Bon sur ce, je retourne à l'apéro :) "
(n'a pas acheté le tuto)
" Bon, j'ai bien essayé, mais je ne comprend pas pourquoi en local il n'y a aucune erreur, et qu'il ne marche pas en ligne.
Je te donne donc le lien vers mon projet:
http://dl.free.fr/uiiWAgdXx
Merci d'avance (c'est normal qui n'y est pas de graphisme, je teste d'abord le code)
"
(auteur de ce tuto)
" Et bien j'ai fini par trouver ton problème, en fait rien de bien méchant, mais j'ai perdu du temps car tu avais supprimé l'écouteur concernant le IOError du chargement xml et comme l'erreur était lié au chargement du fichier xml, on va dire que tout était fait pour me brouiller la piste, donc n'oublies pas de décommenter la ligne en question.
Pour ce qui est de ton erreur, tu as simplement préciser l'extension de ton fichier xml à être chargé en majuscule, hors même si ceci ne pose pas de problème lors de la lecture en local, ce n'est pas le cas qu'en tu le met en place sur ton serveur. Alors pour arranger tout ça, il te suffit de remplacer cette ligne:
private const fichier:URLRequest = new URLRequest ("XML/contenu.XML");
par celle-ci:
private const fichier:URLRequest = new URLRequest ("XML/contenu.xml");
Il y a quelques points qui peuvent poser problème dans ton code, tout d'abord, l'initialisation de ton projet est inexistante, je te conseille donc de rajouter ceci:
SWFAddress.addEventListener(SWFAddressEvent.INIT,appliqueAdress);
après cette ligne:
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, changeAddresse);
Et d'ajouter cette fonction avant la fonction appliqueTxt:
private function appliqueAdress(se:SWFAddressEvent):void
{
SWFAddress.setValue( "/Accueil" );
}
Voilà avec ceci ton site fonctionnera normalement.
Sur ce bonne continuation à toi.
Cordialement, artkabis. "
(auteur de ce tuto)
" J'oubliais, si tu veux être sûr que cette solution était la bonne, voici ton projet hébergé chez free:
http://artkabis.com/artkabis/flash/animation/mon_site/mon_site/ "
(n'a pas acheté le tuto)
" AAAAhhhhh !
Désolé de t'avoir fait perdre du temps... quelle erreur de merde en plus !
Un grand merci ! Sa fait plaisir de pas rester comme un con des jours sur son code !
Bon continuation. "
(a acheté le tuto)
" Merci Artkabis pour ce tutorial extrêmement clair, vivant et généreux.
Je voudrais mentionner deux petits "accidents" de parcours qui ne sont pas dus à ton tutorial mais aux mésaventures inhérentes au web. On ne sait jamais ça peut dépanner quelqu'un.
1. Chez moi TweenMax et sa petite famille ne fonctionnait pas et m'affichait une liste d'erreur d'enfer ! J'avais tout installé exactement comme dans le tuto, mais il y avait quand même des problèmes de localisation : il ne trouvait pas ci, ni ça non plus, le nom ne reflétait pas l'emplacement du fichier…
J'ai résolu ce problème en modifiant dans tous les fichiers .as le package et les import : j'ai écrit "greensock" au lieu de "com.greensock".
2. Je n'ai pas pu tester le changement d'url en local, seulement en le mettant en ligne.
Voilà, encore un grand merci ! "
(auteur de ce tuto)
" Alors si tu as eu ce problème, c'est tout simplement parce que tu as sélectionné le dossier com dans ta liaison dans flash, normalement, tu devais sélectionner le dossier qui contient justement ce fameux dossier com. Donc si la bibliothèque est liée comme indiqué dans mon dernier tuto, vous ne devriez pas avoir de problème. "
(a acheté le tuto)
" Bonsoir super Tuto:)
moi j'avais juste une tite question pourquoi tu n'importe pas la classe SWFAdress ?? j'essaye juste de comprendre avant de tester :) "
(auteur de ce tuto)
" Alors cette classe est déjà à la racine du projet, on peu donc l'utiliser sans pour autant l'importer, ceci n'aurait pas était possible si cette classe avait été placé dans un package (un dossier) "
(a acheté le tuto)
" Ok merci :) je débute en programmation :) car je me demandais pourquoi tu importais toutes les classes sauf celle ci :) donc une Classe en AS3 comprends quand une classe est a la racine a côté d'elle ? donc si je met toutes les classes a la racine j'ai besoin d'aucunes importation ? "
(auteur de ce tuto)
" Re alors tu peux faire un petit test pour t'en convaincre, tu créais un fichier test.fla que tu places dans un dossier 'test' par exemple puis dans ce dossier tu créais une nouvelle classe sous le nom de 'Test.as', ensuite ouvres cette classe et tu y colles ceci:
package
{
public class Test
{
public function Test(){}
dynamic public function bonjour($prenom:String){trace ('Bien le bonjour ' +$prenom+' !!!');}
}
}
Ensuite il te suffit de créer la classe Main comme classe de document de ton fichier test.fla.
Cette classe Main.as contiendra ce code:
package
{
import flash.display.MovieClip
public class Main extends MovieClip
{
var test:Test = new Test();
public function Main()
{
test.bonjour('george')
}
}
}
N'oublies pas de la relier dans le panneau des propriétés de ton fichier fla (dans le champ 'classe')
Voilà tu peux faire le test, tu aurras bien le message: 'bien le bonjour george !!!. Ceci prouve que tu peux tout à fait utiliser des méthodes d'une classe qui n'a pas encore été importé. "
(auteur de ce tuto)
" Désolais, mais les messages perdent leurs sauts de lignes et tabulations, ce qui n'aide pas à la lisibilité... "
(a acheté le tuto)
" Merci j'ai compris :) mais c'est vrai que je suis très logique donc pour moi soit j'importe tout soit je vais me mélanger les pinceaux lol
merci encore et très bonne année 2010 :) "
(auteur de ce tuto)
" Très bonne année à toi aussi ;)
"
(a acheté le tuto)
" Cool! Tes tutos sont très intéressants et concret! Félicitations je profite des soldes!! je fais le plein de tes tutos "
(a acheté le tuto)
" Merci,
tes tutos sont super.
Je viens de mettre en ligne mon portfolio : www.kpix.fr
Je me suis basé sur tes vidéos pour le réaliser.
A+
Khandary "
(auteur de ce tuto)
" Merci à vous deux, c'est sympa de repasser ici et de laisser un message.
Pour khandary : Tu as bien su utiliser mes formations et ceci sans pour autant garder le même aspect. Bonne continuation dans tes projets. "
(a acheté le tuto)
" je n'ai pas la fin du tuto "Website" avec les class. "
(auteur de ce tuto)
" Comment ça ?
Il te manque une partie de la formation ? Le pack de fichier source est indisponible ?
Perso je ne peux pas faire grand chose, le mieux reste de contacter le staff de weecast, car ils sont les seules personnes à pouvoir gérer ceci, en effet je n'ai pas la possibilité de vérifier la vidéo, les fichiers sources, ni de réuploader le tuto. Voilà tiens nous au courant !!! "
(a acheté le tuto)
" Salut,
Je viens de faire ton tuto qui est vraiment très intéressant et je t en remercie.
Voila j'ai juste un petit problème, mon fichier xml est enregistrer sous dreamweaver vu que je travail sur mac ça me sert de lecteur text.
quand je compile mon fichier fla j'ai une erreur :
TypeError: Error #1034: Echec de la contrainte de type : conversion de flash.text::TextField@47f522e1 en flash.display.MovieClip impossible.
at com::Site()
TypeError: Error #1090: Echec de l'analyse XML : le format de l'élément est incorrect.
J'ai regarder sur internet d'ou ça pouvait venir et j'ai peur que cela viennent d'un mauvais format, pourrais tu m'éclairer sur ce genre d'erreur et comment y remédier.
merci "
(auteur de ce tuto)
" Salut alors pour t'aider, le mieux serait d'avoir tes fichiers sources sous les yeux, je te conseille donc de zipper l'ensemble de ton projet et de l'envoyer sur http://dl.free.fr, envoies moi le lien de téléchargement sur ma boite mail perso: artkabis@artkabis.net, j'essayerais de t'aider à debugger ton projet. Cordialement, Artkabis. "
(a acheté le tuto)
" Hello est ce que tu as reçu mon mail???
"
(auteur de ce tuto)
" mail, reçu, je regarde ça. "
(auteur de ce tuto)
" "Salut alors dans ton fichier xml tu as oublié un "=" au dernier nœud
Tu n'as pas indiqué les titre de tes boutons comme les pages avaient étés nommés, donc impossible de changer de page, de plus même si cette étape avait été respecté ta page de contenu avait été mise en transparence (alpha à 0) donc il aurait été impossible de voir les changement. Après il restait quelques petite erreurs ici est là, mais comme elles avaient que peut d'incidence sur le fonctionnement du site, je ne vais pas en parler.
Ah oui j'oubliai, tes boutons étaient des champs de texte dynamique, ils ne pouvaient donc réagir comme des boutons, il fallait donc les convertir en movieClip et placer les titre à l'intérieur (comme dans le tuto), Voilà et bien j'espère que ceci pourra t'aider pendant la correction. "
(a acheté le tuto)
" Je ne sais pas si tu as reçu mon mail mais je e suis attaquer a ça ce matin.
Eh oui j avais trouver la plupart de mes erreurs.
Je te remercie de ton aide. Bonne journée "
(n'a pas acheté le tuto)
" Je trouve ton tuto vraiment super, il m'aide énormément dans mon aprentissage. Cela fais plusieurs jours que je travail dessus. Je suis arrivé à un résultat presque satisfaisant. La classe TweenMax fonctionne mais en cliquant dans le menu sur les différents boutons, rien ne se passe, et je n'arrive pas pour l'instant à trouver d'où ça vient. j'ai revu ton tuto plusieurs fois à la recherche d'erreurs, je ne comprends pas où j'ai pu me tromper. je suis à la recherche d'un fichier à télécharger de ton tuto pour comparer mais je ne trouve pas, même sur ton site. ou peut être vois-tu ou est le bug ? d'avance merci, allez je continu de chercher !!! "
(auteur de ce tuto)
" Il est indiqué que tu n'as pas acheté cette formation, c'est peut être pour cette raison que tu n'as pas accès à cette source, mais peut être que je me trompe. "