FLASH 4 - pohybování textem pomocí kurzoru - Grafika.cz - vše o počítačové grafice

29. září 2000, 00.00 | V dnešním článku si předvedeme velice interaktivní efekt, kdy pouze pohybem
kurzoru myši pohybujeme objektem vlevo nebo vpravo.

V dnešním článku si předvedeme velice interaktivní efekt, kdy pouze pohybem kurzoru myši pohybujeme objektem vlevo nebo vpravo.

Podstatou celé animace jsou dva objekty. První z nich kopíruje polohu kurzoru a podává informace o jeho aktuální poloze a druhým objektem je text, kterým pohybujeme. Jeho pohyb závisí na aktuální poloze kurzoru - čím dále je kurzor vzdálen od středu scény, tím rychleji se text pohybuje směrem vlevo nebo vpravo.

Vytvořte si tedy novou scénu (CTRL+N) a nastavte velikost plochy na 300 x 150 px a Frame Rate na 30 snímků za sekundu (CTRL+M).

Nejdříve vytvoříme objekt, který bude kopírovat pozici kurzoru. Vytvořte tedy nový objekt - Movie Clip(CTRL+F8) a pojmenujte jej například "hybac". Nyní se nacházíte v editaci tohoto objektu. Nakreslete zde jakoukoli barvou kolečko o průměru například 6 px (CTRL+ALT+I). Na barvě nezáleží z toho důvodu, že tomuto objektu poté nastavíme maximální průhlednost.

Přepněte se nyní zpět do hlavní scény, vytvořte zde novou vrstvu "hybac" a z knihovny (CTRL+L) přetáhněte objekt "hybac" do této vrstvy. Klikněte na tento objekt pravým tlačítkem a vyberte z nabídky položku Properties. V záložce Definition vložte jako Instance Name jméno "hybac" a v záložce Color Effect nastavte průhlednost (Alpha) na nula procent. Vrstva "hybac" bude obsahovat pouze tři snímky, z nichž pouze ten první bude klíčový. Právě do klíčového snímku vložte následující akci (CTRL+F, záložka Actions):

Start Drag ("/hybac", lockcenter)

Tato akcí zajistí to, že bude tento objekt neustále kopírovat aktuální pozici kurzoru.
Nyní vytvořte nový objekt - Movie Clip a pojmenujte jej "text". V tomto objektu se bude nacházet text (mohou to být ale i obrázky, nebo jiné objekty), kterým budeme pohybovat. Napište tedy do tohoto objektu jakýkoli text a pomocí paletky Inspectors (CTRL+ALT+I) nastavte jeho rozměry na 500 x 40 px. Rozměry tohoto objektu mohou být samozřejmě libovolné, ale pro další postup animace je třeba je znát, proto budeme v tomto ukázkovém příkladu počítat právě s rozměrem 500 x 40 px.

Přepněte se zpět do hlavní scény, vytvořte zde novou vrstvu "text" a vložte do ní objekt "text" z knihovny. Tento objekt umístěte mimo scénu - vedle pravého okraje a pojmenujte tento objekt (Instance Name) "text".

V hlavní scéně nyní vytvořte novou vrstvu a pojmenujte ji "akce". V této vrstvě budou pouze tři snímky a každý z nich bude klíčový. Do prvního snímku vložte tuto akci:

Set Variable: "pohyb" = GetProperty ( text, _x )

Tato akce definuje novou proměnnou "pohyb" a vloží do ní hodnotu souřadnice x objektu "text". V podstatě je to hodnota, která udává jak rychle se bude text posouvat po stažení animace.

Do druhého klíčového snímku vložte tyto akce:

Set Variable: "souradnice" = GetProperty ( "/hybac",_x)
Set Variable: "krok" = (souradnice-150)/30

