SmartClip

Dnes vás seznámím s trochu méně známou funkcí, kterou je vytvoření z obyčejného MovieClipu SmartClip (komponent).

Obyčejně se při vytváření animací snažíme o co největší interaktivitu - předat otěže animace do rukou uživatele. Dnes to bude trochu naopak. SmartClip totiž na straně diváka vypadá jako obyčejný MC.

Ona chytrost (smart = chytrý) tohoto klipu spočívá v možnosti animátora naprogramovat si určitý prvek (třeba tlačítko), přidělit mu proměnné, naprogramovat způsob chování v určitých situacích a nakonec si vytvořit menu, kde tyto vlastnosti bude možno nastavit.

Pak již stačí vložit onen klip do nějaké animace, nastavit si hodnoty a práce je hotova. V kostce řečeno je to MovieClip s kontrolním panelem (který však má k dispozici jen animátor). V návodu Flashe se dočtete, že je tato funkce ideální při práci v týmu, ale využije ji i jednotlivec.

1. Vytvoření MovieClipu

Jak již bylo řečeno, SmartClip je založen na klasickém MovieClipu. V dnešním příkladu si uděláme kreslicí plátno, na které bude možno malovat štětcem.

Nejprve vytvoříme MC a pak ještě tzv. neviditelné tlačítko (tj. tlačítko s grafikou jen ve snímku "HIT")
tlačítko pak vložíme do MC
Dále si vytvoříme další MC, do kterého nakreslíme stopu štětce, vložíme do prvního MC a pojmenujeme třeba "brush" (brush = stětec)

Pozn.: Do dalších snímků MC "brush" můžeme nakreslit více druhů tvarů stop.
Tlačítku definujeme následující příkazy:
```
on (press, dragOver) {
     pressing = true;
}
on (release, releaseOutside, dragOut) {
     pressing = false;
}
```
Předchozí zápis znamená, že po kliknutí nebo tažení dovnitř je nastavena proměnná pressing jako pravda.

Po puštění tlačítka nebo tažení ven je nastavena proměnná pressing na nepravda.
MovieClipu Brush pak definujte tyto příkazy:
```
onClipEvent (load) {
      c = new Color(this);
      c.setRGB(_parent.col, 16);
      this.gotoAndStop(_parent.paint);
      setProperty(this, _xscale, _parent.xscl);
      setProperty(this, _yscale, _parent.xscl);
      setProperty(this, _alpha, _parent.alp);
      i = 0;
}
```
Předchozí příkazy se vykonají po načtení MC "brush".

První řádek určuje hodnotu proměnné "c" jako objekt "new Color()", který nastavuje barvu instance MovieClipu (v našem případě this = tento, tedy "brush")

Druhý řádek definuje metodu (method) předchozího objektu - setRGB - nastavující hodnotu jako barvu v hexadecimálním zápisu (ta šestnáctka na konci) rovnu hodnotě proměnné "col", definovanou o úroveň výš (_parent)

Třetí řádek způsobí přeskočení přehrávače uvnitř MC "brush" na snímek definovaný proměnnou "paint" (změna tvaru štětce)

Další 3 řádky nastavují atributy MC "brush" (velikost, průhlednost), jejichž hodnoty jsou opět nahrazeny proměnnými.

Uff... a nakonec je proměnná "i"nastavena na 0 (počítadlo cyklů - viz níže)
Všechny klíčové snímky v našem SmartClipu (no on je to stále ještě MovieClip...) roztáhneme na šířku 2 snímků
druhému snímku pak definujeme toto:
```
if (pressing == true) {
      duplicateMovieClip("brush", "brush"+i, i);
      setProperty("brush"+i, _x, _xmouse);
      setProperty("brush"+i, _y, _ymouse);
      i++;
}
gotoAndPlay(1);
```
Takže toto znamená, že pokud je naše neviditelné tlačítko zmáčknuto (pressing == true), zkopíruje se MC "brush" a přidělí se mu jméno "brush" + i (brush1, brush2, brush3,...) a přenese se do úrovně (depth) "i" - viz příklad duplikace MovieClipu

A nastaví se této kopii pozice rovna pozici myši.
Nakonec se přičte k počítadlu jednička a přejde se zpět na snímek 1 a celá procedura se opakuje.
/li>

2. Přeměna na SmartClip

Jak jste si jistě povšimli, nahradili jsme většinu hodnot v předchozích příkazech proměnnými. Tyto proměnné tedy budou zakotvené ve SmartClipu jako editovatelné.

Pravým klikem na hlavní MC vyvolejte kontextovou nabídku a zvolte "Component Definition"
Mělo by se otevřít stejnojmenné okno. V jeho horní části můžete tlačítkem "+" přidávat editovatelné proměnné:

První sloupec "Name" určuje popis (tj. to co uvidí animátor), "Variable" je jméno proměnné, "Value" je počáteční hodnota a "Type" je typ dat (text, číslo, seznam, barva,...).
pokud to teď necháme svému osudu, mělo by se po kliknutí na SmartClip zobrazit v okně Properties zhruba toto:

Změnou parametrů a shlédnutím animace příkazem "Test Movie" by se měly projevit nastavené hodnoty.

3. Vytvoření speciálního UI rozhraní

Předchozí nastavovací rozhraní je podle mě velice praktické, ale najdou se i tací, kterým připadá příliš sterilní. Maniakům, kteří se vyžívají v kýčovitostech proto poskytuje Flash možnost vytvořit si vlastní rozhraní pomocí samostatné SWF animace, která se zobrazí na místě klasického rozhraní.

Vytvořte si tedy novou animaci, jejíž rozměry volte podle klasické velikosti okna rozhraní.
Dále vytvořte MovieClip (klidně i prázdný), vložte jej do animace a pojmenujte "xch"

Povšimněte si, že neříkám "třeba", tento MC se musí jmenovat xch, jinak to nebude fungovat!
Veškeré proměnné adresujete do tohoto MC (xch.paint, xch.xscl, xch.alp, xch.col)
V okně "Component Definition" našeho původního SmartClipu u kolonky "Custom UI" klepněte na "SET" a v okně "Custom UI" vyplňte položky podle obrázku:

Zde máte na výběr, jestli má být rozhraní nalinkováno z vnějšku, nebo z knihovny. (v tomto příkladu jsem jej pro názornost ponechal vně souboru)

Dále je možné určit, kde se bude rozhraní zobrazovat (v Properties nebo ve vlastním okně)

Nakonec správně napište cestu k SWF souboru.
Takto nějak by to mohlo pak vypadat:

Nakonec jen uvedu odkaz na stránku, kde si můžete stáhnout spoustu hotových komponentů:
www.flashcomponents.net

prohlédnout

stáhnout [35 kB] - jen pro MX