Dans ce tutoriel Flash / ActionScript de près de deux heures, nous allons créer une application regroupant différentes pages dans une interface de style "windows". Nous coderons l'ensemble du projet en as3 et mettrons en place de classes, l'une reliée à notre fenêtre portfolio et l'autre à notre projet. Voici quelques-unes de ces fonctionnalités:
- Interface quatre boutons, action au rollOver et rollOut
- Icônes avec lueur
- Drag possible avec effet de soulèvement (ombre et soulèvement)
- Bouton de fermeture (transition concernant la disparition de la fenêtre)
- Rotation du contenu textuel
- Composant UIScrollBar personnalisé
Voici ce que nous passerons en revu:
I) L'interface:
- Mise en place de la structure de base: bg, corp de la fenêtre et zone de drag.
- Mise en place des boutons, utilisation du filtre rayonnement, création des icônes et mise en place des différents états
- Création du bouton close
- Mise en place du contenu textuel et mise en place du composant UIScrollBar
- Personnalisation du composant (modification des couleur pour chaque état)
II) Le codage (partie 1: la classe Win)
- Mise en place de la structure de notre classe, package, classe, constructeur.
- Mise à plat de imports et instanciation de l'ensemble des variables.
- Initialisation du projet: instanciation des variables (mise en place du texte dans un tableau
- Initialisation et mise en place de la première page (utilisation du setTimeout)
- Regroupement des écouteur lié au événements Mouse (une seule fonction utilisé pour cette gestion)
- Mise en place de la fonction gérant l'ensemble des événement Mouse(MOUSE_OVER,MOUSE_OUT,MOUSE_DOWN,MOUSE_UP)
_ Activation du mode bouton et suppression des interaction lié à leurs enfants via la boucle for (in)
_ Gestion des rollOver et rollOut
_ Gestion du drag
_ Gestion de la fermeture de l'application (TweenMax)
_ Gestion des acton liés au menu (navigation entre chaque page, rotation 3d
III)Le codage (partie 2: La classe Main)
- Mise en place de la structure de base (package, classe, constructeur)
- Import de notre précédente classe et création d'un nouvel objet win. En utilisant cet méthode, il est possible de créer autant de fenêtre que possible.
- Mise en place de notre objet win (ajout à la liste d'affichage, et centrage sur la scène)
Jetez un oeil à ces autres tuto Flash CS4, ActionScript 3
Gérer un modèle 3D dans…
Dans ce tuto Flash CS4 et ActionScript 3 vous apprendrez à…
Jeu Merlin FLash 3D
Ce tuto ActionScript 3 en vidéo, d'un niveau intermédiaire,…
Champ de vidéos 3D
Dans ce tuto Actionscript 3 en vidéo, vous allez apprendre…
Répertoire téléphonique…
Dans ce tuto Flash en vidéo, vous allez apprendre à développer…
Créez un site flash de type…
Apprenez dans cette formation à réaliser un site complet en…
Website xml avec utilisation…
Dans ce tutoriel, nous allons créer un website dynamique qui…
Créer un website avec gestion…
Dans ce tutoriel nous allons créer ensemble un mini site internet…
Débutez facilement avec Flash…
Cette vidéo de découverte va vous permettre de découvrir…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Flash CS4, ActionScript 3 de 1 heure 43 minutes est proposée dans une résolution plus grande que l’extrait suivant :
artkabis
, formateur certifié
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.
En savoir plus sur artkabis
Témoignage des clients de artkabis
![]()
Merci pour tous tes tutoriels. Ils sont super agréables et bien conçus. Grâce à toi j'ai appris de nouvelles choses.
![]()
Très bien permet d'apprendre flash rapidement et efficacement
![]()
En un mot...stupéfiant ! Merci beaucoup :)
![]()
Supers tuto, plein de bonnes astuces, merci :)
![]()
Artkabis, vraiment toi tu déchires grave... J'aime vraiment tes tuto et on voit de suite ta passion pour le flash, j'aimerai vraiment avoir 5% de tes connaissances... Bonne continuation à toi...
Lire les autres témoignages
D'autres tuto de artkabis
Installation TweenMax et TweenLite v2
Voici une mise à jour de mon premier tutoriel TweenLite et TweenMax, Installation et…
Optimisation de vos framework (comme adobe)
Dans ce tuto Flash ActionScript, nous allons voir comment il est possible de mettre en…
Une texture métallique alvéolée avec flash cs4
Dans ce tuto Flash nous allons mettre à profit les outils de dessin de flash pour créer…
Une classe Slider réutilisable en Flash
Dans ce tuto Flash Actionscript, nous allons créer une classe vous permettant de mettre…
Notes attribuées par les utilisateurs (1 vote)
Les avis / Questions des utilisateurs (19)
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 Flash CS4, ActionScript 3 d’une durée de 1 heure 43 minutes a été acheté 75 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 12 novembre 2009 par artkabis, formateur certifié par Tuto.com, ayant reçu une note moyenne de 3,9/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Flash Application.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video 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é ce tuto - 29 décembre 2011)
" très bien et bravo,
J'aurai bien aimé une réactivation de la windget lorsqu'elle est fermée.
Ce nouveau clavier semble bien te convenir ...
par rapport à celui utilisé et fatigué de précedents tutos. "
(auteur de ce tuto - 07 août 2010)
" Oki doki, et bien j'attends ton prochain message. Allez à bientôt !!! "
(a acheté ce tuto - 04 août 2010)
" escuse j'étais absent quelques jours
t'inquietes c'est rien pour le nom on s'en fout
alors je vais de suite aller revoir ca je te tiens au jus
a toute toto "
(auteur de ce tuto - 30 juillet 2010)
" Salut alors désolais pour l'erreur sur ton prénom.
Sinon, en effet c'est parfois déroutant d'utiliser une version d'un logiciel différents de celui du formateur. Après j'avoue que je ne veux surtout pas te pousser à faire des frais pour une mise à jour, mais il faut dire que le passage à Flash CS4 vaut le coup, en effet c'est à partir de cette version que la caméra 3D est embarqué (Flash CS5 est bien pour le développement, pour le reste pas de changements majeurs avec la CS4).
Alors concernant la liaison ou le placement de tes classes, et bien pour moi tu es ok, pour preuve, une fois les corrections décrites plus haut mise en place, tout fonctionna correctement.
Après je t'avoue que normalement, si ta classe Main est à la racine de ton projet et que tu as indiqué : "Main" dans le champ classe de document., tu ne devrais pas avoir de problème et la classe devrait s'ouvrir automatiquement.
Voilà, bon si tu as un soucis, tu sais que tu peux toujours laisser un message ici, alors n'hésites pas ;)
Cordialement, Art-k "
(a acheté ce tuto - 30 juillet 2010)
" ok, c'est vachement sympa d'avoir vérifié tous mes scripts( enfin ce sont surtout les tiens, mais bon). Je vais direct aller corriger tout ca, je pense avoir capté ce que tu m'expliques sur mes erreurs, je teste et je te tiens au jus.
Sinon oui t'inquiètes j'ai bien vu que ton tuto était pour CS4 mais en fait tu vois les tutos CS4 sont en général bien plus nombreux et plus spécialisés dans ce que je recherche pour l'instant, c'est pour ca que je m'y suis tenté quand même . J'ai bien compris aussi pour le probleme du player avec CS3 et les rotations 3D, je vais changer ca. C'est vrai que dès que je peux, je vais me chopper la suite en Cs4 parce que, que ca soit au niveau des tutos ou au niveau des bouquins ca devient dur de trouver la doc correspondante et les différences me gènent parfois pour apprendre.
En tout cas merci encore pour ton aide et pour tous ces tutos très clairs.
ah oui aussi, moi c'est pas jacky, c'est toto, thomas quoi,voila.
a plus tard, bonne soirée a toi. Tcho. Toto.
PS : Oui, je voulais te demander une dernière petite chose, tu sais il y a quelques messages je te disais que lorsque que je cliquait sur l icone du "ptit crayon" qui devait m'ouvrir la page de script de Win.fr , rien ne se passait, tu ne crois pas que j'ai un probleme quelconque rapport aux classes que j'édite ou je ne sais pas ? "
(auteur de ce tuto - 30 juillet 2010)
" Salut jackie, donc en compilant tes erreurs je n'ai simplement eu besoin que de corriger ce qui fut indiquées dans le panneau de sortie, soit :
• Ligne 62:
Toi tu as ceci:
if(me.type === 'mouseUp' && me.target === btClose){TweenMax.to(this, 1, {alpha = 0});
"alpha =" doit être remplacé par "alpha : "(le symbole = n'est pas utilisé pour une attribution de valeur, en effet dans ce cas bien précis, le paramètre est lié à un élément de type Object
• Ensuite, tu as oublié 3 ou quatre accolades "}" de fermeture à la fin de la classe Win
• Dernière chose, il faut choisir entre un appel de la classe Win depuis la classe Main ou directement en ligne de code depuis le fichier fla (dans un calque), toi tu as choisi les deux. Alors là en l'occurrence, fais plutôt appel à la classe Main puisque tu l'as déjà créé.
Il faut donc que tu supprimes le code du fichier fla. Il ne te sert à rien et en plus il génère une erreur à la compilation ce qui est tout à fait logique puisque tu as créé une seconde variable win, ceci provoque donc une erreur liée à la duplication de variable, bref tu as deux fois le même code en quelque sorte (l'un dans la classe Main, l'autre dans le calque "window" de ton fichier fla)
Voilà, ensuite tout fonctionne correctement.
•Par contre je ne suis pas sûr, mais si tu utilises Flash cs3, tu vas rencontrer un problème que tu n'étais pas censé se produire, en effet cette formation est prévu pour flash CS4 (comme indiqué dans le titre) et si tu as une version inférieure, comme par exemple Flash cs3, tu ne pourras pas être munis du player 10 qui gère les rotations 3D (rotationY,rotationX,rotationZ).
Donc si tu as Flash cs3, tu devras remplacer les rotations 3D par de simples rotations (rotationX >> rotation) "
(a acheté ce tuto - 30 juillet 2010)
" oh escuse moi et moi j'attendais comme un con .. Je viens de reéssayer, j'avais peut pas mis ton adresse mail au bon endroit. Normalement cette fois c'est ok, sinon je ne vois pas .En tout cas j'ai aussi mis mon adresse pour voir si ca fonctionnait et j'ai reçu le lien. Bon j'espere que tu vas bien le recevoir.
A toute toto "
(auteur de ce tuto - 29 juillet 2010)
" Je n'ai rien reçut, mais une question, es tu bien certain d'avoir récupéré le lien proposé par dl.free et de l'avoir ensuite envoyé par mail à cette adresse : artkabis@hotmail.fr. Je ne pense pas car j'aurais du recevoir ton mail depuis un moment. "
(a acheté ce tuto - 29 juillet 2010)
" salut, j'ai reçu un mail donc je pense que mon dossier a du t'arriver . Tiens moi au jus s'il y a un soucis.
allez a toute.
°o0O__' TeuTEu '__O0o°
"
(a acheté ce tuto - 28 juillet 2010)
" ok ca marche, c'est cool de ta part, je vais essayer ca de suite . Tiens moi au jus pour savoir si tout t'es bien arrivé.
Merci encore tu sais ce n'est pas si souvent que les auteurs des tutos soient si investis.
A toute. "
(auteur de ce tuto - 28 juillet 2010)
" Salut, alors ne t'inquiètes pas tu ne me dérange nullement. Donc ce que je peux faire pour t'aider, c'est que tu m'envoies ton projet (tous tes fichiers zippé dans un dossier) depuis cette adresse http://dl.free.fr récupère le lien qu'ils vont te fournir et envoies le moi à cette adresse artkabis@hotmail.fr "
(a acheté ce tuto - 28 juillet 2010)
" bon je viens de finir ton tutoriel mais mes soucis finalement ne sont pas reglés car j'ai revérifié l'emplacement de mon dossier fr il est bien au meme endroit que mon fla, j'ai donc décidé de me lancer dans le code de Win.as malgré le fait que flash ne m'ouvre pas ce fichier lorsque je vais sur le petit crayon et donc comme je m'en doutais un peu mon fichier .fla ne reconnait pas cette classe et quand je teste le widget, il reste totalement statique . A savoir aussi que lorsque à la fin du tuto quand on doit coder la classe Main et bien j'ai le même problème : je tape comme nom de classe "Main" dans les propriétés de mon document mais l'icone crayon ne m'ouvre pas le fichier Main.as, pourtant lui aussi est placé au bon endroit ..
Je ne sais pas si c'est important mais je ne tourne pas avec la CS4 mais la CS3 . voila, je crois que c'est tout ce que je peux te préciser, sinon mis à part ça, j'ai vérifié tous mes scripts par rapports aux tiens (dans les fichiers support) et jusqu'à la dernière accolade je pense que tout est ok.
si jamais tu as un peu de temps pour te pencher sur mon problème, ca serait sympa.
escuse moi pour les dérangements, je n'aime pas trop demander ça mais j'ai beau googler a bloc, je suis bel et bien bloqué.
A bientot, je l'espère. D'avance merci. toto "
(auteur de ce tuto - 28 juillet 2010)
" ok dak !!! "
(a acheté ce tuto - 28 juillet 2010)
" merci beaucoup je m'y remet de suite. C'est taré comme on peux bloquer sur des trucs tout con comme ca ... bon il y avait peut etre la fatigue aussi .. pour l'affichage de la classe Win , normalement mon dossir "fr" est bien placé mais bon je vais revoir tout ca.
merci encore pour la rapidité de ta réponse, ca fait plaisir, vraiment.
je te tiens au courant de l'avancement.
Kenavo, Teuteu. "
(auteur de ce tuto - 28 juillet 2010)
" Alors ceci n'est pas lié à un problème, flash t'avertit simplement qu'une définition sera générée automatiquement lors de l'exportation, ce qui est tout à fait normal, d'ailleurs il est possible de cocher "ne plus afficher ce message" si tu le souhaite. Donc ne fais pas attention à ceci car c'est tout à fait normal que la définition soit généré automatiquement. Par contre, lorsque tu cliques sur le crayon, flash doit normalement ouvrir la classe lié au symbole soit la classe Win du package fr (cette classe est donc dans le dossier 'fr' situé au même endroit que le fichier fla)
Voilà, surtout n'hésites pas à poser tes questions si tu en as, ce n'est pas toujours simple de comprendre et on est tous passé par là (moi y compris et il ne faut pas l'oublier), donc si tu galères, saches que je peux t'aider, mais comme tu l'as si bien dit, pour apprendre il faut parfois chercher et trouver ses erreurs soit même. Je te garantie qu'en peu de temps et pas mal d'exercices, tu comprendras pas mal de choses qui sont flou pour le moment.
Allez bon courage et bon apprentissage !!!
Cordialement, Art-k "
(a acheté ce tuto - 27 juillet 2010)
" salut Artkabis, je me permet de t'écrire car en fait je bloque complet depuis le début de la soirée sur ton tuto et la je ne vois plus de solution. J'ai commencé a suivre tes tutos il y a quelque temps et je me suis décidé aujourd'hui a me lancer dans celui-ci (étant un bleu, c'est déjà une bonne étape pour moi). Tout se passait bien malgré quelques galères mais bon ca c'est normal, ca fait justement parti de l'apprentissage, mais juste avant d'arriver au code, tu sais il faut créer un fichier, le "Win.as". Alors déjà j'ai un peu tourné en rond pour le créer( je suis sous mac osx et vu que c'est pas du tout la même démarche .. Enfin bref, j'ai finalement réussi, je passe donc a l'étape suivante, celle ou je dois effacer le mc "win" pour le relier a ma classe "Win", je rentre donc dans les propriétés de mon clip mais après avoir noter ma classe (fr.Win), et que je clique sur l'icone "crayon" pour ouvrir la fenêtre du script win.as, un message d'alerte apparait : Le chemin de classe ne contient pas de définition pour cette classe. Une définition sera générée automatiquement dans le fichier .swf lors de l'exportation ..%%!!!??? Je t'avoue là, je coince complet. Je vais continuer a chercher parce que je me connais et tant que je n'aurai pas résolu ce probleme, je vais me manger le cerveau mais j'espere quand même que tu passes de temps en temps sur ce site et que tu verras mon appel a l'aide parce que ca m'a l'air bien compromis mon histoire.
En esperant avoir de tes news, bonne nuit, tcho, toto. "
(auteur de ce tuto - 24 février 2010)
" Re, alors il y a pas mal d'erreurs dans ton projet. Tout d'abord tes fichiers as, ont étés mal nommé, en effet tu as ceci Main.as.as et Win.as.as. Supprimes donc les .as en trop. Ensuite dans la classe Win tu as remplacé les : if (me.type === 'mouseOver') par : if (me.target === 'mouseOver'), ici tu dois vérifier le type et non l'objet en lui même, modifies donc les target par type et ceci à chaque vérification de mouseOver,mouseOut, mouseUp, etc. La dernière chose qui pose problème se situe au niveau des accolades, en effet tu as décalé la plus part des } concernant les conditions, normalement tu devrais avoir 6 accolades à la fin de la classe Win ce qui n'est pas ton cas. Il va donc falloir que tu ajoutes les accolades des conditions lié aux boutons et supprimer celles de la fin. Voilà après avoir effectué ces modifications tout fonctionnera correctement, en tout cas pour moi c'est ok. Allez encore merci d'avoir choisie l'une de mes formations, en tout cas j'espère que mon message t'aidera dans ta correction. Bonne continuation dans ton apprentissage !!! "
(auteur de ce tuto - 23 février 2010)
" Salut, alors je vais jeter un œil sur ton projet, normalement on devrait trouver d'où vient le soucis, en tout cas je te recontacte dès que j'ai une solution. "
(a acheté ce tuto - 23 février 2010)
" Salut Artkabis!
Je t'avais écrit un message à propos de ce tuto et de son mystérieux bug...Je ne sais pas si tu as pu regarder ce que je t'avais envoyé, mais mon projet ne marche pas et je ne comprends pas pourquoi!
J'ai essayé ton tuto sur le siteWeb 3 pages en XML et tout marche nickel mais celui-ci ne marche toujours pas!
je te mets le lien ici où j'ai chargé mes fichiers:
http://macle.voila.fr/index.php?m=c9ae77e8&a=7d397569&share=LNK80744b83f49811f97
Bon courage si tu as le temps et merci pour tes tutos, t'es un bon!
"