Ajout d'un système d'assenceur avec utilisation d'une classe
Il ne reste plus qu'à ajouter un système d'assenceurs pour faire défiler les images contenues dans les librairies. Afin d'explorer une nouvelle manière d'ajouter de l'interactivité à des boutons, nous allons utiliser une classe externe qui étendra la classe MovieClip interne. Là encore deux possibilités soit en utilisant de l'ActionScript 1.0 et en créant un prototype et un RegisterClass, soit en ActionScript 2.0 et en ajoutant directement une classe lors de la liaison pour l'exportation du symbole.
Pour ceux d'entre vous qui souhaiterait utiliser la première approche, il y existe un déroulé spécifique à la programmation orientée objet avec ActionScript 1.0 accesible à ce niveau, Pour ceux d'entre vous qui ne sont pas familier avec ActionScript 2.0, il est conseillé de suivre le déroulé sur les bases de la programmation sous Flash .
Les fonctionalités de l'assenceurs resteront très basiques, détection lors du survol avec permutation de l'état visuel du bouton, puis interaction avec le bando image en le déplçant soit vers le haut soit vers le bas en fonction du bouton cliqué. Les limites seront la première vignette pour le bouton du haut et la dernière vignette plus une pour celui du bas.
Aperçu de la classe btFleche utilsée
La classe utilisée est réduite à son minimum de fonctionnalité. Nous nous arreterons aux bases de l'utilisation d'une classe ActionScript 2.0 dans un cas concret pour ce tutorial. Libre à vous de lui apporter toute modification souhaitée et d'en améliorer son interaction ou son adaptabilité avec le reste de l'animation. Pour l'instant nous avons deux propriétés param qui est utilisée pour définir le sens d'action du bouton (arbitrairement haut, bas ou "") et esp qui fixe un espace entre les bordures du cadre et le positionnement du bouton.
Une fonction constructeur qui initialise le bouton et le positionne en fonction du paramètre param transmis. Ce positionnement tient compte du clip MasqueImagesMenu, le masque utilisée pour n'afficher qu'une partie de la librairie d'images (vu lors de la première partie). Ce positionnement dynamique nous permet de redimensionner à souhait l'affichage de notre librairie. Vous pouvez également utiliser la référence du clip référence comme paramètre transmis lors de l'instantiation, afin d'utiliser les flèches avec une autre fenêtre. Pour passer des paramètres lors de l'instantiation, il suffit de les déclarer et de les initialiser dans l'objet d'initialisation, dernier paramètres facultatifs de l'instruction attachMovie(), comme dans cet exemple this.attachMovie("symbole lié " , "nv_nom" , niveau , {parametre_transmis:"valeur_dinitialisation"})
Quatre gestionnaire d'évènement sont utilisés dans cette classe, deux pour marquer l'interaction de survol en jouant sur l'opacité du bouton, et trois qui initialise une variable deplacement placée sur la scène (flag) à la valeur du paramètre param propre à chaque bouton. Il est toujours bon de doubler le gestionnaire onRelease() par un onReleaseOutside().
class btFleche extends MovieClip {
public var param:String;
private var esp:Number = 2;
function btFleche() {
switch (param) {
case "haut" :
_x = _root.MasqueImagesMenu._x+_root.MasqueImagesMenu._width+esp;
_y = _root.MasqueImagesMenu._y;
break;
case "bas" :
_x = _root.MasqueImagesMenu._x+_root.MasqueImagesMenu._width+esp+_width;
_y = _root.MasqueImagesMenu._y+_root.MasqueImagesMenu._height;
_rotation = 180;
}
}
function onRollOver() {
_alpha = 40;
}
function onRollOut() {
_alpha = 100;
}
function onPress() {
_root.deplacement = param;
}
function onRelease() {
_root.deplacement = "";
}
function onReleaseOutside() {
_root.deplacement = "";
}
}
La déclaration de la classe se fait directement dans la fenêtre de liaison pour l'exportation du symbole (voir le schéma ci dessus), et l'instantiation des deux deux boutons tout simplement par le jeux d'instruction d'un attachMovie()en prennant soin de passer à chaque fois le bon paramètre.
this.attachMovie("bt_fleche","bth",300,{param:"haut"});
this.attachMovie("bt_fleche","btb",310,{param:"bas"});
La fonction fixeLimite()
Définition de la course du clip cadreImage
Nous avons vu au cours de la partie précédente qu'une fonction fixeLimite() étatit interpellé. Cette fonction a pour but de récuperer la valeur de déplacement utile de la librairie afin d'en fixer la course de l'assenceur. L'animation ci contre devrait permettre de mieux l'interpréter.
La course est égale à la hauteur du clip cadreImage moins la hauteur du masqueImageMenu. Il faut ensuite récupérer une valeur négative, afin de permettre au clip de se déplacer vers le haut, (l'axe des y est inverse en informatique par rapport à l'usuel axe des y géométrique).
Il y a une autre valeur, limH, qui est ajusté par un script de timeLine, sur le calque init/valeur. Elle est intialisé sur la valeur de la propriété _y de départ du clip cadreImage. Elle n'est pas instantié dans la fonction fixeLimite() car au moment de l'appel il se peut que l'utilisateur se soit servis des assenceurs et de ce fait la valeur _y de cadreImage ne serait pas référentielle.
function fixeLimite() {
limB = -(cadreImage._height-MasqueImagesMenu._height);
}
Ajout de la fonction interceptant le déplacement de la gallerie
Bien que cela ne soit pas la manière la plus élégante pour ajouter cette fonctionnalité, un gestionnaire d'évènement onEnterFrame() est ajouté au clip cadreImage. Ce gestionnaire va écouter la variable deplacement et en fonction de son état haut ou bas et des limites limH et limB déplacera la position _y du clip. Un simple jeux de conditions imbriquées permet d'obtenir le résultat souhaité.
cadreImage.onEnterFrame = function() {
if (_root.deplacement == "haut") {
if (this._y<_root.limH) {
this._y += _root.valDep;
} else {
this._y = _root.limH;
_root.deplacement = "";
}
} else if (_root.deplacement == "bas") {
if (this._y>_root.limB) {
this._y -= _root.valDep;
} else {
this._y = _root.limB;
_root.deplacement = "";
}
}
};
