Vytvoříme nový soubor, uděláme jej o velikosti 800x600 a přeneseme do něj nějaké soubory, konkrétně těchto pár obrázků a „hluk lesa mp3“, tedy zvuk. Přesouvám to sem. Výsledkem je tento obrázek - je to les, říká se tomu „bg“, „play“ a „pause“, to jsou tlačítka. Teď je přesunu dolů, pojďme je přesunout, něco takového - nejjednodušší možnost.

Teď spustím animaci, stisknu cntr+enter, je tam jen les a jen dvě tlačítka, nic nefunguje. Pokud chci, aby se mi zvuk přehrával automaticky, nazývá se to „lesní šum“, pak musím vybrat tuto vrstvu a poté vybrat „automatické přehrávání“, nyní, když stisknu cntr+enter, zvuk se přehraje. Úžasný.

Jak přidat klikací odkaz na video v Adobe Edge Animate.

Pokud jsme jen nakreslili nějaké tlačítko a je tam nějaké pozadí, tak když na něj klikneme, nikde žádný přechod nebude. Přidat interaktivní odkaz Musíme vybrat toto tlačítko, kliknout pravým tlačítkem na akci otevřít, na tlačítko faul, tak tomu říkám, a kliknout na klik, tedy na to, co se po kliknutí udělá. A zde musíme vybrat Open you are raol.

Jak na to, vám ukážu v tomto videu, není to nic složitého, ale je potřeba správně pochopit, kam je potřeba zkopírovat správný kód a kam jej vložit.

Řekněme, že ano video vytvořené v adobe edge animate, když na něj kliknete, otevře se požadovaný vstupní stránka, je ve formátu edge animate a je uložen ve složce se zdrojovými a Java skripty. Otevřete jej v libovolném textový editor, můžete použít libovolné testovací editory, například: poznámkový blok atd.

Jak zacyklit animaci v Adobe Edge Animate, tedy jak ji udělat tak, aby při přehrání do konce začala znovu od začátku a pokračovala donekonečna.

Zde můžete zkopírovat klíčové snímky, to znamená, že vyberu jeden snímek, stisknu cntr+c, kliknu na požadované pole, stisknete cntr+v, animace se bude opakovat, to znamená, že se nebude opakovat, ale v tomto případě přejděte z výchozí bod zpět do výchozího bodu. Pokud spustím toto video a stisknu cntr+enter, vidíme, že animace trvá pouze 1 sekundu, přejde na jednu stranu a vrátí se na druhou.

Jak na to, vám ukážu v tomto videu, není to nic složitého, ale je potřeba správně pochopit, kam je potřeba zkopírovat správný kód a kam jej vložit.

Řekněme, že máte banner vytvořený v Adobe edge animate, když na něj kliknete, otevře se požadovaná vstupní stránka, je ve formátu edge animate a je uložena ve složce se zdrojovým kódem a Java skripty. Otevřete jej v libovolném textovém editoru, můžete použít libovolné testovací editory, například: poznámkový blok atd.

Dále chci tento banner vložit na web. co je třeba udělat? Musíte si stáhnout indexový soubor, poté jej otevřít v textovém editoru, zkopírovat adobe edge kód a na konci přidat kód sem před „hlavu“, poté před název místa, kam přidáme náš banner, před div. Pro přesnější provedení jsou pokyny, které vám pomohou: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Poté uložíme a přejdeme na službu FTP, používám filezilla, najdu umístění úložiště vašeho webu a zkopíruji složku indexu do vašeho souboru, který se nachází na serveru a nahradí aktuální soubory. Dále stáhneme všechny Java skripty a aktualizujeme web. Vše je připraveno – funguje animace a otevře se i karta se vstupní stránkou.

Pokud máte o takové lekce zájem, přihlaste se k odběru mého kanálu, protože... v blízké budoucnosti bude mnoho nových videí - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – řekněme, že máte banner vytvořený v Adobe edge animate

01:30 – přidat banner na stránky

02:09 – přidejte kód před značku „head“.

02:50 – pokyny pro přidání banneru na stránky

03:31 – upload souborů na server

05:29 – aktualizujeme stránky a vše je připraveno!

Připojte se a ptejte se:

Stáhněte si tři šablona zdarma Muse: http://site/free-landing.html

http://vk.com/adobeedgeanimate

Jsem na VKontakte: http://vk.com/danilfimushkin

Na webináři jsem řekl a ukázal, jak se dá z vektorové ilustrace udělat plnohodnotný animovaný banner.

00:17 – začínáme animovat vektorovou ilustraci v Edge Animate
14:06 – vytvořte pohyb tlapek postavy
16:54 – výhody vnořeného symbolu
17:48 – co je vnořený symbol
18:24 – psaní smyčkové animace
19:42 – smyčková animace je připravena
23:40 – vytvořte mrknutí oka
26:54 – určit názvy souborů při ukládání
27:57 – animace „rozbalovacího“ textu
28:39 – připojení pohybové křivky – změna osy animace
30:03 – průběžné shrnutí animace, vytvoření zasněžené krajiny a animace sněhové vločky
33:39 – Recenze Edge Animate
34:52 – domácí úkol
35:25 – jak přidat aktivní odkaz
39:09 – vytvoření několika tlačítek a připojení odkazů

