Tutorial par artkabis
10361 vues , 37 com., 2 votes
En créant votre compte sur weecast.fr vous pourrez retrouver l'historique de vos achats, participer à la vie de la communauté, vendre vos tutoriels et ainsi faire fortune
Vous êtes au niveau : Tuto › Tuto Flash › Tuto Flash CS4 › Website xml avec utilisation de SWFAddress et SWFObject
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:
Voici ce que nous passerons en revu dans ce tutoriel:
I) L'interface
II) La classe Website:
III) Intégration.
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:
Vos commentaires (29)
DevAddict a dit le 16 août 2009 à 09:48
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.
artkabis a dit le 16 août 2009 à 22:04
Salut, alors tu peux me contacter à cette adresse, artkabis@hotmail.fr
leonidas a dit le 16 août 2009 à 22:13
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
artkabis a dit le 17 août 2009 à 09:32
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.
bordat a dit le 06 septembre 2009 à 13:58
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..
artkabis a dit le 07 septembre 2009 à 13:06
Merci bordat ;)
Technopod a dit le 17 octobre 2009 à 12:28
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.
gabi a dit le 17 octobre 2009 à 17:35
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.
artkabis a dit le 17 octobre 2009 à 22:45
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 ;)
guins a dit le 23 octobre 2009 à 22:50
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 !
artkabis a dit le 23 octobre 2009 à 22:59
Peux-tu préciser quelques problème apparait ?
guins a dit le 23 octobre 2009 à 23:13
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
artkabis a dit le 24 octobre 2009 à 02:57
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 :)
guins a dit le 24 octobre 2009 à 14:29
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)
artkabis a dit le 25 octobre 2009 à 03:06
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.
artkabis a dit le 25 octobre 2009 à 03:09
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/
guins a dit le 25 octobre 2009 à 11:48
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.
pinklol a dit le 29 octobre 2009 à 11:57
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 !
artkabis a dit le 29 octobre 2009 à 15:44
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.
silverd a dit le 28 décembre 2009 à 23:14
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 :)
artkabis a dit le 29 décembre 2009 à 00:20
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)
silverd a dit le 29 décembre 2009 à 14:07
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 ?
artkabis a dit le 29 décembre 2009 à 15:42
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é.
artkabis a dit le 29 décembre 2009 à 15:45
Désolais, mais les messages perdent leurs sauts de lignes et tabulations, ce qui n'aide pas à la lisibilité...
silverd a dit le 01 janvier 2010 à 12:46
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 :)
artkabis a dit le 02 janvier 2010 à 00:35
Très bonne année à toi aussi ;)
Mirage a dit le 12 janvier 2010 à 00:19
Cool! Tes tutos sont très intéressants et concret! Félicitations je profite des soldes!! je fais le plein de tes tutos
khandary a dit le 04 février 2010 à 04:53
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
artkabis a dit le 05 février 2010 à 16:51
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.
Vous souhaitez commenter ce tutoriel vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous