Macromedia Adobe Flash Studio 8 grafika a zklady

Macromedia (Adobe) Flash Studio 8 grafika a základy Action. Scriptu

Flash – k čemu to je? • profesionální nástroj pro tvorbu aplikací, interaktivních webových stránek, multimediálních prezentací – – dá se v tom vytvářet velmi hezká vektorová grafika dá se v tom jednoduše animovat a vytvářet klipy dá se v tom programovat – v podstatě cokoliv dá se to publikovat v různých formátech – od obrázků, přes swf klipy na web, avi videa nebo spustitelné soubory – exe profesionální nástroj pro tvorbu aplikací, interaktivních webových stránek, multimediálních • bohužel (pro někoho) je to anglicky

Co budeme dělat my? • kreslit • animovat • jednoduše programovat • měli bychom umět: – udělat hezký vektorový obrázek s texty, např. letáček – vytvořit prvky webové grafiky – tlačítka, animace – vytvořit jednoduchou interaktivní aplikaci – např. vlastní kalkulačku místo Windows kalkulačky

spustíme to a? • objeví se toto dialogové okno vytvoří nový dokument podle šablony otevře existující dokument vytvoří nový dokument

základní vzhled programu plovoucí nabídky: barvy zarovnávání knihovny rozbalovací nabídky panel nástrojů časová osa vrstvy panel vlastností nástrojů a objektů

Základní filosofie aneb jak se tím dělá

Grafika ve Flashi • tvoříme vektorové obrazy – grafika je definovaná pomocí čar a výplní • výhody vektorové grafiky – je datově mnohem menší – objekty nejsou rozměrově nijak limitovány (mohou být zvětšovány bez roztřepení a ztráty kvality) – výplně a čáry mohou být průsvitné, nebo vybarvené přechodovou výplní s minimálním zvětšením souboru • nevýhody vektorové grafiky – vektorová grafika se nehodí na příliš složité obrazce (velké množství barev, složitý tvar - fotky)

vektorový objekt • skládá se z Obrysu (Stroke) a Výplně (Fill) obrys výplň

Obrys (Čára) • je definována jednotlivými kotvícími body (též uzly), které jsou spojeny buď úsečkou, nebo křivkou • křivka je vždy definována tečnou v počátečním a koncovém bodě • čáře (obrysu) lze nastavit barvu, styl a tloušťku • bez ohledu na vzhled se vždy definována jako tenká čára a tak se chová • čáru lze převést na výplň

Výplň (Fill) • je to plocha s definovanou barvou • ve Flashi může (narozdíl od např. Corel. DRAW) výplň existovat nezávisle na čáře • má svoje vlastní uzly spojené přímkami a křivkami, které se chovají stejně, jako čára.

Vrstvy – co s nimi • vždy pracujeme s vrstvami • vrstvy - průhledné fólie s nakreslenými objekty, které jsou položeny na sobě a dohromady tvoří celý obrázek • vrstvy jsou na sobě nezávislé • Znamená to tedy, že objekty nakreslené v různých vrstvách na sebe nemají žádný vliv.

Vrstvy – co s nimi • co se stane s objekty ve stejné vrstvě? • pokud se ve Flashi nějaké objekty překrývají, automaticky se rozdělí (nebo sloučí – pokud mají stejné vlastnosti) na díly určené jejím průnikem

Vrstvy – tvorba • vrstva na nejvyšší úrovni je nahoře (Layer 3) a na nejnižší dole (Layer 1) • vrstvy lze přesouvat uchopením a tažením na požadovanou pozici • aktivní vrstva (ta, do které právě kreslíme) je zvýrazněna černě • vrstvy se vytváří a odstraňují následujícími tlačítky:

Vrstvy – tipy a rady • název vrstvy lze měnit jedním kliknutím na něj • vrstvu lze zneviditelnit (symbol oka) nebo zamknout (symbol zámek) • barevný čtvereček vpravo zobrazuje barvu, která reprezentuje danou vrstvu –kliknutím do prostoru čtverečku budou objekty v této vrstvě zobrazeny jen v obrysech dané barvy • popsané jevy neovlivňují konečnou podobu animace – zvyšují přehlednost práce

Panel nástrojů a panel vlastností tzn. jak se s kterým nástrojem pracuje, jaké má možnosti a volby

