Začínáme s Flash MX 2004 – 14. díl – jednoduchá prezentační stránka

Protože už známe několik zajímavých postupů programování ve Flashi, připravíme si jednoduchou prezentační stránku, kterou budeme v dalších dílech postupně vylepšovat již známými postupy.

Proč jen ve Flashi?

Nebudeme zde rozvíjet dlouhé debaty tom, jestli je lepší používat místo Flashe čisté HTML stránky, berme tedy jako výchozí předpoklad, že jsme se rozhodli udělat web kompletně ve Flashi.

Co nám to přinese? Máme zde jedinečnou možnost, jak zajímavým způsobem upoutat návštěvníka, připravit mu více akce, díky které se bude na naše stránky vracet. To že pohyb upoutá mnohem více než statika, je asi jasné. Pro představu, jak můžou vypadat zdařilé flashové weby, uvádím několik odkazů:

Abychom ale zpřístupnili naše stránky i těm, kteří mají z jakýchsi důvodů zakázané flashové animace, budeme muset vytvořit i jednoduchou čistou HTML verzi, na kterou návštěvníka přesměrujeme, v případě, že mu nelze flashové animace nabídnout.

Jaký bude postup?

Dnes si připravíme prostředí, do kterého v příštím díle vložíme nejrůznější efekty. Kdo nebude chtít čekat do příštího dílu, pustí se určitě sám do experimentování.

Dejme tomu, že chceme vytvořit klasickou stránku, která má v horní části menu a ve spodní části se nachází oblast pro zobrazování zvolených informací. Struktura bude jednoduchá, v horní části bude MC pojmenovaný „menu“, ve kterém budou vložena tlačítka. Pomocí tlačítek se budeme odkazovat na jednotlivé snímky v MC „obsah“, který bude ve spodní části pod menu.

Příprava prostředí

Otevřeme si nový dokument a ještě než začneme vytvářet klipy, otevřeme panel vlastností „Properties“ a nastavíme v něm hodnoty určující šířku na 800px, výšku na 550px a barvu pozadí zvolíme tmavě šedou. Sice jsou poslední dobou v oblibě spíše pastelové barvy, ale my uděláme web na tmavém pozadí.

Klepněte pro větší obrázek

Obr. 1

Horní menu

Zvolíme nástroj pro kreslení čtyřúhelníků „Rectangle Tool“ a na paletce „Colors“ pod kreslicími nástroji, klikneme nejdříve na symbol tužky a poté na bílý přeškrtnutý čtverec. Tímto jsme určili, že obdélník bude bez okraje.

Klepněte pro větší obrázek

Obr. 2

Na scéně nakreslíme obdélník, zvolíme nástroj „Selection Tool“ a kliknutím na obdélník jej vybereme. Otevřeme panel vlastností, v levé dolní části odemkneme symbol zámku a změníme rozměr obdélníku na 800px šířka a 90px výška.

Klepněte pro větší obrázek

Obr. 3

Nyní otevřeme panel pro zarovnání objektů „Align“ a obdélník zarovnáme do horního levého rohu scény.

Klepněte pro větší obrázek

Obr. 4

Při stále vybraném objektu obdélníka otevřeme panel barev „Color Mixer“. Klikneme na symbol, kyblíku a jako typ barevného přechodu zvolíme „Linear“. Levou barvu nastavíme na R:23,G:49,B:72 a pravou barvu na R:50,G:100,B:50. Zvolíme nástroj pro změnu vlastností výplně „Fill Trasform Tool“

Klepněte pro větší obrázek

Obr. 5

a pomocí něho otočíme výplň tak, že tmavší část je nahoře, světlejší je dole.

Klepněte pro větší obrázek

Obr. 6

Klikneme pravým tlačítkem myši na objekt obdélníku a zvolíme „Convert to Symbol“. Nový MC pojmenujeme „menu“.

Stín pozadí menu

Dvojklikem na MC „menu“ klip otevřeme. Opět zvolíme obdélník a pomocí CTRL+C jej zkopírujeme do schránky. Na ose vytvoříme další vrstvu, klikneme na první snímek nové vrstvy a pomocí CTRL+SHIFT+V vložíme na stejné místo zkopírovaný obdélník.

Na paletce „Colors“ pod panelem nástrojů kreslení zvolíme barvu výplně na tmavě šedou.

Klepněte pro větší obrázek

Obr. 7

Pomocí šipky na klávesnici posuneme nový obdélník lehce dolů - stačí jedno stisknutí klávesy. V hlavním menu zvolíme „Modify - Shape - Soften Fill Edges“. Tento příkaz umožní vytvořit přechod krajů objektu do ztracena. Zobrazené okno nastavíme takto:

Klepněte pro větší obrázek

Obr. 8

a potvrdíme. Vytvořili jsme tak plynulý přechod, který bude symbolizovat stín pozadí horního menu. Aby ale stín byl opravdu stínem, tažením přesuneme vrstvu se stínem pod vrstvu původního pozadí. Vrstvy pojmenujeme a uzamkneme (kliknutím na tečku pod symbolem zámku) proti další editaci.

Klepněte pro větší obrázek

Obr. 9

Tlačítka

V MC „menu“ vytvoříme další vrstvu, do které budeme vkládat tlačítka. Klikneme na první snímek nové vrstvy a zvolíme nástroj pro psaní textu „Text Tool“.

Pomocí něho vytvoříme textové pole, do kterého napíšeme text „úvod“. Otevřeme panel vlastností, ve kterém nastavíme následující hodnoty textového pole: jako typ určíme „Static“, font zvolíme „Verdana“ tučný , velikost nastavíme na 16 a barvu na bílou.

Klepněte pro větší obrázek

Obr. 10

klikneme pravým tlačítkem myši na textové pole a zvolíme „Convert to Symbol“. Vytvoříme z pole objekt tlačítka.

Klepněte pro větší obrázek

Obr. 11

Stejným způsobem ještě vytvoříme několik dalších tlačítek, kolik, to ponechám na vás. Já jsem zvolil ještě dvě další tlačítka s texty „Volba1“ a „Volba2“.

Pozadí

Vrátíme se na hlavní scénu, pojmenujeme vrstvu s menu a uzamkneme ji. Vytvoříme si další vrstvu, ve které bude umístěn MC obsahující pozadí pro texty.

Opět zopakuje postup z kreslení obdélníku k menu, s tím rozdílem, že bude tentokrát beze stínu a barvy nastavíme takto: Levou barvu nastavíme na R:193,G:205,B:219 a pravou barvu na R:105,G:136,B:167. Šířku nastavíme na 800px a výšku tak, aby lehce přesahovala horní menu. Obdélník zarovnáme k levému dolnímu rohu a celou vrstvu přesuneme pod vrstvu s menu.

Převedeme obdélník na MC a nazveme jej „pozadi“ (kliknutím pravého tlačítka myši na objekt a zvolením „Convert to Symbol“). Opět pojmenujeme vrstvu, ve které je pozadí umístěno a uzamkneme ji.

Obsah

Nyní vytvoříme další vrstvu, ve které budeme mít MC pro zobrazování textu. Klikneme na první snímek nové vrstvy a pomocí nástroje „Text Tool“ vytvoříme textové pole. Do pole vložíme nějaký úvodní text. Velikost textu nastavíme na 15, font Arial a barvu nastavíme černou.

Klikneme pravým tlačítkem na text a zvolíme „Convert to Symbol“. Z pole uděláme MC, který pojmenujeme „obsah“. Nezapomeneme pojmenovat instanci tohoto objektu, otevřeme tedy panel vlastností „Properties“ a v poli „Instance Name“ pojmenujeme instanci „obsah“.

Klepněte pro větší obrázek

Obr. 12

Dvojklikem na objekt „obsah“ jej otevřeme. Tento objekt nám bude sloužit pro zobrazování textů, podle toho, co zvolíme v horním menu. Na každý snímek tohoto objektu proto umístíme jiný text, který bude reprezentovat jednotlivé volby horního menu.

Pravým tlačítkem klikneme na druhý snímek časové osy objektu a zvolíme „Insert Keyframe“. Dvojklikem na textové pole jej otevřeme a napíšeme text, který se zobrazí při druhé volbě horního menu. Stejně postupujeme u třetího snímku osy.

