ANI02 Animace


Lekce ANI02

Cíl lekce

  • Pochopit metody překreslení – přechody snímků v animacích GIF.
  • Využívat průhlednost (transparentnost)
  • Aplikovat přechody mezi snímky v programu Microsoft GIF Animátor.
  • Umět využít Irfan View pro práci s animovanými soubory a
  • získání informací o animovaném souboru.

Úkoly a cvičení

Vytvořit pokročilý animovaný soubor například pro „Den otevřených dveří“ nebo na téma Veselé Velikonoce, Vánoce, osobní PF, firemní reklamní banner a podobně.
Další pokyny k úkolům a cvičení viz odstavec Úkoly.

více cvičných a ukázkových animací

Klíčová slova, pojmy

Metody překreslení, přechody snímků, Pozadí, Leave (ponechat), Restore Background (obnovit pozadí), Restore Previous (obnovit předchozí), transparentnost – průhlednost.

Software

Cvičné a ukázkové soubory

O trochu níže si zkopírujte oba GIF soubory s tématem „Den otevřených dveří“. Dále ve školní síti ve složkách
…\Pub-Out\Grafika, …\Pub-Out\Obrazky a nebo zde naleznete další cvičné a ukázkové soubory. nahoru

Dva cvičné animované soubory


První soubor – vrány

původní starý, jen s vránama
Před lety na bývalé škole jsem vytvořil animovaný obrázek ke dni otevřených dveří. Pojďme s ním experimentovat a doplnit jej. Otevřte jej v programu Microsoft GIF Animator nebo Zoner GIF Animátor.

Druhý soubor – doplněný texty

nový doplněný o texty
Doplněná pozvánka na „Den otevřených dveří“

Prostudujte si na snímcích nastavení metody překresleni a postupné zobrazování snímků, překreslování textů a přilétajících havránků.nahoru

Jak na to


Přechody mezi snímky

  • Undefined (nedefinováno)
    Prohlížeč nedělá nic s pozadím před zobrazením dalšího obrázku.
    EN: Directs the browser to do nothing to the background before displaying the next image.
  • Leave (ponechat)
    Ponechá předchozí obrázek …
    EN: Directs the browser to leave the previous graphic image as the next is drawn. This choice can create a shadowing effect.
  • Restore Background (obnovit pozadí)
    Obnoví pozadí, překreslí původní pozadí …
    Directs the browser to redraw the original background as the current image is drawn.
  • Restore Previous (obnovit předchozí)
    Obnoví (překreslí) předchozí obrázek …
    EN: Directs the browser to redraw the previous image as the current image is drawn.

Na chybách se učíme


Soubor: LETAK0.gif
Použitá metoda: Restore Backgroung
Povšimněte si, jak zde na tomto obrázku zůstává po vráně modré pozadí stránky a v přehrávači GIF Animátoru šedivé pozadí. Metoda RESTORE BACKGROUND obnoví pozadí, překreslí původní pozadí, tj. pozadí stránky.
Transparency (průhlednost): bílá barva kolem vrány


Soubor: LETAK1.gif
Použitá metoda: LEAVE
Zde je vidět, že zůstávají viditelné původní vrány, záměrem však je, aby zmizely. Metoda LEAVE ponechá předchozí obrázek.
Transparency (průhlednost): bílá barva

nahoru

Příprava textů

Pro úplnost popis rychlopřípravy textů do animace. Jsou to oříznuté snímky obrazovky z textového editoru s průhledností a efekty. Berte to jako inspiraci a nouzové řešení, když není ‚po ruce‘ vhodný grafický editor. Nebo předvedení několika efektů z programu IrfanView.

Můžete použít prakticky cokoliv. Netradičně třeba TEXTOVÝ nebo vektorový grafický editor a následně klávesou PRINT SCREEN sejmout obrazovku do schránky, tu pak vložit do Irfan View a oříznout …

Stejný postup, ale navíc jsem nezapomněl na průhlednost…

Úprava byla provedena pomocí efektu v programu Irfan View.
MENU: Obrázek/Efekty/Detekce okrajů

Úprava byla provedena pomocí efektu v programu Irfan View.
MENU: Obrázek / Efekty / Reliéf
Opravdu rychlovka, nic moc … nahoru

Příprava v Irfan View

  • Použiju textový editor namísto grafického. Napíši text, levý ALT + Print Screen, Irfan View, CTRL + V, oříznout a je to za 99,5 sekundy na druhý třetí pokus za 3 x 99 vteřiny hotovo. Pak nastoupí efekty TIP : vykricnik.png   – WRITER, WORD, napíši a naformátuji text
      – levý ALT + Print Screen (zkopíruje aktivní okno do schránky, získá „screenshot“)
      – spustit Irfan View
      – CTRL+ V (vloží obrázek programu – „screenshot“)
      – oříznout, nastavit velikost v pixelech, efekty
      – a je to (uložit jako GIF s případnou průhlednou barvou)
  • Doplňte datum a čas, zvolte bílou barvu jako průhlednou.
  • Doplňte vhodný text ve dvou krocích s efekty, s podbarvením, se stínem apod.
  • POZOR na nastavení průhledné bílé barvy.
    Viz obrázek ´Která je bílá?´

nahoru

Úkol


No a teď směle do díla. Cílem je animace na Den otevřených dveří. Udělejte mi radost, několik nejhezčích, nejnápaditější prací nabídnu ke zveřejnění na školním webu (po odstranění textů příjmení jméno atd.). Předpokládám a jsem si vědom, že to je práce na více hodin než jsou 2 hodiny ve škole. Pracovité vycením a na líné se vycením.
😉

  • Pokud chcete výborné hodnocení, splňte beze zbytku zadání.
  • Čas odevzdání měřím v Pub-in, ale ve Vaší složce musí být všechno.
  • Jako obvykle bez krve, násilí a zbytečné erotiky. Že by zase nudná školní veřejně publikovatelná práce?
  • Napřed si prostudujte a prakticky prozkoumejte hotové soubory z této stránky, jak jsou dělány, jaké metody překreslování (Undraw Method) jsou použity u vran a textů. Povšimněte si také polohy obrázků s vránami zadávané do polí Left a Top
  • Vemte z našeho webu, vyfoťte, naskenujte fotografii naší školy. Cení se vlastní foto! Záleží na stanoveném času, Vaší ochotě a snaze.
  • Pokud nepoužijete vlastní foto, uložte si do souboru URL adresu, odkud je použitá fotka.
  • Na přípravu textů použijte jakýkoliv software. Na efekty a úpravy (vlastní výběr, oříznutí, velikost v pixelech, uložit jako s průhledností) použijte například Irfan View.
  • Připravte pro naši školu animovaný GIF soubor na nové termíny. Pokud ještě nejsou na školním webu známy, tak si je stanovte cvičně sami.
  • Dílčí kroky ukládejte taky. Třeba je číslujte nebo písmenkujte.
  • Napište hodně malým, ale čitelným písmem svoje příjmení, jméno, třídu, skupinu a datum tvorby. Pokud možno vpravo dole tak, aby nerušilo celkový dojem.Identifikace být MUSÍ!
  • Mí studenti použijte přihlašovací jméno (LOGIN), podtržítko, název lekce (číslo cvičení – lekce).
  • LOGIN_ANI02.gif pro výsledek
  • LOGIN_ANI02a.gif, LOGIN_ANI02b.gif, atd. dílčí soubory – exporty z vektorů (PNG konvertovat na GIF) s texty, vránami apod.
  • LOGIN_ANI02a.svg, LOGIN_ANI02b.svg, atd. nebo xcf, psd, ai pro pracovní soubory s dílčími kresbami, texty apod.
  • LOGIN_ANI02.html soubor s webovou stránkou pro zobrazení v prohlížeči.
  • Studenti vytvoří na svém disku složku disk:\grafika\ANI02 a sem uloží všechny soubory.
  • Pouze jeden jediný soubor – animovaný výsledek do Pub-in:
    ...\Pub-in\VašeTřída\LOGIN_ANI02.gif
  • Použijte upload na server  SEPTIM 
  • … a nebo postaru z „flashky“ zítra ve škole.
  • No a vítaní návštěvníci, pošlete mi svoje díla emailem (viz pata titulní strany). Děkuji.

nahoru

Procvičte si, další náměty


vykricnik.png
  • Velikonoce, Vánoce, PF
  • Panáček, zajíc, kuře, ježek či hroch z vektorového editoru
  • Foto doplnit rotujícím textem (XARA)
  • Srdce propíchnuté šípem s postupně se měnícími iniciálami spolužaček
  • Přetvořené reklamní náměty z webu, TV (Bóbika; mohli jsme Vám dát, ale mi NE)
  • Recese, legrace, decentní vtípky bez sprosťáren, směle vpřed…
  • Pochlubte se svými díly, zašlete, vystavím a OCENÍM! 🙂