Připojte se a ptejte se: http://vk.com/adobeedgeanimate

UPD 6. prosince 2015:
Produktový manažer pro Flash Runtime a Adobe AIR řekl, že ano nemít plány přestat pracovat na Flash Runtime a AIR a přejmenování produktu pro tvorbu obsahu v žádném případě nesouvisí s osudem Flash Player a související ekosystém.

Všechno by bylo v pořádku, až na jednu nuanci, která výrazně mění význam - technická negramotnost a obecné copy-paste. Publikace se navzájem přetiskují a přidávají další a další „fakta“, která nejsou v originále. Jedním slovem - poškozený telefon.

Původní článek http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html uvádí, že Adobe přejmenovává Flash Professional na Animate CC. Navíc uvádějí, že zákazníci chtějí více podporovaných platforem atd.

A nepřekvapilo mě, že mnoho lidí nevidí rozdíl mezi Flashem a Flash Professional. Na zpravodajských webech se začaly objevovat různé gagy s odkazem na další zdroje, které se propojují dále v řetězci. A ne vždy originál.

Slovo Flash je dnes vnímáno jako plugin do prohlížečů. Technicky je to Flash Player. Existuje ale nástroj pro tvorbu obsahu – Flash Professional. Kdyby Microsoft přejmenoval Word na TextMachine, křičeli by lidé, že „Microsoft přestal vyvíjet Word?“ I když je napsáno černé na bílém, že bude podporována tvorba obsahu a upravovat data?

Ze svých vlastních příkladů mohu předvést živý obraz. Místní klienti se mě ptají, co použijeme k vytvoření animace pro prezentaci pro iOS. S hrdostí to mohu říci ve Flash Professional. A klient je ve strnulosti. Po chvíli říká:

"Ale na rozbočovači píšou, že je blesk mrtvý a na tabletu nefunguje"

A pak upadnu do strnulosti. Technická negramotnost klientů a autorů článků o flashi nutí lidi vzdalovat se od požadovaného výsledku. Naštěstí se klient nechal přemluvit a byl s výsledkem spokojen.

Vraťme se k původnímu článku. Hlásí, že HTML5 dospělo a již podporuje většinu funkcí Flash. Když se posuneme dolů, vidíme, že samotná společnost Adobe považuje Flash za klíčový prostředek pro poskytování prémiového obsahu – webových her a prémiového videa. Nikde se ale nemluví o tom, že zastavují podporu Flashe.

Navíc... Jasně prohlašují, že spolupracují se společnostmi Microsoft a Google na zlepšení kompatibility a zabezpečení Flash Player. A nezapomněli dodat, že úzce spolupracují s Facebookem na zlepšení spolehlivosti a bezpečnosti her ve Flash Playeru. Kde je tedy nějaké slovo, že opouštějí Flash?

Pokud se budeme bavit o vývoji Flashe obecně, tak ano, zastavil se už dávno. Jsou provedena pouze drobná (ale významná) vylepšení a opraveny bezpečnostní chyby. Ale je to opravdu tak špatné? Z mého pohledu má Flash vše, co potřebuje. Samozřejmě bych chtěl víc. Ale proč?

Pro více byste měli jít na samostatný formát her. A je tu Adobe AIR (pokud vezmeme v úvahu Flash). Zamítnutí Podpora Adobe AIR není fixní. Mám informace o plánech na rok 2016. Ale zemře flash prohlížeče? Rozhodně. Ale zítra určitě ne.

A pro ty, kteří rádi v klišé říkají, že Flash vybíjí baterii, ukažte, jak ji Canvas nabíjí.

Za zmínku také stojí, že projekt Adobe Edge Animate již nebude aktivně vyvíjen. Ale protože Jsem blízko vývoje Flash Professional – ujišťuji vás, že Edge Animate nebude vyvíjen vůbec (kromě kritické chyby). Toto rozhodnutí bylo učiněno ve prospěch Adobe Flash Professional (budoucí Animate CC).

Pro přípravu HTML kreativ pro umístění do ADFOXu je důležité dodržet požadavky na vložení kódu, který zpracovává kliknutí na banner a počítá události v banneru.
Při vývoji HTML kódu můžete použít editory, pro které byly tyto pokyny napsány:
- Adobe Animate CC;
– Google Web Designer;
- Adobe Edge Animate CC.

Požadavky na HTML kód (pro vývojáře kódu)

Připravte svůj projekt splněním následujících požadavků:

