načítání...
nákupní košík
Košík

je prázdný
a
b

Kniha + CD: Adobe Flash CS3 - Adobe Creative Team

Adobe Flash CS3
-15%
sleva

Kniha + CD: Adobe Flash CS3
Autor:

Ať už se k Flashi obracíte jako webdesignér(ka) s cílem naučit se tvořit základní animace a další doplňky stránek, nebo jako profesionální animátor(ka) toužící spolehlivě a efektivně ovládat ... (celý popis)


hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%   celkové hodnocení
0 hodnocení + 0 recenzí

Specifikace
Nakladatelství: Computer press
Médium: Kniha + CD
Rok vydání: 2008-05-23
Počet stran: 336
Rozměr: 167 x 225 mm
Úprava: 341 stran : ilustrace
Vydání: Vyd. 1.
Název originálu: Adobe Flash CS3 professional classroom in a book
Vazba: brožovaná lepená
ISBN: 9788025121092
EAN: 9788025121092
Ukázka: » zobrazit ukázku
Popis

Ať už se k Flashi obracíte jako webdesignér(ka) s cílem naučit se tvořit základní animace a další doplňky stránek, nebo jako profesionální animátor(ka) toužící spolehlivě a efektivně ovládat nejmodernější software určený k tvorbě animací, videí a interaktivních aplikací, jste na správné adrese!

Oficiální výukový kurz je příručkou od samotných tvůrců tohoto programu. V 11 lekcích se sami krok za krokem naučíte vše od ovládání a základů práce v programu Flash CS3 až po použití komponent, tvorbu interaktivních prvků a praktické využití nových funkcí. V jednotlivých lekcích budete vytvářet skutečné projekty, díky nimž své vědomosti a znalosti postupně zdokonalíte.

Autoři se v knize mimo jiné věnují těmto tématům:
Kreslení objektů, výplně, výběry a jednoduché animace
Přidání tlačítek, průhlednosti a bitmapových obrázků do animace
Animování textů, symbolů, titulků či pohybu na cestě
Přidání zvuku, simulace třesení, morfování objektů
Tvorba interaktivních tlačítek a skriptování s ActionScriptem
Interaktivní prvky pomocí komponent
Importování videa a zvuku, animace načítání filmu
Publikování animací na webu či mobilních zařízeních

Publikace byla pro verzi CS3 nově přeložena a kompletně lokalizována do češtiny všechny obrazovky, příkazy v textu i materiály ke cvičením. Prvky uživatelského rozhraní české verze jsou doplněny o prvky anglické verze.

Oficiální výukové kurzy vytvořené odborníky ze společnosti Adobe jsou světově nejvyhledávanějšími učebnicemi pro výuku tohoto softwaru. Pomohou vám poznat programy Adobe v akci a ovládnout je bez zbytečného tápání. Své dovednosti s nimi zdokonalujete krok po kroku, v postupech řešících vždy jasně danou činnost, efekt či problém a na profesionálních grafických materiálech, jež budou jedinečnou inspirací pro vaši práci.

CD obsahuje:
zdrojové materiály a multimédia ke všem lekcím
videa ukazující zvláště nové funkce Flashe CS3 a efekty a triky (v angličtině)

Kniha není náhradou oficiální dokumentace, podpory, aktualizací a dalších výhod registrovaných uživatelů programu Adobe Flash. (oficiální výukový kurz)

Předmětná hesla
Související tituly dle názvu:
Adobe Photoshop CS4 Adobe Photoshop CS4
Team Adobe Creative
Cena: 856 Kč
Adobe InDesign 2 Adobe InDesign 2
Martin, Vlach Petr, Švéda
Cena: 389 Kč
Adobe Illustrator CS3 Adobe Illustrator CS3
Team Adobe Creative
Cena: 502 Kč
Adobe Flash CS6: Oficiální výukový kurz Adobe Flash CS6: Oficiální výukový kurz
Team Adobe Creative
Cena: 434 Kč
Zákazníci kupující zboží "Adobe Flash CS3" mají také často zájem o tyto tituly:
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

190

Začínáme

LEKCE

Pozvěte své diváky do akce za pomoci

tlačítek, nabídek a dalších interaktivních

prvků, které vybízejí k dalšímu průzkumu

webových stránek. Díky spolupráci symbolů

a ActionScriptu lze vytvářet konzistentní

a zároveň působivá uživatelská rozhraní.


ADOBE FLASH CS3 191

Ofi ciální výukový kurz

Obsah lekce

V této lekci se naučíte následující:

Manipulovat s přechody

Vytvářet tlačítka

Vytvářet animované stavy překreslení (rollovery)

Duplikovat tlačítka

Používat jediný symbol pro několik obrázků

Upravovat vnořené symboly

Vytvářet a používat návěští snímků

Pojmenovávat instance pro použití v jazyku ActionScript Doba potřebná k dokončení této lekce je přibližně 90 minut. Je-li to nutné, odeberte ze svého pevného disku složku s předchozí lekcí a zkopírujte si na něj složku Lekce06. • • • • • • • • Tvorba interaktivních souborů

6


192

Tvorba interaktivních souborů

LEKCE 6

Začínáme

Nejdříve si prohlédněte stránku s portfoliem fotografi í, kterou budete tvořit při

výuce věnované způsobu vytváření interaktivních tlačítek v programu Flash.

1 Pro spuštění animace poklepejte na soubor 06Výsledek.swf, umístěný ve složce

Lekce06/06Výsledek.

Tento projekt je tvořen interaktivní webovou stránkou pro fotografa. Po přehrání

úvodního fi lmu může divák klepnout na některé tlačítko a prohlédnout sizvětše

nou verzi zvolené fotografi e. V této lekci vytvoříte pozadí, na které přidáteinterak

tivní tlačítka pro fotky. Kód ActionScriptu je v souboru projektu již obsažen, bude

však nutné tento soubor upravit tak, aby ActionScript fungoval.

2 Uzavřete soubor 06Výsledek.swf.

3 Poklepáním na soubor 06Start.fl a, umístěný ve složce Lekce06/06Start, sipočá

teční projekt otevřete v programu Flash. Soubor obsahuje sedm vrstev a několik

položek v knihovně. Snímek 10 vrstvy Akce již obsahuje kód ActionScriptu.

4 Zvolte Soubor (File) → Uložit jako (Save As), soubor pojmenujte 06_pracov-

níkopie.fl a a uložte do složky 06Start. Uložením pracovní kopie máte jistotu, že

původní soubor budete mít k dispozici, pokud byste chtěli začít znovu od začátku.

O interaktivních souborech

Interaktivní soubory jsou soubory, které se mění na základě akcí diváka. Když

divák například stiskne tlačítko, zobrazí se větší varianta obrázku. Nebo kdyžklep

ne na položku v nabídce, objeví se na obrazovce jiná stránka. Interaktivita může být

docela složitá a vyžadovat mnoho výpočtů nebo může být tak jednoduchá, jako je

změna barvy tlačítka.

V programu Flash se k dosažení interaktivity obvykle využívá jazyk ActionScript.

V tomto projektu načítá kód ActionScriptu úvodní fi lm a také, když divák klepne

na tlačítko, příslušnou fotku. Kód jazyka ActionScript je již v souboru obsažen,

nemusíte tedy vytvářet tlačítka, značky aktivního výběru ani ostatní části, které kód

volá. O jazyku ActionScript se dozvíte více v lekci 7.


ADOBE FLASH CS3 193

Ofi ciální výukový kurz

Rozvržení prvků na obrazovce

Prezentované obrázky nezaplní celou obrazovku. Je tedy nutné vytvořit zajímavou

výplň pozadí, jednoduché rámečky pro načtené obrázky a pozadí a nadpisidenti

fi kující danou obrazovku.

Tvorba výplně přechodem

Nejdříve vytvoříte výplň přechodem, čímž přidáte zajímavý prvek k horní části

vymezené plochy, kterou následně převrátíte a zkopírujete do spodní částivyme

zené plochy.

1 Ve vrstvě Pozadí vyberte prázdný klíčový snímek ve snímku 1.

2 Vyberte nástroj obdélník. Pro tah zvolte bez barvy a pro výplň černobílý lineární

přechod.

3 Ve vymezené ploše nakreslete obdélník.

4 Vyberte obdélník pomocí nástroje pro výběr.

5 V okně inspektora Vlastností nastavte šířku na 800, výšku na 300, X na 0 a Y na

0. Přechod vyplní horní polovinu vymezené plochy, jejíž rozměry jsou 800 na 600

obrazových bodů.

6 Z rozbalovací nabídky na panelu úprav nad vymezenou plochou zvolte 50 %,

abyste dobře viděli celý přechod.

7 Vyberte nástroj transformace přechodu ( ), který je seskupený s nástrojem

libovolná transformace.


194

Tvorba interaktivních souborů

LEKCE 6

8 Pomocí ikony pro otočení v pravém horním rohu přechodu otočte přechod o 90

stupňů, aby měl černou barvu dole a bílou nahoře.


ADOBE FLASH CS3 195

Ofi ciální výukový kurz

9 Přechod zkraťte přesunutím spodní lišty vzhůru a poté přesuňte jeho středový

bod tak, abyste viděli šedý přechod pouze v horní části. Výsledek by měl vypadat

podobně jako na níže uvedeném obrázku.

10 Označte přechod a stiskem klávesy F8 jej převeďte na symbol.

11 V dialogu Převést na symbol vyberte Filmový klip, nastavte vztažný bod na levý

horní roh, symbol pojmenujte půl pozadí a klepněte na tlačítko OK.

12 Pomocí nástroje pro výběr vyberte ve vymezené ploše symbol půl pozadí azvolte Úpravy (Edit) → Kopírovat (Copy).

13 Zvolte Úpravy (Edit) → Vložit na stejné místo (Paste In Place).

14 Označte právě vloženou kopii a zvolte Změnit (Modify) → Transformovat

(Transform) → Převrátit svisle (Flip Vertical).

15 V okně inspektora Vlastností zadejte 600 pro hodnotu Y.

Vytvořením poloviny pozadí a jejím následným duplikováním si značněusnadníte tvorbu symetrických přechodů. Při úpravě symbolu se navíc automaticky změní

obě instance a velikost souboru zůstává malá. 16 Z rozbalovací nabídky Zobrazit na panelu úprav nad vymezenou plochou zvolte položku Zobrazit vše.


196

Tvorba interaktivních souborů

LEKCE 6

17 Vrstvu Pozadí uzamkněte.

Přidání jednoduchého rámečku

Nyní vytvoříte rámeček široký 2 obrazové body, který se objeví kolem načítaného

obsahu, a poté stejně široký rámeček kolem celého fi lmu.

1 Ve vrstvě Fotorámeček vyberte klíčový snímek ve snímku 1.

2 Vyberte nástroj obdélník a v oblasti voleb na panelu nástrojů zvolte ikonu

Kreslení objektu.

3 Pro výplň vyberte bez barvy a barvu tahu nastavte na #333333.

4 Nakreslete obdélník ve vymezené ploše.

5 V okně inspektora Vlastností zadejte 2 pro výšku tahu a poté nastavte šířku na

734, výšku na 404, hodnotu X na 35 a hodnotu Y na 144.

Poznámka: Vytvořili jste obdélník, který je o 4 obrazové body širší a vyšší než oblast

s obsahem specifi kovaná v kódu ActionScriptu a který je vzhledem k němu posunutý

o 2 obrazové body směrem doleva a nahoru, takže jste zhotovili rámeček široký 2

obrazové body.

6 Vyberte obdélník a stiskem klávesy F8 převeďte jeho kraj na symbol.

7 V dialogu Převést na symbol vyberte Filmový klip, symbol pojmenujte foto

rámeček a klepněte na tlačítko OK.


ADOBE FLASH CS3 197

Ofi ciální výukový kurz

8 Vyberte snímek 10 ve vrstvě Fotorámeček a stiskem klávesy F6 vložte klíčový

snímek.

9 Vyberte jakýkoliv snímek mezi snímky 1 a 10 a v okně inspektora Vlastností

zvolte v nabídce Doplnit položku Pohyb.

10 Vyberte snímek 1 ve vrstvě Fotorámeček a poté ve vymezené ploše vyberte

instanci symbolu fotorámeček.

11 V panelu Transformovat natavte šířku a výšku na 20 % a stiskněte klávesu Enter

nebo Return.

12 Odemkněte a vyberte vrstvu Pozadí. Klepnutím mimo vymezenou plochuzruš

te výběr přechodů pozadí.

13 Vyberte nástroj Obdélník, nastavte výplň na žádnou a barvu tahu na #999999.

14 Nakreslete obdélník ve vymezené ploše a poté v okně inspektora Vlastností

nastavte následující hodnoty: výška tahu = 2, šířka = 800, výška = 600, X = 0,

Y = 0.

15 Vrstvu Pozadí opět uzamkněte.


198

Tvorba interaktivních souborů

LEKCE 6

Přidání nadpisu

V tomto projektu bude nadpis zobrazen na pozadí stránky bez ohledu na to, co

jiného se na stránce zobrazuje.

1 Vyberte snímek 1 vrstvy Nadpis.

2 Vyberte textový nástroj a klepnutím v levého horním rohu vymezené plochy

vytvořte vstupní bod.

3 Napište Fotografi e Járy Slonka.

4 Označte celý text a v okně inspektora Vlastností zvolte z rozbalovací nabídky

Statický text, jako písmo nastavte Arial o velikosti 42 a klepněte na ikonu Zarovnat

doprava.

5 Označte pouze text Járy Slonka a změňte barvu na #FFCC00.

6 Vyberte pouze text Fotografi e a změňte barvu na #333333.

7 Pomocí nástroje pro výběr vyberte pole s textem a v okně inspektora Vlastností

nastavte hodnotu X na 305 a hodnotu Y na 10.

Tvorba značky výběru

Nyní vytvoříte malý obdélník, který se bude objevovat nad zvoleným tlačítkem.

1 Vyberte snímek 10 ve vrstvě Značka a stiskem klávesy F6 vložte klíčový sní

mek.

2 Vyberte nástroj obdélník, který použijte bez barvy tahu a s barvou výplně

#FFCC00.


ADOBE FLASH CS3 199

Ofi ciální výukový kurz

3 Nakreslete malý obdélník v levém horním rohu vymezené plochy.

4 Obdélník označte a v okně inspektora Vlastností zadejte následující hodnoty:

šířka = 100, výška = 4, X = 37 a Y = 73.

5 Ponechejte obdélník označený a stiskem klávesy F8 jej převeďte na symbol.

6 V dialogu Převést na symbol vyberte Filmový klip, symbol pojmenujte značka

a klepněte na tlačítko OK.

Vytváření tlačítek

Tlačítkům lze přiřazovat celou řadu různých akcí. V tomto projektu zobrazujekaž

dé tlačítko větší variantu svého obrázku v oblasti s obsahem ve vymezené ploše.

K tomuto účelu vytvoříte několik symbolů, přičemž využijete symboly grafi ky, fil

mového klipu i tlačítka.

Grafi cký symbol obsahuje obrázky a je nastaven tak, aby zobrazoval určitý snímek.

Symbol fi lmového klipu animuje stav Přes tlačítka, takže při výběru se danýobrá

zek malinko zvětší. Symbol tlačítka obsahuje ve svých rolloverových stavechsym

boly grafi ku i fi lmového klipy.

Nejdříve vytvoříte jedno tlačítko společně s jeho symboly a rolloverovými stavy

a poté jej zkopírujete a vytvoříte ostatní tlačítka, která budou vyžadovat jennepa

trné zásahy.


200

Tvorba interaktivních souborů

LEKCE 6

Tvorba grafi ckého symbolu s několika snímky

Základem tlačítka bude grafi cký symbol obsahující všechny obrázky tlačítka, každý

ve vlastním snímku v jediné vrstvě. Nejdříve vytvoříte grafi cký symbol a nastavíte

jej tak, aby zobrazoval pouze jediný snímek. Poté rozložíte obrázky do zvláštních

vrstev, zarovnáte je do jednoho hezky pod sebe a přesunete do samostatnýchsním

ků ve vrstvě Grafi ka uvnitř daného symbolu.

1 Vyberte všechny snímky vrstvy Položky a přetáhněte je do vrstvy Tlačítka.

Všechny obrázky, které byly ve vrstvě Položky, jsou nyní ve vrstvě Tlačítka.

2 Vrstvu Položky vymažte.

3 Vyberte vrstvu Tlačítka.

4 Vyberte všechny obrázky na ploše a přetáhněte je k levému okraji vymezené

plochy.

5 Ponechejte všechny obrázky označené a stiskem klávesy F8 je převeďte nasym

bol.

6 V dialogu Převést na symbol vyberte Grafi ka, nastavte vztažný bod na levýhor

ní roh, symbol pojmenujte malé náhledy a klepněte na tlačítko OK.


ADOBE FLASH CS3 201

Ofi ciální výukový kurz

7 Vyberte symbol malé náhledy ve vymezené ploše a v okně inspektora Vlastností

zvolte v rozbalovací nabídce vedle tlačítka Zaměnit položku Jeden snímek.

Poznámka: Volba Jeden snímek nabízí možnost zobrazit pouze jeden snímek grafic

kého symbolu. Pro každé tlačítko lze zobrazit jiný snímek a současně použít stejný

grafi cký snímek pro všechna tlačítka.

8 Poklepáním na symbol malé náhledy zahajte jeho editaci.

9 Vyberte všechny obrázky a zvolte Změnit (Modify) → Časová osa (Timeline) →

Rozmístit do vrstev (Distribute To Layers). Program Flash vytvoří pro každýobrá

zek jednu vrstvu.

10 Vyberte všechny obrázky ve vymezené ploše.

11 Zvolením Okna (Window) → Zarovnat (Align) otevřete panel Zarovnat.


202

Tvorba interaktivních souborů

LEKCE 6

12 V panelu Zarovnat zvolte ikonu Na plochu ( ), takže objekty se budouzarov

návat vzhledem k vymezené ploše.

13 Vyberte ikony Zarovnat levé okraje ( ) a Zarovnat horní okraje ( ), takže

obrázky se umístí nad sebe.

14 V okně inspektora Vlastností nastavte hodnotu X na 37 a hodnotu Y na 79.

15 Vyberte vrstvu Vrstva 1 a klepněte na ikonu Přidat vrstvu. Horní vrstvupojme

nujte Akce a vrstvu pod ní přejmenujte na Grafi ka.

16 Vyberte snímek 7 vrstvy Akce a snímek 7 vrstvy Grafi ka a stiskem klávesy F5

vložte snímky.


ADOBE FLASH CS3 203

Ofi ciální výukový kurz

17 Vyberte všech 7 snímků ve vrstvě Grafi ka a stiskem klávesy F7 vložte prázdné

klíčové snímky.

18 Vyberte snímek 7 vrstvy Akce a stiskem klávesy F7 vložte prázdný klíčovýsní

mek.

19 Zvolením Okna (Window) → Akce (Actions) otevřete panel Akce.

20 Přidejte akci stop zapsáním řetězce stop();.

21 Vyberte snímek 1 vrstvy Úvod.bmp a přetáhněte jej do prvního klíčovéhosním

ku vrstvy Grafi ka.

22 Přetáhněte snímek 1 vrstvy Fotka1.bmp do druhého klíčového snímku vrstvy

Grafi ka, vrstvu Photo2.bmp do třetího klíčového snímku a tak stále dál, dokud

nebude každý obrázek v samostatném klíčovém snímku vrstvy Grafi ka.

23 Smažte vrstvu Úvod.bmp a všechny ostatní vrstvy s obrázky, které jsou nyní

prázdné.

24 Klepnutím na odkaz Scene 1 se vrátíte na hlavní časovou osu.


204

Tvorba interaktivních souborů

LEKCE 6

Tvorba symbolu tlačítka

Pro základ symbolu tlačítka, které bude obsahovat rolloverové stavy, použijete

symbol malé náhledy. Pro stav Dole snížíte jas a přidáte zvuk spouště fotoaparátu.

Pro stav Přes vytvoříte symbol fi lmového klipu, který budete animovat tak, aby při

výběru tlačítka příslušný obrázek mírně přiblížil.

1 Ve vymezené ploše vyberte instanci symbolu malé náhledy a stiskem klávesy

F8 jej převeďte na symbol tlačítka, které bude obsahovat snímky pro rolloverové

stavy.

2 V dialogu Převést na symbol vyberte Tlačítko, symbol pojmenujte tlačítko úvod

a klepněte na OK.

3 Poklepáním na symbol tlačítko úvod ve vymezené ploše zahajte jeho editaci.

4 Klepněte na ikonu Vložit vrstvu a horní vrstvu pojmenujte Zvuk a dolní

Grafi ka.

5 Označte snímky Zásah v obou vrstvách a stiskem klávesy F5 přidejte snímky.