Zde máme opět nové proměnné - první z nich je "souradnice" a je jí přiřazena hodnota souřadnice x objektu "hybac". Druhou proměnnou je "krok" což je hodnota o jakou se bude text posunovat. Hodnota proměnné "krok" je stanovena jednoduchou rovnicí ve které se odečte od aktuální pozice kurzoru hodnota 150 (polovina rozměru scény) a vydělí se hodnotou 30 - odhadem stanovená hodnota, čím větší bude tato hodnota, tím pomaleji se bude text pohybovat a opačně.

Do třetího a zároveň posledního klíčového snímku vložte akce:

Set Variable: "pohyb" = pohyb + krok
If (pohyb>300)
Set Variable: "pohyb" = -500
End If
If (pohyb<-500)
Set Variable: "pohyb" = 300
End If
Set Property ("/text", X Position) = pohyb
Go to and Play (2)

Pro posunování textu jsou třeba pouze akce na první a dvou posledních řádcích. Akce nacházející se na druhé až sedmé řádce způsobují posunutí textu na novou pozici po vyjetí z obrazovky.

Proměnné pohyb je na prvním řádku přiřazena hodnota součtu proměnných "pohyb" a krok". Je to vlastně nová x-ová souřadnice objektu "text". Na další řádku je stanovena taková podmínka, že pokud je tato proměnná větší než 300, tzn. pokud vyjede ze scény, přiřadí se proměnné hodnota -500, čímž se objekt přesune o celou svoji délku vlevo a vypadá to, jako by tento objekt vjel do scény z opačného konce než z ní vyjel. Na dalších řádcích je stanovena podobná podmínka, jen s tím rozdílem, že se týká případu, kdy objekt vyjede z obrazovky směrem vlevo. Na předposledním řádku je stanoveno, na kterou pozici se má přesunout objekt "text" - je to proměnná "pohyb" a na posledním řádku je akcí "Go to" zajištěno neustále opakování akcí na snímcích 2 a 3.

Vše co je nutné pro správnou funkčnost tohoto příkladu jsem již popsal. V tomto ukázkovém příkladu se nachází ještě další vrstvy, ve kterých jsou umístěny okolní nápisy a pozadí, které ovšem nemají na funkčnost vliv, proto jsem jejich tvorbu do dnešního příkladu nezahrnul. Pokud máte zájem o bližší se seznámení s tímto příkladem, stáhněte si zdrojový soubor.

autor se zabývá tvorbou flash prezentací ve studiu areal.cz

Další relevantní články:

FLASH 4 - Duplikování filmového klipu
Flash tutoriály
FLASH 4 - preloader
Bude Flash bez palet?
Flash 4 a QuickTime video
FLASH 4 - Optimalizace křivek
FLASH 4 - Zvláštní výběr křivek a čar
FLASH 4 - Text Field Properties
Macromedia ohlašuje Flash 5
FLASH XXI - dokončení
FLASH XXI - vlnění, kruhy na vodě
FLASH XX - konverze MP3 na WAV
FLASH 5 - ?????
FLASH XIX - akce Tell Target potřetí
FLASH XVIII - akce Tell Target podruhé
FLASH XVII - akce Tell Target poprvé
FLASH XVI - jednoduché menu
FLASH XV - animace tlačítka
Bezplatný export pro Flash z Corelu 9
FLASH XIV - intro a menu
FLASH NA SVĚTOVÉ ÚROVNI
FLASH XIII - jak na preloader a jak ho umístit
FLASH XII - akce pro tlačítka
FLASH XI - 3D hvězda, zvuk na pozadí
JAK DOSTAT ČEŠTINU DO FLASHE ?
FLASH - X - animace bitmapy
SEZNAMTE SE - FLASH 4 - IX
SEZNAMTE SE - FLASH 4 - VIII
SEZNAMTE SE - FLASH 4 - VII
SEZNAMTE SE - FLASH 4 - VI
SEZNAMTE SE - FLASH 4 - V
SEZNAMTE SE - FLASH 4 - IV
SEZNAMTE SE - FLASH 4 - III
SEZNAMTE SE - FLASH 4 - II
SEZNAMTE SE - FLASH 4 - I