Pohyblivé kostky na nitce ve FLASHi

19. července 2000

•

V dnešním díle seriálu si ukážeme, jak udělat jednoduchý efekt, kdy máme dva objekty spojené čárou, přičemž je možné oba objekty libovolně a nezávisle na sobě posouvat po obrazovce a pořád zůstanou spojené.

Základním stavebním kamenem tohoto příkladu je funkce Set Property, kterou jsme si vysvětlili v minulém příkladu. Pomocí této funkce přiřadíme spojovací čáře tu vlastnost, aby začínala vždy na pozici prvního čtverce a končila na pozici druhého čtverce. Čtverce se dají metodou táhni a pusť přemísťovat po obrazovce a pomocí funce Get Property se zjišťuje jejich aktuální poloha.

Nejdříve si tedy vytvořte novou scénu o velikosti 300 x 150 px a nastavte Frame Rate na hodnotu 18 (CTRL+M). Hodnota Frame Rate není v tomto případě zase až tak moc důležitá, ale pro rychlost vykreslování pohybu čverců plně postačí tato hodnota.

Dále si vytvoříme průhledné tlačítko, které použijeme později při vytváření symbolu čtverce. Vytvořte tedy nový symbol Button (CTRL+F8) a pojmenujte jej "tlacitko". Nyní se nacházíte v editaci tohoto tlačítka. Vložte do všech pozic klíčové snímky (F6), ale pouze do poslední pozice (Hit) nakreslete čtverec. Tím je průhledné tlačítko hotové a přepněte se zpět do hlavní scény.

Dále vytvoříme čtverec, se kterým bude možnost hýbat. Vytvořte tedy nový symbol Movie Clip (CTRL+F8) a pojmenujte jej "ctverec". Nyní se nacházíte v editaci tohoto Movie Clipu, nakreslete tedy v první vrstvě požadovaný čtverec – bílý s černým okrajem. Vytvořte novou vrstvu a z knihovny (CTRL+L) do ní přetáhněte myší objekt "tlacitko". Pomocí Inspectora (CTRL+ALT+I) umístěte tlačítko přesně nad nakreslený čtverec.

Na tlačítko v druhé vrstvě klepněte pravým tlačítkem a z nabídky zvolte Properties. V záložce Actions přidejte následující akci:

On (Press)
Start Drag ("", L=20, T=20, R=280, B=130)
End On
On (Release)
Stop Drag
End On

Tato akce zajistí to, aby tento objekt fungoval jako Drag&Drop, tedy bylo jej možno táhnout a pustit myší. Vzdálenosti u příkazu Start Drag znamenají souřadnice prostoru, po kterém je možno s objektem pohybovat. Tento prostor lze označit nakreslením obdélníku o patřičných rozměrech.

Přepněte se zpět do hlavní scény a vytvořte poslední objekt, který je budeme potřebovat v dnešním příkladu – linku. Vytvořte tedy nový Movie Clip (CTRL+F8) a nazvěte jej "linka". Do tohoto Movie Clipu nakreslete čáru tak, aby začínala na pozici 0,0 (opět lze využít paletky Inspector). Nyní se opět přepněte do hlavní scény.

Otevřete si knihovnu (CTRL+L) a přetáhněte z ní do hlavní scény Movie Clip "ctverec" . Klepněte na něj pravým tlačítkem a z nabídky zvolte Properties. V záložce Definition pojmenujte tento objekt Instance Name = prvni. Čtverec zduplikujte (CTRL+D) a pojmenujte jej Instance Name = druhy.

Z knihovny přetáhněte MIMO scénu Movie Clip "linka"a pojmenujte tento objekt Instance Name = linka.

Všechny objekty jsou nyní umístěny v jedné vrstvě. Označte první (klíčový) snímek a vložte do něj následující akce (CTRL+F, záložka Actions):

Duplicate Movie Clip ("/linka", "nitka", 1)
Set Property ("/nitka", X Position) = GetProperty ( "/prvni", _x)
Set Property ("/nitka", Y Position) = GetProperty ( "/prvni", _y)
Set Property ("/nitka", X Scale) = GetProperty ( "/druhy", _x) – GetProperty ( "/prvni", _x)
Set Property ("/nitka", Y Scale) = GetProperty ( "/druhy", _y) – GetProperty ( "/prvni", _y)

Příkaz na prvním řádku zduplikuje objekt "linka" a dá mu nové jméno "nitka". Na dalších dvou řádkách se zjistí souřadnice x resp. y čtverce "prvni" a přiřadí se jako souřadnice x resp. y pro objekt nitka. Na posledních dvou řádcích ze odečtením zjistí vzdálenost mezi oběma čtverci a přiřadí se jako měřítko pro objekt "nitka".

Do hlavní scény vložte ještě další prázdný snímek na pozici 2 (F5), což nám zajistí neustálé opakování prvního snímku, ve kterém se počítá poloha jednotlivých objektů.

Jako vždy máte možnost stáhnout si zdrojový FLA soubor a vyzkoušet si jej na svém počítači.