Macromedia Flash 8 Professional Zoznámenie Flash je animácia - teda skupina snímok, ktoré sa medzi sebou vymieňajú (podobne ako animovaný GIF). Zatiaľ čo sa pri GIFe striedajú rastrové obrazy (tvorené sieťou bodov - pixelov), u Flasha sa jedná o vektorové obrazy (grafika je definovaná pomocou čiar a výplní). Výhody vektorovej grafiky oproti rastrovej. - Je dátovo oveľa menšia - Objekty nie sú rozmerovo limitované a môžu byť zväčšované a zmenšované bez obmedzenia, bez roztrasenia a straty kvality) - Výplne a čiary môžu byť priesvitné, alebo vyfarbené výplňou s minimálnym zväčšením súboru. - vektorová grafika sa nehodí na príliš zložité obrazce (veľké množstvo farieb, zložité tvary, fotografie). Preto je do Fashu umožnené i vloženie rastrového obrázku. Spôsob vytvárania a prehrávania. Flash animácia sa vytvára vo Flash editore - tu sa nakreslia (alebo vložia) obrázky, umiestnia sa do určitých vrstiev, nadefinuje sa ich pohyb a transformácie na časovej osi, môžu sa pridať zvuky a skripty a nakoniec sa celá animácia exportuje do formátu SWF, ktorý je možno prehrať. Export do SWF animácie je nevratný. Preto, pokiaľ budeme chcieť animáciu do budúcna editovať, je potrebné ju uložiť v pracovnom formáte (formát .FLA). Pre prehrávanie animácií musí byť v počítači nainštalovaný plugin (v niektorých webových prehliadačoch je priamo zabudovaný), alebo musíme použiť samostatný prehrávač. Flash umožňuje "pribaliť" prehrávač k animácii a vytvoriť tak .EXE súbor (tzv. Projektor) spustiteľný na akomkoľvek počítači. Je ale potrebné mať na pamäti, že touto operáciou vzrastie veľkosť animácie o cca 500kB. Projektor sa preto používa hlavne pri väčších prezentáciách a hrách.
Čo sa dá vo Flashi vytvoriť Prezentácie, kreslené scénky, hry, webové aplikácie, animovaná menu, reklamné bannery, celé webové stránky, a tisíce iných vecí. Po otvorení programu vidíme základnú obrazovku, v ktorej si zvolíme v stĺpci Create new položku Flash Document. Tento slúži na vytvorenie animácie od začiatku. Po otvorení nového dokumentu vidíme prázdnu bielu plochu štandardne prednastavenú ako 550 (šírka) x 400 (výška) pixelov. Následne môžeme zvoliť pracovný nástroj a vytvoriť si obrázok, ktorý budeme animovať.
Základné pravidlá Čiara Vektorová čiara je objekt, ktorý je definovaný jednotlivými kotviacimi bodmi (uzlami), ktoré sú spojené buď úsečkou, alebo krivkou. Krivka je vždy definovaná dotyčnicou v počiatočnom a koncovom bode. Čiara samotná nemá výplň, dá sa definovať iba obrys (farbu a hrúbku). Bez ohľadu na to, ako je obrys čiary hrubý vždy sa jedná len o tenkú linku - nie o polygón. čiže aj hrubá čiara je definovaná len svojou osou. Výplň Je to plocha s definovanou farbou. Vo Flashi môže (na rozdiel od napr. CorelDRAW) výplň existovať nezávisle na čiare. Výplň tu nie je ohraničená čiarou, ale má svoje vlastné uzly spojené priamkami a krivkami, ktoré sa chovajú rovnako, ako čiara. Aj keď je výplň ohraničená svojou "špeciálnou" čiarou, nie je možné definovať jej obrys ! Pokiaľ chceme vytvoriť výplň s obrysom, je to možné jedine použitím výplne v kombinácii s čiarou. Vrstvy Flash animácia vie pracovať v niekoľkých vrstvách. Vrstvy si môžeme predstaviť, ako priehľadné fólie s nakreslenými objektmi, ktoré sú položené na seba a dohromady tvoria celý obrázok. Dôležitou vlastnosťou vrstiev je, že sú na sebe nezávislé. (Existujú aj špeciálne vrstvy, u ktorých táto vlastnosť neplatí). Znamená to teda, že objekty nakreslené v rôznych vrstvách na seba nemajú žiadny vplyv.
Zvláštnosťou oproti iným vektorovým kresliacim programom je, že pokiaľ sa vo Flashi nejaké objekty v jednej vrstve prekrývajú, automaticky sa rozdelia na diely určené ich prienikom (deliacu rovinu neovplyvňuje hrúbka čiary).
Vrstva na najvyššej úrovni je celkom hore (Layer 3) a na najnižšej úrovni dole (Layer1). Vrstvy je možné presúvať uchopením a ťahaním na požadovanú pozíciu. Aktívna vrstva (tá, do ktorej práve kreslíme) je zvýraznená čiernou (Layer 3). Vrstvy sa vytvárajú a odstraňujú nasledujúcimi tlačidlami:
Názov vrstvy je možné meniť jedným kliknutím na ňu. Každú vrstvu je možné zhasnúť (symbol oko), alebo uzamknúť (symbol zámok). Farebný štvorček vpravo zobrazuje farbu, ktorá reprezentuje danú vrstvu. Keď potom kliknete do priestoru štvorčeka, budú objekty v tejto vrstve zobrazené len obrysovo (v nastavenej farbe). Je tiež možné zbaliť určitý počet susediacich vrstiev dohromady. Všetky tieto úpravy neovplyvňujú konečnú podobu animácie - slúžia len k zjednodušeniu práce.
Výber slúži pre výber objektu. Jedným kliknutím vyberiete jeden objekt (čiara, výplň), ťahaním vyberieme viac objektov. V poli "Options" môžete nastaviť: uchopenie - objekty sa budú prichytávať na už nakreslené obrazce na krivku - vyhladí vybranú čiaru na úsečku - zruší zakrivenia vybranej čiary Podvýber, Slúži ku editácii jednotlivých uzlov čiary (alebo obrysu výplne). Zobrazenie uzlov jedným kliknutím na objekt. Vybraním uzla a následným stlačením "ALT" a ťahaním meníte (vytvárate) zakrivenie. Čiara. Kreslí rovné čiary. Čiara sa dá nakresliť kliknutím (a držaním). Hrúbku obrysu je možné zvoliť na paneli "Vlastnosti (properties)". Laso. Má rovnaké použitie, ako výber, je možné vyberať aj neštvorcové plochy. Kliknite a pohybom myši ohraničte plochu (objekt), ktorú chcete vybrať. Pustením sa plocha sama uzavrie. Pero. Kombinuje nástroje "Podvýběr" a "Čára". Jedným kliknutím vytvoríte bod a ďalším kliknutím (o kúsok ďalej) vytvoríte druhý bod, ktorý sa spojí s prvým. Umožňuje tiež pridávať a uberať uzly. Text. Jedným kliknutím umiestnite kurzor do stránky a píšete text, tento text sa nebude zalamovať. Pokiaľ namiesto jedného kliku roztiahnete textovú oblasť do šírky, slovo pri dosiahnutí tejto šírky automaticky skočí na nový riadok. Veľkosť a font sa volí vo vlastnostiach. Ovál a Obdĺžnik. Kliknutím a ťahaním vytvoríte obrazec. V poli "Options" môžete nastaviť zaguľatenie rohov.
Ceruzka. Umožňuje kresliť ručné čiary. Vo vlastnostiach je možné zvoliť, ako má čiara vyzerať: Zaostřit (Straighten) - nakreslená čiara sa zmení na rovné úsečky Vyhladit (Smooth) - čiara bude mať podobu hladkej krivky Inkoust (Ink) - čiara zostane taká, akú ste ju nakreslili
Štetec. Na rozdiel od ceruzky nekreslí čiary, ale výplne (nie sú ohraničené čiarami !). Pri použití tohto nástroja si môžete na paneli Vlastnosti zvoliť: hrúbka stopy (čiary) Tloušťka stopy (Brush Size) Typ stopy (Brush Shape) premenlivá hrúbka stopy Proměnlivá tloušťka stopy (Use Pressure) - len pokiaľ používate tablet Kam sa farba má naniesť (Brush Mode) Normálně (Normal) = cez všetky objekty Výplně (Fills) = nekreslí cez čiary Pozadí (Behind) = nekreslí cez objekty Výběr (Selection) = kreslí len cez dopredu vybraný objekt (pomocou výběr) Vevnitř (Inside) = kreslí len cez jeden objekt naraz Absolútna, alebo relatívna pozícia výplne (Lock Fill) Objektové kreslenie. Nakreslené sa stane objektom.
Voľná transformácia Pomocou tohto nástroja je možné vybraný objekt ručne otáčať, zošikmiť a meniť jeho veľkosť. V poli Vlastnosti je možné spresniť, čo chcete s objektom robiť: Otočiť Zväčšiť Roztiahnuť jednotlivé body Zdeformovať Transformácia prechodovej výplne (gradient) Umožňuje meniť veľkosť, natočenie a skosenie prechodovej výplne (postupná farba). Výplň (Plechovka s barvou) a Atrament (Kalamář)
Umožňujú meniť farbu výplne alebo farbu čiary. Vybraním tohto nástroja a klepnutím na objekt sa tento prefarbí na nastavenú farbu v poli barvy (colors). Pokiaľ klepnete nástrojom plechovka s barvou na čiarami ohraničenú plochu, vyplní sa nastavenou výplňou. V poli Vlastnosti je možné nastaviť aké veľké medzery má výplň zaceliť.
Kvapkátko Vybratím tohto nástroja a kliknutím na objekt ľavým tlačidlom nastavíte farbu objektu do poľa colors.
Guma Maže nakreslené objekty. Podobne, ako u nástroja Štetec (Brush) je i tu možné nastaviť čo sa má zmazať. Vodovod vymazáva objekty jedným kliknutím Nastavenie veľkosti a tvaru hrotu gumy. Nastavenie podobné ako pre štetec. Normálně (Normal) = maže všetky objekty Výplně (Fills) = maže čiary Linky (Behind) = maže výplne Výběr (Selection) = maže len výber (pomocou výběr) Vevnitř (Uvnitř) = maže len vo vnútri objektu
Ruka umožňuje posúvať pohľad na papier (kliknutím a ťahaním)
Lupa ovláda priblíženie - kliknutím, alebo ťahaním. Lupa sa dá vyvolať aj kolieskom myši a držaním klávesy Alt Obrys a Výplň Umožňujú nastaviť farbu obrysu a výplne pred použitím nástroja
Čierna a biela farba, bez farby, invertuj (prehoď farbu obrysu a výplne)
Po klipnutí na výber farby sa zobrazí tabuľka farieb pre priamy výber, alebo je možné kliknúť na výber farby z ponuky Windows (koliesko v pravom hornom rohu), alebo je možné farbu zadať hexadecimálne číslom. Alpha kanál udáva stupeň priehľadnosti farby, preškrtnutý štvorček udáva žiadnu farbu.
Farebný prechod (Color Gradient)
Farby obrysu čiary a farba výplne môže mať aj prechodovú farbu. Pre vytváranie takýchto výplní slúži panel s názvom "Barvy". Zobrazíte ho voľbou v menu Okno - Výběr barvy. Pre rýchle nastavenie farby výplne sa v spodnej časti výberu farieb sa nachádzajú nastavenia pre prechody farieb - farebný gradient. Prvý je lineárny, ďalšie štyri kruhové, prechod pre dve farby a prechod pre viacero farieb.
Tu je možné vybrať farbu výplne a čiary, buď výberom z palety 256 farieb, alebo pomocou HSB (Hue, Saturation, Brightness) palety. Pokiaľ v rozbaľovacom zozname zvolíte lineárny prechod (Linear), alebo kruhový prechod (Radial) objaví sa spodná lišta, na ktorej je možné definovať farby a prechodový gradient posúvaním potenciometrov. Ďalšia farba sa pridá kliknutím medzi dva potenciometre, farba sa uberie presunutím potenciometra z lišty. Editáciu farby vykonáte vybraním bodu a voľbou farby.
Rastrové výplne Vo výplni je možné namiesto farby použiť tiež rastrový obrázok (napr.: GIF, JPEG, ...). Tento obrázok potom bude dlaždicovo vyskladaný v priestore výplne (podľa rozlíšenia). Aby ste mohli použiť ako výplň rastrový obrázok, musíte tento obrázok najprv vložiť do knižnice. Alebo Soubor - Import - Import do knihovny, alebo v palete Color zvoľte Typ - Bitmap a potom tlačidlo Import... V spodnej časti palety sa zobrazujú importované bitmapové obrázky, ktoré je možné používať ako výplň.
Transformácie (Transform) Na paneli Zarovnání & Info & Transformace (zobrazíte ho voľbou v menu Okno - Transformace) je možné editovať percentuálnu šírku a výšku, otočenie (rotate) a sklon (skew) akéhokoľvek objektu presne. Zaškrtávacie políčko Omezit umožňuje meniť výšku a šírku nezávisle, alebo závisle na sebe.
Zarovnanie (Align) Ďalší panel s vizuálne znázornenými funkciami (zobrazíte ho voľbou v menu Okno - Zarovnání) Pomocou neho je možné presne vyrovnať dva objekty navzájom. Vyberiete dva (alebo viac) objektov, stlačíte tlačidlo podľa vizuálnej voľby a objekty sa zarovnajú podľa obrázka. Na plochu (To Stage) znamená zarovnanie vzhľadom k papieru, nie relatívne ku vybraným objektom. Info (Info) Zobrazuje informácie o šírke a výške vybraného objektu, x-ovej a y-ovej súradnici (polohe) vybraného objektu. Štvorčeky medzi nimi ukazujú polohu ktorého bodu znázorňuje x a y. V spodnej časti je pre okamžitú polohu kurzora myši zobrazované farby RGB, kanál priehľadnosti Alpha a poloha kurzora (x a y súradnica) v obrázku. (zobrazíte ho voľbou v menu Okno - Info) .
Knižnica Každý nakreslený objekt (skupina objektov) je možné vo Flashi prekonvertovať na tzv. symbol a umiestniť ho do knižnice (library) - knižnicu zobrazíme stlačením F11, alebo Ctrl+L, alebo Okno - Knihovna. Potom je možné vybrať z knižnice a vložiť do animácie kópiu tohto symbolu tzv. inštanciu (instanci). Výhodou je, že inštancia sa vkladá do animácie iba raz, bez ohľadu na to, koľkokrát sa v animácii vyskytne, pričom ju je možné parametrizovať. Druhy symbolov Už známy bitmapový obrázok používaný ako podklad pre rastrovú výplň objektu Existujú 3 základné druhy symbolov: Klip (Movie Clip) symbol, ktorý môže obsahovať samostatnú pohyblivú animáciu (má vlastnú časovú os) Tlačítko (Button) Obsahuje 4 snímky (Up, Over, Down, Hit). Up - snímka, ktorý je vidieť normálne Over - snímok, ktorý sa zobrazí pri prekrytí tlačidla kurzorom myši Down - snímka, ktorý sa zobrazí po kliknutí na tlačítko Hit - tento snímka nie je nikdy viditeľný - určuje oblasť, ktorá má byť citlivá na kliknutie Grafika (Graphic) - najjednoduchší symbol. Môže obsahovať iba nehybnú grafiku.
Nový symbol vytvoríte v menu Vložit - Nový symbol. Už nakreslenú grafiku prevediete na symbol označením objektu, stlačením pravého tlačidla myši a zvolením Změnit na symbol... Alebo v menu Změnit - Změnit na symbol, alebo stlačením F8, Alebo pretiahnutím objektu myšou do poľa panela Knihovna. Inštanciu zo symbolu na scéne vytvoríte jednoduchým pretiahnutím symbolu z knižnice na scénu. Inštancie symbolov môžete vkladať i do iných symbolov (napr. do symbolu Button môžete vložiť inštanciu Movie Clipu). Samozrejme nie je možné vkladať inštancie samé do seba. Zmenu druhu symbolu vykonáte pravým kliknutím na názov symbolu v knižnici a v menu Typ určíte druh.
Transformácia inštancie Aby sa ušetrilo na veľkosti obrázku je možné inštanciu - čo je vlastne kópia symbolu - použiť viackrát, pričom stačí, aby bola vložená iba raz. Za týmto účelom je možné meniť parametre inštancie: -
Výška a šírka (width, height) Rotácia (rotate) Sklon (skew) Jas (brightness) Farebný odtieň (tint) Priehľadnosť (alpha)
Aby ste mohli editovať parametre, musíte kliknúť na inštanciu a na paneli Vlastnosti sa objaví roletové menu. Akákoľvek zmena inštancie nemá vplyv na rodičovský symbol a naopak zmena symbolu ovplyvní všetky inštancie !
Výška a šírka, rotácia, sklon - rovnaké ako pre transformácie Jas (brightness). Táto voľba umožňuje nataviť úroveň jasu celel inštancie +100% = biela, -100% = čierna Farebný odtieň (tint) Tento atribút si môžeme predstaviť ako farebnú priehľadnú fóliu pred inštanciou. Farba sa vyberá pomocou palety, voliteľne sa nastavuje sýtosť (krytie) odtieňa. Priehľadnosť (alpha) Priehľadnosť celej inštancie voči objektom v nižších vrstvách.
Špeciálne symboly Okrem menovaných 3 druhov symbolov môže byť do knižnice vložený aj: Rastrový obrázok. Platia preň podobné pravidlá, ako pre grafiku, ale pre jeho inštanciu je možné upraviť len výšku, šírku, rotáciu a sklon. Zvuk Do Flash animácie je možné vložiť zvuk vo formáte MP3 alebo WAV. Zložka. Nemá žiadnou špeciálnu funkciu, slúži len na prehľadnejšiu organizáciu objektov v knižnici. Komponent Je to zvláštny typ MovieClipu, ktorý plní nejakú funkciu (napr. výberové pole). Po jeho vložení do animácie je možné v okne Vlastnosti nastaviť niektoré parametre komponentu. Tento symbol býva tiež niekedy označovaný ako SmartClip. Existuje štandardná knižnica smartclipov. Font môžete do knižnice umiestniť klepnutím na tlačítko a zvolením Nový Font. Následne vyberiete jeden font, ktorý máte nainštalovaný vo Windows a do kolónky výška napíšete jeho nové meno, ktoré ho bude v animácii reprezentovať. Tento postup neodporúčame používať pre klasické texty a formuláre. Pri písaní textu sa font sám pribalí v potrebnom rozsahu a u formulárových prvkov (Input a Dynamic Text) je možné presne definovať, aké znaky sa majú pribaliť. Umiestnenie fontu do knižnice sa dá využiť jedine pre potreby ActionScriptu (napríklad UI komponenty). Video. Flash umožňuje vkladať do animácie videa vo formáte MPEG, DV, MOV a AVI Vloženie externých súborov do knižnice je možné pomocou príkazu Import to Library v menu File.
Snímky, pohyb objektov Časová os a snímky Pohyb je iba ilúzia vytvorená rýchlo sa prepínajúcou skupinou statických snímok. Snímky sú vo Flashi rozmiestnené do časovej osi, ktorá sa prehráva určitou rýchlosťou (Frame Rate).. Základným stavebným kameňom je kľúčová snímka (keyframe). Táto snímka môže byt buď prázdna (nie je v nej nič nakreslené) alebo plná (obsahuje nejakú grafiku). Kľúčová snímka môže byt široká len ako jedna snímka (1. a 3. vrstva zhora), alebo môže byť roztiahnutá do ľubovoľnej vzdialenosti na časovej osi (2. a 4. vrstva zhora na obrázku). Grafika v 3. vrstve zhora teda bude viditeľná len 1/12 sekundy, zatiaľ čo grafiku vo 4. vrstve uvidíme 10/12 sekundy.
Pridávanie a mazanie snímok: F5 - pridať normálnu snímku (zväčšiť kľúčovú snímku) F6 - pridať kľúčovú snímku (obsahuje rovnakú grafiku ako predchádzajúca kľúčová snímka) F7 - pridať prázdnu kľúčovú snímku Zmazať a pridávať snímky môžete ich vybraním, kliknutím pravým tlačítkom a zvolením Smazat snímky (Remove Frames), Vložit snímky a pod. Vybraním jednej alebo viacerých snímok a ich pretiahnutím na novú pozíciu ich môžete presunúť na ľubovoľné miesto v časovej osi (i do inej vrstvy). Pozor - výberom snímky a stlačením DEL zmažete jen obsah snímku.
Motion a Shape Tween Vo Flashi existujú dva spôsoby, ako automaticky vykresliť zmenu medzi dvomi kľúčovými snímkami:
Motion Tween (Pohybové vykreslenie) Vytvoríme ho tak, že umiestnime za sebou dve kľúčové snímky. Prvú kľúčovú snímku urobíme dlhšiu. Čím je prvá kľúčová snímka dlhšia, tým pomalší a plynulejší bude pohyb. Je nutné, aby prvá i druhá kľúčová snímka obsahovala inštancie rovnakých symbolov.!! Pokiaľ teda budú v prvej KS inštancie symbolov A a B, musia i v druhej KS byť opäť inštancie A a B ! Inštancie symbolov v druhej KS môžete upravovať (poloha, veľkosť, odtieň, rotácia, priehľadnosť, skosenie. Potom kliknite pravým tlačítkom na prvú snímku a zvoľte Vytvořit Motion Tween (Create Motion Tween). Iná možnosť je vybrať prvú KS a na paneli Vlastnosti sa objaví roletové menu Tween. Tu zmeňte položku None na Motion. Pohyb je možné vytvoriť aj tak, že do časovej osi vložíte len jednu KS ktorú roztiahneme na potrebnú veľkosť a do nej nakreslíte grafiku (nemusí to byť inštancia). Potom kliknete pravým tlačítkom na prvú KS a vyberiete Vytvořit Motion Tween (Create Motion Tween). Nakreslená grafika sa automaticky prevedie na symbol. Následne kliknite na poslednú snímku KS a upravte grafiku podľa vašich predstáv (rotácia, sklon, veľkosť ...) a je hotovo.
Na paneli Vlastností je možné nastaviť niektoré detaily pohybu Uklidnit (Ease). Tu môžete ovplyvniť priebeh rýchlosti pohybu počas prehrávania - spomaľovanie alebo zrýchľovanie. Otočit (Rotate). Pokiaľ necháte na "Auto", bude sa objekt otáčať podľa koncovej snímky. Môžete však pridať rotáciu (o 360°) a to po smere, alebo proti smeru hodinových ručičiek (CW a CCW). Do kolónky vpravo potom zadajte koľkokrát sa má objekt otočiť. Scale Zaškrtnutím povolíte postupnú zmenu veľkosti. Podle cesty (Orient to Path). Orientovať pohyb na trasu - pozri pohyb po krivke. Synch (Sync). Príkaz Synchronizovať použite pokiaľ počet snímok v animovanej sekvencii vo vnútri Movie Clipu nie je párnym násobkom počtu snímok v celkovej pohybovej sekvencii. Chytit (Snap). Prichytiť k trase pohybu - pozri pohyb po krivke.
Shape Tween (Tvarové vykreslenie) Zatiaľ čo u Motion Tweenu sme mohli pohybovať iba inštanciami rovnakých symbolov, pri Shape Tweenu je to práve naopak. Aby sme si mohli vytvoriť tento pohyb, MUSÍ počiatočná i koncová snímka obsahovať iba čistú grafiku. Vytvorenie tohto pohybu je podobné ako v predchádzajúcom prípade. Najprv vytvoríme dve kľúčové snímky (nesmú obsahovať inštancie a prvú KS roztiahneme na požadovanú veľkosť. Potom vyberieme prvú snímku a na paneli Vlastnosti zvolíme v roletovom menu Tween položku Shape.
Na paneli Vlastnosti (Properties) je možné nastaviť: Uklidnit (Ease). Tu môžete ovplyvniť priebeh rýchlosti pohybu počas prehrávania - spomaľovanie alebo zrýchľovanie. Mísit (Blend). Spôsob prekresľovanie v prechodových snímkach: - Distributive - hladšie a zaoblené tvary - Angular - jasné rohy, rovné čiary Používanie stôp tvarov Niekedy pri prekresľovaní objektu prebieha preskupovanie kriviek nevhodným spôsobom. Pri použití Shape Tweenu je možné určiť body, ktoré by si mali zodpovedať v počiatočných a koncových tvaroch. Kliknite na prvú snímku sekvencie a v menu Změnit - Tvar - Přidat pomoc ke tvaru (Modify - Shape - Add Shape Hint)
Objaví sa červené koliesko s písmenom (a-z), posuňte ho na danú krivku (musí zožltnúť). Potom vyberte poslednú snímku pohybu a posuňte všetky body do svojich nových pozícií (musia zazelenať). Bod odstránite jeho uchopením a pretiahnutím mimo pracovnú plochu.
