Tento projekt byl spolufinancován Evropskou unií a českým státním rozpočtem

ZONER GIF ANIMÁTOR A JEHO UPLATNĚNÍ VE VÝUCE URČENO PRO DALŠÍ VZDĚLÁVÁNÍ PEDAGOGICKÝCH PRACOVNÍKŮ

ANNA MARTINKOVÁ

ESF PROJEKT OP RLZ OPATŘENÍ 3.2 ČÍSLO PROJEKTU CZ.04.1.03/3.215.1/0104 NÁVRH A REALIZACE MODULOVÉHO SYSTÉMU DALŠÍHO VZDĚLÁVÁNÍ UČITELŮ V MORAVSKOSLEZSKÉM KRAJI

OSTRAVA 2006

Tento projekt byl spolufinancován Evropskou unií a českým státním rozpočtem.

Recenzenti: Mgr. Jana Krupová Ing. Magdalena Chmelařová, Ph.D.

Název: Autor: Vydání: Počet stran:

Zoner GIF Animátor a jeho uplatnění ve výuce Mgr. Anna Martinková první, 2006 68

Studijní materiály pro distanční kurz: Zoner GIF Animátor. Jazyková korektura nebyla provedena, za jazykovou stránku odpovídá autor. Určeno pro další vzdělávání pedagogických pracovníků.

© Mgr. Anna Martinková © Ostravská univerzita v Ostravě

2

Obsah: ÚVODNÍ SLOVO

5

1 SNÍMEK POMOCÍ MALOVÁNÍ

7

1.1 RASTROVÁ GRAFIKA A JEJÍ SROVNÁNÍ S VEKTOROVOU 1.2 JEDNODUCHÝ OBRÁZEK V MALOVÁNÍ 1.3 UKLÁDÁNÍ OBRÁZKU V MALOVÁNÍ 1.4 POKRAČOVÁNÍ S DRUHÝM SNÍMKEM SHRNUTÍ 1. KAPITOLY 1.5 KORESPONDENČNÍ ÚKOL Č. 1

8 9 14 14 16 18

2 SNÍMEK POMOCÍ ZONER CALLISTA

19

2.1 JEDNODUCHÝ OBRÁZEK V ZONER CALLISTU 2.2 UKLÁDÁNÍ OBRÁZKU V ZONER CALLISTU 2.3 POKRAČOVÁNÍ S DALŠÍMI SNÍMKY SHRNUTÍ 2. KAPITOLY 2.4 KORESPONDENČNÍ ÚKOL Č. 2

20 23 24 25 27

3 VKLÁDÁNÍ SNÍMKŮ DO GIF ANIMÁTORU

28

3.1 SNÍMKY Z MALOVÁNÍ 3.2 UKLÁDÁNÍ HOTOVÉ ANIMACE 3.3 SNÍMKY ZE ZONER CALLISTA SHRNUTÍ 3. KAPITOLY 3.4 KORESPONDENČNÍ ÚKOL Č. 3

29 31 32 33 35

4 GIF ANIMÁTOR A JEHO MOŽNOSTI

36

4.1 RÁMEC 4.2 ANIMACE 4.3 VKLÁDÁNÍ TEXTU – KOMENTÁŘE DO ANIMACE 4.4 PŘEHRÁVÁNÍ ANIMACE 4.5 OSTATNÍ NASTAVENÍ SHRNUTÍ 4. KAPITOLY

37 41 41 44 44 45

5 SHRNUTÍ PRÁCE A DALŠÍ PŘÍKLADY

47

5.1 UKLÁDÁNÍ V MALOVÁNÍ, POSTUPY PRÁCE… 5.2 UKLÁDÁNÍ V ZONER CALLISTU, POSTUPY PRÁCE... 5.3 UKLÁDÁNÍ ANIMACE V GIF ANIMÁTORU SHRNUTÍ 5. KAPITOLY

47 49 51 52

6 UPLATNĚNÍ ANIMACÍ VE VÝUCE

53

6.1 MOŽNOSTI VYUŽITÍ ANIMACÍ VE VÝUCE 6.2 PRACOVNÍ LISTY SHRNUTÍ 6. KAPITOLY 6.3 KORESPONDENČNÍ ÚKOL Č. 4

53 57 63 63

3

7 PROHLÍŽENÍ SOUBORŮ ANIMACÍ

64

ZÁVĚR POUŽITÁ LITERATURA, INTERNET, OSTATNÍ MATERIÁLY:

67 68

4

Úvodní slovo Tento text je určen těm, kteří by se chtěli naučit pracovat s grafickým programem Zoner GIF Animátorem. Program se prodává v sadě s hlavním programem Zoner Callisto 4 (a vyšší verze). V této sadě je zároveň Zoner Media Explorer 4, vyšší verze změnila svůj název na Zoner Photo Studio 8 (dříve verze 7), je určen pro práci s obrázky (vyšší verze pro úpravu digitální fotografie), zejména jejich prohlížení, pokud jsme je umístili do složek a potřebujeme si je prohlédnout, vyhledat či přetáhnout do jiné aplikace, např. Wordu. Blízkým pomocníkem je pak Zoner Viewer, který umožňuje obrázek prohlédnout v jeho plné velikosti. Hlavním cílem tohoto textu je naučit se pracovat s tou součástí sady Zoner Callista, která dokáže z předem vytvořených statických obrázků sestavit animaci. Tím je právě Zoner GIF Animátor 4 (a vyšší verze 5). K tomu, abychom s tímto programem mohli pracovat, potřebujeme mít nejprve vytvořené obrázky ve formátu GIF. Respektive sadu obrázků, tak jak je známe z kreslených pohádek, kdy například postavička v chůzi je sestavena z několika jednotlivých statických obrázků, které znázorňují postupné kroky chůze. Tyto obrázky se vloží do Zoner GIF Animátoru a pomocí různých nástrojů se upraví jejich časování, velikost, počet opakování apod. Po těchto úpravách se v Zoner GIF Animátoru animace spustí pomocí prohlížeče, jednoduše řečeno poskládají se jednotlivé statické obrázky na sebe a ty se pak spustí v prohlížeči a lidské oko to zaznamená jako pohyb. Doladí se ještě další úpravy animace a uloží. Obrázky, které budou určeny pro vložení do Zoner GIF Animátoru, se v tomto textu vytvářejí jak pomocí rastrové grafiky tak vektorové grafiky a obojí ukládány ve formátu GIF. Pro rastrovou grafiku je využita snadno dostupná aplikace Malování, která je součástí Příslušenství v nabídce Start operačního systému Windows. Pro vektorovou grafiku je využito samozřejmě Zoner Callista. Tento distanční text začíná Malováním, pokračuje Zoner Callistem, Zoner GIF Animátorem, uplatněním ve výuce a poslední částí textu, který vychází ze sady programů Zoner je prohlížeč vytvořených souborů tj. Zoner Media Explorer či nová verze pod názvem Zoner Photo Studio 8. V závěru distančního textu jsou uvedeny možnosti využití animací ve výuce, na webových prezentacích apod. V textu budete občas přeskakovat dle potřeb na jiné kapitoly a opět se vracet zpět, doporučuji využít záložku Zobrazit / Rozvržení dokumentu. V levém sloupci vedle dokumentu se objeví Obsah a kliknutím na vybrané kapitoly můžete procházet dokumentem podle svých potřeb. Přeji Vám mnoho úspěchů a radost z nově získaných zkušeností a výsledků vlastní tvořivosti se Zoner GIF Animátorem. Autorka

5

6

1 SNÍMEK POMOCÍ MALOVÁNÍ V této kapitole se dozvíte: • o rozdílnosti rastrové a vektorové grafiky • jak vytvořit obrázek v aplikaci Malování, který bude sloužit jako první snímek pro budoucí animaci v Zoner GIF Animátoru • jak vytvořit jednoduše druhý snímek pomocí barevných změn toho prvního • o ukládání těchto snímků do formátu GIF Budete umět: • vytvořit obrázek v aplikaci Malování s využitím postupů, které práci zjednoduší • pracovat v rastrové grafice • rozlišovat způsob práce v rastrové a vektorové grafice Klíčová slova této kapitoly: • rastrová a vektorová grafika, rastr, pixel, rastrová mřížka, nástroje Malování, transparentní výběr, kopírování objektů pomocí klávesy CTRL, klávesa Shift Čas potřebný k prostudování kapitoly: • 2 hodiny Průvodce studiem: Na začátku práce si nejprve ozřejmíme v úvodní kapitole pojem rastrová grafika, kterou aplikace Malování používá, abychom pochopili rozdíl této grafiky proti vektorové, kterou budeme využívat později v Zoner Callistu. Je to důležité zejména proto, abychom nebyli překvapeni rozlišným způsobem práce, který vychází už z principu těchto rozdílných grafik. Poté začneme vytvářením jednoduchého obrázku v Malování a tím bude vánoční stromek. Zvolila jsem toto téma, protože je snadné jej vytvořit a animace vypadá efektně. K tomu, abychom vytvořili svou první animaci nám postačí dva snímky obrázků. V této kapitole si vytvoříme snímek „s1“ s podrobnými návody a postupy, které nám pomohou lépe si osvojit práci v aplikaci Malování. Druhý snímek „s2“ bude jen snadnou úpravou toho prvního. Jste-li zkušený uživatel aplikace Malování, můžete směle přeskočit tuto kapitolu 1.2.

7

1.1 Rastrová grafika a její srovnání s vektorovou Spoustu grafických programů se dívá na obraz jako na systém malých barevných plošek. Takto se vytvářejí mozaiky, obdobně pracuje malíř na svém plátně a na stejném principu je založena například fotografie. Program Malování, který je součástí Příslušenství v nabídce Start / Programy operačního systému Windows, pracuje také na stejném principu, kdy obraz je rozdělen na pravidelnou mřížku, které říkáme rastr (rastrová mřížka). Barvou vyplněné malé (dále nedělitelné) plošce v této mřížce říkáme pixel. Nakreslíme-li tedy v rastrové grafice úsečku, ve skutečnosti je to velké množství vyplněných jednotlivých buněk v rastrové mřížce. Rastrová grafika je proto náročná na paměť, vezmeme-li, kolik pixelů spotřebujeme na vykreslení úsečky. Formát BMP, který Malování používá, se proto často převádí (komprimace obrázků) do jiných formátů, které neukládají každý bod z rastrové mřížky nebo v takové intenzitě. My budeme používat formát GIF, se kterým pracuje Zoner GIF Animátor, jak již napovídá sám název této aplikace. S ukládáním obrázků se seznámíme později, nyní zpět k rastrové grafice, jak se liší od vektorové, kterou budeme používat později v Zoner Callistu. Zkusíme si to na praktickém příkladu. Otevřete Malování pomocí nabídky Start / Programy / Příslušenství. Nakreslete na kreslící plátno úsečku (pomocí nástroje úsečky) v jiném sklonu než vodorovném či svislém. Pomocí nástroje lupy se přesvědčte, že úsečka je opravdu složená z velkého množství malých plošek. Nyní kousek úsečky smažte pomocí nástroje gumy. Kdybyste totéž chtěli zkusit v Zoner Callistu, celý princip práce bude jiný, neboť se jedná o grafiku vektorovou. Vektorová grafika nemá žádnou rastrovou mřížku ani žádné plošky, které jsou vykreslovány barvou a tvoří tak množství pixelů. Vektorová grafika svým principem připomíná spíše geometrické vyjádření, například bod je vyjádřen svými souřadnicemi, úsečka svými dvěma krajními body, mnohostěn je dán množinou svých stěn apod. Ukážeme si nyní, jaký dopad mají tyto dva rozdílné typy grafik (rastrové a vektorové) na naši práci. Nakreslíte-li v rastrové grafice (v Malování) úsečku a rozhodnete se zkrátit její délku, jednoduše použijete nástroje gumy a kousek úsečky smažete. Ve skutečnosti jste smazali část vykreslených bodů v rastrové mřížce. Kdežto ve vektorové grafice (Zoner Callisto) nakreslená úsečka (reprezentovaná svými dvěma krajními body) nese v sobě informaci o své délce, tloušťce, barvě... Chcete-li jakýkoliv její původní parametr změnit, například délku, postačí uchopit pomocí levého tlačítka myši krajní bod úsečky a protáhnout ji do větší nebo naopak zkrátit do menší délky.

8

Nástroj gumy tedy v Zoner Callistu nenajdete. Snadno změníme i barvu či tloušťku úsečky. Myslím, že pro začátek práce postačí, když si tento fakt rozdílnosti rastrové a vektorové grafiky uvědomíme. Pro vytváření animací je vhodné používat oba grafické programy, protože některé animované obrázky je snadnější vytvořit v Malování a jindy se bez Zoner Callista neobejdeme, protože Malování je opravdu velmi jednoduchý program. Použitá literatura: „Základy počítačovej grafiky“ – Mgr. Alexej Kolcun, Csc. http://www.ugn.cas.cz/~kolcun/pogza/pgz.pdf

1.2 Jednoduchý obrázek v Malování Otevřete si aplikaci Malování z nabídky Start / Programy / Příslušenství. Vzhledem k tomu, že budete Malování používat často, vytvořte si zástupce této aplikace na plochu a nejlépe přesuňte ikonu Malování do hlavního panelu pro „Snadné spuštění“. ikona Malování v hlavním panelu Postup práce na obrázku vánočního stromku: • Nejprve si upravíme velikost tzv. kreslícího plátna tak, aby bylo velké jen pro nezbytnou velikost stromku, který budeme kreslit.

9

• Provedeme to tak, že uchopíme pravý dolní roh plátna pomocí LTM (=levého tlačítka myši, dále jen LTM nebo PTM), jak je vyznačeno na obrázku výše, a táhneme úhlopříčně myší odhadem na velikost stromku, který budeme kreslit. Velikost plátna je pro budoucí animovaný obrázek velmi důležitá. Je vždy škoda, když si autor obrázku toto nepohlídá a vytvoří pracně obrázky pro animaci, které mají velké plátno. Obtékání takového obrázku je zbytečné, i když se i toto dá později vyřešit, ale zjednoduší nám práci, pokud bude plátno obrázku vypadat jako následující obrázek vlevo.

Ještě si v Malování představíme nástroje pro kreslení v levém sloupci. Když na některém tlačítku ponecháme chvíli kurzor myši, objeví se pojmenování tohoto nástroje. Doporučuji si tyto nástroje projít, abychom používali stejná pojmenování. Nyní nakreslíme polovinu stromku a využijeme osy souměrnosti k pozdějšímu doplnění druhé poloviny. Zvolíme nástroj štětce a jeho tloušťku podle obrázku níže.

.

10

Zkopírujeme polovinu stromku podle postupu na obrázku:

Na obrázku je tento postup: • snímek vlevo: klepneme na tlačítko výběr (1.) • zvolíme transparentní pozadí výběru (2.) • LTM provedeme (LTM=levým tlačítkem myši) výběr poloviny stromku • na označeném výběru zvolíme PTM – Kopírovat nebo pomocí klávesových zkratek CTRL+C (3.), tím zkopírujeme obrázek do schránky • snímek vpravo: PTM zvolíme - Vložit , tím vložíme obr. ze schránky na kreslící plátno (1.) nebo pomocí CTRL+V • opět PTM a zvolíme překlopit či otočit – vodorovně (2.) • obrázek pravé poloviny stromku přisuneme k jeho levé části (překlopit či otočit obrázek můžete i pomocí klávesové zkratky CTRL+R nebo z menu záložky Obrázek, která se nachází v horní vodorovné liště) V tomto postupu jsme použili kopírování vybrané části stromku do schránky pomocí PTM / kopírovat a vložit nebo klávesovými zkratkami Ctrl+C a Ctrl+V. Tento postup však vyžaduje spoustu manipulací – kroků. Mnohem rychlejší pro kopírování částí obrázků je používání klávesy Ctrl a použití LTM, což vidíme na dalším obrázku, je dobré si to vyzkoušet. Rychlejší postup – při použití tzv. duplikačního režimu: Použijeme přitom klávesy CTRL a levého tlačítka myši (LTM). Nejprve provedeme výběr objektu, který chceme duplikovat a současným držením klávesy CTRL a LTM přenášíme objekt na místo, kam chceme, aby se duplikovalo.

11

Ještě jednou popis tzv. duplikačního režimu podle obrázku:

klepneme na tlačítko výběr (1.) zvolíme transparentní pozadí výběru (2.) provedeme LTM výběr poloviny stromku držíme klávesu CTRL a současně LTM přesouváme vpravo obrázek, který jsme označili výběrem (3.) • tam, kde levé LTM pustíme, tam se zkopírovaný obrázek vloží • kdybychom pokračovali a stále drželi CTRL a znovu stiskli LTM, pak tam, kde LTM opět pustíme, se obrázek znovu vloží a to se nám bude hodit také pro další dokreslení stromku – baňky, svíčky, které budeme kopírovat ve větším počtu. • • • •

Celý tento postup připomíná duplikační režim, který známe ze Zoner Callista. V Malování to však vyžaduje určitý cvik, často se stává, že uživatel pustí klávesu CTRL a pak neumí navázat. Doporučuji si tento postup vyzkoušet. Cvičení v Malování: nakreslete obdélník označte jej výběrem držte klávesu CTRL a LTM uchopte vybraný obdélník přesuňte jej vedle a LTM pusťte na místo, kde jste LTM pustili se duplikoval původní obdélník pokud stále držíte CTRL, zkuste opět přesunout myší kurzor kousek vedle a LTM pusťte, objeví se další obdélník • pokud CTRL pustíte, musíte postup opakovat znovu, tj. označit obdélník výběrem, držet klávesu CTRL... • • • • • •

12

• V Malování si spoustu práce zjednodušíte také používáním klávesy Shift, která umožní bez většího úsilí vytvořit z elipsy – kruh, z obdélníku – čtverec, z čáry – přímku. • Zkuste si ve cvičném okně Malování zvolit z levého menu objekt elipsy a při jejím kreslení, tedy tažení LTM, držte současně Shift, vytvoří se místo elipsy kruh. Totéž platí o obdélníku, s přidržením klávesy Shift vznikne čtverec. Vraťme se zpět k našemu stromku. Nakreslíme svíčku a pomocí „duplikačního režimu“, který jsme si vyzkoušeli výše rozkopírujeme jednu svíčku na několik míst stromku (viz obrázek vpravo dole). Vybarvíme vnitřek stromku pomocí nástroje plechovky zelenou barvou a dokreslíme ještě ozdobný řetěz (viz obrázek vlevo dole).

Ozdobný řetěz je nejjednodušší nakreslit pomocí nástroje štětce, což vidíme v 1. kroku na obrázku vlevo výše. Ve 2. kroku si zvolíme velikost tohoto štětce a ve 3. kroku volíme z palety barev. K nakreslení jednoho prvku řetězu postačí jedno kliknutí myší tam, kde chceme umístit ozdobný řetěz, poté změníme jen barvu a klikneme znovu na další část ozdobného řetězu. Můžeme tedy říct, že kolik vidíme barevných částí řetězu, tolikrát jsme klikli myší pomocí nástroje štětce. Obrázek je hotov, stačí jej uložit.

13

1.3 Ukládání obrázku v Malování Obrázek uložíme pomocí Soubor / uložit jako. Název souboru volíme co nejjednodušeji s1, typ souboru zvolíme GIF (viz 1. a 2. krok na obrázku níže) a uložíme (3. krok).

Po uložení se objeví se dialogové okno, že uložení v tomto formátu může způsobit ztrátu některých informací o barvě… Zvolte „ano“.

Složku, do které jste si soubor s1 uložili, pojmenujte animace_stromek, pokud jste ji pojmenovali jinak, přejmenujte ji, když budete plnit korespondenční úkol.

1.4 Pokračování s druhým snímkem Nyní stačí vytvořit druhý snímek pomocí barevných změn toho prvního a uložit jako snímek s2.

14

Otevřete si snímek s1:

Proveďte v něm tyto změny:

K barevné změně části obrázku, svíčky a třeba i řetězu, využijte nástroje plechovky a z palety barev zvolte novou barvu, kterou naplňte horní část hořící část svíčky (viz obrázek níže).

Stejně tak můžete pomocí nástroje plechovky změnit i vánoční řetěz. Takto pozměněný snímek s1 uložte jako s2. Dva snímky postačí k tomu, abychom vytvořili animaci. Samozřejmě v našem příkladu stromku by vypadaly efektně ještě další barevné změny, které bychom uložili jako snímek s3 a s4. Pro první zkušenost s animací si vystačíme se dvěma snímky.

15

Vkládání do Zoner GIF Animátoru Abychom mohli animovat tyto dva snímky, musíme je vložit do Zoner GIF Animátoru. O tom je kapitola č. 3. Zoner GIF Animátor je součástí balíku Zoner Callista. Doporučení: nyní doporučuji přečíst si následující shrnutí a poté dokončit práci s vkládáním snímků s1 a s2 do GIF Animátoru v kapitole č. 3.1 a vynechat prozatím 2. kapitolu zaměřenou na vytváření obrázku pomocí vektorové grafiky v Zoner Callistu.

Shrnutí 1. kapitoly
Seznámili jsme se s rozdílnostmi tvorby v rastrové a vektorové grafice. Pracovali jsme v aplikaci Malování, která je na principu rastrové grafiky.
Časem zjistíte, zda je Vám bližší tvořit obrázky v Malování či v Zoner Callistu, který je na principu vektorové grafiky.
V Malování jsme vytvořili jednoduchý obrázek stromku. Využili jeho osové souměrnosti a kopírováním a vodorovným překlápěním nakreslené části stromku jsme dokreslovali jeho druhou polovinu.
U nástroje „výběr“ jsme využívali transparentního výběru, protože nepřenáší např. i bílé pozadí obrázku, ale jen samotný obrázek s průhledným pozadím.
Využívali jsme rychlého kopírování části obrázku, který se vícekrát opakuje např. svíčka, a to výběrem této části obrázku a současným držením CTRL a LTM jsme kopírovali svíčku na další místa. Tento rychlý postup jsme si pojmenovali jako duplikační režim, se kterým se setkáme také v Zoner Callistu.
Hotový snímek jsme uložili pomocí Soubor / uložit jako ve formátu GIF.
Název souboru jsme volili co nejjednodušeji např. s1, s2 (ale stačí i „1“, „2“. V názvech souborů ani složek jsme nepoužívali českou diakritiku, mezery a velká písmena.
Cílem této kapitoly bylo vytvořit dva snímky. Druhý snímek jsme vytvořili na základě barevných změn toho prvního.

16


Pokud si nakreslíte ještě snímek „s3“, který bude jinak barevně pozměněn, třeba oranžové části hořících svíček budou zpět nahrazeny žlutými, bude animace plynulejší a zajímavější. Vše záleží na Vaší fantazii.
Zkušení animátoři přidávají kromě barevných změn obrázku i změnu pohybu objektu, ale k tomu se teprve dostaneme v dalších kapitolách.
Animace snímků vznikne, seřadíme-li snímky za sebou a spustíme jejich prohlížení. To nám umožní právě Zoner GIF Animátor. Vkládání těchto snímků do Zoner GIF Animátoru a spouštění animace je popsáno v kapitole č. 3. Kontrolní otázky a úkoly: 1. Popište, jak provedete uložení obrázku vytvořeném v Malování, který je určen pro pozdější vkládání do Zoner GIF Animátoru. 2. Jaký název souboru zvolíte při ukládání obrázku? 3. Jaký typ souboru…? 4. Pomocí které klávesy lze vytvořit v Malování z elipsy – kruh, z obdélníku – čtverec? 5. Která klávesa umožňuje rychlé kopírování části obrázku? (u tzv. duplikačního režimu) Vlastní poznámky:

17

1.5 Korespondenční úkol č. 1 Vytvořte jednoduchý obrázek (může být stejný jako na výše popsaném příkladu vánočního stromku) v rastrové grafice v aplikaci Malování. Zvolte si obtížnost podle sebe. Při tvorbě obrázku zvažte, jak budete obrázek animovat, abyste obtížnost zvládli. Vytvořte alespoň 2 snímky. Tyto dva snímky si uložte do složky s názvem „animace_nazev“ a zašlete ji společně s korespondenčním úkolem č. 3 (ve 3. kapitole) tutorovi kurzu na dohodnutou e-mailovou adresu.

18

2 SNÍMEK POMOCÍ ZONER CALLISTA V této kapitole se dozvíte: • o základech práce v aplikaci Zoner Callisto s tvorbou obrázku, který bude sloužit jako první snímek pro budoucí animaci se zaměřením na změny pohybu, respektive jejich rotaci • jak vytvořit další snímky úpravou toho předchozího změnou pohybu • o exportování obrázků do formátu GIF Budete umět: • vytvořit a animovat jednoduchý obrázek nakreslený v Zoner Callistu • exportovat obrázek do formátu GIF Klíčová slova této kapitoly: • formát ZMF a GIF, export, nastavení dokumentu, základní panel nástrojů, tlačítko výběr a editace objektů, duplikační režim, otáčení objektů, editace objektů Čas potřebný k prostudování kapitoly: • 2 hodiny Průvodce studiem: V této kapitole si vyzkoušíme vytvořit jednoduchý obrázek hvězdy pomocí vektorové grafiky v Zoner Callistu. K animaci využijeme pohybu otáčení. Seznámíme se s některými postupy práce v této grafické aplikaci. Na hlubší seznámení práce v Zoner Callistu odkazuji na distanční oporu: „Úvod do vektorové grafiky“ autorky Mgr. Jany Krupové. Vytvořený obrázek hvězdy nejprve uložíme ve formátu ZMF pro případnou pozdější editaci. Na základě původního obrázku budeme vytvářet další se změnou pohybu otáčením hvězdy. Každé pootočení hvězdy budeme ukládat do formátu GIF, což v Zoner Callistu provedeme exportem. Vytvoříme asi 12 snímků, které budou připraveny na vložení do rámců Zoner GIF Animátoru, o tom je následující 3. kapitola.

19

2.1 Jednoduchý obrázek v Zoner Callistu Otevřete si grafickou aplikaci Zoner Callisto. Stejně jako v Malování i tady si musíme nejprve ujasnit velikost obrázku tak, aby jeho pozadí nebylo zbytečně velké. V Malování jsme jednoduše uchopili okraj „kreslícího plátna“ a protáhli jeho velikost do požadované délky. V Zoner Callistu si nastavíme velikost tzv. kreslícího plátna přes Nastavení dokumentu pomocí: • Soubor / Nastavení dokumentu / Formát / A5 / na šířku:

• vzhled dokumentu pak vypadá takto:

20

• Pro vytvoření obrázku si vybereme v panelu nástrojů jednoduchý tvar hvězdy s libovolným počtem cípů. • Po klepnutí myší na vybraný tvar hvězdy, se kurzor změní ve tvar křížku a obrázku hvězdy (počet cípů vyřešíme později) • Tahem myši zvolíme velikost hvězdy, aby se vešla do velikosti nastaveného dokumentu. Obvykle se napoprvé podaří nakreslit obrázek mimo nastavený dokument. Abyste mohli hvězdu přemístit, musíte kliknout z původního nástroje hvězdy, který je stále aktivní na místě kurzoru, a kliknout na nástroj v levém sloupci nahoře: „Výběr a editace objektů“. Toto tlačítko budete používat pokaždé, když chcete editovat objekt, který jste předtím nakreslili. Objekt můžete přenášet, měnit velikost, barvu, otáčet... Poznámka: pokud by se levý sloupec tzv. základní panel nástrojů nezobrazoval, zvolte jej přes Zobrazit / Panel nástrojů / Základní. Hvězdu zmenšíme a přemístíme na střed nastaveného dokumentu. Dole je paleta barev, klepneme-li na ni pravým tlačítkem myši – vyplní se vnitřek hvězdy, klepneme-li na paletu barev LTM – vyplní se okraj hvězdy. , Na paletě barev je jako první tzv. barva bez výplně podle potřeb můžeme v některých případech také využít. Nyní zvolíme počet cípů hvězdy pomocí tlačítka z horní vodorovné lišty nástrojů. Pokud se lišta nezobrazuje, zvolíme z horního menu záložku: Zobrazit / Panel nástrojů / Alternativní.

21

Pozor, lišta s počtem cípů je aktivní pouze, je-li aktivní tlačítko: „Výběr a editace objektů“ (viz obr. vpravo) a objekt je označen krajními uchopovacími body. Vyzkoušejte si to! Počet cípů lze volit také přímo pomocí dialogového okna na obrázku níže. Toto okno lze vyvolat tehdy, je-li aktivní tlačítko s tvarem hvězdy v levém sloupci základního panelu nástrojů, pak stačí klepnout na hvězdu nebo vedle ní a objeví se dialogové okno s nabídkou:

Pokud se Vám cokoliv nedaří, používejte tlačítko zpět. Můžete se vrátit o libovolný počet kroků zpět a naopak. Zvolte si požadovaný počet cípů. Je jedno, zda počet cípů zvolíte z výše zobrazeného dialogového okna nebo z alternativního panelu nástrojů, který, je-li aktivní, leží v horní vodorovné liště (tento panel vidíme i na obrázku níže). Extra úkol navíc: do velké hvězdy vložíme stejnou hvězdu, ale v menší velikosti. Využijeme k tomu duplikační režim z horního alternativního panelu nástrojů:

• Opět platí, že je tlačítko aktivní pouze tehdy, je-li aktivní tlačítko: „Výběr a editace objektů“. • Klepneme tedy na tlačítko duplikačního režimu – „rozsvítí se“ • Uchopíme hvězdu a přeneseme vedle. • Duplikační režim zrušíme opětovným kliknutím – „zhasne“. • Nejčastější chybou bývá, že uživatel si zapomene zrušit duplikační režim! • Hvězdu zmenšíme uchopením rohového úchytu LTM.

• Malou hvězdu umístíme do středu velké hvězdy a zvolíme jí jinou barvu pomocí LTM a PTM na paletě barev (opět platí, že hvězda musí být označena, chceme-li editovat její barvy).

22

2.2 Ukládání obrázku v Zoner Callistu Hotovou hvězdu uložíme nejprve ve formátu ZMF a to pro případ, že bychom se chtěli vrátit k pozdější editaci této hvězdy. Ukládání provedeme pomocí Soubor / uložit jako. Pro účely animace však musíte obrázek hvězdy uložit do formátu GIF, to provedete pomocí: Soubor / export:

Objeví se další okno, zvolte OK nebo Enter:

23

2.3 Pokračování s dalšími snímky Pro účely animace máme prozatím uložen první snímek hvězdy pod názvem Export1 ve formátu GIF. Další snímky vytvoříme pomocí postupného otáčení hvězdy. Zapamatujeme si, jaký směr otáčení jsme zvolili. Postup: • Klepněme znovu na tlačítko: „Výběr a editace objektů“, které se nachází v levém sloupci základního panelu nástrojů a kolem hvězdy se vytvoří uchopovací body. • Poklepejme na hvězdu dvojklikem, aby se objevilo označení hvězdy „s ručičkou“ uprostřed (viz obrázek výše) a otočme zvoleným směrem např. vlevo o jeden cíp hvězdy (viz obrázek níže). Změnu uložíme pomocí: Soubor / Export. • Název zvolíme již jednoduše pouze „2“ a dvakrát klikneme na Enter, tím se další postupy ukládání urychlí. • Stejným způsobem práce postupujeme dále, znovu o jeden krok otočíme hvězdu vlevo a uložíme pomocí Soubor / Export s názvem „3“ • Takto postupujeme až se hvězda otočí jednou dokola. Pro šesticípou hvězdu využijeme asi 12 exportů. Je dobré si pro začátek nakreslit původní výchozí pozici, abychom věděli, kdy máme s otáčením hvězdy skončit. • Práci si zjednodušíme klávesovými zkratkami. Export vyvoláme pomocí klávesové zkratky: Ctrl + Shift + E, poté napíšeme název souboru a stiskneme 2krát Enter. • Důležité je, abychom při otáčení s hvězdou nezměnili pozici této hvězdy. Což většinou pouhým okem nepoznáme. Chyba se projeví až v Zoner GIF Animátoru, když po spuštění animace – hvězda jako by uskakovala bokem. Pokud máme hvězdu uprostřed, otáčíme současně velkou hvězdou vlevo a malou hvězdou vpravo (v animaci to vypadá efektně). Můžeme také nechat prostřední hvězdu bez pohnutí a výsledek bude zajímavý. Je to jen volba různých variant, vše záleží na Vaší fantazii. Snadnější je ze začátku otáčet jen jednou hvězdou. 24

Vkládání do Zoner GIF Animátoru Abychom mohli animovat všechny snímky hvězdy, musíme je vložit do Zoner GIF Animátoru. O tom je následující kapitola č. 3.

Shrnutí 2. kapitoly
Cílem této kapitoly bylo vytvořit jednoduchý obrázek v Zoner Callistu. Zvolili jsme hvězdu. Její animace bude spočívat v otáčení hvězdy ve zvoleném směru. Hvězdu jsme vytvořili pomocí nabídky tvarů v základním panelu nástrojů, který je umístěn v levém sloupci okna aplikace Zoner Callista.
Nastavili

jsme

dle

své

fantazie

počet

cípů

hvězdy.

Čím více však bylo cípů, tím více snímků jsme museli uložit při postupném otáčení hvězdou pro její budoucí animaci. U šesticípé hvězdy to vychází na 12 snímků, pokud jsme ukládali jemnějšími kroky (po otočení přes jeden cíp hvězdy).
Ukládání snímků do formátu GIF jsme prováděli pomocí Soubor / Export… Doporučením je také, kromě exportů všech obrázků do formátu GIF, aby byl uložen výchozí obrázek ve formátu ZMF pomocí Soubor / uložit jako. To pro případné změny (editaci) původního obrázku.
Zoner Callisto je vektorová grafika. Při zadání práce hvězdy jsme využili jen několik nástrojů editace. Důležité je nezapomínat na tlačítko „Výběr a editace objektů“, chceme-li nakreslený tvar přesouvat, měnit velikost, barvu, duplikovat nebo jinak měnit.
Některá tlačítka nejsou v určitých momentech aktivní, nejčastěji to bývá proto, že objekt, není označen pomocí výše zmiňovaného tlačítka „Výběr a editace nástrojů“ a objekt nemá kolem svého okraje označení uchopovacích bodů (viz obrázek).

25


Pokud se nám nezobrazuje některý z panelu nástrojů vůbec, vyvoláme si jej pomocí Zobrazit / Panel nástrojů / základní panel nástrojů (levý sloupec) nebo alternativní (horní vodorovný panel).
Všechny snímky jsme exportovali do připravené složky. V následující kapitole tyto snímky vložíme do Zoner GIF Animátoru, abychom animaci spustili. Kontrolní otázky a úkoly: 1. Popište, jak provedete uložení obrázku vytvořeném v Zoner Callistu, který je určen pro pozdější vkládání do Zoner GIF Animátoru. 2. Jaký název souboru zvolíte při ukládání obrázku? 3. Jaký typ souboru…? 4. K čemu slouží uložení hotového obrázku také ve formátu ZMF? Vlastní poznámky:

26

2.4 Korespondenční úkol č. 2 Vytvořte jednoduchý obrázek pomocí vektorové grafiky v Zoner Callistu. Zvolte si obtížnost podle sebe (nebo použijte stejný obrázek hvězdy popsaný v této kapitole). Vytvořte si složku pod názvem „animace_nazev“. Název složky volte bez mezer, velkých písmen a české diakritiky, stejně tak názvy souborů, které budete do složky ukládat. Je to důležité pro budoucí případné umísťování těchto souborů na webové stránky, které pojmenování souborů s českou diakritikou nepodporují. Do této složky uložte nejprve první snímek ve formátu ZMF pomocí Soubor / uložit jako. Teprve poté obrázek exportuje do formátu GIF pomocí Soubor / export a ponechejte pojmenování prvního snímku: „Export1“. Další snímky exportuje a ukládejte jednoduše pod názvy: „2“, „3“ atd. Práci pošlete společně s korespondenčním úkolem č. 3 (ve 3. kapitole) tutorovi kurzu na dohodnutou e-mailovou adresu.

27

3 VKLÁDÁNÍ SNÍMKŮ DO GIF ANIMÁTORU V této kapitole se dozvíte: • o základních postupech práce se Zoner GIF Animátorem při vkládání obrázků do rámců • o nastavování hodnot trvání rámců • o spouštění animace a následném ukládání a znovuotevření Budete umět: • • • •

vkládat obrázky formátu GIF do rámců Zoner GIF Animátoru upravovat trvání rámců na jinou hodnotu spouštět přehrávání animace ukládat animaci pomocí Soubor / uložit jako

Klíčová slova této kapitoly: • vložit z, rámec, trvání rámce, přehrávač, uložit animaci, image Čas potřebný k prostudování kapitoly: • 1 hodina Průvodce studiem: Jednotlivé snímky jsou hotové a stačí je vložit do GIF Animátoru. Snímky se vkládají do tzv. rámců. Těmto rámcům lze nastavovat různé parametry, což se řeší pomocí záložek v levém sloupci GIF Animátoru, o tom podrobněji až v následující 4. kapitole. Nyní se naučíme jen nezbytné základy, tj. vkládat snímky do GIF Animátoru, nastavovat základní parametry a spouštět animaci pomocí Přehrávače. Hotovou animaci i s nastavenými parametry budeme ukládat pomocí Soubor / uložit jako. Do názvu souboru vložíme klíčové slovo „image_nazev“. Otevřete si Zoner GIF Animátor přes nabídku Start / Programy / Zoner Callisto. Jsou zde dvě možnosti vkládání souborů, ale oba mají jinou funkci. Začneme 1. krokem – vložit z….

28

Pomocí tlačítka vložit z… vkládáme do rámců GIF Animátoru

jednotlivé obrázky – snímky formátu GIF, které jsme si předem připravili v Malování nebo v Zoner Callistu.

3.1 Snímky z Malování Vložíme nejprve snímky, které jsme si vytvořili v první kapitole pomocí Malování a ukládali jsme je do složky „animace_stromek“. Klepněme na tlačítko vložit z… a objeví se dialogové okno.

Postup: • 1. krok - lze si nastavit zobrazení souborů jako „Miniatury, místo ikon s pouhými názvy souborů. • 2. krok - v oblasti hledání si otevřeme složku s názvem animace_stromek. Samozřejmě si musíme pamatovat její umístění, ale s největší pravděpodobností to bylo do složky Dokumenty a pak dále podle Vašeho uspořádání složek v počítači. • 3. krok - stačí dvakrát poklepat na stromek označený pod názvem s1.GIF. Nebo jednou klepnout na tento soubor a pak na tlačítko Otevřít. První uvedený postup je praktičtější.

29

Snímek s1.GIF se vložil do rámce v GIF Animátoru. Znovu klepneme na tlačítko vložit z… a stejným postupem vložíme druhý snímek s2.GIF. Pokud máme snímků více, vložíme je do rámců.

Klepneme-li na 2. rámec jako na obrázku výše, objeví se ve žlutém poli vpravo aktuální obrázek stromku. Mezi rámci můžeme přepínat. Pro přehrání animace použijeme tlačítko Přehrávač (označen číslem 3 na obrázku výše), animace se spustí a zobrazí se ve žlutém poli. Animaci ukončíme opětovným stiskem tlačítka Přehrávač. Určitě jste si všimli, že rychlost animovaných snímků je příliš velká. Upravíme ji v záložce Rámec / Trvání (1/100sek.):

Postup: • 1. krok - zkontrolujeme, zda není spuštěn „Přehrávač“ a vypneme jej opětovným kliknutím (ikona zhasne). • 2. krok - klepneme na 1. rámec a vlevo si zvolíme záložku Rámec • 3. krok - nastavíme trvání na hodnotu 20, totéž provedeme u druhého snímku, na který klepneme a nastavíme i zde trvání na hodnotu 20. Zkuste nyní přehrát animaci. Další úpravy jsou popsány ve 4. kapitole: GIF Animátor a jeho možnosti. 30

3.2 Ukládání hotové animace Hotovou animaci uložíme pomocí Soubor / uložit jako:

Postup: • 1. krok - animaci uložíme do stejné složky, kde byly uloženy snímky s1.GIF a s2.GIF, abychom měli všechny soubory tzv. po ruce.. • 2. krok - název soubor pojmenujeme jako image_stromek. Je důležité slovo image nebo můžete zkráceně psát třeba im_stromek. Tento návyk pojmenování je důležitý pro přehlednost, který soubor je pouhý statický obrázek a který je hotovou animací – tedy obrázky poskládané na sobě (viz rámce jdoucí po sobě v GIF Animátoru). Opět platí volit pojmenování bez mezer, velkých písmen a bez české diakritiky. • 3. krok - zkontrolujeme typ formátu GIF. • 4. krok - Uložíme. V naší složce image_stromek jsou nyní 3 soubory:

Vidíte, že ikonky souborů jsou stejné, neboť jsou stejného formátu GIF, jak pro jednotlivé snímky, tak pro animovaný soubor, ve kterém jsou snímky tzv. poskládány na sobě. Abyste je od sebe rozlišili, přidávejte důsledně do názvu animovaného souboru slůvko „image_nazev“, což Vám zpřehlední orientaci mezi soubory.

31

Otevření hotové animace Chceme-li si otevřít hotovu animaci, otevřeme si jí pomocí Soubor / otevřít nebo pomocí ikonky č. 2 na obrázku níže.

Pokud však při otevírání hotové animace, která je uložena v souboru „image_nazev“ zaměníme ikonky a místo otevřít soubor tj. 2. krok na obrázku výše, použijeme 1. krok tj. vložit z…, naskládají se snímky do rámců bez nastavení všech parametrů – např. hodnoty trvání rámců a musíme je nastavit znovu. V našem případě stromku by nebylo tolik pracné znovu tyto parametry nastavit, neboť šlo o dva snímky, avšak bude-li rámců více (což bude následná ukázka s animovanou hvězdou vytvořenou v Zoner Callistu), bylo by pracné znovu nastavovat všechny parametry. Soubor s hotovou animací otevíráme z důvodů, že bychom chtěli ještě nastavení rámců změnit nebo dále optimalizovat či měnit nastavení rámců např. průhlednost pozadí apod., o tom je kapitola č. 4.

3.3 Snímky ze Zoner Callista Stejným postupem jako jsme vkládali snímky stromku vytvořené v Malování, vložíme snímky hvězdy vytvořené v Zoner Callistu. Rozdíl bude zejména v počtu vkládaných snímků hvězdy, kterých je mnohem více. Samozřejmě pohyb otáčené hvězdy by šlo nahradit i dvěma snímky hvězdy, které by simulovaly pohyb, ale jemnější rozložení pohybu otáčené hvězdy (tzv. dokola) vypadá přirozeněji. Vložíme tedy do rámců GIF Animátoru všechny snímky formátu GIF, které jsme v Zoner Callistu vytvořili a poté do formátu GIF exportovali.

32

Stručné zopakování postupu: • Vložení snímků do rámců GIF Animátoru provedeme pomocí tlačítka „vložit z…“ (obrázek vpravo). • Z dialogového okna vložit z… vložíme všechny snímky formátu GIF. Do 1. rámce vložíme soubor Export1.gif (dvojklikem na tento soubor), do 2. rámce vložíme 2.gif atd...

• Pomocí tlačítka „Přehrávač“ spustíme animaci. Opětovným kliknutím ji zastavíme, abychom mohli provést další úpravy rámců. • Podle potřeb upravíme v záložce Rámec trvání snímků, platí, že čím je hodnota vyšší, tím se animace zpomaluje. • Hotovou animaci uložíme podle stejného postupu uvedeném v předchozí kapitole 3. 2

Shrnutí 3. kapitoly
Zoner GIF Animátor je součástí Zoner Callista.
GIF Animátor umožňuje vložit do rámců předem připravené obrázky ve formátu GIF a tuto řadu snímků spouštět pomocí tlačítka „Přehrávač“ jako animaci.
Vkládání snímků do rámců je umožněno tlačítkem „Vložit z…“:

a dále lze rámce upravovat:

. 33


Důležité je nezapomenout hotovou animaci uložit pomocí Soubor / uložit jako. Typ souboru ponechat GIF a do názvu souboru vložit klíčové slovo „image“, které umožní lepší orientaci mezi statickými snímky a snímky, které jsou složené z několika snímků tzv. poskládaných na sobě.
Je vhodné soubor „image_nazev“ ukládat do stejné složky, kde se nachází ostatní statické obrázky, ze kterých je animace sestavena. Kontrolní otázky a úkoly: 1. Popište podle obrázku, k čemu slouží ikonka „vložit z… (1. obr.) a kdy používáme ikonku „otevřít“ (2. obr).

2. K čemu slouží tato ikonka ? 3. Kde nastavíte délku trvání rámců? Vlastní poznámky:

34

3.4 Korespondenční úkol č. 3 1. část úkolu: Vložte snímky ze složky „animace_nazev“ vytvořené v korespondenčním úkolu č. 1 do Zoner GIF Animátoru, upravte časování – trvání rámců a animaci spusťte. Poté animaci uložte jako „image_nazev“ a umístěte do stejné složky (viz výše), kde se nacházejí snímky z této animace. Všechny tyto soubory pošlete tutorovi kurzu na dohodnutou emailovou adresu. Do předmětu napište: „ESF – úkol č. 3a“. Posílání těchto souborů, které jsou umístěny ve složce „animace_nazev“ si zjednodušte zazipováním této složky: Poznámka k postupu zipování ve Windows XP: • 1. krok – klepněte PTM (pravým tlačítkem myši) na složku, ve které se nacházejí všechny soubory: • 2. krok – zvolte:

• 3. krok – vytvoří se automaticky nová zazipovaná složka pod stejným názvem jen s příponou ZIP. Tento soubor pak vložte do přílohy e-mailu. Pokud se Vám zipování nedaří, vložte do příloh e-mailu jednotlivé soubory běžným způsobem. 2. část úkolu: Stejným způsobem vložte do GIF Animátoru snímky z korespondenčního úkolu č. 2, uložte jako „image_nazev“ do složky „animace_nazev“ a pošlete tutorovi kurzu. Do předmětu emailu napište: „ESF – úkol č. 3b“.

35

4 GIF ANIMÁTOR A JEHO MOŽNOSTI V této kapitole se dozvíte: • o nastavování parametrů rámců, o velikosti animace a jejím počtu opakování • o možnostech optimalizace animovaného souboru Budete umět: • manipulovat s rámci v okně s náhledy • přesouvat vložené rámce, kopírovat, odstraňovat, vkládat do rámců komentáře • nastavovat parametry rámců v záložce Rámec, zejména dobu trvání rámců • nastavovat ostatní parametry v záložkách Animace a Optimalizace Klíčová slova této kapitoly: • rámec, trvání rámce, pružná velikost rámce, doba trvání rámce, hodnota trvání, moment zpomalení, opakování do nekonečna, metoda překreslení, průhlednost, komentáře, titulky, nadbytečné pixely Čas potřebný k prostudování kapitoly: • 2 hodiny Průvodce studiem: v této kapitole si vyzkoušíme manipulovat s rámci přímo v okně náhledů rámců. Využijeme kopírování a přesouvání rámců na jiná místa animace tak, abychom docílili pohybu animace tam a zpět, přestože jsme měli předem vytvořeny v grafickém editoru pouze snímky s pohybem vpřed. Naučíme se nastavovat hodnotu trvání rámců v animaci a nastavovat i tzv. momenty zpomalení vybraného rámce, který animaci uklidní před dalším pohybem. Největší část kapitoly je věnována zejména rámcům a také nastavování animace – velikosti, počet opakování. Budou zde informace o optimalizaci celé animace, což má význam zejména tehdy, bude-li animace umísťována na Internet. V závěru kapitoly si znovu objasníme ovládací tlačítka v horní vodorovné liště Zoner GIF Animátoru.

36

4.1 Rámec Rámcem pojmenováváme tzv. okna GIF Animátoru, do kterých vkládáme předem připravené snímky. Rámců se zobrazí vždy tolik, kolik vložíme snímků. Aktivní okno rámce je to okno, na které jsme klikli myší, proti ostatním rámcům je modře orámován. Mezi rámci lze přepínat opět myší nebo kurzorovými klávesami (šipkami). Okna rámců lze ve sloupci přesouvat tažením myši nebo pomocí vyjmout / vložit. Také lze rámce kopírovat a vkládat podle potřeb na určené místo ve sloupci rámců nebo odstraňovat. Na obrázku vpravo vidíme aktivní 4. rámec, který přesouváme držením LTM a chceme jej umístit za 1. rámcem. Při přesunu se objevuje šipka, která napovídá, kde se s rámcem zrovna nacházíme. Když LTM pustíme, objeví se na tom místě přesunutý snímek. Praktické využití kopírování rámců Kromě výše uvedeného přesunu snímku na správné místo pohybu otáčení hvězdy, je časté použití kopírování a přesunu snímků tam, kde jsme vytvořili jeden směr a potřebujeme opačný. Ukázka č. 1 s animací vlajky EU Obrázky jsou vytvořeny v Zoner Callistu. Nejprve byl nakreslen snímek č. 12. Pomocí hladin se jednotlivé hvězdy skrývaly pod vlajku. Každý obrázek se postupně ukládal, až vzniklo 12 snímků.

37

Těchto 12 snímků se vložilo do GIF Animátoru a cílem animace bylo, aby se postupně odkrývaly hvězdy až do plného kruhu (tj 1. – 12. snímek). Ale také zpět, aby hvězdy ubývaly. Toho docílíme jednoduše tak, že zkopírujeme 11. rámec a vložíme jej za 12, dále zkopírujeme 10. rámec a vložíme za vzniklý poslední, poté 9. rámec…atd. Názorně by pak rámce byly vloženy takto: 1 2 3 4 5 6 7 8 9 10 11 12 11 10 9 8 7 6 5 4 3 2 1. Rámec 1 přidáváme na závěr proto, že mu můžeme nastavit delší trvání než 1. rámci na začátku. Ukázku této animace najdete na http://www.zsskolska.cz. Nacházejí se tam i ostatní ukázky animací v těchto materiálech. Ukázka č. 2 s animací otevíraných dveří domu Obdobným způsobem využijeme kopírování rámců v animaci domku. V Malování vytvoříme obrázek domku a postupně ukládáme části otevíraných dveří - celkem 8 snímků. Tyto snímky vložíme do rámců GIF Animátoru:

Stejně jako v ukázce číslo 1 využijeme kopírování snímků tak, abychom docílili zavírání dveří. To znamená, že zkopírujeme 7. rámec a vložíme za 8, poté zkopírujeme 6. rámec… Postup rámců: 1 2 3 4 5 6 7 8 7 6 5 4 3 2 1 38

Parametry rámce V záložce „Rámec“ můžeme nastavovat různé parametry. V našich ukázkách práce použijeme ty parametry, které se využívají nejčastěji (viz obrázek vlevo). Trvání rámce – přednastavená je hodnota 10. Ukážeme si nastavení těchto hodnot na ukázce animace č. 2 – domek s otevíranými dveřmi. Je vhodné ponechat všem rámcům hodnotu 10, kromě posledního rámce se zavřenými dveřmi, tam si nastavíme hodnotu 100. To způsobí, že se spustí animace otevření dveří a zavření. Pak je chvíli pauza se zavřenými dveřmi a poté se animace znovu opakuje od 1. rámce. Kdybychom ponechali animaci se stejnou hodnotou 10 všude, působila by animace zbrkle – neustále by se dveře rychle otevíraly a zavíraly. Úpravou jednoho snímku na delší trvání docílíme tzv. momentu zpomalení, který je příjemnější pohledu oka. Totéž bychom nastavili v ukázce č. 1 – u animace vlajky. Moment zpomalení jednoho rámce by se hodil na snímek č. 12 (viz obrázek vpravo). Metoda překreslení má nastavenou hodnotu na „nechat jak je“ Je to nejčastěji používaná metoda . Je použita u všech ukázek v tomto textu. Znamená to, že rámce se nechávají jak jsou a překreslují se novými rámci se vším, tedy i s pozadím atd. Další metodou překreslení je: „obnovit předchozím stavem“. Což znamená, že po uplynutí trvání rámce se zobrazí předchozí stav rámce. Využívá se u probliknutí rámce a vrácení na původní stav. Poslední metodou je: „obnovit podkladem“. Po uplynutí trvání rámce dojde k vymazání plochy pod rámcem bílou barvou. Průhlednost má zajímavé využití. Vzpomeňte si na obrázek vánočního stromku, který je na bílém pozadí. Pokud bychom se rozhodli umístit animaci stromku na webové stránky, které mají barevné pozadí, je nutné odstranit bílé pozadí kolem stromku. To zajistíme úpravou všech rámců v GIF Animátoru tak, že klepneme na 1. rámec s obrázkem stromku, aby bylo okno aktivní a vlevo a zvolíme zatrhneme Poté klepneme na 2. rámec a nastavíme totéž.

bílou barvu.

39

Znovu připomínám, že průhlednou barvu musíte nastavit každému rámci. Pro kontrolu neprůhledného pozadí si spusťte animaci a uvidíte místo původního bílého pozadí tzv. šachovnici, která znázorňuje neprůhlednou barvu (samozřejmě po umístění této animace na webové stránky tuto šachovnici neuvidíme).

Cvičení s rámci: Otevřete si Zoner GIF Animátor a vložte do něj soubor „image_stromek“, který jste tvořili v 1. kapitole a zřejmě i v korespondenčním úkolu č.1. Vyzkoušejte si všechny postupy použité v této kapitole 4.1: • • • • • •

přesouvání rámců kopírování rámců vkládání mezi ostatní rámce trvání rámců – moment zpomalení u jednoho snímku metodu překreslení „ponechat jak je“ průhlednost pozadí – nastavit bílou barvu jako průhlednou

Pojmenování rámců – tzv. titulky V množství snímků se občas potřebujeme lépe orientovat na některé snímky, můžeme si je pojmenovat:

40

Titulky se nijak neprojeví v zobrazení animace! Postup vkládání titulku: • klepněte na rámec, aby bylo okno rámce aktivní (zmodrají jeho okraje) • stiskněte klávesu F2 a napište do bílého pole název titulku pro rámec

4.2 Animace V Zoner GIF Animátoru se vedle záložky Rámec nachází také Animace (viz obrázek vpravo). Zde se nastavuje velikost animace a také počet opakování. Často se využívá pružná velikost. animace. Pokud se Vám stane, že se obrázky vložené do rámců nezobrazují celé, zvolte pružnou velikost. Počet opakování animace znamená, kolikrát se má opakovat řada vložených snímků do rámců GIF Animátoru. Nejpoužívanější je opakování do nekonečna. Význam pružné velikosti spočívá zejména v možnosti pohybu se snímkem v rámci. Posun snímku má význam při úpravách rámců, když zjistíme po přehrání animace, že nám některý rámec nesprávně vybočuje, opravíme jej uchopením a umístěním na správné místo.

4.3 Vkládání textu – komentáře do animace Některé animace vyžadují vkládání komentářů přímo do animace. To má význam třeba tam, využíváme-li animaci třeba ve výuce a jednotlivé kroky animovaných snímků doprovázíme komentářem (viz kapitola č. 6 o uplatnění animací ve výuce). 41

Komentář vkládáme do rámců animace pomocí tlačítka „Vložit text“ (viz obrázek vlevo). Objeví se dialogové okno (viz obrázek níže), zde si nastavíme barvu textu, písmo… Do políčka Text napíšeme komentář, který se zobrazuje v rámci nahoře, textem lze v rámci pohybovat.

Komentáře vložené do rámce se objeví v novém okně rámce, takže rámci s obrázkem a rámci s komentářem můžete nastavit délku trvání zvlášť. Také k jednomu rámci můžete mít např. 3 rámce s komentářem (viz následná ukázka). Ukázka č. 3 – konstrukce pravoúhlého trojúhelníka

42

Komentáře z obrázku výše, které jsou na 2., 3., 4. rámci se po spuštění animace objeví v 1. rámci. Stejně tak následný komentář v 7. rámci se objeví v 6. rámci atd.

Z 24 snímků bylo vytvořeno v grafickém editoru pouze 17 snímků. 7 snímků jsou jen komentáře vytvořené přímo v Zoner GIF Animátoru. Komentáře jsou rámce č.: 2, 3, 4, 7, 10, 12, 21. Abyste zpětně rozlišili, které rámce jsou obrázky vytvořené v grafickém editoru a které jsou komentáře vytvořené v GIF Animátoru, stačí se podívat na pole se zobrazením aktivního rámce, které tvoří šachovnicové pozadí.

43

4.4 Přehrávání animace Prozatím jsme používali tlačítko „Přehrávač“ ke spuštění i ukončení animace (opětovným stisknutím). Pokud jsme po přehrání animace zjistili, že musíme provést některé úpravy, bylo nezbytné nejprve ukončit spuštěnou animaci. Celý panel přehrávání má však další funkce, které usnadňují práci.

Vyznačená tlačítka na obrázku výše umožňují krokování animace a sledování nastavení parametrů rámce. Toto tlačítko slouží k prohlédnutí animace v její plné velikosti, což oceníme při sledování detailů animace.

4.5 Ostatní nastavení Za zmínku stojí ještě záložka „Optimalizace“ Na obrázku vlevo je zatržena volba globální palety barev – což zajišťuje, aby všechny snímky používaly barvy ze stejné palety. Pokud tam některé barvy nepatří, k tomu slouží Dithering rámců. Ten nahradí chybějící barvy barvami z globální palety. Pro optimalizaci rámců má význam zatržítko – „Odstranit nadbytečné pixely.“ To znamená, že odstraní ty pixely, které jsou zbytečné a nijak se v animaci neprojevují. Tím se ušetří na velikosti souboru animace, která se umísťuje na Internet. Zbytečná velikost souborů způsobuje delší čas při jejich stahování. Informaci o velikosti aktuální animace se nachází v komentáři pod tlačítkem „Optimalizovat“. Význam má také zatržítko: „Odstranit komentáře“, které odstraní ze všech rámců . Stejně tak má komentáře, které jsme tam vložili přes ikonu význam zatržítko „Odstranit titulky“, které jsme dle zvážení napsali na dolní okraj rámce v okně s náhledy rámců. Jakmile v záložce „Optimalizace“ nastavíme podle svých potřeb zatržítka, k aktivaci dojde po stisknutí tlačítka „Optimalizovat“, které je v pravém dolním rohu na obrázku výše. 44

Představíme si ještě jednou panel tlačítek v horní vodorovné liště GIF Animátoru:

První ikony mají stejné funkce, které známe například z Wordu. Jinak je tomu u tohoto panelu: . První ikona slouží ke vložení prázdného rámce, což téměř nevyužijeme, neboť nové rámce se automaticky vkládají při vložení obrázku do rámce. Druhou ikonku „vložit komentář“ jsme představili v kapitole 4.3. „vložit z…“ slouží ke vkládání obrázků, které jsme si předem připravili v nějakém grafickém editoru. Poslední ikonku

„odstranit snímek“ lze nahradit klávesou

delete. Ikonka Malování slouží k editaci hotového obrázku přímo v Zoner GIF Animátoru, což nám zjednoduší a urychlí práci. Ikonka Internet slouží k prohlédnutí hotové animace v prohlížeči Internet Explorer, který se otevře v novém okně. Poslední ikonka slouží k nastavení velikosti zobrazované plochy pracovního okna a okna s náhledy rámců. Plocha může být rozdělena vodorovně nebo svisle. Pokud zde není zmíněno o některém parametru, není nezbytný pro práci s animací.

Shrnutí 4. kapitoly
GIF Animátor má v levé části záložky: Rámec, Animace, Optimalizace, Nastavení.
V této kapitole jsme se věnovali zejména rámci. Rámec se nachází v části okna s náhledy rámců. Do rámců se vkládají předem připravené obrázky, na kterých jsou postupné kroky budoucí animace. Rámce lze přesouvat, odstraňovat, kopírovat, vkládat. Každému rámci můžeme nastavit nějaké parametry, ty se nacházejí v levé části GIF Animátoru. Jsou zde čtyři výše zmíněné záložky: Rámec, Animace, Optimalizace a Nastavení. O poslední záložce jsme se v kapitole ani nezmiňovali, protože je dobré ponechat nastavení jak je.
V záložce rámec nastavujeme zejména trvání rámců. Přednastavená je hodnota 10. To se hodí zejména pro rychlé pohyby např. otevírání dveří, let ptáka, míče apod. Ale pro blikání např. u animace stromku, ale také u vlajky EU, kde blikají hvězdy, je vhodnější hodnota 20 až 40. Každému rámci se tato hodnota musí nastavit. Zmínili jsme se také o tzv. momentu zpomalení, které je vhodné do animace zařazovat.
V záložce Animace je vhodné ponechat pružnou velikost a počet opakování do nekonečna.

45


Záložka Optimalizace má význam zejména pro odstraňování přebytečných pixelů z animace. Informuje také o velikosti souboru a o době stahování souboru animace v kb/s. To vše má význam při umísťování animací na Internet. Po nastavení zatržítek stačí kliknout na tlačítko „Optimalizovat“, je dobré si předem udělat zálohu. Kontrolní otázky a úkoly: 1. Otevřete v GIF Animátoru hotovu animaci image_stromek nebo image_hvezda (případně jinou, kterou jste vytvořili v korespondenčním úkolu č. 3). Vyzkoušejte si nastavení všech zmiňovaných parametrů v záložce Rámec, Animace a Optimalizace. 2. Zjistěte jaká hodnota trvání rámce je vhodná pro pohyb otáčení hvězdy, pro let míče, otevírání dveří a jaká je vhodná hodnota na blikání. Vlastní poznámky:

46

5 SHRNUTÍ PRÁCE A DALŠÍ PŘÍKLADY V této kapitole se dozvíte: • informace o ukládání souborů v Malování a v Zoner Callistu • o ukládání hotové animace v GIF Animátoru • o některých postupech práce v aplikaci Malování a v Zoner Callistu Budete umět: • ukládat obrázky a hotovou animaci ve formátu GIF • lépe využívat postupů práce v Malování a v Zoner Callistu Klíčová slova této kapitoly: • uložit jako, export, formát GIF, ZMF, image_nazev Čas potřebný k prostudování kapitoly: • 1 hodina Průvodce studiem: Ukládání obrázků pro GIF Animátor znamená ukládání do formátu GIF. V Malování ukládáme pomocí Soubor / uložit jako. V Zoner Callistu musíme použít export do formátu GIF, neboť Zoner Callisto pracuje pouze s formátem ZMF. Hotový obrázek uložíme také ve formátu ZMF pro případnou pozdější editaci. Poté exportujeme všechny snímky do formátu GIF. Připomeneme si nejprve stručně postup práce a podíváme se na další nastavení a nástroje v Zoner Callistu. V závěru kapitoly si připomeneme ukládání hotových animací v Zoner GIF Animátoru a uspořádání všech souborů ve složkách, zejména jejich pojmenování.

5.1 Ukládání v Malování, postupy práce… Připomeňme si: tvorba jednotlivých snímků pro animaci „image_stromek“ byla vytvořena v Malování ze dvou snímků, další podle volby. Snímky byly uloženy pomocí Soubor / uložit jako s názvem souboru „s1“, „s2“ a typem souboru GIF (viz obr. níže). Snímek s2 byl barevně pozměněn v místech, které chceme animovat. Názvy souborů a složek volíme bez velkých písmen, mezer a diakritiky. Všechny soubory z jedné animace ukládáme do stejné složky.

47

Snímek s1 – ukládání obrázku je znázorněno v krocích 1. - 4: Soubor (1) Uložit jako (2) Název souboru „s1“ (3) Typ souboru GIF (4)

Při práci v Malování je praktické otevřít dvě okna Malování a pracovat s oběma okny. Např. Animace dveří domku z ukázky č. 2 na straně 38 byla tvořena se dvěma okny svisle vedle sebe.

V levém oknu Malování se po přesunu a umístění části dveří, využívalo kroků zpět, abychom se po uložení snímku vrátili zpět do výchozí pozice a mohli jsme tam umístit další část dveří. Postup práce při vytváření části dveří:

48

5.2 Ukládání v Zoner Callistu, postupy práce... Ve druhé kapitole jsme si vyzkoušeli v Zoner Callistu vytvořit pomocí vektorové grafiky jednoduchý tvar hvězdy, který jsme postupně otáčeli a ukládali pomocí exportu do formátu GIF. Postup práce: • Velikost stránky pomocí Soubor / Nastavení dokumentu / formát / A5 / na šířku: • Lze nastavit také síť pro snadnější orientaci v ploše. • Vybrali jsme v panelu nástrojů jednoduchý tvar hvězdy s libovolným počtem cípů • LTM = vybarvujeme okraj a PTM = vybarvujeme vnitřek • Hvězda musí být při vybarvování označená uchopovacími body pomocí tlačítka

„Výběr a editace objektů“

Nastavení dokumentu se zobrazením sítě a uchycováním objektů v síti může práci usnadnit, ale také způsobit potíže. Např. máme nakreslený velmi malý objekt a síť je velká a uchycuje nakreslený objekt na místo, kam nechceme. To odstraníme tak, že zjemníme síť nebo zrušíme uchycování.

49

• Připomeneme si otáčení hvězdy, které vidíme na obrázku vpravo. Jako příklad je zde uvedena ve sloupci animace větrníku a pro názornost jsou použity barevné hroty, abychom mohli pozorovat pohyb otáčení. V tomto případě bylo zapotřebí 12 exportů. Cvičení - postup otáčení hvězdy: • Klepněte v levém sloupci základního panelu nástrojů na tlačítko výběr: a hvězda se sama označí uchopovacími body:

• Když na označený obrázek klepnete dvakrát, objeví se ve středu hvězdy šipka, kterou lze otáčet. Každé pootočení uložte – exportujte do formátu GIF.

• Když na označený obrázek klepnete místo dvakrát pouze jednou objeví se ve středu křížek v kolečku – můžete jej vycentrovat uchopením a tažením myši a poté uchopit krajní rohový ohraničený bod a můžete také otáčet.

• Obě varianty otáčení uvedené výše jsou možné.

50

Poznámka: hvězdu s barevnými hroty nakreslíte tak, že na konce cípů modré hvězdy umístíte tvar malého kruhu ., který různobarevně vyplníte. Velkou modrou hvězdu s malými kulatými hroty na cípech seskupíte pomocí Objekty / Vytvořit skupinu. Objekty, které chcete seskupit musí být označeny výběrem (uhopříčně táhněte LTM přes všechny objekty, které chcete seskupit). Pamatujte si: v Zoner Callistu ukládáme jednotlivé snímky pro budoucí animaci pomocí Soubor / export. Snímky pojmenováváme stejně jako v Malování co nejjednodušeji a bez české diakritiky, mezer a bez velkých písmen. Typ souboru volíme opět GIF.

5.3 Ukládání animace v GIF Animátoru Obrázky, které jsme si předem vytvořili v grafickém editoru jako snímky postupných kroků pro budoucí animaci, vkládáme do rámců Zoner GIF Animátoru. Poté nastavujeme parametry animace a parametry jednotlivých rámců. Po spuštění animace a kontrole všech kroků, animaci ukončíme a uložíme. Ukládání provedeme pomocí Soubor/uložit jako, ponecháme formát GIF. Při ukládání je důležitý název souboru. Je vhodné, aby začínal klíčovým slovem image, který napovídá, že jde o soubor formátu GIF, avšak složený z více snímků. Při pojmenování souborů nepoužíváme velká písmena, mezery a diakritická znaménka. Doporučením je ukládat všechny obrázky GIF vytvořené v nějakém grafickém editoru pro budoucí animaci do jedné složky. Do stejné složky pak ukládáme i image soubor vytvořený v Zoner GIF Animátoru.

51

Shrnutí 5. kapitoly
V Malování ukládáme jednotlivé snímky pro budoucí animaci pomocí Soubor / uložit jako. Název souboru volíme co nejjednodušeji např. „s1“ další snímky pak stačí přepsat na „s2“, vyvarujeme se pojmenování s českou diakritikou. Při ukládání volíme typ souboru GIF.
V Zoner Callistu použijeme pro ukládání jednotlivých snímků export, tj. Soubor / export a stejně jako v Malování volíme jednoduché pojmenování souborů a typ souboru GIF.
Dbáme na to, aby jednotlivé snímky byly uloženy v jedné srozumitelně pojmenované složce animace_nazev. Z této složky pak vkládáme jednotlivé snímky do GIF Animátoru pomocí Úpravy / vložit z...
Po přehrání animace a po případných úpravách se celá animace uloží pomocí Soubor / uložit jako. Uloží se opět jako typ souboru GIF. Zde je důležité pojmenovat soubor s počátečním slovem „image“, abychom rozlišili tento soubor od ostatních jednotlivých snímků. Kontrolní otázky a úkoly: 1. Popište způsob ukládání obrázků do formátu GIF v Malování a v Zoner Callistu. 2. Popište způsob ukládání hotové animace v Zoner GIF Animátoru. 3. Jak budete pojmenovávat soubory obrázků pro budoucí animaci? 4. Jak budete pojmenovávat hotovou animaci? 5. Kam budete soubory ukládat? Vlastní poznámky:

52

6 UPLATNĚNÍ ANIMACÍ VE VÝUCE V této kapitole se dozvíte: • o využití animací ve výuce všeobecných v informatice a ve výuce počítačové grafiky • o možnostech zdrojů s návody na Internetu

předmětů,

Budete umět: • vymyslet animaci jako didaktickou pomůcku ve výuce Klíčová slova této kapitoly: • animace ve výuce, krokování a komentáře Čas potřebný k prostudování kapitoly: • 1 hodina Průvodce studiem: V této kapitole Vám představím pár nápadů z výuky pomocí animací. Zajisté Vás napadnou další zajímavé návrhy, jak využít účinně animací ve výuce a tato kapitola bude pro Vás inspirativní. V závěru kapitoly Vám nabízím pracovní listy s postupem práce pro vytvoření animace. Návody najdete také na webových stránkách Zoneru, jsou zde jen postupy, jak tvořit obrázek v Zoner Callistu, animování je již na Vás. Přeji Vám mnoho zdaru a chuti tvořit dle své fantazie.

6.1 Možnosti využití animací ve výuce Animace mají největší uplatnění ve výuce počítačové grafiky, ale i v kroužcích nebo volitelných předmětech. Učitel však může animace využít i jako didaktickou pomůcku v kterémkoliv vyučovacím předmětu. Zejména tam, kde se opakuje nějaký stálý postup, algoritmus. Příklady z praxe: Matematika:

… … (viz ukázka č. 3 na straně 42 - 43)

53

Pokud žákům umožníte prohlédnutí této animace ve výuce v počítačové učebně (nebo multimediální učebně), může si žák spouštět tuto animaci dle svých potřeb, má-li k ní přístup ve sdíleném adresáři síťové disku. Dalším příkladem mohou být animace početním výkonů, jejichž algoritmy si žáci mají osvojit. např. dělení celých čísel 10, 100, 1000, totéž s desetinnými čísly. Praktické využití mají animace na početní výkony se zlomky, rovnice, počítání se závorkami apod. Jazyk český:

V této animaci je nastaveno časování snímků – tj. trvání rámců tak, aby vyučující mohl přečíst celou větu a postupnými kroky uvedl, jak si má žák zdůvodnit podmět a přísudek. Animace je složena z 21 snímků. Na ukázce jsou první snímky, které jsou krokovány a přizpůsobeny výkladu učitele k určování podmětu a přísudku.

54

Informatika: Animace s komentářem o postupu práce s aplikací Word propojenou s Kalkulačkou pomocí kopírování do schránky:

Žák se v tomto snímku naučí používat efektivně kalkulačku a místo vypisování znění příkladu na číselné klávesnici kalkulačky, použije zkopírovaného příkladu ze schránky Wordu a vloží jej přímo do řádku na výpočty, kde se automaticky zobrazí výsledek.

55

Ukázky animací z výuky počítačové grafiky a animací: „image_kral“, další ukázky na http://www.zsskolska.cz

„image_prejezd“

56

6.2 Pracovní listy Pracovní list č. 1: „Animace dveří“ 1. Najděte na Internetu obrázek dveří a uložte jej do své složky. 2. Obrázek vložte do aplikace Malování. 3. Vytvořte 4 kopie dveří.

4. Druhou kopii upravte pomocí Obrázek/ roztáhnout či zkosit / zkosit / svisle / 20 stupňů 5. Třetí kopii upravte na 40 stupňů 6. Čtvrtou kopii upravte na 70 stupńů

7. Šířku dveří upravte takto:

57

8. Čtvrtou část dveří zkopírujte a překlopte pomocí Obrázek / překlopit či otočit / vodorovně. 9. Totéž proveďte se třetí a druhou částí dveří a vznikne řada 7 částí dveří, základní polohu tvoří první dveře č.1, pokračují dveře č. 2, 3….7:

10. Práci uložte – název souboru: „casti_dveri“, typ souboru GIF. 11. Otevřete si dvě okna Malování svisle vedle sebe (PTM klepněte na hlavní panel a zvolte

12. V prvním okně Malování si otevřete soubor „casti_dveri“ 13. Zkopírujte si část dveří č. 1 14. Vložte tyto dveře do druhého okna Malování. Upravte velikost plátna na dveře tak, aby byl ještě prostor pro otevíranou část dveří. 15. Uložte obrázek druhého okna Malování do složky „animace_dveri“, název souboru zvolte „1“ a typ souboru GIF.

58

16. Pokračujte na souboru „1“, ve kterém je základní poloha dveří. Přes tuto část nakreslete obdélník jako pozadí dveří (na ukázce je žluté pozadí, je dobré si toto pozadí zálohovat a uložit jako „pozadi“) a na toto pozadí přeneste z prvního okna část dveří č. 2 (transparentně) a uložte jako název souboru „2“ 17. Nyní využijte kroků zpět a pomocí Úpravy / Zpět odstraňte část dveří č. 2 a na její místo vložte část dveří č. 3. takto pokračujte až do úplného otevření dveří. 18. Otevřete si Zoner GIF Animátor a vložte do něj všechny snímky 1 až 7 uložené do složky „animace_dvere“. 19. Je vytvořena animace s otevíráním dveří, pomocí kopírování snímků docílíme, aby se dveře zavíraly. Provedeme to tak, že zkopírujeme 6. rámec a vložíme za 7. rámec (vznikne 8. rámec), dále zkopírujeme 5. rámec a vložíme za 8. rámec apod. Rámce budou kopírovány v tomto pořadí: 1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 2, 1. Vzniknou rámce 1. – 13. 20. Spusťte animaci a nastavte rychlost trvání rámců podle obrázku vpravo (rámce 1, 7 a 13 tzv. moment zpomalení). 21. Hotovou animaci uložte do složky animace_dvere pod názvem „image_dvere“, formátu GIF. 22. Gratuluji k úspěšnému vytvoření animace dveří.

59

Pracovní list č. 2: „Animace vlajky EU a vložení textu“ 1. Otevřete si aplikaci Zoner Callisto. 2. Nastavte si dokument na velikost A6 (Soubor / Nastavení dokumentu / A6 na šířku). 3. Nakreslete obdélník přes celou velikost dokumentu A6 a vyplňte jej modře (LTM i PTM na paletě barev). 4. Do modrého obdélníku umístěte v levé části pomocný kruh, který bude držet budoucí hvězdy. 5. Vedle plátna dokumentu si nakreslete malou 5cípou hvězdu žluté barvy (LTM i PTM na paletě barev). 6. Klepněte na pomocný kruh a držte klávesu Shift, poté klepněte na žlutou hvězdu (dodržte toto pořadí). Tím se označí dohromady kruh a hvězda.

7. Zvolte Objekty / Vícenásobné kopírování / Po křivce / Počet kopií 15 / ponechejte zatržítko Otáčet objekty podle křivky / OK. 8. Hvězdy se umístily na pomocný kruh, nyní klepněte na kruh (přes tlačítko „výběr“) a odstraňte jej.

9. Část hvězd v pravém kruhu odstraňte (označte a zvolte delete), do tohoto místa bude vložen text.

60

10. Text vložte pomocí tlačítka na obrázku vpravo. Klepněte do místa, kam chcete vložit text (označí se bílé pole s kurzorem pro napsání textu) a napište: „Zde probíhá projekt Výuka, který je spolufinancován ESF“.

Poznámka: text pište černě, abyste jej viděli při psaní na bílé plátno, teprve potom text označte a zvolte z palety barev LTM i PTM bílou barvu textu. 11. Práci zálohujte – uložte ve formátu ZMF do složky „animace_vlajka_eu“ pomocí Soubor / uložit jako. 12. Nyní si postupně schovejte všechny hvězdy pod modrý obdélník (začněte hvězdou podle obrázku níže). Využijte nástroje „hladiny“ (viz 3.krok). Postupujte podle kroků na obrázku:

13. Pokud jste všechny hvězdy ukryly, uložte první snímek budoucí animace do formátu GIF pomocí Soubor / Export. V názvu souboru ponechejte „Export1“ a typ souboru zvolte GIF a uložte. Další hlášení o exportu do bitmapy a velikosti odsouhlaste OK.

61

14. Ukryté hvězdy budeme nyní postupně odkrývat a každý krok ukládat opět do formátu GIF pomocí exportů. K odkrývání využijeme tlačítka „ZPĚT“ na základním panelu nástrojů. První odkrytou hvězdu exportujeme pod názvem souboru „2“, další „3“ až do „12“. 15. Otevřete Zoner GIF Animátor a vložte do něj všechny snímky „Export1“ až „12“.

16. Je vytvořena animace s postupným odkrýváním hvězd, pomocí kopírování rámců docílíme, aby se hvězdy zpět zakrývaly, vznikne tedy pohyb tam a zpět. To znamená, že zkopírujete 11. rámec a vložíte za 12, poté 10. rámec a vložíte jej za poslední rámec atd. Rámce budou kopírovány v tomto pořadí: 1, 2, 3 …, 10, 11, 12,11, 10, …3, 2. Vznikne celkem 22 rámců. Poslední 22. rámec je s jednou hvězdnou. 17. Při časování snímků – trvání rámců nastavte 1. rámci hodnotu 80, 12. rámci hodnotu 100, ostatním rámcům ponechejte přednastavenou hodnotu 10. Animaci uložte – image_hvezda. 18. Extra úkol: animaci můžeme vylepšit, když za 12. rámcem můžete vložit ještě další snímky, které si dotvoříte v Zoner Callistu, potřebujete mít obrázek se všemi hvězdami. V něm některé hvězdy schováte pomocí hladin pod modré plátno. Stačí tři snímky:

Tyto snímky lze opět pomocí kopírování rámců „rozmnožit“ a umístit v tomto pořadí …13, 14, 15, 14, 13…a pokračovat opět původním 12. rámcem až do postupného vymizení hvězd. Poznámka: návod k vytvoření vlajky EU najdete také na Internetu http://www.zoner.cz/navody. 62

Shrnutí 6. kapitoly
V této kapitole jste měli možnost inspirovat se animacemi, které lze využít ve výuce všeobecných předmětů a informatiky. Šlo o animace, ve kterých se opakuje nějaký stejný postup, algoritmus, který si žák má v novém učivu osvojit.
Pracovní listy s postupem tvorby animace slouží zejména pro žáky, kteří mohou vypracovat animaci podle návodu.
Další návody s postupem práce v Zoner Callistu najdete na webových stránkách Zoneru http://www.zoner.cz/navody.

6.3 Korespondenční úkol č. 4 Vytvořte animaci, kterou využijete ve výuce všeobecných předmětů (viz ukázky z kapitoly 6.1) nebo zvolte vytvoření pracovního listu, který popisuje postup práce k vytvoření animace pro žáky (viz ukázky z kapitoly 6.2). Práci pošlete tutorovi kurzu na dohodnutou e-mailovou adresu. Do předmětu e-mailu napište: „ESF – úkol č. 4“.

63

7 PROHLÍŽENÍ SOUBORŮ ANIMACÍ V této kapitole se dozvíte: • jak prohlížet obrázky pomocí prohlížeče Zoner Media Explorer nebo nejnovější verzí Zoner Photo Studio 8 Budete umět: • prohlížet a vyhledávat obrázky a animace pomocí prohlížeče Zoner Klíčová slova této kapitoly: • prohlížeč, Zoner Media Explorer, Zoner Photo Studio Čas potřebný k prostudování kapitoly: • 1 hodina Průvodce studiem: Animace, které uložíte do složek, si budete chtít prohlédnout. Můžete k tomu použít Průzkumníka Windows XP. Když si nastavíte zobrazení ikon jako Miniatury uvidíte obrázky ve zmenšené podobě, když si nastavíte zobrazení ikon jako Filmový pás, uvidíte animace v náhledu. K prohlížení hotových animací slouží také Zoner Media Explorer, který je stejně jako Zoner GIF Animátor součástí balíku Zoner Callisto 4 a 5. Zoner Media Explorer zcela nahradil novější editor fotek Zoner Photo Studio, který slouží také jako prohlížeč. V následujícím textu se podívejte na praktické využití prohlížečů animací pomocí výše zmiňovaných aplikací.

Hotovou animaci si můžete prohlédnout několika způsoby. Klepnete-li na soubor image dvakrát, automaticky se otevře Prohlížeč obrázků a faxů a zde si animaci můžete prohlédnout (viz obrázek vpravo).

64

Rychlejší možností je, mít při prohlížení image souborů s animacemi nastaveno prohlížení ikon jako „filmový pás“:

Při manipulaci s obrázky a animacemi oceníte aplikaci Zoner Media Explorer, která je součástí balíku Zoner Callista. Zoner Media Explorer 4 (5...) je tzv. multimediálním správcem souborů, který umožňuje prohlédnout si všechny vytvořené animace mnohem pohodlněji, než postupně otevírat všechny složky a hledat, kde se naše soubory nacházejí.

65

Zoner Media Explorer umožňuje kliknout na složku, která sama rozbalí všechny uložené soubory obrázků a animací. Pokud klepnete na obrázek dvakrát (viz obrázek výše), objeví se náhled v plné velikosti pomocí dalšího programu Zoner Viewer, který je také součástí balíku Zoner Callista. Inovací Zoner Media Exploreru je nová aplikace Zoner Photo Studio 7, 8, tato aplikace kromě všech předchozích funkcí umožňuje editovat digitální fotografie, na které je Photo Studio zaměřeno. Prohlížení obrázků pomocí Zoner Media Explorer nebo Zoner Photo Studio spočívá také v těchto výhodách při práci s animacemi a obrázky: • Umožňuje přenášet obrázky do jiných aplikací přímo metodou drap&drop, což znamená, že obrázek z okna Zoner Media Explorer uchopíte a přenesete do jiného okna např. Wordu nebo jiné aplikace. • Umožňuje prohlédnout obrázky jako tzv. slide show

• Náhledy s obrázky, zejména řadu jednotlivých snímků budoucí animace, si můžete vytisknout. • Snadněji přenášet soubory mezi složkami, mazat, přejmenovávat, kopírovat… • Nastavit velikost zobrazovaných miniatur obrázků:

66

• Filtrovat, které typy souborů chcete zobrazovat:

Závěr
Cílem tohoto textu pro distanční kurz: „Zoner GIF Animátor...“ bylo naučit se vytvářet obrázky v rastrové nebo vektorové grafice tak, aby tvořily postupné kroky budoucí animace. Tyto snímky vkládat do Zoner GIF Animátoru do tzv. rámců a nastavovat jim různé parametry, zejména hodnotu trvání rámců, pružnou velikost rámců, opakování animace do nekonečna. Kopírování a přesouvání rámců v okně náhledu, které umožňovalo simulovat pohyb zpět, když byl vytvořen pouze jeden směr (např. otevírání a zavírání dveří apod.).
Bylo důležité uvědomit si způsob ukládání do formátu GIF v Malování pomocí Soubor / uložit jako a v Zoner Callistu pomocí Soubor / export do tohoto formátu. Pamatovat si, že nestačí do Zoner GIF Animátoru vložit všechny snímky do rámců, nastavit jim všechny parametry a animaci spustit a zastavit. Důležité je si takto nastavenou animaci také uložit do formátu GIF. Přitom nezapomenout na klíčové slovo image v pojmenování souboru animace, neboť to zpřehlední orientaci, které soubory jsou pouhé statické obrázky formátu GIF a které jsou hotovými animacemi formátu GIF (tj. série obrázků poskládaných na sobě).
Uplatnění ve výuce bylo inspirací pro Vás. Věřím, že jste nechali svou fantazii pracovat naplno a máte nyní v zásobě animace, které Vám zatraktivní výuku. 67


Pracovní listy byly ukázkou, jak žákům předložit některé postupy bez našeho zdlouhavého výkladu. Na začátku je vhodné pracovat s nimi nejprve společně, než se žáci naučí rozumět všem postupům. Později stačí pracovní listy nabídnout a žáci pracují samostatně. Přeji Vám mnoho dobrých zkušeností a odkazuji na webové stránky uvedené níže, které budou aktualizovány podle potřeb kurzu. Autorka

Použitá literatura, Internet, ostatní materiály: • Uživatelská příručka Zoner Callisto 4 – vektorový grafický editor • webové stránky http://www.zoner.cz/navody • další zdroje – soubory s prácemi žáků z kroužku Počítačová grafika a animace • internetový odkaz na stránky školy s příklady animací v sekci Výuka / kroužky http://www.zsskolska.cz • Vlastní tvorba.

68

69