Prezentace se nahrává, počkejte prosím

Prezentace se nahrává, počkejte prosím

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

Podobné prezentace


Prezentace na téma: "Macromedia (Adobe) Flash Studio 8 grafika a základy ActionScriptu."— 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í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 anglickybohužel (pro někoho) je to anglicky

3 Co budeme dělat my? kreslitkreslit animovatanimovat jednoduše programovatjednoduše programovat měli bychom umět: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 spustíme to a? objeví se toto dialogové oknoobjeví se toto dialogové okno otevře existující dokument vytvoří nový dokument vytvoří nový dokument podle šablony

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

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

7 Grafika ve Flashi tvoříme vektorové obrazytvoříme vektorové obrazy –grafika je definovaná pomocí čar a výplní výhody vektorové grafikyvý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é grafikynevý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)skládá se z Obrysu (Stroke) a Výplně (Fill) obrys obrys obrys výplň výplň výplň

9 Obrys (Čára) je definována jednotlivými kotvícími body (též uzly), které jsou spojeny buď úsečkou, nebo křivkouje 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ě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čář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ábez ohledu na vzhled se vždy definována jako tenká čára a tak se chová čáru lze převést na výplňčáru lze převést na výplň

10 Výplň (Fill) je to plocha s definovanou barvouje to plocha s definovanou barvou ve Flashi může (narozdíl od např. CorelDRAW) výplň existovat nezávisle na čářeve 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.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 vrstvamivždy pracujeme s vrstvami vrstvy - průhledné fólie svrstvy - 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évrstvy jsou na sobě nezávislé Znamená to tedy, že objekty nakreslené v různých vrstvách na sebe nemají žádný vliv.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ě?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ůnikempokud 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)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 pozicivrstvy 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ěaktivní vrstva (ta, do které právě kreslíme) je zvýrazněna černě vrstvy se vytváří avrstvy 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ějnázev vrstvy lze měnit jedním kliknutím na něj vrstvu lze zneviditelnit (symbol oka) nebo zamknout (symbol zámek)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é barvybarevný č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ácepopsané 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 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: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é obrazceUchopení - objekty se budou uchopovat na již nakreslené obrazce Převést na křivku - vyhladí vybranou čáruPřevést na křivku - vyhladí vybranou čáru Převést na úsečku - zruší zakřivení vybrané čáryPř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 velikostvybraný objekt lze ručně otáčet, zešikmovat a měnit jeho velikost pole Options (volby)pole Options (volby) –Otočit –Zvětšit –Roztáhnout jednotlivé body –Zdeformovat –Zdeformovat Panel vlastností:Panel vlastností: změna velikosti, pozice na pracovní ploše, barva a obryszmě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řechodumožňuje změny výplní typu barevný přechod probereme pozdějiprobereme později

21 Čára – Line Tool - N kreslí rovné čárykreslí rovné čáry kliknout, držet, táhnout, pustitkliknout, držet, táhnout, pustit Panel vlastností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ěrstejné použití jako výběr vybírá neobdelníkové plochy – resp. jakékoliv nepravidelné plochyvybí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řeklikně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řivekumožň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řivkuklikně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 aumožň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í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ímroztá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ísmaPanel 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ý obrazeckliknutím a tažením vytvoříte daný geometrický obrazec v Panelu vlastností můžete nastavit vzhled výplně a obrysuv Panelu vlastností můžete nastavit vzhled výplně a obrysu v poli Options nastavíme zakulacení rohů u obdélníkuv poli Options nastavíme zakulacení rohů u obdélníku

26 Tužka (Pencil Tool) - Z umožňuje kreslit ručně čáryumožňuje kreslit ručně čáry Options určují vzhled čá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: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 objektyNormal = přes všechny objekty Fills = nekreslí přes čáryFills = nekreslí přes čáry Behind = nekreslí přes objektyBehind = nekreslí přes objekty Selection = kreslí jen přes předem vybranýSelection = kreslí jen přes předem vybraný objekt (pomocí nástroje "výběr" nebo "laso") Inside = kreslí jen přes jeden objekt najednouInside = kreslí jen přes jeden objekt najednou

28 Kalamář a kyblík (S, K) mění barvu výplně resp. barvu čárymě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„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í.Pokud klepnete nástrojem „kyblík“ na čarami ohraničenou plochu, vyplní se nastavenou výplní. Options:Options:

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

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

31 úkol postupně asistovaně a poté samostatně vyzkoušejte jednotlivé nástrojepostupně asistovaně a poté samostatně vyzkoušejte jednotlivé nástroje vkládejte grafiku do stejné vrstvy a poté do rozdílných vrstev sledujte rozdílyvklá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")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"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.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.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ístitpřidání bodu - kliknutím do místa, kam jej chcete umístit odstranění bodu - uchopením a přetažením "venodstraně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,...)lze místo barvy použít také rastrový obrázek (např.: GIF, JPEG,...) obrázek musí být v knihovněobrázek musí být v knihovně v panelu Color Mixer jako zvolíme jako výplň bitmapv panelu Color Mixer jako zvolíme jako výplň bitmap níže všechny rastrové obrázky obsažené v knihovně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íumožňuje měnit vlastnosti přechodových výplní Pozici, velikost a natočení přechodové a rastrové 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ě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ů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í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čkyv 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 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)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 F11knihovnu zobrazíte stiskem F11 knihovny vkládáme do animace kopie tohoto symbolu (tzv. instance)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ůexistují tři druhy symbolů Grafika (Graphic)Grafika (Graphic) Tlačítko (Button)Tlačítko (Button) Klip (Movie Clip)Klip (Movie Clip) každý typ se hodí pro jinou prácikaždý typ se hodí pro jinou práci symboly jsou ohraničené většinou modrým rámečkemsymboly jsou ohraničené většinou modrým rámečkem křížek – označuje střed souměrnostikřížek – označuje střed souměrnosti

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

42 vytvoření symbolu 1.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é 3.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ůsobyvytvoř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 textsymboly by měly být složitější – mohou obsahovat i text

44 editace symbolu dvoklikem přejdeme do režimu editace symboludvoklikem 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 symboluprá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íckaž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:jsou to tyto vlastnosti: Výška a šířka (width, height)Výška a šířka (width, height) Rotace (rotate)Rotace (rotate) Sklon (skew)Sklon (skew) Jas (brightness)Jas (brightness) Barevný odstín (tint)Barevný odstín (tint) Průhlednost (alpha)Průhlednost (alpha) volba z kontextového menu v Panelu vlastností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.grafický symbol může být složen z dalších symbolů atd. zanořenost symbolů je v podstatě neomezenázanořenost symbolů je v podstatě neomezená vlastnosti se sčítají (např. Tint, alpha)vlastnosti se sčítají (např. Tint, alpha) lze nastavit, že tvořené grafické prvky automaticky vytváří symboly – ikona v Optionslze nastavit, že tvořené grafické prvky automaticky vytváří symboly – ikona v Options

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

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

49 zarovnávání a rozmístění objektů pomocí okna Alignpomocí okna Align zobrazení pomocí Window – Align (CTRL-K)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&Transformvytvoř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&Transformměň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íčasová osa je tvořena jednotlivými snímky, které se přehrávají rychlost přehrávání lze nastavit v Panelu Vlastností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)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) neboklíč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)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 sekundyGrafika 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)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)F6 - přidat klíčový snímek (obsahuje stejnou grafiku jako předchozí kl. snímek) F7 - přidat prázdný kl. snímekF7 - 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)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 FramesSmazat 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)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).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 hovytvořte grafiku, udělejte z ní symbol typu Graphic, pojmenujte ho udělejte 5 klíčových snímkůudělejte 5 klíčových snímků do každého snímku vložte 2 instance vytvořeného symboludo 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čítkaObsahuje 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“Insert – New Symbol – typ Button a pojmenujeme „tlacitko“ objeví s následující obrazovkaobjeví s následující obrazovka

