Anglická verze
logolink

< Zpt na seznam lekc

vod do programu Adobe Flash

FlashObsah lekce:

  • Historie, vvoj a popis
  • Adobe Flash Professional
  • Vrstvy
  • Nstroje
  • Transformace a Zarovnn
  • Dal funkce programu

Historie, vvoj a popis

Adobe Flash je grafick vektorov program, momentln ve vlastnictv spolenosti Adobe (dve Macromedia Macromedia Flash).

Samotn technologie Flash se pouv pro tvorbu (pevn internetovch) interaktivnch animac (bannery, reklamy, nkter dynamicky se pohybujc strnky a dal), ale tak prezentac, animovanch vide, a v neposledn ad i pro tvorbu her (internetovch i klasickch - vhodou takovch her je mal velikost souboru a monost hran pmo v okn prohlee, bez nutnosti stahovn).

Rozen Flashe na internetu pomohla mal velikost vslednch soubor, protoe se uchovvaj ve vektorovm formtu, a proto ve vtin ppad vytlaily flashov bannery ty klasick, dve pouvan ve formtu GIF. Samozejm dan za men velikost je relativn vysok nronost na vkon, protoe vektorov data se mus potat a pot teprve vykreslovat.

Get the Flash Player to see this player.
Pklady vyuit technologie Flash
(velikost videa: 6,52 MB)

Konkurenc k technologii Flash je technologie Silverlight od firmy Microsoft, kter nabz v podstat srovnateln monosti (je koncipovna pro spoluprci s platformou .NET), ovem zdaleka nen tak rozen a podpora ze strany mobilnch zazen je mal.

Adobe Flash       Microsoft Silverlight

Flash tedy nabz ideln monost, pokud vytvme jednoduch i sloit animace, nebo potebujeme oivit strnky zajmavm bannerem, nebo pidat reklamu, kter nvtvnka upout. Nemli bychom ovem zapomnat, e internetov vyhledvae (jako je nap. Google) nemaj pstup k textm uvnit flashovch animac, take jej nebudou indexovat a nae strnky se nebudou zobrazovat ve vsledcch vyhledvn.

Adobe Flash Professional

Aplikace Adobe Flash Professional (posledn verze je nyn CS5.5) pedstavuje pikov publikan prosted pro tvorbu psobivho interaktivnho obsahu.

Ihned po startu zvolme bu z nabdky, nebo z menu nahoe monost novho souboru, typ vybereme ActionScript 3.0.

Pehled panel
  1. Meme si vimnout vpravo na hornm panelu, e lze, stejn jako u ostatnch program od firmy Adobe, zvolit reim poskldn panel. Pro tyto lekce budeme vyuvat reim Animator, ve kterm jsou vechny pro ns potebn vci dostupn a pehledn.
  2. Zkladnm nastavenm pro projekt je jeho rozmr v pixelech a hodnota fps, kter uruje, kolik snmk bude ve vsledn animaci vykreslovno za vteinu. Rozmr si nastavme podle vlastnch poteb, ovem u hodnoty fps si musme hodnotu dobe rozmyslet.
    Pli mal hodnota zpsob trhanou animaci, pli velk hodnota bude potebovat vt vkon a pid nm prci pi vytven animace. Standardn se pouv hodnota 12 fps, pro plynulej animaci lze pout 24 fps.
  3. Nstrojov lita, jednotliv nstroje budou popsny pozdji v tto lekci.
  4. Pltno pro kreslen, import a dal, zde budeme vytvet jednotliv snmky.
  5. V tto sti se nachz knihovna se symboly.
  6. asov osa a v druh zloce je panel s akcemi (akce se programuj). Zde se tak nachz jednotliv vrstvy.
  7. V levm sloupci je okno s barvami, pod nm okno s monostmi zarovnn a transformac a ve spodn sti je nkolik preset pro rzn typy pohyb.

Vrstvy

Vrstvy v Adobe Flash funguj velmi obdobn jako napklad v Adobe Photoshopu, lze si pidvat libovoln mnostv vrstev pro lep orientaci v projektu, samozejm lze vrstvy zamknout, schovat a navc jsou vrstvy barevn odlieny. Pro lep orientaci je mono si vrstvy rozdlit do sloek.

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

Nstroje

Pravtko, mka, pichytvn

Pro prci se me hodit nkolik poloek z menu View. Jednak se zde d zapnout zobrazen pravtka (znme z programu Adobe Photoshop), u kterho lze nastavit jednotky (cm, pixely, mm, ).

