Kā izveidot gif animāciju ilustratorā. Kā izveidot animāciju programmā Adobe Illustrator. Eksportējiet SWF failus no Illustrator
Šodien mums ir kaut kas neparasts Adobe nodarbība Ilustrators. Jo šoreiz taisīsim nevis statisku bildi, bet īstu animāciju. Iedomājies, izrādās ar izmantojot Adobe Illustrator var arī zīmēt karikatūras :)
Un tam mums vispār neko nevajag. Pareiza 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 pamācībā zīmēsim atpakaļskaitīšanas animāciju retro filmas stilā. Izvadei jābūt flash video ar tādu pašu atpakaļskaitīšanu.
Pirmā lieta, kas jums jādara, ir uzzīmēt visus nepieciešamos elementus turpmākajai animācijai. Lai to izdarītu, atsevišķā dokumentā izveidoju divas filmas kadra pozīcijas, apli atsaucei, kas ir sagriezts atsevišķos sektoros, faktūru un vertikālu skrāpējumu, lai pievienotu senatnes efektu, kā arī visus skaitļus un uzraksti.
Kad visas mūsu multfilmas daļas ir gatavas, varam sākt veidot pašu animāciju. Ērtības labad labāk to izdarīt jaunā dokumentā. Šajā gadījumā mūsu slāņi spēlēs animācijas kadru lomu. Un pašā pirmajā slānī jums vienkārši jākopē filmas kadrs. Novietojiet to darba zonas vidū.
Tagad izveidojiet otru slāni un nokopējiet tajā plēves rāmi, kurā caurumi gar malām ir izveidoti ar nobīdi. Tas arī jānovieto centrā.
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 filmas kadru slāņi, kas nosaka tās 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 gluži ērti darbam. Tāpēc dažus slāņus var izslēgt, noklikšķinot uz ikonas ar aci 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, varat precīzi redzēt, kas atrodas konkrētā mūsu nākotnes animācijas kadrā. Un tagad, lai mēs pievienotu nelielu nervozitāti filmas kustībai, mums ir nedaudz jāpārvieto iegūtie kadri dažādos virzienos. Lai to izdarītu, ieslēdziet tikai slāni, ar kuru strādāsit. Šis brīdis, un pēc tam pārvietojiet rāmi pāris pikseļus jebkurā virzienā.
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 dokumenta ar karikatūras daļām nokopējiet apli, kas sastāv no sektoriem, un novietojiet to uz pirmā slāņa filmas kadra augšpusē.
Ja noņemsiet loka atlasi, 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, jūs varat izveidot animāciju ļoti ātri un vienkārši, mainot to krāsu. Lai to izdarītu, kopējiet šo apli uz otro slāni un padariet pirmo sektoru gaišāku. Jūs atceraties, ka mūsu filma kustoties drebinās, tāpēc apli nav nepieciešams novietot precīzi kadra centrā. Novietojiet to ar aci.
Līdzīgā veidā jums ir jāiekopē aplis katrā nākamajā slānī, vienlaikus krāsojot vienu sektoru vairāk ar gaišāku krāsu nekā iepriekšējā reizē. Kopā šie 12 slāņi veido animāciju filmai, kas kustas 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 oriģinālā faila ar rezerves daļām.
Pēc tam pa vienam 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 ir diezgan apnicis kopēt, tad varu iepriecināt - palicis pavisam maz. Grūtākā daļa ir beigusies. Atliek tikai pievienot vertikālas skrāpējumus, un tas ir gandrīz viss. Lai to izdarītu, mēs atkal nokopējam oriģinālo skrāpējumu un ievietojam 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 filmu animāciju ir gatavs, atliek tikai saskaitīt skaitļus. Tā kā mūsu atpakaļskaitīšana ir no 3 līdz 1 plus vārds Go!!!, mums ir nepieciešams 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 sasniedzat nākamo slāņu eksemplāru, kur aplis atkal tiks 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 uzraksta Go!!! pēdējiem slāņiem, vienkārši izdzēsiet apli pirms uzraksta kopēšanas vēlamajā slānī.
Tas viss animācijai. Šeit galvenais ir neapjukt. Var dot slāņiem kādus ērtus nosaukumus, bet man bija tāds slinkums :) Un arī, pabeidzot darbu, 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.
Atvērsies 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 ciklisko animāciju. Pateicoties tam, video tiks atskaņots aplī. Un opcija Slāņu secība: no apakšas uz augšu atveido ilustratoru slāņus panelī no apakšas uz augšu. Tieši tā mēs veidojām savu animāciju.
Izvade ir flash video ar mūsu animāciju.
Tagad jūs redzat, ko var paveikt vienkārša animācija Adobe Illustrator nav tik grūti, kā šķiet no pirmā acu uzmetiena.
Bet lai izveidotu garus video vai interaktīvās lietojumprogrammas joprojām labāk izmantot Adobe Flash vai citi flash redaktori. Piemēram, es izgatavoju šo kaķi vecajā Macromedia Flash, ko es izraku savā darbā.
Turklāt 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.
Roman 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 apskatīts vienkāršākais SVG vektora animācijas piemērs, izmantojot vieglo spraudni Jquery Lazy Line Painter.
AvotsLai pabeigtu 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!
Un šīs ir darbības, kas mums jāveic:
1. Izveidojiet pareizo faila struktūru
Ar to mums palīdzēs Initializr pakalpojums, kur mums 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
- Chrome Frame
- Pēc tam noklikšķiniet uz Lejupielādēt!
2. Lejupielādējiet un pievienojiet spraudni
Tā kā inicializr ir iekļauta jaunākā Jquery bibliotēka, no arhīva, kas mums ir jālejupielādē no Lazy Line Painter projektu krātuves, mums ir jāpārsūta tikai 2 faili uz mūsu projektu. 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.
Mēs ievietojam šos 2 failus mapē js. Un mēs tos savienojam ar mūsu index.html pirms main.js šādi:
3. Uzzīmējiet foršu kontūru attēlu programmā Adobe Illustrator
Piemēram, varat izmantot pielikumā esošās ikonas.
4. Pārvērtiet mūsu attēlu uz Lazy Line Converter
Vienkārši velciet savu ikonu tālāk redzamajā attēlā redzamajā logā.
Pašā kodā var mainīt kontūras biezumu, krāsu un animācijas ātrumu, kas parādīsies pēc konvertēšanas!
5. Ielīmējiet iegūto kodu mapē main.js
Tagad mēs vienkārši ielīmējam 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ības (noklusējums 600)
6. Pievienojiet nedaudz CSS pēc garšas
Rindkopas noņemšana no index.html
Sveika pasaule! Šī ir HTML5 Boilerplate.
Un tā vietā ievietojam bloku, kurā notiks mūsu animācija
pēc tam main.css failam pievienojam CSS, lai tas izskatītos labāk:
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. startējot vietējā mašīna Animācijas sākums var aizkavēties vairākas sekundes.
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, ir nepieciešams neliels iegulto lapu izmērs grafiskie attēli, kas tiek panākts ar to optimizāciju. Ar attēla optimizāciju saprot tā konvertēšanu, nodrošinot minimālo faila izmēru, vienlaikus 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 parametrus atsevišķiem. attēlu fragmenti.
Programmā Illustrator ir iebūvēti attēlu optimizācijas rīki, kas optimizācijas procesu padara ātru un efektīvu, 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 veiksmīgi izvēlēties pareizos iestatījumus. Un jūs varat optimizēt gan attēlus, kas izveidoti tieši Illustrator, gan citus, piemēram, fotogrāfijas, kuras ir paredzēts ievietot tīmekļa vietnē.
Optimizācijas parametri tiek iestatīti logā Saglabāt tīmeklim, ko izsauc ar tāda paša nosaukuma komandu no izvēlnes Fails. Programma piedāvā izmantot vienu no četriem priekšskatījuma režīmiem, bet divi ir vislabāk piemēroti optimizācijas kvalitātes novērtēšanai:
- 2-Up (divas opcijas) vienlaicīga oriģinālā un optimizētā attēla apskate saskaņā ar norādītajiem iestatījumiem (1. att.);
- 4-Up (četras opcijas) Šajā režīmā skata logs 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, un pārējie divi ir pašreizējo optimizācijas iestatījumu varianti.
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 to sekojošo vizuālo salīdzināšanu. Turklāt ir iespējams novērtēt ne tikai optimizētā attēla kvalitāti, bet arī tā izmērus un ielādes laiku pie dažādām pieslēguma iespējām. Salīdzinājumam ērtākais režīms ir 4-Up (četras iespējas), kas ļauj vizuāli novērtēt kompresijas vai paletes samazināšanas ietekmi uz attēla kvalitāti un tā 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ā. JPG formāts tiek izmantots, lai saglabātu pilnkrāsu un pelēktoņu attēlus, fotogrāfijas un krāsainus grafikus, piemēram, gradientu aizpildījumus. Pilnkrāsu attēliem ar caurspīdīgiem laukumiem tiek izmantots PNG formāts, kas ļauj saglabāt gan indeksētos, gan pilnkrāsu attēlus, savukārt PNG-8 formātā maksimālais iespējamais optimizētā attēla krāsu skaits ir 256, un PNG-24 formātā attēlam var būt miljoniem krāsu, un tāpēc viņš izskatās JPEG formātā. Atšķirība starp PNG-24 un JPEG ir tāda, ka saspiešanas metode, ko izmanto attēlu optimizēšanai PNG-24 formātā, nezaudē kvalitāti, bet rezultātā palielinās faila lielums. SVG un SWF formāti apvieno grafiku, tekstu un interaktīvus komponentus, un tos var arī optimizēt.
Apsvērsim konkrēts piemērs attēla optimizācija. Pieņemsim, ka tīmekļa vietnes logotips tika izstrādāts programmā Illustrator (3. att.), kas sākotnēji tika saglabāts 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ā iegūtā uzraksta patieso stāvokli deformācijas rezultātā (4. un. 5).
Tāpēc mēģināsim eksportēt logo PSD formātā ar komandu File=>Export (File=>Export) izveidotā attēla izmērs būs 143 KB. Atveriet iegūto PSD failu un izmantojiet komandu File=>Save for Web. Ņemot vērā ierobežoto attēlā iesaistīto krāsu skaitu, šajā gadījumā optimālais ir GIF formāts, kura konkrētie iestatījumi ir jāizlemj. Eksperimentējot ar iestatījumiem, varat par to pārliecināties vislabākā kvalitāte dod programmas noklusējuma saspiešanas algoritmu Selective. Attiecībā uz izlīdzināšanu, ņ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 tiks saglabāta fona caurspīdīgums, par ko ir viegli pārliecināties, saglabājot attēlu GIF formātā kopā ar HTML failu (8. att.). Rezultātā šajā piemērā faili emblem.html un emblem.gif tika iegūti mapē Primer1.
Jebkuras Web lapas dizaina neaizstājams īpašs 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ā sieta objekti un/vai ar pārklājuma maskām, izskatās daudz iespaidīgāk nekā parastās.
Apsveriet iespēju programmā Illustrator izveidot apaļu, izliektu pogu. Uzzīmējiet vektora objektu apļa formā, kas piepildīts ar patvaļīgu krāsu (9. att.) un pārveidojiet to par sietu ar komandu Object => Create Gradient Mesh (Object => Create a gradient mesh), norādot četras rindas un četras kolonnas un sarakstā Izskats, atlasot opciju To Center Highlight, kas vienāda ar 60 (10. attēls). Izvēlieties Tiešās atlases rīku un noklikšķiniet objekta augšējā kreisajā stūrī, atlasot tur esošos enkura punktus (11. att.). Mainiet atbilstošās šūnas krāsu uz baltu, atlasot to Swatches paletē (12. att.).
Paņemiet Elipses rīku, novietojiet peles marķieri iepriekš izveidotā apļa centrā un, turot nospiestu taustiņus Alt un Shift, izstiepiet jauno apli virs vecā tā, lai tas būtu par 1-2 pikseļiem lielāks nekā vecais. puses. Piešķiriet tai melnu apmali (Stroke) 1-2 pikseļu platumā un aizpildiet to ar radiālu gradientu virzienā no sarkanas uz baltu (13. att.). 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 ārā konteksta izvēlne atlasiet Sakārtot=>Sūtīt atpakaļ. Rezultāts būs tukša poga, 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 kustības virzienu pa vietni. Apskatīsim vienkāršāko gadījumu, kad ir divas pogas, no kurām viena ar lejupvērsto bultiņu nozīmēs pāreju uz nākamo lapu, bet poga ar augšupvērsto bultiņu nozīmē pāreju uz iepriekšējo. Kā bultiņas veidni ņemsim parastu trīsstūri, kas zīmēts ar daudzstūra rīku, nokrāsots melnā krāsā un, lai iegūtu lielāku efektu, veidots arī kā sieta objekts. Pārvietojiet bultiņu uz pogu un pielāgojiet visu objektu novietojumu vienam pret otru, izmantojot atbilstošās pogas Align paletē. Pirmā no iegūtajām pogām ir parādīta attēlā. 15. Izveidosim slāņa kopiju ar pogu izvēloties komandu Duplicate Layer Layers, kā rezultātā iegūsim divus identiskus slāņus. Pēc tam atlasiet bultiņu uz slāņa kopijas un pagrieziet to par 180°, izvēloties komandu Transform=>Rotate Transformation=>Rotate no konteksta izvēlnes. Mēs iegūsim to pašu pogu, kā parādīts attēlā. 16. Ņemiet vērā, ka daudz ērtāk ir glabāt visas viena veida pogas vienam projektam vienā failā dažādos slāņos, kas tiek parādīts šajā gadījumā.
Tagad jums ir jāsaglabā katras pogas optimizētās versijas. Vispirms padariet apakšējo slāni neredzamu. Šajā gadījumā augšējā slāņa poga tiks saglabāta. Izvēlieties komandu File=>Save for Web, konfigurējiet pogas optimizācijas parametrus, piemēram, kā parādīts attēlā. 17, noklikšķiniet uz pogas Saglabāt un ievadiet faila nosaukumu. Galu galā saglabātā poga ir parādīta attēlā. 18. Tagad atgrieziet redzamību apakšējā slānī, padariet augšējo slāni 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, vai Web lapā pogas izskatās diezgan pieņemamas, un novietot tās pielāgotā lapā (20. att.). Rezultātā šajā piemērā attēlu mapē (mapē Primer2) tika iegūts fails Primer2.html un divi grafiskie attēli.
Ja vēlaties, optimizācijas procesa laikā pogu ir viegli pārvērst šķēlē. Šādā gadījumā pēc komandas File=>Save for Web (File=>Save for Web) atlasīšanas un optimizācijas parametru iestatīšanas rīku paletes jāizvēlas rīks Slice Select un jāveic dubultklikšķis uz attēla, kas galu galā tiks automātiski pārvēršas par šķēli ar kārtas numuru 1 (21. att.). Veicot dubultklikšķi vēlreiz, tiks atvērts logs Slice Options, kurā būs jānorāda saite un pēc izvēles jāmaina slāņa nosaukums (22. attēls), 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).
Viens veids, kā atdzīvināt lapu, ir ieviest dizaina elementus, kas to maina izskats(vai stāvoklis) atkarībā no peles uzvedības vai, retāk, citu situāciju gadījumā: mērogošana, ritināšana, ielāde, kļūdas utt.
Starp šādiem elementiem slavenākie ir rollovers (no angļu valodas roll over roll over, turn over) elementi, kas maina izskatu peles ietekmē. Tipisku apgāšanās veidu piemēri ir animētas pogas. Apgāšanās bieži tiek izmantota, veidojot citus vietnes navigācijas elementus. Reāli jebkurš apgāšanās ir nevis viens, bet vairāki (līdz četri) attēli, 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, nospiežot 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ē tie bieži aprobežojas ar elementa maiņu tikai pirmajos trīs vai pat divos notikumos.
Klasiskie rolloveriKlasiskā izpratnē apgāšanās ir grafisku attēlu sērija GIF formātā un atbilstošs HTML kods, pateicoties kuriem, atkarībā no peles uzvedības, viens attēls pārlūkprogrammas logā aizstāj citu.
Illustrator nav paredzēts tiešai apgāšanās veidošanai klasiskajā izpratnē, taču tas var palīdzēt tiem izstrādāt sākotnējos elementus. 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 daudzslāņu attēls tiek eksportēts uz PSD failu ar saglabātajiem slāņiem, uz kuru pamata programmā Image Ready tiek izveidots apgāšanās. Programmas Illustrator izmantošanas priekšrocība, tāpat kā daudzos citos gadījumos, ir vairākas tās interesantas funkcijas, kas nav pieejamas citās programmatūra, apvienojumā ar vektorgrafikas pārveidošanas ērtībām.
Mēģināsim izveidot apgāšanās veidu uzraksta veidā, kas maina krāsu atkarībā no peles uzvedības. Atveriet programmu Illustrator un izveidojiet formu noapaļota taisnstūra formā, kas piepildīta ar melnu krāsu (24. att.), izveidojiet tās kopiju un novietojiet to brīvā ekrāna daļā. Pārvērtiet pirmo taisnstūra kopiju par sieta objektu ar izcēlumu centrā (komanda Object=>Create Gradient Mesh Object=>Create Gradient Mesh), norādot četras rindas un desmit kolonnas (25. att.). Aktivizējiet otro taisnstūra kopiju un iestatiet to uz gradienta aizpildījumu, kā parādīts attēlā. 26. Pārklājiet gradienta objektu virs acs, samaziniet gradienta objekta necaurredzamību līdz aptuveni 80% un izmēru par aptuveni 1 pikseli, lai galu galā simulētu izciļņa efektu. Un tad uzdrukājiet uzrakstu virsū objektiem. Sākotnējā formā lai tam ir balta krāsa, kas atbildīs Normālajam 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 tiek virzīts virs tā (virs stāvoklis) un, nospiežot peles pogu, kļūst zils (stāvoklis lejup).
Pievērsiet uzmanību slāņu paletei, kurā šajā posmā ir tikai viens slānis. Izveidojiet divas šī slāņa kopijas, izmantojot komandu Duplicate Layer no Slāņu paletes izvēlnes, paletē būs trīs slāņi (28. att.). Tad pirmajā slāņa eksemplārā nomainiet uzraksta krāsu uz zaļu, bet otrajā eksemplārā 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 File=>Export un izvēloties RGB krāsu modeli (30. att.). Atveriet izveidoto PSD failu programmā ImageReady (31. un 32. att.). Izveidojiet rāmjus, pamatojoties uz slāņiem, Animācijas paletes izvēlnē atlasot komandu Izveidot rāmjus no slāņiem. Animācijas logs izskatīsies kā attēlā. 33. Šajā gadījumā paletē Rollovers sākotnēji tiks izveidots viens Normāls stāvoklis.
Pēc tam logā Animācija atlasiet inducētajam stāvoklim atbilstošu rāmi, un Layers paletē automātiski tiks atlasīts slānis Layer 1 Copy (34. att.). Dodieties uz Rollovers paleti un noklikšķiniet uz pogas Izveidot apgāšanās stāvokli (Izveidot apgāšanās stāvokli) att. 35, kas izraisīs Over State statusa parādīšanos Rollovers paletē (36. attēls). Izveidojiet Down State tādā pašā veidā. Apgāšanās paletē aktivizējiet normālo stāvokli un animācijas paletē izdzēsiet visus kadrus, izņemot to, kam jāatbilst parastajam stāvoklim. Rezultātā katram apgāšanās stāvoklim animācijas paletē būs tikai viens kadrs (37., 38. un 39. att.).
Rīsi. 38. Attēla skats, Animācijas logs un slāņu un apgāšanās paletes statusam Over State
Pārbaudiet rezultātu, rīkjoslā noklikšķinot uz pogas Priekšskatījums noklusējuma pārlūkprogrammā un atverot pārlūkprogrammas logu (40. attēls). Pēc tam saglabājiet failu, izmantojot komandu File=>Save Optimized un norādot opciju HTML un attēli (*.html). Rezultātā šajā piemērā attēlu mapē tika iegūts fails Primer4.html un grafisko attēlu sērija.
Rīsi. 40. Pārlūka logs ar Rollover elementu
SVG apgāšanāsAizvien populārākais SVG (Scalable Vector Graphics) formāts Vektorgrafika), kas izveidots, pamatojoties uz XML standartu, arī ļauj saņemt dažādus interaktīvus elementus, jo īpaši apgāšanās, taču praksē tas tiek īstenots pavisam citādi. Ir vērts atzīmēt, ka, lai izveidotu interaktīvus SVG rolloverus, atšķirībā no klasiskajiem, kad atbilstošais HTML kods tiek ģenerēts pilnīgi automātiski, ir nepieciešamas JavaScript valodas zināšanas un izpratne par objektorientētās programmēšanas pamatprincipiem.
Darbam ar SVG objektiem ir speciāla palete SVG Interactivity, kuru var ērti atvērt, izmantojot komandu Window => SVG Interactivity (Window => SVG interactivity) att. 41.
Apsvērsim šo opciju apgāšanās izveidei, izmantojot interaktīvas pogas piemēru, kuras uzraksta krāsa, virzot peles kursoru, mainīsies no melnas uz zilu un atkal pārveidosies par melnu, 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 caurspīdīguma paletē. Šajā piemērā Opacity vērtība ir iestatīta uz 50%. Izveidojiet pogas kopiju, aizpildiet to ar tumši zaļu krāsu (43. attēls) un pēc tam konvertējiet to par sieta objektu ar komandu Object => Create Gradient Mesh, norādot četras rindas un desmit kolonnas, un izskats sarakstā (View) atlasot opciju To Center un iestatot Highlight vērtību uz 100. Samaziniet slāņa necaurredzamību ar sieta objektu līdz aptuveni 40% (44. att.). Novietojiet sieta objektu virs gradienta, un poga būs līdzīga tai, kas parādīta attēlā. 45.
Rīsi. 44. Pārvērtiet pogas kopiju par sieta objektu
Aizpildiet pogu ar paredzēto uzrakstu un noregulējiet tās pozīciju, izmantojot atbilstošās pogas Align paletē. Iegūtais attēls saturēs vienu slāni ar trim objektiem, kas uzlikti viens uz otra (46. att.). Ieplānotie notikumi būs saistīti ar 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 Layer 1 uz Layer (47. att.).
Notikumu apstrāde ietver JavaScript procedūru izmantošanu, tāpēc jums ir jāiekļauj fails, kurā aprakstītas šīs procedūras. To sauc par Events.js, un instalēšanas laikā tas tiek saglabāts diskā mapē Sample Files\Sample Art\SVG\SVG Adobe programmas Ilustrators. Lai savienotu failu Events.js, izmantojiet komandu JavaScript Files SVG Interactivity (48. att.). Tālāk jums jānoklikšķina uz pogas Pievienot un jāatrod vajadzīgais fails cietajā diskā. Kad viņa vārds parādās URL laukā (49. attēls), noklikšķiniet uz pogas Gatavs.
Rīsi. 48. JavaScript failu komandas atlasīšana
Tālāk jums ir jādefinē atbilde uz peles notikumiem objektam Teksts. Atlasiet objektu Teksts, SVG interaktivitātes paletes laukā Event atlasiet notikumu onmouseover elemColor(evt, "Teksts", "#3333FF"), tas nozīmēs, ka, kad pele atrodas virs teksta objekta, tā krāsa mainīsies uz zils (50. att.). Lai teksta krāsa mainītos uz melnu pēc tam, kad pele atstāj aktīvo apgabalu, jums būs jāizveido vēl viens onmouseout notikums, atlasiet to SVG interaktivitātes paletes laukā Event. Pēc tam darbības rindā ievadiet tekstu elemColor(evt, "Teksts", "#000000"), tas atgriezīs krāsu uz melnu (51. attēls).
Rīsi. 51. SVG interaktivitātes paletes galīgais izskats objektam Text
Saglabājiet izveidoto rollover kā SVG failu ar komandu File=>Save as (File=>File type SVG format, un pēc tam iestatiet SVG faila saglabāšanas opcijas, kā parādīts 52. att. Pēc saglabāšanas saņemsiet tikai vienu viens fails ar paplašinājumu SVG, nevis divi, kā klasiskā apgāšanās gadījumā, šajā gadījumā tika saņemts fails Primer5.svg (Primer5 mape) Taču, lai rollover tiešām darbotos, papildus jākopē Events.js failu no JavaScript procedūru apraksta Pēc tam varat pārbaudīt apgāšanās funkcionalitāti, rezultāts izskatīsies kā parādīts 53. attēlā.
SVG formātu var izmantot arī animācijas pārraidīšanai. Mēģināsim izveidot vienkāršu animētu elementu (šajā gadījumā tā būs informācija par uzņēmumu), kas parādīsies ekrānā, novietojot peles kursoru virs atbilstošā grafiskā objekta, un pazudīs, kad noņemsit peli no interaktīvā elementa.
Izveidosim aptuveni šādu grafisko un teksta objektu sēriju, kā parādīts attēlā. 54. Pārdēvēsim visus izveidotos objektus ērtā veidā, secīgi noklikšķinot uz nākamā objekta nosaukuma Slāņu paletē un ievadot vēlamais vārds(55. att.). Lūdzu, ņemiet vērā, ka tie, kas izcelti attēlā. 56 objekti Teksts1, Teksts2, Teksts3 un Ceļš1 vienmēr būs redzami, bet visi pārējie tikai tad, kad virzīsiet peles kursoru virs objekta Teksts1.
Rīsi. 54. Attēla oriģinālais skats
Iekļaujiet failu Events.js, kurā aprakstītas JavaScript procedūras, izmantojot komandu JavaScript faili no SVG interaktivitātes paletes, noklikšķinot uz pogas Pievienot, norādot uz vajadzīgo failu cietajā diskā un noklikšķinot uz pogas Gatavs.
Definējiet atbildi uz peles notikumiem objektam Text1. Atlasiet objektu Teksts, SVG interaktivitātes paletes laukā Event atlasiet notikumu onmouseover un zemāk esošajā rindā ievadiet tekstu elemShow(evt, "Text4"); elemShow(evt, "Path2") . Rezultātā, kad pele atrodas virs objekta Text1, būs redzami objekti Text4 un Path2. Lūdzu, ņemiet vērā, ka, ja notikuma laikā ir jāveic vairākas darbības, tās jānorāda, izmantojot zīmi “;”. Pēc tam veiciet līdzīgu darbību notikumam onmouseout, ievadot tam tekstu, kas nozīmēs objektu slēpšanu (57. att.).
Saglabājiet rezultātu kā SVG failu, izmantojot komandu File=>Save as, norādot faila nosaukumu, laukā File type atlasot SVG formātu un pēc tam iestatot SVG faila saglabāšanas opcijas saskaņā ar att. 58. Pēc saglabāšanas tiks saņemts fails Primer6.svg (mape Primer6). Neaizmirstiet kopēt failu Events.js mapē ar šo failu. Ja pēc tam jūs palaist coz šo failu, tad 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 nebija iekļauts mūsu plānos, bija 4. teksta un 2. ceļa objektu sākotnējais izskats pēc ielādes. Lai atbrīvotos no šī trūkuma, atlasiet abus objektu datus vienlaikus un izveidojiet tiem darbību elemHide(evt, "Teksts4"); elemHide(evt, "Path2") ielādes notikumā (60. att.). Saglabājiet failu vēlreiz un pārliecinieties, vai Text4 un Path2 objekti tagad ir redzami tikai tad, kad virzāt kursoru virs objekta Text1.
Jebkura Web lapa nav iedomājama bez tīmekļa animācijas, ieskaitot animētus gifus. Viena no to izveides iespējām ir Adobe ImageReady lietojumprogrammas izmantošana, kas cita starpā ļauj izveidot animāciju no slāņiem. Šajā gadījumā 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 Symbols paletes, kas atvērta ar komandu Window=>Symbols, vai no kādas no simbolu bibliotēkām, kuru var atvērt, izmantojot komandu Window=>Symbol Libraries. ).
Piemēram, mēs mēģināsim palielināt jebkura simbola objekta izmēru; objekta palielināšanas procesa galvenie posmi ir jāiestata atsevišķos slāņos. 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ā Slāņu paletē tiks izveidots viens slānis ar daudziem objektiem (62. att.). Ja šo attēlu tieši eksportēsit uz PSD formātu, tas neko nedos, jo ir tikai viens slānis, un, protams, atverot PSD failu programmā ImageReady, arī būs 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 slāņu paletē atlasīt 1. slāni un izmantot komandu Release to Layer. Rezultāts būs tāds, ka katrs objekts tiks pārvietots uz savu slāni, bet tie visi tiks ligzdoti 1. slānī. Tāpēc pēc tam jums būs manuāli jāvelk visi ligzdotie slāņi uz slāņu paletes augšdaļu, lai tie atrastos virs 1. slāņa, un pēc tam vienkārši jāizdzēš tagad tukšais slānis 1 (63. attēls). Eksportējiet attēlu PSD formātā, izmantojot komandu File=>Export ar iestatījumiem, kā parādīts attēlā. 64.
Ielādējiet izveidoto PSD failu programmā ImageReady (65. un 66. att.). Atveriet paletes izvēlni Animation Make Frames from Layers. Rezultātā tiks izveidoti pieci kadri, no kuriem katrs atbildīs savam slānim, un Animācijas paletes logs izskatīsies kā attēlā. 67.
Pēc tam šajā gadījumā iestatiet katra izveidotā kadra ilgumu, visu kadru ilgums ir iestatīts uz 0,2 s. Un pēc tam saglabājiet animāciju ar optimizāciju, izmantojot komandu File=>Save Optimized (Fails=>Saglabāt ar optimizāciju). Iegūtais rezultāts var līdzināties Fig. 68.
Vēl ērtāk ir iegūt sagataves, kuras pēc tam var viegli pārveidot par animāciju programmā ImageReady, lai izmantotu Illustrator Live Blends funkcijas. Šī 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 savienojiet tos ar sajaukšanas saiti ar atbilstošiem parametriem (69. att.). Nav iespējams tieši izmantot šo failu, lai izveidotu animāciju, jo attēls atrodas vienā slānī (70. att.). Tāpēc vispirms katrs sajaukšanas objekta elements būs jānovieto atsevišķā slānī. Lai to izdarītu, logā Layers atlasiet līniju, aktivizējiet paletes izvēlni, noklikšķinot uz melnās bultiņas tās augšējā labajā stūrī, un atlasiet komandu Release to Layers Sequence (71. att.). Turiet nospiestu taustiņu Shift, atlasiet izveidotos slāņus un novietojiet tos virs 1. slāņa un pēc tam izdzēsiet pašu slāni 1, pārvietojot to uz miskasti, slāņu palete iegūs tādu pašu formu kā attēlā. 72.
Rīsi. 70. Sākotnējais stāvoklis Slāņu logi
Eksportējiet izveidoto failu PSD formātā, izmantojot komandu File=>Export. Atveriet izveidoto PSD failu programmā ImageReady (73. att.). Lūdzu, ņemiet vērā, ka visi Illustrator izveidotie slāņi parādīsies slāņu logā (74. att.), un Animācijas logā pagaidām būs tikai viens rāmis.
Aktivizējiet Animācijas paletes izvēlni, noklikšķinot uz melnās bultiņas paletes augšējā labajā stūrī un atlasiet komandu Make Frames From Layers Rezultātā šajā piemērā tiks izveidoti pieci kadri, un Animācijas paletes logs aizņems forma saskaņā ar att. 75. Atlasiet visus kadrus, turot nospiestu taustiņu Shift un iestatiet atbilstošo kadra ilgumu šajā piemērā, katram kadram tiek ņemts vienāds laiks 0,2 s. Pēc tam saglabājiet failu ar optimizāciju, izmantojot komandu File=>Save Optimized (File=>Save with optimization), iestatot opciju Images Only (*.gif) sarakstā File type. Animācija atgādinās att. 76.
Daudz interesantāk izskatās nevis kustība, bet gan vienmērīga sajaukto objektu izmēru maiņa. Piemēram, varat izmantot jau izveidoto sajaukšanas pāreju. Šādā gadījumā pēc atsevišķu slāņu izveidošanas katram sajaukšanas pārejas elementam novietojiet visus objektus vienu virs otra, izmantojot Align paletes pogas Horizontal Align Center un Vertical Align Center (77. att.) .
Eksportējiet izveidoto failu PSD formātā (File=>Export File=>Export) un atveriet izveidoto PSD failu programmā ImageReady (78. att.). Izveidojiet animācijas kadrus, pamatojoties uz slāņiem (Make Frames From Layers Create frames from layers) un izvēlieties tiem piemērotu 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ēto failu=>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 izveidots šā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 lielums. Fakts ir tāds, ka pēc noklusējuma visa lapa ir iekļauta optimizācijas logā, un tas parasti nav nepieciešams. Tāpēc cilnē Attēla lielums noņemiet atzīmi no izvēles rūtiņas Clip to Artboard 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 un tiek parādītas kā krāsaini kvadrāti. Loga kreisajā pusē esošajā rīkjoslā atlasiet rīku Eyedropper.
Ir divi veidi, kā noteikt krāsas. Vienkāršākais veids ir norādīt krāsu ar pilinātāju tieši uz attēla – pēc tam krāsa krāsu tabulā tiks izcelta ar tumšu triepienu. Ja precīzi zināt, kādai krāsai jābūt caurspīdīgai, varat to atlasīt tieši krāsu tabulā, noklikšķinot uz atbilstošā krāsainā kvadrāta. Gan pirmajā, gan otrajā gadījumā, ja jāizvēlas vairākas krāsas, 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 līdz caurspīdīgai. 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. Tas ir atbildīgs par nolaižamo izvēlni Norādīt caurspīdīguma dither algoritmu, krievu valodā - algoritms caurspīdīguma simulēšanai (Zīm. zemāk). Ir četras izvēles iespējas: bez caurspīdīguma, izkliedēšanas caurspīdīguma, modeļa caurspīdīguma un trokšņa caurspīdīguma. Izkliedētā algoritma režīmā kļūst aktīvs slīdnis Daudzums, 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 to uz noklusējuma vērtību - No Transparency Dither.
Noklikšķiniet uz Saglabāt — caurspīdīgais GIF ir gatavs. Darbs tika veikts Adobe Illustrator versijā CS4 (v.14), taču visas darbības un īsinājumtaustiņi attiecas arī uz iepriekšējo versiju CS3 (v. 13).
Importēt un vienkārša animācija Sveiki. Šodien mēs aplūkojam vienkāršu animāciju programmā After Effects.
Resursi: Adobe Illustrator CC
Adobe After Effects CC
Sāksim mācīties, zīmējot programmā Illustrator.
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:
- izdzēsiet 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ē apli; 2) gradients; 3) dzēst punktu
3) Uzzīmējiet taisnstūri un izveidojiet tā kopiju
- viens pelēks taisnstūris;
- cits taisnstūris ir tumši pelēks
4) Uzzīmējiet trīsstūri no zvaigznītes, iestatot staru skaitu uz 3
3. attēls - 1) taisna gaisma; 2) taisni tumšs; 3) trīsstūris
5) Uzzīmējiet kaķi, izmantojot pildspalvu un vienkāršas formas 
4. attēls - 1) galva; 2) kakls; 3) ķermenis; 4) kāja; 5) aste
Un tagad pats SVARĪGĀKAIS brīdis
Sadalīsim attēlus slāņos (kas tiks animēts, atrodas atsevišķā slānī) šādi: 
5. attēls — visi attēli (sarkanā krāsā atzīmēti svarīgie slāņi)
Tas arī viss, tagad ietaupīsim.
Apskatīsim saglabāšanas iestatījumus
6. attēls - Saglabāt
Un tagad nākamais posms. Aizveriet programmu Adobe Illustrator un atveriet programmu After Effects.
Importēt programmā After Effects
Fails — Importēt — Fails — atlasiet mūsu saglabāto Illustrator failu.
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
Tas arī viss, importēts.
Tagad paskatīsimies, kas mums ir. Veiciet dubultklikšķi uz kompozīcijas, lai tā atvērtos un mēs redzētu slāņus (ja viss ir izdarīts pareizi, būs vairāki slāņi). Mēs to saņemam, skatiet attēlu
8. attēls — atvērtā kompozīcija
Un tagad tas, ko mēs šodien esam šeit, ir animācija.
Animācija programmā After Effects
Iestatiet rotācijas punktu bultiņas augšpusē, izmantojot Pan Behind rīku (saīsne — Y). Mēs vienkārši paņemam punktu un pārvietojam to, kur nepieciešams. 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 būs nepieciešams slānis Arrow un Head_cat.
Sāksim ar bultiņu.
Izvērsīsim sarakstu, atrodam to un noklikšķiniet uz pulksteņa. Tātad mēs uzstādījām pirmo punktu uz nulles sekundi. Animācija kopumā 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ērsīsim head_cat un atrodam pozīciju .
Šeit būs 4 punkti.
Tiks mainīta tikai pēdējā koordināte, neietekmējot pārējās.
| Otrkārt | 0.1 | 0.17 | 1.12 | 2.0 |
| Pozīcija | 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, kādu laiku uzkavējas šajā stāvoklī un pēc tam atgriež vietā.
Pēdējais posms
Ražošana
No sava darba jāizveido gatavs produkts.
Atveriet izvēlni — Pievienot renderēšanas rindai
Atvērsies Render panelis un izvades modulī (divi klikšķi) atlasiet izvades formātu. Es paņēmu *.mov
12. attēls - Render
Noklikšķiniet uz pogas RENDER un iegūstiet rezultātu (tikai neaizmirstiet norādīt ceļu).
Tas ir viss.
