Dans ce tutoriel nous allons créer ensemble un mini site internet en ActionScript 3. L'ensemble du projet sera géré via un fichier XML qui nous permettra de mieux gérer le chargement du contenu textuel, mais aussi des images dynamiquement. Vous pourrez donc mettre à jour votre site sans repasser par Flash.
Pour rendre ce site un peu plus sympa, nous utiliserons la classe TweenLite qui nous permettra de gérer le positionnement du contenu dynamiquement (et dont l'installation est expliquée dans ce tutoriel vidéo gratuit)
Vous pouvez visionner le résultat final de ce tutoriel en suivant ce lien: WEBSITE_XML_AS3
Vue d'ensemble de la formation vidéo:Préparation des éléments graphiques sous Flash- Création de l'interface sous Flash
- Création des champs de textes dynamiques
- Création des clips vides pour charger des images dynamiquement
- Création des boutons
- Création des loader de chargement des données
- Gestion des mises à jour texte via XML
- Gestion des mises à jour image via XML
- Création du package AS pour regrouper le code dans un seul et même fichier externe
- Création des appels XML
- Gestion des erreurs du chargement XML
- Codage des actions sur les boutons
- Utilisation de la class TweenLite
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…
Website xml avec utilisation…
Dans ce tutoriel, nous allons créer un website dynamique qui…
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 5 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
Un vrai effet Matrix (AS3)
Dans ce tutoriel, nous allons nous amuser à créer un effet à la Matrix, pour ce faire, nous utiliserons…
Créer une horloge analogique en as3
Bonjour à tous !! Dans ce tutoriel nous allons nous amuser à créer une horloge analogique codé en…
Suite du tutoriel éclatement de texte
Dans ce tutoriel, nous allons voir comment il est possible de rendre dynamique notre vidéo précédemment…
Créer un superbe menu glow en as3
Dans ce tutoriel nous allons créer ensemble un superbe menu glow en utilisant le dernier langage de…
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 5 minutes a été acheté plus de 100 fois et a reçu une note moyenne de 5/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.















(Membre de l'équipe)
" Je viens de modérer le tutorial. Je pense pouvoir dire qu'il fait parti de mon top5 des tutos sur Weecast. Artkabis explique de façon très claire et détaillée toutes les étapes de création de ce mini site internet Flash. A partir de cette vidéo, vous aurez toutes les clefs nécessaires pour partir sur la création de votre propre application. L'heure passe très très vite, on a redemande ^^
Bravo! "
(auteur de ce tuto)
" Merci Nicolas !!! "
(a acheté le tuto)
" Bonjour,
je viens de télécharger le fichier mais flash ne veux pas ouvrir le fla. il me dit "format de fichier inattendu". Je suis sur flash cs3.
merci de votre aide.
"
(auteur de ce tuto)
" Alors ce projet a été mis en place avec Flash cs4, c'est donc pour cette raison que tu ne peux pas l'ouvrir. Je viens donc de modifier le pack et y est ajouté les fichiers sources pour flash cs3.
Par contre en convertissant le projet vers flash cs3, certains éléments posaient problèmes, j'ai donc dû améliorer certaines parties du code (celles qui posaient problème) et ajouté un conteneur général dans le projet (fichier fla). Ne vous inquiétez pas, chaque lignes de codes est commentés (pour la classe WebsiteCS3) et la majorité du code reste similaire à celui proposé pour cs4, il y à simplement quelques améliorations au niveau de la gestion des mouvements. "
(a acheté le tuto)
" Bonjour, j'ai réalisé tout le travail de création du site comme vous l'expliquez dans le tuto mais j'ai un problème à la fin : dans le website actionscript ma première ligne est fausse et je n'arrive pas à la modifier comme il faut alors que j'ai mis le chemin exact qui mène au website, voici l'erreur qu'on me dit "website.as, ligne 1 1084: Erreur de syntaxe : leftbrace est attendu devant colon.
package C:.Users.Lowlow.Contacts.Documents.Travail IMUS.FLASH.fr.website". Je ne comprends pas ce qu'on me demande de faire... Si possible pouvez-vous me conseiller ? Merci "
(auteur de ce tuto)
" Bonjour, alors ton problème doit être simple à régler, en effet je pense que l'erreur se situe après la déclaration de ton package. As-tu bien indiqué le chemin entre le fichier fla et ta classe ?
et correctement placé tes accolades ({}) ?
Si oui, peux-tu copier coller la déclaration de ton package ici même ? "
(a acheté le tuto)
" Je pense avoir mis correctement les accolades mais je ne comprend pas ce qu'est axactement la classe...
Voici mon package :
package C:.Users.Lowlow.Contacts.Documents.Travail IMUS.FLASH.fr.website
"
(auteur de ce tuto)
" Alors ok, le problème vient de là, il ne faut pas que tu indiques le chemin de cette façons, mais plutôt comme ceci:
Si ton fichier fla est situé dans le dossier 'flash' et que ta classe elle est situé dans le dossier 'website', alors tu devras indiquer ceci:
package fr.website;
C'est tout !!
Il ne faut pas indiquer le chemin complet, mais simplement le chemin entre le fichier fla et le fichier .as, dans ton cas, il faut entrer dans le dossier 'fr', puis dans le dossier 'website'. Voilà alors il faut que tu modifies le chemin de ton package, mais aussi celui de ta classe document (celle du panneau propriété de ton fichier fla): fr.website.Website.
Comme tu peux le voir, dans la classe de document, tu dois indiquer le chemin, puis le nom de la classe sans l'extention '.as', dans mon exemple la classe se nomme Website "
(a acheté le tuto)
" Merci pour l'information cela m'a bien corrigé ma première ligne.
J'aurais un autre problème a vous demander par rapport a la public function, j'ai encore une erreur alors que j'ai recopier la même public function que vous. Voici ce que l'on me dit : Multiple constructor definitions found. Constructor may not be defined in <Script/> code.
public function website ()
Je ne comprends pas. Merci beaucoup pour votre aide je ne suis pas trés doué avec ce genre d'écriture ... "
(auteur de ce tuto)
" Tu as dû créer deux fois la fonction Website dans ta classe, regardes bien dans ton code, car à mon avis tu as un doublon quelque part. "
(a acheté le tuto)
" bonjour, un peu complexe je pensais avoir tous reussi j'ai bien suivi ton tuto et a la fin que des erreurs deja le package tweenlite n'est plus le même que sur ta demo il y'a plus le dosier gs, ensuite pourquoi avoir fait un fichier cs3???dans tes exemple de fichiers et le fichier as et totalement différent, pourquoi?et quand je change la direction de mon fla sur websitecs3 j'ai 4 tone d'erreur.....i sade
je comprends plus rien "
(a acheté le tuto)
" Bon ba j'ai pu trouvais mes erreurs car la construction est différente sur l'exemple cs3 mais c dommage de suivre un tuto pour a la fin modifier totalement le fichier as. :-( "
(auteur de ce tuto)
" Alors déjà, il faut savoir que tweenlite a évolué depuis, donc ce n'ai pas moi qui décide si greensock doit garder ou non les mêmes packages. Ensuite pour la version cs3, c'est tout à fait normal que la classe ne soit pas similaire, en effet flash cs3 ne gère pas certaines choses que flash cs4 gère, donc là encore, je ne comprend pas ta question... "
(auteur de ce tuto)
" Une dernière chose, si tu as des erreurs, c'est que tu as dû manquer des étapes ou fait de mauvaises manips. En effet cette formation a été choisie par pas mal de membres et pour le moment peu de personne ont de gros problèmes. Revisionnes bien le tutoriel et si tu as encore des erreurs par la suite, recontact moi.
Concernant l'utilisation de la nouvelle bibliothèque, il faut simplement modifier le gs par com.greensock. "
(a acheté le tuto)
" oui merci j'ai reussi tu apprendras a mettre de la video en xml? bientot??
merci beaucoup "
(a acheté le tuto)
" Bonjour,
J'aimerais savoir où se trouve le Tuto téléchargé sur mon disque dur pour faire une sauvegarde et pouvoir le revoir quand je veux?
Merci.
Roberto "
(auteur de ce tuto)
" Bonjour, alors tu es le seul à savoir ou est le dossier qui contient les formations que tu a téléchargés, alors moi quand j'achète une formation je place mes vidéos dans un dossier sur mon disque dur, donc je ne peux pas savoir ou tu as enregistré ta vidéo. Je sais que le téléchargement peut se périmer, donc il faut télécharger la vidéo le plus rapidement possible avant que celle-ci ne soit plus disponible. "
(a acheté le tuto)
" Bonsoir ArTkabis,
Je voulais te remercier pour ce Tuto, c'est mon premier Tuto Action Script donc un peu hard mais super bien expliqué et très agréable à suivre. Sincèrement félicitations ...
A+
Roberto Galindo "
(auteur de ce tuto)
" Rerci robertogalindo, j'espère que cette première formation t'aura permis de découvrir l'univers de flash et de la programmation as3. Encore merci pour ton commentaire !!!! "
(a acheté le tuto)
" Bonjour,
Je viens de mettre en ligne le resultat de ce tuto et j'ai remarqué que dans le champ texte lorsque le texte dépasse le périmètre de l'élément dynamique nous devons utiliser les flèches du clavier pour avoir accès au reste du texte cependant dans le fichier SWF on peut monter et descendre avec la roue de la souris, Est-ce qu' on pourrait ajouter un ascenseur pour que l'internaute puisse visualiser tout le texte ou autre?
Merci.
"
(a acheté le tuto)
" J'avais oublié le lien pour constater le petit problème...
http://www.docteur-pc.ch/electronika/index.html
A+
"
(auteur de ce tuto)
" Salut, alors je te conseille d'utiliser un composant UIScrollBar, en effet il est simple à utiliser et entièrement personnalisable. Pour le mettre en place il te suffit de le fixer sur le côté de ton champ de texte dynamique, pour vérifier qu'il est bien lié, sélectionnes la scroll et ouvres le panneau "éditeur de composant" normalement le nom d'occurrence du texte doit être présent. Pour la personnalisation, tu dois double cliquer sur le composant et modifier les éléments un par un. "
(a acheté le tuto)
" Salut,
J'ai essayé d'insérer le UIScrollBar mais comment le lier? car j'ouvre la fenêtre inspecteur de composants et dans liaisons je dois insérer un chemin ou dans le champ occurence de propriété et quel est ce nom d'occurence?
Désole mais je suis un peu perdu et désolé pour le dérangement mais j'aimerais comprendre si c'est possible!
Encore merci et bon week-end! "
(a acheté le tuto)
" Salut,
J'ai pu intégrer le UIScrollBar sur mon champ dynamique et j'ai vu le chemin dans l'inspecteur de composants (contenu) mais quand je fais Ctrl+enter, il est inactif????
A+
"
(auteur de ce tuto)
" Alors je crois savoir pourquoi, en effet il faut que tu donnes un nom d'occurrence à ta Scrollbar et qu'à chaque clique sur l'un des boutons du menu, que tu actualise ta scroll. Imaginons que ta scroll se nomme maScroll, dans ce cas là tu auras ceci: maScroll.update();
Voilà, normalement tout devrait fonctionner !!! "
(a acheté le tuto)
" Super, réussi!
J'ai ajouté dans public function Website ()
ceci:
conteneur.addChild (maScroll);
ensuite dans:
private function imageCharge (e:Event):void
ceci:
maScroll.update();
et ça marche, merci et je suis fier de moi car je ne serai pas capable de refaire le code mais au moins je le comprends grâce à ton tuto...
Bon je peux passer au suivant
Tuto Website xml avec utilisation de SWFAddress et SWFObject avec Flash,Actionscript
Bon week-end.
"
(auteur de ce tuto)
" Et oui ceci fait partie des plaisirs du développement, quand un script fonctionne, c'est toujours agréable. Allez bon week-end !!! "
(a acheté le tuto)
" Salut,
Une dernière chose au sujet ma ScrollBar, tout est parfait sauf le fait que quand je descend ma Scroll dans une page, elle est aussi descendu dans les autres pages, au milieu du texte au lieu du début du texte, c'est embêtant et je ne trouve rien sur weecast à ce sujet.
Désolé pour abuser mais comment trouver des réponses pour un débutant comme moi à des choses simples pour un développeur?
A+ "
(auteur de ce tuto)
" Salut, alors il est possible de feinter, en effet il faudrait que l'actualisation de la scroll se fasse quelques millième de seconde après l'affichage de la nouvelle page, pour cela tu peux utiliser le setTimeout. Ce qui donne :
_______ var monSetTimeOut:int = setTimeout(function(){scroll.update();clearTimeout(monSetTimeOut);}, 200);
_______ Il ne faut pas oublier d'importer les classes:
import flash.utils.setTimeout;
import flash.utils.clearTimeout "
(a acheté le tuto)
" J'ai suivi tes conseils, en introduisant le code et les imports mais si je descends le texte de la page 1 et je passe à la page 2, il ne se remet pas au début cependant si je clique sur la page 3 alors oui il se remet au debut de la page. En fait p en passant par la page 3 la Scroll fait le update...? "
(auteur de ce tuto)
" Alors si tu veux, je veux bien regarder ton projet pour mettre en place la gestion de la scroll. Pour cela tu peux zipper ton projet et l'envoyer via dl.free.fr, envoies moi le lien vers ton projet et je verrais ce que je peux faire !!! "
(a acheté le tuto)
" Merci Artkabis,
Je viens de mettre en ligne:
http://dl.free.fr/mcclRlGMx
"
(a acheté le tuto)
" Salut Arktabis,
Juste savoir si tu as pu avoir accès au fichier pour jeter un coup d'oeuil....
Merci "
(auteur de ce tuto)
" Je regarde ça dès que j'aurais un peu de temps, ayant pas mal de boulot aujourd'hui, je pense que je pourrais t'aider dans la soirée. Cordialement, Artkabis "
(auteur de ce tuto)
" Alors comme la solution fut plutôt simple à trouver, je viens la partager dès maintenant. Donc dans ta classe Website, à l'endroit de l'update de ta scroll, ajoute ceci en dessous: maScroll.scrollPosition=0; Voilà plus aucun problème lié à la position de ta scrollBar.
"
(a acheté le tuto)
" Mille fois merci Arktabis. Je n'ai plus de questions. Mais j'ai appris énormément. Encore merci pour ton temps.
Roberto. "
(auteur de ce tuto)
" Et bien pas de quoi, c'est avec plaisir que je partage tout ça. Allez à bientôt ;) "
(a acheté le tuto)
" merci pour ce tuto "
(a acheté le tuto)
" excellent :) "
(auteur de ce tuto)
" Merci bordat, c'est sympa :) "
(a acheté le tuto)
" Merci pour le tuto !
ça sert pour quelqu'un qui débute vraiment...
Par contre j'ai un petit probleme : quand je teste mon application à partir de mon fla, la premiere image apparaît bien, et au clic des autres boutons, j'ai le message :
ArgumentError: Error #2025: Le DisplayObject indiqué doit être un enfant de l'appelant.
at flash.display::Loader/unload()
at fr.website::WebsiteCS3/::clicBouton()
t'aurais une petite idée? "
(a acheté le tuto)
" ah oui je suis sur cs3... "
(auteur de ce tuto)
" Il est tout de même possible de faire ce tuto sur la cs3, il ne faut simplement pas utiliser de rotation3D "
(a acheté le tuto)
" y a une rotation 3D defini dans le script?
Peux tu m'indiquer le chemin stp? "