Dal monost je zapnut mky, kter nm umon lep orientaci na pltn, u mky lze nastavit vzdlenost ar.

Posledn uitenou vc je pychytvn, v jeho nastaven lze zapnout pychytvn pi posunu k rznm objektm ve scn.

Pravtko, mka

Panel nstroj

Pokud mme zvolen md Animator, nachz se panel s nstroji ve stedn sti monitoru, nad pltnem pro kreslen. Nstroje tvar jsou obdobn jako z programu Adobe Photoshop nebo Adobe Illustrator.

Panel nstroj
  • Selection

    Selection Tool
    Nstroj umouje vybrat jakoukoli st objektu. Pi pouvn si tedy musme dvat pozor, abychom mli oznaenou vpl a cel okraj, v opanm ppad me dojt ke zmnm objektu, kter v budoucnu nebude mono vrtit.
    Pomoc tohoto nstroje lze rovn z ar vytvoit kivky prostm pothnutm stedu ry na nkterou stranu. Pi dvojkliku na okraj objektu se ozna cel obvod bez ohledu na vrcholy. Pi najet na ru se u kurzoru zobraz mal kivka, co signalizuje, e thnutm vytvome kivku.
    Selection Tool
  • Subselection

    Subselection Tool
    Tento nstroj slou k vbru celho objektu a ke zmn jeho stavby jako celku. Po kliknut na okraj lze posouvat ktermkoli vrcholem, nebo thly, pokud se jedn o bezirovou kivku.
    Subselection Tool
  • Free Transform

    Free Transform
    Jednoduch nstroj na transformaci objektu, okraje nebo vpln.
  • 3D objekty

    3D objekty
    Nstroj pro prci s 3D objekty uvnit programu Adobe Flash. Potn 3D objekt je nron na vkon, proto je teba jejich pouit zvit.
  • Laso

    Laso
    Nstroj laso umouje selekci nestandardnch tvar, pop. selekci vce soubor, pouit stejn jako v Adobe Photoshopu. Navc lze pomoc lasa oznait jakoukoli st objektu i vpln.
  • Pero

    Pero
    Nstroj pero umouje tvoit jakkoli kivky, nebo upravovat ji existujc kivky. Stejn tak lze pomoc pera pidvat nebo ubrat vrcholy objektm ve scn a pevdt existujc body z vrchol na zaoblen a naopak.
    Pokud budeme pomoc pera kreslit, lze v prav sti nastavit nkolik parametr jako barva ry, tlouka, pot parametr Cap, kter uruje, jestli bude konec zaoblen, nebo hranat a dal.
  • Text

    Text
    Jednoduch nstroj na pidn jakhokoli textu na pltno, v prav sti lze nastavovat detaily jako font, velikost, barva, horn nebo doln index a dal. Poloka Anti-alias mn vsledn vzhled textu, take se vyplat zkusit i jin nastaven, zle na typu animace, kterou tvome.
    Po rozkliknut zloky Paragraph lze nastavit odsazen, zarovnn a dal.
  • ra

    ra
    ra je nstroj na kreslen rovnch, libovoln dlouhch ar, stejn jako u pera lze nastavit barvu, tlouku a styl (pln, rkovan, ), tak lze pout zakulacen nebo pevn konec.
  • Obdlnk

    Obdlnk
    Pidrenm tlatka se objev dal nstroje tto sady jako Ovl, Mnohohelnk a jin. Nastaven stejn jako u ry, navc lze nastavit pro kad vrchol vlastn hodnotu zaoblen. Pro vytvoen stejn irokho a vysokho obrazce sta dret klvesu Shift. Navc u obdlnku v poloze, kdy se jedn o tverec, je v rohu vykresleno koleko.
  • Tuka

    Tuka
    Nstrojem tuka lze nakreslit jakkoli tvar, program se bude dle parametru Smoothing snait kivku zaoblit, ppadn vytvo vrchol se zalomenm. Nastaven stejn jako u ry.
  • ttec

    ttec
    Podobn nstroj jako tuka, ovem ra nen stejn irok (simulace ttce). Pod tlatkem ttec se skrv jet tlatko Spray Brush, kter funguje jako rozpraova s monost nastavit tvar z knihovny, vku, ku a rotaci.
    Vpravo na konci nstrojov lity se zobraz dal monosti. Lze pomoc nich nastavit velikost a tvar ttce a tak je zde velmi uiten pepna, kter umouje kreslit pouze dovnit objekt, nebo naopak pouze ven, kreslit pouze v selekci a dal.
  • Deco Tool

    Deco Tool
    Tento nstroj umouje vyplnit jakoukoli plochu bu peddefinovanmi symboly, nebo vlastnmi. Sta kliknout a dret tlatko myi, symbol se bude sm rozrstat, ovem bude se automaticky zastavovat o jakkoli dal objekt. K dispozici je asi 15 vzor, u kterch se d mnit barva.
    Pehled zkladnch nstroj
    Zleva ra, Tuka, ttec, Spray Brush a Deco Tool.
  • Kbelk

    Kbelk
    Kbelk slou k vplni uzaven oblasti jako je napklad obdlnk. Pi aktivaci tto poloky se zobraz pln vpravo na nstroji panel dal poloka, pomoc kter lze nastavit, aby program automaticky uzavel oblast, kterou chceme vyplnit barvou.
  • Kaptko

    Kaptko
    Kaptko slou k importu barvy z jakkoli sti obrzku, tato barva bude uloena jako aktivn.
  • Guma

    Guma
    Guma slou k umazvn jakkoli sti objektu (lze takto dotvet libovoln tvary). Tato operace je samozejm destruktivn. Program se sna umazan tvary zaoblit.
    Vpravo na konci nstrojov lity se zobraz dal monosti. Prvn z nich uruje, jestli bude guma mazat jen vpln, jen kraje, ve nebo jen oznaen. Posledn monost uruje velikost a tvar gumy.
  • Barvy

    Barvy
    Pomoc tchto poloek lze pednastavit barvu pro okraj (tuka) a vpl (kbelk).
  • Hand a Zoom

    Hand a Zoom
    Nstroj Hand umouje pohybovat pltnem, nstroj Zoom umouje oznait oblast, kter se zvt pes plochu, ve kter se pltno nachz.
  • Bone Tool

    Bone Tool
    Jedn se o pokroil nstroj, kterm lze vytvoit virtuln skelet pro postaviku, nebo zve, a pot k tmto kostem piadit jednotliv sti na kresby, aby bylo mono jednodue pohybovat postavami nebo zvaty ve scn.

Transformace a Zarovnn

Zarovnn

Nstroj Align umouje zarovnat dva objekty nkolika zpsoby. Bu ke stran nkterho z nich, nebo vzjemn proti sob. Pomoc tohoto nstroje lze tak nastavit shodn rozmry objekt (ve spodn sti Match size).

Transformace

Nstroj Transform umouje mnit vku a ku objektu (kliknutm na etzek se zamkne/odemkne pomr stran), dle lze rotovat, nebo deformovat objekt o dan poet stup. U 3D objekt lze pout i 3D rotaci a umstn pivotu.

Dal funkce programu

Export

Samozejm vechny vytvoen objekty lze exportovat, bu jako jednotliv obrzky v jakmkoli formtu, nebo jako samotnou animaci, kterou lze pout na web nebo pro prezentaci (formt .swf, nebo videoformty jako .avi, .mp4, ). Program um tak export do .exe souboru v ppad her nebo sloitjch prezentac.

Pro okamit nhled exportu stisknte klvesy Ctrl + Enter.

asov osa

Pokud se zatm zd, e program umouje jen kreslen a objekty se nijak nehbou, ani nen dn monost, jak je rozhbat, je to tm, e jet neznme asovou osu. asov osa se nachz uprosted v horn sti okna programu a jsou na n obdlnky, kter pedstavuj jednotliv snmky (tyto snmky pmo souvis s FPS, protoe jsou to jednotliv snmky animace). Ovem o asov ose bude rozshlej vklad v pt lekci.

ActionScript

ActionScript je programovac jazyk, kter byl vyvinut pmo pro poteby Flashe. Jedn se o plnohodnotn jazyk, ve kterm lze napsat velmi sloit programy, hry nebo prezentace. Momentln je k dispozici verze 3.0. ActionScript se d pot vyut k ovldn mnoha prvk (napklad tlatko, stahovn dat, zpracovn klvesnice, myi a dal). Jeho zkladnm monostem se budeme vnovat a v ptch lekcch.

Dal ten

Odkazy

Otzky a koly

  1. Uvaujte, kdy se vyplat Flash vyut a pro kter ely jeho vyuit vhodn nen a pro (napklad spolenost Apple doposud nepidala do iPhone podporu pro Flash).
  2. Vyzkouejte si popsan nstroje, jejich pouit se v nkterch detailech li od ostatnch program ze sady Adobe CS5.
webdesign, xhtml, css, php - Mgr. Michal Mikláš