TWSCROLLBAR, UNE CLASSE DE SCROLLBAR SIMPLE ET PRATIQUE À UTILISER
pegase31
Messages postés
6138
Date d'inscription
dimanche 21 décembre 2003
Statut
Modérateur
Dernière intervention
4 septembre 2013
-
23 janv. 2010 à 12:06
top30 Messages postés 1158 Date d'inscription vendredi 21 février 2003 Statut Membre Dernière intervention 6 août 2010 - 27 janv. 2010 à 01:59
top30 Messages postés 1158 Date d'inscription vendredi 21 février 2003 Statut Membre Dernière intervention 6 août 2010 - 27 janv. 2010 à 01:59
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/51166-twscrollbar-une-classe-de-scrollbar-simple-et-pratique-a-utiliser
https://codes-sources.commentcamarche.net/source/51166-twscrollbar-une-classe-de-scrollbar-simple-et-pratique-a-utiliser
27 janv. 2010 à 01:59
Bref il est tard je suis fatigue, profite et a plus...
Desole pour les fautes, mais y a mon "clavier" qui a encore saute et me re fait n importe quoi....
25 janv. 2010 à 19:02
Mais je pense qu'en gérant le déplacement de l'objet à l'extérieur de la classe, on complique le code pour pas grand chose. Il est extrêmement rare qu'une scrollbar gère plusieurs objets en même temps. Ainsi on obligerait les gens à compliquer la mise en place de la scrollbar pour rien dans la plupart des cas.
De plus, avec scrollRect, on ne touchera plus à l'objet lui même, mais à ce fameux rectangle. Donc, on restera conforme.
Le but de cette classe, c'est une instanciation en deux lignes dans le code principal et basta, on ne s'en occupe plus, c'est fait, et ca se gère tout seul. Gagner du temps et de la clarté !
Par contre, rajouter un évènement onChange est possible facilement (il y a déjà la propriété thumbPercent ici). Ainsi, si le cas se présente, on pourra gérer plusieurs objets dans le code de la classe conteneur.
Je le note dans la TODO list !
25 janv. 2010 à 18:16
L'exemple plus ou moins correcte est le suivant:
var rect :Rectangle= new Rectangle(0,0,200,100) ;
var offset :Number= rect.height-monObject.height ;
monObject.scrollRect= rect ;
trace( monObject.height ) ;// 200 ;
function onChange ( $e:ScrollEvent ):void{
rect= monObject.scrollRect ;
rect.y= $e.scrollPosition.y*offset ;
monObject.scrollRect= rect :
}
myScrollbar.addEventListener("change",onChange );
25 janv. 2010 à 18:12
Je n'avais pas prété attention a la propriété "scrollRect" du DisplayObject. Je mis suis donc mis pour voir ce que cela donnait. Oui en fait c'est interessant, car par exemple au contraire de la propriété "mask", une fois un rectangle appliqué, la taille de l'objet DEVIENT celle du rectangle. Pratique pour l'alignement par exemple.
Par contre, pour scroller c'est ausi simple. Tout se passe sur le rectangle et non sur la cible. Pour scroller il suffit de déplacer les axes du rectangle (x ou y), par contre, il faudra redefinir le rectangle si le contenu de la cible change.
NON LES SCROLLBAR NE DOIVENT RIEN SAVOIR DE L'OBJET QU'ELLES SCROLL !!!
Elles émettent un event "change" si elle bouge, avec en proriété de l'event une valeur "scrollPosition" étant un point dont le "x" et le "y" étant définit de 0 à 1.
0 étant la scrollbar à son point départ et 1 à point son arrivée.
Pour les plus pointilleux, le scrollbar peux avoir une fonction "resize(scale)". Ou scale est une valeur entre 0 et 1.
0 redefinisant la taille du "track" à 0 (mais c'est théorique, un minimun non null étant conseillé) et 1 étant la scrollbar remplissant tout le "rail" et donc inutile (se masque seule).
Ainsi votre scrollbar pourra scroller "X" objet.
var rect :Rectangle= new Rectangle(0,0,200,100) ;
var objectHeight :Number= monObject.height ;
monObject.scrollRect= rect );
trace( monObject.height ) ;// 200 ;
function onChange ( $e:ScrollEvent ):void{
rect= monObject.scrollRect ;
rect.y= $e.scrollPosition.y*objectHeight
monObject.scrollRect= rect ,
}
myScrollbar.addEventListener("change",onChange );
C'est pas du code fonctionel, c'est écrit comme ca pour vous indiquer le chemin à suivre. Si ca vous chante bien sur... Mais faites-moi confiance, c/est comme ca. Car avec ce que je vous ai décrit même si plusieurs object écoute la même scrollbar et que un suel en définit la taille du "track" réllement proportionnel, les autres object continues de scroller normalement.
Si j'ai le temps un jour je vous ferais une démo...
25 janv. 2010 à 16:52
Apres, pour le blurEffect, ben... Je laisse : tu peux mettre ton propre blur avec la propriété blurFilter de la classe.
Je me suis penché sur scrollRect : ben j'étais passé à côté depuis tout ce temps, et je pense que je ne vais plus m'en passer. Remplacement d'ici une grosse semaine maxi.
25 janv. 2010 à 14:47
Sympa ta source.
Tu ne te serais pas planté dans ton _destruct ?
"this.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
target.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);"
à remplacer par des removeEventListener.
Sinon, concernant les commentaires :
- Les fleches de défilement : pas obligatoires, mais on devrait pouvoir spécifier des Sprite au cas oú elles sont présentes. (ce que j'ai fait dans ma classe perso)
- Scrollbar H et V : Je suis d'accord avec TwinSpirit. Une Scrollbar n'est pas un scrollpane.
- La possibilité de naviguer sans Tween : Personnellement, mettre la vitesse a 1 suffit, et je trouve que scroller en brut c'est vraiment pas agréable et très difficile de s'y retrouver à chaque sauts.
- L'effet de flou : Je ne le trouve pas du tout classe. J'ai vu des blur effect pour scrollbar 10x mieux.
- ScrollRect : Cool idea pour remplacer le mask :-)
A+
23 janv. 2010 à 16:57
Ca fait pas mal de pistes à explorer. Honnêtement, je ne sais pas si j'aurai le temps de me pencher sur toutes, mais certaines me semblent assez sympa à travailler.
En particulier :
- La possibilité de naviguer sans Tween. C'est possible actuellement en artificiel avec une vitesse réglée à 1. Cela fait un Tween de 0s, mais consommateur de ressources.
- Augmenter l'effet de flou selon la rapidité.
- Utiliser ScrollRect, je vais voir ca de plus prés.
Par contre :
- Le scroll du textfield impose un scroll par lignes de texte, cela ne me plait pas du tout. La fluidité est affreuse.
- Les flèches haut et bas des scrollbars, pour moi, elles sont souvent inutiles. Seulement pour du texte, mais alors, il suffit d'utiliser la scrollbar de flash...
- L'effet scrollpane, avec deux barres, qui pour moi est un composant à part entière, avec son utilisation précise, qui n'est pas celle de la scrollbar. Mais je pourrai essayer de faire fonctionner deux barres en même temps. Histoire de voir si c'est rigolo.
- Et je persiste à penser que c'est la scrollbar qui doit imposer un masque à l'objet scrollé, par sa taille ou par choix de l'utilisateur, même si j'abonde en ton sens sur la consommation de ressources de par les techniques que j'ai utilisé.
23 janv. 2010 à 12:06
Pour la scrollBar en général :
- il n'y a aucune flèche de défilement, ce n'est pas "grave" en soi, mais ça complèterais grandement ton ascenseur
- j'ai essayé d'ajouter une scrollBar Verticale ET horizontale ... et c'est un merdier sans nom.
- il n'y a apparemment pas moyen de naviger "en brut", sans passer via le tween et son décallage qui risque d'en agacer plus d'un
- l'effet de flou est intéressant, mais il est le même qu'on se déplace lentement ou rapidement, c'est dommage.
Pour le Textfield :
Pourquoi ne pas avoir simplement joué sur le principe de scroll d'un textfield multiligne ? C'est tellement plus simple que de masquer un texte de 15 km de long et beaucoup plus rapide en terme de ressource CPU.
Certes, ça aurait obligé à faire une double gestion de scroll, mais c'est tellement plus pratique et dynamique ...
Pour les objets graphiques :
Encore une fois, tu passes par un mask, ce qui est lourd et surtout plus trop adapté sur une émage énorms. Interesse-toi à la propriété ScrollRect du displayObjectContainer. Tu verras que ça te simplifie la vie bien plus que tu ne pourrais l'imaginer.
Conclusion :
Bien, très bien pour une première base. Mais il y a beaucoup de points à revoir, notamment ton principe de masquage qui soit être bien plus dynamique et ne pas dépendre du scrollBar, mais de l'objet auquel il est rattaché.
En as2 existait 2 objets différents : ScrollPane et ScrollBar. L'instanciation du scrollPane avec un target permettait d'appliquer directement les ascenseurs H et V (celon autorisation et paramétrage).
L'intérêt étant de ne pas avoir à se préoccuper de tout les paramétrages "inutiles" et autres détails de distance, taille, etc.
Sans parler du fait de pouvoir, à ce moment là, placer un double ascenseur permettant de scroller librement dans une grande zone.
Peg'