Díky tomu, že snímek Zásah obsahuje stejný obsah jako snímek Nahoře, bude

oblast zásahu defi nována tvarem tohoto symbolu.

6 Vyberte snímek Dole ve vrstvě Zvuk a stiskem klávesy F7 vložte prázdný klíčový

snímek.

7 Ve vrstvě Zvuk vyberte klíčový snímek ve snímku Dole a v okně inspektora

Vlastností zvolte v nabídce Zvuk položku Foťák spoušť.wav a v nabídce Synch.

položku Spustit.


ADOBE FLASH CS3 205

Ofi ciální výukový kurz

Když uživatel klepne na tlačítko, přehraje se zvuk spouště fotoaparátu.

8 Ve vrstvě Grafi ka označte snímky Přes a Dole a stiskem klávesy F6 vložteklíčo

vé snímky.

9 Vyberte snímek Dole ve vrstvě Grafi ka a poté vyberte grafi cký symbol vevyme

zené ploše.

10 V okně inspektora vlastnosti zvolte v nabídce Barva položku Jas a jako hodnotu

zadejte 70.


206

Tvorba interaktivních souborů

LEKCE 6

Pohybujte přehrávací hlavou mezi snímky Nahoře a Dole a prohlédněte sivytvoře

ný efekt. Při zvolení tlačítka jeho jas zmizí.

Animování rolloverových stavů

Na hotové webové stránce dochází při přejetí ukazatele myši nad tlačítkem kezvět

šení jeho obrázku. K animaci stavu Přes pro tlačítko s náhledem je nutné vytvořit

symbol fi lmového klipu.


ADOBE FLASH CS3 207

Ofi ciální výukový kurz

1. Vyberte snímek Přes ve vrstvě Grafi ka a poté ve vymezené ploše vyberte grafi cký

symbol.

2 Stiskem klávesy F8 jej převeďte na symbol. V dialogu Převést na symbol vyberte

Filmový klip, nastavte vztažný bod na levý horní roh, symbol pojmenujte úvod

animace přes a klepněte na OK.

3 Poklepáním na symbol úvod animace přes ve vymezené ploše zahajte jehoúpra

vu.

4 Klepněte třikrát na ikonu Vložit vrstvu. Vrstvy pojmenujte odshora dolů Akce,

Zvuk, Maska a Obrázek.

5 Vyberte snímek 9 ve vrstvě Akce. Přidržte klávesu Shift a ve vrstvě Obrázek

zvolte snímek 9, čímž označíte snímek 9 ve všech čtyřech vrstvách. Poté přidejte

snímky stiskem klávesy F5.

6 Vyberte snímek 9 ve vrstvě Akce a stiskem klávesy F7 vložte prázdný klíčový

snímek.

7 Zvolením Okna (Window) → Akce (Actions) otevřete panel Akce a vložte akci

stop zapsáním příkazu stop();.

8 Vyberte snímek 1 ve vrstvě Zvuk a v okně inspektora Vlastností zvolte v nabídce

Zvuk položku Foťák přiblížení.wav a v nabídce Synch. položku Spustit.


208

Tvorba interaktivních souborů

LEKCE 6

Jakmile uživatel přejede ukazatelem myši nad tlačítkem, spustí se zvuk foťáku při

přibližování záběru.

9 Vyberte snímek 1 ve vrstvě Maska a zvolte nástroj obdélník, bez tahu a s jasně

zelenou výplní.

10 Ve vymezené ploše nakreslete nad obrázkem obdélník, který by měl mít stejnou

velikost jako fotka.


ADOBE FLASH CS3 209

Ofi ciální výukový kurz

11 Vyberte nakreslený obdélník a v okně inspektora Vlastností mu přiřaďtenásle

dující hodnoty: šířka = 100, výška = 55, X = 0 a Y = 0.

12 Uzamkněte vrstvu Maska a klepněte na ikonu pro zobrazení vrstvy Maska

v obrysech.

Maska omezuje oblast obrázku, která se má zobrazovat. To znamená, že i při při

blížení náhledu bude vidět pouze ta jeho část, která nepřekračuje rozměry tlačítka.

13 Vyberte snímek 9 ve vrstvě Obrázek a stiskem klávesy F6 vložte klíčový snímek.

Poté vyberte jakýkoliv snímek mezi snímky 1 a 9 a v okně inspektora Vlastností

zvolte v nabídce Doplnit položku Pohyb.

14 Vyberte snímek 5 ve vrstvě Obrázek a stiskem klávesy F6 vložte klíčový snímek.

Ve vymezené ploše označte grafi ku a v panelu Transformovat upravte pro šířku

i výšku na 150 %.

15 V okně inspektora Vlastností nastavte X na hodnotu -75 a Y na hodnotu -132.

Z nabídky Barva vyberte Jas, jehož hodnotu stanovte na 60 %.


210

Tvorba interaktivních souborů

LEKCE 6

Poznámka: Není-li panel Transformovat otevřený, zvolte Okna (Window) →

Transformovat (Transform).


ADOBE FLASH CS3 211

Ofi ciální výukový kurz

16 Klepněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Mac OS) navrst

vu Maska a z rozbalovací nabídky zvolte položku Maska.

Program Flash odsadí vrstvu Obrázek umístěnou pod vrstvou Maska a obě vrstvy

uzamkne, čímž dojde k aplikaci masky.

17 Klepnutím na odkaz Scene 1 se vraťte na hlavní časovou osu.

18 Zvolte Ovládání (Control) → Povolit jednoduchá tlačítka (Enable Simple

Buttons).

19 Klepněte na tlačítko. Měl by se vám přehrát zvuk spouště a zobrazit stav Dolů.

20 Opětovným zvolením položky Povolit jednoduchá tlačítka (Enable Simple

Buttons) v menu Ovládání (Control) ji deaktivujte.

Vytváření dalších tlačítek

Nyní, když již máte jedno tlačítko hotové, je tvorba ostatních mnohem snazší. Stačí

totiž jen tlačítko zkopírovat a animovat symbol pro stav Přes a poté je upravit tak,

aby zobrazovaly různé snímky symbolu malé náhledy.


212

Tvorba interaktivních souborů

LEKCE 6

1 Klepněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Mac OS) nasym

bol v panelu Knihovna s názvem tlačítko úvod. Z kontextové nabídky vyberte

Duplikovat.

2 V dialogu Duplikovat symbol vyberte Tlačítko, symbol pojmenujte tlačítkosek

ce1 a klepněte na OK.

3 Klepněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Mac OS) nasym

bol v panelu Knihovna s názvem úvod animace přes a z kontextové nabídkyvyber

te Duplikovat.

4 V dialogu Duplikovat symbol vyberte Filmový klip, symbol pojmenujte sekce1

animace přes a klepněte na OK.

5 V panelu Knihovna poklepejte na ikonu symbolu sekce1 animace přes, čímž

zahájíte jeho editaci.


ADOBE FLASH CS3 213

Ofi ciální výukový kurz

6 Odemkněte vrstvu Obrázek a vyberte v ní snímek 1.

7 Ve vymezené ploše označte instanci symbolu malé náhledy.

8 V okně inspektora Vlastností zadejte do pole První hodnotu 2, což znamená, že

se má zobrazit druhý snímek.

9 Vyberte snímek 9 ve vrstvě Obrázek, označte instanci symbolu malé náhledy ve

vymezené ploše a do pole První v okně inspektora Vlastností zadejte hodnotu 2.

10 Vyberte snímek 5 ve vrstvě Obrázek, označte instanci symbolu malé náhledy ve

vymezené ploše a do pole První v okně inspektora Vlastností zadejte hodnotu 2.

11 V panelu Knihovna poklepejte na ikonu symbolu tlačítko sekce1, čímž zahájíte

jeho editaci.

12 Vyberte snímek Nahoře ve vrstvě Grafi ka, označte instanci symbolu malénáh

ledy ve vymezené ploše a do pole První v okně inspektora Vlastností zadejtehod

notu 2.

13 Vyberte snímek Dole, označte instanci symbolu ve vymezené ploše a do pole

První v okně inspektora Vlastností zadejte hodnotu 2.

14 Vyberte snímek Přes ve vrstvě Grafi ka, označte instanci symbolu úvod ani

mace přes ve vymezené ploše a v okně inspektora Vlastností klepněte na tlačítko

Zaměnit.


214

Tvorba interaktivních souborů

LEKCE 6

15 V dialogu Zaměnit symbol vyberte položku sekce1 animace přes a klepněte na

tlačítko OK.

16 Klepnutím na odkaz Scene 1 se vraťte na hlavní časovou osu.

17 Přetáhněte instanci symbolu tlačítko sekce1 z panelu Knihovna do vymezené

plochy a umístěte ji vedle instance symbolu tlačítko úvod.

18 Zvolte Ovládání (Control) → Povolit jednoduchá tlačítka (Enable Simple

Buttons), obě tlačítka otestujte a poté opětovným zvolením položky Povolitjedno

duchá tlačítka (Enable Simple Buttons) v menu Ovládání (Control) ji deaktivujte.

Poznámka: Abychom vám ušetřili čas, provedli jsme duplikaci tlačítek za vás. Chcete

-li raději tlačítka duplikovat sami, opakujte kroky 1–15 pro všechny zbývajícíobráz

ky.

19 Přetáhněte instanci každého tlačítka ze složky tlačítka sekcí v panelu Knihovna

do příslušné pozice ve vymezené ploše. Uspořádejte je zleva doprava hned vedle


ADOBE FLASH CS3 215

Ofi ciální výukový kurz

tlačítek, které jste již vytvořili. Dávejte pozor, abyste ze složky tlačítka sekcípřeta

hovali opravdu tlačítka, a ne animované fi lmové klipy.

Zarovnání tlačítek

Všechna tlačítka jsou již ve vymezené ploše, takže nyní již stačí jen je pěkně nad

fotorámečkem zarovnat:

1 Vyberte snímek 10 ve vrstvě Tlačítka, takže ve vymezené ploše uvidítefotoráme

ček v plné velikosti.

2 Zarovnejte levý okraj tlačítka úvod podle levého okraje fotorámečku vevymeze

né ploše. Zarovnejte pravý okraj tlačítka sekce6 podle pravého okraje fotorámečku.

3 Označte všech sedm tlačítek a v panelu Zarovnat deaktivujte ikonu Na plochu,

klepněte na tlačítko Rozmístit vodorovné středy a poté na tlačítko Zarovnat horní

okraje.

4 Ponechte všechna tlačítka označená a v okně inspektora Vlastností zadejte 77

pro hodnotu Y.


216

Tvorba interaktivních souborů

LEKCE 6

Aktivace tlačítek

Vytvořili jste tlačítka, která obsahují rolloverové stavy. Snímek 10 vrstvy Akce na

hlavní časové ose již obsahuje kód ActionScriptu, který na událost stisknutí auvol

nění tlačítka reaguje zobrazením odpovídajícího obrázku. Nyní je potřeba dáttla

čítkům jména, jež používá kód ActionScriptu, který se na volané tlačítko odkazuje

jeho jménem. Každé tlačítko je tedy nutné pojmenovat tak, aby se jeho jménosho

dovalo se jménem používaným v kódu jazyka ActionScript.

Kromě toho je nezbytné animovat symbol značka, který jste vytvořili pro identifi -

kaci aktivního výběru.

Pojmenování instancí

Nyní pojmenujete každou instanci tlačítka tak, jak na ni odkazuje kód

ActionScriptu.

1 Vyberte vrstvu Tlačítka a poté klepnutím na plochu zrušte označení tlačítek.

2 Vyberte první tlačítko ve vymezené ploše.

3 Do pole Název instance napište btn1_btn.

4 Další tlačítka pojmenujte podobně: btn2_btn, btn3_btn, btn4_btn, btn5_btn,

btn6_btn a btn7_btn.

5 Uzamkněte vrstvu Tlačítka.

Označení snímků

Snímky v programu Flash si můžete označit, čímž si usnadníte odkazování na

snímky v kódu ActionScriptu a otevřou se vám další možnosti. Chcete-li změnit

snímek, v němž probíhá nějaká akce, je vhodnější posunout značku, než muset


ADOBE FLASH CS3 217

Ofi ciální výukový kurz

hledat každý odkaz na číslo snímku ve skriptu. Nyní si označíte snímky, které se

používají při animaci značky výběru tlačítka.

1 Vyberte snímek 10 vrstvy Značka a poté ve vymezené ploše vyberte značku.

2 V okně inspektora Vlastností zadejte do pole Název instance marker_mc.

3 Poklepáním na instanci marker_mc ve vymezené ploše zahajte její editaci.

4 Klepněte na ikonu Vložit vrstvu.

5 Vrstvy pojmenujte Značky a Aktivní výběr.

6 Vyberte snímek 49 v obou vrstvách a stiskem klávesy F5 vložte snímky.

7 Vyberte snímek 7 ve vrstvě Značky a stiskem klávesy F6 vložte klíčový snímek.

8 Ve vrstvě Značky přidejte klíčové snímky ke snímkům 14, 21, 28, 35 a 42.

9 Označte snímek 1 ve vrstvě Značky.

10 V okně inspektora Vlastností napište do pole Popis snímku slovo úvod.


218

Tvorba interaktivních souborů

LEKCE 6

11 Ostatní snímky označte postupně slovy sekce1, sekce2, sekce3 a tak dále až po

sekce6.

Animování značku aktivního výběru

Snímky jsou označené tak, aby každá sekce představovala jedno z tlačítek. Nyní je

potřeba přesunout aktivní značku aktivního výběru tak, aby odpovídala jednot

livým tlačítkům. K přesunutí značky je však nejdříve nutné ji převést na symbol,

který je možné v rámci symbolu značka animovat.

1 Vyberte snímek 1 vrstvy Aktivní značky a ve vymezené ploše vyberte symbol

značka.

2 Stiskem klávesy F8 jej převeďte na symbol. Zvolte Filmový klip, symbolpojme

nujte aktivní výběr a klepněte na tlačítko OK.

3 Zvolte symbol aktivní výběr ve vymezené ploše a zarovnejte jeho levý okrajpod

le levého okraje tlačítka úvod. Posuňte jej tak, aby se nacházel kousek nad tlačít

kem.


ADOBE FLASH CS3 219

Ofi ciální výukový kurz

4 Vyberte snímek 7 ve vrstvě Aktivní výběr, tedy snímek, který se nachází přímo

pod značkou sekce1. Stiskem klávesy F6 vložte klíčový snímek.

5 Zvolte symbol aktivní výběr ve vymezené ploše a se současným stiskem klávesy

Shift jej přesuňte nad druhé tlačítko. Stiskem klávesy Shift omezíte možnostipohy

bu, takže objekt snadno udržíte ve stejné horizontální poloze.

6 Vyberte snímek 14 ve vrstvě Aktivní výběr, stiskem klávesy F6 vložte klíčový

snímek a přesuňte symbol aktivní výběr nad třetí tlačítko.

7 Opakováním kroku 6 přesuňte symbol aktivní výběr nad čtvrté tlačítko vesním

ku 21, páté tlačítko ve snímku 28, šesté tlačítko ve snímku 35 a poslední tlačítko ve

snímku 42.

8 Vyberte snímek 1 vrstvy Značky a zvolením Okna (Windows) → Akce (Actions)

otevřete panel Akce.

Je nanejvýš vhodné vytvořit si pro kód ActionScriptu samostatnou vrstvu Akce, aby

bylo možné skript rychle nalézt a upravit. Nicméně skripty lze aplikovat na snímky

kterékoli vrstvy, a protože vytváříte jen jednoduchou akci stop, není na časové ose


220

