Sujets sur : creer list dynamiquement as3

Cours ActionScript 3 ‘creer list dynamiquement as3’

Comment créer une ScrollBar en AS3 ?

11 questions

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

Nous sommes enfin prêt à attaquer le composant classique que tout développeur a développé au moins une fois dans sa vie. J’ai nommé la Scrollbar !

Nous étudierons dans un premier temps la scrollbar verticale. Rassurez-vous, le raisonnement est exactement le même dans le sens horizontal.

I – Cahier Des Charges Fonctionnel d’une ScrollBar

Nous allons commencer par un bref descriptif des fonctionnalités d’une ScrollBar Vertical.

Une ScrollBar Vertical est un composant graphique qui permet à l’utilisateur de faire défiler ( il s’agit de scroll, ou scrolling ) verticalement un objet graphique (autrement appelé le content) au sein d’une zone définie au préalable (la scrollArea).

Une ScrollBar Vertical est constituée de 4 entités :

  • Un objet graphique, qui, lors d’un click, permet de scroller le content vers le haut.
  • Un objet graphique, qui, lors d’un click, permet scroller le content vers le bas.
  • Un objet graphique pouvant être glissé au sein d’une zone, le dit glissement ayant une répercussion directe sur le scroll du content. Nous l’appèlerons le scroller.

 

  • Un objet graphique représentant la zone dans laquelle le scroller peut être déplacé. Lors d’un click sur cette zone, le scroller est déplacé à l’endroit du click entraînant ainsi le scrolling du content. Nous l’appelerons le background.

   
Comme pour le Composant AS3 Button, chacune des entités du composant VerticalScrollBar devra être personnalisable graphiquement.

De plus, le content doit pouvoir être redéfini à tout moment, ainsi que la scrollArea.

II – Cahier Des Charges Techniques d’une ScrollBar

Comme pour les composants précédents, nous traduisons le CDCF (Cahier Des Charges Fonctionnel) en termes techniques. Pour cela, nous rédigeons le CDCT (Cahier Des Charges Technique).

“Une VerticalScrollBar est un composant graphique qui permet à l’utilisateur de faire défiler ( on parle de scroll, ou scrolling ) verticalement un objet graphique ( autrement appelé le content ) au sein d’une zone définie au préalable ( la scrollArea ).”

La classe ScrollManager

Pour ce type de fonctionnement, nous allons créer une classe nommée ScrollManager. Cette classe se chargera de gérer le scrolling du content.

Le composant graphique VerticalScrollBar, quand à lui, se chargera :

  • d’instancier la ScrollManager.
  • d’envoyer les paramètres nécessaires à la ScrollManager.
  • de mettre à jour la ScrollManager.

La classe VerticalScrollBar

“Une VerticalScrollBar est constituée de 4 entités.”

Nous allons donc créer une classe nommée VerticalScrollBar qui étendra la classe de base UIComponent. La classe VerticalScrollBar hérite ainsi de toutes les fonctionnalités de base d’un composant utilisateur telles que définies dans sa classe parente.

  • “Un objet graphique, qui, lors d’un click, permet de scroller le content vers le haut.”

Un simple Button, qui, lors d’un click, demandera au scrollManager de scroller le content vers le haut.

  • “Un objet graphique, qui, lors d’un click, permet scroller le content vers le bas.”

Un simple Button, qui, lors d’un click, demandera au scrollManager de scroller le content vers le bas.

  • “Un objet graphique pouvant être glissé au sein d’une zone, le dit glissement ayant une répercussion directe sur le scroll du content. Nous l’appellerons le scroller.”

Un Button sur lequel nous appliquerons un startDrag() lors d’un clic maintenu, que nous désactiverons dès que l’utilisateur relâchera sa souris.

  • “Un objet graphique représentant la zone dans laquelle le scroller peut être déplacé. Lors d’un click sur cette zone, le scroller est déplacé à l’endroit du click entraînant ainsi le scrolling du content. Nous l’appelerons le background.”

Un UIComponent sur lequel on écoutera les évènements de type MouseEvent.CLICK. Il se chargera de déplacer le scroller au niveau du point de click ce qui entraînera des modifications au niveau du ScrollManager.

  • “Chacune des entités du composant devra être personnalisable graphiquement.”

Override de la fonction “applySkin” de base afin de mettre à jour le style de chacun des éléments composants la scrollBar.

  • “Le content doit pouvoir être redéfini à tout moment, ainsi que la scrollArea.”

Nous créerons ainsi deux getters / setters au sein de la classe ScrollManager que nous laisserons accessibles depuis l’extérieur de la VerticalScrollBar.

Conclusion

Et voila, nous avons terminé de créer notre ScrollBar verticale.

Le composant VerticalScrollBar vous permet de scroller verticalement un objet graphique au sein d’une zone définie.

Évolutions des fonctionnalités

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

Maintenant c’est à vous de jouer !

HorizontalScrollBar

Développez une scrollbar horizontale, la tâche vous est simplifiée. Effectivement, notre ScrollManager (définit dans com.actionscriptfacile.ui.scroll.manager) offre la possibilité de scroller un objet à l’horizontale.

Tween ScrollBar

Vous pouvez également ajouter un effet Tween (Elastic, Bounce…) lors du déplacement d’un contenu par les boutons de la ScrollBar. Lorsque l’utilisateur appuie sur le bouton ScrollUp par exemple, le contenu se déplace avec un léger effet Elastic.

Vous pouvez utiliser le framework TweenMax : un ensemble de classes pour utiliser des tween plus facilement.

Sources commentées

  • com.actionscriptfacile.ui.scroll.manager.ScrollManager.as
  • com.actionscriptfacile.ui.scroll.manager.IScrollManager.as
  • com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as
  • com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as
  • com.actionscriptfacile.ui.scroll.components.ScrollerButton.as
  • com.actionscriptfacile.ui.scroll.components. ScrollDownButton.as
  • VerticalScrollBarExample.as
  • com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.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 “Composant Vertical ScrollBar Framework AS3 Facile”

component_verticalscrollbar_framework_actionscript-facile.zip – Téléchargé 1670 fois – 70,62 Ko

Allez, montrez moi votre code d’une ScrollBar horizontale…

Utilisez les commentaires ci-dessous, j’apporterais des corrections sur votre code si nécessaire.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.manager.ScrollManager.as » bookmarkname= »com.actionscriptfacile.ui.scroll.manager.ScrollManager.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.manager.IScrollManager.as » bookmarkname= »com.actionscriptfacile.ui.scroll.manager.IScrollManager.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollerButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollerButton.as « ]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollDownButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollDownButton.as »]

[/codesyntax]

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

[/codesyntax]

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

[/codesyntax]