scroll bar

Question

Bonjour 
je voulais savoir comment on devait faire pour faire une scroll bar qui fonctionne non pas sur du texte mais sur des images ou des clips
comme sur le site de nokia http://www.nokia.fr/A4363001
ou ils le font avec plein de telephone 
merci

pegase31 · Answer

le composant Scrollpane est là pour ça ...

Peg'

Skev · Answer

Bonsoir,
Tu peux facilement la creer en quelque minute.
exemple pour une barre a scroll verticale :
ATTENTION : pour eviter les mauvaise surprise je te precise que tout les clip créer on pour indexation "haut, gauche".
- cree une barre de la taille de ton choix , transforme la en movie clip et nomme son instance "SCBG" par exemple ("ScrollBar Background
- cree une nouvelle barre moin haute que la precedente mais de largeur egale, trnasforme la egalement en clip et nomme la "SC";
- cree cette fois ci un carré (ou rectangle) que tu nommera "Mask"
- (optionel) creer un clip suplementaire , place deux instance de clip sur la scene et nomme les respectivement 'Btn_U" (pour le bouton du haut) et "Btn_D" (pour le bouton du bas)
- enfin pose ton egalement ton clip a scroller sur la scene (je l'appelerais "List" mais bien sur le nom n'as pas d'importance)

Passons au codage
//
stop();//arret a cette image
scroll_speed = 5; //vitesse de scroll par bouton
scrollUp = false;//on indique que le deplacement par bouton du haut n'est pas effectif
scrollDown = false;//meme chose mais pour le bouton du bas
List.setMask(Mask)//on attribut a notre clip le  masque "Mask"
//
onEnterFrame = function () {//Lors de l'entree a l'image
    DiffSC = SC._y/SCBG._height;//on recupere le rapport "position de la barre/longueur total"
    List._y = -(DiffSC*Mask._height);//on fait bouger la position du clip en fonction de ce rapport
    SC._height = (SCBG._height*Mask._height)/List._height;//on definit la taille de la barre
    //
    if (scrollUp) {//si le deplacement par bouton du haut est effectif
        if (SC._y>T) {//et si la barre n'as pas atteint le seuil de dessus
            SC._y -= scroll_speed;//alors on deplace la scroll bar vers le haut
        }
    } else if (scrollDown) {//sinon si le deplacement par bouton du bas est effectif
        if (SC._y<B) {//et si la barre n'as pas atteint son seuil de dessous
            SC._y += scroll_speed;//alors on deplace la scroll bar vers le bas
        }
    }
};
SC.onPress = function() {//Lors de l'appuie sur la scrollbar
    L = this._x;//Le seuil de deplacement gauche est egal a la propre position x de la bar (en gros elle ne peut se deplacer a gauche)
    T = SCBG._y;//le seuil de deplacement de dessus est egal a la position y de la barre total (la grande)
    R = this._x;//pareille que pour gauche mais pour droite
    B = (SCBG._y+SCBG._height)-this._height;//le seuil de deplacement de dessous est egal a la position y de la barre total + la hauteur de cette meme barre, le tout - la hauteur de la scroll bar
    this.startDrag(false, L, T, R, B);//on active le drag en definnissant "false" pour le parametre "lockcenter" (pour eviter que la barre ce centre a la souris) et en fixant les limitte gauche, haut, droite, bas precedemment definit)
};
SC.onRelease = SC.onReleaseOutside=function () {//lors du relachement de la scroll bar a l'interieur ou exterieur de celle -ci
    this.stopDrag();//on desactive le drag
};
Btn_U.onPress = function() {//lors de l'appuie sur le bouton sroll du haut
    scrollUp = true;// on active le scroll haut
};
Btn_D.onPress = function() {//lors de l'appuie sur celui du bas
    scrollDown = true;//on active le scroll bas
};
Btn_U.onRelease = Btn_U.onReleaseOutside=function () {//lors du relachement du bouton de scroll haut a l'interieur ou exterieur de celui ci
    scrollUp = false;// on desactive le scroll Haut
};
Btn_D.onRelease = Btn_D.onReleaseOutside=function () {//lors du relachement de celui du bas
    scrollDown = false;//on desactive celui du bas
};

Voila c'est tout

cs_sachaaa · Answer

voila ce que j'ai fait mais ca marche pas du tout 
http://www.neuillygolf.com/scrollpane.fla

Skev · Answer

Alors en fait tu as fait plusieurs erreur :

- Tu as placer le code sur l'image clé de ton clip "List", il faut le placer  sur l'image clé de la scene ,
- Tout tes clip on pour nom d'instance "haut, gauche", or il faut les appeler "SC","SCBG" etc... en fait tu as mis ce nom en nom d'indexation alors que c'etait les instance dont je parlais
- Tes deux boutons sont regrouper dans un meme clip, il faut qu'il soit independant ou alors change le chemin dans le code

C'est tout ce que je vois, au cas ou tu ne t'en sortirai je t'ai mis un exemple ici

rq : dans l'exemple il y a une fonction qui permet de scroller uniquement avec le mouvement de la souris lors u maintient du clic du milieu

cs_sachaaa · Answer

je suis dsl j'arrive pas a ouvrir ton document 
je te renvoie le mien j'ai fait les modif mais ca marche tjs pas 
http://www.neuillygolf.com/scrollpane.fla

merci de m'aider tu es cool

Skev · Answer

Hmm a premiere vu, on dirait que ton clip ne s'adapte pas au code comme le miens, je me penche sur le probleme et te tient au courant

Skev · Answer

C'est bon j'ai trouver un compromis pour que ça colle chez toi,au lieu de metre List._y , mais List._y List._y = Mask._y-(DiffSC*Mask._height); Math.round((Math.abs(SCBG._y-SC._y))*-1*((List._height-Mask._height)/(SCBG._height-SC._height))+Mask._y);

C'est un peu plus long mais ça fonctionne

Skev · Answer

Fautes de frappe dsl, met : List._y = Math.round((Math.abs(SCBG._y-SC._y))*-1*((List._height-Mask._height)/(SCBG._height-SC._height))+Mask._y);

cs_sachaaa · Answer

c'est un peu galere mais je te remercie ca marche tres bein

cs_sachaaa · Answer

excuse moi encore mais j'ai encore un petit pb regard sur ce site 
http://www.neuillygolf.com/scrollpane.fla
merci

Skev · Answer

En fait tu as remis l'ancien code pour "List._y";

Donc pense bien a le remplacer par : List._y =
Math.round((Math.abs(SCBG._y-SC._y))*-1*((List._height-Mask._height)/(SCBG._height-SC._height))+Mask._y);


Et je te donne un petit plus -> 


if (List._height>Mask._height) {//si la liste est moins haute que la zone

        SC._height = (SCBG._height*Mask._height)/List._height;//on definit la taille de la barre

        SC._visible = true;//on indique que la barre est visible

    } else {

        SC._visible = false;//sinon on la cache

}

cs_sachaaa · Answer

et le if je le mets ou ??
merci encore

Skev · Answer

Dans la fonction "onEnterFrame" ;)

cs_sachaaa · Answer

merci tu es le meilleur

Scroll bar

14 réponses

Votre réponse

Discussions similaires