Základní panel nástrojů šipka (Výběr) - Selection Tool -V Tvarovací šipka (Podvýběr) Subselection Tool - A Volná transformace – Free Transform Tool - Q Transformace výplně – Gradient Transform Tool - F Čára – Line Tool - N Laso – Lasso Tool - L Pera – Pen Tool - P Text – Text Tool - T Elipsa – Oval Tool - O Obdélník – Rectangle Tool - R Tužka – Pencil Tool - Y Štětec – Brush Tool - B Kalamář – Ink Bottle Tool - S Kyblík – Paint Bucket Tool - K Ruka – Hand Tool - O Guma – Eraser Tool - E Elipsa – Oval Tool - O Lupa – Zoom Tool – M, Z Vlastnosti Obrysu a Čáry Magnet

Výběr - Selection Tool - V • Slouží k výběru objektu. Jedním kliknutím vyberete jeden objekt (čára, výplň), tažením můžete vybírat více objektů (nebo jen jejich části). V poli "Options" můžete nastavit: • Uchopení - objekty se budou uchopovat na již nakreslené obrazce • Převést na křivku - vyhladí vybranou čáru • Převést na úsečku - zruší zakřivení vybrané čáry

Podvýběr - Subselection - A • slouží k editaci jednotlivých uzlů čáry (nebo obrysu výplně) • zobrazení uzlů provedete jedním kliknutím na objekt • vyberete uzel (zde zelený obdélníček) a následně zmáčknete "ALT„ • táhnete myší (+LT) měníte (vytváříte) zakřivení čáry

Transformace – Transform - Q • vybraný objekt lze ručně otáčet, zešikmovat a měnit jeho velikost • pole Options (volby) – – Otočit Zvětšit Roztáhnout jednotlivé body Zdeformovat • Panel vlastností: • změna velikosti, pozice na pracovní ploše, barva a obrys

Transformace výplně – Gradient Transform Tool - F • umožňuje změny výplní typu barevný přechod • probereme později

Čára – Line Tool - N • kreslí rovné čáry • kliknout, držet, táhnout, pustit • Panel vlastností – tloušťka a styl obrysu – zakončení – uživatelské nastavení typu čáry – další volby

Laso – Lasso Tool - L • stejné použití jako výběr • vybírá neobdelníkové plochy – resp. jakékoliv nepravidelné plochy • klikněte a pohybem myši ohraničte plochu (objekt), kterou chcete vybrat. Puštěním se plocha sama uzavře

Pero – Pen Tool - P • umožňuje kreslení křivek v tzv. Bezierově režimu – pomocí uzlů a křivek • klikněte a táhněte se zmáčknutým LT – vytvoříte uzel s tečnou, přejeďte kurzorem n jiné místo, klikněte a táhněte – dokončíte křivku • umožňuje také přidávat a ubírat uzly Panel Vlastností: stejné jako v režimu čára

Text – Text Tool - T • jedním kliknutím umístíte kurzor do stránky a napíšete text – řetězcový text bez zalamování • roztáhnetě textovou oblast do určité šířky – odstavcový text se zalamováním • Panel Vlastností: typ textu, barva, typ písma a jeho velikost, zarovnávání odstavce, vyhlazování písma, pozice a velikost textového okna, proložení znaků, tok písma

Ovál a Obdélník (O, R) • kliknutím a tažením vytvoříte daný geometrický obrazec • v Panelu vlastností můžete nastavit vzhled výplně a obrysu • v poli Options nastavíme zakulacení rohů u obdélníku

Tužka (Pencil Tool) - Z • umožňuje kreslit ručně čáry • Options určují vzhled čáry: – Straighten - nakreslená čára se změní v rovné úsečky – Smooth - čára bude mít podobu hladké křivky – Ink - čára zůstane taková, jakou jste ji nakreslili

Štětec (Brush Tool) • kreslení výplní (nejsou ohraničeny čarami). Options: – Tloušťku stopy (Brush Size) – Typ stopy (Brush Shape) – Proměnlivou tloušťku stopy (Use Pressure) - jen pokud máte tablet citlivý na tlak. – Kam se barva má nanést (Brush Mode) • • Normal = přes všechny objekty Fills = nekreslí přes čáry Behind = nekreslí přes objekty Selection = kreslí jen přes předem vybraný objekt (pomocí nástroje "výběr" nebo "laso") • Inside = kreslí jen přes jeden objekt najednou