Pokud bychom nyní otestovali celou animaci, budou se nám texty neustále měnit, protože v MC „obsah“ není na snímcích žádná stopka. Proto do každého snímku v MC „obsah“ vložíme následující příkaz: stop();

Klepněte pro větší obrázek

Obr. 13

Ale ještě nemáme provázané horní menu s objektem obsahu. Otevřeme si tedy objekt „menu“ a k tlačítkům přiřadíme následující akci:

on (release) {
  this._parent.obsah.gotoAndStop(1);
}

který říká, že při uvolnění tlačítka myši, kterou jsme klikli na toto tlačítko dojde k tomu, že se v MC „obsah“ přesuneme na snímek číslo 1. Další tlačítka budou mít číslo jiné, podle toho, na kterém snímku MC „obsah“ je požadovaný text.

Poslední jednoduchá úprava se týká tlačítek. Když si otevřeme jednotlivá tlačítka, zvolíme 4. snímek osy(HIT), klikneme pravým tlačítkem myši na tento snímek a zvolíme „Insert Keyframe“. V tomto snímku překreslíme text obdélníkem. Tímto jsme určili oblast, na které je tlačítko aktivní, zabránili jsme tak tomu, že tlačítko reaguje jen na textu a někdy je pak složité se do tlačítka vůbec strefit.

Připravili jsme si prostředí, které budeme v dalších dílech vylepšovat. Dnes jsme moc akce nevytvořili, ale bylo nutné si vytvořit základ, který už budeme jen obohacovat.

Zdrojový soubor ukázky ke stažení zde, výsledek si můžete prohlédnout zde.

Diskuze (5) Další článek: Ke stažení: Nástroje pro tvorbu webů zdarma!

Témata článku: Software, Programování, Flash, Tlačítko, Mixer, Stránka, Jednotlivý snímek, Textové pole, Convert, Snímek, Stín, Pole, Jednotlivý díl, Jednoduchá úprava, Stráň, Tmavé pozadí, Menu, Ctrl + Shift + V, Posun nový, Pravé tlačítko, Jed, Díl, Zobrazování, Nová akce, Stopka


Určitě si přečtěte

Epic chce rozbít monopol Play Storu a App Storu. Nastražil trik s hrou Fortnite a žaluje Google i Apple

Epic chce rozbít monopol Play Storu a App Storu. Nastražil trik s hrou Fortnite a žaluje Google i Apple

** Apple a Google odstranili z obchodů s aplikacemi hru Fortnite ** Její vývojáři nejprve přichystali parodické video ** V žalobách viní obě firmy z monopolního chování

Karel Kilián | 134

Podívejte se, co dokáže vyrobit jedna z nejexotičtějších 3D tiskáren v Česku

Podívejte se, co dokáže vyrobit jedna z nejexotičtějších 3D tiskáren v Česku

** Na jaře tiskla unikátní české respirátory ** Používá ji třeba Škoda Auto, a.s. ** Zajeli jsme se podívat do pražského showroomu 3Dees

Jakub Čížek | 12

Filmové pirátství asi jen tak nezmizí. Když už musíte, stahujte bezpečně v Seedru

Filmové pirátství asi jen tak nezmizí. Když už musíte, stahujte bezpečně v Seedru

** Máme HBO Go, máme Netflix... ** Ale stejně krademe filmy a seriály ** Když už musíte, stahujte torrenty bezpečně v Seedru

Jakub Čížek | 141

Jak uložit dokument z Wordu, aby vydržel celé roky? Je to těžší než cesta na Mars

Jak uložit dokument z Wordu, aby vydržel celé roky? Je to těžší než cesta na Mars

** Jak uložit soubory, aby vydržely vnoučatům? ** A co kdyby měly přečkat celá staletí? ** Teď se o to pokouší GitHub a je to oříšek i pro lingvisty

Jakub Čížek | 120


Aktuální číslo časopisu Computer

Megatest mobilů do 8 000 Kč

Test bezdrátových headsetů

Linux i pro začátečníky

Jak surfovat anonymně