Kā izveidot gif animāciju ilustratorā. Kā izveidot animāciju programmā Adobe Illustrator. Eksportējiet SWF failus no Illustrator
Šodien mums nav gluži kā ierasts Adobe apmācība Ilustrators. Jo šoreiz taisīsim nevis statisku bildi, bet īstu animāciju. Iedomājies, izrādās palīdzība no Adobe Illustrator var arī zīmēt karikatūras :)
Un tam mums nekas nav vajadzīgs. Kompetenta slāņu organizēšana un gala darba eksportēšana uz swf formātu, kur katrs slānis tiek pārveidots par animācijas kadru. Šodienas apmācībā mēs zīmēsim atpakaļskaitīšanas animāciju retro filmas stilā. Izvadei jābūt flash filmai ar tādu pašu atpakaļskaitīšanu.
Pirmā lieta, kas jādara, ir uzzīmēt visus nepieciešamos elementus turpmākajai animācijai. Lai to izdarītu, atsevišķā dokumentā izveidoju divas filmas kadru pozīcijas, apli uzziņai, kas sagriezts atsevišķos sektoros, faktūru un vertikālu skrāpējumu, lai pievienotu senatnes efektu, kā arī visus skaitļus un uzrakstus.
Kad visas mūsu multfilmas daļas ir gatavas, varat sākt veidot pašu animāciju. Ērtības labad to vislabāk izdarīt jaunā dokumentā. Šajā gadījumā slāņi spēlēs animācijas kadru lomu. Un pašā pirmajā slānī jums vienkārši jānokopē filmas kadrs. Novietojiet to darba zonas vidū.
Tagad izveidojiet otru slāni un iekopējiet tajā filmas rāmi, kurā ar nobīdi tiek izveidoti caurumi malās. Tam arī jābūt centrētam.
No šiem diviem slāņiem jau var iegūt kustīgas filmas animāciju. Bet vēlāk mums vajadzēs daudz vairāk slāņu. Tāpēc atlasiet pirmos divus slāņus, dodieties uz paneļa opcijām un izveidojiet slāņu kopiju.
Līdzīgā veidā mums ir jāuzkrāj 12 slāņi ar filmas kadriem, kas nosaka tā kustību.
Tagad mums ir vesela virkne slāņu, un tie visi ir redzami. Tādā ziņā, ka augšējie slāņi bloķē apakšējos, kas nav īpaši ērti darbam. Tāpēc dažus slāņus var izslēgt, noklikšķinot uz acs ikonas pa kreisi no slāņa nosaukuma. Lai izslēgtu vai ieslēgtu visus slāņus uzreiz, turiet nospiestu taustiņu Alt, vienlaikus noklikšķinot uz acs ikonas. Ieslēdzot un izslēdzot slāņus, jūs varat redzēt tieši to, kas atrodas noteiktā mūsu nākotnes animācijas kadrā. Un tagad, lai mēs varētu pievienot nelielu satricinājumu filmas kustībai, mums ir nedaudz jāpārvieto saņemtie kadri dažādos virzienos. Lai to izdarītu, ieslēdziet tikai to slāni, ar kuru plānojat strādāt Šis brīdis un pēc tam pārvietojiet rāmi pāris pikseļus uz abām pusēm.
Kad esat izgājis cauri visiem slāņiem un pievienojis nelielu nobīdi, varat sākt veidot kustīgā apļa animāciju. Lai to izdarītu, no karikatūras daļu dokumenta nokopējiet apli, kas sastāv no sektoriem, un novietojiet to uz pirmās kārtas filmas kadra augšpusē.
Ja noņemsiet atlasi no apļa, tas izskatīsies kā viens vesels. Tas ir tieši tas, kas mums vajadzīgs.
Bet, tā kā tas sastāv no atsevišķiem sektoriem, ir iespējams, mainot to krāsu, izveidot animāciju ļoti ātri un vienkārši. Lai to izdarītu, kopējiet šo apli uz otro slāni un padariet pirmo sektoru gaišāku. Jūs atceraties, ka kustības laikā filma drebinās, tāpēc nav nepieciešams precīzi novietot apli kadra centrā. Novietojiet to uz acs.
Līdzīgi jums ir jākopē aplis uz katru nākamo slāni, vienlaikus krāsojot ar gaišāku krāsu par vienu sektoru vairāk nekā iepriekšējā reizē. Kopā šie 12 slāņi veido filmas kustības animāciju ar aizpildījuma apli.
Tālāk mums jāpievieno tekstūra mūsu slāņiem. Ieslēdziet pirmo slāni un kopējiet tekstūru no avota faila ar rezerves daļām.
Pēc tam pēc kārtas ieslēdziet nākamos slāņus un kopējiet tur to pašu tekstūru. Lai tas katrā kadrā izskatītos savādāk, vienkārši pagrieziet to par 90 grādiem. Kā jūs, iespējams, uzminējāt, mums ir jāpievieno tekstūra visiem 12 kadriem.
Ja jau diezgan apnicis kopēt, tad varu iepriecināt - palicis pavisam maz. Grūtākā daļa ir beigusies. Atliek pievienot vertikālas skrambas, un gandrīz viss. Lai to izdarītu, vēlreiz nokopējiet oriģinālo skrāpējumu un ievietojiet to patvaļīgā vietā vairākos slāņos. Manā gadījumā skrāpējumi parādās tikai divos slāņos.
Tagad, kad galvenais cikls ar filmas animāciju ir gatavs, atliek pievienot skaitļus. Tā kā mēs skaitam no 3 līdz 1 plus vārds Go!!!, mums vajag vēl vairāk slāņu. Nevis 12, bet pat 48. Lai to izdarītu, ir jāizveido vēl trīs gatavu slāņu kopijas ar filmas animāciju.
Un tad viss ir vienkārši. Ieslēdziet pašu pirmo slāni un ievietojiet tur skaitli trīs.
Pēc tam šis skaitlis ir jākopē uz nākamajiem slāņiem, līdz beidzas apļa animācija. Kad jūs nonākat pie nākamās slāņu kopijas, kur aplis atkal būs pilnībā aizpildīts, jums jāievieto numurs divi. Tādā pašā veidā kopējiet numuru viens vajadzīgajos slāņos. Kad esat nokļuvis līdz pēdējiem apzīmējuma Go!!! slāņiem, vienkārši izdzēsiet apli pirms etiķetes kopēšanas uz vajadzīgo slāni.
Tas viss ar animāciju. Šeit galvenais ir neapjukt. Slāņiem var dot dažus ērtus nosaukumus, bet man kaut kā bija slinkums :) Un tomēr, kad esat pabeidzis, noteikti ieslēdziet visus slāņus atpakaļ, noklikšķinot uz acs ikonas.
Eksportēšanas iestatījumu logā noteikti iestatiet Eksportēt kā: AI slāņus uz SWF Frames. Šī opcija pārvērš Illustrator slāņus animācijas kadros. Pēc tam noklikšķiniet uz pogas Papildu.
Tiks atvērti papildu iestatījumi. Šeit jums jāiestata kadru ātrums. Man ir 12 kadri sekundē. Atzīmēšanas rūtiņa Looping ir atbildīga par animācijas pārvietošanu. Pateicoties viņai, videoklips tiks atskaņots aplī. Un opcija Layer Order: Bottom Up atveido ilustratora slāņus panelī no apakšas uz augšu. Tieši tā mēs veidojām savu animāciju.
Rezultātā mēs iegūstam flash filmu ar mūsu animāciju.
Tagad jūs redzat, kādu vienkāršu animāciju darīt Adobe Illustrator nav tik grūti, kā šķiet no pirmā acu uzmetiena.
Bet lai izveidotu garus video vai interaktīvās lietojumprogrammas to labāk izmantot Adobe Flash vai citi flash redaktori. Piemēram, es izgatavoju šo kaķi vecajā Macromedia Flash ka es izraku darbā.
Arī pēdējā laikā HTML5 un CSS3 arvien vairāk tiek izmantoti animācijas veidošanai. Šo kodu atbalsta mūsdienu pārlūkprogrammas, un tam nav nepieciešams izmantot flash atskaņotāju.
Romāns aka dacascasīpaši emuāram
Abonējiet mūsu biļetenu, lai nepalaistu garām neko jaunu:
Pēdējā laikā ļoti populāras ir dažādas SVG (Scalable Vector Graphics) grafikas animācijas vietnēs un lietojumprogrammās. Tas ir saistīts ar to, ka viss jaunākās pārlūkprogrammas jau atbalsta šo formātu. Šeit ir informācija par pārlūkprogrammas atbalstu SVG.
Šajā rakstā ir aprakstīts vienkāršākais SVG vektora animācijas piemērs, izmantojot vieglo spraudni Jquery Lazy Line Painter.
avotsLai izpildītu un pilnībā izprastu šo uzdevumu, ir vēlamas pamatzināšanas par HTML, CSS, Jquery, bet nav obligātas, ja vēlaties tikai animēt SVG) Sāksim!
Tātad soļi, kas mums jāveic:
- Izveidojiet pareizo faila struktūru
- Lejupielādējiet un pievienojiet spraudni
- Uzzīmējiet foršu līniju mākslu programmā Adobe Illustrator
- Pārvērtiet mūsu attēlu uz Lazy Line Converter
- Ielīmējiet iegūto kodu mapē main.js
- Pievienojiet nedaudz CSS pēc garšas
1. Izveidojiet pareizo faila struktūru
Ar to mums palīdzēs Initializr pakalpojums, kur jums ir jāizvēlas parametri, kā parādīts zemāk esošajā attēlā.
- Classic H5BP (HTML5 katla plāksne)
- Nav veidnes
- Tikai HTML5 Shiv
- samazināts
- .IE klases
- Hromēts rāmis
- Pēc tam noklikšķiniet uz Lejupielādēt!
2. Lejupielādējiet un pievienojiet spraudni
Tā kā inicializācijā ir iekļauta jaunākā Jquery bibliotēka, no arhīva, kas mums jālejupielādē no Lazy Line Painter projektu krātuves, uz mūsu projektu ir jāpārsūta tikai 2 faili. Pirmais ir “jquery.lazylinepainter-1.1.min.js” (spraudņa versija var atšķirties), un tā atrodas iegūtās mapes saknē. Otrais ir example/js/vendor/raphael-min.js.
Šie 2 faili tiek ievietoti js mapē. Un mēs tos iekļaujam savā index.html pirms main.js, piemēram:
3. Uzzīmējiet foršu kontūru attēlu programmā Adobe Illustrator
- Uzzīmējiet mūsu kontūras attēlu programmā Illustrator (vienkāršākais veids, kā to izdarīt, ir ar pildspalvas rīku)
- Ir nepieciešams, lai mūsu zīmējuma kontūras neaizveras, jo mūsu efektam mums ir nepieciešams sākums un beigas
- Nevajadzētu būt aizpildījumiem
- Maksimālais faila izmērs ir 1000 × 1000 pikseļi, 40 kb
- Apgriežam līdz objekta apmalēm Objekts>Rakstījuma dēļi>Ietilpināt zīmējumu dēļu robežās
- Saglabāt kā SVG (standarta saglabāšanas iestatījumi ir labi)
Piemēram, varat izmantot pielikumā esošās ikonas.
4. Pārvērtiet mūsu attēlu uz Lazy Line Converter
Vienkārši velciet un nometiet savu ikonu tālāk esošajā lodziņā.
Pašā kodā, kas parādīsies pēc konvertēšanas, var mainīt kontūras biezumu, krāsu un animācijas ātrumu!
5. Ielīmējiet iegūto kodu mapē main.js
Tagad vienkārši ielīmējiet iegūto kodu tukšā main.js failā
Iespējas:
strokeWidth — kontūras biezums
strokeColor - kontūras krāsa
Varat arī mainīt katra vektora zīmēšanas ātrumu, mainot ilguma parametra vērtību (noklusējums 600)
6. Pievienojiet nedaudz CSS pēc garšas
Noņemiet rindkopu no index.html
Sveika pasaule! Šī ir HTML5 Boilerplate.
Un tā vietā ievietojam bloku, kurā notiks mūsu animācija
pēc tam pievienojiet CSS failam main.css, lai iegūtu labāku izskatu:
Pamatteksts ( fons: #F3B71C; ) # ikonas ( pozīcija: fiksēta; augšā: 50%; pa kreisi: 50%; mala: -300 pikseļi 0 0 -400 pikseļi; )
saglabājiet visus failus.
Tagad vienkārši atveriet index.html modernā pārlūkprogrammā un izbaudiet efektu.
P.S. skrienot tālāk vietējā mašīna ir iespējams atlikt animācijas sākumu par dažām sekundēm.
Tīmekļa grafikas optimizācija
Grafiskā informācija tiek pārraidīts daudz lēnāk nekā teksts, un attēlu ielādes laiks ir proporcionāls to lielumam grafiskie faili. Tāpēc, lai ātri ielādētu Web lapas, tajās ir jāiegulsta mazs izmērs. grafiskie attēli, kas tiek panākts, tos optimizējot. Ar attēla optimizāciju tiek saprasta tā transformācija, kas nodrošina minimālo faila izmēru, saglabājot šajā gadījumā nepieciešamo attēla kvalitāti, kas tiek panākta galvenokārt, samazinot krāsu skaitu grafiskajos attēlos, izmantojot saspiestus un īpašus failu formātus, kā arī optimizējot kompresijas iestatījumus atsevišķiem. attēlu fragmenti.
Programmā Illustrator ir iebūvēti attēlu optimizācijas rīki, kas nodrošina ātru un efektīvu optimizācijas procesu, izmantojot dažādas priekšskatījuma metodes. Priekšskatījums sniedz diezgan precīzu priekšstatu par to, kā optimizētais attēls izskatīsies reāllaikā, kas palīdz novērtēt optimizācijas rezultātu un izvēlēties pareizos iestatījumus. Varat optimizēt gan attēlus, kas izveidoti tieši programmā Illustrator, gan citus attēlus, piemēram, fotoattēlus, kurus plānojat ievietot tīmekļa vietnē.
Optimizācijas parametri tiek iestatīti logā Saglabāt tīmeklim(Saglabāt tīmeklim), ko izsauc ar tāda paša nosaukuma komandu no izvēlnes failu(Fails). Programma piedāvā izmantot vienu no četriem priekšskatījuma režīmiem, bet divi ir vislabākie optimizācijas kvalitātes novērtēšanai:
- 2-Up(divas iespējas) vienlaicīga oriģināla un optimizētā attēla apskate atbilstoši norādītajiem iestatījumiem (1. att.);
- 4-Up(četras iespējas) Šajā režīmā skata apgabals ir sadalīts četros logos (2. att.), lai parādītu sākotnējo attēlu un trīs optimizētā versijas: pirmā versija tiek izveidota, pamatojoties uz iestatītajām optimizācijas vērtībām, bet pārējās divas ir pašreizējo optimizācijas iestatījumu opcijas.
Abi režīmi ļauj ievērojami ietaupīt laiku, meklējot labāko optimizācijas variantu, jo tie novērš nepieciešamību saglabāt attēlus ar dažādiem optimizācijas iestatījumiem un pēc tam tos vizuāli salīdzināt. Turklāt ir iespējams novērtēt ne tikai optimizētā attēla kvalitāti, bet arī tā izmēru un lejupielādes laiku dažādām savienojuma iespējām. Salīdzinājumam ērtākais režīms ir 4-Up (četras opcijas), kas ļauj vizuāli novērtēt kompresijas vai paletes samazināšanas ietekmi uz attēla kvalitāti un izmēru un galu galā noteikt labākos optimizācijas parametrus.
Illustrator ļauj optimizēt tīmekļa grafiku ne tikai GIF, JPG, PNG-8 un PNG-24 formātos, bet arī SWF un SVG. Indeksētie attēli, kuriem ir neliels krāsu skaits, tiek saglabāti GIF formātā. Pilnkrāsu un pelēktoņu attēlu saglabāšanai tiek izmantoti fotoattēli un ar krāsām bagātas grafikas, piemēram, gradienta aizpildījums, tiek izmantots JPG formāts. Pilnkrāsu attēliem ar caurspīdīgiem laukumiem tiek izmantots PNG formāts, kas ļauj saglabāt gan indeksētus, gan pilnkrāsu attēlus, savukārt PNG-8 maksimālais iespējamais optimizēta attēla krāsu skaits ir 256, bet PNG- 24 attēlam var būt miljoniem krāsu, un tāpēc tas izskatās kā jpeg formātā. Atšķirība starp PNG-24 un JPEG ir tāda, ka saspiešanas metode, ko izmanto, lai optimizētu PNG-24 attēlus, nezaudē kvalitāti, bet palielina faila lielumu. SVG un SWF formāti apvieno grafiku, tekstu un interaktīvus komponentus, un tos var arī optimizēt.
Apsveriet konkrēts piemērs attēla optimizācija. Teiksim, programmā Illustrator tika izstrādāta vietnes emblēma (3. att.), kas sākotnēji tika saglabāta AI formātā. Mēģinājums nekavējoties optimizēt to tīmeklim ne pie kā laba nenovedīs, jo šajā gadījumā attēls tiks automātiski apgriezts, kas neņems vērā deformācijas rezultātā iegūtā uzraksta patieso pozīciju (4. un 5).
Tāpēc mēģināsim ar komandu eksportēt emblēmu uz PSD formātu Fails=>Eksportēt(File=>Eksportēt) Izveidotā attēla izmērs būs 143 KB. Atveriet iegūto PSD failu un izmantojiet komandu Fails=>Saglabāt tīmeklim(Fails=>Saglabāt tīmeklim). Ņemot vērā ierobežoto attēla krāsu skaitu, šajā gadījumā GIF formāts ir optimāls, un jums ir jāizlemj ar konkrētiem iestatījumiem. Eksperimentējot ar iestatījumiem, jūs to varat redzēt vislabākā kvalitāte dod programmas noklusējuma saspiešanas algoritmu selektīvs(Selektīvs). Kas attiecas uz izlīdzināšanu, tad, ņemot vērā gradienta aizpildījuma klātbūtni, labāk izvēlēties algoritmu ar trokšņu ģenerēšanu. troksnis(6. att.). Iegūtā optimizācijas faila izmērs būs 6,729 KB (7. att.), savukārt fona caurspīdīgums tiks saglabāts, par ko ir viegli pārliecināties, saglabājot GIF attēlu kopā ar HTML failu (8. att.). Rezultātā šajā piemērā faili emblem.html un emblem.gif tika iegūti mapē Primer1.
Pogas
Jebkuras Web lapas neaizstājams specifisks dizaina elements ir grafiskās vadības pogas. Ir vienkārši neiespējami iedomāties lapu bez tiem. Pogu zīmēšana mūsdienās ir kļuvusi par īpašu žanru, un programma Illustrator ļauj izveidot vissarežģītākās iespējas. Piemēram, pogas, kas veidotas kā režģa objekti un (vai) ar maskām, izskatās daudz efektīvāk nekā parasti.
Apsveriet iespēju programmā Illustrator izveidot apaļu paceltu pogu. Uzzīmējiet vektora objektu, kas piepildīts ar patvaļīgu krāsu apļa formā (9. att.) un pārveidojiet to režģī, izmantojot komandu Object=>Izveidot gradienta tīklu(Object=>Create Gradient Mesh), norādot četras rindas un četras kolonnas, un sarakstā Izskats(Skatīt), izvēloties opciju Uz centru izcelt(Fona apgaismojums) uz 60 (10. attēls). Izvēlieties rīku Tiešā atlase un noklikšķiniet objekta augšējā kreisajā stūrī, izvēloties tur esošos enkura punktus (11. att.). Mainiet atbilstošās šūnas krāsu uz baltu, atlasot to paletē Paraugi(12. att.).
Paņemiet instrumentu Elipse(Elipse), iestatiet peles marķieri iepriekš izveidotā apļa centrā un, turot nospiestus taustiņus alt Un Shift, uzvelciet jauno apli virs vecā tā, lai tas no visām pusēm būtu par 1-2 pikseļiem lielāks par veco. Padariet to par melnu apmali Insults) 1–2 pikseļu platumā un aizpildiet to ar radiālu gradientu no sarkanas līdz baltai (13. attēls). Velciet izveidoto vektora objektu par 1-2 pikseļiem pa labi un uz leju, pēc tam, nenoņemot atlasi, ar peles labo pogu noklikšķiniet uz tā un no konteksta izvēlne izvēlieties komandu Sakārtot=>Sūtīt atpakaļ(Organize=>Sūtīt atpakaļ). Rezultātā mēs iegūstam tukšu pogu, kas parādīta attēlā. 14.
Parasti jebkurā Web lapā ir vairākas viena veida pogas, kas atšķiras, piemēram, tikai uz tām uzzīmēto bultiņu virzienā, kas norāda pārvietošanās virzienu vietnē. Apsveriet vienkāršāko gadījumu, kad ir divas pogas, no kurām viena ar lejupvērsto bultiņu nozīmē pāreju uz nākamo lapu, bet poga ar bultiņu augšup uz iepriekšējo. Kā tukšu bultiņu ņemsim parastu trīsstūri, kas uzzīmēts ar instrumentu Daudzstūris(Daudzstūris) piepildīts ar melnu krāsu un veidots arī kā sieta objekts lielākam efektam. Pārvietojiet bultiņu uz pogu un pielāgojiet visu objektu novietojumu vienam pret otru, izmantojot atbilstošās paletes pogas Izlīdzināt(Izlīdzināšana). Pirmā no saņemtajām pogām ir parādīta attēlā. 15. Izveidojiet slāņa kopiju ar pogu, izvēloties komandu Slāņa dublikāts Slāņi, kā rezultātā mēs iegūstam divus identiskus slāņus. Pēc tam atlasiet bultiņu uz slāņa kopijas un pagrieziet to par 180°, atlasot komandu konteksta izvēlnē Pārveidot=>Pagriezt Transformācija=>Pagriezt. Mēs iegūstam to pašu pogu, kā parādīts attēlā. 16. Ņemiet vērā, ka daudz ērtāk ir glabāt visas viena projekta viena tipa pogas vienā failā dažādos slāņos, kas tiek demonstrēts šajā gadījumā.
Tagad jums ir jāsaglabā katras pogas optimizētās opcijas. Vispirms padariet apakšējo slāni neredzamu. Šajā gadījumā augšējā slāņa poga tiks saglabāta. Izvēlieties komandu Fails=>Saglabāt tīmeklim(File=>Save for Web), konfigurējiet pogas optimizācijas parametrus, piemēram, kā parādīts att. 17, noklikšķiniet uz pogas Saglabāt(Saglabāt) un ievadiet faila nosaukumu. Rezultātā saglabātā poga ir parādīta attēlā. 18. Tagad padariet apakšējo slāni redzamu, augšējo slāni padariet neredzamu un saglabājiet otro pogu tādā pašā veidā, piešķirot tai citu nosaukumu. Rezultāts ir parādīts attēlā. 19.
Tagad atliek tikai pārliecināties, ka pogas Web lapā izskatās labi, un ievietot tās pielāgotā lapā (20. attēls). Rezultātā šajā piemērā attēlu mapē (mapē) tika iegūts fails Primer2.html un divi grafiskie attēli Grunts2).
Ja vēlaties, optimizācijas procesa laikā pogu var viegli pārvērst šķēlē. Šajā gadījumā pēc komandas izvēles Fails=>Saglabāt tīmeklim(Fails => Saglabāt tīmeklim) un optimizācijas iestatījumi ir jāizvēlas rīku paletes rīkā Šķēles atlase(Šķēļu atlase) un veiciet dubultklikšķi uz attēla, kas automātiski pārvērtīsies par šķēli ar sērijas numuru 1 (21. att.). Veicot dubultklikšķi vēlreiz, tiks atvērts logs Šķēles opcijas(Slice Options), kurā būs jānorāda saite un, ja vēlaties, jāmaina šķēluma nosaukums (22. att.), un pēc tam jāsaglabā optimizētais attēls. Rezultāts šajā gadījumā būs faili Primer3.html (23. att.) un Primer3.gif (mape Primer3).
Interaktīvie elementi
Viens veids, kā paspilgtināt lapu, ir ieviest dizaina elementus, kas to maina izskats(vai stāvoklis) atkarībā no peles uzvedības vai, retāk, jebkādu citu situāciju gadījumā: tālummaiņa, ritināšana, ielāde, kļūdas utt.
Starp šiem elementiem slavenākie ir apgāšanās (no angļu valodas roll over to roll, roll over) elementi, kas peles ietekmē maina savu izskatu. Animētas pogas ir tipisku apgāšanās piemēri. Apgāšanās bieži tiek izmantota, veidojot citus vietnes navigācijas elementus. Faktiski jebkura apgāšanās ir nevis viens, bet vairāki (līdz četriem) attēliem, no kuriem katrs atbilst konkrētam notikumam. Galvenie notikumi tiek uzskatīti par šādiem: Normāli normāls stāvoklis, Virziet peles kursoru virs elementa un uz leju nospiediet peles kreiso pogu, virzot kursoru virs tā. Teorētiski var būt iesaistīti tādi notikumi kā Click, atlaižot peles kreiso pogu pēc noklikšķināšanas, uz augšu pēc pogas atlaišanas, Out, izejot no aktīvās zonas. Tomēr praksē tas biežāk aprobežojas ar elementa maiņu tikai pirmajiem trim vai pat diviem notikumiem.
Klasiskie rolloveri
Klasiskā izpratnē apgāšanās ir grafisku attēlu sērija GIF formātā un tiem atbilstošais HTML kods, pateicoties kuriem, atkarībā no peles darbības, viens attēls pārlūkprogrammas logā aizstāj citu.
Illustrator nav paredzēts tiešai apgāšanās radīšanai klasiskajā izpratnē, taču tas var palīdzēt to sākotnējo elementu izstrādē. Ideja šajā gadījumā ir izveidot slāni ar attēlu, kas atbilst pirmajam notikumam. Pēc tam izveidojiet slāņa kopiju un pārveidojiet attēlu, lai tas atbilstu otrajam notikumam utt. Iegūtais slāņveida attēls tiek eksportēts uz PSD failu ar saglabātiem slāņiem, uz kuru pamata programmā Image Ready tiek izveidots apgāšanās. Illustrator izmantošanas priekšrocība, tāpat kā daudzos citos gadījumos, ir vairākas interesantas funkcijas, kas nav pieejamas citos gadījumos. programmatūras rīki, kopā ar vektorgrafikas pārveidošanas ērtībām.
Mēģināsim izveidot apgāšanās uzrakstu, kas maina krāsu atkarībā no peles uzvedības. Atveriet programmu Illustrator un izveidojiet formu noapaļota un piepildīta ar melnu taisnstūri (24. att.), izveidojiet tās kopiju un novietojiet to brīvā ekrāna daļā. Konvertējiet pirmo taisnstūra kopiju par režģa objektu ar izcēlumu centrā (komanda Object=>Izveidot gradienta tīklu Object=>Create Gradient Mesh), norādot četras rindas un desmit kolonnas (25. att.). Aktivizējiet otro taisnstūra kopiju un iestatiet tam gradienta aizpildījumu, kas ir līdzīgs attēlā redzamajam. 26. Pārklājiet gradienta objektu virs acs, samaziniet gradienta objekta necaurredzamību līdz aptuveni 80% un gradienta objekta izmēru līdz apmēram 1 pikselim, lai beigās simulētu izliekuma efektu. Un tad virs objektiem izdrukā uzrakstu. Sākotnējā formā lai tam ir balta krāsa, kas atbildīs normālam stāvoklim (27. att.), un tad, mainoties apgāšanās stāvoklim, uzraksta krāsa mainīsies, piemēram, uz zaļu, kad peles marķieris ir virzīja kursoru virs tā (virs stāvoklis) un zilā krāsā, kad tiek nospiesta peles poga (stāvoklis lejup).
Pievērsiet uzmanību paletei Slāņišajā posmā tam ir tikai viens slānis. Izmantojot komandu, izveidojiet divas šī slāņa kopijas Slāņa dublikāts(Duplicate Layer) no paletes izvēlnes Slāņi, paletē būs trīs slāņi (28. att.). Pēc tam pirmajā slāņa eksemplārā nomainiet uzraksta krāsu uz zaļu, bet otrajā uz zilu (29. att.). Rezultātā tiks iegūta apgāšanās sagatave.
Eksportējiet izveidoto attēlu PSD formātā, saglabājot slāņus, izmantojot komandu Fails=>Eksportēt(File=>Export) un izvēloties RGB krāsu modeli (30. att.). Atveriet izveidoto PSD failu programmā ImageReady (31. un 32. attēls). Izveidojiet rāmjus, pamatojoties uz slāņiem, izvēloties komandu Izveidojiet rāmjus no slāņiem(Izveidot rāmjus no slāņiem) no paletes izvēlnes animācija. Animācijas logs izskatīsies kā attēlā. 33. Tajā pašā laikā paletē Apgāšanās Sākotnēji tiks izveidots viens parastais stāvoklis.
Pēc tam logā animācija atlasiet rāmi, kas atbilst kursora novietojuma stāvoklim, atrodoties paletē Slāņi slānis tiek atlasīts automātiski 1. slāņa kopija(34. att.). Iet uz paleti Apgāšanās un noklikšķiniet uz pogas Izveidojiet apgāšanās statusu(Izveidot apgāšanās stāvokli) att. 35, kas izraisīs valsts parādīšanos Over State paletē Apgāšanās(36. att.). Izveidojiet valsti tādā pašā veidā Down State. Aktivizēt stāvokli Normāls paletē Apgāšanās un izdzēsiet paletē animācija visi kadri, izņemot to, kam jāatbilst stāvoklim Normāls. Rezultātā katram apgāšanās stāvoklim paletē animācija būs tikai viens rāmis (37., 38. un 39. att.).
Rīsi. 38. Attēla skats, animācijas logs un slāņu un apgāšanās paletes virsstāvoklim
Pārbaudiet rezultātu, noklikšķinot uz pogas Priekšskatījums noklusējuma pārlūkprogrammā(Pārlūkprogrammas priekšskatījums) rīkjoslā un atverot pārlūkprogrammas logu (40. attēls). Pēc tam saglabājiet failu, izmantojot komandu Fails=>Saglabāt optimizēts(File=>Saglabāt ar optimizāciju) un norādot opciju HTML un attēli (*.html). Rezultātā šajā piemērā tika iegūts fails Primer4.html un grafisko attēlu sērija attēlu mapē.
Rīsi. 40. Pārlūka logs ar Rollover elementu
SVG apgāšanās
Arvien populārākais SVG formāts (mērogojama vektorgrafika Vektorgrafika), kas izveidots, pamatojoties uz XML standartu, ļauj iegūt arī dažādus interaktīvus elementus, jo īpaši apgāšanās, tikai praksē tas tiek īstenots pavisam citādi. Ir vērts atzīmēt, ka interaktīvo SVG apgāšanās izveidei atšķirībā no klasiskajiem, kad atbilstošais HTML kods tiek ģenerēts pilnībā automātiski, ir nepieciešamas JavaScript valodas zināšanas un izpratne par objektorientētās programmēšanas pamatprincipiem.
Īpaša palete ir paredzēta darbam ar SVG objektiem. SVG interaktivitāte, kuru ir viegli atvērt ar komandu Logs=>SVG interaktivitāte(Window=>SVG interaktivitāte) att. 41.
Apskatīsim šo apgāšanās izveides variantu, izmantojot interaktīvas pogas piemēru, uz kuras esošās etiķetes krāsa mainīsies no melnas uz zilu, kad peles kursors tiek novietots virs kursora, un atkal kļūs melns, kad pele atstāj aktīvās zonas.
Izveidojiet taisnstūrveida pogu ar noapaļotām malām un izvēlieties tai piemērotu gradienta aizpildījumu, piemēram, kā parādīts attēlā. 42. Noregulējiet pogas caurspīdīgumu paletē Pārredzamība(Caurspīdīgums) šajā piemērā parametra vērtība Necaurredzamība(Necaurredzamība) ir iestatīts uz 50%. Izveidojiet pogas kopiju, aizpildiet to ar tumši zaļu krāsu (43. att.) un pēc tam konvertējiet to par sieta objektu ar komandu Object=>Izveidot gradienta tīklu(Object=>Create Gradient Mesh), norādot četras rindas un desmit kolonnas, un sarakstā Izskats(Skatīt), izvēloties opciju Uz centru(Virzībā uz centru) un iestatot vērtību izcelt(Izcelt) līdz 100. Samaziniet acs objekta slāņa necaurredzamību līdz aptuveni 40% (44. attēls). Novietojiet sieta objektu virs gradienta objekta, un poga izskatīsies kā parādīts attēlā. 45.
Rīsi. 44. Pogas kopijas pārvēršana režģa objektā
Aizpildiet pogu ar paredzēto uzrakstu un noregulējiet tās pozīciju, izmantojot atbilstošās paletes pogas Izlīdzināt(Izlīdzināšana). Iegūtais attēls saturēs vienu slāni ar trim objektiem, kas uzlikti viens uz otra (46. att.). Ieplānotie notikumi attieksies uz teksta objektu, tāpēc ērtības labad mainiet tā nosaukumu uz Teksts veicot dubultklikšķi uz objekta un ievadot jaunu nosaukumu. Līdzīgi mainiet slāņa nosaukumu no 1. slānis uz slāni(47. att.).
Notikumu apstrāde ietver JavaScript procedūru izmantošanu, tāpēc jums ir jāiekļauj fails ar šo procedūru aprakstu. To sauc Events.js, un pēc instalēšanas tas tiek saglabāts diskā mapē Sample Files\Sample Art\SVG\SVG Adobe programmatūra Ilustrators. Lai iekļautu failu Events.js, izmantojiet komandu JavaScript faili SVG interaktivitāte(48. att.). Tālāk jums jānospiež poga Pievienot(Pievienot) un atrodiet vajadzīgo failu cietajā diskā. Kad viņa vārds parādās laukā URL(49. att.), noklikšķiniet uz pogas Gatavs(Ej ārā).
Rīsi. 48. JavaScript failu komandas atlasīšana
Pēc tam jums jādefinē objekta reakcija uz peles notikumiem Teksts. Laukā atlasiet objektu Teksts notikumu(Notikumu) paletes SVG interaktivitāte izvēlieties notikumu uzvediet peles kursoru elemColor(evt, "Teksts", "#3333FF") tas nozīmēs, ka tad, kad pele atrodas virs objekta Teksts tā krāsa mainīsies uz zilu (50. att.). Lai pēc peles iziešanas no aktīvās zonas teksta krāsa mainītos uz melnu, ir jāizveido vēl viens notikums onmouseout atlasiet to laukā notikumu(Notikumu) paletes SVG interaktivitāte. Pēc tam darbības rindā ievadiet tekstu elemColor(evt, "Teksts", "#000000") tas atgriezīsies melnā krāsā (51. att.).
Rīsi. 51. SVG interaktivitātes paletes galīgais izskats objektam Text
Saglabājiet ģenerēto apgāšanās ātrumu kā SVG failu ar komandu Fails=> Saglabāt kā(Fails=> Faila veids formātā SVG un pēc tam iestatiet SVG faila saglabāšanas opcijas, kā parādīts attēlā. 52. Pēc saglabāšanas tiks iegūts tikai viens atsevišķs fails ar paplašinājumu SVG, nevis divi, kā klasiskā apgāšanās gadījumā, šajā gadījumā tika iegūts Primer5.svg fails (mape Primer5). Taču, lai apgāšanās patiešām darbotos, mapē ar SVG failu papildus ir jākopē Events.js fails ar JavaScript procedūru aprakstu. Pēc tam varat pārbaudīt apgāšanās veiktspēju, rezultāts izskatīsies tā, kā parādīts attēlā. 53.
SVG animācija
SVG formātu var izmantot arī animācijas pārraidīšanai. Mēģināsim izveidot vienkāršu animācijas elementu (šajā gadījumā tā būs informācija par uzņēmumu), kas parādīsies ekrānā, kad peles kursoru novieto virs atbilstošā grafiskā objekta, un pazudīs, kad pele tiek noņemta no interaktīvā elementa.
Izveidosim aptuveni tādu grafisko un teksta objektu sēriju, kā parādīts att. 54. Pārdēvējiet visus izveidotos objektus ērtā veidā, secīgi noklikšķinot uz nākamā objekta nosaukuma paletē Slāņi un iepazīstinot vēlamais vārds(55. att.). Ņemiet vērā, ka izcelts attēlā. 56 preces Teksts1, Teksts2, Teksts3 Un Ceļš1 vienmēr būs redzams, un visi pārējie tikai tad, kad virzīsit kursoru virs objekta Teksts1.
Rīsi. 54. Attēla oriģinālais skats
Izmantojot komandu, iekļaujiet failu Events.js ar JavaScript procedūru aprakstu JavaScript faili(JavaScript faili) no paletes SVG interaktivitāte nospiežot pogu Pievienot(Pievienot), atlasot vajadzīgo failu cietajā diskā un noklikšķinot uz pogas Gatavs(Ej ārā).
Definējiet peles notikuma atbildi objektam Teksts1. Izvēlieties objektu Teksts, laukā notikumu(Notikumu) paletes SVG interaktivitāte izvēlieties notikumu uzvediet peles kursoru un zemāk esošajā rindā ievadiet tekstu elemShow(evt, "Teksts4"); elemShow(evt, "Path2"). Tā rezultātā, kad pele atrodas virs objekta Teksts1 objekti kļūs redzami Teksts4 Un Ceļš2. Lūdzu, ņemiet vērā, ka, ja notikuma laikā ir jāveic vairākas darbības, tās jānorāda ar zīmi “;”. Pēc tam dariet to pašu pasākumam onmouseout, ievadot tam paredzēto tekstu, kas nozīmēs objektu slēpšanu (57. att.).
Saglabājiet rezultātu kā SVG failu ar komandu Fails=> Saglabāt kā(File=>Save as), norādot faila nosaukumu, laukā atlasot Faila veids SVG formātā un pēc tam iestatiet SVG faila saglabāšanas opcijas saskaņā ar att. 58. Pēc saglabāšanas tiks iegūts Primer6.svg fails (Primer6 mape). Neaizmirstiet kopēt failu Events.js mapē ar šo failu. Ja pēc tam jūs palaist coz dotais fails, jūs redzēsiet rezultātu, kas parādīts attēlā. 59. Tas ir gandrīz tas, kas jums nepieciešams. Vienīgais, kas mūsu plānos nebija iekļauts, bija objektu sākotnējais izskats Teksts 4 un Ceļš 2 iekraušanas laikā. Lai atbrīvotos no šī trūkuma, atlasiet abus šos objektus vienlaikus un izveidojiet tiem darbību elemHide(evt, "Teksts4"); elemHide(evt, "Path2") par notikumu ielāde(60. att.). Saglabājiet failu vēlreiz un pārliecinieties, vai objekti tagad ir Teksts4 Un Ceļš2 redzams tikai tad, kad peles kursoru novieto virs objekta Teksts1.
GIF animācija
Jebkura Web lapa nav iedomājama bez tīmekļa animācijas, ieskaitot animētus gifus. Viens no veidiem, kā tos izveidot, ir izmantot Adobe ImageReady lietojumprogrammu, kas, cita starpā, ļauj izveidot animāciju no slāņiem. Tajā pašā laikā pašu daudzslāņu attēlu var sagatavot dažādās lietojumprogrammās, tostarp Adobe Illustrator.
Ir ļoti vienkārši izveidot animāciju, pamatojoties uz elementiem no paletes Simboli(Simboli), ko atver komanda Logs=>Simboli(Window=>Symbols) vai no vienas no simbolu bibliotēkām, kuras var atvērt, izmantojot komandu Window=>Simbolu bibliotēkas(Window=>Simbolu bibliotēkas).
Piemēram, mēģināsim palielināt jebkura objekta-simbola izmēru, objekta palielināšanas procesa galvenie posmi ir jāiestata uz atsevišķiem slāņiem. Vispirms vienkārši novietojiet simbolu objektus vienu virs otra un pēc tam palieliniet katra nākamā objekta izmēru, piemēram, kā parādīts attēlā. 61. Rezultātā paletē Slāņi tiks izveidots viens slānis ar daudziem objektiem (62. att.). Ja šo attēlu tieši eksportēsit uz PSD formātu, tas nedarbosies, jo ir tikai viens slānis, un, protams, atverot PSD failu programmā ImageReady, būs arī tikai viens slānis. Tāpēc vispirms ir jānovieto objekti dažādos slāņos. To var izdarīt Dažādi ceļi vienkāršākais veids ir vispirms atlasīt slāni 1. slānis slāņu paletē un izmantojiet komandu Atbrīvot uz slāni(Izlaist slāņos). Rezultātā katrs objekts tiks pārvietots uz savu slāni, taču tie visi tiks ligzdoti slānī 1. slānis. Tāpēc jums būs manuāli jāvelk visi ligzdotie slāņi uz slāņu paletes augšdaļu, lai tie atrastos virs slāņa. 1. slānis, un tad tukšais slānis 1. slānis viegli noņemt (63. att.). Eksportējiet attēlu PSD formātā, izmantojot komandu Fails=>Eksportēt(File=>Eksportēt) ar iestatījumiem kā attēlā. 64.
Ielādējiet izveidoto PSD failu programmā ImageReady (65. un 66. att.). Atveriet paletes izvēlni animācijaIzveidojiet rāmjus no slāņiem(Izveidojiet rāmjus no slāņiem). Rezultātā tiks izveidoti pieci kadri, no kuriem katrs atbildīs savam slānim, un paletes logs animācija izskatīsies kā attēlā. 67.
Pēc tam iestatiet katra izveidotā kadra ilgumu šajā gadījumā, visu kadru ilgums ir iestatīts uz 0,2 s. Un pēc tam saglabājiet optimizēto animāciju ar komandu Fails=>Saglabāt optimizēts(Fails=>Saglabāt ar optimizāciju). Iegūtais rezultāts var atgādināt att. 68.
Vēl ērtāk ir izmantot funkcijas Dzīvie maisījumi Illustrator programmatūra. Šī Illustrator un ImageReady kombinētā izmantošana ievērojami paātrina GIF animāciju izveides procesu.
Piemēram, uzzīmējiet divus patvaļīgus daudzkrāsainus objektus un pēc tam sajauciet tos ar atbilstošiem parametriem (69. att.). Nav iespējams tieši izmantot šo failu, lai izveidotu animāciju, jo attēls atrodas uz viena slāņa (70. att.). Tāpēc vispirms katrs sajaukšanas objekta elements būs jānovieto atsevišķā slānī. Lai to izdarītu, logā Slāņi iezīmējiet līniju
Rīsi. 70. Sākotnējais stāvoklis Slāņu logs
Eksportējiet izveidoto failu PSD formātā ar komandu Fails=>Eksportēt(Fails=>Eksportēt). Atveriet izveidoto PSD failu programmā ImageReady (73. att.). Lūdzu, ņemiet vērā, ka visi Illustrator programmā izveidotie slāņi parādīsies slāņu logā (74. att.) un logā animācija būs tikai viens kadrs.
Aktivizējiet paletes izvēlni animācija, noklikšķinot uz melnās bultiņas paletes augšējā labajā stūrī un izvēlieties komandu Izveidojiet rāmjus no slāņiem(Izveidot rāmjus no slāņiem) beigās šajā piemērā tiks izveidoti pieci kadri un paletes logs animācija iegūs formu saskaņā ar att. 75. Atlasiet visus kadrus, turot nospiestu taustiņu Shift, un šajā piemērā iestatiet piemērotu kadra ilgumu, katram kadram tiek ņemts vienāds laiks 0,2 s. Pēc tam saglabājiet failu ar optimizācijas komandu Fails=>Saglabāt optimizēts(File=>Saglabāt ar optimizāciju) iestatījumu sarakstā Faila veids opciju Tikai attēli (*.gif). Animācija atgādinās att. 76.
Daudz interesantāka ir nevis kustība, bet gan vienmērīga jaukto objektu izmēru maiņa. Piemēram, varat izmantot jau izveidoto sajaukšanas pāreju. Šajā gadījumā pēc atsevišķu slāņu izveidošanas katram sajaukšanas pārejas elementam novietojiet visus objektus vienu virs otra, izmantojot pogas Horizontālās izlīdzināšanas centrs(Izlīdzinājums attiecībā pret horizontālo centru) un Vertikālās līdzināšanas centrs(Vertikālā centra izlīdzināšana) paletes Izlīdzināt(77. att.).
Eksportējiet izveidoto failu PSD formātā ( Fails=>Eksportēt File=>Export) un atver izveidoto PSD failu programmā ImageReady (78. att.). Izveidojiet animācijas kadrus, pamatojoties uz slāņiem ( Izveidojiet rāmjus no slāņiem Izveidojiet rāmjus no slāņiem) un izvēlieties tiem atbilstošu ilgumu (79. att.). Un pēc tam, lai animācija būtu efektīvāka, kopējiet esošos kadrus, bet apgrieztā secībā, lai attēls vispirms palielinātos un pēc tam samazinātos un tā tālāk pa apli (80. att.). Pēc tam saglabājiet optimizācijas failu ( Fails=>Saglabāt optimizēts Fails=>Saglabāt ar optimizāciju). Rezultātā iegūtā animācija ir parādīta attēlā. 81.
Rīsi. 80. Animācijas loga stāvoklis pēc kadru dublēšanas
Rīsi. 81. Pabeigta animācija
Caurspīdīgs GIF programmā Adobe Illustrator tiek darīts šādi. Atveriet izvēlni Fails > Saglabāt tīmeklim un ierīcēm (Alt+Ctrl+Shift+S). Atvērtajā logā laukā Optimizēts faila formāts vispirms jādodas uz cilni attēla izmērs(attēla izmērs). Fakts ir tāds, ka optimizācijas logā pēc noklusējuma tiek parādīta visa lapa, un tas parasti nav nepieciešams. Tāpēc cilnē Attēla lielums noņemiet atzīmi no izvēles rūtiņas Klips uz Artboard(Apgriezt, lai ietilptu lapu) un noklikšķiniet uz pogas Lietot.
Pēc tam formātu atlases sarakstā atlasiet GIF un atzīmējiet izvēles rūtiņu Pārredzamība.
Pēc tam mēs noteiksim, kuras krāsas būs caurspīdīgas. Visas attēlā esošās krāsas ir ietvertas cilnē krāsu tabula(Krāsu diagramma) un tiek parādīti kā krāsaini kvadrāti. Izvēlieties rīku rīkjoslā loga kreisajā pusē acu pilinātājs(pipete).
Krāsas var definēt divos veidos. Vienkāršākais veids ir norādīt krāsu ar pilinātāju tieši uz attēla - pēc tam krāsa tiks izcelta krāsu tabulā ar tumšu triepienu. Ja precīzi zināt, kurai krāsai jābūt caurspīdīgai, varat to atlasīt tieši krāsu tabulā, noklikšķinot uz atbilstošās krāsas lodziņa. Un pirmajā un otrajā gadījumā, ja jums ir jāizvēlas vairākas krāsas, jums jāstrādā ar nospiestu taustiņu Shift (vai Ctrl). Pēc krāsas izvēles jums ir jāinstruē programma, lai tā būtu caurspīdīga. Lai to izdarītu, noklikšķiniet uz ikonas Kartē atlasītās krāsas uz caurspīdīgu(Pievienojiet atlasītās krāsas caurspīdīgumam). Attēlā šī poga ir apvilkta, un sarkanā krāsa ir iestatīta uz caurspīdīgu. Attēlā parādīsies caurspīdīgs laukums, un krāsu tabulas kvadrāts mainīs savu izskatu - daļa no tā kļūs par baltu trīsstūri. Lai atceltu atlasīto krāsu, tā ir jāatlasa krāsu tabulā un pēc tam vēlreiz noklikšķiniet uz ikonas Kartē atlasītās krāsas līdz caurspīdīgai.
Daži vārdi par caurspīdīguma iestatīšanas metodi. Par to ir atbildīga nolaižamā izvēlne. Norādiet Transparency Dither algoritmu, krievu valodā - Caurspīdības simulācijas algoritms (att. zemāk). Ir četras izvēles iespējas: No Transparency Dither — nav algoritma, Diffusion Transparency Dither — difūzs algoritms, Pattern Transparency Dither — uz rakstiem balstīts algoritms un Noise Transparency Dither — uz troksni balstīts algoritms. Difūzā algoritma režīmā slīdnis kļūst aktīvs Summa(Summa), kas ļauj mainīt difūzijas vērtību. Ko pielietot praksē? Atkarībā no mērķa un attēla. Es neizmantoju šo opciju un vienmēr atstāju noklusēto - No Transparency Dither.
Nospiediet Saglabāt — caurspīdīgs GIF ir gatavs. Darbs tika veikts Adobe Illustrator versijā CS4 (v.14), taču visas darbības un īsinājumtaustiņi attiecas uz iepriekšējo versiju CS3 (v. 13).
Adobe Illustrator un After Effects
Importēt un vienkārša animācija
Sveiki. Šodien mēs pārskatām vienkāršu animāciju programmā After Effects.Resursi: Adobe Illustrator CC
Adobe After Effects CC
Sāksim ar zīmēšanu programmā Illustrator.
Mēs zīmējam
1) Uzzīmējiet dzeltenu taisnstūri kā fonu
1. attēls – taisnstūris
2) Uzzīmējiet apli un aizpildiet to ar gradientu
Nedaudz piestrādāsim pie apļa:
- noņemiet apakšējo punktu uz kontūras, mēs iegūstam loku;
- novelkot taisnu līniju, aizverot loka dibenu, iegūstam pusloku
2. attēls - 1) uzzīmēt apli; 2) gradients; 3) dzēst punktu
3) Uzzīmējiet taisnstūri un izveidojiet tā kopiju
- viens pelēks taisnstūris;
- vēl viens tumši pelēks taisnstūris
4) Uzzīmējiet trīsstūri no zvaigznītes, iestatot staru skaitu - 3
3. attēls - 1) taisna gaisma; 2) taisni tumšs; 3) trīsstūris
5) Uzzīmējiet kaķi ar pildspalvu un vienkāršām formām 
4. attēls - 1) galva; 2) kakls; 3) ķermenis; 4) kāja; 5) aste
Un tagad visvairāk GALVENĀ brīdis
Sadalīsim attēlus slāņos (kas tiks animēts - atsevišķā slānī) šādi: 
5. attēls — visi attēli (sarkanā krāsā atzīmēti svarīgie slāņi)
Viss, tagad mēs saglabājam.
Apskatīsim saglabāšanas iestatījumus
6. attēls - Saglabāt
Un tagad nākamais posms. AizvērtAdobe Illustrator un atveriet After Effects.
Importēt programmā After Effects
Fails - Importēt - Fails - atlasiet mūsu saglabāto failu Ilustrators.
Izvēlēsimies importēt slāņus no Illustrator, ja ievietosim kadrus, mēs iegūsim attēlu ar sapludinātiem slāņiem, bet mums tas nav vajadzīgs.
7. attēls. Importēt kā kompozīciju
Viss importēts.
Tagad paskatīsimies, kas mums ir. Veiciet dubultklikšķi uz kompozīcijas
, kas atvērtos un mēs redzētu slāņus (ja viss būtu izdarīts pareizi, būs vairāki slāņi). Mēs to saņemam, skatiet attēlu
8. attēls - atvērta kompozīcija
Un tagad tas, kam mēs šodien esam šeit - Animācija.
Animācija iekšā
pēc efektiem
Iestatiet pagrieziena punktu pie bultiņas tā augšpusē, izmantojot Pan Behind rīku (saīsne — Y). Vienkārši paņemiet punktu un pārvietojiet to, kur vēlaties. Rezultātā tas izskatīsies šādi..
9. attēls. Panorāmēšanas rīks un slāņi
Tas arī viss, tagad pāriesim pie animācijas slāņiem.
Mums ir nepieciešams slānis Arrow un Head_cat.
Sāksim ar bultiņu.
Paplašiniet sarakstu, atrodiet pulksteni un noklikšķiniet uz tā. Tātad mēs ievietojām pirmo punktu uz nulles sekundi. Kopumā animācija ilgs 2 sekundes.
Tātad, šie ir iestatījumi, kas jums jāveic (kopā ieliksim 3 punktus)
| Otrkārt | 0 | 1 | 2 |
| +66 | - 70 | +66 |
10. attēls — rotācijas bultiņa
Tagad animēsim kaķa galvu.
Izvērsiet head_cat un atrodiet pozīciju.
Būs 4 punkti.
Tas mainīs tikai pēdējo koordinātu, nepieskaroties pārējām.
| Otrkārt | 0.1 | 0.17 | 1.12 | 2.0 |
| pozīciju | 689.3 | 729.3 | 729.3 | 689.3 |
11. attēls — novietojiet galvu
Tātad, animācijas princips bija šāds. Bulta šūpojas no vienas puses uz otru, tiklīdz tā tuvojas kaķēnam, tā ievelk galvu sevī, nedaudz uzkavējas šajā pozīcijā un pēc tam atgriež to vietā.
Pēdējais posms
Ražošana
No sava darba jāizveido gatavs produkts.
Dodieties uz izvēlni - Pievienot renderēšanas rindai
Tiek atvērts renderēšanas panelis un izvades modulī (divi klikšķi) atlasiet izvades formātu. Es paņēmu *.mov
12. attēls – Renderēšana
Noklikšķiniet uz pogas RENDER un iegūstiet rezultātu (neaizmirstiet norādīt ceļu).
Tas ir viss.
