Jak na interaktivní posuny ve FLASH 5?

31. října 2001

•

V dnešním článku bych vám chtěl ukázat, jak si ve Flashi můžeme naprogramovat interaktivní posuny v ose x a y. Můžete jej použít jako oživující prvek do vašich prezentací, jejich využití nechávám opět plně na vás.

Dnešní povídání navazuje na již vydaný článek ohledně panoramatického zobrazování fotografií z okolí firmy. Tento článek jsme mohli zrovna tak nazvat interaktivním posunem obrázků ve vodorovném směru, v ose x. Záleželo pouze na nás, jak jsme si tuto ukázku nazvali a k čemu ji využili. Dnešní ukázku jsem opět připravil tak, že si budete moci změnit počet políček, úhel natočení (0 – 180 stupňů) atd. Na to vás upozorním při nastavení jednotlivých proměnných.

V panelu Frame (ctrl+m) nastavíme rychlost přehrávání na 30 fr/s. Velikost hrací plochy tentokrát ponecháme na 550 x 400 px.

movie

V prvním kroku si opět připravíme jednotlivá políčka, jejichž počet dnes bude čtyři. Využijeme postupu z předchozího článku. Na malé drobnosti vás upozorním. Nástrojem Rectangle Tool (R) si namalujeme obdélník např. červené barvy. Nástrojem Arrow Tool (V) vyberu obdélník a v panelu Info (Ctrl+Alt+I) nastavíme jeho přesné rozměry – 130 x 100 px.

info

Nedávno se mě jeden čtenář ptal, jak může v této prezentaci použít tlačítka. Nyní si zrovna tady můžete vložit do jednotlivých rámečků jiný Movie clip, grafický symbol či tlačítko. Pro náš příklad použiji opět pouze číselné označení rámečku. Nástrojem Text Tool (T) – font Arial Black, velikost 60, barva bílá – napíšu číslici 1. Nástrojem Arrow Tool označím tyto dva objekty a pomocí panelu Align (ctrl+K) zarovnám na střed. Tlačítkem F8 zkonvertuji tyto dva objekty do Movie clipu (MC) a označíme jako „pole1“. Pomocí panelu Instance (Ctrl+I) přiřadím tomuto MC název „obr_1“.

instance

Vyvoláním panelu knihovny (Ctrl+L) si označíme pole1. Pravým tlačítkem myši nad jménem „pole1“ vyvoláme menu a zvolíme řádek „Duplikace“. Název dalšího obrázku nazveme „pole2“. Stejným postupem vytvoříme „pole3“ a „pole4“. Abychom potom neměli zmatek v jednotlivých obrázcích, v editaci upravíme nástrojem Text Tool u příslušného pole správnou číslici.

duplikace

Přepneme se do hlavní scény a ze stále otevřené knihovny přemístíme do plochy MC „pole2“. Jeho instanci pojmenujeme „obr_2“. Stejně tak přemístíme „pole3“ (alt. pole4) a pojmenujeme „obr_3“ (alt. „obr_4“). Nástrojem Arrow Tool označíme třetí políčko (bude modré) a sem umístíme prázdný frame klávesou F5. Nyní přikročíme ke vkládání akcí. Vložíme další vrstvu – Insert layer. Otevřeme si panel Actions skript (CTRL+ALT+A) a do prvního políčka umístíme následující akce:

x = new Array();
y = new Array();
x[0] = 275;
po = 4;
vo = 130;
posun = 30;
xp = 200;
yp = 400;
otoc = 45;
uhel = otoc*Math.PI/180;
xk = xp+po*vo*Math.cos (uhel);
yk = yp-po*vo*Math.sin (uhel);
for (i=1; i<=po; i++) {
x[i] = xp+(i-1)*vo*Math.cos (uhel);
y[i] = yp-(i-1)*vo*Math.sin (uhel);
setProperty („obr_“+i, _rotation, -otoc);
}

Budete-li chtít rozšířit animaci na větší počet obrázků, resp. natočit jednotlivé obrázky, bude vás zajímat, co budete muset pozměnit. A proto vám vysvětlím jednotlivé proměnné: počet obrázků (po), velikost obrázku v ose x (vo), posun (čím je menší, tím je pohyb obrázků rychlejší a pokuď je hodnota záporná, dochází k opačnému pohybu obrázků než jde myš (záleží na vlastním uvážení), xp a yp je hodnota otočného bodu (viz následující obrázek), otoc (úhel natočení 0-180).

bod otáčení

Abychom mohli do druhého políčka vložit opět následující akce, klávesou F6 z něj vytvoříme klíčový rámeček:

xmys = _root._xmouse;
rozdil = x[0]-xmys;
krok = rozdil/posun;
for (i=1; i<=po; i++) {
   x[i] = x[i]-krok*Math.cos (uhel);
   y[i] = y[i]+krok*Math.sin (uhel);
   if ((x[i]<xp) and (otoc<90)) {
      x[i] = x[i]+po*vo*Math.cos (uhel);
   }
   if ((x[i]>xp) and (otoc>90)) {
      x[i] = x[i]+po*vo*Math.cos (uhel);
   }
   if ((x[i]<xk) and (otoc>90)) {
      x[i] = x[i]-po*vo*Math.cos (uhel);
   }
   if ((x[i]>xk) and (otoc<90)) {
      x[i] = x[i]-po*vo*Math.cos (uhel);
   }
   if (y[i]>yp) {
      y[i] = y[i]-po*vo*Math.sin (uhel);
   }
   if (y[i]<yk) {
      y[i] = y[i]+po*vo*Math.sin (uhel);
   }
   setProperty („obr_“+i, _x, x[i]);
   setProperty („obr_“+i, _y, y[i]);
}

Opět klávesou F6 vytvoříme klíčový rámeček. Do třetího políčka vložíme následující akci, která nám zajistí neustálé načítání polohy myši – gotoAndPlay (2). Nyní by bylo vhodné zakrýt koncové polohy políček jakoukoliv maskou, aby výsledek byl opravdu efektní. K našemu účelu by ale neposloužila, to už nechám na vás. Nyní si můžete celou ukázku vyzkoušet stiskem CTRL+Enter. Zdrojový soubor je možné stáhnout zde.

Předchozí článek Jednoduchý online chat v PHP a JavaScripte - zobrazenie online užívateľov

Další článek Jednoduchý online chat v PHP a JavaScripte - rámec head