1. Maximální povolený počet znaků v HTML kódu je 65 000;
2. JavaScript a CSS je vhodnější umístit do HTML kódu banneru;
Pokud výsledný HTML kód překročí maximální povolený počet znaků, pak je nutné kód zredukovat umístěním JavaScriptu a CSS do samostatné soubory:
- uložit js a css kód do samostatných souborů s příponou .js nebo .css;
3. Projekt může obsahovat pouze jeden soubor s příponou .html;
4. Maximální povolený počet souborů v projektu je 50;
5. Povolené typy souborů v projektu: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx , eot, fnt, fon, mf, ttc, woff;
6. Maximální velikost každý soubor (platí také pro soubory v archivu):
- 300 kb;
- 1 MB pro video soubory.
7. Názvy souborů musí obsahovat pouze čísla nebo písmena anglické abecedy a znak podtržítka. V názvu souboru není povoleno používat ruská písmena, mezery, uvozovky a speciální znaky;
8. V názvech proměnných a objektů nemůžete používat ruská písmena.
Jedinou výjimkou je text na banneru.
9. Formát hotového projektu - zip archiv.

Adobe Animate CC

1. Příprava editora.

Chcete-li vytvořit nový projekt v AdobeAnimate CC, vyberte projekt „HTML5 Canvas“.

Kód této šablony lze použít jako základ při vytváření kreativ v editoru.

Chcete-li použít šablonu na projekt, v nastavení publikování vyberte "Pokročilá nastavení publikování -> Importovat nový...".

Šablona obsahuje skript adfox_HTML5.js

3. Klikněte na zpracování

Pokud kreativa obsahuje cyklickou animaci, použijte kódy pouze pro tlačítka ze sekce.

3.1 Chcete-li, aby bylo možné kliknout na celou oblast banneru a mít k dispozici jeden odkaz, přidejte do prvního snímku animace následující kód:

Canvas.style.cursor = "ukazatel"; canvas.addEventListener("click", function() ( window.callClick(); ));

3.2 Chcete-li přidat několik tlačítek pro pohyb s různými odkazy, přidejte hlavní tlačítko pro kliknutí na banner v horní vrstvě animace, přiřaďte tlačítku Název instance a napište kód na tlačítko:

This.btnMain.addEventListener("click", funkce (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ; )) ;

Přidejte další tlačítka, která po kliknutí přenesou uživatele na jiné stránky inzerovaného webu.
Umístěte některá tlačítka do horní vrstvy nad určité části animace, přiřaďte tlačítkům název instance a napište kód pro každé tlačítko:

This.btnLeft.addEventListener("click", funkce (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );

Kde n

3.3

This.btnText.addEventListener("přejetí myší", function() ( window.callEvent(n); ));

Kde přejet myší - javascriptová událost, n- číslo události od 1 do 30, která by měla být spuštěna.

Funkce vytváření smyčkové animace

Postup implementace cyklické animace v kreativě v editoru Animate CC:
- v nastavení publikace nastavte volbu "Časová osa smyčky";
- použijte kódy pro tlačítka z této sekce a kódy pro běžná tlačítka z odstavců 3.1 a 3.2 je nutné odstranit.

Kód pro kreativu s jedním tlačítkem a opakující se animací:

If (typeof(this.stopCycle) == "undefined") ( this.btnMain.addEventListener("click", funkce (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ); )); this.stopCycle = true; )

Pokud existuje několik tlačítek, přidejte do kódu pro volání událostí ADFOX následující kód:

If (typeof(this.stopCycle) == "undefined") ( this.btnMain.addEventListener("click", funkce (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ; )); this.btnLeft.addEventListener("click", funkce (e) ( var t = e.nativeEvent; if (t.which == 1 || t. tlačítko == 0) ( window.callClick(n); )); this.stopCycle = true; )

Kde n- číslo události od 1 do 30, která by měla být spuštěna.

Pomocí průhledných tlačítek

Transparentní tlačítka lze použít například v případě, že potřebujete udělat klikací celou plochu banneru nebo jen její část. K nim, stejně jako k běžným tlačítkům, je třeba přidat kód pro volání přechodu nebo události.

Tlačítka v aplikaci Animate jsou symboly, které obsahují čtyři rámečky. První tři můžete nechat prázdné a vyplnit pouze poslední „Hit“ přidáním obsahu (grafického prvku) do něj přes Vložit > Časová osa > Klíčový snímek.

Obsah snímku zásahu je neviditelný, ale definuje oblast tlačítka, která reaguje na kliknutí. Do tohoto snímku můžete přidat obsah (grafický prvek) pomocí Vložit > Časová osa > Klíčový snímek. Pokud zbývající rámečky zůstanou prázdné nebo neviditelné, tlačítko v pracovní oblast se jeví jako průhledná modrá a má tvar jako obsah obsažený v dalším snímku zásahu. Když svůj projekt publikujete, průhledná modrá oblast nebude viditelná.

Vlastnost provedení natahovacího (gumového) banneru

Aby se banner natáhl přes šířku kontejneru, ve kterém bude na webu umístěn, proveďte nastavení: Vybrat Soubor > Nastavení publikování.
V záložce Základní, vyberte Udělat responzivní > Šířka, Výška nebo Obojí.
Vybrat Měřítko pro vyplnění viditelné oblasti pro zobrazení výstupu v režimu celé obrazovky.
Výběrem možnosti „Přizpůsobit zobrazení“ změníte měřítko obsahu tak, aby zaplnil veškerý dostupný prostor na obrazovce při zachování stejného poměru stran. Pokud tedy již bylo dosaženo maximální šířky, může oblast podél výšky obrazovky zůstat nevyplněná a naopak.

Pokud nemůžete dosáhnout požadovaného výsledku pomocí nastavení programu, použijte skripty.
Zde jsou příklady kódů:
Stáhněte si kód pro změnu poměru stran.
Stáhněte si kód pro změnu měřítka bez poměru stran.
Stáhněte si kód pro polohovací prvky, kde an0..an4 je název instance prvků.

Funkce vytváření banneru s automatickým blikáním

Pokud chcete zobrazit banner z rozbaleného stavu, musíte při přidávání banneru do rozhraní zadat hodnotu „ano“ v parametru „Automaticky rozbalit vždy“ nebo „Rozbalit při inicializaci“ a přidat kód do HTML kreativa:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = this.main_banner; window.global_exp_banner.visible = false; if (window.isBannerExpanded) ( window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else( window. viditelné = false; window.global_exp_banner.btnCollapse.visible = nepravda; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; ) window.global_main_banner.btnExpand.addEventListener("click", expandBanth. )); window.global_exp_banner.btnCollapse.addEventListener("kliknout", sbalitBanner.bind(toto)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_Expand.visible.btn = pravda ;)

5. Zveřejnění projektu.

Důležité! Při náhledu projektu v prohlížeči přes (Ctrl-Enter | Cmd-Enter) náhodné hodnoty formuláře jsou připojeny k odkazům v názvech souborů v HTML ?1468231208369 . Takové hodnoty musí být z projektu při načítání do ADFOX vyloučeny.
K tomu musí být konečný projekt v editoru publikován prostřednictvím Soubor > Nastavení publikování > Publikovat (Shift-Ctrl-F12 | Shift-Cmd-F12).

Při publikování projektu vyberte šablonu AdobeAnimate_Adfox_.html.

.zip

Google Web Designer

Kód tohoto banneru lze použít jako základ při vytváření kreativ v editoru.

Šablona obsahuje skript adfox_HTML5.js a sadu parametrů pro správné fungování přechodů a počítání událostí:
%reference%, %user1%, %eventN%, kde N je číslo události od 1 do 30.

2. Klikněte na zpracování.

Všechny události jsou přiřazeny ke konkrétním prvkům animace prostřednictvím karty Události.

Komponenta Interaktivní oblast se používá k vyvolání akcí.
Přidejte jej a vyberte událost "Interaktivní oblast" - "Dotyk/klik"(nebo "Tap Area > Touch/Click" v anglické verzi).

Na kartě "Vlastní kód" zadejte volání funkce kliknutí.

2.1

CallClick();

2.2

CallClick(n);

Kde n

2.3 Pokud potřebujete spustit událost z animace bez přechodu, použijte následující kód:

CallEvent(n);

Kde n- číslo události, která má být vyvolána.

Tak, aby se banner natáhl po šířce kontejneru, ve kterém bude umístěn na webu, na panelu Vlastnosti Pro polohu a rozměry určete procenta místo pixelů.

Využijte také možnosti "Zarovnat do kontejneru" A "Gumové rozložení" na horní panel nástroje.
Pokud povolíte Fluid Layout před použitím jakýchkoli nástrojů pro zarovnání, pak při změně velikosti nadřazeného kontejneru budou všechny prvky zarovnány k sobě navzájem a k rozměrům kontejneru.
V tomto případě můžete současně používat jak relativní velikosti prvků v procentech, tak absolutní velikosti v pixelech.

4. Zveřejnění projektu.

Při přidávání banneru do ADFOX bude manažer potřebovat znát shodu tlačítek a čísel událostí. Pro každou událost manažer napíše svůj vlastní odkaz, na který se má navigovat, a ten se pak předá do kódu banneru pomocí proměnné.

Po publikování projekt archivujte ve formátu .zip. Vaše kreativa je připravena k nahrání na banner ADFOX.

Adobe Edge Animate CC

Chcete-li začít, spusťte soubor s příponou .an z archivu.

2. Klikněte na zpracování.

Všechny události jsou přiřazeny ke konkrétním prvkům animace prostřednictvím záložky "Kód".

Chcete-li procházet vybraným prvkem, musíte vybrat událost klikněte a napište volání funkce click.

Tlačítkům musí být přiřazen název instance, například: btnMain, btnRight.

2.1 Pokud používáte jedno tlačítko skoku:

CallClick();

2.2 Pokud existuje několik přechodových tlačítek:

CallClick(n);

Kde n- číslo události, která má být vyvolána.

2.3 Pokud potřebujete spustit událost z animace bez přechodu, použijte následující kód:

CallEvent(n);

Kde n- číslo události, která má být vyvolána.

Vlastnost provedení natahovacího (gumového) banneru.

Aby se banner roztáhl po šířce kontejneru, ve kterém bude na webu umístěn, musíte při přípravě banneru v editoru na panelu Vlastnosti zadat pro pozici a velikost procenta místo pixelů.

Na panelu Pozice a Velikost jsou také tlačítka Měřítko Velikost a Měřítko Pozice pro prvky

4. Zveřejnění projektu.

Projekt by měl být publikován s následujícím nastavením:

Po publikování projekt archivujte ve formátu .zip. Vaše kreativa je připravena k nahrání na banner ADFOX.

Pro lidi, kteří se chtějí neustále zlepšovat, něco se učit a neustále se učit něco nového, jsme speciálně vytvořili tuto kategorii. Obsahuje výhradně vzdělávací, užitečný obsah, který se vám jistě bude líbit. Velké množství videí může možná konkurovat i vzdělání, které dostáváme ve škole, na vysoké škole nebo na univerzitě. Největší věc na tréninkových videích je, že se snaží poskytovat nejnovější a nejrelevantnější informace. Svět kolem nás v éře technologií se neustále mění a tištěné vzdělávací publikace prostě nemají čas poskytovat nejnovější informace.

Mezi videi lze nalézt i výuková videa pro předškolní děti. Tam se vaše dítě naučí písmena, čísla, počítání, čtení atd. Souhlasím, je to velmi dobrá alternativa ke kresleným filmům. Najdete zde i školení pro žáky základních škol anglický jazyk, pomoc při studiu školních předmětů. Pro starší ročníky byla vytvořena výuková videa, která vám pomohou připravit se na testy, zkoušky, nebo prostě jen prohloubit znalosti v konkrétním předmětu. Získané znalosti mohou mít kvalitativní dopad na jejich mentální potenciál a také vás potěšit výbornými známkami.

Pro mladé lidi, kteří již vystudovali školu, studují či nestudují vysokou školu, existuje mnoho fascinujících vzdělávacích videí. Mohou jim pomoci prohloubit znalosti o profesi, kterou studují. Nebo si získejte profesi, jako je programátor, webdesignér, SEO optimalizátor atd. Tato profese se na univerzitách zatím nevyučuje, takže specialistou v tomto pokročilém a relevantním oboru se můžete stát pouze sebevzděláváním, kterému se snažíme pomáhat sběrem těch nejužitečnějších videí.

Pro dospělé je toto téma také relevantní, protože se často stává, že po letech práce v profesi pochopíte, že to není vaše věc a chcete se naučit něco, co je pro sebe vhodnější a zároveň ziskové. Také mezi touto kategorií lidí se často objevují videa o typu sebezdokonalování, úspory času a peněz, optimalizace svého života, ve kterých nacházejí způsoby, jak žít mnohem lepší a šťastnější život. I pro dospělé je téma tvorby a rozvoje vlastního podnikání velmi vhodné.

Mezi naučnými videi jsou i videa s obecným zaměřením vhodná pro téměř každý věk, dozvíte se v nich o tom, jak začal život, jaké existují evoluční teorie, fakta z historie atd. Dokonale rozšiřují obzory člověka a činí z něj mnohem erudovanějšího a příjemnějšího intelektuálního partnera. Taková vzdělávací videa jsou skutečně užitečná pro sledování všem, bez výjimky, protože znalosti jsou moc. Přejeme vám příjemné a užitečné prohlížení!

V dnešní době je prostě nutné být tím, čemu se říká „na vlně“. To se týká nejen zpráv, ale také rozvoje vlastní mysli. Pokud se chcete rozvíjet, poznávat svět, být žádaný ve společnosti a být zajímavý, pak je tato sekce právě pro vás.

Již více než sedm let pracuji na dálku se zahraničními zákazníky z USA, Kanady, Austrálie, Německa a dalších zemí. Kreslím grafické prostředky a animace pro hry Adobe Animate CC. Dříve se jmenoval redaktor Adobe Flash Professional CC.

Na starém blogu jsem začal podobnou sérii lekcí, ale místo pokračování jsem se rozhodl vše přepsat znovu, abych se podělil o nové zkušenosti.

Proč potřebujeme další sérii lekcí o kreslení v Adobe Flash? Dělám to již mnoho let a věřím, že mé zkušenosti mohou být pro začátečníky užitečné. Zejména pro ty, kteří ještě nikdy nekreslili grafickým tabletem. Pokud umíte kreslit na papír, ale nikdy jste nekreslili na počítači, tak vám mám rozhodně co říct.

A pro ty, kteří nevědí, jak kreslit na papír, se pokusím vysvětlit, jak můžete tuto dovednost obecně rozvíjet, bez odkazu na grafický editor: budování perspektivy a kompozice, výběr barev, stínování a další témata.

Výběr grafického tabletu

Nezáleží na tom, jestli umíte kreslit, budete potřebovat nástroje: zařízení a programy. Začněme hardwarem. Počítač již máte, ale ještě k němu potřebujete připojit grafický tablet, což nám dá možnost kreslit na virtuální plátno, které existuje v paměť s náhodným přístupem. Jinými slovy, je to další zařízení pro vstup informací, jako je myš nebo trackball. Tablet má ale výhody, které umožňují kreslit jako na papír. To je citlivost na tlak a tvar ukazovacího zařízení podobný peru.

Výrobců grafických tabletů je mnoho: Wacom, Genius, Huion. Setkal jsem se pouze s prvními dvěma. Celkem jsem na začátku vyzkoušel už čtyři tablety od Wacomu a jeden od Genius. Vřele doporučuji Wacom - je to tak vysoká kvalita za rozumnou cenu.

Pokud nemáte peníze, nekupujte Genius, pořiďte si nejdostupnější malé použité bambusové pero Wacom. Použil jsem téměř stejný, Wacom Bamboo Pen&Touch S CTH-460. Za sedm let používání se nevyskytly žádné kritické problémy, dobré zařízení pro začátek. Pokud můžete ušetřit více peněz, jděte na větší model. Používám Wacom Bamboo Fun Pen&Touch M CTH-670.

Co znamenají čísla a písmena v názvech modelů Wacom?

Vysvětlím, co znamenají některá čísla a písmena v názvu, abych vám usnadnil orientaci v modelovém parku společnosti.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

• M— velikost pracovní plochy. Existují S - Small (malé), M - Medium (střední), L - Large (velké);
• CTH- znamená sestava. Existují CTL a CTH - amatérské modely vstupní úroveň s volitelnými tlačítky a touchpadem, PTH - profesionální modely, DTH a DTK - profesionální modely s vestavěným displejem;
• 6 — velikost pracovní plochy v palcích. K dispozici jsou 4 - Malé (malé), 6 - Střední (střední), 8 - Velké (velké), stejně jako 13 a více, ale to platí pouze pro tablety s vestavěným displejem. Někdy online obchody a reklamy neoznačují písmenný index, pak můžete použít digitální, abyste pochopili rozměry zařízení;
• 70 - generace a model. Je důležité si uvědomit, že čím větší je toto číslo, tím novější zařízení. Pro srovnání moje starý tablet má index CTH-460, moderní analog je CTH-490. Generace se liší o 10: 460, 470 a tak dále.

Velikost grafického tabletu

Když kreslíte, aktivní plocha pracovního prostoru je velmi malá. Jinými slovy, stylus neustále klouže v poloměru malého kruhu. Tento kruh se může trochu pohnout. Postupem času se vytvoří skvrna, která je viditelná jako husté nahromadění mikroškrábanců. Ukazuje, že prakticky nepoužíváte periferii zařízení, vše se děje v centru.

Dalo by se předpokládat, že velký grafický tablet není potřeba, protože nikdy nevyužijete celou jeho pracovní plochu a místo aktivity bude mít stejnou velikost jako u menšího modelu. Ale to není pravda.

Když pracujete na tabletu, jeho pracovní plocha se promítá přes celou šířku monitoru. Čím větší je tableta, tím přesněji můžete tahy aplikovat. A naopak, čím větší monitor a čím menší tablet, tím obtížnější a nepohodlnější se vám bude kreslit. Ze zkušenosti mohu říci, že po přechodu z velikosti S na M při práci na 29palcovém ultraširokém monitoru se mi práce zpříjemnila o 25-30%. Zjistil jsem, že nakreslení komplexního obrysu vyžaduje méně úsilí a celkový zážitek je hladší a příjemnější.

Větší grafické tablety by měly poskytnout ještě pohodlnější pracovní prostředí, ale na L-modelech jsem nepracoval, takže mohu jen předpokládat.

Rozdíly mezi amatérskými a profesionálními tablety Wacom

Zakoupením profi modelu získáte bezdrátové zařízení z kvalitnějšího plastu s 2048 úrovněmi tlakové citlivosti oproti 1024 u levnějších modelů, krásným designem, dalšími ovládacími prvky v podobě tlačítek a dotykového kroužku. S mladšími zastaralými modely řady Bamboo, které se přestaly vyrábět, jsem naprosto spokojen. Rozdíl v ceně mezi amatérskou a profesionální verzí bude více než dvojnásobný. Tabulka dá vše do pořádku:

Nastavení Wacom Bamboo Pen & Touch M CTH-670

Před připojením zařízení si stáhněte ovladače z oficiálních stránek Wacom.

Seznam modelů	Odkaz na ovladač
Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 Jeden CTL-471/671/472/672 Intuos CTL-480/490/680/690 Intuos CTH-480/490/680/690 Intuos 5 PTK-450/650 PTH-450/650/850 Intuos 4 PTK-440/640/840/1240/540WL	Okna Operační Systém Mac
Bamboo Pen&Touch CTH-460/470/471/660/661/670 Bambusové pero CTL-460/471	Okna Operační Systém Mac

Po připojení tabletu a instalaci ovladačů spusťte aplikaci Předvolby Wacom, který lze nalézt přes Windows vyhledávání(Win + S) nebo v Ovládacích panelech.

Základní nastavení firemních tabletů se neliší, podobně jsou nakonfigurovány amatérské i profesionální modely.

Na kartě Tableta Tablet můžete nakonfigurovat pro pravou a levou ruku a také přiřadit klávesám akce. Nejprve je nainstalujte Zakázáno, časem bude možné přiřadit klávesové zkratky.

Na další záložce Pero najdete důležité parametry:

• Tip Cítit- citlivost na tlak. Nechte to uprostřed. Během toho pochopíte, jakou tvrdost máte rádi a upravíte ji podle svého vkusu;
• Sledování— režim sledování polohy stylusu. Nainstalujte Režim pera— pracovní plocha tabletu se roztáhne tak, aby zaplnila celou obrazovku. Režim Myš používá se jako náhrada myši;
• Zbývající nastavení nejsou tak důležitá. Tlačítka pera umožňuje přiřadit akci tlačítkům stylusu. Pocit gumy— citlivost gumičky na zadní straně stylusu. Tuto funkci nepoužívám, protože je pro mě rychlejší přepínat pomocí klávesových zkratek.

Na stejné záložce v sekci Sledování zmáčknout tlačítko Mapování... pro konfiguraci promítání pracovní plochy tabletu na obrazovku monitoru. Otevře se okno Podrobnosti o režimu pera.

V kapitole Oblast obrazovky Vybrat Monitor, pokud máte několik monitorů a uveďte hlavní. Pokud je tam jen jeden monitor, tak ho nech Všechny obrazovky

.

V kapitole Měřítko nezapomeňte zaškrtnout políčko vedle něj Proporce síly aby se pracovní plocha při promítání na plátno nenatahovala. V tomto případě se nepoužije část pracovní plochy tabletu, ale budeme mít normální proporce 1 ku 1. A pokud nakreslíte kruh, objeví se na obrazovce jako kruh, a ne jako podlouhlá elipsa.

Nezapomeňte zaškrtnout políčko vedle něj Použijte Windows Ink pro tlakovou citlivost na práci.

Na další záložce Stiskněte Možnosti zrušte zaškrtnutí políčka naproti Povolit dotykový vstup pro přepnutí tabletu do normálního režimu.

Na zbývajících kartách mám vše zakázáno, protože nepoužívám ani gesta dotykového režimu, ani vlastní rozbalovací nabídku. Tím je nastavení grafického tabletu dokončeno.

Animate CC nebo Flash Professional CC?

Adobe Animate CC je rebrandingem Adobe Flash Professional CC; do programu bylo přidáno několik inovací. I se starým názvem si získal obrovskou oblibu mezi umělci, animátory a vývojáři nezávislých her. Principy vektorového designu vám umožňují vytvářet sprity pro jakékoli rozlišení. Každá verze, kterou můžete získat, bude fungovat pro kreslení. Nástroje pro kreslení zůstaly po mnoho let stejné, pouze s drobnými vylepšeními. Budu používat Adobe Animate CC, ale vše napsané bude platit i pro starší verze Adobe Flash Professional. Mimochodem, v Nedávno Společnost Adobe přešla na model měsíčního předplatného pro přístup ke svým produktům namísto nákladného jednorázového licencování. Nyní je cena za pomocí Adobe Animate CC stojí 20 $ měsíčně.

První spuštění aplikace Adobe Animate CC

Po stažení vytvořte nový soubor a vyberte typ Action Script 3.0. Ve stejném okně můžete zadat parametry scény:

• Šířka A Výška— šířka a výška scény v pixelech. Nastavíme ho na 1920 x 1024, jako je rozlišení v moderním monitoru nebo smartphonu;
• Vládcové jednotky— měrné jednotky, nastavené pixely;
• Snímková frekvence— počet snímků za sekundu, ponechejte 24;
• Barva pozadí— barva pozadí nastavená na šedou.

Tato nastavení lze změnit po vytvoření dokumentu. Chcete-li to provést, musíte vybrat nástroj Nástroj pro výběr (klávesová zkratka V), otevřete okno Vlastnosti a rozbalte sekci Vlastnosti. Pokud toto okno nemůžete najít, použijte nabídku Okno → Vlastnosti nebo kombinace klávesy Ctrl+ F3.

Nastavení horkých kláves

Chcete-li zvýšit efektivitu své práce, musíte maximálně používat klávesové zkratky. V raných fázích to vyžaduje zvyknout si na nové kombinace kláves a zapamatovat si je, ale v budoucnu to poskytuje solidní skok ve vaší efektivitě. Předefinoval jsem většinu klávesových zkratek tak, aby byly na pravé straně klávesnice. Proč vpravo? Fakt je, že jsem levák a podle toho je to pro mě pohodlnější. Pokud jste pravák, pak si budete muset vymyslet vlastní schéma. Kromě toho používám Rapoo E9050 a Apple Wireless Keyboard, které jsou vyrobeny ve formátu notebookových klávesnic, takže pokud používáte plnohodnotnou, pak opět tvrdě pracujte a vymyslete si vlastní schéma - vyplatí se to off za spoustu ušetřeného času - a vezměte si moje schéma jako příklad.

Získejte představu: seskupte základní příkazy na pohodlné straně klávesnice rychlý přístup bez neustálé změny polohy ruky. Většinu času by měl ležet na jednom místě, pouze vaše prsty „chodí“ v malém poloměru a mačkají tlačítka. Samozřejmě se stále najdou týmy, které požadují změnu pozice, ale je jich drtivá menšina. Zde je můj diagram:

tým	Popis	Stará kombinace	Nová kombinace
Vybrat vše	Vyberte všechny	Ctrl+A	Ctrl + A, O
Odznačit vše	Odebrat výběr	Ctrl + Shift + A	Ctrl + Shift + A, P
vrátit	Zrušit akci	Ctrl+Z	Ctrl + Z, [, Z
Předělat	Opakujte akci	Ctrl+Y	Ctrl + Y, ]
Zvětšení	Měřítko	Shift + Z, Z	Shift + Z, \
Přiblížit	Zvětšit obrázek	Ctrl + =, Ctrl + Num =	Ctrl + =, Ctrl + Num =, =
Oddálit	Oddálit	Ctrl + =, Ctrl + Num =	Ctrl + -, Ctrl + Num -, -
Narovnat	Narovnat vybrané křivky		9
Hladký	Vyhladit vybrané křivky		0
Překlopit vodorovně	Překlopte vodorovně		F
Převrátit svisle	Převrátit svisle		Shift + F
Střih	Vyjmout do schránky	Ctrl+X	Ctrl + X, X
Duplicitní symbol...	Klonový symbol		Ctrl+D
Vyměnit symbol...	Změnit symbol		Ctrl + ]

Ve většině případů nové kombinace nenahrazují staré, ale doplňují je, zavádí se několik nových příkazů. Musíte to nakonfigurovat pomocí nabídky Upravit → Klávesové zkratky.... Do vyhledávacího pole zadejte do sloupce název týmu Zkratka Klikněte na prázdné místo naproti požadovanému příkazu a stiskněte novou kombinaci kláves.

Nesnažte se porozumět příkazům uvedeným v tabulce, všechny budou vysvětleny v následujících lekcích. Až je v budoucnu začnete aktivně používat, s největší pravděpodobností je několikrát předefinujete, dokud nenajdete tu nejvhodnější možnost.

Nastavení štětců

Nástroj štětec(klávesová zkratka B) – nejpoužívanější nástroj štětec při kreslení. Nastavení jsou soustředěna do dvou oken:

Nastavení štětce je hotové, pojďme si něco namalovat.

Kreslení štětcem

Vyberte vhodnou barvu pomocí okna Barva (Ctrl + Shift + F9), vyberte Nástroj štětec (B) a začněte jedním dlouhým tahem s trochou síly, abyste načrtli budoucí tvar. Poté obkreslete výsledný obrys, abyste vyhladili všechny nerovnosti - štětec je připraven.

Upozorňujeme, že ve výše uvedeném příkladu byly použity pouze tři tahy. Měli byste se snažit dělat tahy střední délky, aby vaše ruka neopustila tablet. Pokuste se udělat mnoho malých tahů nesprávně, protože výsledný obrys nebude hladký a velké množství body navíc.

Adobe Animate CC funguje na vektorových principech. Všechny objekty jsou popsány matematicky a lze je škálovat bez ztráty kvality, na rozdíl od rastrového přístupu. To nám umožňuje manipulovat s vektorovými objekty způsobem, který bychom nikdy nedokázali tak snadno v rastrovém editoru. Dokážeme vyhladit a zjednodušit obrysy, narovnat zakřivené linie, změnit proporce a deformovat grafické objekty bez ztráty kvality. Každý tah je automaticky převeden do matematických křivek, které můžeme doladit a upravit.

Chcete-li ověřit všechny výše uvedené skutečnosti, aktivujte nástroj Nástroj pro podvýběr(klávesová zkratka A) a vyberte štětec, který jste právě nakreslili. Nyní můžete vidět body vektorové cesty a dokonce je změnit.

Závěr

Dnes jsme nastavili Adobe Animate CC a jsme připraveni začít kreslit. Než budeme pokračovat, trochu si procvičte. Naučte se kreslit jednoduché geometrické tvary bez zkreslení, vyzkoušejte různé barvy a nastavení štětce (experimentujte s parametrem Smoothing).

Podobné materiály