Sujets sur : Framework AS3 Facile

Cours sur la création et la personnalisation du Framework AS3 Facile

Comment utiliser et personnaliser les Composants AS3 Facile ?

Commentaires fermés sur Comment utiliser et personnaliser les Composants AS3 Facile ?

Ecrit le 22 novembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Logo AS3 Facile

Suite à vos demandes, le thème de ce Cours ActionScript 3 porte sur l’utilisation et la personnalisation des Composants du Framework AS3 Facile.

Pour apprendre à créer des Composants visuels et votre propre Framework AS3, consultez l’ensemble des cours ActionScript 3 sur le Framework AS3 Facile.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

  • Créer le fichier fla contenant les graphismes des composants AS3 Facile.
  • Comment personnaliser tous les composants AS3 Facile et les rendre conformes à vos applications flash.
  • Créer un fichier swc contenant les graphismes et l’utiliser dans votre application flash.
  • Un exemple d’utilisation et de personnalisation de chaque composants AS3 Facile.

Cette formation ActionScript 3 vous permettra d’utiliser, de modifier, d’ajouter et d’implémenter les Composants AS3 Facile dans vos applications flash.

Les Composants AS3 Facile

Version démonstration

Et voici notre application implémentant l’ensemble des composants du Framework AS3 Facile.

Télécharger le code source du cours AS3

Et voici le code source de l’exemple d’utilisation des composants du Framework AS3 Facile.

Télécharger “Utilisation Composants AS3 Facile”

composants-as3-facile.zip – Téléchargé 678 fois – 138,34 Ko

Télécharger la dernière version du Framework AS3 Facile.

Montrez moi vos applications flash qui utilisent les Composants AS3 Facile ?

Partagez votre personnalisations des graphismes des Composants AS3 Facile dans les commentaires ci-dessous.

Quelles sont les nouvelles fonctionnalités que vous avez ajoutés ? Quelles fonctionnalités souhaitez-vous dans le Framework AS3 Facile ?

Comment utiliser un fichier SWC avec Adobe Flash CS5 ?

Commentaires fermés sur Comment utiliser un fichier SWC avec Adobe Flash CS5 ?

Ecrit le 14 avril par Matthieu
Publié dans le(s) sujet(s) Adobe Flash |Framework AS3 Facile

Dans ce cours vidéo, nous allons apprendre à utiliser les fichiers SWC avec Adobe Flash CS5.

Puis la façon d’utiliser les composants du Framework AS3 Facile dans vos applications flash. Et également, comment utiliser Adobe Flash CS5 comme éditeur ActionScript.

Téléchargez le code source complet de l’exemple

Télécharger “Fichier SWC Adobe Flash CS5”

ex-fichier-swc-fla-AS3Facile.zip – Téléchargé 853 fois – 97,52 Ko

Utilisez-vous toujours Adobe Flash pour développer des applications flash ?

Ou peut être un éditeur ActionScript spécifique comme FDT PowerFlasher ?

Postez votre logiciel ActionScript préféré dans les commentaires ci-dessous.

Comment Personnaliser les Graphismes des Composants AS3 Facile ?

1 question

Ecrit le 16 octobre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Ce tutoriel vous explique 2 fonctionnalités intéressantes du Framework de Composants AS3 Facile :

  • La création des skins / graphismes des composants AS3 Facile.
  • Le changement de skin / graphisme « en live » pendant l’exécution de l’application Flash.

I – Conception du Graphisme d’un Composant AS3

Comme nous l’avons étudié dans le Chapitre 3 – Les fonctionnalités d’une Bibliothèque de Composants AS3, chaque composant est personnalisable graphiquement.

Pour personnaliser un composant, il y a 2 étapes :

  • Créer la classe de Skin pour le composant.
  • Créer les graphismes dans un fichier fla (MoviesClip, images, dessin vectoriel…).

Création des classes Skins

La 1ère étape est la création de la classe de Skin pour le composant choisi.

Cette classe de « graphisme »  étend la classe Skin du Framework AS3 Facile. Elle contient également la configuration des graphismes du fla qui seront utilisés. Appelons là DefaultComponentSkin.as.

Pour chaque élément du composant, nous créons une classe graphique (1 movieclip ou 1 sprite par exemple). Chaque graphismes du fla correspond à un élément du composant.

Le graphisme de l’élément est ensuite associé à une constante de la classe du composant.

Tous les composants possèdent des constantes de Skin.

Ci dessous, un exemple illustrant mes explications.

Pour le composant Button, dans le code source de cette classe, il y a 3 constantes :

[codesyntax lang= »actionscript3″ title= »Button.as » bookmarkname= »Button.as »]

[/codesyntax]

