[AS2] Scroller un MovieClip avec 'UIScrollBar'

By admin on 12 septembre 2009 |

J'ai récemment eu besoin de scroller un clip sans devoir utiliser le composant 'Scrollpane'.
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);

Dans cette fonction c'est la méthode setScrollProperties du composant qui est intéressante  
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;
    }
  }
}

Dans cette fonction nous utilisons la propriété scrollPosition du composant pour scroller le clip.
Le onEnterFrame est utilisé pour les transitions sur les scrolls avec un effet de ralenti.

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);
  }
}
Étiquettes: