Menu dynamique avec Colorpicker et son évaporation de couleurs

Dans ce tutoriel de plus de 2h40, nous allons créer un menu dynamique avec Colorpicker intégré. Nous utiliserons le langage as3 et nous répartirons chaque élément dans des classes externes. Les fichiers audio et les polices de caractères sont eux aussi gérés en externe.


Les fonctionnalités du menu:

  • Barre aimanté au bouton cliqué.
  • Redimensionnement de la barre en fonction du bouton survolé.
  • Modification de la couleur des boutons et des titres au rollOver et rollOut.
  • Menu coulissant animé pour le colorPicker.
  • Évaporation des pastilles colorés du ColorPicker.

Vous pouvez essayer l'application finalisé en suivant ce lien: MENU SLIDER AVEC COLORPICKER

Voici toutes les étapes que nous passerons en revue pendant ces 2h40 de vidéo:

I)_Mise en place de l'interface graphique:

  • Création des boutons du menu étape par étape
  • Création de la barre aimanté
  • Création des pastilles colorés avec leurs reflets.
  • Création de menu coulissant du colorPicker personnalisé (portes coulissantes et bouton clignotant).
  • Animation de menu coulissant
  • Création de la zone de sortie
  • Ajout des fichier audio du projet et préparation à l'exportation
  • Ajout des polices de caractères dans la bibliothèque et exportation
        

II)_Création de la classe principale (Menu):

  • Mise en place des imports optimisés (classe TweenMax inclus)
  • Instanciation des variables du projet
  • Mise en place du constructeur avec la fonction non documenté addFramscript.
  • Regroupement des boutons et de leurs titres dans des tableaux (modification simplifié)
  • Initialisation du projet (ajout groupé des écouteurs)
  • Gestion des états des boutons via la classe TweenMax
  • Récupération des boutons via la boucle switch
  • Activation du colorPicker via la classe Timer.
  • Mise en place de l'évaporation des couleurs des pastilles colorés via le filtre GlowFilter (tweenMax)
  • Récupération des données du bouton cliqué
        

III)_Création de la classe Coulisse:

  • Mise en place de la classe "Coulisse" pour gérer la navigation du menu du colorPicker
  • Utilisation de la fonction (non documenté) addFramescript pour le placement des stop

IV)_Création des classes Sbt et Spast:

  • Création des classes reliées aux fichiers audio.
  • Extension de la classe Sound

V)_Création de la classe Visitor

  • Création de la classe pour le formatage des polices de caractères.
  • Extension de la classe Font

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

Gérer un modèle 3D dans Flash CS4Gérer un modèle 3D dans…
Dans ce tuto Flash CS4 et ActionScript 3 vous apprendrez à…

Jeu Merlin FLash 3DJeu Merlin FLash 3D
Ce tuto ActionScript 3 en vidéo, d'un niveau intermédiaire,…

Champ de vidéos 3DChamp de vidéos 3D
Dans ce tuto Actionscript 3 en vidéo, vous allez apprendre…

Répertoire téléphonique avec Flash, xml et PHPRépertoire téléphonique…
Dans ce tuto Flash en vidéo, vous allez apprendre à développer…

Créez un site flash de type PortfolioCréez un site flash de type…
Apprenez dans cette formation à réaliser un site complet en…

 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…

Débutez facilement avec Flash CS4Dé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 2 heures 40 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

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

Un menu avec des tooltips ou info bulles (as3)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".…

Créer votre propre lecteur de flux RSS  (as3)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.…

Menu coulissant élastique avec gestion xmlMenu coulissant élastique avec gestion xml
Dans ce tutoriel de plus d'1h30, nous allons créer un véritable menu coulissant, avec…

Détourer un personnage (technique avancée)Détourer un personnage (technique avancée)
Dans ce tutorial vidéo nous allons voir comment il est possible de détourer un personnage…

voir tous les tuto de artkabis

Notes attribuées par les utilisateurs (1 vote)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (2)

par artkabis
(auteur de ce tuto - 17 juin 2009)

" Merci, sinon je suis content de voir que le tuto t'es plus. Après, en plus d'avoir créé ce menu, tu as par la même occasion assimilé différentes techniques qui te servirons pour la suite de ton apprentissage.

Encore merci d'avoir choisi l'un de mes tutoriels et j'espère que tu as pris plaisir à le visionner... "

par arnotufu
(a acheté ce tuto - 17 juin 2009)

" Super tuto, merci Artka! J'ai commencé par ton forum (http://www.artkabis.net/) et je débarque ici lol! "

 

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 2 heures 40 minutes a été acheté 26 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 23 mai 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.

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.

N'hésitez pas à nous contacter si vous avez la moindre question !