Le composant ComboBox possède des constantes supplémentaires, il est beaucoup plus complet.

[codesyntax lang= »actionscript3″ title= »ComboBox.as » bookmarkname= »ComboBox.as »]

[/codesyntax]

Puis, dans la classe DefaultComponentSkin.as, il suffit d’affecter chaque constante du composant à l’élément graphique du fla.

Voici 2 exemples de Skin différents pour le composant Button :

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultButtonSkin2.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultButtonSkin2.as »]

[/codesyntax]

En fonction de l’interface de votre application flash, il est tout à fait possible d’utiliser la même classe DefaultComponentSkin.as pour la création de plusieurs intances du composant Button sur la scène. Cela signifie que tous les Button de votre application Flash possèderont un graphisme identique.

Ou vous pouvez affecter une classe de Skin différente pour chaque instance de votre composant Button sur la scène. Dans ce cas, chaque Button de votre application flash aura un rendu graphique complètement différent.

La classe DefaultComponentSkin.as est plus ou moins importante suivant le composant utilisé.

Ci-dessous un exemple de Skin pour le composant ComboBox (composée d’une Scrollbar et d’une List).

[codesyntax lang= »actionscript3″ title= »DefaultComboBoxSkin.as » bookmarkname= »DefaultComboBoxSkin.as »]

[/codesyntax]

Création des graphismes

En fonction du composant (Button, List, ComboBox), vous devez créer un fichier fla avec un ou plusieurs éléments graphiques (sprite, MovieClip, images et / ou animation).

Pour connaitre le nom des classes / MovieClip à créer pour le composant sélectionné, il suffit de regarder la classe DefaultComponentSkin.as que vous venez juste de créer. Elle contient les noms des classes MovieClip du fla.

Par exemple, la création des éléments graphiques du fla du composant ScrollBar implique d’utiliser les noms suivants:

  • ScrollBarBackgroundSkin
  • ScrollerButtonDownSkin
  • ScrollerButtonOverSkin
  • ScrollerButtonSkin
  • ScrollUpButtonDownSkin
  • ScrollUpButtonOverSkin
  • ScrollUpButtonSkin
  • ScrollBottomButtonDownSkin
  • ScrollBottomButtonOverSkin
  • ScrollBottomButtonSkin

Effectivement, la classe DefaultVerticalScrollbarSkin.as associe les noms ci-dessus aux constantes de la classe VerticalScrollBar.

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as »]

[/codesyntax]

Ensuite, il vous reste à créer le fla avec les classes correspondantes.
Par exemple, pour créer le Skin du composant Button, il est nécessaire de créer 3 MovieClip (ou sprite) différents. 1 MovieClip par état du bouton (survolé, appuyé, normal).

Pensez-bien à paramétrer les propriétés de chacun des MovieClip :

  • Cochez la case Export For ActionScript
  • Cochez la case Export in frame 1
  • La Class : permet d’utiliser le graphisme du composant dans votre code AS3. C’est le nom de votre classe (associée à la constante du composante) utilisée dans la classe qui étend Skin.as, dans cet article : DefaultComponentSkin.as.

 

  • La Base Class : permet de définir les propriétés de votre graphisme / composant disponible pour votre code AS3. Cela peut être Sprite ou MovieClip par exemple.

 

Une copie d’écran pour illustrer mes explications :

Propriétés des Sprite dans Adobe Flash

Les graphismes définis dans le fla sont très basiques. Libre à vous d’insérer des images, des animations, des dessins vestoriels plus créatifs et recherchés.

Il y a énormément de possibilités pour personnaliser les composants du Framework Actionscript-Facile. Vous pouvez utiliser des images png, jpg, des animations, des dessins vectoriels…

Le principe des créations des skins est identique pour chacun des composants. Il y a plus ou moins de MovieClip à créer suivant les états graphiques possibles du composant.

Ensuite, une fois le fla créé, vous pouvez l’exporter soit au format swc ou au format swf. C’est en fonction de la maniète dont vous souhaitez utiliser les MovieClip avec votre code AS3.

Pour cet exemple, nous allons exporter le fla au format swc pour intégrer directement les classes graphiques avec l’éditeur AS3 de notre choix.

Pour développer simplement en ActionScript, je vous conseille l’Éditeur FDT PowerFlasher : l’essayer, c’est l’adopter.

II – Utilisation des Composants

Tous les composants du Framework ActionScript-Facile s’utilisent de la même façon.

Ils possèdent tous des fonctionnalités identiques :

  • personnalisation graphiques de chaque éléments du composant ActionScript.
  • possibilité de l’afficher ou non dans la DisplayList.
  • interaction possible du composant avec l’utilisateur.

La 1ère étape consiste à créer une nouvelle instance de notre composant. Par exemple pour un Button, il sufffit d’écrire le code suivant :

[codesyntax lang= »actionscript3″ title= »Button.as » bookmarkname= »Button.as »]

[/codesyntax]

2ème étape : en fonction du composant utilisé, vous définissez ses paramètres propres. Ci dessous, la création d’un composant Button et d’une liste.

[codesyntax lang= »actionscript3″ title= »List.as » bookmarkname= »List.as »]

[/codesyntax]

La 3ème étape consiste à affecter à notre composant le skin que nous lui avons conçu.
Un simple button.applySkin( new DefaultButtonSkin() ); met à jour le graphisme de notre composant.
Ou list.applySkin( new DefaultListSkin() ); pour le composant List.

En route pour la 4ème étape!
Il nous reste à positionner notre composant sur la scène et à l’afficher. Bien évidemment, il est possible de paramétrer les options de notre composant : modifier sa taille, le style de son texte…

[codesyntax lang= »actionscript3″ title= »Exemple.as » bookmarkname= »Exemple.as »]

[/codesyntax]

La 5ème et dernière étape est plus ou moins compliquée en fonction de l’application flash que vous crééz.
Vous avez la possibilité d’écouter les actions de l’utilisateur.

En fonction des intéractions de l’utilisateur, votre application flash peut :

  • afficher / masquer telle ou telle partie de l’interface,
  • modifier le titre d’un élément
  • inviter l’utilisateur à effectuer une action dans votre application
  • etc…

Ci-dessous le code source complet d’utilisation des composants que nous venons de créer.

[codesyntax lang= »actionscript3″ title= »DeveloppezExample.as » bookmarkname= »DeveloppezExample.as »]

[/codesyntax]

III – Conclusion

Nous venons donc de découvrir la création de Skin / graphismes pour les composants AS3 Facile.

L’application Flash ci-dessous montre une démonstration du changement de graphisme en live.

Évolutions des fonctionnalités

C’est à vous de créer des applications totalement réutilisables pour vos différents sites.

Par exemple, vous concevez un livre d’or avec des graphismes s’accordant à la charte du site de votre client.

Vous pouvez réutiliser la même application, juste en modifiant totalement le graphisme des composants pour votre nouveau client. Le fichier application.swf reste identique.

Et avec le chargement des bibliothèques partagées (avec des graphismes stockés dans swf externes), vous n’avez même plus besoin de recompiler votre application Flash !

C’est génial, le temps que vous pouvez gagner pour vous concentrer sur le visuel, les besoins en terme d’image pour vos clients.

Sources commentées

  • DeveloppezExample.as
  • com.actionscriptfacile.ui.button.Button.as
  • com.actionscriptfacile.ui.list.List.as
  • com.actionscriptfacile.ui.utils.UIMargins.as
  • com.actionscriptfacile.ui.combo.element.ComboBoxElement.as
  • com.actionscriptfacile.ui.combo.ComboBox.as
  • com.actionscriptfacile.ui.text.UITextField.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Changement de Skin en live”

developpez_exemple.zip – Téléchargé 960 fois – 87,01 Ko

Une question : quels Graphismes avez-vous créés pour les Composants AS3 Facile ?

Postez-vos exemples dans les commentaires ci-dessous.

Je mettrais en téléchargement (avec un lien vers votre site) les graphismes les plus sympathiques.

Je serais ravi de voir vos applications, postez les avec vos commentaires ci -dessous 🙂

Création d’un Mini Flex avec les Composants AS3 Facile

1 question

Ecrit le 3 octobre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Et voici un article Bonus qui montre une autre facette du Framework AS3 Facile!

La création d’une Application avec les Composants AS3 Facile. Cet exemple Flash utilise un fichier xml pour la construction des Composants ActionScript.

I – CDCF et CDCT

Pour une fois, nous allons déroger à la règle.

En effet, cette fois-ci il n’y aura aucun cahier des charges techniques ni de cahier des charges fonctionnels.

Pourquoi me direz-vous ?

Eh bien tout simplement parce que nous n’allons pas développer une application flash destinée à être utilisé telle quelle en production.

Le contexte d’apprentissage de cet article est plus du domaine de la Recherche & Développement.

La fameuse R&D!

II – Mini Flex

Place à la pratique, au code !

Nous allons concevoir un mini Flex.

C’est à dire que nous allons coder une classe de document. Cette classe va nous permettre de créer des interfaces, à l’aide d’un fichier XML chargé dynamiquement.

Cela consiste à développer un parseur qui :

  • Va analyser notre XML de configuration.
  • En déduire ce qu’il doit créer et comment.

Le code en lui-même reste simple, je vous laisse donc le découvrir.

