Úvod → GRAFIKA → LEKCE >>>  Corel R.A.V.E.→ Cíle - Teorie - Jak na to? - Náhledy v Irfanu a WWW - Úkoly  

ANI06: Corel R.A.V.E. * ryba

Úvodní informace
Cíle lekce
  • seznámit se s programem pro vektorovou animaci Corel R.A.V.E.
  • pochopit základ vektorové animace - tweening
  • aplikovat znalost tweeningu na vektorové animaci kresbou Bézierovými křivkami
  • zvládnout export do formátu flash (SWF) a GIF.
Úkoly a cvičení
Vyrobit vektorově animovanou "rybu s úsměvem" do souboru CLK a exportovat do formátů SWF a GIF.
Podrobnosti a další úkoly k procvičení viz odstavec Úkoly.
Úkol: vytvořte taky svoji rybu s úsměvem
Klíčová slova, pojmy
Corel R.A.V.E., CLK, SWF, flash, časová osa, snímek (frame), klíčový snímek (keyframe), počet snímků za vteřinu (per frames), tweening, Bézierovy křivky, práce s uzly
Software
Corel RAVE, součást balíku Corel, komerční software
Cvičné a ukázkové soubory
Ve školní síti ve složkách
...\Pub-Out\Grafika, ...\Pub-Out\Obrazky a nebo
zde najdete další ukázky vektorových animací ...
Odkazy
Na serveru GRAFIKA on-line je umístěn velmi zdařilý seriál o tvorbě animací v programu Corel R.A.V.E.
Projděte si jej, nebudu nosit dříví do lesa, když je zde tento návod.


nahoru 
Trocha teorie
Vektorová animace
Obdobně jako u statických obrázků je vektorová grafika ve výhodě menší velikostí souborů a stejnou kvalitou při změně rozměrů výsledné animace.
Sestavování animace se odehrává na časové ose, kde je graficky znázorněm sled snímků v čase za sebou. Objekt je nakreslen (obrázek vložen...) jenom v určitých snímcích, mezi nimi se tvar, poloha, barva aj. vlastnosti dopočítávají. Tyto snímky jsou označovány jako klíčové (keyframes).
Způsob práce je tedy naprostro odlišný, objekty vkládáme na učitou časovou pozici, danou pořadovým číslem snímku (frame) a toto místo označíme jako klíčový snímek. Viz různé ukázky vektorových animací připravených v Corel R.A.V.E.
Wikipedie
Jak vidí wikipedisté pojem animace, film, počítačová animace?
Grafika On-line
Za úvodní lekcí seriálu o Corelu R.A.V.E. následují dvě lekce, které vysvětlují tzv. TWEENING. Je základem animací ve vektorovém prostředí.
Lekce Tweening jako základ animace a Pokročilé možnosti tweeningu poskytují velmi dobře výchozí znalosti a dovednosti. Jen se neboj! (bez .com)



nahoru 
Ukázka "Jak na to"

Projděte si napřed výše uvedené odkazy na Grafika On-line s návodem. Vlevo od animace uvedu jen heslovitý a stručný popis v bodech, pro přehled při sledování ukázky. Podrobnější výklad je níže pod animací.
Pro dataprojekci tutorial na samostatné stránce





- marné hmatání
- smazat nadbytečný bod
- 1. až 15. snímek je stejný
- vložit klíčový snímek = změna na tween
TIP * FINTA:
- další klíčový snímek doprostřed
- na zkoušku odstranit a znova vložit
- na 8. snímku vyloudit úsměv ryby
- náhled animace
- na 8. snímku další úpravy
- F4 umístít zpět do okna celou rybu
- náhled animace
- oko je špatně
- skok na první snímek
- oko zviditelnit až do 15. snímku
- náhled animace
- uložit
- export do SWF
- nebo do GIF
- nebo AVI
- a nebo taky do MOV



Popis "Jak na to"
  • Po marném hmatání myší jsem vzal tvarovací nástroj (práce s uzly) a odstranil jeden bod, je to hezčí a objekt má méně bodů.
  • Natažením objektu (obrys ryby) po časové ose snímek 1 až 15 dosáhneme, že tento objekt "bude vidět" 15 snímků (1. až 15.). Je však statický, neměnný, zatím
  • Vložením klíčového snímku dojde k zásadní změně - objekt jsme převedli na animaci tween, kulaté hraniční body se změnili na čtverečky, oba hraniční body se staly klíčovými snímky. V těchto klíčových snímcích můžeme upravovat objekt a ostatní snímky mezi nimi se dopočítají. Změny však uděláme jinde.
  • Marné klikání za účelem vložit někam doprostřed ještě jeden klíčový snímek. Zdařilo se vybráním objektu, vložím tedy klíčový snímek
  • Na zkoušku a na ukázku odstranit a znova vložit klíčový bod. Opravdu, musí se napřed vybrat objekt.
  • Proč další klíčový snímek a uprostřed? Finta!Při nekonečném počtu opakování bych byl rád, aby začátek (1. snímek) a konec (15. snímek) byly snímky naprosto stejné. Změnu tedy provedu někde uprostřed, třeba na 8. snímku. "Okrajové snímky" jsou pak naprosto stejné, po 15. následuje ve smyčce zase 1. snímek, ryba neposkakuje. Zkuste si, experimentrujte a pak si vzpomeňte na tato slova.
  • Upravím úsměv ryby pomocí Bézierových editačníh bodů. Při úpravách úsměvu mi ryba utekla "mimo záběr", vzpomínka na F4 z Corelu se hodila = vybraný objekt zvětšit na veškerou dostupnou (k tomu určenou) plochu. My klávesovití to oceníme.
  • Spustím náhled
  • Oko divně bliká, proč? je pouze na 1. snímku, natáhnu jej tedy až do konce animace. Jak? Vrátím se na 1. snímek tam totiž je oko vidět, vyberu jej myší a na časové ose se mi posune výběr na tento objekt. Natáhnu do 15. snímku
  • Uložím do formátu RAVE tj. nativní formát CLK
  • A exportuji do SWF tj. formát MacroMedia Flash
  • nebo GIF

Na změnu nastavení je třeba mít teoretické znalosti a něco zkušeností. Dnes zmáčkněte OK. (Bojím se, že tomu tak bude i zítra...)



nahoru 
Vyzkoušejte dílo v Irfan View - náhled
Pokud jsou nainstalovány PLUGINS, nema problema... Spustí se přehrávač flash animací. Lze v něm zjistit i potřebné parametry: počet snímků, počet snímku za sekundu (rychlost), výška, šířka apod.
gra06_iv_flash.gif, 10 kB gra06_iv_flash.gif, 10 kB
Vyzkoušejte dílo v HTML souboru - náhled

Publikovat v síti WWW

Vygeneruje HTML a SWF soubor. Kód webové stránky pro flash není jednoduchý, vyžaduje větší zkušenosti

Náhled v externím prohlížeči

Podobné. Jen s tím rozdílem, že soubory tvoří v adresáři ...\TEMP\...
Jako obvykle to zlobí buď v Opeře a FireFoxu nebo v Exploreru. Ale to už je nutný folklor Microsoftu, který nedodržuje standardy W3C.org a vše řeší z pozice své finanční síly.
Tyto dvě možnosti zkrátka nepoužívám. Zkuste si sami. Nebo použít HTML kód. Je drobátko složitější:
HTML kód pro zobrazení SWF
stáhněte si HTML soubor pro_swf.html pravým myšítkem
Vyměňte název souboru gra06_ryba.swf a změňte výšku a šířku. Mělo by pracovat v prohlížečích Internet Explorer, Opera, Mozilla Firefox


nahoru 
Úkoly a cvičení
Názvy souborů?
Jako obyčejně. Vaše přihlašovací jméno (LOGIN), podtržítko, název lekce (číslo cvičení), rozlišení pořadí více souborů a, b, c ...
LOGIN_ANI06a.gif, LOGIN_ANI06b.gif, LOGIN_ANI06c.gif, ...
Kolik?
Souborů kolik chcete, přesněji: aspoň jeden!
Kam s tím?
Do pupínu (...\Pub-in\VašeTřída)
Náměty a témata úkolů
    Nakreslete smějící se rybu jako v Corelu (Draw) nebo OO.o Draw. Doplňte nějakým dalším pohybem:
  • Zamává ocasem...
  • Plácá ploutvemi
  • Vystřikuje vodu
  • Spolkne a vyplivne malou rybku
  • Fantazírujte, zůstává však podmínka: ryba s úsměvem
TIP * vyzkoušejte si * procvičte si
  • Doplňte textem a zkuste pohyb po nějaké cestě
  • Rozbalte do nové prázdné složky pomocí Irfanu nějaký složitější GIF a přemýšlejte: vzniklo to určitě z těchto obrázků?
  • Zkuste jiné objekty: zvíře, človíček, fotky a další operace: rotace, velikost, zrcadlení
Kontrolní otázky
  • Kterému programu přísluší nativní přípona (formát) souboru SWF?
  • Jaký je princip vektorové animace?
  • Napište postup tvorby vektorové animace v Corel R.A.V.E., zvolte si sami nejjednodušší příklad.
  • Kolik obrázků obsahuje animace s usměvavou rybou? (první obrázek této stránky)
  • Jaké parametry (vlastnosti) mají jednotlivé obrázky z téhož souboru? (první obrázek této stránky)