Macromedia (Adobe) Flash Studio 8

Prezentace na téma: "Macromedia (Adobe) Flash Studio 8"— Transkript prezentace:

1 Macromedia (Adobe) Flash Studio 8
grafika a základy ActionScriptu

2 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

3 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

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

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

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

7 Grafika ve Flashi tvoříme vektorové obrazy výhody vektorové grafiky
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)

8 vektorový objekt skládá se z Obrysu (Stroke) a Výplně (Fill) obrys

9 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ň

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

11 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.

12 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

13 Vrstvy – tvorba vrstva na nejvyšší úrovni je nahoře (Layer 3) a na nejnižší dole (Layer1) 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ásledu- jícími tlačítky:

14 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

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

16 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

17 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

18 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

19 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

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

21 Čá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

22 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

23 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

24 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

25 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

26 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

27 Š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

28 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:

29 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

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

31 ú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

32 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í (#D4D0C8) tlačítko vpravo nahoře a vybrat barvu z klasické palety windows

33 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.

34 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

35 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ě

36 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ě

37 ú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

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

39 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 F11 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 jen jednou.

40 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

41 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

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

43 ú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

44 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

45 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í

46 …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

47 ú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í

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

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

50 ú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

51 č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í

52 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)

53 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

54 Přidávání a mazání snímků
F5 - přidat normální snímek (zvětšit klíčový snímek) F6 - přidat klíčový snímek (obsahuje stejnou grafiku jako předchozí kl. snímek) F7 - 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).

55 ú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

56 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)

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

58 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

59 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:

60 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 Scene1 Zabrazíme knihovnu (F11), přetáhneme instanci na plochu a zapneme funkčnost tlačítek – CTRL+ALT+B (nebo okno Control – enable Simple Buttons)

61 ú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)

62 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)

63 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..

64 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)

65 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

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

67 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ů

68 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

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

70 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.

71 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.

72 ú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ů

73 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ů

74 symbol typu MovieClip všechny animace, které provádíme na hlavní časové ose můžeme provádět v rámci symbolu s názvem MovieClip tento symbol vytvoříme podobně jako tlačítko nebo Grafiku (INSERT – NEW SYMBOL nebo CTRL-F8) 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

75 kombinace symbolů uvedené typy symbolů, tj. Graphic, MovieClip 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é MovieClipy-animace a tak zvýšit jeho dynamičnost a atraktivitu (nepřehnat )

76 Úkol vytvořte animované hodiny (animace ručiček)
movieClip ciferníku animujte jako kyvadlo (pohyb do stran) v rámci jiného movieClipu, 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ý movieClip

77

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

79

80 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 MotionTween) exportujeme (CTRL+ENTER)

81

82 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 MotionTween)

83 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

84

85 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)

86

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

88 Umístění scriptů vzhledem k evoluci systému (Adobe Flash CS2) 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

89

90 script na ovládání časové osy
struktura scriptu: vzad.onRelease = function () po uvolnění tlačítka s názvem „vzad“ se provede funkce nextFrame() – přechod na další snímek prevFrame() – přechod na předchozí snímek gotoAndStop (10) – přejde a zastaví se na snímku 10

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

92 stavy tlačítka, scripty pro časovou osu

93 vlastnosti MovieClipů
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

94 vlastnosti MovieClipů
pojmenujeme MovieClip 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

95 vlastnosti MovieClipů