Sachez cependant qu’il est loin d’être terminé.

En effet, seul le composant Button est implémenté.

Je vous encourage vivement à continuer, en implémentant tous les composants que nous avons développés précédemment.

Debug dans Flash avec Firefox / Google Chrome

Vous remarquerez sans doute que j’ai ajouté dans la classe MiniFlexExample.as un système de debug d’application.

Cet ensemble de classes fonctionne avec Firefox pour effectuer un affichage – debug (ou trace) de votre application en ligne.

Cette fonctionnalité est indispensable pour les RIA Flash 🙂

Il vous suffit de :

Ensuite dans votre code ActionScript, vous n’avez plus qu’à utiliser la syntaxe suivante pour afficher le message, les variables que vous souhaitez.

[codesyntax lang= »actionscript3″ title= »ThunderBolt’s Logger.as » bookmarkname= »ThunderBolt’s Logger.as »]

[/codesyntax]

Conclusion

Voilà, cette fois-ci tout est fini !

Notre mini application Flex en action :

Évolutions des fonctionnalités

Je vous propose de continuer à développer ce mini-flex pour :

  • intégrer les autres composants d’ActionScript-Facile.
  • ajouter des fonctionnalités propres à vos besoins.
  • l’utiliser comme modèle pour créer vos applications. Évidemment, il est nécessaire, voir indispensable, de concevoir une analyse beaucoup plus complète et structurée.

Le début de la programmation AS3 Facile

Ne perdez pas de vue que ce n’est que le début.

En effet, notre librairie est loin d’être complète, je vous encourage vivement à l’enrichir et à l’améliorer.

J’ai pris beaucoup de plaisir à être votre guide tout au long de ces 10 articles et j’espère que leur lecture vous aura aidé.

Sources commentées

  • MiniFlexExample.as
  • bin/interface.xml

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Mini Flex Framework AS3 Facile”

miniflex_framework_actionscript-facile.zip – Téléchargé 746 fois – 91,16 Ko

Comment utilisez-vous les Composants AS3 Facile ?

Je serais ravi de consulter les Applications Flash que vous avez développés avec le Framework AS3 Facile.

Postez-les dans les commentaires juste en dessous, je les rajouterais prochainement dans un article!

[codesyntax lang= »actionscript3″ title= »MiniFlexExample.as » bookmarkname= »MiniFlexExample.as »]

[/codesyntax]

[codesyntax lang= »xml » title= »interface.xml » bookmarkname= »interface.xml »]

[/codesyntax]

Comment créer une infos bulle ou ToolTip en AS3 ?

4 questions

Ecrit le 25 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Dans ce tutoriel, nous allons découvrir la création ActionScript du  Composant AS3 : ToolTip.

Un ToolTip est une bulle d’information, elle apparait généralement au dessus d’un bouton, d’un formulaire…

I – Cahier Des Charges Fonctionnel du ToolTip

Un ToolTip est un UIComponent composé :

  • d’un background ( arrière-plan )
  • d’un champ texte de type UITextField.

Comme nous l’avons appris dans les tutoriels précédents, il suffit de passer en paramètre une instance de la classe ToolTip au setter tooltip de la classe de base UIComponent.

La méthode show() (du composant) sera appelée lorsque l’UIComponent en question sera survolé par l’utilisateur.

Le composant ToolTip possède les fonctionnalités suivantes :

  • Personnalisation du texte ainsi que de son formatage.
  • Personnalisation de l’arrière-plan de l’infobulle.
  • Apparition après un délai défini de l’infobulle ( exprimé en millisecondes ).

II – Cahier Des Charges Techniques du ToolTip

Le Cahier Des Charges Technique du composant ToolTip est relativement simple.

  • Personnalisation du texte ainsi que de son formatage.

Pour cela, nous coderons un getter qui renverra une référence au champ texte de type UITextField.

  • Personnalisation de l’arrière-plan de l’infobulle.

Comme d’habitude, nous allons overrider la méthode de base applySkin de la classe UIComponent.

  • Apparition après un délai défini de l’infobulle ( exprimé en millisecondes ).

Nous allons overrider la méthode de base show de la classe UIComponent. Et ensuite, nous lancerons la méthode parente après le délai défini dans un setTimeOut.

Nous laisserons également la possibilité à l’utilisateur de modifier ce délai à tout moment à l’aide d’un getter / setter.

Conclusion

Ce Tutoriel conclut la série vous expliquant la création du Framework de Composants AS3 Facile.

Ci-dessous, le Composant AS3 ToolTip en action.

Évolutions des fonctionnalités

Je vous propose de laisser vagabonder votre imagination et de créer des Skins pour le composant ToolTip. Étonnez les Développeurs d’ActionScript-Facile.

