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