Kalamář a kyblík (S, K) • mění barvu výplně resp. barvu čáry • vybráním tohoto nástroje a klepnutím na objekt se tento přebarví na nastavenou barvu v poli "colors„ • Pokud klepnete nástrojem „kyblík“ na čarami ohraničenou plochu, vyplní se nastavenou výplní. • Options:

Guma – Eraser Tool - E • Maže nakreslené objekty • Options: • • • Normal = no comment Fills = maže jen výplně Lines = jen čáry Selected fills = jen předem vybrané výplně Inside = maže jen jeden objekt najednou

další nástroje • • • Ruka - umožňuje posuv obrazu Lupa – logické Kapátko – nabírá barvu obrysu nebo výplně Obrys a výplně Options

úkol • postupně asistovaně a poté samostatně vyzkoušejte jednotlivé nástroje • vkládejte grafiku do stejné vrstvy a poté do rozdílných vrstev sledujte rozdíly

Barva • barvu výplně a čáry můžeme definovat ještě před nakreslením objektu, nebo už nakreslenému (musíme ho ale nejprve vybrat nástrojem "výběr" nebo "laso") • klik na panel "colors" – – – vybrat ze seznamu hexadecimální (#D 4 D 0 C 8) tlačítko vpravo nahoře a vybrat barvu z klasické palety windows

Barevný přechod • K vytváření přechodů výplní a obrysů slouží panel s názvem "Color Mixer". Zobrazíte ho volbou v menu Window - Color Mixer.

Barevný přechod • Pokud v rozbalovacím seznamu zvolíte Linear = lineární přechod nebo Radial = kruhový přechod, objeví se následující lišta, na které je možno definovat podobu barevného přechodu. • přidání bodu - kliknutím do místa, kam jej chcete umístit • odstranění bodu - uchopením a přetažením "ven

Rastrová výplň • lze místo barvy použít také rastrový obrázek (např. : GIF, JPEG, . . . ) • obrázek musí být v knihovně • v panelu Color Mixer jako zvolíme jako výplň bitmap • níže všechny rastrové obrázky obsažené v knihovně

Transformace výplně - F • umožňuje měnit vlastnosti přechodových výplní • Pozici, velikost a natočení přechodové a rastrové výplně

úkol • měňte u různé grafiky barvu výplně a obrysu, používejte přechodové výplně • použijte nástroj transformace k vytváření různých přechodů • z internetu stáhněte nějaký obrázek, vytvořte grafiku s tímto obrázkem na pozadí • v souboru 1. lekce. fla jsou 4 obrázky – použijte je jako vzor k vytvoření kola, loga, tlačítka a zákazové značky

Knihovna a symboly tvorba grafických symbolů a jejich správa v kihovně

co to je symbol • Každý nakreslený objekt (skupina objektů) lze ve Flashi převést na tzv. symbol a umístit jej do knihovny (library) • knihovnu zobrazíte stiskem F 11 • knihovny vkládáme do animace kopie tohoto symbolu (tzv. instance) – na co je tato sranda vlastně dobrá? – je totiž jedno, kolik instancí symbolu vložíte do animace - symbol bude uložen jednou.

druhy symbolů • • • existují tři druhy symbolů Grafika (Graphic) Tlačítko (Button) Klip (Movie Clip) každý typ se hodí pro jinou práci symboly jsou ohraničené většinou modrým rámečkem • křížek – označuje střed souměrnosti

symbol typu Graphic • nejjednodušší symbol • může obsahovat pouze nehybnou grafiku • vlevo vybraná grafika před vytvořením symbolu • vpravo vybraná grafika převedená na symbol typu Graphic

vytvoření symbolu 1. kliknutím na záložku Insert – Create New. Symbol – vybereme typ Graphic, pojmenujeme a jsme v režimu návrhu nového symbolu 2. CTRL+F 8 to samé 3. máme už hotovou grafiku – Vybereme dvojklikem nebo přetažením – kontextová nabídka (klik na pravé tlačítko)

úkol • vytvořte 3 symboly typu Graphic všemi výše popsanými způsoby • symboly by měly být složitější – mohou obsahovat i text

editace symbolu • dvoklikem přejdeme do režimu editace symbolu • práce uvnitř symbolu je dobře poznat podle panelu vrstev – vedle názvu scény (standardně Scene 1) se objeví ikona symbolu typu Graphic a název symbolu

Vlastnosti instancí symbolů • každá kopie symbolu na scén (instance) může mít jiné vlsatnosti – přesto nezabírá v paměti ani ň navíc • jsou to tyto vlastnosti: • • • Výška a šířka (width, height) Rotace (rotate) Sklon (skew) Jas (brightness) Barevný odstín (tint) Průhlednost (alpha) • volba z kontextového menu v Panelu vlastností

…a ještě symboly • grafický symbol může být složen z dalších symbolů atd. • zanořenost symbolů je v podstatě neomezená • vlastnosti se sčítají (např. Tint, alpha) • lze nastavit, že tvořené grafické prvky automaticky vytváří symboly – ikona v Options

úkol • vytvořte několik (3) symboly do knihovny • přeneste na pracovní plochu 3 instance od každého symbolu • měňte instancím různé vlastnosti na Panelu Vlastností

transformace objektů • transformujeme ručně pomocí nástroje Free Transform Tool • přesně pomocí okna Transform • okno zobrazíme pomocí Window – Transform (CTRL-T)

zarovnávání a rozmístění objektů • pomocí okna Align • zobrazení pomocí Window – Align (CTRL-K)

úkol • vytvořte symbol typu Graphic, na plochu umístěte několik jeho instancí a rozmístěte je různě po ploše pomocí okna Align&Transform • měňte velikost a jiné parametry pomocí okna Align&Transform

časová osa • časová osa je tvořena jednotlivými snímky, které se přehrávají • rychlost přehrávání lze nastavit v Panelu Vlastností

druhy snímků • základním stavebním kamenem je klíčový snímek (keyframe) • klíčový snímek může být buď prázdný (není v něm nic nakresleno) nebo plný (obsahuje nějakou grafiku)

klíčový snímek • je více než patrné, jak vypadá prázdný a plný klíčový snímek. Klíčový snímek může být široký jen jako jeden snímek (1. a 3. vrstva shora), nebo může být roztažen do libovolné vzdálenosti na časové ose (2. a 4. vrstva shora na obrázku) • Grafika ve 3. vrstvě shora tedy bude vidět jen 1/12 sekundy, zatímco grafiku ve 4. vrstvě uvidíme 10/12 sekundy

Přidávání a mazání snímků • • F 5 - přidat normální snímek (zvětšit klíčový snímek) F 6 - přidat klíčový snímek (obsahuje stejnou grafiku jako předchozí kl. snímek) F 7 - přidat prázdný kl. snímek kopírování celého snímku (včetně rozložení a případných skriptů) – CTRL+ALT+C (při vložení V) Smazat snímky můžete jejich vybráním, kliknutím pravým tlačítkem a zvolením Remove Frames Vybráním jednoho nebo více snímků a jejich přetažení na novou pozici je můžete přesunout na libovolné místo v časové ose (i do jiné vrstvy) Pozor - výběrem snímku a stiskem DEL smažete jen obsah snímku (platí jen ve verzi MX).

úkol • vytvořte grafiku, udělejte z ní symbol typu Graphic, pojmenujte ho • udělejte 5 klíčových snímků • do každého snímku vložte 2 instance vytvořeného symbolu

symbol typu Button • Obsahuje 4 snímky (Up, Over, Down, Hit), které reprezentují přirozené stavy tlačítka – Up - snímek, který je vidět normálně – Over - snímek, který se zobrazí při přejetí myši nad tlačítkem – Down - snímek, který se zobrazí po kliknutí na tlačítko – Hit - tento snímek není nikdy viditelný - určuje oblast, která má být citlivá na kliknutí (nemusí se shodovat s předchozími objekty)

vytvoření tlačítka I. • Insert – New Symbol – typ Button a pojmenujeme „tlacitko“ • objeví s následující obrazovka

vytvoření tlačítka II. • vytvoříme grafiku – obdélník s přechodovou výplní a textem • pomocí Align jej zarovnáme nahoru doleva

vytvoření tlačítka III. • vybereme objekt (přetažením myší) a zkopírujeme snímek do schránky (CTRL+ALT+C) • klikneme postupně na všechny další snímky (OVER, DOWN, HIT) a překopírujeme pomocí CTRL+ALT+V • klikneme na snímek OVER a upravíme přechodovou výplň na Radial:

vytvoření tlačítka IV. • • klikneme na snímek HIT a upravujeme: pomocí okna transformace zmenšíme velikost na 90% • Vrátíme se na hlavní plochu (klikneme na Scene 1 • Zabrazíme knihovnu (F 11), přetáhneme instanci na plochu a zapneme funkčnost tlačítek – CTRL+ALT+B (nebo okno Control – enable Simple Buttons)

úkol • vytvořte samostaně ještě 3 další jiná tlačítka s jiným vzhledem a úpravami (např. pokračujte s tlačítkem, jehož grafický návrh jste minule vytvořili)

animace • Ve Flashi existují 2 způsoby, jak automaticky vykreslit změnu mezi dvěma klíčovými snímky: • animace Pohybem (Motion Tween) • animace Změnou tvaru (Shape Tween)

animace Pohybem • provádí se mezi dvěma klíčovými snímky, do kterých se umístí instance jednoho symbolu • ve druhém klíčovém snímku měníme atributy instance – velikost, průhlednost, pozice, atd. .

animace pohybem • umístíme za sebe 2 klíčové snímky • První klíčový snímek uděláme delší. Čím je první kl. snímek delší, tím pomalejší a plynulejší (více snímků) bude pohyb • • !! Pozor, je nutné, aby první i druhý klíčový snímek obsahoval instance stejných symbolů!! • Pokud tedy dám do prvního kl. snímku instance symbolů A a B, musím dát do druhého zase A a B • Instance symbolů ve druhém kl. snímku poté můžete upravovat (poloha, velikost, odstín, rotace, průhlednost, zkosení, . . . viz zde)

animace pohybem • Poté klikněte pravým tlačítkem na první snímek a zvolte Create Motion Tween. • Jiná možnost, jak to provést je vybrat první snímek a na panelu Properties se objeví roletové menu Tween. • Zde změňte položku None na Motion

úkol • vytvářejte různé animace Pohybem podle pokynů lektora a pak samostatně

animace Změnou tvaru • Zatímco u Motion Tweenu jsme mohli pohybovat pouze instancemi stejných symbolů, u Shape Tweenu je to právě naopak • počáteční i koncový snímek MUSÍ obsahovat pouze čistou grafiku – nepřevedenou do symbolů

animace Změnou tvaru • Nejprve vytvoříme 2 klíčové snímky (nesmí obsahovat instance) a první roztáhneme na požadovanou velikost • poté vybereme první snímek a na panelu Properties zvolíme v roletovém menu Tween položku Shape • Na panelu Properties je možné nastavit: • Ease - viz dříve • Blend Způsob překreslování v přechodových snímcích: – Distributive - hladší a zaoblené tvary – Angular - jasné rohy, rovné čáry

úkol • vyzkoušejte různé animace změnou tvaru, včetně změny písmen jednoho v druhé

Používání stop tvarů (Shape Hints) • Jistě jste se setkali s problémem, že při překreslování objektu probíhá přeskupování křivek nevhodným způsobem • Při použití Shape Tweenu je možné určit body, které by měly sobě odpovídat v počátečních a koncových tvarech.

Shape Hints • Klikněte na první snímek sekvence a v menu Modify vyberte Shape - Add Shape Hint • Objeví se vám červené kolečko s písmenem (a-z), posuňte ho na danou křivku (musí zežloutnout). • Poté vyberte poslední snímek pohybu a posuňte všechny body do svých pozic (musí zezelenat). • Bod odstraníte jeho uchopením a přetažením mimo pracovní plochu.

úkol • • vyzkoušejte použití shape hintů změna písmene A v D změn písmene T v I změny různých tvarů

zobrazení více snímků animace • Pro tyto účely je ve Flashi tzv. Onion Skin (průsvitný papír) • Ovládá se těmito tlačítky: • můžeme měnit rozsah zobrazení a typ zobrazení snímků

symbol typu Movie. Clip • všechny animace, které provádíme na hlavní časové ose můžeme provádět v rámci symbolu s názvem Movie. Clip • tento symbol vytvoříme podobně jako tlačítko nebo Grafiku (INSERT – NEW SYMBOL nebo CTRL-F 8) • tvoříme animace, práci ukončíme přechodem na hlavní časovou osu • v knihovně se u názvu symbolu objeví šipka, kterou je možno animaci zobrazit

kombinace symbolů • uvedené typy symbolů, tj. Graphic, Movie. Clip a Button může různě hierarchicky kombinovat • např. tlačítku můžeme pod různé stavy (UP, OVER, DOWN) přiřadit různé Movie. Clipyanimace a tak zvýšit jeho dynamičnost a atraktivitu (nepřehnat )

Úkol • vytvořte animované hodiny (animace ručiček) • movie. Clip ciferníku animujte jako kyvadlo (pohyb do stran) v rámci jiného movie. Clipu, který umístíte do prvního klíčového snímku • vytvořte tlačítko, které bude mít ve snímku OVER animovaný movie. Clip

Motion Guide • průvodce – objekt je animován metodou motion. Tween po nakreslené trase • do 1. snímku umístíme symbol • klikneme na vrstvu a vybereme volbu Add. Motion Guide • do této vrstvy nakreslíme trasu, po které chceme symbol animovat

Motion Guide • na dalším klíčovém snímku přesuneme animovaný symbol na konec průvodce (sledujeme přitom přichytávání symbolu k průvodci) • provedeme animaci (pravé tl. – Create Motion. Tween) • exportujeme (CTRL+ENTER)

Maskování • Maskování je metoda, pomocí které z nějakého symbolu vytvoříme průhled na vrstvu umístěnou pod vrstvou , ve které je maskovací symbol • maskovací symbol můžeme libovolně animovat (metodou Motion. Tween)

Maskování - příklad • do vrstvy obrázek umístíme libovolnou fotografii (např. z internetu) a upravíme její velikost tak, aby odpovídala velikosti prac. plochy

Maskování • vytvoříme novou vrstvu nad vrstvou obrázek, kterou pojmenujeme maska • vytvoříme symbol (např. čtverec), který animujeme (např. čtverec přejede v 60 snímcích v pravého horního rohu do levého dolního) • této vrstvě nastavíme (pravé tlačítko – Mask) vlastnost Mask a vyexportujeme (CTRL+ENTER)

Základy Action Scriptu ovládání časové osy pomocí scriptů

Umístění scriptů • vzhledem k evoluci systému (Adobe Flash CS 2) se skripty zásadně umísťují do snímků časové osy • ovládací prvky na ploše (tlačítka) umisťujeme do samostatné vrstvy • scripty nejlépe umisťujeme do časové osy • ovládací prvky pojmenujeme (dole v Property inspektoru) • scripty jsou zakončeny středníkem • vetší úseky kódu (funkce) se oddělují složenými závorkami

script na ovládání časové osy • struktura scriptu: vzad. on. Release = function () Þ po uvolnění tlačítka s názvem „vzad“ se provede funkce Þ next. Frame() – přechod na další snímek Þ prev. Frame() – přechod na předchozí snímek Þ goto. And. Stop (10) – přejde a zastaví se na snímku 10

script na ovládání časové osy • goto. And. Stop (‚konec‘) – přejde na snímek pojmenovaný v Property inspektoru ‚konec‘ (u pojmenovaného snímku se objeví na časové ose praporek)

stavy tlačítka, scripty pro časovou osu

vlastnosti Movie. Clipů • všechny vlastnosti, které jsme nastavovali v Property inspektoru, pomocí panelu Transform a Align lze nastavit pomocí scriptů • jedná se především o tyto vlastnosti – velikost, rotace, pozice x a y souřadnice, x-škála a y-škála (v procentech), průhlednost

vlastnosti Movie. Clipů • pojmenujeme Movie. Clip na ploše (v Property inspektoru) a zadáváme vlastnosti pomocí scriptů • můžeme dynamicky a interaktivně ovlivňovat prezentace apod. • pomocí tlačítek např. můžeme posouvat objekty, rotovat, měnit průhlednost

vlastnosti Movie. Clipů