Cursuri online pentru a învăța cum să lucrezi în Adobe Animate. Danil Fimushkin. Diferențele dintre tabletele Wacom amatoare și profesionale

UPD 6 decembrie 2015:
Managerul de produs pentru Flash Runtime și Adobe AIR a spus că acestea nu ai planuri să nu mai lucreze pe Flash Runtime și AIR și redenumirea unui produs de creare de conținutîn nici un caz nu are legătură cu soarta Flash Playerși ecosistemul aferent.

Totul ar fi bine, cu excepția unei nuanțe care schimbă foarte mult sensul - analfabetismul tehnic și copy-paste general. Publicațiile se retipăresc reciproc, adăugând tot mai multe „fapte” care nu sunt în original. Într-un cuvânt - un telefon deteriorat.

Articolul original http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html raportează că Adobe redenumește Flash Professional în Animate CC. În plus, ei raportează că clienții doresc mai multe platforme acceptate etc.

Și nu am fost surprins că mulți oameni nu văd diferența dintre Flash și Flash Professional. Pe site-urile de știri au început să apară diverse gaguri, citând alte surse care leagă mai departe în lanț. Și nu întotdeauna originalul.

Astăzi, cuvântul Flash este perceput ca un plugin pentru browsere. Din punct de vedere tehnic, este Flash Player. Dar există un instrument de creare de conținut - Flash Professional. Dacă Microsoft a redenumit Word în TextMachine, oamenii ar striga că „Microsoft a încetat să mai dezvolte Word?” Chiar dacă este scris în alb și negru, crearea de conținut va fi acceptată și datele pot fi editate?

Din propriile mele exemple pot demonstra o imagine vie. Clienții locali mă întreabă ce vom folosi pentru a crea animație pentru o prezentare pentru iOS. Sunt mândru să spun asta în Flash Professional. Iar clientul este în stupoare. După o clipă spune:

„Dar pe hub scriu că blițul este mort și nu funcționează pe tabletă”

Și apoi cad în stupoare. Analfabetismul tehnic al clienților și autorilor de articole despre flash îi face pe oameni să se îndepărteze de rezultatul dorit. Din fericire, clientul a fost convins și a fost mulțumit de rezultat.

Să revenim la articolul original. Ei raportează că html5 s-a maturizat și acceptă deja majoritatea funcțiilor Flash. Mergând în jos, vedem că Adobe înșiși văd Flash ca un mijloc cheie de a furniza conținut premium - jocuri web și videoclipuri premium. Dar nu se vorbește despre oprirea suportului pentru Flash.

Mai mult... Ei afirmă clar că lucrează în parteneriat cu Microsoft și Google pentru a îmbunătăți compatibilitatea și securitatea Flash Player. Și nu au uitat să adauge că lucrează îndeaproape cu Facebook pentru a îmbunătăți fiabilitatea și siguranța jocurilor în Flash Player. Deci, unde există vreun cuvânt că abandonează Flash?

Dacă vorbim despre dezvoltarea Flash în general, da, s-a oprit cu mult timp în urmă. Sunt făcute doar îmbunătățiri minore (dar semnificative) și erori de securitate sunt remediate. Dar este chiar atât de rău? Din punctul meu de vedere, Flash are tot ce-i trebuie. Desigur, mi-aș dori mai mult. Dar de ce?

Pentru mai multe, ar trebui să optați pentru formatul Standalone de jocuri. Și există Adobe AIR (dacă ne gândim la Flash). Suportul Adobe AIR nu a fost retras. Am informații despre planurile pentru 2016. Dar flash-ul browserului va muri? Cu siguranță. Dar cu siguranță nu mâine.

Și pentru cei cărora le place să spună în clișee că Flash consumă bateria, arată-mi cum o încarcă Canvas.

De asemenea, este de remarcat faptul că proiectul Adobe Edge Animate nu va mai fi dezvoltat activ. Dar pentru că Sunt aproape de dezvoltarea Flash Professional - vă asigur că Edge Animate nu va fi dezvoltat deloc (cu excepția erorilor critice). Această decizie a fost luată în favoarea Adobe Flash Professional (viitorul Animate CC).

Pentru a pregăti reclamele HTML pentru plasarea în ADFOX, este important să respectați cerințele de inserare a codului care procesează un clic pe un banner și numără evenimentele din banner.
Când dezvoltați codul HTML, puteți utiliza editorii pentru care au fost scrise aceste instrucțiuni:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

Cerințe pentru codul HTML (pentru dezvoltatorii de coduri)

Pregătiți-vă proiectul îndeplinind următoarele cerințe:

1. Numărul maxim permis de caractere în codul HTML este de 65.000;
2. Este de preferat să plasați JavaScript și CSS în codul HTML al bannerului;
Dacă codul HTML rezultat depășește numărul maxim permis de caractere, atunci trebuie să reduceți codul mutând JavaScript și CSS în fișiere separate:
- salvați codul js și css în fișiere separate cu extensia .js sau .css;
3. Un proiect poate conține un singur fișier cu extensia .html;
4. Numărul maxim permis de fișiere într-un proiect este de 50;
5. Tipuri de fișiere permise în proiect: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etc. , eot, fnt, fon, mf, ttc, woff;
6. Dimensiunea maximă a fiecărui fișier (se aplică și fișierelor din arhivă):
- 300Kb;
- 1MB pentru fișiere video.
7. Numele fișierelor trebuie să conțină numai cifre sau litere din alfabetul englez și caracterul de subliniere. Nu este permisă utilizarea de litere rusești, spații, ghilimele și caractere speciale în numele fișierului;
8. Nu puteți folosi litere rusești în numele variabilelor și obiectelor.
Singura excepție este textul de pe banner.
9. Formatul proiectului finalizat - fermoar Arhiva.

Adobe Animate CC

1. Pregătirea editorului.

Pentru a crea un proiect nou în AdobeAnimate CC, selectați proiectul „HTML5 Canvas”.

Codul acestui șablon poate fi folosit ca bază la crearea reclamelor în editor.

Pentru a aplica un șablon unui proiect, în setările de publicare, selectați „Setări avansate de publicare -> Import nou...”.

Șablonul conține script adfox_HTML5.js

3. Faceți clic pe procesare

Dacă reclama dvs. include animație ciclică, atunci utilizați coduri pentru butoanele numai din secțiune.

3.1 Pentru a face clic pe întreaga zonă a bannerului și pentru a avea un link la care să accesați, adăugați următorul cod în primul cadru al animației:

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

3.2 Pentru a adăuga mai multe butoane pentru deplasarea cu link-uri diferite, adăugați un buton principal pentru a face clic pe banner din stratul de animație de sus, atribuiți butonului un Nume de instanță și scrieți codul pe butonul:

This.btnMain.addEventListener(„clic”, funcția (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(); ); )) ;

Adăugați alte butoane care, atunci când sunt apăsate, vor transfera utilizatorul în diferite pagini ale site-ului promovat.
Plasați câteva butoane pe stratul superior deasupra anumitor părți ale animației, dați butoanelor un nume de instanță și scrieți codul pentru fiecare buton:

This.btnLeft.addEventListener(„clic”, funcția (e) ( var t = e.nativeEvent; if (t.which == 1 || t.button == 0) ( window.callClick(n); ); ) );

Unde n

3.3

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

Unde mouse-ul peste- eveniment javascript, n- numărul evenimentului de la 1 la 30 care ar trebui să fie declanșat.

Caracteristici de creare a animației în buclă

Pentru a implementa animația în buclă într-o reclamă în editorul Animate CC:
- setați opțiunea „Loop Timeline” în setările publicației;
- utilizați codurile pentru butoanele din această secțiune, iar codurile pentru butoanele obișnuite de la paragrafele 3.1 și 3.2 trebuie eliminate.

Cod pentru o reclamă cu un singur buton și animație în buclă:

Dacă (typeof(this.stopCycle) == „nedefinit”) ( this.btnMain.addEventListener(„clic”, funcția (e)) ( var t = e.nativeEvent; dacă (t.which == 1 || t.button) == 0) ( window.callClick(); ); )); this.stopCycle = true; )

Dacă există mai multe butoane, atunci în codul pentru apelarea evenimentelor ADFOX, adăugați următorul cod:

Dacă (typeof(this.stopCycle) == „nedefinit”) ( this.btnMain.addEventListener(„clic”, funcția (e)) ( var t = e.nativeEvent; dacă (t.which == 1 || t.button) == 0) ( window.callClick(); ; )); this.btnLeft.addEventListener(„clic”, funcția (e) ( var t = e.nativeEvent; if (t.which == 1 || t. buton) == 0) ( window.callClick(n); )); this.stopCycle = true; )

Unde n- numărul evenimentului de la 1 la 30 care ar trebui să fie declanșat.

Folosind butoane transparente

Butoanele transparente pot fi folosite, de exemplu, dacă trebuie să faceți clic pe întreaga zonă a bannerului sau doar pe o parte. Pentru ei, precum și pentru butoanele obișnuite, trebuie adăugat un cod pentru apelarea unei tranziții sau a unui eveniment.

Butoanele din Animate sunt simboluri care conțin patru cadre. Puteți lăsa primele trei goale și completați doar ultimul „Hit” adăugând conținut (un element grafic) la acesta prin Inserare > Cronologie > Cadru cheie.

Conținutul cadrului Hit este invizibil, dar definește zona butonului care răspunde la un clic. Puteți adăuga conținut (un element grafic) la acest cadru prin Inserare > Cronologie > Cadru cheie. Dacă restul cadrelor sunt lăsate goale sau invizibile, butonul din scenă apare albastru transparent și are forma conținutului conținut în următorul cadru Hit. Când vă publicați proiectul, zona albastră transparentă nu va fi vizibilă.

Caracteristica implementării unui banner de întindere (cauciuc).

Pentru a face ca bannerul să se întindă pe lățimea containerului în care va fi amplasat pe site, faceți setările: Selectați Fișier > Setări de publicare.
În fila De bază, Selectați Faceți receptiv > Lățime, Înălțime sau Ambele.
Selectați Scalați pentru a umple zona vizibilă pentru a vizualiza ieșirea în modul ecran complet.
Selectarea „Fit in view” va scala conținutul pentru a umple tot spațiul disponibil pe ecran, menținând în același timp același raport de aspect. Deci, dacă lățimea maximă a fost deja atinsă, atunci zona de-a lungul înălțimii ecranului poate rămâne neumplută și invers.

