Online tečajevi za učenje rada u programu Adobe Animate. Danil Fimuškin. Razlike između amaterskih i profesionalnih Wacom tableta

UPD 6. prosinca 2015:
Voditelj proizvoda za Flash Runtime i Adobe AIR rekao je da oni nemam planova prestati raditi na Flash Runtimeu i AIRu i preimenovanje proizvoda za stvaranje sadržaja nema šanse nije povezan sa sudbinom Flash Playera i povezani ekosustav.

Sve bi bilo u redu, osim jedne nijanse koja uvelike mijenja značenje - tehnička nepismenost i općenito copy-paste. Publikacije se međusobno ispisuju, dodajući sve više i više "činjenica" kojih nema u izvorniku. Jednom riječju - oštećen telefon.

Izvorni članak http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html izvještava da Adobe preimenuje Flash Professional u Animate CC. Osim toga, izvještavaju da kupci žele više podržanih platformi, itd.

I nije me iznenadilo što mnogi ljudi ne vide razliku između Flasha i Flash Professionala. Razni gegovi počeli su se pojavljivati ​​na stranicama s vijestima, citirajući druge izvore koji povezuju dalje u lancu. I ne uvijek original.

Danas se riječ Flash doživljava kao dodatak za preglednike. Tehnički, to je Flash Player. Ali postoji alat za stvaranje sadržaja - Flash Professional. Kad bi Microsoft preimenovao Word u TextMachine, bi li ljudi vikali da je "Microsoft prestao razvijati Word?" Iako je crno na bijelo napisano da će biti podržano kreiranje sadržaja i da će se moći uređivati ​​podaci?

Iz vlastitih primjera mogu pokazati živopisnu sliku. Lokalni me klijenti pitaju što ćemo koristiti za izradu animacije za prezentaciju za iOS. S ponosom to mogu reći u Flash Professionalu. A klijent je u stuporu. Nakon trenutka on kaže:

"Ali na čvorištu pišu da je bljeskalica mrtva i da ne radi na tabletu"

I onda padnem u stupor. Tehnička nepismenost klijenata i autora članaka o flashu tjera ljude da se udalje od željenog rezultata. Srećom, klijent se dao nagovoriti i bio je zadovoljan rezultatom.

Vratimo se na izvorni članak. Izvještavaju da je html5 sazrio i već podržava većinu značajki Flasha. Pomičući se prema dolje, vidimo da sami Adobe vide Flash kao ključno sredstvo za isporuku premium sadržaja - web igara i premium videa. Ali nema riječi da zaustavljaju podršku za Flash.

Štoviše... Oni jasno navode da rade u partnerstvu s Microsoftom i Googleom na poboljšanju kompatibilnosti i sigurnosti Flash Playera. I nisu zaboravili dodati da blisko surađuju s Facebookom kako bi poboljšali pouzdanost i sigurnost igara u Flash Playeru. Dakle, gdje postoji vijest da napuštaju Flash?

Ako govorimo o razvoju Flasha općenito, da, davno je stao. Napravljena su samo manja (ali značajna) poboljšanja i ispravljene su sigurnosne greške. Ali je li stvarno tako loše? S moje točke gledišta, Flash ima sve što treba. Naravno, želio bih više. Ali zašto?

Za više, trebali biste odabrati samostalni format igara. A tu je i Adobe AIR (ako uzmemo u obzir Flash). Adobe AIR podrška nije zastarjela. Imam informacije o planovima za 2016. godinu. Ali hoće li flash preglednika umrijeti? Sigurno. Ali sigurno ne sutra.

A za one koji vole u klišejima reći da Flash troši bateriju, pokažite mi kako je Canvas puni.

Također je vrijedno napomenuti da se projekt Adobe Edge Animate više neće aktivno razvijati. Ali zbog Blizu sam razvoja Flash Professionala - uvjeravam vas da se Edge Animate uopće neće razvijati (osim za kritične pogreške). Ova je odluka donesena u korist Adobe Flash Professional (budući Animate CC).

Za pripremu HTML oglasa za postavljanje u ADFOX, važno je ispuniti zahtjeve za umetanje koda koji obrađuje klik na banner i broji događaje u banneru.
Prilikom razvijanja HTML koda možete koristiti uređivače za koje su napisane ove upute:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

Zahtjevi za HTML kod (za programere koda)

Pripremite svoj projekt tako da ispunite sljedeće zahtjeve:

1. Najveći dopušteni broj znakova u HTML kodu je 65.000;
2. Poželjno je postaviti JavaScript i CSS unutar HTML koda bannera;
Ako dobiveni HTML kod premašuje najveći dopušteni broj znakova, trebate smanjiti kod premještanjem JavaScripta i CSS-a u zasebne datoteke:
- spremite js i css kod u zasebne datoteke s nastavkom .js ili .css;
3. Projekt može sadržavati samo jednu datoteku s nastavkom .html;
4. Najveći dopušteni broj datoteka u projektu je 50;
5. Dopuštene vrste datoteka u 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. Maksimalna veličina svake datoteke (također se odnosi na datoteke unutar arhive):
- 300Kb;
- 1 MB za video datoteke.
7. Imena datoteka moraju sadržavati samo brojeve ili slova engleske abecede i podvlaku. U nazivu datoteke nije dopušteno koristiti ruska slova, razmake, navodnike i posebne znakove;
8. Ne možete koristiti ruska slova u imenima varijabli i objekata.
Jedina iznimka je tekst na banneru.
9. Format gotovog projekta - zip arhiva.

Adobe Animate CC

1. Priprema urednika.

Za izradu novog projekta u AdobeAnimate CC odaberite projekt "HTML5 Canvas".

Kod ovog predloška može se koristiti kao osnova pri izradi oglasa u uređivaču.

Za primjenu predloška na projekt, u postavkama objavljivanja odaberite "Napredne postavke objavljivanja -> Uvoz novog...".

Predložak sadrži skriptu adfox_HTML5.js

3. Obrada klikova

Ako vaš oglas uključuje cikličku animaciju, koristite kodove samo za gumbe iz odjeljka.

3.1 Kako bi cijelo područje bannera bilo moguće kliknuti i imati jednu poveznicu za odlazak, dodajte sljedeći kod u prvi okvir animacije:

Canvas.style.cursor = "pokazivač"; canvas.addEventListener("klik", funkcija() ( window.callClick(); ));

3.2 Da biste dodali nekoliko gumba za kretanje s različitim poveznicama, dodajte glavni gumb za klikanje na banner u gornjem sloju animacije, dodijelite gumbu naziv instance i napišite kod na gumbu:

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

Dodajte druge gumbe koji će, kada se klikne, prebaciti korisnika na različite stranice reklamirane stranice.
Postavite neke gumbe na gornji sloj iznad određenih dijelova animacije, dodijelite gumbima naziv instance i napišite kod za svaki gumb:

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

Gdje n

3.3

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

Gdje prelazak mišem- javascript događaj, n- broj događaja od 1 do 30 koji treba pokrenuti.

Značajke stvaranja ponavljajuće animacije

Za implementaciju ponavljajuće animacije u oglasu u uređivaču Animate CC:
- postavite opciju "Loop Timeline" u postavkama publikacije;
- koristite kodove za gumbe iz ovog odjeljka, a kodove za obične gumbe iz paragrafa 3.1 i 3.2 potrebno je ukloniti.

Kôd za oglas s jednim gumbom i ponavljajućom animacijom:

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

Ako postoji nekoliko gumba, tada u kodu za pozivanje ADFOX događaja dodajte sljedeći kod:

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

Gdje n- broj događaja od 1 do 30 koji treba pokrenuti.

Korištenje prozirnih gumba

Prozirni gumbi mogu se koristiti, na primjer, ako trebate učiniti klikabilnim cijelo područje bannera ili samo dio. Za njih, kao i za obične gumbe, mora se dodati kod za pozivanje prijelaza ili događaja.

Gumbi u Animateu su simboli koji sadrže četiri okvira. Možete ostaviti prva tri prazna i ispuniti samo zadnji "Pogodak" dodavanjem sadržaja (grafičkog elementa) u njega preko Insert > Timeline > Keyframe.

Sadržaj okvira Hit je nevidljiv, ali definira područje gumba koji reagira na klik. Ovom okviru možete dodati sadržaj (grafički element) putem Insert > Timeline > Keyframe. Ako su ostali okviri prazni ili nevidljivi, gumb u pozornici izgleda prozirno plavo i ima oblik sadržaja koji se nalazi u sljedećem hit okviru. Kada objavite svoj projekt, prozirno plavo područje neće biti vidljivo.

Značajka izvedbe rastezljivog (gumenog) bannera

Kako bi se banner protezao po širini spremnika u kojem će se nalaziti na stranici, izvršite postavke: Odaberite Datoteka > Postavke objave.
U kartici Osnovni, temeljni, Izaberi Učini responzivnim > širina, visina ili oboje.
Izaberi Skala za popunjavanje vidljivog područja za prikaz izlaza u načinu cijelog zaslona.
Odabirom "Uklopi u prikaz" sadržaj će se skalirati tako da ispuni sav raspoloživi prostor na zaslonu uz zadržavanje istog omjera. Dakle, ako je maksimalna širina već dosegnuta, tada područje duž visine zaslona može ostati nepopunjeno i obrnuto.

Ako pomoću postavki programa ne možete postići željeni rezultat, upotrijebite skripte.
Evo primjera kodova:
Preuzmite kôd za skaliranje omjera slike.
Preuzmite kôd za skaliranje bez omjera stranica.
Preuzmite kod za pozicioniranje elemenata, gdje an0..an4 je naziv instance elemenata.

Značajke stvaranja bannera s automatskim bljeskanjem

Ako želite prikazati banner iz proširenog stanja, tada kada dodajete banner u sučelje, morate navesti vrijednost "yes" u parametru "Auto-expand always" ili "Expand on initialization" i dodati kod u HTML oglas:

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.global_exp_banner. visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; ) window.global_main_banner.btnExpand.addEventListener("klik", expandBanner.bind(ovo )); window.global_exp_banner.btnCollapse.addEventListener("klik", collapseBanner.bind(ovo)); 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_banner.btnExpand.visible = istina ;)

5. Objava projekta.

Važno! Prilikom pregleda projekta u pregledniku putem (Ctrl-Enter | Cmd-Enter) nasumične vrijednosti obrasca dodaju se vezama u nazivima datoteka u HTML-u ?1468231208369 . Takve vrijednosti moraju biti isključene iz projekta prilikom učitavanja u ADFOX.
Da biste to učinili, konačni projekt u uređivaču mora biti objavljen putem Datoteka > Postavke objave > Objavi (Shift-Ctrl-F12 | Shift-Cmd-F12).

Prilikom objave projekta odaberite predložak AdobeAnimate_Adfox_.html.

.zip

Google Web Designer

Kod ovog bannera može se koristiti kao osnova pri izradi kreativa u editoru.

Predložak sadrži skriptu adfox_HTML5.js i skup parametara za ispravan rad prijelaza i brojanje događaja:
%reference%, %user1%, %eventN%, gdje je N broj događaja od 1 do 30.

2. Obrada klikova.

Svi događaji dodijeljeni su određenim elementima animacije putem kartice Događaji.

Komponenta Interaktivno područje koristi se za pozivanje akcija.
Dodajte ga i odaberite događaj "Interaktivno područje" - "Dodir/klik"(ili "Tap Area > Touch/Click" u engleskoj verziji).

U kartici "Prilagođeni kod" navedite poziv funkciji klikanja.

2.1

CallClick();

2.2

PozivKlik(n);

Gdje n

2.3 Ako trebate pokrenuti događaj iz animacije bez prijelaza, upotrijebite sljedeći kôd:

Događaj poziva(n);

Gdje n- broj događaja koji treba pozvati.

Tako da se banner proteže po širini kontejnera u kojem će se nalaziti na mjestu, na panelu Svojstva Za položaj i dimenzije navedite postotke umjesto piksela.

Također koristite opcije "Poravnaj sa spremnikom" I "Gumeni izgled" na gornjoj alatnoj traci.
Ako omogućite Fluid Layout prije upotrebe bilo kojeg alata za poravnanje, kada promijenite veličinu nadređenog spremnika, svi će elementi biti međusobno usklađeni i s dimenzijama spremnika.
U ovom slučaju možete istovremeno koristiti i relativne veličine elemenata u postocima i apsolutne veličine u pikselima.

4. Objava projekta.

Prilikom dodavanja bannera u ADFOX, upravitelj će morati znati korespondenciju gumba i brojeva događaja. Za svaki događaj, upravitelj će napisati vlastitu poveznicu za navigaciju, koja će se zatim proslijediti u banner kod pomoću varijable.

Nakon objave projekta arhivirajte ga u formatu .zip. Vaš oglas je spreman za učitavanje na ADFOX banner.

Adobe Edge Animate CC

Za početak pokrenite datoteku s ekstenzijom .an iz arhive.

2. Obrada klikova.

Svi događaji se dodjeljuju određenim elementima animacije putem kartice "Kod".

Za navigaciju kroz odabrani element morate odabrati događaj klik i napišite poziv funkciji click.

Gumbima se mora dodijeliti naziv instance, na primjer: btnMain, btnRight.

2.1 Ako koristite jedan gumb za skok:

CallClick();

2.2 Ako postoji nekoliko gumba za prijelaz:

PozivKlik(n);

Gdje n- broj događaja koji treba pozvati.

2.3 Ako trebate pokrenuti događaj iz animacije bez prijelaza, upotrijebite sljedeći kôd:

Događaj poziva(n);

Gdje n- broj događaja koji treba pozvati.

Značajka izvedbe rastezljivog (gumenog) bannera.

Kako bi se banner protezao po širini spremnika u kojem će se nalaziti na web mjestu, prilikom pripreme bannera u uređivaču na panelu Svojstva morate za poziciju i veličinu odrediti postotke umjesto piksela.

Tu su i gumbi Scale Size i Scale Position za elemente na ploči Položaj i veličina

4. Objava projekta.

Projekt treba objaviti sa sljedećim postavkama:

Nakon objave projekta arhivirajte ga u formatu .zip. Vaš oglas je spreman za učitavanje na ADFOX banner.

Već više od sedam godina radim na daljinu sa stranim kupcima iz SAD-a, Kanade, Australije, Njemačke i drugih zemalja. Crtam grafičke resurse i animacije za igre Adobe Animate CC. Prethodno je pozvan urednik Adobe Flash Professional CC.

Na starom blogu započeo sam sličan niz lekcija, ali umjesto da tamo nastavim, odlučio sam sve ponovno napisati kako bih podijelio novo iskustvo.

Zašto nam treba još jedna serija lekcija o crtanju u Adobe Flashu? Ovo radim već dugi niz godina i vjerujem da moje iskustvo može biti korisno početnicima. Posebno za one koji nikad prije nisu crtali grafičkim tabletom. Ako ste dobri u crtanju na papiru, ali nikada niste crtali na računalu, onda vam definitivno imam nešto za reći.

A za one koji ne znaju crtati na papiru, pokušat ću objasniti kako možete općenito razviti ovu vještinu, bez vezivanja za grafički urednik: izgradnja perspektive i kompozicije, odabir boja, sjenčanje i druge teme.

Odabir grafičkog tableta

Nije važno ako znate crtati, trebat će vam alati: uređaji i programi. Počnimo s hardverom. Računalo već imate, ali na njega još trebate spojiti grafički tablet koji će nam dati mogućnost crtanja na virtualnom platnu koje postoji u RAM-u. Drugim riječima, to je još jedan uređaj za unos informacija, poput miša ili kuglice. Ali tablet ima prednosti koje vam omogućuju crtanje kao na papiru. Ovo je osjetljivost na pritisak i oblik pokazivačkog uređaja poput olovke.

Postoje mnogi proizvođači grafičkih tableta: Wacom, Genius, Huion. Ja sam se susreo samo sa prva dva. Ukupno sam već isprobao četiri Wacom tableta i jedan Genius kad sam počeo. Toplo preporučam Wacom - visoka kvaliteta za razumnu cijenu.

Ako nemate novaca, nemojte kupovati Genius, nabavite najpovoljniju malu rabljenu Wacom Bamboo Pen. Koristio sam skoro isti, Wacom Bamboo Pen&Touch S CTH-460. U sedam godina korištenja nije bilo kritičnih problema, dobar uređaj za početak. Ako možete odvojiti više novca, odaberite veći model. Koristim Wacom Bamboo Fun Pen&Touch M CTH-670.

Što znače brojevi i slova u nazivima Wacom modela?

Objasnit ću što znače neki od brojeva i slova u nazivu kako bih vam olakšao snalaženje u parku modela tvrtke.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

• M— veličina radnog područja. Postoje S - Small (mali), M - Medium (srednji), L - Large (veliki);
• CTH— označava raspon modela. Postoje CTL i CTH - početni amaterski modeli s dodatnim gumbima i touchpadom, PTH - profesionalni modeli, DTH i DTK - profesionalni modeli s ugrađenim zaslonom;
• 6 — veličina radnog područja u inčima. Postoji 4 - Small (mali), 6 - Medium (srednji), 8 - Large (veliki), kao i 13 i više, ali to se odnosi samo na tablete s ugrađenim zaslonom. Ponekad internetske trgovine i reklame ne označavaju slovni indeks, tada možete koristiti digitalni da biste razumjeli dimenzije uređaja;
• 70 - generacija i model. Važno je razumjeti da što je taj broj veći, to je uređaj noviji. Za usporedbu, moj stari tablet ima indeks CTH-460, moderni analog je CTH-490. Generacije se razlikuju 10: 460, 470 i tako dalje.

Veličina grafičkog tableta

Kada crtate, aktivno područje radnog prostora je vrlo malo. Drugim riječima, olovka stalno klizi unutar polumjera malog kruga. Ovaj se krug može malo pomaknuti. S vremenom se stvara mrlja koja je vidljiva kao gusta nakupina mikroogrebotina. To pokazuje da praktički ne koristite periferiju uređaja, sve se događa u središtu.

Moglo bi se pretpostaviti da veliki grafički tablet nije potreban jer nikada nećete koristiti cijelo njegovo radno područje, a mjesto aktivnosti će biti iste veličine kao na manjem modelu. Ali to nije istina.

Kada radite na tabletu, njegovo radno područje projicira se preko cijele širine monitora. Stoga, što je tablet veći, to preciznije možete primijeniti poteze. I obrnuto, što je veći monitor i manji tablet, to će vam biti teže i neudobnije crtati. Iz iskustva mogu reći da mi je nakon prelaska s veličine S na M pri radu na 29-inčnom ultraširokom monitoru rad postao 25-30% ugodniji. Smatram da je potrebno manje truda za crtanje složenih obrisa, a sveukupno iskustvo djeluje glatkije i ugodnije.

Veći grafički tableti trebali bi pružiti još ugodnije radno okruženje, ali nisam radio na L-modelima, pa mogu samo pretpostavljati.

Razlike između amaterskih i profesionalnih Wacom tableta

Kupnjom pro modela dobivate bežični uređaj izrađen od kvalitetnije plastike s 2048 razina osjetljivosti na pritisak u odnosu na 1024 kod jeftinijih modela, prekrasan dizajn, dodatne kontrole u obliku tipki i touch ringa. Sasvim sam zadovoljan mlađim, zastarjelim modelima Bamboo serije, koji su ukinuti. Razlika u cijeni između amaterske i profesionalne verzije bit će više od dva puta. Tablica će sve staviti u red:

Postavljanje Wacom Bamboo Pen & Touch M CTH-670

