Creați o bară de derulare în Flash MX
În această lecție, vă voi arăta cum să creați o bară de defilare în Flash MX. Se pare ca cel care vine cu Flash MX, dar am decis sa creez propria mea versiune. Mă simt mai încrezător când lucrez cu codurile mele, nu cu ceilalți. Trupa creată de mine nu poate determina în mod automat înălțimea ei. Dar este mai flexibil și are o dimensiune mai mică a fișierului.
Caseta de text și bara de derulare
Creați un fișier nou.
În directorul rădăcină al scenei 1, adăugați două straturi. Denumiți stratul superior "funcții", următorul - "acțiuni". Puțin mai târziu vom termina codul.
În stratul inferior, creați un câmp de text dinamic. Setați fontul și culoarea dorită. Este de dorit să vedeți imediat 5-6 linii. În exemplul nostru, nu mai mult de 6 linii sunt afișate. Asigurați-vă că este selectat "multiline" în parametrii de text, iar "selectabil" nu este selectat. Dă un nume câmpului de text, de exemplu "w_field".
Faceți clic pe "Caracter." (Text) și selectați setările de caractere dorite.
În clipul principal, selectați câmpul de text și convertiți-l la un simbol (pentru această apăsare F8).
Selectați clipul, dați simbolul numele "main_mc", elementul (instanța) este numele "principal".
Acum du-te la "main_mc" și redenumiți layer-ul cu câmpul text pentru a "text".
Acum adăugați mai multe straturi, de jos în sus: "etichete", "acțiuni", "funcții", "derulați degetul mare", "butoane de derulare" ") și" calea de derulare ".
Când adăugăm grafică, îl vom plasa în straturile corespunzătoare. Dacă doriți să adăugați mai multe elemente grafice, adăugați straturile corespunzătoare.
Acum adăugați două cadre pentru fiecare strat al clipului. Denumiți primul cadru
"no_scroll", al doilea - "scroll_loop". Introduceți cadranul cheie în locul celui de-al doilea în straturile "defilați degetul mare", "butoanele de defilare" și "calea de derulare".
Acum vom face o bară de derulare. Mergeți la al doilea cadru al stratului "scroll scroll".
Desenați un dreptunghi cu lățimea corectă și asigurați-vă că înălțimea sa nu depășește dimensiunea câmpului de text dinamic. Setați alinierea spre dreapta. Conversia la un simbol de clip și atribuirea numelui "scroll_track".
Acum vom adăuga un cod. În stratul "acțiuni" din primul cadru, introduceți
În al doilea cadru ("scroll_loop"), introduceți
Vom reveni la acest cod mai târziu.
În ultimul cadru, introduceți
Acum du-te înapoi în directorul rădăcină și adăugați codul:
funcția showText (mesaj) main.w_field.text = message;
dacă (main.w_field.maxscroll> main.w_field.scroll) main.gotoAndPlay ("scroll_loop");
>
>
În stratul "acțiuni", adăugați:
my_text = "mai mult text, altfel bara de derulare nu va fi vizibilă";
showText (my_text);
stop ();
Asigurăm că bara de defilare apare numai când există mai multe linii în text decât pot fi afișate simultan.
Butoanele "sus" și "în jos"
Du-te la clipul principal.
Am folosit butonul săgeată din setul de componente gata făcute ca bază. Puteți crea propriile butoane. Singurul lucru pe care trebuie să aibă aceeași lățime ca bara de defilare. Plasați-le pe bara de derulare și aliniați-le în partea de sus și de jos. Elementele dau numele "up_arrow" (săgeată în sus) și "down_arrow" (săgeată în jos).
Acum vom adăuga o funcție care va rula textul în direcția corespunzătoare butonului apăsat:
funcția scrollIt () w_field.scroll + = apăsat;
>
funcția stopScroll () still_pressed = false;
presed = false;
>
funcția callBack () dacă (apăsată) still_pressed = true;
> altceva still_pressed = false;
>
clearInterval (checkIfPressed);
>
up_arrow.onPress = funcția () apăsată = -1;
dacă (w_field.scroll> 1) scrollIt ();
>
checkIfPressed = setInterval (callBack, 500);
>
down_arrow.onPress = funcția () apăsată = 1;
dacă (w_field.scroll
checkIfPressed = setInterval (callBack, 500);
>
up_arrow.onRelease = down_arrow.onRelease = up_arrow.onReleaseOutside = down_array.onReleaseOutside = stopScroll;
Asigurați-vă că textul se mișcă atunci când apăsați butonul. Pentru acuratețe, adăugați acest cod la cel de-al doilea cadru peste acțiunea de redare ():
dacă (încă apăsat) scrollIt ();
Continuăm la etapa următoare.
Desenați un dreptunghi sau pătrat și transformați-l într-un buton. Butonul trebuie să aibă aceeași lățime ca bara de defilare. Dați butonul numele "thumb_btn" și apăsați F8. Rezultatul este un clip cu un buton. Dați-i numele "scroll_thumb". Asigurați-vă că este numai în cadrele a doua și a treia, precum și săgețile și bara. Plasați-l direct sub butonul "sus" de pe bara de defilare - aceasta este poziția sa de pornire.
Pentru ca butonul să fie tras și, prin urmare, pentru a muta textul, vom adăuga următorul cod în cadrul "funcții":
scroll_thumb.initiate = funcția () this.initiated = true;
this.min_y = aceasta._y;
this.max_y = această.min_y + (scroll_track._height - up_arrow._height - this._height / 2) + 1;
this.total_travel = Math.abs (acest.max_y - acest.min_y);
this.inc = Math.floor (acest.total_travel / w_field.maxscroll);
>
scroll_thumb.drag = funcția () this.startDrag (false, this._x, this.min_y, this._x, this.max_y);
dacă (! this.org_y) this.org_y = this._y;
>
dragging = true;
this.onEnterFrame = în timpDragging;
>
scroll_thumb.thumb_btn.onPress = funcția () scroll_thumb.drag ();
>
scroll_thumb.thumb_btn.onRelease = funcția () trageți = false;
presed = false;
still_pressed = false;
scroll_thumb.stopDrag ();
scroll_thumb.onEnterFrame = null;
>
scroll_thumb.checkPos = funcția () dacă (this._y> this.max_y) this._y = this.max_y;
> altfel dacă (this.y
>
în timp ce dragging (drag) var moving = this._y - this.org_y;
dacă (Math.abs (mutat)> = this.inc) dacă (mutat> 0) a fost apăsat = 1;
> altceva presat = -1;
>
this.org_y = this._y;
scrollIt ();
dacă (Math.abs (this._y - this.max_y) <1) w_field.scroll = w_field.maxscroll;
> altfel dacă (Math.abs (this._y - this.min_y) <1) w_field.scroll = 1;
>
> altceva presat = 0;
>
>
>
Vom adăuga funcția de defilare scrollIt cu următorul cod, care trebuie plasat direct sub linia "w_field.scroll + = apăsat;":
dacă (! dragging) dacă (w_field.scroll <= 1) scroll_thumb._y = scroll_thumb.min_y;
> altfel dacă (w_field.scroll> = w_field.maxscroll) scroll_thumb._y = scroll_thumb.max_y;
> altfel scroll_thumb._y + = scroll_thumb.inc * apăsat;
scroll_thumb.checkPos ();
>
>
În cele din urmă, pentru a iniția butonul de defilare și a optimiza defilarea, adăugați acest cod în cel de-al doilea cadru de deasupra liniei "acțiune (play)":
dacă (! scroll_thumb.initiated) scroll_thumb.initiate ();
>
dacă (Math.abs (scroll_thumb._y - scroll_thumb.max_y) <1) w_field.scroll = w_field.maxscroll;
> altfel dacă (Math.abs (scroll_thumb._y - scroll_thumb.min_y) <1) w_field.scroll = 1;
>
Știu că deja te-ai săturat de codul infinit. Dar suferă puțin - sfârșitul este deja aproape. Rămâne doar să vă asigurați că derularea poate fi activată făcând clic pe bara.
Ajustarea barei de derulare
De fapt, bara de defilare este deja acolo - "scroll_track". Trebuie doar să adăugați următorul cod:
scroll_track.useHandCursor = false;
scroll_track.onPress = funcția () rec_y = _root._ymouse - this._parent._y;
dacă (rec_y> scroll_thumb._y) apăsat = 5;
> altceva presat = -5;
>
scrollIt ();
checkIfPressed = setInterval (callBack, 500);
>
scroll_track.onRelease = scroll_track.onReleaseOutside = stopScroll;
Rețineți că valoarea "5" din cod este mai mică decât numărul maxim de linii de text afișate simultan. Dacă există 20 de linii în câmpul de text, puneți valorile 19 și -19 în cod.
Mai jos i dau din nou codurile utilizate.
Nivel superior
Cadrul 1, "funcții".
// Afișează textul în câmp. Se determină dacă aveți nevoie de defilare sau nu.
funcția showText (mesaj) main.w_field.text = message;
dacă (main.w_field.maxscroll> main.w_field.scroll) main.gotoAndPlay ("scroll_loop");
>
>
Cadrul 1, "acțiuni".
// Această variabilă poate fi schimbată așa cum aveți nevoie.
my_text = "puneți aici textul de care aveți nevoie, trebuie să existe o mulțime de text - altfel bara de defilare nu va fi folosită";
showText (my_text);
stop ();
Clip principal ("principal")
Cadrul 1, funcții.
// scroll text în sus sau în jos.
funcția scrollIt () w_field.scroll + = apăsat;
// verificați dacă butonul rămâne întotdeauna pe bandă
dacă (! dragging) dacă (w_field.scroll <= 1) scroll_thumb._y = scroll_thumb.min_y;
> altfel dacă (w_field.scroll> = w_field.maxscroll) scroll_thumb._y = scroll_thumb.max_y;
> altfel scroll_thumb._y + = scroll_thumb.inc * apăsat;
scroll_thumb.checkPos ();
>
>
>
// este apelat când se face clic pe oprire
funcția stopScroll () still_pressed = false;
presed = false;
>
// verificați dacă butonul este apăsat în jumătate de secundă
funcția callBack () dacă (apăsată) still_pressed = true;
> altceva still_pressed = false;
>
clearInterval (checkIfPressed);
>
// săgețile funcționale în sus și în jos
up_arrow.onPress = funcția () apăsată = -1;
dacă (w_field.scroll> 1) scrollIt ();
>
checkIfPressed = setInterval (callBack, 500);
>
down_arrow.onPress = funcția () apăsată = 1;
dacă (w_field.scroll
checkIfPressed = setInterval (callBack, 500);
>
up_arrow.onRelease = down_arrow.onRelease = up_arrow.onReleaseOutside = down_array.onReleaseOutside = stopScroll;
// inițializați butonul de defilare cu variabile
scroll_thumb.initiate = funcția () this.initiated = true;
this.min_y = aceasta._y;
this.max_y = această.min_y + (scroll_track._height - up_arrow._height - this._height) + 1;
this.total_travel = Math.abs (acest.max_y - acest.min_y);
this.inc = Math.floor (acest.total_travel / w_field.maxscroll);
>
// funcția drag-and-drop a butonului de defilare
scroll_thumb.drag = function () this.startDrag (false, this._x, this.min_y, this._x, this.max_y);
dacă (! this.org_y) this.org_y = this._y;
>
dragging = true;
this.onEnterFrame = în timpDragging;
>
// funcția de defilare cu butonul:
scroll_thumb.thumb_btn.onPress = funcția () scroll_thumb.drag ();
>
scroll_thumb.thumb_btn.onRelease = funcția () trageți = false;
presed = false;
still_pressed = false;
scroll_thumb.stopDrag ();
scroll_thumb.onEnterFrame = null;
>
// verificați dacă butonul nu depășește limitele admise
scroll_thumb.checkPos = funcția () dacă (this._y> this.max_y) this._y = this.max_y;
> altfel dacă (this.y
>
// funcția enterFrame pentru butonul de defilare
în timp ce dragging (drag) var moving = this._y - this.org_y;
dacă (Math.abs (mutat)> = this.inc) dacă (mutat> 0) a fost apăsat = 1;
> altceva presat = -1;
>
this.org_y = this._y;
scrollIt ();
// verificați poziția textului și a butonului
dacă (Math.abs (this._y - this.max_y) <1) w_field.scroll = w_field.maxscroll;
> altfel dacă (Math.abs (this._y - this.min_y) <1) w_field.scroll = 1;
>
> altceva presat = 0;
>
>
>
// Opțiuni și funcții ale barei de derulare
scroll_track.useHandCursor = false;
scroll_track.onPress = funcția () rec_y = _root._ymouse - this._parent._y;
dacă (rec_y> scroll_thumb._y) apăsat = 5;
> altceva presat = -5;
>
scrollIt ();
checkIfPressed = setInterval (callBack, 500);
>
scroll_track.onRelease = scroll_track.onReleaseOutside = stopScroll;
Cadrul 1, "acțiuni":
Cadrul 2, "acțiuni":
dacă (! scroll_thumb.initiated) scroll_thumb.initiate ();
>
// continuă să deruleze textul dacă este apăsat butonul
dacă (încă apăsat) scrollIt ();
>
// optimizează butonul de defilare
dacă (Math.abs (scroll_thumb._y - scroll_thumb.max_y) <1) w_field.scroll = w_field.maxscroll;
> altfel dacă (Math.abs (scroll_thumb._y - scroll_thumb.min_y) <1) w_field.scroll = 1;
>
juca ();
Cadrul 3, "acțiuni":
Articole similare
Trimiteți-le prietenilor: