Anglická verze
logolink

< Zpìt na seznam lekcí

Úvod do programu Adobe Flash

FlashObsah lekce:

  • Historie, vývoj a popis
  • Adobe Flash Professional
  • Vrstvy
  • Nástroje
  • Transformace a Zarovnání
  • Další funkce programu

Historie, vývoj a popis

Adobe Flash je grafický vektorový program, momentálnì ve vlastnictví spoleènosti Adobe (døíve Macromedia – Macromedia Flash).

Samotná technologie Flash se používá pro tvorbu (pøevážnì internetových) interaktivních animací (bannery, reklamy, nìkteré dynamicky se pohybující stránky a další), ale také prezentací, animovaných videí, a v neposlední øadì i pro tvorbu her (internetových i klasických - výhodou takových her je malá velikost souboru a možnost hraní pøímo v oknì prohlížeèe, bez nutnosti stahování).

Rozšíøení Flashe na internetu pomohla malá velikost výsledných souborù, protože se uchovávají ve vektorovém formátu, a proto ve vìtšinì pøípadù vytlaèily flashové bannery ty klasické, døíve používané ve formátu GIF. Samozøejmì daní za menší velikost je relativnì vysoká nároènost na výkon, protože vektorová data se musí poèítat a poté teprve vykreslovat.

Get the Flash Player to see this player.
Pøíklady využití technologie Flash
(velikost videa: 6,52 MB)

Konkurencí k technologii Flash je technologie Silverlight od firmy Microsoft, která nabízí v podstatì srovnatelné možnosti (je koncipována pro spolupráci s platformou .NET), ovšem zdaleka není tak rozšíøená a podpora ze strany mobilních zaøízení je malá.

Adobe Flash       Microsoft Silverlight

Flash tedy nabízí ideální možnost, pokud vytváøíme jednoduché èi složité animace, nebo potøebujeme oživit stránky zajímavým bannerem, nebo pøidat reklamu, která návštìvníka upoutá. Nemìli bychom ovšem zapomínat, že internetové vyhledávaèe (jako je napø. Google) nemají pøístup k textùm uvnitø flashových animací, takže jej nebudou indexovat a naše stránky se nebudou zobrazovat ve výsledcích vyhledávání.

Adobe Flash Professional

Aplikace Adobe® Flash® Professional (poslední verze je nyní CS5.5) pøedstavuje špièkové publikaèní prostøedí pro tvorbu pùsobivého interaktivního obsahu.

Ihned po startu zvolíme buï z nabídky, nebo z menu nahoøe možnost nového souboru, typ vybereme ActionScript 3.0.

Pøehled panelù
  1. Mùžeme si všimnout vpravo na horním panelu, že lze, stejnì jako u ostatních programù od firmy Adobe, zvolit režim poskládání panelù. Pro tyto lekce budeme využívat režim Animator, ve kterém jsou všechny pro nás potøebné vìci dostupné a pøehledné.
  2. Základním nastavením pro projekt je jeho rozmìr v pixelech a hodnota fps, která urèuje, kolik snímkù bude ve výsledné animaci vykreslováno za vteøinu. Rozmìr si nastavíme podle vlastních potøeb, ovšem u hodnoty fps si musíme hodnotu dobøe rozmyslet.
    Pøíliš malá hodnota zpùsobí trhanou animaci, pøíliš velká hodnota bude potøebovat vìtší výkon a pøidá nám práci pøi vytváøení animace. Standardnì se používá hodnota 12 fps, pro plynulejší animaci lze použít 24 fps.
  3. Nástrojová lišta, jednotlivé nástroje budou popsány pozdìji v této lekci.
  4. Plátno pro kreslení, import a další, zde budeme vytváøet jednotlivé snímky.
  5. V této èásti se nachází knihovna se symboly.
  6. Èasová osa a v druhé záložce je panel s akcemi (akce se programují). Zde se také nachází jednotlivé vrstvy.
  7. V levém sloupci je okno s barvami, pod ním okno s možnostmi zarovnání a transformací a ve spodní èásti je nìkolik presetù pro rùzné typy pohybù.

Vrstvy

Vrstvy v Adobe Flash fungují velmi obdobnì jako napøíklad v Adobe Photoshopu, lze si pøidávat libovolné množství vrstev pro lepší orientaci v projektu, samozøejmì lze vrstvy zamknout, schovat a navíc jsou vrstvy barevnì odlišeny. Pro lepší orientaci je možno si vrstvy rozdìlit do složek.

Get the Flash Player to see this player.
(velikost videa: 2,59 MB)

Nástroje

Pravítko, møížka, pøichytávání

Pro práci se mùže hodit nìkolik položek z menu View. Jednak se zde dá zapnout zobrazení pravítka (známe z programu Adobe Photoshop), u kterého lze nastavit jednotky (cm, pixely, mm, …).

Další možností je zapnutí møížky, která nám umožní lepší orientaci na plátnì, u møížky lze nastavit vzdálenost èar.

Poslední užiteènou vìcí je pøychytávání, v jehož nastavení lze zapnout pøychytávání pøi posunu k rùzným objektùm ve scénì.

Pravítko, møížka

Panel nástrojù

Pokud máme zvolen mód Animator, nachází se panel s nástroji ve støední èásti monitoru, nad plátnem pro kreslení. Nástroje tvarù jsou obdobné jako z programu Adobe Photoshop nebo Adobe Illustrator.

Panel nástrojù
  • Selection

    Selection Tool
    Nástroj umožòuje vybrat jakoukoli èást objektu. Pøi používání si tedy musíme dávat pozor, abychom mìli oznaèenou výplò a celý okraj, v opaèném pøípadì mùže dojít ke zmìnám objektu, které v budoucnu nebude možno vrátit.
    Pomocí tohoto nástroje lze rovnìž z èar vytvoøit køivky prostým potáhnutím støedu èáry na nìkterou stranu. Pøi dvojkliku na okraj objektu se oznaèí celý obvod bez ohledu na vrcholy. Pøi najetí na èáru se u kurzoru zobrazí malá køivka, což signalizuje, že táhnutím vytvoøíme køivku.
    Selection Tool
  • Subselection

    Subselection Tool
    Tento nástroj slouží k výbìru celého objektu a ke zmìnì jeho stavby jako celku. Po kliknutí na okraj lze posouvat kterýmkoli vrcholem, nebo táhly, pokud se jedná o beziérovou køivku.
    Subselection Tool
  • Free Transform

    Free Transform
    Jednoduchý nástroj na transformaci objektu, okraje nebo výplnì.
  • 3D objekty

    3D objekty
    Nástroj pro práci s 3D objekty uvnitø programu Adobe Flash. Poèítání 3D objektù je nároèné na výkon, proto je tøeba jejich použití zvážit.
  • Laso

    Laso
    Nástroj laso umožòuje selekci nestandardních tvarù, popø. selekci více souborù, použití stejné jako v Adobe Photoshopu. Navíc lze pomocí lasa oznaèit jakoukoli èást objektu i výplnì.
  • Pero

    Pero
    Nástroj pero umožòuje tvoøit jakékoli køivky, nebo upravovat již existující køivky. Stejnì tak lze pomocí pera pøidávat nebo ubírat vrcholy objektùm ve scénì a pøevádìt existující body z vrcholù na zaoblení a naopak.
    Pokud budeme pomocí pera kreslit, lze v pravé èásti nastavit nìkolik parametrù jako barva èáry, tlouš�ka, poté parametr Cap, který urèuje, jestli bude konec zaoblený, nebo hranatý a další.
  • Text

    Text
    Jednoduchý nástroj na pøidání jakéhokoli textu na plátno, v pravé èásti lze nastavovat detaily jako font, velikost, barva, horní nebo dolní index a další. Položka Anti-alias mìní výsledný vzhled textu, takže se vyplatí zkusit i jiné nastavení, záleží na typu animace, kterou tvoøíme.
    Po rozkliknutí záložky Paragraph lze nastavit odsazení, zarovnání a další.
  • Èára

    Èára
    Èára je nástroj na kreslení rovných, libovolnì dlouhých èar, stejnì jako u pera lze nastavit barvu, tlouš�ku a styl (plná, èárkovaná, …), také lze použít zakulacený nebo pevný konec.
  • Obdélník

    Obdélník
    Pøidržením tlaèítka se objeví další nástroje této sady jako Ovál, Mnohoúhelník a jiné. Nastavení stejné jako u èáry, navíc lze nastavit pro každý vrchol vlastní hodnotu zaoblení. Pro vytvoøení stejnì širokého a vysokého obrazce staèí držet klávesu Shift. Navíc u obdélníku v poloze, kdy se jedná o ètverec, je v rohu vykresleno koleèko.
  • Tužka

    Tužka
    Nástrojem tužka lze nakreslit jakýkoli tvar, program se bude dle parametru Smoothing snažit køivku zaoblit, pøípadnì vytvoøí vrchol se zalomením. Nastavení stejné jako u Èáry.
  • Štìtec

    Štìtec
    Podobný nástroj jako tužka, ovšem èára není stejnì široká (simulace štìtce). Pod tlaèítkem Štìtec se skrývá ještì tlaèítko Spray Brush, které funguje jako rozprašovaè s možností nastavit tvar z knihovny, výšku, šíøku a rotaci.
    Vpravo na konci nástrojové lišty se zobrazí další možnosti. Lze pomocí nich nastavit velikost a tvar štìtce a také je zde velmi užiteèný pøepínaè, který umožòuje kreslit pouze dovnitø objektù, nebo naopak pouze ven, kreslit pouze v selekci a další.
  • Deco Tool

    Deco Tool
    Tento nástroj umožòuje vyplnit jakoukoli plochu buï pøeddefinovanými symboly, nebo vlastními. Staèí kliknout a držet tlaèítko myši, symbol se bude sám rozrùstat, ovšem bude se automaticky zastavovat o jakýkoli další objekt. K dispozici je asi 15 vzorù, u kterých se dá mìnit barva.
    Pøehled základních nástrojù
    Zleva Èára, Tužka, Štìtec, Spray Brush a Deco Tool.
  • Kbelík

    Kbelík
    Kbelík slouží k výplni uzavøené oblasti jako je napøíklad obdélník. Pøi aktivaci této položky se zobrazí úplnì vpravo na nástroji panelù další položka, pomocí které lze nastavit, aby program automaticky uzavøel oblast, kterou chceme vyplnit barvou.
  • Kapátko

    Kapátko
    Kapátko slouží k importu barvy z jakékoli èásti obrázku, tato barva bude uložena jako aktivní.
  • Guma

    Guma
    Guma slouží k umazávání jakékoli èásti objektu (lze takto dotváøet libovolné tvary). Tato operace je samozøejmì destruktivní. Program se snaží umazané tvary zaoblit.
    Vpravo na konci nástrojové lišty se zobrazí další možnosti. První z nich urèuje, jestli bude guma mazat jen výplnì, jen kraje, vše nebo jen oznaèené. Poslední možnost urèuje velikost a tvar gumy.
  • Barvy

    Barvy
    Pomocí tìchto položek lze pøednastavit barvu pro okraj (tužka) a výplò (kbelík).
  • Hand a Zoom

    Hand a Zoom
    Nástroj Hand umožòuje pohybovat plátnem, nástroj Zoom umožòuje oznaèit oblast, která se zvìtší pøes plochu, ve které se plátno nachází.
  • Bone Tool

    Bone Tool
    Jedná se o pokroèilý nástroj, kterým lze vytvoøit virtuální skelet pro postavièku, nebo zvíøe, a poté k tìmto kostem pøiøadit jednotlivé èásti naší kresby, aby bylo možno jednoduše pohybovat postavami nebo zvíøaty ve scénì.

Transformace a Zarovnání

Zarovnání

Nástroj Align umožòuje zarovnat dva objekty nìkolika zpùsoby. Buï ke stranì nìkterého z nich, nebo vzájemnì proti sobì. Pomocí tohoto nástroje lze také nastavit shodné rozmìry objektù (ve spodní èásti Match size).

Transformace

Nástroj Transform umožòuje mìnit výšku a šíøku objektu (kliknutím na øetízek se zamkne/odemkne pomìr stran), dále lze rotovat, nebo deformovat objekt o daný poèet stupòù. U 3D objektù lze použít i 3D rotaci a umístìní pivotu.

Další funkce programu

Export

Samozøejmì všechny vytvoøené objekty lze exportovat, buï jako jednotlivé obrázky v jakémkoli formátu, nebo jako samotnou animaci, kterou lze použít na web nebo pro prezentaci (formát .swf, nebo videoformáty jako .avi, .mp4, …). Program umí také export do .exe souboru v pøípadì her nebo složitìjších prezentací.

Pro okamžitý náhled exportu stisknìte klávesy Ctrl + Enter.

Èasová osa

Pokud se zatím zdá, že program umožòuje jen kreslení a objekty se nijak nehýbou, ani není žádná možnost, jak je rozhýbat, je to tím, že ještì neznáme Èasovou osu. Èasová osa se nachází uprostøed v horní èásti okna programu a jsou na ní obdélníèky, které pøedstavují jednotlivé snímky (tyto snímky pøímo souvisí s FPS, protože jsou to jednotlivé snímky animace). Ovšem o èasové ose bude rozsáhlejší výklad v pøíští lekci.

ActionScript

ActionScript je programovací jazyk, který byl vyvinut pøímo pro potøeby Flashe. Jedná se o plnohodnotný jazyk, ve kterém lze napsat velmi složité programy, hry nebo prezentace. Momentálnì je k dispozici verze 3.0. ActionScript se dá poté využít k ovládání mnoha prvkù (napøíklad tlaèítko, stahování dat, zpracování klávesnice, myši a další). Jeho základním možnostem se budeme vìnovat až v pøíštích lekcích.

Další ètení

Odkazy

Otázky a úkoly

  1. Uvažujte, kdy se vyplatí Flash využít a pro které úèely jeho využití vhodné není a proè (napøíklad spoleènost Apple doposud nepøidala do iPhone podporu pro Flash).
  2. Vyzkoušejte si popsané nástroje, jejich použití se v nìkterých detailech liší od ostatních programù ze sady Adobe CS5.
webdesign, xhtml, css, php - Mgr. Michal Mikláš