Prije spajanja uređaja preuzmite upravljačke programe sa službene web stranice Wacom.

Nakon što povežete tablet i instalirate upravljačke programe, pokrenite aplikaciju Wacom postavke, koji se može pronaći putem Windows pretraživanja (Win + S) ili na upravljačkoj ploči.

Osnovne postavke tableta tvrtke se ne razlikuju; i amaterski i profesionalni modeli konfigurirani su na sličan način.

Na kartici Tableta Možete konfigurirati tablet za desnu i lijevu ruku, kao i dodijeliti radnje tipkama. Prvo ih ugradite Onemogućeno, s vremenom će biti moguće dodijeliti prečace.

Na sljedećoj kartici Olovka pronađeni su važni parametri:

• Tip Feel- osjetljivost na pritisak. Ostavite ga u sredini. U procesu ćete shvatiti kakvu tvrdoću volite i prilagoditi je svom ukusu;
• Praćenje— način praćenja položaja olovke. Instalirati Način olovke— radna površina tableta rasteže se tako da ispuni cijeli zaslon. Način rada Miš koristi se kao zamjena za miša;
• Preostale postavke nisu toliko važne. Gumbi za olovke omogućuje vam dodjeljivanje radnje tipkama olovke. Osjećaj gumice— osjetljivost gumene trake na stražnjoj strani olovke. Ne koristim ovu značajku jer mi je brže prebacivanje pomoću prečaca.

U istoj kartici u odjeljku Praćenje pritisni gumb Mapiranje... za konfiguriranje projekcije radnog područja tableta na zaslon monitora. Otvorit će se prozor Pojedinosti o načinu rada olovke.

U poglavlju Područje zaslona izabrati Monitor, ako imate nekoliko monitora i označite glavni. Ako postoji samo jedan monitor, ostavite ga Svi zasloni

U poglavlju Skaliranje svakako označite kvadratić pokraj njega Proporcije sila tako da se radno područje ne rasteže kada se projicira na platno. U ovom slučaju, dio radnog područja tableta neće se koristiti, ali ćemo imati normalne proporcije od 1 do 1. A ako nacrtate krug, on će se pojaviti na ekranu kao krug, a ne kao izdužena elipsa.

Obavezno potvrdite okvir pored njega Koristite Windows Ink za rad osjetljivosti na pritisak.

Na sljedećoj kartici Dodirnite Opcije poništite okvir nasuprot Omogući unos dodirom za prebacivanje tableta u normalni način rada.

Na preostalim karticama sve mi je onemogućeno jer ne koristim geste u načinu rada dodirom niti vlasnički padajući izbornik. Ovime je dovršeno postavljanje grafičkog tableta.

Animate CC ili Flash Professional CC?

Adobe Animate CC je rebrendiranje Adobe Flash Professional CC; programu je dodano nekoliko inovacija. Čak i sa starim imenom, stekao je ogromnu popularnost među umjetnicima, animatorima i indie programerima igara. Načela vektorskog dizajna omogućuju vam stvaranje spriteova za bilo koju razlučivost. Bilo koja verzija koju možete nabaviti radit će za crtanje. Alati za crtanje ostali su isti dugi niz godina, uz samo manja poboljšanja. Koristit ću Adobe Animate CC, ali sve napisano vrijedi i za starije verzije Adobe Flash Professional. Inače, Adobe je nedavno prešao na model mjesečne pretplate kako bi dobio pristup svojim proizvodima umjesto skupog jednokratnog licenciranja. Adobe Animate CC trenutačno košta 20 USD mjesečno.

Prvo pokretanje programa Adobe Animate CC

Nakon preuzimanja izradite novu datoteku i odaberite vrstu Akcijska skripta 3.0. U istom prozoru možete odrediti parametre scene:

• Širina I Visina— širina i visina scene u pikselima. Postavimo ga na 1920 x 1024, poput rezolucije modernog monitora ili pametnog telefona;
• Jedinice ravnala— mjerne jedinice, postavljeni pikseli;
• Okvirna stopa— broj sličica u sekundi, ostaviti 24;
• Boja pozadine— boja pozadine, postavljena na sivu.

Ove se postavke mogu promijeniti nakon što se dokument izradi. Da biste to učinili, morate odabrati alat Alat za odabir(prečac V), otvoreni prozor Svojstva i proširite odjeljak Svojstva. Ako ne možete pronaći ovaj prozor, koristite izbornik Prozor → Svojstva ili tipkovnički prečac Ctrl + F3.

Postavljanje vrućih tipki

Da biste povećali svoju radnu učinkovitost, morate maksimalno koristiti prečace. U ranim fazama to zahtijeva navikavanje i pamćenje novih kombinacija tipki, ali u budućnosti osigurava solidan skok u vašoj učinkovitosti. Redefinirao sam većinu prečaca tako da budu na desnoj strani tipkovnice. Zašto s desne strane? Činjenica je da sam ljevoruk i, shodno tome, to mi je zgodnije. Ako ste dešnjak, tada ćete morati smisliti vlastitu shemu. Osim toga, koristim Rapoo E9050 i Apple Wireless Keyboard, koje su napravljene u formatu tipkovnica za prijenosna računala, pa ako koristite tipkovnicu pune veličine, onda se, opet, potrudite i osmislite vlastitu shemu - to će isplatite u puno ušteđenog vremena - i uzmite u obzir moju shemu kao primjer.

Shvatite ideju: grupirajte bitne naredbe na praktičnoj strani tipkovnice za brzi pristup bez stalnog mijenjanja položaja ruke. Većinu vremena trebao bi ležati na jednom mjestu, samo vaši prsti "hodaju" u malom radijusu, pritiskajući gumbe. Naravno, i dalje će biti momčadi koje će zahtijevati promjenu pozicije, ali njih je velika manjina. Evo mog dijagrama:

U većini slučajeva nove kombinacije ne zamjenjuju stare, već ih nadopunjuju; uvodi se nekoliko novih naredbi. Morate ga konfigurirati kroz izbornik Uredi → Tipkovnički prečaci.... U polje za pretraživanje upišite naziv tima, u stupac Prečac Kliknite na prazan prostor nasuprot željene naredbe i pritisnite novu kombinaciju tipki.

Ne pokušavajte razumjeti naredbe dane u tablici, sve će biti objašnjene u sljedećim lekcijama. U budućnosti, kada ih počnete aktivno koristiti, najvjerojatnije ćete ih redefinirati nekoliko puta dok ne pronađete najprikladniju opciju.

Postavke četke

Alat za četke(tipka prečaca B) - alat kista koji se najčešće koristi pri crtanju. Postavke su koncentrirane u dva prozora:

Postavke kista su gotove, slikajmo nešto.

Crtanje kistom

Odaberite odgovarajuću boju pomoću prozora boja (Ctrl + Shift + F9), odaberite Brush Tool (B) i počnite s jednim dugim potezom s malom snagom kako biste ocrtali budući oblik. Zatim ocrtajte dobiveni obris kako biste izravnali sve neravnine - kist je spreman.

Imajte na umu da su u gornjem primjeru korištena samo tri poteza. Trebali biste nastojati napraviti srednje duge poteze kako vam ruka ne bi napustila tablet. Pogrešno je pokušavati napraviti mnogo malih poteza, jer će rezultirajuća kontura biti neglatka i s velikim brojem dodatnih točkica.

Adobe Animate CC radi na vektorskim principima. Svi objekti su matematički opisani i mogu se mjeriti bez gubitka kvalitete, za razliku od rasterskog pristupa. To nam omogućuje da manipuliramo vektorskim objektima na način koji nikada ne bismo mogli tako lako učiniti u rasterskom editoru. Možemo izgladiti i pojednostaviti konture, izravnati zakrivljene linije, promijeniti proporcije i deformirati grafičke objekte bez gubitka kvalitete. Svaki se potez automatski pretvara u matematičke krivulje koje možemo fino podešavati i modificirati.

Kako biste provjerili sve gore navedeno, aktivirajte alat Alat za pododabir(tipka prečaca A) i odaberite kist koji ste upravo nacrtali. Sada možete vidjeti točke vektorske putanje i čak ih promijeniti.

Zaključak

Danas smo postavili Adobe Animate CC i spremni smo za početak crtanja. Vježbajte malo prije nego što nastavimo. Naučite crtati jednostavne geometrijske oblike bez izobličenja, isprobajte različite boje i postavke kista (eksperimentirajte s parametrom Smoothing).

Slični materijali

Dodavanje drugog znaka ili tekstualnog okvira u raspon međuizmjenjivanja zamijenit će izvorni znak u međukretanju. Možete promijeniti cilj međukretanja na bilo koji od sljedećih načina:

• povucite drugi simbol iz biblioteke u raspon animacije na vremenskoj traci;
• koristite naredbu Uredi > Simbol > Zamijeni simbol.

Možete ukloniti simbol iz sloja animacije bez brisanja ili razdvajanja same animacije. Kasnije možete dodati drugu instancu simbola animaciji. Također možete promijeniti simbol ili njegovu vrstu u bilo kojem trenutku.

vidi također

Komponente animacije pokreta

• To je niz okvira na vremenskoj liniji u kojem se jedno ili više svojstava objekta na vremenskoj liniji mijenja tijekom vremena.
• Raspon prijelaza pojavljuje se na vremenskoj traci kao grupa okvira na istom sloju kao i boja pozadine.
• Ovi rasponi animacije mogu se odabrati kao jedan objekt, povući s jednog mjesta na vremenskoj traci na drugo, pa čak i na drugi sloj.
• Svaki raspon animacije može animirati samo jedan objekt na pozornici. Taj se objekt naziva cilj raspona animacije.

• je okvir u rasponu između međuprostora gdje su jedna ili više vrijednosti svojstava za ciljni objekt međuizlazne obrade eksplicitno definirane.
• Ta svojstva mogu uključivati ​​alfa poziciju (prozirnost), nijansu boje itd.
• Za svako definirano svojstvo kreira se zasebni ključni okvir svojstva.
• Ako postavite više od jednog svojstva u jednom okviru, ključni okviri za svako od tih svojstava bit će smješteni u taj okvir.
• Upotrijebite Uređivač pokreta za pregled svakog svojstva raspona između između i njegovih ključnih kadrova svojstava.
• Da biste odabrali koje vrste ključnih kadrova svojstava želite prikazati na vremenskoj traci, iz kontekstnog izbornika raspona animacije desnom tipkom miša kliknite ključni okvir svojstava i odaberite Prikaži ključne kadrove.

Cilj animacije

Tween pokreta ima jedan objekt u svom rasponu tween-a, koji se naziva ciljni objekt. Korištenje jednog ciljnog objekta u animaciji pruža nekoliko prednosti:

• Animacije se mogu spremiti za ponovnu upotrebu.
• Možete jednostavno premjestiti između pokreta na vremenskoj traci (povucite raspon između pokreta na drugu lokaciju) ili na pozornici.
• Da biste primijenili novu instancu na postojeći motion tween, slijedite ove korake:
  • umetnite ga u animaciju da biste ga zamijenili;
  • povucite novu instancu iz biblioteke;
  • koristite naredbu Zamijeni simbol.

Objekti i svojstva koja se mogu animirati

Vrste objekata na koje možete primijeniti izmenu kretanja uključuju filmske isječke, grafike, simbole gumba i tekstualna polja. Ti objekti mogu imati sljedeća svojstva:

• Položaj duž X i Y osi na ravnini

Z položaj u 3D prostoru (samo isječci)

Rotacija u ravnini (oko z osi)

Rotacija oko X, Y i Z osi u 3D prostoru (samo filmski isječci): Određuje da je FLA datoteka namijenjena za ActionScript 3.0 i Flash Player 10 ili noviju verziju u opcijama objavljivanja. Adobe AIR također podržava 3D kretanje.

X i Y nagib

X i Y skala

Efekti boja: Uključuje alfa kanal (transparentnost), svjetlinu, nijansu i napredne opcije za boje. Efekti boja mogu se animirati samo za TLF znakove i tekst. Animiranjem ovih svojstava, možete učiniti da objekt izgleda glatko ili promijeniti boju. Za stvaranje efekta boja između pokreta za klasični tekst, pretvorite tekst u simbol.

Svojstva filtera (filtri se ne mogu primijeniti na grafičke simbole)

Stvaranje Motion Tween

Motion Tween možete stvoriti na jedan od tri načina:

• Napravite grafiku ili instancu koju želite animirati, zatim desnom tipkom miša kliknite okvir i odaberite Napravite animaciju pokreta.
• Odaberite grafiku ili instancu koju želite animirati, zatim desnom tipkom miša kliknite okvir i odaberite Umetni > Tween Motion.
• Stvorite grafiku ili instancu koju želite animirati, a zatim desnom tipkom miša kliknite instancu radno područje i odaberite Napravite animaciju pokreta.

Stvaranje Motion Tween

Animirajte kretanje drugih svojstava koristeći Property inspector

Koristite naredbu Napravite animaciju pokreta za animaciju većine svojstava instance simbola ili tekstnog okvira. Ova svojstva uključuju, na primjer, rotaciju, skaliranje, prozirnost ili nijansu (samo TLF znakovi i tekst). Na primjer, možete promijeniti svojstvo alfa prozirnosti instance simbola tako da se glatko prikazuje na zaslonu. Za popis svojstava na koja možete primijeniti motion tween, pogledajte Animable objects and properties.

Odaberite instancu simbola ili tekstualno polje u radno područje.

Ako odabir sadrži druge objekte ili sadrži više objekata iz sloja, od Animate se traži da ga pretvori u simbol filmskog isječka.

Izaberi Umetnuti > Animacija pokreta.

Ako se pojavi dijaloški okvir Pretvori odabir u znak za animaciju, kliknite OK za pretvaranje odabira u simbol filmskog isječka.

Kada se primijeni pokret između pokreta na objekt koji postoji samo za jedan okvir, glava za reprodukciju se pomiče na posljednji okvir novog okvira kretanja. U suprotnom, playhead se ne pomiče.

Postavite glavu reprodukcije unutar okvira raspona animacije za koju želite postaviti vrijednost svojstva.

Glava reprodukcije može se postaviti na bilo koji drugi okvir u rasponu animacije. Motion tween počinje s vrijednostima svojstava na prvom kadru raspona tween-a, koji je uvijek ključni okvir svojstva.

Napravimo novu datoteku, napravimo je veličine 800x600 i prebacimo neke datoteke u nju, naime ovih nekoliko slika i “šum šume mp3”, odnosno zvuk. Premještam ga ovamo. Ono što imamo kao rezultat je ova slika - to je šuma, zove se "bg", "play" i "pause", to su gumbi. Sada ću ih pomaknuti dolje, pomaknimo ih, ovako nešto - najjednostavnija opcija.

Sada ću pokrenuti animaciju, pritisnuti cntr+enter, tu je samo šuma i samo dva gumba, ništa ne radi. Ako želim da se zvuk automatski reproducira za mene, to se zove "šumska buka", tada moram odabrati ovaj sloj, a zatim odabrati "auto play", sada kada pritisnem cntr+enter zvuk će se reproducirati. Nevjerojatno.

Kako dodati link koji se može kliknuti na video u programu Adobe Edge Animate.

Ako smo samo nacrtali neki gumb i postoji neka vrsta pozadine, onda ako kliknemo na njega, nigdje neće biti prijelaza. Dodati interaktivni link Moramo odabrati ovaj gumb, desna tipka miša open action, foul button, ja to tako zovem, i kliknite klik, odnosno ono što će se učiniti kada se klikne. I ovdje trebamo odabrati Open you are raol.

Pokazat ću vam u ovom videu kako to učiniti, nije komplicirano, ali morate točno razumjeti gdje trebate kopirati ispravan kod, a gdje ga trebate zalijepiti.

Recimo da imate video napravljen u adobe edge animate, kada kliknete na nju, otvara se željena odredišna stranica, u formatu edge animate i spremljena u mapu s izvornim kodom i Java skriptama. Otvorite ga u bilo kojem uređivaču teksta, možete koristiti bilo koji testni uređivač, na primjer: notepad itd.

Kako petljati animaciju u Adobe Edge Animate, odnosno kako napraviti da kad se pusti do kraja opet krene ispočetka i traje zauvijek.

Ovdje možete kopirati ključne kadrove, odnosno ja odaberem jedan kadar, pritisnem cntr+c, kliknem na željeno polje, pritisnem cntr+v, animacija će se petljati, odnosno ne petljati, ali u ovom slučaju idite iz polazište natrag na polazište. Ako pokrenem ovaj video i pritisnem cntr+enter, vidimo da animacija traje samo 1 sekundu, ide na jednu stranu i vraća se na drugu.

Pokazat ću vam u ovom videu kako to učiniti, nije komplicirano, ali morate točno razumjeti gdje trebate kopirati ispravan kod, a gdje ga trebate zalijepiti.

Recimo, imate banner napravljen u Adobe edge animate, kada kliknete na njega, otvori vam se željena landing stranica, u edge animate formatu je i spremljena u folder sa izvornim kodom i Java skriptama. Otvorite ga u bilo kojem uređivaču teksta, možete koristiti bilo koji testni uređivač, na primjer: notepad itd.

Zatim, želim umetnuti ovaj banner na stranicu. Što treba učiniti? Potrebno je preuzeti index datoteku, zatim je otvoriti u uređivaču teksta, kopirati adobe edge kod i na kraju dodati kod ovdje ispred “head”, zatim ispred naslova mjesta gdje ćemo dodati naš banner, prije div. Za precizniju izvedbu tu su upute koje će vam pomoći: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Nakon toga spremamo i idemo na FTP servis, ja koristim filezillu, pronalazim mjesto pohrane vaše stranice i kopiram indeksnu mapu u vašu datoteku koja se nalazi na poslužitelju, zamjenjujući trenutne datoteke. Zatim preuzimamo sve Java skripte i ažuriramo web mjesto. Sve je spremno - animacija radi, a otvara se i kartica s odredišnom stranicom.

Ako ste zainteresirani za takve lekcije, pretplatite se na moj kanal, jer... bit će mnogo novih videa u bliskoj budućnosti - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – recimo da imate banner napravljen u Adobe edge animate

01:30 – dodajte banner na stranicu

02:09 – dodajte kod prije oznake “head”.

02:50 – upute za dodavanje bannera na stranicu

03:31 – upload datoteka na poslužitelj

05:29 – ažuriramo stranicu i sve je spremno!

Pridružite se i postavljajte pitanja:

Preuzmite tri besplatna Muse predloška: http://site/free-landing.html

http://vk.com/adobeedgeanimate

Ja sam na VKontakteu: http://vk.com/danilfimushkin

Na webinaru sam rekao i pokazao kako možete napraviti punopravni animirani banner iz vektorske ilustracije.

00:17 – počinjemo animirati vektorsku ilustraciju u Edge Animate
14:06 - stvorite pokret šapama lika
16:54 – prednosti ugniježđenog simbola
17:48 – što je ugniježđeni simbol
18:24 – pisanje animacije koja se ponavlja
19:42 – animacija u petlji je spremna
23:40 – napravite treptaje očiju
26:54 – odrediti nazive datoteka prilikom spremanja
27:57 – animacija “padajućeg” teksta
28:39 – pričvršćivanje krivulje kretanja – promjena osi animacije
30:03 – međusažetak animacije, kreiranje snježnog pejzaža i animiranje pahuljice
33:39 – Edge Animate recenzija
34:52 – domaća zadaća
35:25 – kako dodati aktivan link
39:09 – stvaranje nekoliko gumba i prilaganje poveznica

Pridružite se i postavljajte pitanja: http://vk.com/adobeedgeanimate