Voici un tutorial vidéo consacré à la réalisation d'une application avec Adobe AIR. Dans ce tuto de plus de 2h30, nous allons créer notre propre colorPicker, cette application plutôt pratique vous permettra d'afficher n'importe qu'elle couleur et d'en récupérer sa valeur hexadécimale ou RVB. En plus d'être plutôt utile, ce colorpicker offre la possibilité de copier ces valeurs directement dans le presse papier et d'affiner chaque réglage via trois sliders, un pour les teintes de rouge, l'autre vert et le dernier pour le bleu.

Vous pouvez vous même tester cette application en la téléchargeant ici même : ArtkaPicker.air

Pour vous faire une idée de ce que comporte cette application, voici une liste de ces fonctionnalités:

• Un design soigné (utilisation de reflets et de différents filtres)
• La possibilité de récupérer le code de n'importe quelle couleur.
• De régler indépendamment la valeur des teintes, rouge, vert et bleu (trois slider)
• De connaitre en temps réel le code couleur en hexadécimale et RVB.
• De dragger (déplacer) l'application n'importe où sur votre bureau (ou ailleurs)
• Il est aussi possible d'étendre l'application à la taille de votre écran (et  réduire).
• Fermeture de l'application depuis l'interface
• Les boutons sont animés pour les états rollOver et out

 Nous verrons ensemble que le développement d'une application Air est assez proche de celui d'une application Flash. La seule différence entre un simple fichier .swf et une application AIR se situe au niveau du codage. En effet, nous verrons ensemble que certains éléments du langage sont apparus, comme par exemple la gestion du presse-papier avec la classe Clipboard, mais aussi la possibilité de gérer la fenêtre de l'application via la classe NativeApplication et ces méthodes : nativeWindow.exit() retore() ou maximize().

Une telle application demande tout même certaines compétences en AS3, c'est donc pour cette raison que cette formation dépasse les deux heures d'enregistrement.

Contenu de cette formation à AIR:

I°) La création de l'application

• Mise en place des éléments principaux (bg, structure graphique du colorpicker)
• Création de la partie liée à la récupération des couleurs (utilisation de masque)
• Mise en place des composants slider pour les réglages des couleur RVB
• Création et mise en place des boutons (animations pour les rollOver et out)
• Création de l'info Bulle (pour les données concernant les codes couleurs)
• Mise en place des éléments de décoration (filtres, reflets, dégradés, etc)

II°)La classe Init :

Cette classe est utilisée pour initialiser le projet et instancier un nouvelle objet Artkapicker.

• Mise en place du package, de la classe et du constructeur
• Création d'un nouvelle objet ArtkaPicker et placement de celui-ci sur la scène

III°)La classe ArtkaPicker :

• Mise en place de la base: package, classe et constructeur
• Import de l'ensemble des classes liées à notre application (classes air incluses)
• Mise en place de l'ensemble des variables et constantes du projet
• Mise en place de l'initialisation (création des écouteurs)
• Initialisation des sliders (valeur maxi et mini, liveDragging, écouteurs)
• Mise en place de la capture des couleurs (mouseDown et mouseMove)
• Récupération et gestion des codes couleurs :

Pour cette récupération, nous utiliserons une classe que vous trouverez dans les fichiers sources, cette classe, plutôt puissante, nous permettra de mettre en place la conversion de nos couleurs:

1. Hexadécimale vers RGB
2. RGB vers Hexadécimale
3. Décimale vers Hexadécimale

Ceci nous aidera plus particulièrement pour la diffusion des codes couleurs dans le presse-papier. Continuons...

• Gestion des déplacements des sliders en fonction de la couleur survolé
• Gestion des couleurs de l'échantillon en fonction des sliders(de leurs positions)
• Mise en place et gestion de l'infoBulle : message personnalisé,affichage, disparition via l'utilisation de la classe TweenMax
• Utilisation de notre classe personnalisé Timeout pour la disparition de l'infoBulle

III°)Mise en place des paramètre de publication Air

• Mise en place du nom, de la description, de la version et du copyright
• Mise en place des icônes personnalisés
• Utilisation du certificat numérique (identité de l'application)
• Modification de l'arrière plan
• Utilisation du fichier xml de personnalisation
• Installation de notre application pour les essaies

IV°) Les fichiers sources :

• Les fichiers swf et fla pour flash cs3 et cs4
• Le fichier Adobe air prêt à être installé
• Le pack contenant les quatre logos pour les icônes de l'application
• Un certificat pour l'exemple
• Le fichier xml contenant l'ensemble des information de l'application
• Les fichier .as ArtkaColorPicker et Init
• Les deux classes personnalisés ConvertColor et Timeout ( attention à n'utiliser que pour ce projet)

Voilà, alors si vous avez des questions, n'hésitez pas à les déposer dans la partie commentaire, j'essaierais d'y répondre dans les plus bref délais.