Vous pouvez également ajouter un effet Tween pour gérer l’apparition du ToolTip, un effet alpha, lui ajouter une ombre

Sources commentées

  • ToolTipExample.as
  • com.actionscriptfacile.ui.tooltip.ToolTip.as
  • com.as3facileexemple.skin.classic.DefaultToolTipSkin.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Composant ToolTip Framework AS3 Facile”

component_tooltip_framework_actionscript-facile.zip – Téléchargé 1200 fois – 76,31 Ko

Quels sont les prochains tutoriels que vous souhaitez sur ActionScript-Facile ?

Voulez-vous des exemples d’utilisation des Composants AS3 Facile ? Des fonctionnalités supplémentaires, des nouveaux Composants ?

Dites moi cela tout simplement dans les commentaires juste en dessous.

[codesyntax lang= »actionscript3″ title= »ToolTipExample.as » bookmarkname= »ToolTipExample.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.tooltip.Tooltip.as » bookmarkname= »com.actionscriptfacile.ui.tooltip.Tooltip.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultToolTipSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultToolTipSkin.as »]

[/codesyntax]

Comment utiliser du texte dynamique en AS3 avec TextField ?

22 questions

Ecrit le 21 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Pour travailler avec du texte dans Flash, il est nécessaire d‘utiliser une multitude de classes différentes !

En effet, les classes ( TextFieldAutoSize, TextFieldAlign, TextFieldType, TextFormatFont, TextField etc… sont utiles pour définir la mise en forme d’un champ texte.

Dans ce tutoriel, nous allons créer le Composant AS3 TextField pour simplifier la manipulation d’un champ texte.

Ce composant étendra tout simplement la classe de base TextField et ajoutera des fonctionnalités très intéressantes !

I – Cahier Des Charges Fonctionnel du TextField

Comme d’habitude, nous passons à la rédaction du CDCF (Cahier Des Charges Fonctionnel).

La liste des fonctionnalités pour un champ de type UITextField est déjà disponible de manière native en ActionScript.

La seule chose qui change, c’est la façon de les implémenter.

Nous passons donc directement à la création du Cahier Des Charges Techniques.

II – Cahier Des Charges Techniques du TextField

Pour cela, nous allons créer la classe UITextField. Nous lui ajoutons des méthodes supplémentaires. Celles-ci nous permettront de formater le texte sans passer par la classe TextFormat ni les autres classes annexes.

Voici l’ensemble des méthodes de la classe UITextField :

  • Méthode changeFormat : elle permet de définir le formatage du texte ou d’un groupe de caractères à l’aide d’une seule et unique méthode.
  • Méthode changeLetterFormat : cette méthode permet de définir le format d’une seule lettre.
  • Méthode getLetterFormat : elle permet de récupérer le format d’une seule lettre.
  • Getter/ Setter appelé font : pour changer et récupérer la police de caractère. L’embarquement des polices sera géré automatiquement par le setter qui déterminera si la police est une police système ou non.

 

  • Méthode convertToInput : pour convertir le texte en champ de saisie.
  • Méthode convertToDynamic : pour convertir le texte en champ dynamique.
  • Nous implémentons également des méthodes pour changer l’alignement et le redimensionnement automatique du texte : alignCenter, alignRight, alignLeft, alignJustify, autoSizeRight, autoSizeLeft, autoSizeCenter, autoSizeNone. Des méthodes qui nous simplifient l’utilisation des classes TextFieldAutoSize et TextFieldAlign.

 

 

  • Getters / Setters maxWidth et maxHeight : permettent de définir une largeur et une hauteur maximale.
  • Méthode destroy : et enfin nous implémentons une méthode qui permet de détruire proprement notre composant. Elle ressemble de très près à la méthode destroy de la classe UIComponent.

 

Conclusion

Nous disposons maintenant d’un champ texte avec une mise à jour de son formatage grandement facilitée.

A l’utilisation, le composant UITextField se révèle être une véritable bénédiction pour manipuler un champ texte.

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 TextField, vous trouverez ci-dessous un exemple d’utilisation.

A vous de jouer !

TextField avec des fonts dynamiques

Je vous propose d’utiliser des fonts (polices) dynamiques pour vos textes.

Amusez-vous en utilisant des polices originales : découvrez un vaste choix de polices gratuites sur dafont. Elles ne sont généralement pas disponibles dans les polices de bases des systèmes d’exploitations (Windows, Linux, MAC). Il est donc nécessaire de les charger dans le Flash Player.

La lecture de cet article : Utiliser des polices partagées dynamiquement en AS3, devrait grandement vous faciliter la tâche!

L’Editeur ActionScript FDT 4.0 simplifie énormément la création des swf de polices partagées : Téléchargez le guide d’utilisation de l’Editeur ActionScript FDT.

Sources commentées

  • com.actionscriptfacile.ui.text.UITextField.as
  • UITextFieldExample.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Component TextField Framework actionscript-facile”

component_textfield_framework_actionscript-facile.zip – Téléchargé 1236 fois – 74,15 Ko

Et vous, comment utilisez-vous le texte / TextField en AS3 ?

Quelles classes avez-vous développé pour simplifier la création des champs textes dynamiques avec Flash ?

Je serais ravis de voir vos différentes implémentations. Utilisez les commentaires juste en dessous pour partager votre code.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.text.UITextField.as » bookmarkname= »com.actionscriptfacile.ui.text.UITextField.as « ]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »UITextFieldExample.as » bookmarkname= »UITextFieldExample.as »]

