Flash 4 + Swift 3D - dokonalá souhra! - Grafika.cz - vše o počítačové grafice

Flash 4 + Swift 3D

Flash 4 + Swift 3D

10. května 2001, 00.00 | Ukážeme si, jak pomocí těchto dvou programů vytvořit 3D nápis, který můžeme otáčet podle toho, z jaké strany se na něj chceme koukat.

Několikrát jsem se v různých diskuzích a fórech setkal s dotazy, jak vytvořit nějaký 3D animovaný objekt na webových stránkách. Rady většinou hovořily o programech typu Vecta 3D, Swfit 3D apod. My si v tomto dnešním tutorialu ukážeme, jak vytvořit nějaký 3D nápis pomocí programu Swift 3D a poté ho importovat a doupravit ve Flashi.

Nejdříve si popíšeme postup tvorby v programu Swift 3D. Já osobně tento program využívám pro vytváření 3D modelací a animací pro web, jelikož se mi prostě zdá nejlepší z dostupných a nějakým zvláštním způsobem mi "padl do oka". Pokud i vy budete chtít s tímto programem pracovat, tak nelze než doporučit www.swift3D.com, kde si můžete vyřídit objednávku a tento produktu si zakoupit od společnosti ElectricRain, která jej též vyvinula.

Standardní klávesovou zkratkou Ctrl+N si vytvoříme nový dokument a z dialogového okna, které nám ihned vyskočí, vybereme "Create a new empty Swift 3D document". Poté si klikneme na tlačítko "create text" v horní nabídkové liště...

... čímž docílíme toho, že se nám na pracovní ploše objeví nápis "text". Nyní se přesuneme do okénka na levé straně pracovní plochy, kde si přepíšeme nápis "text", v našem případě, nápisem "sudacki".

Můžeme si změnit font (v našem případě Astron Boy Italic), zarovnání a potom jen stiskneme "apply". Výsledek bude takový, že text bude roztáhnutý i mimo viditelnou oblast, takže si ho budeme muset zmenšit. To uděláme pomocí tlačítka "scaling mode", které se nachází také v horní nabídkové liště...

... kurzorem se poté přesuneme přímo na text v "hlavní scéně", kde ho samotný "chytíme" za okraj a tažením zmenšíme. Teď už si text můžeme upravit i jinak - jeho hloubku, "rozjezd" apod. My si trochu upravíme jeho vzhled. V okénku, které je zobrazeno výše, si klikneme na nápis "bevels" a v možnostech, které se nám ukáží na původním místě editace textu, si z roletky vybereme "Inner Roud", "depth" nastavíme na hodnotu 0.030 a opět stiskneme "apply". Výsledek ve scéně by měl vypadat asi takto:

Nápis tedy máme hotov, teď už zbývá jen "rozanimovat" jej. To dokážeme tak, že se s kurzorem přesuneme do pravé dolní oblasti pracovního okna, kde na nás číhá tzv. "material palette", kterou můžeme naše objekty obarvovat. My v našem případě barvit nebudeme, takže si klikneme na záložku "show animations", kde jsou již předdefinované animace...

... Vždy po kliknutí na objekt v okénku se nám ukáže, jaká animace se pod ním skrývá. My budeme využívat běžných animací, které se skrývají pod záložkou "regular spins". Najdeme si okénko, kde je napsáno "horizontal right", na toto okénko klikneme, držíme tlačítko a pouhým přetažením tuto animaci přetáhneme na námi vytvořený nápis. Nyní vidíme, že počet rámečků na "animační řadě" je 40, což je pro nás mnoho. Zjistíme, že na rámečku 20 se animace v podstatě opakuje, jen je zrcadlově otočená. Tuto akci my nebudeme potřebovat, takže si kurzorem najedeme na konec zelené linky v animační řadě a obě "záklopky" přetáhneme na rámeček č. 20.

Samotné tělo animace je tedy hotovo a my si jej můžeme vyzkoušet tlačítkem play, které se nachází v levém spodním rohu pod animační řadou.

Nyní musíme náš výtvor exportovat do *.swf souboru. Z nabídky File vybereme Export a poté v dialogovém okně zatrhneme "include edges", "outlines", "all frames" a file level zvolíme Flash 4, stejně jak je tomu na obrázku níže.

Nyní již stiskneme Uložit a čekáme, čekáme a čekáme.

Tak .... sekvence je uložena. Otevřeme si Flash, vytvoříme si nový "movie clip" v knihovně symbolů, který nazveme "rotace". Poté si pomocí Ctrl+R importujeme do tohoto "movie clipu" samotnou 3D animaci. Vzhledem k tomu, že v tomto případě nebudeme potřebovat animaci až tak plynulou, tak můžeme každý druhý "frame" vymazat a zredukovat jejich počet na 10 ...

Na prvním rámečku dodáme script "stop", aby se nám animace nekontrolovaně nespouštěla. Nyní se "přepneme" do hlavní scény a pomocí Modify - movie si upravíme pracovní plochu na 250 x 100 px a pozadí nastavíme na šedou barvu. Vytvoříme si 2 vrstvy. Nastavíme se do té, která je níže a přetáhneme zde "movie clip" "rotace", který si pomocí "scale" upravíme na požadovanou velikost a dáme mu "instance name" "rotace". Dále si v knihovně symbolů vytvoříme nový objekt, tentokrát "button", ve kterém si označíme malým obdélníkem pouze poslední okénko (hit) ...

... nastavíme se opět do hlavní scény a do vrstvy, která je nejvýše. Zde přetáhneme "button" z knihovny symbolů a postupnou duplikací ho neprodyšně usadíme nad nápis.

Označíme si první "button" nad nápisem a vložíme na něj script:

On (Roll Over)

Begin Tell Target ("/rotace")

Go to and Stop (2)

End Tell Target

End On

Tento script nám zapříčiní to, že po najetí na toto tlačítko se "zavolá" "movie clip" rotace, kde se nastavíme na políčko č. 2. Stejným způsobem postupujeme i u ostatních tlačítek, ovšem vždy přepíšeme Go to and Stop na vyšší políčko, až do políčka č. 10.

Pokud jsme postupovali všichni úplně stejně, tak náš výtvor vypadá takto:

Využití tohoto postupu je mnohé a nikomu se meze nekladou.

Myslím si, že tento tutorial je natolik srozumitelný, že zdroják byste po mně ani nechtěli, takže ho tady ani nedávám.