[AS2] Scroller un MovieClip avec 'UIScrollBar'
Je pensais utiliser tout simplement le composant 'UIScrollBar'.
J'ai donc cherché des informations sur cette possibilité et j'ai constaté qu'il n'y avait aucun tuto expliquant comment faire.
Si l'on se réfère à la documentation du composant. Il n'est normalement utilisable qu'avec un champ texte.
Il est possible toutefois d'utiliser ce composant pour scroller un 'MovieClip'.
Voici comment :
Dans l'ide de Flash, sur la timeline créons 4 calques : actions, scrollbar, masque et page.
Sur le calque scrollbar ajoutons le composant 'UIScrollbar'.
Sur le calque masque créons un clip d'une hauteur de 400px puis nommons le 'masque_mc'.
Ce calque servira de masque pour notre 'page_mc'.
Puis sur le calque page ajoutons un clip que nous nommerons 'page_mc'. Ce clip contiendra par exemple, une photo et un texte de présentation, la hauteur de ce clip sera supérieure à 400px qui est notre zone d'affichage.
Dans le calque action nous allons ajouter notre code. Dans cet exemple nous utiliserons pas de fichier ou de classe externe.
D'abords déclarons une variable pour la hauteur de la page et utilisons cette valeur pour initialiser le masque et la scrollbar.
var _pageHeight:Number = 400; masque_mc._height = _pageHeight; scrollbar_mc.setSize(16,_pageHeight);
Puis créons une fonction initScrollBar qui sera exécutée après le chargement complet du contenu de page_mc, ou directement si le contenu est statique en utilisant l'appel
initScrollBar(page_mc._height);
Voici la signature :
function setScrollProperties(pSize:Number, mnPos:Number, mxPos:Number, ls:Number):Void
pSize : la hauteur de la zone d'affichage, nous lui passerons la hauteur du masque
mnPos : la position minimale donc 0
mxPos : la position max qui sera pour nous la hauteur du clip - la hauteur du masque
La modification de lineScrollSize est falcutative, c'est le nombre de pixels pour le scroll d'une ligne (clic sur flèches).
Puis nous écoutons l'événement "scroll" du composant pour la fonction scrollClip qui se chargera de scroller le clip.
Voici les 2 fonctions initScrollBar et scrollClip
function initScrollBar(H:Number):Void
{
if(H > masque_mc._height)
{
var nbPas = Math.ceil(H / masque_mc._height);
scrollbar_mc.setScrollProperties(masque_mc._height,0,H-masque_mc._height);
scrollbar_mc.lineScrollSize = (H-masque_mc._height) / nbPas;
var listenerObject:Object = new Object();
listenerObject.scroll = function(eventObject:Object)
{
scrollClip();
};
scrollbar_mc.addEventListener('scroll', listenerObject);
}
else
{
scrollbar_mc._visible = false;
}
}
function scrollClip()
{
delete page_mc.onEnterFrame;
var newPos = -scrollbar_mc.scrollPosition;
page_mc.onEnterFrame = function()
{
this._y -= (this._y - newPos)*.1;
if (Math.abs(this._y - newPos) < 1)
{
delete this.onEnterFrame;
}
}
}
Voilà on peux aussi ajouter l'utilisation de la roulette de la souris pour scroller le clip en utilisant la méthode scrollIt du composant ( normalement private )
Mouse.addListener(this);
function onMouseWheel(delta)
{
if(delta > 0)
{
scrollbar_mc.scrollIt("Line",-1);
}
else
{
scrollbar_mc.scrollIt("Line",1);
}
}