      Martin Hozík
      hozikm@seznam.cz
      ICQ: 323756613

Vlastní scrollbar

Každý asi ví, na co je scrollbar (česky posuvník). Ve Flashi MX je možné k textovému poli připojit posuvník z UI komponentů, ale tyto prvky jednak zbytečně zvětšují velikost animace a navíc pokud je chcete zobrazit ve FlashPlayeru 5 jednoduše ostrouháte.

My se naučíme vytvořit posuvník, který bude umět posouvat nejen obsah textového pole, ale také například měnit pozici instance MovieClipu.

1. Posuvník textového pole

Jistě víte, že textové pole typu "Dynamic" a "Input text" zobrazuje hodnotu definované proměnné. K této funkci se vztahují 2 příkazy, které nyní využijeme:

  nazevpromenne.scroll
  nazevpromenne.maxscroll

První jmenovaný prvek vyjadřuje aktuální číslo řádku, které je zobrazené nahoře (tuto hodnotu lze změnit a tím vlastně text posunout) a druhý vyjadřuje opět číslo nejvyššího řádku, ale v případě, že již je vidět poslední řádek (v podstatě je to počet skrytých řádků). Tato hodnota přirozeně nelze měnit.

Jen dodám, že textové pole musí být typu multiline a text musí přesahovat, jinak by byly předchozí příkazy bezpředmětné.

Takže nejprve vytvořte multiline dynamic text na ploše a definujte mu např. proměnnou "text" a následně do prvního snímku definujte tyto příkazy:
```
  text = "dost dlouhý text.....";
  length = 143;
```
- proměnná "length" bude vyjadřovat výšku scrollbaru (můžete ji změnit podle potřeby) - viz dále
Následně vytvořte 3 tlačítka (šípka nahoru, posuvník, šipka dolů) - v podstatě stačí 2 (šipky jsou stejné - jen otočené)
Do třetice vytvořte movie clip a do něj šoupněte tlačítko posuvníku. Tomuto tlačítku (tedy nikoliv movie clipu) definujte tyto příkazy:
```
on (press) {
    startDrag("_root.scroller", false, _root.left, _root.top, _root.right, _root.bottom);
    _root.dragging = true;
}
on (release, releaseOutside) {
    stopDrag();
    _root.dragging = false;
}
```
Funkce "StartDrag" zahájí tažení movie clipu "scroller". Posun je však omezen 4 rozměry (v našem případě proměnné left, right, top a bottom)

Zároveň je po uchopení definována proměnná "dragging" jako pravda (po puštění jako nepravda)
Nyní umístěte MovieClip s tlačítkem na plochu, pojmenujte jej "scroller" a definujte mu tyto příkazy:
```
onClipEvent (load) {
    _root.koeficient = _root.length/(_root.text.maxscroll + 1);
    _root.top = _y;
    _root.left = _x;
    _root.right = _x;
    _root.bottom = _y+_root.length;
}

onClipEvent (enterFrame) {
     if (_root.dragging == true) {
             _root.text.scroll = Math.floor((_y - _root.top)/_root.koeficient);
     }
}
```
Po načtení MC "scroller" se vypočítá převodní koeficient (podle délky textu) jako podíl výšky celého scrollbaru a počtu skrytých řádků.

Dále jsou definovány proměnné vymezující posuv scrolleru tak aby byl možný posuv pouze po ose y na úsečce dlouhé v našem případě 143 px

Po uchopení scrolleru se potom vypočítá proměnná text.scroll jako zaokrouhlená hodnota podílu odjeté vzdálenosti od horní hranice posuvníku a koeficientu.

Další v pořadí jsou šipky:
Horní definujte tyto příkazy:

on (release, keyPress "<Up>") {
    _root.text.scroll--;

    if (_root.scroller._y-_root.koeficient>_root.top) {
                 _root.scroller._y -= _root.koeficient;
    } else {
                 _root.scroller._y = _root.top;
    }
}

Po kliknutí (nebo šipka nahoru) odečte od proměnné text.scroll jedničku (tj. posune text směrem dolů)
Dále pokud by nebyla překročena horní hranice, posune scroller o hodnotu koeficientu nahoru, pokud ano nastaví scroller na horní hranici.

Dolní šipka funguje přesně opačně:

on (release, keyPress "<Down>") {
    _root.text.scroll++;

    if (_root.scroller._y + _root.koeficient < _root.bottom) {
              _root.scroller._y += _root.koeficient;
    } else {
              _root.scroller._y = _root.bottom;
    }
}

Jako poslední krok ještě můžete dodělat design okna a je hotovo.

prohlédnout

stáhnout [6 kB]