Utilisation du composant ScrollPane

Le composant ScrollPane permet d’afficher un contenu dont la taille excède celle de la zone dans laquelle il est chargé. Par exemple, si vous devez afficher une image de grande taille mais que vous avez peu de place dans une application, vous pouvez la charger dans un composant ScollPane. Le composant ScrollPane accepte les clips et les fichiers JPEG, PNG, GIF et SWF.

Des composants tels que ScrollPane et UILoader comportent des événements complete qui permettent de déterminer quand le chargement du contenu est terminé. Si vous voulez définir des propriétés sur le contenu d’un composant ScrollPane ou UILoader, écoutez l’événement complete et configurez la propriété dans le gestionnaire d’événement. Par exemple, le code suivant crée un écouteur pour l’événement Event. COMPLETE et un gestionnaire d’événement qui fixe la propriété alpha du contenu du composant ScrollPane à 0,5 : 

function spComplete(event:Event):void{ 
aSp.content.alpha = .5; 
} 
aSp.addEventListener(Event.COMPLETE, spComplete);

Si vous spécifiez un emplacement lors du chargement du contenu dans le composant ScrollPane, vous devez spécifier les valeurs 0, 0 (coordonnées X et Y). Par exemple, le code suivant charge le composant ScrollPane correctement car le cadre est tracé à l’emplacement 0,0 : 

var box:MovieClip = new MovieClip(); 
box.graphics.beginFill(0xFF0000, 1); 
box.graphics.drawRect(0, 0, 150, 300); 
box.graphics.endFill(); 
aSp.source = box;    //load ScrollPane

Pour plus d’informations, voir la classe ScrollPane dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Interaction de l’utilisateur avec le composant ScrollPane

Un composant ScrollPane peut être activé ou désactivé. En état désactivé, le composant ne réagit pas aux commandes de la souris ou du clavier. L’utilisateur peut utiliser les touches suivantes pour contrôler un composant ScrollPane lorsqu’il détient le focus.

Touche

Description

Flèche vers le bas

Le contenu se déplace d’une ligne de défilement verticale vers le haut.

Flèche vers le haut

Le contenu se déplace d’une ligne de défilement verticale vers le bas.

Fin

Le contenu se déplace en bas du composant ScrollPane.

Flèche gauche

Le contenu se déplace d’une ligne de défilement horizontale vers la droite.

Flèche droite

Le contenu se déplace d’une ligne de défilement horizontale vers la gauche.

Orig

Le contenu se déplace en haut du composant ScrollPane.

Fin

Le contenu se déplace en bas du composant ScrollPane.

PgSuiv

Le contenu se déplace d’une page de défilement verticale vers le haut.

PgPréc

Le contenu se déplace d’une page de défilement verticale vers le bas.

Un utilisateur peut utiliser la souris pour interagir avec le composant ScrollPane sur son contenu et sur les barres de défilement horizontale et verticale. L’utilisateur peut faire glisser du contenu à l’aide de la souris lorsque la propriété scrollDrag est définie sur true . L’apparition du curseur en forme de main sur le contenu indique que l’utilisateur peut faire glisser le contenu. Contrairement à la plupart des autres contrôles, des actions se produisent lorsque le bouton de la souris est enfoncé et se poursuivent jusqu’à ce qu’il soit relâché. Si le contenu présente des arrêts de tabulation valides, vous devez définir la propriété scrollDrag sur false. Dans le cas contraire, tous les clics de souris sur le contenu feront défiler le contenu.

Paramètres du composant ScrollPane

Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres suivants pour chaque occurrence du composant ScrollPane : horizontalLineScrollSize , horizontalPageScrollSize , horizontalScrollPolicy, scrollDrag, source, verticalLineScrollSize, verticalPageScrollSize et verticalScrollPolicy . A chacun de ces paramètres correspond une propriété ActionScript du même nom. Pour plus d’informations sur les valeurs gérées de ces paramètres, voir la classe ScrollPane dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Vous pouvez rédiger du code ActionScript pour contrôler ces options et d’autres options d’un composant ScrollPane en utilisant ses propriétés, méthodes et événements.

Création d’une application avec le composant ScrollPane

La procédure suivante explique comment ajouter un composant ScrollPane à une application pendant la programmation. Dans cet exemple, le composant ScrollPane charge une image depuis un chemin spécifié dans la propriété source .

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant ScrollPane du panneau Composants vers la scène et nommez l’occurrence aSp .

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.events.ScrollEvent; 
 
aSp.setSize(300, 200); 
 
function scrollListener(event:ScrollEvent):void { 
    trace("horizontalScPosition: " + aSp.horizontalScrollPosition +  
     ", verticalScrollPosition = " + aSp.verticalScrollPosition); 
}; 
aSp.addEventListener(ScrollEvent.SCROLL, scrollListener); 
 
function completeListener(event:Event):void { 
    trace(event.target.source + " has completed loading."); 
}; 
// Add listener. 
aSp.addEventListener(Event.COMPLETE, completeListener); 
 
aSp.source = "http://www.helpexamples.com/flash/images/image1.jpg";

  4. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.

Création d’une occurrence du composant ScrollPane à l’aide d’ActionScript

L’exemple crée un composant ScrollPane, définit sa taille et y charge une image à l’aide de la propriété source . Il crée également deux écouteurs. Le premier écoute un événement scroll et affiche la position de l’image lorsque l’utilisateur utilise le défilement vertical ou horizontal. Le second écoute un événement complete et affiche un message dans le panneau Sortie qui indique que le chargement de l’image est terminé.

Cet exemple crée un composant ScrollPane à l’aide d’ActionScript et y place un clip (une case rouge) de 150 de large sur 300 pixels de haut.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant ScrollPane du panneau Composants vers le panneau Bibliothèque.

  3. Faites glisser le composant DataGrid du panneau Composants vers le panneau Bibliothèque.

  4. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.containers.ScrollPane; 
import fl.controls.ScrollPolicy; 
import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aSp:ScrollPane = new ScrollPane(); 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xFF0000);    //draw a red box 
 
aSp.source = aBox; 
aSp.setSize(150, 200); 
aSp.move(100, 100); 
 
addChild(aSp); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1); 
            box.graphics.drawRect(0, 0, 150, 300); 
            box.graphics.endFill();         
}

  5. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.