FLASH 5 - pseudo 3D menu - Grafika.cz - vše o počítačové grafice

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



Webdesign

FLASH 5 - pseudo 3D menu

20. listopadu 2000, 00.00 | Podívejme se, jak vytvořit jednoduché pseudo 3D menu, bez použití jakýchkoliv speciálních
programů, utilit a složitých akcí. Velikost výsledného souboru je 5,61 kB.

Podívejme se, jak vytvořit jednoduché pseudo 3D menu, bez použití jakýchkoliv speciálních programů, utilit a složitých akcí. Velikost výsledného souboru je 5,61 kB.

Začneme vytvořením všech komponent, ze kterých pak budeme menu skládat. V první řadě vytvoříme rotující 3D objekt. Jeho animace je složena z deseti klíčových rámečků, použijeme vlastně typ animace frame-by-frame. Ještě před zahájením práce si musíme namíchat 8 odstínů šedé barvy tak, aby postupně přecházely od bílé po černou a protože takovéto odstíny se hodí stále, můžeme si je uložit jako defaultní nastavení (záleží na každém).

Vytvoříme filmový klip - objekt1. Na prvním poli nakreslíme prvním šedým odstínem, bez okraje, obdélník o šířce šesti políček základní mřížky a výšce tří políček základní mřížky. Nástrojem Laso, modifikací Polygon Mode vytvoříme z obdélníku trojúhelník (viz obrázky). Barvu pozadí si při práci určíme jinou než bílá, nebo šedá, kvůli viditelnosti hran objektu.

    

Na prvním poli bude trojúhelník vypadat jako na obrázku 1. Na druhé pole zkopírujeme (F6) pole první a opět nástrojem Laso označíme část trojúhelníku tak, aby vznikly dva (viz obrázek 2) a nový trojúhelník přebarvíme nejtmavším odstínem. Uchopíme levý spodní roh světlého trojúhelníku a roztáhneme tak, aby délka spodní hrany byla od středového kříže doleva asi 3,5 políčka mřížky a doprava 2,5 mřížky. Nový tmavý trojúhelník by měl mít spodní hranu o velikosti 1 pole mřížky. Výška troujúhelníku zůstává nezměněna po celou dobu animace. Vždy roztahujeme, nebo přemisťujeme nejdříve světlý trojúhelník a pak tmavý.

    

Třetí pole bude mít spodní hranu světlého trojúhelníku 4 políčka mřížky doleva a 2 políčka doprava, tmavý bude veliký 2 pole mřížky a také dostane nový barevný odstín. Na dalším poli bude mít světlý objekt spodní hranu 4,5 pole doleva a 1,5 pole doprava a tmavý objekt bude přebarven na další odstín a spodní hrana bude 3 políčka mřížky dlouhá.

    

Páté a šesté pole upravíme a přebarvíme podle obrázků 5 a 6.

    

Sedmé a osmé pole taktéž upravíme a přebarvíme podle obrázků 7 a 8.

    

Stejnou úpravu provedeme s objektem na polích 9 a 10.

    

Dalším krokem bude přidat jednotlivým obrázkům okraj, linku. Nástrojem Kalamář, rámeček po rámečku kliknutím na objekt, linku přidáme (viz obrázek 1, na druhém obrázku vidíme časovou osu v tomto klipu). Na poslední rámeček přidáme akci:

gotoAndPlay (1);

    

Podobným způsobem vytvoříme animaci textu. Použijeme stávající klip objekt 1, ve kterém nad vrstvu objekt přidáme další vrstvu. Na poli 1 napíšeme text a vložíme jej do knihovny jako grafický symbol (text1). Měl by být stejně široký jako je objekt, a také přiměřeně velký (obrázek 1). V záložce Frame zadáme animaci Motion tweening a v záložce Effect vybereme Tint. Na poli 6, přidáme klíčový rámeček a nastavíme šířku textu na 70% a také jej přesuneme (viz obrázek 2).

    

Na poli 10 vložíme další klíčový rámeček, text přebarvíme na bílou a šířku nastavíme na 5% (viz obrázek).

    

Přidáme další vrstvu, na poli 2 z knihovny vložíme symbol text1, zadáme animaci Tweening motion, zadáme efekt Tint. Text přebarvíme na tmavě šedou a šířku nastavíme na 5 %. Na poli 6 přidáme klíčový rámeček, přebarvíme na aktuální barvu a nastavíme šířku na 70%.

    

Na poli 10 nastavíme šířku na 100%, přebarvíme a přesuneme text. Timeline pak bude vypadat takto:

    

Obě vrstvy (sv. + tm.buton) si označíme -- pravý klik -- Copy Frames -- Ctrl + F8 -- Movie clip -- zapíšeme jméno (BUT1)-- a na poli 1 pravý klik -- Paste Frames. Vrátíme se do klipu object1 a obě vrstvy vymažeme.

Stejným způsobem si vytvoříme další 3 klipy (BUT1 - 4), nebo podle potřeby i více.

Dokončení příště.......

Tématické zařazení:

 » Rubriky  » Webdesign  

 

 

 

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: