Créer une Scrollbar en ActionScript 3.0
Un tutoriel dont vous êtes le héros.
Ce matin, le secteur B de la base est sur le point de passer à l’ActionScript 3.0. Votre équipe s’est démenée six mois durant pour effectuer ce changement. Mais un problème subsiste encore, à 20 minutes de la réouverture du secteur. En effet, il semblerait que les écrans de contrôle du bâtiment principal ne puissent toujours pas afficher toutes les données.
Votre première décision : créer une classe vide du nom de « KillerScrollbar » et étendant la classe « Sprite ». Cette classe contiendra tous les éléments utiles à une barre de scroll, ce qui la rendra importable dans n’importe quelle animation Flash, et donc sur tous les écrans de contrôle.
package {
import flash.display.Sprite;
public class KillerScrollbar extends Sprite
{
public function KillerScrollbar()
{
};
}
}
Vous décidez de définir immédiatement la manière dont vous allez générer des barres de scroll à partir de cette classe. Vous imaginez 4 paramètres : d’abord sa position sur les axes X et Y, puis son clip cible scrollable, et enfin une hauteur maximum correspondant à la hauteur de la barre de scroll. Dans le but de prévenir les erreurs liées à l’utilisation de certains évènements, vous décidez également que la barre de scroll sera générée par une fonction appelée « init() » après son ajout sur la scène à l’aide de « addChild() ».
import KillerScrollbar;
var myScrollbar :KillerScrollbar new KillerScrollbar();x = 670;==
==y = 10;==
==target = myTargetClip;==
==maxHeight = 500;==
addChild(myScrollbar);
Un ajustement de la classe s’impose : Deux nouvelles variables « target » et « maxHeight » et une fonction « init() » ont fait leur apparition, il faut les déclarer.
package
{
import flash.display.Sprite;
public class KillerScrollbar extends Sprite
{
public var target:Sprite;
public var maxHeight:int;
public function KillerScrollbar()
{
};
public function init():void
{
};
}
}
La fonction « init() » doit créer les éléments graphiques de la barre de scroll : Deux rectangles dont l’un sera nommé « BACKGROUND » et qui constituera l’élément statique de la barre de scroll, l’autre sera nommé « HANDLER » et servira de bouton pour scroller le clip cible.
private var BACKGROUND:Sprite();
private var HANDLER:Sprite();
public function init():void
{
BACKGROUND = new Sprite();
BACKGROUND.graphics.beginFill( 0x999999, 1 );
BACKGROUND.graphics.drawRect( 0, 0, 20, 20 );
BACKGROUND.graphics.endFill();
addChild( BACKGROUND );
HANDLER = new Sprite();
HANDLER.graphics.beginFill( 0x444444, 1 );
HANDLER.graphics.drawRect( 0, 0, 20, 20 );
HANDLER.graphics.endFill();
addChild( HANDLER );
};
Vous êtes alors en présence de deux rectangles de même largeur et de même hauteur ; Et cela n’a rien d’une barre de scroll !
D’abord et dans le but de définir les dimensions de ces éléments, vous élaborez le tableau de correspondance suivant :
A l’échelle du clip cible | A l’échelle de la « Scrollbar » | |
BACKGROUND.height | target.height | maxHeight |
HANDLER.height | maxHeight | --- |
import KillerScrollbar;
var myScrollbar :KillerScrollbar new KillerScrollbar();x = 670;==
==y = 10;==
==target = myTargetClip;==
==maxHeight = 500;==
addChild(myScrollbar);