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áš