Suwak stworzymy w niezależnym MovieClipie (MC) tak, aby można było go stosować wielokrotnie w jednym projekcie, bez konieczności duplikowania MC w bibliotece. Tworzymy w tym celu MC, nazywamy go prowadnica_mc i rysujemy w nim poziomą linię o dowolnej długości. Współrzędne x i y linii leżą na wartościach 0.

Ten MC będzie decydował o zakresie przemieszczania się uchwytu suwaka, a jego długość nie będzie miała znaczenia dla wyniku zwróconego przez suwak. Następnie tworzymy drugi MC o nazwie uchwyt_mc, rysujemy w nim kwadrat o bokach 10px (ustawiamy go na środku obszaru edycyjnego).

Przypomnę, że za dokładne ustawienie położenia obiektu odpowiada panel Align [Ctrl + k] oraz wartości w polach X i Y panelu Properties. Teraz tworzymy MC o nazwie suwak_mc. Ten MC będzie naszym suwakiem, czyli będzie przechowywał w sobie poprzednio zrobione MC i skrypt sterujący. Tworzymy w nim trzy warstwy, najniższą nazywamy prowadnica, środkową uchwyt, a górną as.

W 1 klatce warstwy prowadnica, nanosimy z biblioteki MC prowadnica_mc i ustawiamy na współrzędnych x=0 i y=0. Klikamy na tym MC i w panelu Properties w polu nadajemy mu nazwę prowadnica_mc. Nadanie tej nazwy pozwoli nam odnosić się do tego MC za pomocą ActionScriptu.

W 1 klatce warstwy uchwyt nanosimy z biblioteki MC uchwyt_mc i ustawiamy go na środku obszaru edycyjnego. W polu nadajemy mu nazwę uchwyt_mc.

Przechodzimy do sceny głównej i z biblioteki przeciągamy na nią MC suwak_mc (warstwę z suwakiem nazywamy suwak). Teraz możemy przetestować nasz film [Ctrl + Enter]. Jeżeli widzimy na scenie suwak wszystko jest OK. Jednak na razie z naszym suwakiem nic się nie dzieje, aby to zmienić napiszemy odpowiedni skrypt. Wracamy do okna sceny głównej i klikamy dwa razy na MC suwak_mc przechodząc w ten sposób do jego edycji. Zaznaczamy pierwszą klatkę warstwy as i otwieramy panel Actions – Frame.

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 forum.

Marek Redesiuk

Autor prowadzi stronę www.bannerflash.pl.