58 vytvoření tlačítka II. vytvoříme grafiku – obdélník s přechodovou výplní a textemvytvoříme grafiku – obdélník s přechodovou výplní a textem pomocí Align jejpomocí 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)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+Vklikneme 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: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:klikneme na snímek HIT a upravujeme: pomocí okna transformace zmenšíme velikost na 90%pomocí okna transformace zmenšíme velikost na 90% Vrátíme se na hlavní plochu (klikneme na Scene1Vrá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)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)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:Ve Flashi existují 2 způsoby, jak automaticky vykreslit změnu mezi dvěma klíčovými snímky: animace Pohybem (Motion Tween)animace Pohybem (Motion Tween) animace Změnou tvaru (Shape 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 symboluprová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..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ímkyumí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 pohybPrvní 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ů!!!! 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 BPokud 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)Instance symbolů ve druhém kl. snímku poté můžete upravovat (poloha, velikost, odstín, rotace, průhlednost, zkosení,... viz zde)zde

65 animace pohybem Poté klikněte pravým tlačítkem na první snímek a zvolte Create Motion Tween.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.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 MotionZde změňte položku None na Motion

66 úkol vytvářejte různé animace Pohybem podle pokynů lektora a pak samostatně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ě naopakZatí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ů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 velikostNejprve 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 Shapepoté 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:Na panelu Properties je možné nastavit: Ease - viz dříveEase - viz dříve Blend Způsob překreslování v přechodových snímcích: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é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ůsobemJistě 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.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 HintKlikně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).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).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.Bod odstraníte jeho uchopením a přetažením mimo pracovní plochu.

72 úkol vyzkoušejte použití shape hintůvyzkoušejte použití shape hintů změna písmene A v Dzměna písmene A v D změn písmene T v Izměn písmene T v I změny různých tvarů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)Pro tyto účely je ve Flashi tzv. Onion Skin (průsvitný papír) Ovládá se těmito tlačítky:Ovládá se těmito tlačítky: můžeme měnit rozsah zobrazení a typ zobrazení snímků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 MovieClipvš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 –tento symbol vytvoříme podobně jako tlačítko nebo Grafiku (INSERT – NEW SYMBOL nebo CTRL-F8) tvoříme animace, práci ukončímetvoříme animace, práci ukončíme přechodem na hlavní časovou osu v knihovně se u názvu symboluv 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 kombinovatuvedené 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 )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)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ímkumovieClip 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ý movieClipvytvoř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é traseprůvodce – objekt je animován metodou motionTween po nakreslené trase do 1. snímku umístíme symboldo 1. snímku umístíme symbol klikneme na vrstvu a vybereme volbu AddMotion Guideklikneme na vrstvu a vybereme volbu AddMotion Guide do této vrstvy nakreslíme trasu, po které chceme symbol animovatdo 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)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)provedeme animaci (pravé tl. – Create MotionTween) exportujeme (CTRL+ENTER)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í symbolMasková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)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. plochydo 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 maskavytvoří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)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)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é osyvzhledem 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é vrstvyovládací prvky na ploše (tlačítka) umisťujeme do samostatné vrstvy scripty nejlépe umisťujeme do časové osyscripty nejlépe umisťujeme do časové osy ovládací prvky pojmenujeme (dole v Property inspektoru)ovládací prvky pojmenujeme (dole v Property inspektoru) scripty jsou zakončeny středníkemscripty jsou zakončeny středníkem vetší úseky kódu (funkce) se oddělují složenými závorkamivetší ú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)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ů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ůhlednostjedná 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ůpojmenujeme MovieClip na ploše (v Property inspektoru) a zadáváme vlastnosti pomocí scriptů můžeme dynamicky a interaktivně ovlivňovat prezentace apod.můžeme dynamicky a interaktivně ovlivňovat prezentace apod. pomocí tlačítek např. můžeme posouvat objekty, rotovat, měnit průhlednostpomocí tlačítek např. můžeme posouvat objekty, rotovat, měnit průhlednost

95 vlastnosti MovieClipů


Stáhnout ppt "Macromedia (Adobe) Flash Studio 8 grafika a základy ActionScriptu."

Podobné prezentace


Reklamy Google