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)
VI) Les fichiers sources:
  1. Les fichiers winFolio pour flash cs3 et cs4
  2. Le fichier Main.as
  3. Le fichier WinFolio.as
  4. Les fichier html avec gestion de la détection du flash player

Jetez un oeil à ces autres tuto ActionScript 3, Flash CS4

Transmission de données Flash vers une base MySQL via PHPTransmission de données Flash…
Dans ce tuto Flash PHP, vous allez apprendre à transmettre…

Carrousel 3D Flash PapervisionCarrousel 3D Flash Papervision…
Ce tuto Flash / Actionscript 3 vous expliquera comment réaliser…

Coverflow iTunes en Papervision3DCoverflow iTunes en Papervision3D…
Ce tuto Flash Actionscript 3 vous expliquera comment fonctionne…

Cube 3D Flash PapervisionCube 3D Flash Papervision
Ce tuto Flash / Actionscript 3 utilise la bibliothèque Papervision3d…

Carrousel Flash en Action Script 3Carrousel Flash en Action…
Dans cette formation vidéo d'un peu plus d'une heure, vous…

 Website xml avec utilisation de SWFAddress et SWFObjectWebsite xml avec utilisation…
Dans ce tutoriel, nous allons créer un website dynamique qui…

Créer un website avec gestion xml en as3Créer un website avec gestion…
Dans ce tutoriel nous allons créer ensemble un mini site internet…

Galerie 3d interactive avec FlashGalerie 3d interactive avec…
Dans ce tutorial Flash ActionScript de près d'une heure, nous…

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 43 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

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.

La moyenne de ses notes :  

Devenir fan

Voir son profil


Témoignage de ses clients

odst51 dit Excellent, très bon travail, perso j adore.

 

 

Tuto du même auteur

Installation TweenMax et TweenLite v2Installation TweenMax et TweenLite v2
Voici une mise à jour de mon premier tutoriel TweenLite et TweenMax, Installation et utilisation (as3).…

Optimisation de vos framework (comme adobe)Optimisation de vos framework (comme adobe)
Dans ce tuto Flash ActionScript, nous allons voir comment il est possible de mettre en place vos classes…

Une texture métallique alvéolée avec flash cs4Une 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 notre propre…

Une classe Slider réutilisable en FlashUne classe Slider réutilisable en Flash
 Dans ce tuto Flash Actionscript, nous allons créer une classe vous permettant de mettre en place…

voir tous les tuto de artkabis

Ce tuto n’a pas encore reçu de vote


 

Les avis / Questions des utilisateurs

Par gouglouf
(a acheté le tuto)

" 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!
"

Par artkabis
(auteur de ce tuto)

" 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. "

Par artkabis
(auteur de ce tuto)

" 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 !!! "

Par muchtard
(a acheté le tuto)

" 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. "

Par artkabis
(auteur de ce tuto)

" 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 "

Par muchtard
(a acheté le tuto)

" 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. "

Par artkabis
(auteur de ce tuto)

" ok dak !!! "

Par muchtard
(a acheté le tuto)

" 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 "

Par artkabis
(auteur de ce tuto)

" 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 "

Par muchtard
(a acheté le tuto)

" 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. "

Par muchtard
(a acheté le tuto)

" 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°
"

Par artkabis
(auteur de ce tuto)

" 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. "

Par muchtard
(a acheté le tuto)

" 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 "

Par artkabis
(auteur de ce tuto)

" 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) "

Par muchtard
(a acheté le tuto)

" 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 ? "

Par artkabis
(auteur de ce tuto)

" 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 "

Par muchtard
(a acheté le tuto)

" 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 "

Par artkabis
(auteur de ce tuto)

" Oki doki, et bien j'attends ton prochain message. Allez à bientôt !!! "

 

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 43 minutes.

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.

Besoin d'aide ? Contactez le support !