[/codesyntax]

Comment créer une ComboBox en AS3 ?

1 question

Ecrit le 19 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

En route pour la création de notre 4ème Composant ActionScript : la fameuse ComboBox ou Liste Déroulante.

Dans ce tutoriel, nous verrons comment définir les fonctionnalités du Composants AS3 ComboBox. Ainsi que les méthodes simplifiant son utilisation dans Flash.

I – Cahier Des Charges Fonctionnel d’une ComboBox

Un composant de type ComboBox est en fait une liste déroulante. Il y a en sur la majorité des sites internet. Elle se compose d’un bouton et d’un composant de type List. La valeur du bouton change suivant l’élément qui est sélectionné dans la Liste.

Une fois n’est pas coutume, nous allons illustrer notre description :

Ici nous pouvons reconnaître deux composants que nous avons déjà développé :

  • le Button ( la partie qui contient le texte “Times New Roman” )
  • la List ( le rectangle qui contient une liste de polices de caractères et qui peut être scrollée ).

La rédaction du CDCF (Cahier Des Charges Fonctionnel) est donc quasiment terminé.

Nous allons juste ajouter une petite contrainte :

  • Tous les éléments du composant List ont tous la même hauteur et le même style. Nous conservons ce comportement graphique cohérent.

II – Cahier Des Charges Techniques d’une ComboBox

Traduisons en terme technique le CDCF (les spécifications fonctionnelles) du composant ComboBox. C’est parti pour la rédaction du CDCT (Cahier Des Charges Techniques).

Un composant de type ComboBox est une liste déroulante comme vous pouvez en voir sur n’importe quel site internet. Elle se compose d’un bouton et d’un composant de type List.

La classe ComboBoxButton

Le bouton représente le titre de la ComboBox. Pour cela nous développons une classe ComboBoxButton.

Aucun problème pour le bouton, nous avons déjà développé auparavant les composants graphiques nécessaires.

  • La valeur du bouton change suivant l’élément qui est sélectionné dans la List.

Nous écouterons donc l’évènement MOUSE_CLICK de type flash.events.MouseEvent sur le composant List.

La classe ComboBoxButton reprend les fonctionnalités de la classe Button en ajoutant les suivantes :

  • un getter / setter permettant de récupérer la valeur (un objet) d’un ComboBoxButton.
  • la gestion du skin graphique propre à ComboBoxButton.

La classe ComboBoxElement

  • Tous les éléments du composant List possèdent une hauteur et un style identique, nous devons conserver ce comportement graphique cohérent.

Pour cela, nous créons une classe ComboBoxElement qui reprend les fonctionnalités de la classe Button.

Par extension, elle héritera également des fonctionnalités de la classe de base UIComponent.

Ainsi, tous les éléments qui seront ajoutés dans notre List seront du même type et possèderont tous une apparence identique.

Les éléments de la List de la ComboBox sont bien évidemment personnalisables graphiquement avec 3 états différents :

  • Normal : L’élément est « au repos », il n’est ni survolé, ni cliqué.
  • Survol : L’utilisateur passe et laisse sa souris au dessus de l’élément sans toutefois cliquer dessus.
  • Cliqué ou clic maintenu : L’utilisateur réalise un clic gauche et laisse le bouton de sa souris maintenu sur l’élément.

Conclusion

Voilà, c’est terminé, toutes mes félicitations pour avoir suivi et appliqué l’ensemble des Tutoriels AS3. Vous venez de créer une Bibliothèque AS3 de Composants Graphiques ou plus communément appelé un Framework de Composants AS3.

La ComboBox est le dernier composant graphique que nous avions à développer et qui nécessitait tant d’efforts.

Les prochains tutoriels seront des bonus.