Dacă nu puteți obține rezultatul dorit folosind setările programului, utilizați scripturi.
Iată exemple de coduri:
Descărcați codul pentru scalarea raportului de aspect.
Descărcați codul pentru scalare fără raport de aspect.
Descărcați codul pentru poziționarea elementelor, unde an0..an4 este Numele Instanței al elementelor.

Caracteristici de creare a unui banner cu intermitent automat

Dacă doriți să afișați un banner dintr-o stare extinsă, atunci când adăugați un banner în interfață, trebuie să specificați valoarea „da” în parametrul „Extindere automată întotdeauna” sau „Extindere la inițializare” și să adăugați codul în Reclamă HTML:

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 = adevărat; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = fals; window.global_main_banner.btnExpand.visible = exp_banner; ) else( window_banner.global vizibil = fals; window.global_exp_banner.btnCollapse.visible = fals; window.global_main_banner.visible = adevărat; window.global_main_banner.btnExpand.visible = adevărat; ) window.global_main_banner.btnExpand.addEventListener("click.bin", expand(thianner.bin), )); window.global_exp_banner.btnCollapse.addEventListener(„click”, collapseBanner.bind(this)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = adevărat; window.global_exp_banner.btnCollapse.visible = adevărat; window.global_main_banner.visible = fals; window.global_main_banner.btnExpand.visible = fals ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = fals; window.global_exp_banner.btnCollapse.visible = fals; window.global_main_banner.visible = true; window.global_main_banner.btnExpand. = adevarat;)

5. Publicarea proiectului.

Important! Când previzualizați un proiect în browser prin (Ctrl-Enter | Cmd-Enter) valorile aleatorii ale formularului sunt atașate la legăturile din numele fișierelor în HTML ?1468231208369 . Astfel de valori trebuie excluse din proiect atunci când îl încărcați în ADFOX.
Pentru a face acest lucru, proiectul final în editor trebuie publicat prin Fișier > Setări de publicare > Publicare (Shift-Ctrl-F12 | Shift-Cmd-F12).

Când publicați un proiect, selectați un șablon AdobeAnimate_Adfox_.html.

.zip

Google Web Designer

Codul acestui banner poate fi folosit ca bază la crearea reclamelor în editor.

Șablonul conține script adfox_HTML5.jsși un set de parametri pentru funcționarea corectă a tranzițiilor și a numărării evenimentelor:
%reference%, %user1%, %eventN%, unde N este numărul evenimentului de la 1 la 30.

2. Faceți clic pe procesare.

Toate evenimentele sunt alocate unor elemente de animație specifice prin fila Evenimente.

Componenta Zona interactivă este utilizată pentru a invoca acțiuni.
Adăugați-l și selectați un eveniment „Zona interactivă” - „Atinge/Clic”(sau „Atingeți zona > Atingeți/Click” în versiunea în limba engleză).

În fila „Cod personalizat”, specificați un apel la funcția de clic.

2.1

CallClick();

2.2

CallClick(n);

Unde n

2.3 Dacă trebuie să declanșați un eveniment dintr-o animație fără o tranziție, utilizați următorul cod:

CallEvent(n);

Unde n- numărul evenimentului care ar trebui apelat.

Astfel încât bannerul să se întindă pe lățimea containerului în care va fi amplasat pe site, pe panou Proprietăți Pentru poziție și dimensiuni, specificați procente în loc de pixeli.

Utilizați și opțiunile „Aliniați la container”Și „Aspect cauciuc” pe bara de instrumente de sus.
Dacă activați Fluid Layout înainte de a utiliza orice instrument de aliniere, atunci când redimensionați containerul părinte, toate elementele vor fi aliniate între ele și la dimensiunile containerului.
În acest caz, puteți utiliza simultan atât dimensiunile relative ale elementelor în procente, cât și dimensiunile absolute în pixeli.

4. Publicarea proiectului.

Când adăugați un banner la ADFOX, managerul va trebui să cunoască corespondența butoanelor și numerelor evenimentului. Pentru fiecare eveniment, managerul va scrie propriul link la care să navigheze, care va fi apoi trecut în codul banner folosind o variabilă.

După publicarea proiectului, arhivați-l în format .zip. Reclamă este gata pentru a fi încărcată în bannerul ADFOX.

Adobe Edge Animate CC

Pentru a începe, rulați fișierul cu extensia .un din arhiva.

2. Faceți clic pe procesare.

Toate evenimentele sunt alocate unor elemente de animație specifice prin fila „Cod”.

Pentru a naviga prin elementul selectat, trebuie să selectați un eveniment clicși scrieți un apel la funcția de clic.

Butoanelor trebuie să li se aloce un Nume de instanță, de exemplu: btnMain, btnRight.

2.1 Dacă utilizați un singur buton de salt:

CallClick();

2.2 Dacă există mai multe butoane de tranziție:

CallClick(n);

Unde n- numărul evenimentului care ar trebui apelat.

2.3 Dacă trebuie să declanșați un eveniment dintr-o animație fără o tranziție, utilizați următorul cod:

CallEvent(n);

Unde n- numărul evenimentului care ar trebui apelat.

Caracteristica implementării unui banner de întindere (cauciuc).

