Online kurzusok az Adobe Animate használatának megtanulásához. Danil Fimushkin. Különbségek az amatőr és a professzionális Wacom tabletek között

UPD 2015. december 6:
A Flash Runtime és az Adobe AIR termékmenedzsere elmondta, hogy ők nincsenek terveid hogy ne dolgozzon tovább a Flash Runtime és AIR és tartalomkészítő termék átnevezése semmiképpen nem kapcsolódik a Flash Player sorsáhozés a kapcsolódó ökoszisztéma.

Minden rendben lenne, kivéve egy árnyalatot, amely nagymértékben megváltoztatja a jelentést - a technikai analfabéta és az általános másolás-beillesztés. A kiadványok újranyomják egymást, és újabb és újabb „tényeket” adnak hozzá, amelyek nem szerepelnek az eredetiben. Egyszóval - sérült telefon.

A http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html eredeti cikk arról számol be, hogy az Adobe átnevezi a Flash Professionalt Animate CC-re. Ezenkívül arról számolnak be, hogy az ügyfelek több támogatott platformra vágynak stb.

És nem lepődtem meg, hogy sokan nem látják a különbséget a Flash és a Flash Professional között. Különféle gegek kezdtek megjelenni a híroldalakon, más forrásokra hivatkozva, amelyek a lánc lejjebb kapcsolódnak. És nem mindig az eredeti.

Ma a Flash szót a böngészők beépülő moduljaként értelmezik. Technikailag ez a Flash Player. De van egy tartalomkészítő eszköz - a Flash Professional. Ha a Microsoft átnevezné a Word-et TextMachine-ra, az emberek azt kiabálnák, hogy „A Microsoft leállította a Word fejlesztését?” Annak ellenére, hogy feketén-fehéren ki van írva, hogy a tartalomkészítés támogatott lesz és az adatok szerkeszthetők?

Saját példáim alapján szemléletes képet tudok mutatni. Helyi ügyfelek megkérdezik tőlem, hogy mit fogunk használni animáció létrehozásához egy iOS-es prezentációhoz. Büszkén mondhatom ezt a Flash Professional alkalmazásban. És az ügyfél kábult állapotban van. Egy pillanat múlva azt mondja:

"De a hubon azt írják, hogy a vaku lemerült, és nem működik a táblagépen"

És akkor kábultságba estem. Az ügyfelek és a flash-ről szóló cikkek szerzőinek technikai analfabéta miatt az emberek eltávolodnak a kívánt eredménytől. Szerencsére a megrendelőt sikerült meggyőzni, és elégedett volt az eredménnyel.

Térjünk vissza az eredeti cikkhez. Beszámolnak arról, hogy a html5 kiforrott, és már támogatja a Flash legtöbb funkcióját. Lefelé haladva azt látjuk, hogy maguk az Adobe is a Flash-t tekintik a prémium tartalom – webes játékok és prémium videók – szállításának kulcsfontosságú eszközének. De szó sincs arról, hogy leállítanák a Flash támogatását.

Sőt... Egyértelműen kijelentik, hogy a Microsofttal és a Google-lal együttműködve dolgoznak a Flash Player kompatibilitásának és biztonságának javításán. És azt sem felejtették el hozzátenni, hogy szorosan együttműködnek a Facebookkal a Flash Playerben található játékok megbízhatóságának és biztonságának javítása érdekében. Szóval hol van szó arról, hogy elhagyják a Flash-t?

Ha általánosságban beszélünk a Flash fejlesztéséről, igen, az már régen leállt. Csak kisebb (de jelentős) fejlesztéseket hajtanak végre, és a biztonsági hibákat javítják. De tényleg olyan rossz? Az én szemszögemből a Flashben minden megvan, ami kell. Természetesen többet szeretnék. De miért?

Ha többet szeretne megtudni, válassza az önálló játékformátumot. És van Adobe AIR (ha a Flash-t vesszük). Az Adobe AIR támogatása nem lett elavult. Információim vannak a 2016-os tervekről. De a böngésző flash meg fog halni? Biztosan. De holnap biztosan nem.

Aki pedig közhelyesen szereti azt mondani, hogy a Flash lemeríti az akkumulátort, mutassa meg, hogyan tölti a Canvas.

Azt is érdemes megjegyezni, hogy az Adobe Edge Animate projektet a továbbiakban nem fejlesztik aktívan. Hanem azért, mert Közel állok a Flash Professional fejlesztéséhez – biztosíthatom, hogy az Edge Animate egyáltalán nem kerül fejlesztésre (kivéve a kritikus hibákat). Ez a döntés az Adobe Flash Professional (a jövőbeni Animate CC) javára született.

A HTML-kreatívok ADFOX-ban való elhelyezésére való előkészítéséhez fontos betartani a szalaghirdetésre leadott kattintást feldolgozó és a szalaghirdetésben lévő eseményeket számláló kód beillesztésére vonatkozó követelményeket.
A HTML kód fejlesztése során használhatja azokat a szerkesztőket, amelyekhez az alábbi utasításokat írták:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

A HTML-kóddal kapcsolatos követelmények (kódfejlesztők számára)

Készítse elő projektjét az alábbi követelmények teljesítésével:

1. A karakterek maximális megengedett száma a HTML-kódban 65 000;
2. Javasoljuk, hogy a JavaScriptet és a CSS-t a szalaghirdetés HTML-kódjában helyezze el;
Ha a kapott HTML-kód meghaladja a maximálisan megengedett karakterszámot, akkor csökkentenie kell a kódot úgy, hogy a JavaScriptet és a CSS-t külön fájlba helyezi át:
- mentse a js-t és a css-kódot külön fájlba .js vagy .css kiterjesztéssel;
3. Egy projekt csak egy .html kiterjesztésű fájlt tartalmazhat;
4. A fájlok maximális megengedett száma egy projektben 50;
5. A projektben engedélyezett fájltípusok: 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. Az egyes fájlok maximális mérete (az archívumban lévő fájlokra is):
- 300 Kb;
- 1 MB videofájlokhoz.
7. A fájlnevek csak az angol ábécé számait vagy betűit, valamint az aláhúzás karaktert tartalmazhatják. Nem megengedett orosz betűk, szóközök, idézőjelek és speciális karakterek használata a fájlnévben;
8. Nem használhat orosz betűket a változók és objektumok nevében.
Az egyetlen kivétel a szalaghirdetésen található szöveg.
9. A kész projekt formátuma - postai irányítószám archívum.

Adobe Animate CC

1. Szerkesztői felkészítés.

Ha új projektet szeretne létrehozni az AdobeAnimate CC-ben, válassza ki a „HTML5 Canvas” projektet.

Ennek a sablonnak a kódja alapul szolgálhat kreatívok szerkesztőben történő létrehozásához.

Ha sablont szeretne alkalmazni egy projektre, a közzétételi beállításoknál válassza a lehetőséget "Speciális közzétételi beállítások -> Új importálása...".

A sablon szkriptet tartalmaz adfox_HTML5.js

3. Kattintson a feldolgozás gombra

Ha a kreatív ciklikus animációt tartalmaz, akkor csak a szakasz gombjaihoz használjon kódokat.

3.1 Ha a teljes szalaghirdetési területet kattinthatóvá szeretné tenni, és egyetlen hivatkozást szeretne elérni, adja hozzá a következő kódot az animáció első képkockájához:

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

3.2 Ha több gombot szeretne hozzáadni a különböző hivatkozásokkal való mozgatáshoz, adjon hozzá egy fő gombot a szalaghirdetésre való kattintáshoz a felső animációs rétegben, rendeljen a gombhoz egy példánynevet, és írja be a kódot a gombra:

This.btnMain.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ; )) ;

Adjon hozzá további gombokat, amelyekre kattintva a felhasználó a hirdetett webhely különböző oldalaira kerül.
Helyezzen néhány gombot a felső rétegre az animáció bizonyos részei fölé, adjon a gomboknak egy példánynevet, és írjon kódot minden gombhoz:

This.btnLeft.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );

Ahol n

3.3

This.btnText.addEventListener("mouseover", function() ( window.callEvent(n; ));

Ahol egérmutatót- javascript esemény, n- eseményszám 1-től 30-ig, amelyet ki kell váltani.

A hurkolt animáció létrehozásának jellemzői

Looping animáció megvalósítása egy kreatívban az Animate CC szerkesztőben:
- állítsa be a "Loop Timeline" opciót a közzétételi beállításokban;
- használja az ebben a szakaszban található gombok kódjait, és a 3.1. és 3.2. bekezdésben szereplő normál gombok kódjait el kell távolítani.

Egyetlen gombbal és ismétlődő animációval rendelkező kreatív kódja:

If (typeof(this.stopCycle) == "undefined") ( this.btnMain.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button) == 0) ( window.callClick(); ); )); this.stopCycle = igaz; )

Ha több gomb van, akkor az ADFOX események hívásának kódjában adja hozzá a következő kódot:

If (typeof(this.stopCycle) == "undefined") ( this.btnMain.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button) == 0) ( window.callClick(); ; )); this.btnLeft.addEventListener("kattintás", függvény (e) ( var t = e.nativeEvent; if (t.which == 1 || t. gomb == 0) ( window.callClick(n); )); this.stopCycle = igaz; )

Ahol n- eseményszám 1-től 30-ig, amelyet ki kell váltani.

Átlátszó gombok használata

Az átlátszó gombok például akkor használhatók, ha a teljes banner területet kattinthatóvá kell tenni, vagy csak egy részét. Ezekhez, valamint a normál gombokhoz is hozzá kell adni egy kódot az átmenet vagy esemény hívásához.

Az Animate gombok négy keretet tartalmazó szimbólumok. Az első hármat üresen hagyhatja, és csak az utolsó "Találatot" töltheti ki úgy, hogy tartalommal (grafikus elemmel) ad hozzá a Beszúrás > Idővonal > Kulcskocka menüpontban.

A Hit keret tartalma láthatatlan, de meghatározza a kattintásra reagáló gomb területét. Tartalmat (grafikus elemet) adhat hozzá ehhez a kerethez a Beszúrás > Idővonal > Kulcskocka menüpontban. Ha a többi képkocka üresen vagy láthatatlan marad, a színpadon lévő gomb átlátszó kéknek tűnik, és a következő találati keretben lévő tartalomhoz hasonló alakú. A projekt közzétételekor az átlátszó kék terület nem lesz látható.

A nyújtó (gumi) banner megvalósításának jellemzője

Ha azt szeretné, hogy a szalaghirdetés a webhelyen található tároló szélességében megnyúljon, adja meg a következő beállításokat: Fájl > Közzétételi beállítások.
A lapon Alapvető, válassza ki Tedd érzékeny > Szélesség, Magasság vagy mindkettő.
Válassza ki Méretezés a látható terület kitöltéséhez a kimenet teljes képernyős módban történő megtekintéséhez.
A „Nézetbe illeszkedés” kiválasztásával a tartalom úgy méreteződik, hogy a teljes rendelkezésre álló képernyőterületet kitöltse, miközben ugyanaz a képarány marad. Tehát ha már elérte a Maximális szélességet, akkor előfordulhat, hogy a képernyő magassága mentén lévő terület kitöltetlen marad, és fordítva.

Ha nem tudja elérni a kívánt eredményt a program beállításaival, használjon szkripteket.
Itt vannak példák a kódokra:
Kód letöltése a képarány skálázásához.
Töltse le a kódot a méretarány nélküli méretezéshez.
Töltse le az elemek pozicionálási kódját, hol an0..an4 az elemek példány neve.

Az automatikus villogással rendelkező banner létrehozásának jellemzői

Ha kibontott állapotból szeretne bannert megjeleníteni, akkor a felületen banner hozzáadásakor az „Automatikus kibontás mindig” vagy „Bővítés inicializáláskor” paraméterben meg kell adni az „igen” értéket, és hozzá kell adni a kódot a HTML kreatív:

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 = igaz; window.global_exp_banner.btnCollapse.visible = igaz; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else_banner.global. látható = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = igaz; window.global_main_banner.btnExpand.visible = igaz; ) window.global_main_banner.btnExpand.addEventListener("bind,Bthisner. )); window.global_exp_banner.btnCollapse.addEventListener("kattintás", collapseBanner.bind(this)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = igaz; window.global_exp_banner.btnCollapse.visible = igaz; 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 = igaz; window.global_main_banner.btnExpand = igaz ;)

5. A projekt közzététele.

Fontos! A projekt előnézetének megtekintésekor a böngészőben keresztül (Ctrl-Enter | Cmd-Enter) Az űrlap véletlenszerű értékei a HTML-ben található fájlnevekben található hivatkozásokhoz fűződnek ?1468231208369 . Az ilyen értékeket ki kell zárni a projektből az ADFOX-ba való betöltésekor.
Ehhez a szerkesztőben lévő végleges projektet közzé kell tenni ezen keresztül Fájl > Közzétételi beállítások > Közzététel (Shift-Ctrl-F12 | Shift-Cmd-F12).

Projekt közzétételekor válasszon sablont AdobeAnimate_Adfox_.html.

.postai irányítószám

Google Web Designer

Ennek a bannernek a kódja alapul szolgálhat kreatívok szerkesztőben történő létrehozásához.

A sablon szkriptet tartalmaz adfox_HTML5.jsés egy sor paraméterkészlet az átmenetek és az eseményszámlálás helyes működéséhez:
%reference%, %user1%, %eventN%, ahol N az eseményszám 1 és 30 között.

2. Kattintson a feldolgozás gombra.

Minden esemény adott animációs elemekhez van rendelve az Események lapon.

Az Interaktív terület összetevő a műveletek meghívására szolgál.
Adja hozzá, és válasszon egy eseményt "Interaktív terület" - "Érintés/kattintás"(vagy "Tap Area > Touch/Click" az angol verzióban).

Az "Egyéni kód" lapon adja meg a kattintási funkció hívását.

2.1

CallClick();

2.2

CallClick(n);

Ahol n

2.3 Ha átmenet nélküli animációból kell eseményt kiváltania, használja a következő kódot:

CallEvent(n);

Ahol n- a meghívandó esemény száma.

Úgy, hogy a szalaghirdetés átnyúlik annak a tárolónak a szélességében, amelyben elhelyezni fogja a webhelyen, a panelen Tulajdonságok A pozícióhoz és a méretekhez adjon meg százalékot a képpontok helyett.

Használja a lehetőségeket is "Igazítás a tárolóhoz"És "Gumi elrendezés" a felső eszköztáron.
Ha az igazítási eszközök használata előtt engedélyezi a Fluid Layout funkciót, akkor a szülőtároló átméretezésekor az összes elem egymáshoz és a tároló méreteihez igazodik.
Ebben az esetben egyszerre használhatja az elemek relatív méretét százalékban és abszolút méretét pixelben.

4. A projekt közzététele.

Amikor bannert ad hozzá az ADFOX-hoz, a menedzsernek ismernie kell a gombok és az eseményszámok megfelelését. A menedzser minden eseményhez megírja a saját linkjét, amelyre navigálhat, amely aztán egy változó segítségével átkerül a szalaghirdetés kódjába.

A projekt közzététele után archiválja a formátumban .postai irányítószám. A hirdetés készen áll az ADFOX szalaghirdetésre való feltöltésére.

Adobe Edge Animate CC

A kezdéshez futtassa a fájlt a kiterjesztéssel .an az archívumból.

2. Kattintson a feldolgozás gombra.

Minden esemény meghatározott animációs elemekhez van rendelve a „Kód” lapon keresztül.

A kiválasztott elemen való navigáláshoz ki kell választani egy eseményt kattintsonés írjon egy hívást a click függvénynek.

A gombokhoz példánynevet kell rendelni, például: btnMain, btnRight.

2.1 Ha egy ugrógombot használ:

CallClick();

2.2 Ha több átmenet gomb van:

CallClick(n);

Ahol n- a meghívandó esemény száma.

2.3 Ha átmenet nélküli animációból kell eseményt kiváltania, használja a következő kódot:

CallEvent(n);

Ahol n- a meghívandó esemény száma.

A nyújtó (gumi) banner megvalósításának jellemzője.

Annak érdekében, hogy a szalaghirdetés a webhelyen található tároló szélességében átnyúljon, a szalaghirdetés előkészítésekor a szerkesztőben a Tulajdonságok panelen, a pozícióhoz és a mérethez pixelek helyett százalékokat kell megadnia.

A Pozíció és méret panelen találhatók a Méretméret és a Méretezési pozíció gombok is az elemekhez.

4. A projekt közzététele.

A projektet a következő beállításokkal kell közzétenni:

A projekt közzététele után archiválja a formátumban .postai irányítószám. A hirdetés készen áll az ADFOX szalaghirdetésre való feltöltésére.

Több mint hét éve dolgozom távolról az USA-ból, Kanadából, Ausztráliából, Németországból és más országokból származó külföldi ügyfelekkel. Grafikus anyagokat és animációkat rajzolok játékokhoz Adobe Animate CC. Korábban a szerkesztőt hívták Adobe Flash Professional CC.

A régi blogon elindítottam egy hasonló leckesorozatot, de ahelyett, hogy ott folytattam volna, úgy döntöttem, hogy újraírok mindent, hogy megosszam az új tapasztalatokat.

Miért van szükségünk újabb leckékre az Adobe Flash-ben való rajzolásról? Sok éve csinálom ezt, és úgy gondolom, hogy tapasztalataim hasznosak lehetnek a kezdők számára. Főleg azoknak, akik még soha nem rajzoltak grafikus táblával. Ha jól tud papírra rajzolni, de még soha nem rajzolt számítógépen, akkor mindenképpen el kell mondanom valamit.

És azoknak, akik nem tudnak papírra rajzolni, megpróbálom elmagyarázni, hogyan lehet általánosságban fejleszteni ezt a képességet anélkül, hogy grafikus szerkesztőhöz kötnének: perspektíva és kompozíció építése, színek kiválasztása, árnyékolás és egyéb témák.

Grafikus tábla kiválasztása

Nem baj, ha tudsz rajzolni, szükséged lesz eszközökre: eszközökre és programokra. Kezdjük a hardverrel. Számítógépe már van, de még hozzá kell csatlakoztatnia egy grafikus táblagépet, amivel lehetőségünk nyílik a RAM-ban létező virtuális vászonra rajzolni. Más szavakkal, ez egy másik információbeviteli eszköz, például egér vagy hanyattegér. De a táblagépnek vannak előnyei, amelyek lehetővé teszik, hogy papírra rajzoljon. Ez a nyomásérzékenység és a mutatóeszköz tollszerű formája.

Számos grafikus táblagyártó létezik: Wacom, Genius, Huion. Én csak az első kettővel találkoztam. Összesen már kipróbáltam négy táblagépet a Wacomtól és egyet a Geniustól, amikor elkezdtem. Nagyon ajánlom a Wacom-ot - kiváló minőség elfogadható áron.

Ha nincs pénzed, ne vedd meg a Geniust, szerezd be a legolcsóbb kis használt Wacom Bamboo Pent. Szinte ugyanazt használtam, a Wacom Bamboo Pen&Touch S CTH-460-at. Hét évnyi használat alatt nem volt kritikus probléma, kezdetnek jó eszköz. Ha több pénzt tud megtakarítani, válassza a nagyobb modellt. Wacom Bamboo Fun Pen&Touch M CTH-670-et használok.

Mit jelentenek a számok és betűk a Wacom modellek nevében?

Elmagyarázom, mit jelentenek a névben szereplő számok és betűk, hogy megkönnyítsem a navigációt a cég modellparkjában.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

• M— a munkaterület mérete. Vannak S - Small (kicsi), M - Medium (közepes), L - Large (nagy);
• CTH— a modellválasztékot jelöli. Vannak CTL és CTH - belépő szintű amatőr modellek opcionális gombokkal és érintőpaddal, PTH - professzionális modellek, DTH és DTK - professzionális modellek beépített kijelzővel;
• 6 — a munkaterület mérete hüvelykben. Van 4 - kicsi (kicsi), 6 - közepes (közepes), 8 - nagy (nagy), valamint 13 és több, de ez csak a beépített kijelzővel rendelkező táblagépekre vonatkozik. Néha az online áruházak és a hirdetések nem tüntetik fel a betűindexet, akkor a digitálisat használhatja a készülék méreteinek megértéséhez;
• 70 - generáció és modell. Fontos megérteni, hogy minél magasabb ez a szám, annál újabb az eszköz. Összehasonlításképpen: a régi táblagépem indexe CTH-460, a modern analóg a CTH-490. A generációk 10-ben különböznek egymástól: 460, 470 és így tovább.

Grafikus tábla mérete

Amikor rajzol, a munkaterület aktív területe nagyon kicsi. Más szóval, a ceruza folyamatosan csúszik egy kis kör sugarán belül. Ez a kör kicsit elmozdulhat. Idővel folt képződik, amely mikrokarcok sűrű felhalmozódásaként látható. Azt mutatja, hogy gyakorlatilag nem használja a készülék perifériáját, minden a központban történik.

Feltételezhetjük, hogy nincs szükség nagy grafikus táblagépre, mivel soha nem fogja használni a teljes munkaterületét, és a tevékenységi hely mérete megegyezik egy kisebb modellel. De ez nem igaz.

Ha táblagépen dolgozik, a munkaterület a monitor teljes szélességében kivetül. Ezért minél nagyobb a tabletta, annál pontosabban alkalmazhat vonásokat. És fordítva, minél nagyobb a monitor és minél kisebb a táblagép, annál nehezebb és kényelmetlenebb lesz a rajzolás. Tapasztalatból elmondhatom, hogy az S méretről M-re váltás után, amikor egy 29 hüvelykes ultraszéles monitoron dolgoztam, 25-30%-kal kényelmesebb lett a munkám. Úgy gondolom, hogy kevesebb erőfeszítést igényel egy összetett körvonal megrajzolása, és az általános élmény simábbnak és élvezetesebbnek tűnik.

A nagyobb grafikus táblagépek még kényelmesebb munkakörnyezetet kellene, hogy biztosítsanak, de L-modelleken nem dolgoztam, így csak feltételezni tudom.

Különbségek az amatőr és a professzionális Wacom tabletek között

Profi modell megvásárlásával egy jobb minőségű műanyagból készült vezeték nélküli eszközt kap, amely 2048 nyomásérzékenységi szinttel rendelkezik az olcsóbb modellek 1024-hez képest, gyönyörű dizájnnal, további gombokkal és érintőgyűrűvel rendelkezik. Teljesen elégedett vagyok a Bamboo sorozat fiatalabb, elavult modelljeivel, amelyek már megszűntek. Az amatőr és a pro verzió közötti költségkülönbség több mint kétszeres lesz. A táblázat mindent rendbe tesz:

A Wacom Bamboo Pen & Touch M CTH-670 beállítása

Az eszköz csatlakoztatása előtt töltse le az illesztőprogramokat a Wacom hivatalos webhelyéről.

A táblagép csatlakoztatása és az illesztőprogramok telepítése után indítsa el az alkalmazást Wacom beállítások, amely megtalálható a Windows keresésen keresztül (Win + S) vagy a Vezérlőpulton.

A cég táblagépeinek alapbeállításai nem különböznek egymástól, mind az amatőr, mind a professzionális modellek hasonló módon vannak konfigurálva.

A lapon Tabletta A táblagépet beállíthatja jobb- és balkezesre, valamint műveleteket rendelhet a billentyűkhöz. Először telepítse őket Tiltva, idővel lehetőség lesz gyorsbillentyűk hozzárendelésére.

A következő lapon Toll fontos paraméterek találhatók:

• Tipp Érezd- nyomásérzékenység. Hagyja a közepén. A folyamat során meg fogja érteni, hogy milyen keménységet szeret, és ízlése szerint állítja be;
• Követés— ceruza helyzetkövetési mód. Telepítés Toll mód- a táblagép munkaterülete megnyúlik, hogy kitöltse a teljes képernyőt. Mód Egér egér helyettesítésére használható;
• A többi beállítás nem olyan fontos. Toll gombok lehetővé teszi egy művelet hozzárendelését a ceruza gombjaihoz. Eraser Feel— a toll hátulján lévő gumiszalag érzékenysége. Nem használom ezt a funkciót, mert gyorsabban válthatok gyorsbillentyűkkel.

Ugyanazon a lapon a szakaszban Követés nyomja meg a gombot Térképezés... a táblagép munkaterületének a monitor képernyőjére való vetítésének konfigurálásához. Megnyílik egy ablak Toll mód részletei.

fejezetben Képernyő terület választ Monitor, ha több monitorod van, és jelezd a főt. Ha csak egy monitor van, hagyja azt Minden képernyő

fejezetben Méretezés feltétlenül jelölje be a mellette lévő négyzetet Erőarányok hogy a munkaterület ne nyúljon meg a képernyőre vetítve. Ebben az esetben a táblagép munkaterületének egy része nem kerül felhasználásra, de normál arányban 1:1 lesz. És ha kört rajzol, az körként jelenik meg a képernyőn, nem pedig megnyúlt ellipszisként.

Feltétlenül jelölje be a mellette lévő négyzetet Használja a Windows Ink-et nyomásérzékenység munkához.

A következő lapon Érintse meg az Opciók lehetőséget törölje a jelet a szemközti négyzetből Érintős bevitel engedélyezése a táblagép normál módba kapcsolásához.

A többi lapon mindent letiltottam, mivel nem használok sem érintésmódos gesztusokat, sem a saját tulajdonú legördülő menüt. Ezzel befejeződik a grafikus tábla beállítása.

Animálni CC vagy Flash Professional CC?

Az Adobe Animate CC az Adobe Flash Professional CC márkaváltása, számos újítással bővült a program. Még a régi névvel együtt is óriási népszerűségre tett szert a művészek, animátorok és indie játékfejlesztők körében. A vektortervezési elvek lehetővé teszik bármilyen felbontású sprite létrehozását. Bármelyik verzió használható a rajzoláshoz. A rajzeszközök sok éven át változatlanok maradtak, csak kisebb fejlesztésekkel. Adobe Animate CC-t fogok használni, de minden, ami leírt, az Adobe Flash Professional régebbi verzióira is vonatkozik. Az Adobe egyébként nemrégiben havi előfizetéses modellre váltott, hogy a drága egyszeri licencelés helyett hozzáférhessen termékeihez. Az Adobe Animate CC jelenleg havi 20 dollárba kerül.

Az Adobe Animate CC első elindítása

A letöltés után hozzon létre egy új fájlt, és válassza ki a típust Action Script 3.0. Ugyanebben az ablakban adhatja meg a jelenet paramétereit:

• SzélességÉs Magasság— a jelenet szélessége és magassága pixelben. Állítsuk 1920 x 1024-re, mint egy modern monitor vagy okostelefon felbontása;
• Vonalzó egységek— mértékegységek, pixelek beállítása;
• Filmkocka szám— képkockák száma másodpercenként, hagyja 24;
• Háttérszín— háttérszín, szürkére állítva.

Ezek a beállítások a dokumentum létrehozása után módosíthatók. Ehhez ki kell választania egy eszközt Kiválasztó eszköz(V gyorsbillentyű), nyitott ablak Tulajdonságokés bontsa ki a részt Tulajdonságok. Ha nem találja ezt az ablakot, használja a menüt Ablak → Tulajdonságok vagy a Ctrl + F3 billentyűparancsot.

Gyorsbillentyűk beállítása

A munka hatékonyságának növelése érdekében a gyorsbillentyűket maximálisan kell használnia. A kezdeti szakaszban ehhez meg kell szokni és meg kell tanulni az új billentyűkombinációkat, de a jövőben ez komoly ugrást jelent a hatékonyságban. A legtöbb gyorsbillentyűt újradefiniáltam, hogy azok a billentyűzet jobb oldalán legyenek. Miért a jobb oldalon? Az a helyzet, hogy balkezes vagyok, és ennek megfelelően kényelmesebb számomra. Ha jobbkezes vagy, akkor saját sémát kell kitalálnod. Ezen kívül a Rapoo E9050-et és az Apple Wireless Keyboardot használom, amelyek a laptop billentyűzetek formátumában készülnek, tehát ha teljes méretűt használsz, akkor ismét dolgozz keményen és találd ki a saját sémádat - sok megspórolt idő alatt megtérül – és példának tekintse a tervemet.

Merítse meg az ötletet: csoportosítsa az alapvető parancsokat a billentyűzet kényelmes oldalán a gyors eléréshez anélkül, hogy folyamatosan változtatná a kéz helyzetét. Legtöbbször egy helyen kell feküdnie, csak az ujjai „járnak” kis körben, gombokat nyomva. Persze továbbra is lesznek olyan csapatok, amelyek pozícióváltást követelnek, de ők elsöprő kisebbségben vannak. Íme a diagramom:

A legtöbb esetben az új kombinációk nem helyettesítik a régieket, hanem kiegészítik azokat, számos új parancs kerül bevezetésre. A menüben kell konfigurálnia Szerkesztés → Gyorsbillentyűket.... A keresőmezőbe írja be a csapat nevét az oszlopba Parancsikon Kattintson a kívánt paranccsal szemben lévő üres helyre, és nyomja meg az új billentyűkombinációt.

Ne próbálja megérteni a táblázatban megadott parancsokat, mindegyiket elmagyarázzuk a következő leckékben. A jövőben, amikor elkezdi aktívan használni őket, valószínűleg többször is újradefiniálja őket, amíg meg nem találja a legkényelmesebb lehetőséget.

Ecset beállítások

Ecset eszköz(B gyorsbillentyű) - a rajzoláshoz leggyakrabban használt ecseteszköz. A beállítások két ablakban összpontosulnak:

Elkészültek az ecsetbeállítások, festjünk valamit.

Rajz ecsettel

Válassza ki a megfelelő színt a Szín ablak (Ctrl + Shift + F9) segítségével, válassza ki az Ecset eszközt (B), és kezdje el egy hosszú húzással, kis erővel a jövőbeli alakzat körvonalazásához. Ezután kövesse a kapott körvonalat, hogy kisimítsa az összes egyenetlenséget - az ecset készen áll.

Kérjük, vegye figyelembe, hogy a fenti példában csak három ütést használtak. Törekedjen közepes hosszúságú vonásokra, hogy a keze ne hagyja el a tablettát. Hibás, ha sok apró vonást próbálunk végrehajtani, mivel a kapott kontúr sima lesz, és sok plusz ponttal.

Az Adobe Animate CC vektor elveken működik. Minden objektum matematikailag van leírva, és minőségromlás nélkül méretezhető, ellentétben a raszteres megközelítéssel. Ez lehetővé teszi számunkra, hogy olyan módon manipuláljuk a vektorobjektumokat, amelyeket soha nem tudnánk olyan könnyen megtenni egy raszteres szerkesztőben. Minőségromlás nélkül simíthatjuk és egyszerűsíthetjük a kontúrokat, kiegyenesíthetjük az ívelt vonalakat, megváltoztathatjuk az arányokat és deformálhatjuk a grafikai objektumokat. Minden vonás automatikusan matematikai görbékké alakul, amelyeket finomhangolhatunk és módosíthatunk.

A fentiek ellenőrzéséhez aktiválja az eszközt Alválasztó eszköz(A gyorsbillentyű), és válassza ki az imént rajzolt ecsetet. Most már láthatja a vektor útvonalának pontjait, és akár módosíthatja is azokat.

Következtetés

Ma beállítottuk az Adobe Animate CC-t, és készen állunk a rajzolás megkezdésére. Gyakorolj egy kicsit, mielőtt folytatnánk. Tanuljon meg egyszerű geometriai alakzatokat torzítás nélkül rajzolni, próbáljon ki különböző színeket és ecsetbeállításokat (kísérletezzen a Simítás paraméterrel).

Hasonló anyagok

Egy második karakter vagy szövegmező hozzáadása a tween tartományhoz lecseréli az eredeti karaktert a tweenben. A mozgás célját a következő módok bármelyikével módosíthatja:

• húzzon egy másik szimbólumot a könyvtárból az animációs tartományba az idővonalon;
• használja a parancsot Szerkesztés > Szimbólum > Szimbólum cseréje.

Eltávolíthat egy szimbólumot az animációs rétegből anélkül, hogy törölné vagy felosztaná magát az animációt. Később hozzáadhatja a szimbólum másik példányát az animációhoz. A szimbólumot vagy annak típusát is bármikor módosíthatja.

Lásd még

Mozgóanimációs komponensek

• Ez egy idővonalon lévő képkockák sorozata, amelyben az idővonalon lévő objektum egy vagy több tulajdonsága idővel változik.
• Egy tween span jelenik meg az idővonalon keretek csoportjaként a háttérszínnel azonos rétegen.
• Ezek az animációs tartományok kijelölhetők egyetlen objektumként, áthúzhatók az idővonal egyik helyéről a másikra, és akár egy másik rétegre is.
• Minden animációs tartomány csak egy objektumot képes animálni a színpadon. Ezt az objektumot animációs span célnak nevezik.

• egy keret egy tween tartományban, ahol a cél Tween objektum egy vagy több tulajdonságértéke kifejezetten definiálva van.
• Ezek a tulajdonságok magukban foglalhatják az alfa pozíciót (átlátszóság), a színárnyalatot stb.
• Minden meghatározott tulajdonsághoz külön tulajdonságkulcs-keret jön létre.
• Ha egynél több tulajdonságot ad meg egy keretben, akkor az egyes tulajdonságokhoz tartozó kulcskeretek ebbe a keretbe kerülnek.
• A Motion Editor segítségével megtekintheti az egyes kéttartomány-tulajdonságokat és a hozzá tartozó kulcskockákat.
• Az idővonalon megjelenítendő tulajdonság-kulcskockák típusának kiválasztásához az animációs szakasz helyi menüjében kattintson a jobb gombbal a tulajdonság kulcskockájára, és válassza a Kulcskockák megtekintése lehetőséget.

Animációs célpont

A mozgási tartományban egy objektum van, amelyet célobjektumnak neveznek. Egyetlen célobjektum használata egy animációban számos előnnyel jár:

• Az animációk elmenthetők újrafelhasználásra.
• Könnyedén mozgathat egy mozgást az idővonalon (húzza a tween-t egy másik helyre) vagy a színpadon.
• Ha új példányt szeretne alkalmazni egy meglévő mozgási tweenre, kövesse az alábbi lépéseket:
  • illessze be az animációba a cseréhez;
  • húzzon egy új példányt a könyvtárból;
  • használja a Szimbólum cseréje parancsot.

Animálható objektumok és tulajdonságok

Azok az objektumok típusai, amelyekhez mozgósítást alkalmazhat filmklipek, grafikák, gombszimbólumok és szövegmezők megjelenítéséhez. Ezek az objektumok a következő tulajdonságokkal rendelkezhetnek:

• Helyezze el az X és Y tengely mentén a síkon

Z pozíció a 3D térben (csak klipek)

Elforgatás egy síkban (a z tengely körül)

Forgatás az X, Y és Z tengely körül a 3D térben (csak filmklipeknél): Megadja, hogy az FLA-fájl az ActionScript 3.0-hoz és a Flash Player 10-hez vagy újabb verzióhoz való-e a Közzétételi beállításoknál. Az Adobe AIR támogatja a 3D mozgást is.

X és Y dönthető

X és Y skála

Színeffektusok: Alfa-csatornát (átlátszóságot), fényerőt, színárnyalatot és speciális színbeállításokat tartalmaz. A színeffektusok csak TLF-karakterekhez és szöveghez animálhatók. E tulajdonságok animálásával egy objektumot simán jeleníthet meg, vagy megváltoztathatja a színét. Ha klasszikus szöveghez színhatású mozgást szeretne létrehozni, alakítsa át a szöveget szimbólummá.

Szűrő tulajdonságai (a szűrők nem alkalmazhatók grafikus szimbólumokra)

Motion Tween létrehozása

Háromféle módon hozhat létre mozgást:

• Hozza létre az animálni kívánt grafikát vagy példányt, majd kattintson a jobb gombbal a keretre, és válassza ki Hozzon létre egy mozgás animációt.
• Válassza ki az animálni kívánt grafikát vagy példányt, majd kattintson a jobb gombbal a keretre, és válassza ki Beszúrás > Tween Motion.
• Hozza létre az animálni kívánt grafikát vagy példányt, majd kattintson a jobb gombbal a példányra munkaterületés válassza ki Hozzon létre egy mozgás animációt.

Motion Tween létrehozása

Animálja más ingatlanok mozgását az ingatlanfelügyelő segítségével

Használja a parancsot Hozzon létre egy mozgás animációt egy szimbólum vagy szövegdobozpéldány legtöbb tulajdonságának animálásához. Ilyen tulajdonságok közé tartozik például az elforgatás, a méretezés, az átlátszóság vagy a színárnyalat (csak TLF-karakterek és szöveg). Például megváltoztathatja egy szimbólumpéldány alfa-átlátszósági tulajdonságát, hogy az simán jelenjen meg a képernyőn. Azon tulajdonságok listájáért, amelyekre mozgást alkalmazhat, lásd: Animálható objektumok és tulajdonságok.

Jelöljön ki egy szimbólumpéldányt vagy szövegmezőt munkaterület.

Ha a kijelölés más objektumokat tartalmaz, vagy több objektumot tartalmaz egy fóliából, az Animate program kéri, hogy konvertálja filmklipszimbólummá.

Válassza ki Beszúrás > Mozgó animáció.

Ha megjelenik egy párbeszédpanel Konvertálja a kijelölést karakterré az animációhoz, kattintson az OK gombra a kijelölés filmklip szimbólummá alakításához.

Ha egy mozgást egy olyan objektumra alkalmaznak, amely csak egy képkockához létezik, a lejátszófej az új mozgási tween utolsó képkockájára lép. Ellenkező esetben a lejátszófej nem mozdul.

Helyezze a lejátszófejet azon animációs tartomány keretébe, amelyhez tulajdonságértéket szeretne beállítani.

A lejátszófej az animációs tartomány bármely más képkockájára helyezhető. A Motion Tween a tulajdonságértékekkel kezdődik a tween span első képkockáján, amely mindig egy tulajdonság kulcskockája.

Hozzunk létre egy új fájlt, tegyük 800x600-as méretre, és vigyünk át bele néhány fájlt, mégpedig ezt a néhány képet és az „erdő zaját mp3”, azaz hangot. ide költöztetem. Eredményünk ez a kép – ez egy erdő, a neve „bg”, „play” és „pause”, ezek a gombok. Most lehúzom őket, mozgassuk őket, valami ilyesmi - a legegyszerűbb lehetőség.

Most elindítom az animációt, nyomja meg a cntr+entert, csak egy erdő van és csak két gomb, semmi sem működik. Ha egy hangot akarok automatikusan lejátszani nekem, akkor ezt "erdőzaj"-nak hívják, akkor ki kell választanom ezt a réteget, majd ki kell választanom az "automatikus lejátszást", most amikor megnyomom a cntr+enter billentyűket, a hang szól. Elképesztő.

Kattintható hivatkozás hozzáadása egy videóhoz az Adobe Edge Animate programban.

Ha csak rajzoltunk valami gombot és van valami háttér, akkor ha rákattintunk, akkor sehol nem lesz átmenet. Hozzáadni interaktív link Ki kell választanunk ezt a gombot, jobb egérgombbal kattintani nyitott művelet, rossz gomb, így hívom, és kattintás kattintás, vagyis mi történik, ha rákattintunk. És itt ki kell választanunk az Open you are raol lehetőséget.

Ebben a videóban megmutatom, hogyan kell csinálni, nem bonyolult, de pontosan meg kell értened, hogy hova kell másolni a helyes kódot, és hova kell beilleszteni.

Tegyük fel, hogy van videó Adobe Edge animációval készült, rákattintva megnyílik a kívánt nyitóoldal, élanimált formátumban, a forráskóddal és a Java scriptekkel együtt a mappába mentve. Nyissa meg bármelyik szövegszerkesztőben, bármilyen tesztszerkesztőt használhat, például: jegyzettömb, stb.

Hogyan készítsünk animációt az Adobe Edge Animate programban, vagyis hogyan készítsük el úgy, hogy amikor a végéig lejátsszuk, az elölről induljon, és örökké tartson.

Ide másolhat kulcskockákat, vagyis kijelölök egy keretet, lenyomom a cntr+c-t, rákattintok a kívánt mezőre, a cntr+v billentyűkombinációt, az animáció hurkolni fog, vagyis nem hurkol, hanem ebben az esetben a kiindulópont vissza a kiindulópontra. Ha lefuttatom ezt a videót és megnyomom a cntr+entert, akkor azt látjuk, hogy az animáció csak 1 másodpercig tart, az egyik oldalra megy, és visszatér a másikra.

Ebben a videóban megmutatom, hogyan kell csinálni, nem bonyolult, de pontosan meg kell értened, hogy hova kell másolni a helyes kódot, és hova kell beilleszteni.

Tegyük fel, hogy van egy Adobe edge animációs bannered, amire rákattintva megnyílik a kívánt landing oldal, ez edge animációs formátumban van és a forráskóddal és a Java scriptekkel egy mappába mentve. Nyissa meg bármelyik szövegszerkesztőben, bármilyen tesztszerkesztőt használhat, például: jegyzettömb, stb.

Ezután szeretném beilleszteni ezt a bannert az oldalra. Mit kell tenni? Le kell tölteni az index fájlt, majd megnyitni egy szövegszerkesztőben, bemásolni az Adobe edge kódot és a végén ide kell beírni a kódot a „fej” elé, majd a hely címe elé, ahol a bannerünket feltesszük, előtte a div. A pontosabb végrehajtás érdekében a következő utasítások segítenek: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Utána mentünk és megyünk az FTP szolgáltatásba, én filezillát használok, megkeresem az oldalad tárhelyét és a szerveren található index mappát bemásolod a fájlodba, az aktuális fájlok helyére. Ezután letöltjük az összes Java szkriptet, és frissítjük a webhelyet. Minden készen áll - az animáció működik, és megnyílik a nyitóoldalt tartalmazó lap is.

Ha érdekelnek az ilyen leckék, iratkozz fel a csatornámra, mert... a közeljövőben sok új videó lesz - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – Tegyük fel, hogy van egy szalagcíme, amely Adobe edge animációval készült

01:30 – banner hozzáadása az oldalhoz

02:09 – adjon hozzá kódot a „head” címke elé

02:50 – Útmutató a banner oldalhoz való hozzáadásához

03:31 – Fájlok feltöltése a szerverre

05:29 – frissítjük az oldalt és minden készen áll!

Csatlakozz és tedd fel kérdéseid:

Tölts le három ingyenes Muse sablont: http://site/free-landing.html

http://vk.com/adobeedgeanimate

A VKontakte-on vagyok: http://vk.com/danilfimushkin

A webináriumon elmondtam és megmutattam, hogyan lehet vektoros illusztrációból teljes értékű animált bannert készíteni.

00:17 – elkezdjük animálni a vektoros illusztrációt az Edge Animate programban
14:06 – hozza létre a karakter mancsainak mozgását
16:54 – a beágyazott szimbólum előnyei
17:48 – mi az a beágyazott szimbólum
18:24 – hurkos animáció írása
19:42 – Elkészült a hurkos animáció
23:40 – hozzon létre szempislogást
26:54 – határozza meg a fájlneveket mentéskor
27:57 – „legördülő” szöveg animációja
28:39 – mozgásgörbe csatolása – animációs tengely megváltoztatása
30:03 – az animáció köztes összefoglalója, havas táj létrehozása és hópehely animálása
33:39 – Edge Animate ismertető
34:52 – házi feladat
35:25 – hogyan adjunk hozzá aktív linket
39:09 – több gomb létrehozása és hivatkozások csatolása

Csatlakozzon és tegyen fel kérdéseket: http://vk.com/adobeedgeanimate