Animace s Adobe Edge Animate

Uživatelé na webu očekávají, že najdou velkolepé návrhy a ocení animace, které k těmto návrhům přispívají, pokud neztrácejí čas nebo negativně neovlivňují navigaci na stránce.
Dobře udělané animace zaměřují pozornost na důležité detaily, mohou ukázat, jak aplikace funguje, a pomoci navigaci, pokud splňují předchozí požadavek, kde bylo mnoho z těchto animací vytvořeno pomocí Blikat a pokud měly potřebnou kvalitu, byly uživatelem dobře přijaty.
Ale doba se změnila a stejně jako technologie také vyvinuly způsob vytváření animací, přichází to Adobe Edge Animate, nástroj, který nám umožňuje vytvářet animace pomocí HTML5, CSS3 a JavaScript bez nutnosti znalosti programování.
Výše uvedené může znít trochu komplikovaně, jak je možné mít nástroj, který mi pomáhá vytvářet animace v těchto technologiích, bez znalosti programování? Není to tak složité, jak se zdá, ale nejprve musíme tento nástroj znát a musíme s ním pracovat, proto jej spustíme a přijme nás domovská obrazovka, která by měla vypadat takto:

ZVĚTŠIT

Na pravé straně vidíme několik odkazů, kde se dozvíte, jak pomocí nástroje vytvářet animace, a na pravé straně odkazy na otevření souboru nebo jeho vytvoření. Klikneme na odkaz Vytvořit nový a budeme přeneseni do pracovního prostoru nástroje, prozatím si s tím nebudeme dělat starosti, ale chystáme se uložit náš projekt, abychom mohli prozkoumat strukturu vytvořenou nástrojem, podívejme se, jak naše struktura vypadá:

ZVĚTŠIT

Pokud jsme obeznámeni s vývojem webových aplikací, můžeme vidět některé soubory se známými příponami, podívejme se na funkci každého z nich v rámci projektu Edge Animate:
.SouborTento soubor nástroj používá ke sledování našeho projektu.
.Html souborTento soubor popisuje webovou stránku, která používá kód HTML, stejně jako ostatní stránky na internetu.
.Js souborTyto soubory obsahují kód JavaScript pro náš projekt, který definuje prázdnou fázi pro naši animaci a provádí další nezbytné úkoly v projektech Edge Animate.
Stejně jako tyto soubory ve složce edge_includes máme dva soubory JavaScript additional, což jsou knihovny pro náš projekt a na které se odkazuje v rámci našeho HTML a jeho funkcí je provádět pohyb jako takový.
Jakmile uvidíme, jak je náš projekt strukturován, je načase znát oblasti našeho pracovního prostoru, nejprve se podívejme, jak vypadá:

ZVĚTŠIT

Každý panel je označen názvem, kde Prvky, Vlastnosti a Časová osa Mají nástroje a widgety pro vytváření animací. Největší panel je známý jako fáze o Etapa a tam vytvoříme animaci, podívejme se blíže na každý z prvků v našem pracovním prostoru:
EtapaZde se zobrazuje a animuje grafika a text projektu, má omezení ve svém uspořádání a umožňuje nám skrývat prvky nebo je do něj umisťovat. Navíc když uložíme náš projekt Animovat stará se o uložení textu a grafiky jako HTML stránky.
PrvkyPrvky jsou objekty, které přidáváme na naši scénu, a v důsledku toho se objevují na naší konečné webové stránce, kde těmito prvky mohou být ilustrace, fotografie nebo dokonce text.
VlastnostiPrvky mají vlastnosti, které mohou ovlivnit jejich polohu a dokonce i vzhled na jevišti a můžeme je spravovat pomocí panelu Vlastnosti.
Časová osaUmožňuje nám uchovávat záznamy o prvcích a jejich vlastnostech v průběhu celého projektu.
KnihovnaZde můžeme uchovávat záznamy o zdrojích, které do projektu importujeme, a poskytovat snadný přístup k symbolům, kterým věříme Animovat.
NástrojeZobrazují se v horní části pracovního prostoru. Používáme je k vytváření, výběru a úpravám prvků na jevišti, není jich mnoho, ale byli bychom překvapeni, kdybychom věděli, jak moc s nimi můžeme dělat.
Protože víme, jak je náš nástroj distribuován, a známe v něm pojmy, můžeme se pustit do vytvoření naší první animace.
Abychom vytvořili naši první animaci, budeme trochu experimentovat s přechody na daném obrázku, podívejme se na následující kroky:
1- Vytvoříme nový projekt s možností nový soubor v případě, že jsme zavřeli, ve kterém pracujeme na porozumění struktuře a prvkům v nástroji. Když spustíme projekt, naše fáze je prázdná, můžeme to změnit ve vlastnostech etapa na levé straně obrazovky stiskneme bílý rámeček a vybereme barvu, kterou preferujeme, nebo v případě, že máme barvu v hexadecimálním zápisu, můžeme ji zahrnout, jak vidíme na následujícím obrázku:

ZVĚTŠIT

2- V případě tohoto tutoriálu jsme vybrali tmavou barvu, takže obrázek, který zahrneme do souboru etapa zvýraznit. Nyní, abychom zahrnuli obrázek, jdeme na Archiv a vybíráme importovat, zobrazí se průzkumník souborů a vybereme obrázek, který zahrneme:

ZVĚTŠIT

Je důležité, abychom ve vlastnostech našeho scénáře měli přetečení u přetékat v skrytý od našeho etapa představuje malou část všech našich HTML, takže pokud nechceme vidět prvky mimo jeviště, je důležité mít pro tuto vlastnost tuto hodnotu. Můžeme také změnit název našich prvků v sekci Vlastnosti, tímto způsobem je můžeme v našem projektu lépe identifikovat.
3- Nyní jdeme na naše Časová osa a ověříme, že je počítadlo přehrávání na 0:00 začít s naší animací. Zde přichází ta zajímavá část a zde musíme věnovat maximální pozornost, nejprve musíme ověřit, že režim klíčového snímku stiskne stejně jako režim automatického přechodu, který můžeme vidět na následujícím obrázku:

K vytváření našich animací musíme použít funkce Přepnout pin který se aktivuje v tlačítku vedle režim automatického přechoduPři aktivaci tohoto tlačítka aktivujeme rámečky nebo přechod a musí být doprovázeno žlutým počítadlem, protože tímto způsobem můžeme provést přechod o tolik sekund, dokud nepřesuneme náš Pin na stejnou úroveň jako druhé počítadlo.
4- Provádět naše první přechod zmáčkneme tlačítko Přepnout pin a vezmeme druhé počítadlo a přesuneme ho 200 sekundPoté přesuneme náš obrázek do spodní části obrazovky a uvidíme, jak to vypadá:

ZVĚTŠIT

Jak vidíme část zvýrazněnou modře v Časová osa představuje přechod, jehož náhled si můžeme zobrazit, pokud stiskneme mezerník. Potom vidíme, že je docela snadné provést přechod, ale co když chceme provést druhý přechod nebo více z nich? K tomu musíme přesunout naše Kolík směrem k druhému pultu, tímto způsobem ukazujeme na Animovat že zavíráme proces prvního přechodu a můžeme začít nový.
5- Uděláme a druhý přechod kde tentokrát budeme snižovat neprůhlednost našeho obrazu, proto vybereme náš obrázek snížením jeho neprůhlednosti na 46% a jak jsme zmínili, přesuneme Kolík na druhém čítači a zopakujte kroky bodu 4, podívejme se:

ZVĚTŠIT

6- Nakonec uděláme a třetí přechod dokončit naši animaci. Jak již víme, posuneme náš druhý čítač o několik sekund, přetáhneme obrázek diagonálně doleva a přechod uzavřeme posunutím Kolík o druhém počítadle:

ZVĚTŠIT

7- Uložíme svou práci a stisknutím mezerníku zobrazíme naši animaci, pokud stále nejsme spokojeni, můžeme se pohybovat přes přechody, které jsou v naší aplikaci zastoupeny modrou barvou Časová osa a upravíme hodnoty, nebo pokud si přejeme typ přechodu.
Protože jsme s naší prací spokojeni, je načase provést poslední krok, a to zobrazit jej pro prohlížení v prohlížeči, což je cíl, pro který pracujeme.
Existují dva způsoby, jak zobrazit naši práci, první a nejjednodušší lze provést z nástroje, proto přejdeme na kartu Archiv a vybíráme Náhled v prohlížeči, která okamžitě otevře animaci v našem výchozím webovém prohlížeči:

Druhý je o něco složitější, pokud nemáme zkušenosti s vývojem webu, což je převzetí souborů a integrace s naší webovou aplikací. Při tom je důležité být velmi opatrný a zahrnout všechny soubory generované Animovat jinak animace nebude fungovat.
Tímto jsme dokončili tento tutoriál, kde jsme mohli vědět, jak to funguje Adobe Edge Animate, vidět jeho nejdůležitější vlastnosti a vytvořit naši první animaci během několika minut bez potřeby jediného řádku kódu, generovat ji pomocí HTML5 Y JavaScript pro implementaci do jakékoli webové aplikace.