C’est ma façon de vous remercier et de vous encourager à développer vos propres composants graphiques. Soit en apportant des améliorations au Framework AS3 Facile ou en développant votre propre Framework de Composants.

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 ComboBox, voici quelques exemples de fonctionnalités supplémentaires à implémenter.

Allez, maintenant, c’est à vous de coder 🙂

Méthode resizeListOnly

Je vous propose d’ajouter la méthode resizeListOnly() à notre composant ComboBox.

resizeListOnly ajoute la fonctionnalité suivante :

  • permet de déterminer les dimensions de la List indépendamment du Titre ( ComboBoxButton ). En quelque sorte, la liste déroulante qui apparait sous la ComboBox peut être plus large que son titre. Pensez également à redimensionner les éléments de la List!

 

Création d’un menu en Flash

Avec le composant ComboBox et la méthode resizeListOnly, vous pouvez créer un menu de navigation tout simple. Une des solutions (il y a en plusieurs) consiste à utiliser plusieurs ComboBox, positionnées les unes à côté des autres et interagissant entre elles.

Si vous concevez souvent des menus pour vos applications Flash, je vous conseille de créer un composant Menu.

Sources commentées

  • com.actionscriptfacile.ui.combo.element.ComboBoxElement
  • com.actionscriptfacile.ui.combo.element.ComboBoxButton
  • com.actionscriptfacile.ui.combo.ComboBox
  • ComboExample.as
  • com.as3facileexemple.skin.classic.DefaultComboBoxSkin.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Composant ComboBox du Framework AS3 Facile”

component_combobox_framework_actionscript-facile.zip – Téléchargé 1285 fois – 68,76 Ko

Et vous, comment avez-vous utilisé ce Composant AS3 ComboBox ?

Postez vos exemples de ComboBox (des liens vers vos réalisations) dans les commentaires juste en dessous.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.element.ComboBoxElement.as » bookmarkname= »com.actionscriptfacile.ui.combo.element.ComboBoxElement.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.element.ComboBoxButton.as » bookmarkname= »com.actionscriptfacile.ui.combo.element.ComboBoxButton.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.ComboBox.as » bookmarkname= »com.actionscriptfacile.ui.combo.ComboBox.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »ComboExample.as » bookmarkname= »ComboExample.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultComboBoxSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultComboBoxSkin.as »]

[/codesyntax]

Comment créer et personnaliser une Liste en AS3 ?

2 questions

Ecrit le 15 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Dans ce tutoriel, nous allons créer et personnaliser le Composant AS3 List.

Vous verrez comment définir les méthodes de la classe List. Et comment la personnaliser avec l’utilisation des Skins graphiques.

I – Cahier Des Charges Fonctionnel de la List

Un composant de type List peut se comparer visuellement à une maison.

Dans une maison (en général), l’espace habitable ne se limite pas à ce que l’on peut distinguer par la fenêtre. Depuis l’extérieur, nous n’en voyons donc qu’une partie.

Le composant List est à la fois : la maison et la fenêtre.

Il peut contenir autant d’objets graphiques que l’on souhaite ( comme une maison peut contenir un certain nombre de meubles ). Toutefois, il ne pourra en afficher qu’une partie ( la fenêtre ).

Le Composant List innove par rapport à la maison. Effectivement, il est possible de faire défiler tous les objets graphiques qu’il contient par le biais d’une scrollBar ( verticale ou horizontale ). Ainsi, l’ensemble de son contenu pourra être visualisé.

C’est un peu comme si vous aviez une scrollBar sur la fenêtre de votre maison, qui déplacerait vos meubles, de sorte qu’ils arrivent automatiquement devant la fenêtre.

Maintenant que nous avons défini ce qu’est un composant List, nous allons pouvoir nous attaquer à sa conception.

Comme pour le Composant ScrollBar, le sujet augmente en difficulté, au fur et à mesure de la création des Composants AS3 Facile.

Nous allons ainsi nous simplifier la vie en implémentant un Composant List :

  • qui gère uniquement le scroll vertical.
  • qui va éditer pour nous les positions de l’ensemble des objets graphiques qu’il recevra. Dans le but que ceux-ci apparaissent à la “queue leu leu”.

Un Composant List est constitué de 4 entités :

  • Un clip conteneur ( la maison ), qui va se charger de réceptionner des objets graphiques. La taille du conteneur augmente et diminue en fonction du nombre d’objets graphiques qu’il contient.

 

  • Un clip masque ( la fenêtre ), qui nous servira à cacher une partie des objets graphiques.
  • Un clip background ( le papier peint ) qui servira juste de fond à notre composant, ceci est purement esthétique et vous n’êtes en aucun cas obligé de l’implémenter.

 

  • Une scrollBar verticale qui s’affichera uniquement lorsque la taille du conteneur dépassera les dimensions de la fenêtre.