Pentru ca bannerul să se întindă pe lățimea containerului în care va fi amplasat pe site, atunci când pregătiți bannerul în editorul din panoul Proprietăți, trebuie să specificați procente în loc de pixeli pentru poziție și dimensiune.

Există, de asemenea, butoane Scale Size și Scale Position pentru elementele din panoul Poziție și Dimensiune

4. Publicarea proiectului.

Proiectul trebuie publicat cu următoarele setări:

După publicarea proiectului, arhivați-l în format .zip. Reclamă este gata pentru a fi încărcată în bannerul ADFOX.

De mai bine de șapte ani lucrez de la distanță cu clienți străini din SUA, Canada, Australia, Germania și alte țări. Desenez resurse grafice și animație pentru jocuri Adobe Animate CC. Anterior a fost sunat redactorul Adobe Flash Professional CC.

Pe vechiul blog am început o serie similară de lecții, dar în loc să continui acolo, am decis să rescriu totul din nou pentru a împărtăși o nouă experiență.

De ce avem nevoie de încă o serie de lecții despre desen în Adobe Flash? Fac asta de mulți ani și cred că experiența mea poate fi utilă pentru începători. Mai ales pentru cei care nu au desenat niciodată cu o tabletă grafică până acum. Dacă ești bun la desen pe hârtie, dar nu ai desenat niciodată pe computer, atunci cu siguranță am ceva să-ți spun.

Și pentru cei care nu știu să deseneze pe hârtie, voi încerca să explic cum puteți dezvolta această abilitate în general, fără a fi legat de un editor grafic: construirea perspectivei și compoziției, alegerea culorilor, umbrirea și alte subiecte.

Alegerea unei tablete grafice

Nu contează dacă poți desena, vei avea nevoie de instrumente: dispozitive și programe. Să începem cu hardware-ul. Aveți deja un computer, dar mai trebuie să conectați o tabletă grafică la acesta, ceea ce ne va oferi posibilitatea de a desena pe o pânză virtuală care există în RAM. Cu alte cuvinte, este un alt dispozitiv de introducere a informațiilor, cum ar fi un mouse sau trackball. Dar tableta are avantaje care vă permit să desenați ca pe hârtie. Aceasta este sensibilitatea la presiune și o formă asemănătoare unui stilou a dispozitivului de indicare.

Există mulți producători de tablete grafice: Wacom, Genius, Huion. Le-am întâlnit doar pe primele două. În total, am încercat deja patru tablete de la Wacom și una de la Genius când am început. Recomand cu căldură Wacom - de înaltă calitate la un preț rezonabil.

Dacă nu aveți bani, nu cumpărați Genius, obțineți cel mai accesibil Wacom Bamboo Pen. Am folosit aproape același, Wacom Bamboo Pen&Touch S CTH-460. Nu au existat probleme critice în șapte ani de utilizare, un dispozitiv bun pentru început. Dacă puteți economisi mai mulți bani, atunci alegeți modelul mai mare. Folosesc Wacom Bamboo Fun Pen&Touch M CTH-670.

Ce înseamnă numerele și literele în numele modelelor Wacom?

Voi explica ce înseamnă unele dintre numerele și literele din nume pentru a vă facilita navigarea în parcul de modele al companiei.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

• M- dimensiunea zonei de lucru. Există S - Mic (mic), M - Mediu (mediu), L - Mare (mari);
• CTH— denotă gama de modele. Există CTL și CTH - modele de amatori entry-level cu butoane opționale și touchpad, PTH - modele profesionale, DTH și DTK - modele profesionale cu afișaj încorporat;
• 6 — dimensiunea zonei de lucru în inci. Există 4 - Mici (mici), 6 - Medii (medii), 8 - Mari (mari), precum și 13 și mai multe, dar acest lucru se aplică doar tabletelor cu afișaj încorporat. Uneori magazinele online și reclamele nu indică indexul literelor, atunci îl poți folosi pe cel digital pentru a înțelege dimensiunile dispozitivului;
• 70 - generatie si model. Este important să înțelegeți că cu cât este mai mare acest număr, cu atât este mai nou dispozitivul. Pentru comparație, vechea mea tabletă are indexul CTH-460, analogul modern este CTH-490. Generațiile diferă cu 10: 460, 470 și așa mai departe.

Dimensiunea tabletei grafice

Când desenați, zona activă a spațiului de lucru este foarte mică. Cu alte cuvinte, stiloul alunecă constant în raza unui cerc mic. Acest cerc se poate mișca puțin. În timp, se formează o pată, care este vizibilă ca o acumulare densă de microzgârieturi. Arată că practic nu folosești periferia dispozitivului, totul se întâmplă în centru.

S-ar putea presupune că o tabletă grafică mare nu este necesară, deoarece nu veți folosi niciodată întreaga zonă de lucru, iar locul de activitate va avea aceeași dimensiune ca pe un model mai mic. Dar asta nu este adevărat.

Când lucrați pe o tabletă, zona de lucru a acesteia este proiectată pe toată lățimea monitorului. Prin urmare, cu cât tableta este mai mare, cu atât puteți aplica mișcări mai precise. Și invers, cu cât monitorul este mai mare și tableta este mai mică, cu atât îți va fi mai dificil și mai incomod să desenezi. Din experiență, pot spune că după ce am trecut de la dimensiunea S la M când lucrez pe un monitor ultra-wide de 29 de inchi, munca mea a devenit cu 25-30% mai confortabilă. Consider că este nevoie de mai puțin efort pentru a desena un contur complex, iar experiența generală se simte mai lină și mai plăcută.

Tabletele grafice mai mari ar trebui să ofere un mediu de lucru și mai confortabil, dar nu am lucrat pe modele L, așa că pot doar să presupun.

Diferențele dintre tabletele Wacom amatoare și profesionale

Achiziționând un model pro, obțineți un dispozitiv wireless din plastic de calitate superioară, cu 2048 de niveluri de sensibilitate la presiune față de 1024 pentru modelele mai ieftine, un design frumos, comenzi suplimentare sub formă de butoane și un inel tactil. Sunt complet mulțumit de modelele mai tinere, învechite, ale seriei Bamboo, care au fost întrerupte. Diferența de cost între versiunile amatori și pro va fi de peste două ori. Tabelul va pune totul în ordine:

Configurarea Wacom Bamboo Pen & Touch M CTH-670

Înainte de a conecta dispozitivul, descărcați driverele de pe site-ul web oficial Wacom.

După conectarea tabletei și instalarea driverelor, lansați aplicația Preferințe Wacom, care poate fi găsit prin căutarea Windows (Win + S) sau în Panoul de control.

Setările de bază ale tabletelor companiei nu diferă; atât modelele de amatori, cât și cele profesionale sunt configurate într-un mod similar.

Pe fila Comprimat Puteți configura tableta pentru mâinile drepte și stângi, precum și să atribuiți acțiuni tastelor. Mai întâi, instalează-le în Dezactivat, în timp va fi posibilă atribuirea tastelor rapide.

În fila următoare Pix parametrii importanti se gasesc:

• Sfat Feel- sensibilitatea la presiune. Lasă-l în centru. În acest proces, vei înțelege ce fel de duritate îți place și o vei ajusta după gustul tău;
• Urmărire— modul de urmărire a poziției stylusului. Instalare Modul stilou— zona de lucru a tabletei se întinde pentru a umple întregul ecran. Modul Mouse folosit ca înlocuitor pentru un mouse;
• Setările rămase nu sunt atât de importante. Butoane pentru stilou vă permite să atribuiți o acțiune butoanelor stiloului. Eraser Feel— sensibilitatea benzii de cauciuc de pe spatele stylusului. Nu folosesc această funcție, deoarece îmi este mai rapid să comut folosind tastele rapide.

În aceeași filă din secțiune Urmărire apasa butonul Cartografiere... pentru a configura proiecția zonei de lucru a tabletei pe ecranul monitorului. Se va deschide o fereastră Detalii despre modul stilou.

În capitolul Zona ecranului alege Monitorizați, dacă aveți mai multe monitoare și indicați-l pe cel principal. Dacă există un singur monitor, lăsați-l Toate Ecranele

În capitolul Scalare asigurați-vă că bifați caseta de lângă ea Proporții de forță astfel încât zona de lucru să nu se întindă atunci când este proiectată pe ecran. În acest caz, o parte din zona de lucru a tabletei nu va fi folosită, dar vom avea proporții normale de 1 la 1. Și dacă desenați un cerc, acesta va apărea pe ecran ca un cerc și nu o elipsă alungită.

Asigurați-vă că bifați caseta de lângă ea Utilizați cerneală Windows pentru sensibilitatea la presiune la lucru.

În fila următoare Atingeți Opțiuni debifați caseta de vizavi Activați introducerea tactilă pentru a comuta tableta în modul normal.

Pe filele rămase am totul dezactivat, deoarece nu folosesc nici gesturile în modul Touch, nici meniul derulant proprietar. Aceasta completează configurarea tabletei grafice.

Animați CC sau Flash Professional CC?

Adobe Animate CC este o rebranding a Adobe Flash Professional CC; mai multe inovații au fost adăugate programului. Chiar și cu vechiul nume, a câștigat o popularitate enormă în rândul artiștilor, animatorilor și dezvoltatorilor de jocuri indie. Principiile de design vectorial vă permit să creați sprite-uri pentru orice rezoluție. Orice versiune pe care o puteți obține va funcționa pentru desen. Instrumentele de desen au rămas aceleași de mulți ani, cu doar îmbunătățiri minore. Voi folosi Adobe Animate CC, dar tot ce este scris se va aplica și pentru versiunile mai vechi de Adobe Flash Professional. Apropo, Adobe a trecut recent la un model de abonament lunar pentru a avea acces la produsele sale în loc de licențierea costisitoare unică. Adobe Animate CC costă în prezent 20 USD pe lună.

Prima lansare a Adobe Animate CC

După descărcare, creați un fișier nou și selectați tipul Action Script 3.0. În aceeași fereastră puteți specifica parametrii scenei:

• LăţimeȘi Înălţime— lățimea și înălțimea scenei în pixeli. Să-l setăm la 1920 x 1024, ca rezoluția unui monitor sau smartphone modern;
• Unități rigle— unități de măsură, pixeli setați;
• Rata de cadre— număr de cadre pe secundă, lăsați 24;
• Culoare de fundal— culoare de fundal, setată la gri.

Aceste setări pot fi modificate după ce documentul este creat. Pentru a face acest lucru, trebuie să selectați un instrument Instrument de selecție(tasta rapidă V), fereastra deschisă Proprietățiși extindeți secțiunea Proprietăți. Dacă nu găsiți această fereastră, atunci utilizați meniul Fereastră → Proprietăți sau comanda rapidă de la tastatură Ctrl + F3.

Configurarea tastelor rapide

Pentru a vă crește eficiența muncii, trebuie să utilizați la maximum tastele rapide. În primele etape, acest lucru necesită obișnuirea și memorarea noilor combinații de taste, dar în viitor oferă un salt solid în eficiența dvs. Am redefinit majoritatea tastelor rapide pentru a fi pe partea dreaptă a tastaturii. De ce pe dreapta? Cert este că sunt stângaci și, în consecință, îmi este mai convenabil. Dacă sunteți dreptaci, atunci va trebui să vii cu propria ta schemă. În plus, folosesc Rapoo E9050 și Apple Wireless Keyboard, care sunt realizate sub formă de tastaturi de laptop, așa că dacă utilizați una de dimensiune completă, atunci, din nou, munciți din greu și veniți cu propria dvs. schemă - va plăti oprit în mult timp economisit - și luați în considerare schema mea, ca exemplu.

Obțineți ideea: grupați comenzile esențiale pe partea convenabilă a tastaturii pentru acces rapid fără a vă schimba constant poziția mâinii. De cele mai multe ori ar trebui să se afle într-un singur loc, doar degetele tale „merg” pe o rază mică, apăsând butoane. Desigur, vor mai exista echipe care cer o schimbare de poziție, dar sunt o minoritate covârșitoare. Iată diagrama mea:

În cele mai multe cazuri, combinațiile noi nu le înlocuiesc pe cele vechi, ci le completează; sunt introduse câteva comenzi noi. Trebuie să-l configurați prin meniu Editați | × → Comenzi rapide de la tastatură.... În câmpul de căutare, introduceți numele echipei, în coloană Comandă rapidă Faceți clic pe spațiul gol vizavi de comanda dorită și apăsați noua combinație de taste.

Nu încercați să înțelegeți comenzile date în tabel, toate vor fi explicate în lecțiile următoare. Pe viitor, atunci când începi să le folosești activ, cel mai probabil le vei redefini de mai multe ori până vei găsi cea mai convenabilă opțiune.

Setările pensulei

Unealta perie(tasta rapidă B) - instrumentul pensulă cel mai folosit la desen. Setările sunt concentrate în două ferestre:

Setările pensulei sunt complete, hai să pictăm ceva.

Desenați cu o pensulă

Selectați o culoare potrivită folosind fereastra Culoare (Ctrl + Shift + F9), selectați Instrumentul Pensule (B) și începeți cu o singură mișcare lungă cu puțină forță pentru a contura forma viitoare. Apoi trasați conturul rezultat pentru a netezi toate denivelările - peria este gata.

Vă rugăm să rețineți că în exemplul de mai sus s-au folosit doar trei curse. Ar trebui să urmăriți să faceți mișcări de lungime medie, astfel încât mâna să nu părăsească tableta. Încercarea de a face o mulțime de mișcări mici este greșită, deoarece conturul rezultat va fi neneted și cu un număr mare de puncte suplimentare.

Adobe Animate CC funcționează pe principii vectoriale. Toate obiectele sunt descrise matematic și pot fi scalate fără pierderi de calitate, spre deosebire de abordarea raster. Acest lucru ne permite să manipulăm obiecte vectoriale într-un mod pe care nu l-am putea niciodată face la fel de ușor într-un editor raster. Putem netezi și simplifica contururile, îndrepta linii curbe, schimba proporțiile și deforma obiectele grafice fără pierderea calității. Fiecare cursă este convertită automat în curbe matematice pe care le putem ajusta și modifica.

Pentru a verifica toate cele de mai sus, activați instrumentul Instrument de subselecție(tasta rapidă A) și selectați pensula pe care tocmai ați desenat. Acum puteți vedea punctele traseului vectorial și chiar le puteți schimba.

Concluzie

Astăzi am configurat Adobe Animate CC și suntem gata să începem desenul. Exersați puțin înainte de a continua. Învață să desenezi forme geometrice simple fără distorsiuni, încearcă diferite culori și setări de pensulă (experimentează cu parametrul Smoothing).

Materiale similare

Adăugarea unui al doilea caracter sau casetă de text la intervalul de interpolare va înlocui caracterul original din interpolare. Puteți modifica ținta unei interacțiuni de mișcare în oricare dintre următoarele moduri:

• trageți un alt simbol din bibliotecă în intervalul de animație de pe cronologia;
• utilizați comanda Editare > Simbol > Înlocuire simbol.

Puteți elimina un simbol dintr-un strat de animație fără a șterge sau diviza animația în sine. Puteți adăuga o altă instanță a simbolului la animație mai târziu. De asemenea, puteți schimba oricând simbolul sau tipul acestuia.

Vezi si

Componente de animație în mișcare

• Este o secvență de cadre dintr-o linie temporală în care una sau mai multe proprietăți ale unui obiect din linia temporală se modifică în timp.
• Un interval de interpolare apare în cronologia ca un grup de cadre pe același strat ca și culoarea de fundal.
• Aceste intervale de animație pot fi selectate ca un singur obiect, trase dintr-un loc pe linia temporală în altul și chiar pe alt strat.
• Fiecare interval de animație poate anima doar un obiect pe scenă. Acest obiect se numește ținta intervalului de animație.

• este un cadru într-un interval de interpolare în care una sau mai multe valori de proprietate pentru obiectul de interpolare țintă sunt definite în mod explicit.
• Aceste proprietăți pot include poziția alfa (transparență), nuanța de culoare etc.
• Pentru fiecare proprietate definită, este creat un cadru cheie de proprietate separat.
• Dacă setați mai mult de o proprietate într-un cadru, cadrele cheie pentru fiecare dintre acele proprietăți vor fi plasate în acel cadru.
• Utilizați Editorul de mișcare pentru a vizualiza fiecare proprietate a intervalului de interpolare și cadrele cheie ale proprietăților acesteia.
• Pentru a alege ce tipuri de cadre cheie de proprietate să fie afișate în cronologie, din meniul contextual al animației, faceți clic dreapta pe cadrul cheie de proprietate și selectați Vizualizare cadre cheie.

Țintă de animație

O interpolare de mișcare are un obiect în intervalul său de interpolare, numit obiectul țintă. Utilizarea unui singur obiect țintă într-o animație oferă mai multe beneficii:

• Animațiile pot fi salvate pentru reutilizare.
• Puteți muta cu ușurință o interpolare de mișcare pe cronologie (trageți intervalul de interpolare într-o altă locație) sau pe scenă.
• Pentru a aplica o instanță nouă la o interpolare de mișcare existentă, urmați acești pași:
  • introduceți-l în animație pentru a-l înlocui;
  • trageți o instanță nouă din bibliotecă;
  • utilizați comanda Înlocuire simbol.

Obiecte și proprietăți care pot fi animate

Tipurile de obiecte pe care le puteți aplica interpolare de mișcare pentru a include clipuri video, grafice, simboluri butoane și câmpuri de text. Aceste obiecte pot avea următoarele proprietăți:

• Poziționați de-a lungul axelor X și Y pe plan

Poziția Z în spațiul 3D (numai clipuri de clip)

Rotație pe un plan (în jurul axei z)

Rotiți în jurul axelor X, Y și Z în spațiul 3D (numai clipuri video): Specifică faptul că fișierul FLA este destinat pentru ActionScript 3.0 și Flash Player 10 sau o versiune ulterioară în Opțiuni de publicare. Adobe AIR acceptă și mișcarea 3D.

Înclinarea X și Y

Scala X și Y

Efecte de culoare: include canal alfa (transparență), luminozitate, nuanță și opțiuni avansate pentru culori. Efectele de culoare pot fi animate numai pentru caractere și text TLF. Prin animarea acestor proprietăți, puteți face ca un obiect să apară fără probleme sau puteți schimba culoarea. Pentru a crea un efect de culoare interpolare de mișcare pentru textul clasic, convertiți textul într-un simbol.

Proprietăți filtru (filtrele nu pot fi aplicate simbolurilor grafice)

Crearea unei interpolari de mișcare

Puteți crea o interpolare de mișcare în unul dintre cele trei moduri:

• Creați graficul sau instanța pe care doriți să o animați, apoi faceți clic dreapta pe cadru și selectați Creați o animație în mișcare.
• Selectați graficul sau instanța pe care doriți să o animați, apoi faceți clic dreapta pe cadru și selectați Insert > Tween Motion.
• Creați graficul sau instanța pe care doriți să o animați, apoi faceți clic dreapta pe instanță Zona de lucruși selectați Creați o animație în mișcare.

Crearea unei interpolari de mișcare

Animați mișcarea altor proprietăți folosind inspectorul de proprietăți

Utilizați comanda Creați o animație în mișcare pentru a anima majoritatea proprietăților unui simbol sau a unei casete de text. Aceste proprietăți includ, de exemplu, rotația, scalarea, transparența sau nuanța (numai caractere TLF și text). De exemplu, puteți modifica proprietatea de transparență alfa a unei instanțe de simbol, astfel încât să apară fără probleme pe ecran. Pentru o listă de proprietăți cărora le puteți aplica interpolarea de mișcare, consultați Obiecte și proprietăți animabile.

Selectați o instanță de simbol sau un câmp de text în Zona de lucru.

Dacă selecția conține alte obiecte sau conține mai multe obiecte dintr-un strat, Animate este solicitat să o convertească într-un simbol de clip video.

Selectați Introduce > Animație în mișcare.

Dacă apare o casetă de dialog Convertiți selecția în personaj pentru animație, faceți clic pe OK pentru a converti selecția într-un simbol de clip video.

Când o interpolare de mișcare este aplicată unui obiect care există pentru un singur cadru, capul de redare se deplasează la ultimul cadru al noii interpolari de mișcare. În caz contrar, capul de redare nu se mișcă.

Plasați capul de redare în cadrul intervalului de animație pentru care doriți să setați o valoare de proprietate.

Capul de redare poate fi plasat pe orice alt cadru din domeniul de animație. Interpolarea de mișcare începe cu valorile proprietăților pe primul cadru al intervalului de interpolare, care este întotdeauna un cadru cheie de proprietate.

Să creăm un fișier nou, să îl facem de 800x600 și să transferăm câteva fișiere în el, și anume aceste câteva imagini și „zgomotul pădurii mp3”, adică sunet. O mut aici. Ceea ce avem ca rezultat este această imagine - este o pădure, se numește „bg”, „play” și „pauză”, acestea sunt butoane. Le voi muta acum în jos, haideți să le mutăm, ceva de genul acesta - cea mai simplă opțiune.

Acum voi începe animația, apăsați cntr+enter, există doar o pădure și doar două butoane, nimic nu funcționează. Dacă vreau să fac o redare automată a sunetului pentru mine, se numește „zgomot de pădure”, atunci trebuie să selectez acest strat și apoi să selectez „redare automată”, acum, când apes cntr+enter, sunetul va fi redat. Uimitor.

Cum să adăugați un link pe care se poate face clic la un videoclip în Adobe Edge Animate.

Dacă am desenat doar un buton și există un fel de fundal, atunci dacă facem clic pe el, nu va exista nicio tranziție nicăieri. A adauga link interactiv Trebuie să selectăm acest buton, să facem clic dreapta pe acțiune deschisă, pe butonul greșit, așa îl numesc și să facem clic pe clic, adică pe ce se va face când dam clic. Și aici trebuie să selectăm Open you are raol.

Vă voi arăta în acest videoclip cum să o faceți, nu este complicat, dar trebuie să înțelegeți corect unde trebuie să copiați codul corect și unde trebuie să-l lipiți.

Să zicem că ai videoclip realizat în Adobe Edge Animate, când dai clic pe ea, se deschide pagina de destinație dorită, este în format edge animate și salvată în folderul cu codul sursă și scripturile Java. Deschideți-l în orice editor de text, puteți utiliza orice editor de testare, de exemplu: notepad, etc.

Cum să faci bucla o animație în Adobe Edge Animate, adică cum să o faci astfel încât atunci când se redă până la sfârșit, să înceapă din nou de la început și să continue pentru totdeauna.

Aici puteți copia cadre cheie, adică selectez un cadru, apăsați cntr+c, faceți clic pe câmpul dorit, apăsați cntr+v, animația se va bucla, adică nu bucla, dar în acest caz, mergeți de la punctul de plecare înapoi la punctul de plecare. Daca rulez acest videoclip si apas cntr+enter, vedem ca animatia dureaza doar 1 secunda, merge intr-o parte si revine pe cealalta.

Vă voi arăta în acest videoclip cum să o faceți, nu este complicat, dar trebuie să înțelegeți corect unde trebuie să copiați codul corect și unde trebuie să-l lipiți.

Să presupunem că aveți un banner realizat în Adobe edge animate, când dați clic pe el, se deschide pagina de destinație dorită, este în format edge animate și salvat într-un folder cu codul sursă și scripturi Java. Deschideți-l în orice editor de text, puteți utiliza orice editor de testare, de exemplu: notepad, etc.

În continuare, vreau să inserez acest banner pe site. Ce ar trebui făcut? Trebuie să descărcați fișierul index, apoi să îl deschideți într-un editor de text, să copiați codul adobe edge și la sfârșit adăugați codul aici înainte de „cap”, apoi înainte de titlul locului unde vom adăuga bannerul nostru, înainte div. Pentru o execuție mai precisă, există instrucțiuni care vă vor ajuta: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. După aceea, salvăm și mergem la serviciul FTP, folosesc filezilla, găsim locația de stocare a site-ului dvs. și copiem folderul index în fișierul dvs., care se află pe server, înlocuind fișierele curente. Apoi, descarcăm toate scripturile Java și actualizăm site-ul. Totul este gata - animația funcționează și se deschide și fila cu pagina de destinație.

Dacă ești interesat de astfel de lecții, abonează-te la canalul meu, pentru că... vor exista multe videoclipuri noi în viitorul apropiat - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – să presupunem că aveți un banner realizat în Adobe edge animate

01:30 – adăugați un banner pe site

02:09 – adăugați cod înainte de eticheta „head”.

02:50 – instrucțiuni pentru adăugarea unui banner pe site

03:31 – încărcați fișiere pe server

05:29 – actualizăm site-ul și totul este gata!

Alăturați-vă și puneți întrebări:

Descărcați trei șabloane Muse gratuite: http://site/free-landing.html

http://vk.com/adobeedgeanimate

Sunt pe VKontakte: http://vk.com/danilfimushkin

La webinar, am spus și am arătat cum puteți face un banner animat cu drepturi depline dintr-o ilustrație vectorială.

00:17 – începem să animem ilustrația vectorială în Edge Animate
14:06 – creați mișcarea labelor personajului
16:54 – avantajele unui simbol imbricat
17:48 – ce este un simbol imbricat
18:24 – scrierea unei animații în buclă
19:42 – animația în buclă este gata
23:40 – creează clipirea ochilor
26:54 – determinați numele fișierelor la salvare
27:57 – animație de text „derulant”.
28:39 – atașarea unei curbe de mișcare – schimbarea axei de animație
30:03 – rezumatul intermediar al animației, crearea unui peisaj înzăpezit și animarea unui fulg de nea
33:39 – Revizuire Edge Animate
34:52 – teme
35:25 – cum să adăugați un link activ
39:09 – crearea mai multor butoane și atașarea link-urilor

Alăturați-vă și puneți întrebări: http://vk.com/adobeedgeanimate