Tvorba interaktivních souborů

LEKCE 6

tohoto symbolu zvláštní vrstva Akce nezbytná. Když aplikujete kód ActionScriptu

na nějaký snímek, označí jej program Flash na časové ose malým písmenem a.

9 Do panelu Akce napište stop();.

10 Zavřete panel Akce a klepnutím na odkaz Scene 1 se vraťte na hlavní časovou

osu.

11 Zvolte Ovládání (Control) → Testovat fi lm (Test Movie). Po uvolnění tlačítka by

mělo dojít k načtení a zobrazení odpovídající fotografi e.

Webová stránka je nyní interaktivní, takže uživatelé si mohou zblízka prohlédnout

každou fotografi i a vrátit se k úvodnímu fi lmu. To vše díky elementům, jako jsou

pozadí, tlačítka a značka výběru, které jste vytvořili a které spolupracují s kódem

ActionScriptu. V následující kapitole se naučíte, jak psát vlastní skript v jazyce

ActionScript.


ADOBE FLASH CS3 221

Ofi ciální výukový kurz

ActionScript ukrytý za scénou

Vytvořili jste symboly, pojmenovali instance a dali vše dohromady pro kód jazy

ka ActionScript. Způsob, jakým využívá tato jména instancí, je vysvětlen níže.

O jazyku ActionScript se více dozvíte v lekci 7.

Jakmile obsluha události rozpozná, že se přehrává první snímek (to znamená, že

došlo k otevření webové stránky), načte kód ActionScriptu fi lm ze souboru úvod.

swf a umístí jej do fotorámečku.

Poté posune instanci marker_mc (tj. značku aktivního výběru, kterou jstevytvoři

li) do snímku označeného „úvod“. V tomto snímku jste značku umístili nad první

tlačítko.

stop();

var myloader:Loader = new Loader();

addEventListener(Event.ENTER_FRAME, home);

function home(e:Event):void {

removeEventListener(Event.ENTER_FRAME, home);

var request:URLRequest = new URLRequest(„úvod.swf“);

myloader.load(request);

addChild(myloader);

myloader.x=36;

myloader.y=145;

marker_mc.gotoAndStop(„úvod“);

}

Každá ze zbývajících částí skriptu aktivuje jedno tlačítko. Obsluha událostí čeká na

stisknutí tlačítka myši, na které reaguje kód ActionScriptu načtením příslušnéfoto

grafi e do fotorámečku a přesunutím instance marker_mc na odpovídající značku

snímku.

Všimněte si, že na tlačítka je odkazováno jmény jejich instancí (např. btn1_btn)

a že se značkou se pracuje přes jméno její instance (tj. marker_mc).


222

Tvorba interaktivních souborů

LEKCE 6

btn1_btn.addEventListener(MouseEvent.CLICK, image1);

function image1(event:MouseEvent):void {

var request:URLRequest = new URLRequest(„úvod.swf“);

myloader.load(request);

addChild(myloader);

myloader.x=36;

myloader.y=145;

marker_mc.gotoAndStop(„úvod“);

}

btn2_btn.addEventListener(MouseEvent.CLICK, image2);

function image2(event:MouseEvent):void {

var request:URLRequest = new URLRequest(„fotka1.jpg“);

myloader.load(request);

addChild(myloader);

myloader.x=36;

myloader.y=145;

marker_mc.gotoAndStop(„sekce1“);

}


ADOBE FLASH CS3 223

Ofi ciální výukový kurz

Opakování

Otázky

1 Jakým způsobem lze označovat snímky a kdy je to užitečné?

2 Pomocí kterých nástrojů můžete měnit směr přechodu?

3 Jak lze otestovat tlačítko ve vymezené ploše?

4 Jak pojmenujete instanci a kdy je to nezbytné?

5 Popište rychlý způsob tvorby několika vrstev, kdy každá z nich obsahujesamo

statný objekt.

Odpovědi

1 K označení snímku je nutné pro něj vytvořit klíčový snímek a poté zapsat jméno

do pole Popis snímku v okně inspektora Vlastností.

Díky značení snímku v programu Flash lze na tyto snímky snadněji odkazovat

v kódu ActionScriptu a navíc tak získat další možnosti. Chcete-li změnit snímek,

v němž dochází k nějaké akci, můžete místo hledání všech odkazů na číslo toho

snímku ve skriptu jednoduše přesunout jeho značku.

2 Pomocí nástroje transformace přechodu, který je seskupený s nástrojem volná

transformace, můžete otáčet, zvětšovat, zmenšovat nebo měnit středový bodpře

chod.

3 K otestování tlačítka ve vymezené ploše zvolte Ovládání (Control) → Povolit

jednoduchá tlačítka (Enable Simple Buttons).

4 Chcete-li pojmenovat instanci, vyberte ji ve vymezené ploše a poté zadejte

požadované jméno do pole Název instance v okně inspektora Vlastností. Instanci

je nutné pojmenovat tehdy, když se na ni hodláte odkazovat v kódu jazyka

ActionScript.

5 Pro rychlé přesunutí objektů do samostatných vrstev stačí tyto objekty ve

vymezené ploše vybrat a poté zvolit Změnit (Modify) → Časová osa (Timeline) →

Rozmístit do vrstev (Distribute To Layers).




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2018 - ABZ ABZ knihy, a.s. TOPlist