Własny suwak we Flashu

Wstawiamy tu kod, który za chwilę omówimy:

this.dlugoscPrzesuniecia = Math.abs(this.dlugosc == undefined ? 100 : !isNaN(this.dlugosc) ? this.dlugosc : 100);this.skalaObliczen = Math.abs(this.skala == undefined ? 100 : !isNaN(this.skala) ? this.skala : 100);this.wartoscPoczatkowa = Math.abs(this.wartosc == undefined ? 0 : !isNaN(this.wartosc) ? this.wartosc : 0);this.wartoscPoczatkowa > this.skalaObliczen ? this.wartoscPoczatkowa = this.skalaObliczen : null;prowadnica_mc._width = this.dlugoscPrzesuniecia;uchwyt_mc._x = (this.wartoscPoczatkowa / this.skalaObliczen) * prowadnica_mc._width;this.wynik = this.wartoscPoczatkowa;uchwyt_mc.onPress = function() {this.startDrag(true, 0, 0, prowadnica_mc._width, 0);this.onMouseMove = function() {this._parent.wynik = Math.ceil(this._x / prowadnica_mc._width * this._parent.skalaObliczen);updateAfterEvent();};};uchwyt_mc.onMouseUp = function() {this.stopDrag();delete this.onMouseMove;};

Suwak może przyjąć z zewnątrz trzy zmienne z określonymi parametrami decydujące o jego ustawieniach.

dlugosc – decyduje o długości obszaru suwanego

skala – decyduje o zakresie obliczeń suwaka od 0 do podanej wartości

wartosc – decyduje o początkowej wartości suwaka

1 – 3 LINIA KODU – jeżeli zmienne lub któraś z nich nie zostaną zadeklarowane to 3 pierwsze linijki kodu ustawią odpowiednio; długość obszaru przesuwania na 100px, skalę suwaka na 0-100 a wartość początkową na 0; Podobnie się stanie, gdy wartości podane w zmiennych nie będą wartościami liczbowymi.

Wszystkie podane liczby ujemne zostaną zmienione na dodatnie.

this.dlugoscPrzesuniecia = Math.abs(this.dlugosc == undefined ? 100 : !isNaN(this.dlugosc) ? this.dlugosc : 100);this.skalaObliczen = Math.abs(this.skala == undefined ? 100 : !isNaN(this.skala) ? this.skala : 100);this.wartoscPoczatkowa = Math.abs(this.wartosc == undefined ? 0 : !isNaN(this.wartosc) ? this.wartosc : 0); 

4 LINIA KODU – sprawdza czy podana wartość początkowa mieści się w zakresie skali suwaka, jeżeli jest większa to zostaje ona ustawiona na największą z możliwych wartości w skali.

this.wartoscPoczatkowa > this.skalaObliczen ? this.wartoscPoczatkowa = this.skalaObliczen : null;

5 LINIA KODU – ustawia długość MC prowadnica_mc, a co za tym idzie określa długość obszaru suwanego.

prowadnica_mc._width = this.dlugoscPrzesuniecia;

6 LINIA KODU – ustawia MC uchwyt_mc na współrzędnych zgodnych z wartoścą początkową suwaka.

uchwyt_mc._x = (this.wartoscPoczatkowa / this.skalaObliczen) * prowadnica_mc._width;

7 LINIA KODU – ustawia początkowy wynik zwracany przez suwak na wartość początkową.

this.wynik = this.wartoscPoczatkowa;

8 – 14 LINIA KODU – dodaje do uchwyt_mc uchwyt zdarzenia onPress decydujący o tym co się stanie po kliknięciu na ten MC.

Po kliknięciu uruchamia funkcję startDrag pozwalającą na przesuwanie klipu myszką, parametry tej funkcji pozwalają na przeciąganie go tylko w zakresie długości klipu prowadnica_mc.

Włącza uchwyt zdarzenia onMouseMove, który przy każdym ruchu myszy, a więc przy przesuwaniu suwaka oblicza wartość z zakresu od 0 do wartości podanej, lub domyślnej skali.

uchwyt_mc.onPress = function() {this.startDrag(true, 0, 0, prowadnica_mc._width, 0);this.onMouseMove = function() {this._parent.wynik = Math.ceil(this._x / prowadnica_mc._width * this._parent.skalaObliczen);updateAfterEvent();};}; 

15 – 18 LINIA KODU – uchwyt zdarzenia onMouseUp wykrywa zwolnienie przycisku myszy i wyłącza metodę startDrag oraz usuwa uchwyt onMouseMove.

uchwyt_mc.onMouseUp = function() {this.stopDrag();delete this.onMouseMove;}; 

Teraz możemy przetestować nasz suwak. Powinien on znajdować się już na scenie głównej. Zaznaczamy go i nadajemy mu nazwę w polu Instance Name np. suwak1.

Tworzymy nad nim nową warstwę o nazwie test. Na tej warstwie wstawiamy dynamiczne pole tekstowe o Instance Name odczyt_txt. Wstawiamy najwyższą trzecią warstwę o nazwie as, otwieramy panel Actions – Frame i wpisujemy do niego kod:

suwak1.dlugosc = 200;suwak1.skala = 300;suwak1.wartosc = 50;this.onEnterFrame = function() {odczyt_txt.text = suwak1.wynik;}; 

Testujemy film. Jeżeli wszystko zostało wykonane prawidłowo zobaczymy pole tekstowe z zapisana wartością 50, gdyż początkowa wartość suwaka to właśnie 50. Suwak będzie miał szerokość przesuwu 200px i zakres skali od 0 do 300.

Zmieniając położenie uchwytu suwaka zmieniamy również wartość przez niego zwracaną. Ale to żadna radość zmieniać treść w polu tekstowym. Poeksperymentujcie z innymi zastosowaniami np.:

suwak1.dlugosc = 100;suwak1.skala = 100;suwak1.wartosc = 50;this.onEnterFrame = function() {jakis_mc._width = suwak1.wynik;}; 

Suwak jest o tyle uniwersalny, że można go obracać wzglądem własnej osi uzyskując możliwość jego działania (przesuwania) w różnych kierunkach.

W razie pytań, lub wątpliwości zapraszamy na .

Marek Redesiuk

Autor prowadzi stronę .