Pour compléter notre CDCF, la taille du masque peut être éditée. De plus, le fond et la scrollBar sont personnalisables graphiquement.

Avec toutes ces informations dans notre CDCF (Cahier Des Charges Fonctionnel), nous pouvons passer à la rédaction du CDCT (Cahier Des Charges Technique).

II – Cahier Des Charges Techniques de la List

Nous allons donc traduire, en termes techniques, les spécifications fonctionnelles de notre composant List.

La Classe List

  • Un clip conteneur ( la maison ) va se charger de réceptionner des objets graphiques. La taille du conteneur augmente et diminue en fonction du nombre d’objets graphiques qu’il contient.

En lieu et place d’un clip, nous allons utiliser un objet Sprite.

  • Un clip masque ( la fenêtre ), qui nous servira à cacher une partie des objets graphiques.

Ici, un simple objet de type Shape suffira largement.

  • Un clip background ( le papier peint ) qui servira juste de fond à notre composant. Celui-ci est purement esthétique et vous n’êtes en aucun cas obligé de l’implémenter.

Un objet de type Sprite qui contiendra le fond du composant List.

  • Une scrollBar verticale qui ne s’affichera que lorsque la taille du conteneur dépassera les dimensions de la fenêtre.

Un objet de type com.actionscriptfacile.ui.scroll.components.VerticalScrollBar ( veuillez lire le Tutoriel 5 sur la Création du Composant Vertical ScrollBar ).

  • La taille du masque peut être éditée.

Pour cela, nous allons overrider la méthode de base resize de la classe parente UIComponent.

  • Le fond personnalisable graphiquement ainsi que la scrollBar.

Pour cette fonctionnalité, nous allons effectuer un override de la méthode de base applySkin de la classe parente UIComponent.

La classe UIMargins

Et comme toujours, nous allons ajouter une petite difficulté en intégrant une fonctionnalité supplémentaire à notre composant. J’ai nommé : les marges!

Le conteneur doit pouvoir appliquer des marges au contenu dans les 4 directions suivantes :

  • Haut
  • Bas
  • Gauche
  • Droite

La solution technique reste simple :

  • Pour respecter la marge gauche nous décalerons le masque et le conteneur vers la droite.
  • Pour respecter la marge haute nous décalerons le masque et le conteneur vers le bas.
  • Pour respecter la marge droite nous réduirons la largeur du masque.
  • Pour respecter la marge basse nous réduirons la hauteur du masque.

Pour définir nos marges, nous allons créer une classe nommée UIMargins. Elle se trouvera dans le package com.actionscriptfacile.ui.utils.

Conclusion

Et voila, notre composant List est terminé. Regardez le résultat ci-dessous.

Dans le prochain tutoriel AS3, nous attaquerons notre dernier composant : la ComboBox! ( ou liste déroulante ).

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 List, voici quelques exemples de fonctionnalités supplémentaires à implémenter. Proposez vos exemples dans les commentaires.

Allez, maintenant, c’est à vous de jouer !

List avec une ScrollBar Horizontale

Ajoutez au composant List la gestion d’une ScrollBar Horizontale.

Dans le tutoriel précédent (Création d’un Composant AS3 Vertical Scrollbar), un des exercices consistait à concevoir une ScrollBar Horizontale. Il suffit de réutiliser cette classe et de l’instancier / afficher (si besoin) par le composant List.

List avec des composants Button

Vous pouvez également remplacer les différents éléments de la List par des objets de type Button (lisez le Tutoriel 4 : Création du Composant AS3 Button).

Puis vous écoutez les évènements des objets Button. Et vous avez la possibilité de créer une action spécifique, en fonction du Button sélectionné par l’utilisateur.

Sources commentées

  • com.actionscriptfacile.ui.list.List.as
  • com.actionscriptfacile.ui.utils.UIMargins.as
  • ListExample.as
  • com.as3facileexemple.skin.classic.DefaultListSkin.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Composant List du Framework AS3 Facile”

component_list_framework_actionscript-facile.zip – Téléchargé 1085 fois – 68,96 Ko

Et vous, quels graphismes avez-vous créé pour votre List ?

Je suis curieux de visualiser les différentes utilisations que vous avez utilisé pour le Composant AS3 List.

Ajoutez vos réalisations dans les commentaires juste en dessous.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.list.List.as » bookmarkname= »com.actionscriptfacile.ui.list.List.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.utils.UIMargins.as » bookmarkname= »com.actionscriptfacile.ui.utils.UIMargins.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »ListExample.as » bookmarkname= »ListExample.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultListSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultListSkin.as »]

[/codesyntax]