Kā izveidot animācijas ilustratoru un sprites. Izveidojot animācijas ilustratorā

Sveiki visiem! Šodien es centīšos veikt programmas funkciju aprakstu Adobe Illustrator, salīdzinot to ar Flash funkcijām. Tas nebūs globāla noslēgšana kaulu programmā, bet gan aprakstu dažu interesantu čipsi, ko es atklāju par sevi šajā programmā. Informācija tika apkopota gabalos kā mācīšanās izlikt visu vienā amatā. Tūlīt es atzīstu, ka es neesmu super-pieredzējis ilustratora lietotājs, tikai pēdējos sešus mēnešus es to izmantoju zīmējumā (pirms ka viss ir sastādīts jūsu zibspuldzē). Daudzi pārliecinieties, ka ilustrators ir sarežģīts, ne vienmēr saprotams. Zināmā mērā es piekrītu, ka pēc zibspuldzes šī programma ir sarežģīta. Bet tad galvenais nav atmest, bet, lai turpinātu mācīšanos. Un pēc pāris nedēļām parādās doma, kā es to darīju bez tā!

Tātad, kas man patika ilustratorā, un es atklāju sev, kas nav zibspuldzē.
1. Es sākšu ar visvienkāršākajiem, bet tajā pašā laikā jums ir nepieciešams. Mēģiniet novietot objektus apli. Agrāk bija Deco rīks. Bet tas tika noņemts, acīmredzot, skaitīts nevajadzīgs. Viņi nolēma, ka rokturi to ir jautri. Ilustratorā šī funkcija ir: Effect - izkropļot un pārveidot - pārveidot.

Visi ātri un vienkārši, vērtības (attālums starp objektiem, kopiju skaits) Norādiet iestatījumus pats.

2. Zig-zag

Vēl ir vienkāršāks, bet tomēr noderīga lieta. Šķiet, ka tievs, bet flush jums ir nepieciešams izdarīt manuāli, jo ilustratorā šī ir otrā lieta.

3. Objektu deformācija (deformācija)

Nav nekas tāds, ka zibspuldzē. Piemēram, es parādīju tikai divus vienkāršu veidlapu deformācijas veidus (efekts - šķēri - loka / zivs). Faktiski, viņu 15 jaunākā versija Programmas.

4. Automātiska noapaļošana stūriem (apaļie stūri)

Jūs varat manuāli darīt: uz grafiskā objekta izolācijas laikā stūrī (visās dziedzerī) ir balts punkts un federālā līnijas zīme. Es velciet peli, pielāgojiet savu garšu.

Bet tas attiecas tikai uz formām, ar zīmuļu līniju nedaudz atšķirīgi - piemērot noapaļošanas ietekmi ( Effect - Stilize - Apaļie stūri). Pie izejas mēs saņemam tādu pašu spēku.

5. Roughen (eļļa)

Ietekme attiecas uz K. vienkāršas formas (Effect - izkropļot un pārveidot - rupjš). Pēc kontaktligzdas mēs iegūstam kaut ko, kas atgādina zemu polyboral 3D modeļus. Manuprāt, atdzesē :) un vissvarīgākais - ļoti vienkārši.

6. Pucker & uzpūst (Vilkšana un piepūšana)
Piemērs attēlā zemāk:

7. Forma paplašināšana (kompensācijas ceļš)

Flash ir paplašināt aizpildīt funkciju (paplašinot aizpildījumu), ar zīmuļu līnijām nedarbojas vispār, atšķirībā ilustrator.

8. Birstes (mākslas suka, rakstu suka, izkliedes suka)
Mēs skatāmies uz zemāk attēlu ar piemēriem:

9.Tekstūra suka (tekstūras birstes)

Arī ilustratorā ir daudz teksturētu birstes, ko es rakstīju, un kā viņi parādījās jauna versija Zibspuldzi. Tika novērots, ka izmantošana sukas Adobe animen ir biedējošas inhibes. Tieši tā:(

10. Nav pārliecināts, ka tas ir taisns triks, bet es gribu palikt pie pušķis ar smieklīgu vārdu LāseSuka.. Atrodas rīkjoslā, ļoti patīkami izmantot suku. Viņam ir ķekars iestatījumus, man patīk vairāk nekā parasti. Pēc vārdiem, ir grūti izskaidrot par tās priekšrocībām, labāk ir mēģināt vienu reizi.

10.Split uz režģi.

Arī noderīga lieta - sadalījums uz režģa funkciju (objekta ceļa sadalījums uz režģi). Vietējie iedzīvotāji samazina formu uz vienādiem segmentiem. Ko tas mums atgādina? Tiesības - logi augstceltnē. Kas attiecas uz mani, vēss gabals, piemēram, pilsētu ainavas;)

Īpaši viens noderīgs rīks, kas parādīts ilustratorā, iespējams, kopš tās pirmās izlaišanas. Ar to jūs varat izveidot, piemēram, koka tekstūru:

12. Pārvietot (pa labi - pārveidot - pārvietot)

Ofseta objekts ir iepriekš noteikta attāluma. Ja vēlaties, varat nekavējoties izveidot kopiju, kas tiks novietota vēlamajā attālumā no izvēlētā horizontālā objekta / vai vertikālā objekta. Jo agrākā versijā Flash bija spraudnis, kas tika veikts Šī funkcija. Diemžēl es neatceros savu vārdu.

Ilustratorā ir ļoti ērti izveidot bezšuvju modeļus ( Objekta modelis). Es atceros, kā es esmu izmisīgi sarežģīts zibspuldzē ar radīšanu. SS 2015 Illustr, viss ir automatizēts, daudz iestatījumu palīdzēs neredzam desmitiem variāciju modeļus, kam ir tikai vairāki grafiskie elementi. Iepriekšējās programmas versijās ikvienam bija jādara manuāli, kā tas ir tik tālu.

(Piezīme - modelis var veikt ar vektoru rediģējamu objektu, izmantojot funkciju, lai izjauktu ( Objekts - paplašināt parādību).

14. Objekta mozaīka (mozaīka)

Izveidojot krāsu paleti, pamatojoties uz pieejamo attēlu. Importējiet savu iecienītāko attēlu slims (atvērts), tad Objekts - izveidot objektu mozaīkas. Iestatījumos norādiet augstuma frekvenci augstumā un platumā.

Un mēs nokļūsim pie izejas:

15.Blend (sajaukšana)

Izmanto, lai izveidotu gradientus. Jūs varat izveidot soli pa solim pārejām, piemēram, attēlā. Es nesaku, ka es to bieži izmantoju, bet var noderēt kādam. Man šķiet, ka jūs varat izmantot vienkāršu fona attēlu izveidē.

Arī rīku var izmantot, lai klonētu objektus. Mēs izvietojam divus objektus attālumā no viena otras un lietojiet maisījumu opcijas, izvēlieties soļu skaitu (klonēto objektu skaitu).

16. Būvēšanas formas rīks. Ļoti ērta lieta strādāt ar primitīviem. Flash, kā tas man šķita mazāk ērts.

Noklikšķinot uz ALAT un noklikšķiniet uz īpašiem segmentiem - Dzēst segmentus. Ja jūs vienkārši stiept peli vairākās īpašās jomās - savienojumu.

Papildinājums - rīks, kas palīdz automātiski nogriezt, savienot utt. Izvēlētās formas. Kas attiecas uz mani, tas nav ļoti ērts, es biežāk izmantoju BūvētFormaRīks.

(montāžas vietas)

18.Custom rīku panelis.

Spēja izveidot savu rīkjoslu pati, throwing nevajadzīgu, un izvēlēties tikai tos, kurus jūs izmantojat.

Flush, montāžas zonās, proti, ainas ( Aina 1,2,3 ..) Atrodas atsevišķi un starp tiem, jums ir nepieciešams pārslēgties (Shift + F2). Ilustratorā tos var ievietot viņu acu priekšā. Ērti, kad veicat vairākas iespējas par to pašu attēlu, lai visas iespējas salīdzinātu mūsu acis salīdzināšanai.

19. Izometriskais ar grafiskiem stiliem

Un pēdējais ir izveide izometriska, neizmantojot 1 klikšķi (un precīzāk, 3 klikšķos, jo mums ir 3 puses;) ar grafiskiem stiliem ( Grafiskie stili.). Kā tas tiek darīts, es rakstīšu nākamo reizi.

Kopumā ar ilustratora zibspuldzi - spēja saglabāt objektu simbolam (simbols), kā arī bez jebkādām problēmām var pārsūtīt uz zibspuldzi (atvērts Flash.A failā Imports - imports uz skatuves).
Ilustratora rakstzīmei ir tādas pašas īpašības kā zibspuldzē.
Un beigās es rakstīšu, ka ilustratorā, manuprāt, ir zemāka par zibspuldzi. Jā, jā, un tas ir. Un tas ir aizpildīšanas rīks ( Krāsas spainis.). Tā kā es nemēģinu pierast pie viņas Ille, tas ir ērtāks.
Ja manas piezīmes ir kļuvušas noderīgas jums vai ko jūs vēlaties no sevis papildināt - Velkov komentāros! Labu veiksmi visiem;)

Nesen SVG animācijas (mērogojamās vektorgrafika) grafika vietnēs un lietojumprogrammās ir kļuvis ļoti populārs. Tas ir saistīts ar to, ka viss jaunas pārlūkprogrammas Jau atbalsta šo formātu. Šeit ir informācija par SVG pārlūkprogrammu atbalstīšanu.

Šis raksts apspriež vienkāršākais piemērs animācija SVG. vektori gaismas palīdzība JQuery spraudnis Slinks līnijas gleznotājs.

Avota kods

Lai izpildītu un pilnīgu izpratni par šo uzdevumu, pamatzināšanas par HTML, CSS, jquery, bet ne vienmēr, ja jūs vienkārši vēlaties, lai animētu SVG) Ejam uz augšu!

Un tā soļi, kas mums ir nepieciešams, lai veiktu:

Izveidojiet pareizo failu struktūru
Lejupielādējiet un savienojiet spraudni
Zīmējiet vēsu kontūru attēlu Adobe Illustrator
Konvertējiet mūsu attēlu Lazy Line Converter
Ievietojiet iegūto kodu Main.js
Pievienojiet dažas CSS pēc garšas

1. Izveidojiet pareizo failu struktūru
Ar to tas palīdzēs inicializator pakalpojumam, kur jums ir nepieciešams izvēlēties parametrus kā zemāk redzamajā attēlā.

Klasisks H5BP (HTML5 katlu plāksne)
Nav veidnes.
Tikai html5 shiv.
Izcelts
Ti, kastes.
Hroma rāmis.
Pēc tam noklikšķiniet uz Lejupielādēt to!

2. Lejupielādējiet un savienojiet spraudni

Tā kā inicializr nāk ar jaunāko jquery bibliotēku, no arhīva, kas mums ir nepieciešams, lai lejupielādētu no slinks līnijas gleznotāja projekta repozitorija, jums ir nepieciešams, lai pārsūtītu tikai 2 failus mūsu projektam. Pirmais ir "jQuery.LazylinePainter-1.1.min.js" (plug-in versija var atšķirties), tas ir saknes no rezultātā mapes. Otrais ir piemērs / js / pārdevējs / raphael-min.js.

Šie 2 faili tiek ievietoti JS mapē. Un savienojiet tos ar mūsu index.html priekšā galvenā.js šādi:

3. Zīmējiet stāvu kontūru attēlu Adobe Illustrator

Mēs zīmējam mūsu kontūru attēlu Illustrator (vienkāršākais veids, kā to darīt ar pildspalva rīku)
Tas ir nepieciešams, ka kontūras mūsu zīmēšanas nav tuvu TC mūsu efektu. Sākums un beigas
Nedrīkst aizpildīt
Maksimālais faila izmērs - 1000 × 1000 px, 40KB
Apstrāde objektu objektam\u003e Artboards\u003e Fit Actboard Bounds
Saglabāt SVG formātā (standarta saglabāšanas iestatījumi ir piemēroti)

Piemēram, jūs varat izmantot ikonas pielikumā.

4. Pārvērst mūsu attēlu Lazy Line Converter
Vienkārši velciet savu ikonu logā, kas atrodas zemāk redzamajā attēlā.
Biezs, ķēdes krāsa un animācijas ātrums var tikt mainīts pašā kodā, kas parādīsies pēc konvertēšanas!

5. Ievietojiet iegūto kodu Main.js
Tagad vienkārši ievietojiet saņemto kodu tukšajā Main.js failā
Parametri:
Strokewidth - kontūras biezums
Strokecolor - kontūru krāsa
Varat arī mainīt katra vektora zīmēšanas ātrumu, mainot ilguma parametra vērtības (noklusējums 600)

6. Pievienojiet dažus CSS pēc garšas
Noņemt no index.html punkta

Sveika pasaule! Tas ir HTML5 boilermate.

Un tā vietā ievietojiet bloku, kurā notiks mūsu animācija

pēc tam pievienojiet dažus CSS uz Main.CSS failu, lai iegūtu patīkamu dizainu:

Ķermenis (fons: # f3b71c;) #icons (stāvoklis: fiksēts; augšējais: 50%; pa kreisi: 50%; rezerve: -300px 0 0 -400px;)

saglabājiet visus failus.
Tagad vienkārši atveriet index.html mūsdienu pārlūkprogrammā un baudiet efektu.

P.S. Sākot vietējā mašīnā, sākums animācijas sākas dažas sekundes, ir iespējams.

Web grafikas optimizācija

Grafiskais informācija tiek pārraidīta daudz lēnāk nekā teksts, un attēla ielādes laiks ir proporcionāls to grafisko failu lielumam. tāpēc Ātra lejupielāde Tīmekļa lapas ietver nelielu izmēru grafiskos attēlus, kas ir iekļauti tiem, kas tiek sasniegti, izmantojot to optimizāciju. Attēla optimizācijā to saprot tās pārveide, kas nodrošina minimālo faila lielumu, vienlaikus saglabājot nepieciešamo Šis gadījums Attēla kvalitāte, kas tiek panākta galvenokārt, samazinot krāsu skaitu grafiskajos attēlos, saspiestu un īpašu failu formātu izmantošana un kompresijas parametru optimizēšana atsevišķiem attēla fragmentiem.

Illustrator ir iebūvēti attēla optimizācijas rīki, kas nodrošina dažādas priekšskatījuma metodes, lai ātri un efektīvi īstenotu optimizācijas procesu. Priekšskatījums Tas dod diezgan precīzu priekšstatu par to, kā optimizētais attēls izskatīsies reālā laikā, kas palīdz novērtēt optimizācijas rezultātu un veiksmīgi izvēlēties vajadzīgos iestatījumus. Un jūs varat optimizēt abus attēlus, kas izveidoti tieši ilustratora programmā un citos attēlos, piemēram, fotogrāfijas, kas ir paredzēts, lai to ievietotu tīmekļa vietnē.

Optimizācijas iespējas ir iestatītas logā Saglabāt Web. (Taupīšana tīmeklī), ko izraisa komandu uz izvēlni Fails (Fails). Programma ierosina izmantot vienu no četriem priekšskatījuma režīmiem, bet, lai novērtētu optimizācijas kvalitāti labākais veids Divi ir piemēroti:

2-up. (divas iespējas) - sākotnējā un optimizētā attēla vienlaicīga skatīšana saskaņā ar norādītajiem iestatījumiem (1. att.);
4-up. (Četras iespējas) - šajā režīmā skata logete ir sadalīta četros logos (2. att.) Lai parādītu sākotnējo attēlu un trīs optimizētās versijas: pirmā versija ir izveidota, pamatojoties uz instalētajām optimizācijas vērtībām, un pārējie divi ir Iespējas pašreizējiem optimizācijas iestatījumiem.

Abi režīmi ļauj ievērojami ietaupīt laiku, lai atrastu labāku optimizācijas iespēju, kā jūs saglabājat no nepieciešamās, lai saglabātu attēlus no dažādi iestatījumi Optimizācija un to turpmākais vizuālais salīdzinājums. Turklāt ir iespējams novērtēt ne tikai optimizētā attēla kvalitāti, bet arī tā lielumu un sāknēšanas laiku ar dažādām savienojamības iespējām. Salīdzinājumam 4-up režīms ir ērtākais (četras iespējas), kas ļauj vizuāli novērtēt saspiešanas efektu vai samazināt paleti uz attēla kvalitāti un tās lielumu un galu galā noteikt labākos optimizācijas parametrus.

Ilustrator ļauj optimizēt tīmekļa grafiku formātos ne tikai GIF, JPG, PNG-8 un PNG-24, bet arī SWF un SVG. Indeksēti attēli neliels daudzums Krāsas tiek saglabātas GIF formātā. Lai saglabātu pilna krāsu un pustoņu attēlus - fotogrāfijas un krāsu piesātinātas grafikus, piemēram, gradienta aizpildījumu, tiek izmantots, tiek izmantots jpg formāts. Pilna krāsu attēliem ar pārredzamām vietām pNG formātskas ļauj saglabāt gan indeksētos, gan pilna krāsu attēlus, bet PNG-8 formātā maksimālais iespējamais krāsu krāsu skaits ir 256, un PNG-24 formātā attēlam var būt miljoniem krāsu, un Tāpēc izskatās jPEG formāts. Atšķirība starp PNG-24 no JPEG ir tā, ka kompresijas metode tiek izmantota, lai optimizētu attēlus PNG-24 formātā, nerada kvalitātes zudumu, bet kā rezultātā faila lielums pieaug. SVG un SWF formāti apvieno grafiskos datus, tekstu un interaktīvos komponentus un var arī optimizēt.

Apsveriet konkrētu attēlu optimizācijas piemēru. Pieņemsim, ka ilustratora programma ir izstrādājusi tīmekļa vietnes emblēmu (3. att.), Sākotnēji saglabāts AI formātā. Mēģinājums nekavējoties optimizēt to tīmeklī, tas neradīs neko labu, jo šajā gadījumā būs automātiska attēla apgraizīšana, kurā netiks ņemta vērā patiesā nostāja, kas iegūta uzraksta deformācijas rezultātā () 4. un 5. att.).

Tāpēc mēģināsim eksportēt emblēmu pSD formāts Komanda File \u003d\u003e Eksports (File \u003d\u003e Eksports) - Izveidotās attēla lielums būs 143 KB. Atveriet iegūto PSD failu un izmantojiet komandu File \u003d\u003e Saglabāt tīmeklī (File \u003d\u003e Saglabāšana tīmeklī). Ņemot vērā ierobežoto attēlu skaitu, kas iesaistītas attēlā šajā gadījumā, GIF formāts ir optimāls, ar konkrētiem iestatījumiem, no kuriem un jums ir nepieciešams izlemt. Eksperimentējot ar iestatījumiem, jūs varat pārliecināties, ka vislabākā kvalitāte sniedz izvēlēto kompresijas algoritmu izvēlēto noklusējuma programmu Selektīvs (Selektīvs). Attiecībā uz izlīdzināšanu, ņemot vērā gradienta aizpildījuma klātbūtni, labāk izvēlēties algoritmu ar trokšņa paaudzi - Troksnis. (6. att.). No iegūtā faila optimizācijas lielums būs 6,729 kB (7. att), bet fona pārredzamība tiks saglabāta, kas ir viegli pārliecināties, lai saglabātu attēlu GIF formātā kopā ar HTML failu (8. att.). Tā rezultātā, šajā piemērā, emblem.html un emblem.gif faili tika saņemti Primer1 mapē.

Pogas

Jebkuru tīmekļa lapu neaizstājams īpašs dizaina elements ir grafiskās vadības ierīces - pogas. Tas ir vienkārši neiespējami iedomāties lapu bez tiem. Zīmēšanas pogas šodien ir kļuvusi par īpašu žanru, un ilustrators ļauj jums izveidot visvairāk sarežģītākās iespējas. Piemēram, pogas, kas dekorētas kā režģa priekšmeti un (vai) ar masku uzlikšanu, izskatās daudz efektīvāk parastās.

Apsveriet iespēju izveidot apļveida izliektu pogu Illustrator programmā. Zīmējiet vektora objektu apļa veidā ar patvaļīgu krāsu (9. att.) Un pārvērst to uz režģa komandu Objekts \u003d\u003e Izveidojiet gradienta sietu (Objekts \u003d\u003e Izveidojiet gradienta režģi), norādot četras līnijas un četras kolonnas, un sarakstā Izskats (Skatīt), izvēloties iespēju Uz centru. Izcelt (Fona apgaismojums) ir vienāds ar 60 (10. att.). Izvēlieties rīku Tieša izvēle un noklikšķiniet uz objekta augšējā kreisajā stūrī, izvēloties mezglu punktus (11. att.). Mainiet krāsu atbilstošo šūnu uz balta, izvēloties to paletē Swatches. (12. att.).

Rīkojieties rīks Elipse (Elipse), iestatiet peles marķieri uz centru, kas izveidots pirms šī apļa un turot taustiņus Alt. un Maiņa., Izstiepiet jaunu apli virs vecās, lai izrādītos vairāk vecāku uz 1-2 pikseļiem no visām pusēm. Vai viņas melnā robeža ( Insults.) 1-2 pikseļu platums un ieliet radiālo slīpumu uz sarkanu uz baltu (13. att.). Velciet izveidoto vektora objektu uz 1-2 pikseļiem pa labi un uz leju, tad, neizņemot izvēli, noklikšķiniet uz tā ar peles labo pogu un izvēlieties komandu no konteksta izvēlnes. Organizēt \u003d\u003e Sūtīt atpakaļ (Kārtot \u003d\u003e nosūtīt atpakaļ). Tā rezultātā izrādās tukšs pogai, kas parādīta 1. attēlā. četrpadsmit.

Kā likums, ir vairākas līdzīgas pogas jebkurā tīmekļa lapā, kas atšķiras, piemēram, tikai virziens bultiņām, kas uzvilktas uz tiem, kas nozīmē virzienu kustību pa vietni. Apsveriet vienkāršāko divu pogu klātbūtnes gadījumu, no kuriem viens, ar lejupvērsto bultiņu, nozīmēs virzību uz nākamā lapaspuseUn augšējā bultiņa ir uz iepriekšējā. Kā novākšanas bultiņa, mēs pieņemam trijstūri, ko izstrādā rīks Daudzstūris. (Polygon), krāsotas melnā krāsā un lielāka ietekme arī dekorēta kā režģa objekts. Pārvietojiet bultiņu uz pogas un pielāgojiet visu objektu pozīciju viens otram, salīdzinot ar otru, izmantojot atbilstošās paletes pogas. Izlīdzināt. (Izlīdzināšana). Pirmā no iegūtajām pogām ir atspoguļots 1. attēlā. 15. Mēs kopēt slāni ar pogu, izvēloties komandu Dublēt slānis. Slāņi.- Tā rezultātā mēs saņemam divus identiskus slāņus. Pēc tam uz slāņa kopijām izvēlieties bultiņu un pagrieziet to 180 °, izvēloties komandu no konteksta izvēlnes Pārveidot \u003d\u003e Pagriezt - Transformācija \u003d\u003e Pagriezt. Mēs iegūstam to pašu pogu, kā parādīts 1. attēlā. 16. Ņemiet vērā, ka ir daudz ērtāk saglabāt visas tās pašas projekta pogas uzglabāt vienā failā dažādos slāņos, kas šajā gadījumā ir pierādīts.

Tagad jums ir nepieciešams saglabāt optimizētās iespējas katrai no pogām. Sākumā veiciet neredzamu apakšējo slāni - šajā gadījumā tiks saglabāta augšējā slāņa poga. Izvēlieties komandu File \u003d\u003e Saglabāt tīmeklī (File \u003d\u003e Saglabāt tīmeklī), konfigurējiet pogas optimizācijas iespējas, piemēram, kā parādīts 1. attēlā. 17 Noklikšķiniet uz pogas Saglabāt. (Saglabāt) un ievadiet faila nosaukumu. Poga, kas saglabāta beigās, ir parādīta 1. attēlā. 18. Tagad atgriešanās redzamība ar apakšējo slāni, un augšējais būs neredzams un tādā pašā veidā, saglabājot otro pogu, norādot citu nosaukumu. Rezultāts ir parādīts 1. attēlā. deviņpadsmit.

Tagad paliek pārliecināties, ka pogas ir diezgan pieņemamas apskatīt tīmekļa lapu, un novietojiet tos patvaļīgā lapā (20. att.). Rezultātā šajā piemērā primer2.html faili tika iegūti divos grafiskos attēlos mapē Attēli. Primer2.).

Ja nepieciešams, optimizācijas procesā poga ir viegli pārvērsta par šķēli. Šajā gadījumā pēc komandas izvēles File \u003d\u003e Saglabāt tīmeklī (File \u003d\u003e Saglabāt tīmeklī) un iestatīšanas optimizācijas iespējas ir jāizvēlas no rīku rīka paletes Slice izvēlieties.(Slice piešķiršana) un veiciet dubultklikšķi uz attēla, kas galu galā automātiski pārvēršas par slaidu ar secības numuru 1 (21. att.). Veiciet dubultklikšķi uz peles novedīs pie atvēršanas loga Slice opcijas. (Leace iespējas), kurā būs nepieciešams norādīt saiti un, ja nepieciešams, mainīt šķēlītēja vārdu (22. att.), Un pēc tam saglabāt optimizētu attēlu. Rezultāts šajā gadījumā būs primer3.html faili (23. att.) Un primer3.gif (mape Primer3).

Interaktīvie elementi

Viens no veidiem, kā atjaunot lapu, ir dizaina elementu ieviešana, kas maina to izskats (vai stāvoklis) Atkarībā no peles uzvedības vai mazāk ticams, ka jebkuras citas situācijas: mērogošana, ritināšana, iekraušana, radīšanās rašanās utt.

Starp šādiem elementiem, apgāšanās saņēma vislielāko slavu (no angļu valodas. Roll over - roll vairāk) - elementi mainot izskatu ar ietekmi uz peli. Tipisku roļu piemēri ir animēti pogas. Apsvērumi bieži tiek izmantoti un veidojot citus vietnes navigācijas elementus. Faktiski jebkurš apgaismojums nav viens, bet vairāki (līdz četri) attēli, no kuriem katrs atbilst konkrētam notikumam. Galvenie notikumi ir ierasts: Normāls - normāls stāvoklis, kas pārsniedz peles kursoru uz elementu un uz leju - nospiežot peles kreiso pogu, kad jūs virzīt kursoru. Teorētiski notikumi var tikt iesaistīti kā klikšķi - atlaidiet kreiso peles pogu pēc nospiešanas, uz augšu - pēc pogas izlaišanas, ārā - izejot no aktīvās zonas. Tomēr praksē tas ir biežāk aprobežojas ar izmaiņām elementā tikai pirmajos trīs vai pat divos notikumos.

Klasisks rolver

Klasiskā izpratnē, apgāšanās ir virkne grafisko attēlu GIF formātā un atbilstošo HTML kodu, jo, atkarībā no peles uzvedības, viens attēls tiek aizstāts ar citu pārlūkprogrammas logā.

Ilustratora programma nav paredzēta, lai tieši radītu rapous savā klasiskajā izpratnē, bet tas var palīdzēt, izstrādājot sākotnējos elementus tiem. Ideja šajā gadījumā ir tas, ka jums ir nepieciešams izveidot slāni ar attēlu, kas atbilst pirmajam notikumam. Tad izveidojiet slāņa kopiju un pārvērst attēlu, lai tas atbilstu otrajam notikumam utt. Iegūtais daudzslāņu attēls tiek eksportēts uz PSD failu ar slāņu saglabāšanu, pamatojoties uz kuriem rolover ir izveidots attēla sagatavošanas programmā. Plus izmantošana Illustrator programmas, tāpat kā daudzos citos gadījumos, ir vairākas interesantas iespējas, kas nav pieejamas citās programmatūra, kopā ar ērtību transformācijas vektorgrafiku.

Mēģināsim izveidot pārrakstīšanas formā, mainot krāsu atkarībā no peles uzvedības. Atvērts ilustrators un izveidojiet formu noapaļota un melnā taisnstūrī (24. att.), Padara to kopiju un ievietojiet to brīvajā ekrāna daļā. Konvertēt pirmo kopiju taisnstūra uz režģa objektu ar apgaismojumu centrā (komanda Objekts \u003d\u003e Izveidojiet gradienta sietu - Objekts \u003d\u003e Izveidojiet gradienta tīklu), norādot četras līnijas un desmit kolonnas (25. att.). Aktivizējiet taisnstūra otro kopiju un pielāgojiet gradienta aizpildiet to, kā parādīts 1. attēlā. 26. Pārbaudiet gradienta objektu uz režģa, samaziniet gradienta objekta necaurredzamību līdz aptuveni 80%, un lielums ir apmēram 1 pikseļi, lai galu galā simtizētu izspiesuma ietekmi. Un pēc tam izdrukājiet uzrakstu uz objektu. Sākotnējā formā, ļaujiet tai ir balta krāsa, kas atbilst normālā stāvoklim (27. att.), Un pēc tam, mainot apgāšanās statusu, uzraksta krāsa mainīsies, piemēram, uz zaļo - kad jūs Pārvietojiet peles marķieri uz tā (virs valsts) un uz zila - kad nospiežat peles pogu (stāvoklis uz leju).

Pievērsiet uzmanību paletei Slāņi. - Šajā posmā tajā ir tikai viens slānis. Veikt divus šī slāņa eksemplārus, izmantojot komandu. Dublēt slānis. (Duplicate slānis) no paletes izvēlnes Slāņi.- Paletē būs trīs slāņi (28. att.). Tad pirmajā slāņa eksemplārā nomainiet uzraksta krāsu uz zaļo un otrajā - uz zila (29. att.). Tā rezultātā tiks iegūts nepieciešamais apgāšanās sagatavotājs.

Eksportēt izveidoto attēlu PSD formātā ar saglabāšanu slāņiem, izmantojot komandu File \u003d\u003e Eksports (File \u003d\u003e Eksports) un RGB krāsu modeļa izvēle (30. att.). Atveriet izveidoto PSD failu imageready programmā (31. un 32. attēls). Izveidojiet rāmjus, pamatojoties uz slāņiem, izvēloties komandu Padarīt rāmjus no slāņiem (Izveidojiet rāmjus no slāņiem) no paletes izvēlnes Animācija.. Animācijas logs izskatīsies kā 1. attēlā. 33. Tajā pašā laikā paletē Apgāšanās Sākotnēji tiks izveidota viena vienīgā normāla stāvoklis.

Tad logā Animācija.izvēlieties rāmi, kas atbilst inducētajai stāvoklim, kamēr paletē Slāņi. Automātiski izceļas slāni 1. slāņa kopija (34. att.). Dodieties uz paleti Apgāšanāsun noklikšķiniet uz pogas Izveidojiet apgāšanās valsti (Izveidojiet apgāšanās stāvokli) - 1. att. 35, kas novedīs pie valsts izskata Pāriet uz valstspaletē Apgāšanās(36. att.). Tāpat izveidojiet valsti Uz leju valsts. Aktivizēt stāvokli Normāls Paletē Apgāšanās Un noņemiet paleti Animācija. Visiem rāmjiem, turklāt jāatbilst valstij Normāls. Tā rezultātā katrai rolovover stāvoklim paletē Animācija.būs tikai viens rāmis (37. att., 38. un 39. att.).

Fig. 38. Skatīt attēlu, animācijas logus un slāņus un apgāšanās paletes pār pār valsts statusu

Pārbaudiet rezultātu, noklikšķinot uz pogas Priekšskatījums noklusējuma pārlūkprogrammā (Priekšskatiet pārlūkprogrammā) rīkjoslā un pārlūkojot pārlūkprogrammas logu (40. att.). Pēc tam, saglabājiet failu, izmantojot komandu. File \u003d\u003e Saglabāt optimizēts (File \u003d\u003e Saglabāt ar optimizāciju) un norādiet iespēju HTML un attēli (* .html). Tā rezultātā šajā piemērā tika iegūti primer4.HTML fails un virkne grafisko attēlu mapē Attēli.

Fig. 40. Browser logs ar apgāšanās elementu

SVG Rolovier

Populārs SVG formāts (mērogojams vektorgrafika - mērogojams vector grafika), kas izveidots, pamatojoties uz XML standartu, arī ļauj jums iegūt dažādus interaktīvus elementus, jo īpaši rapoverus, tikai praksē tas tiek īstenots pilnīgi atšķirīgi. Ir vērts atzīmēt, ka interaktīvu SVG apgāšanās izveide atšķirībā no klasiskās, kad atbilstošais HTML kods tiek ģenerēts pilnībā automātiski, prasa zināšanas javaScript valoda un izprast objektu orientētas programmēšanas pamatprincipus.

Īpaša palete ir paredzēta darbam ar SVG objektiem. SVG interaktivitātekas ir viegli atvērt ar komandas palīdzību Logs \u003d\u003e SVG interaktivitāte (Logs \u003d\u003e SVG interaktivitāte) - Att. 41.

Apsveriet šo iespēju, lai izveidotu apgāšanās uz interaktīvas pogas, uzraksta krāsa mainīsies no melnā līdz zilai, kad jūs pārvietojat peli un atkal pārvērstu melnā krāsā, kad pele ir ārpus aktīvās zonas.

Izveidojiet taisnstūra pogu ar noapaļotām malām un paņemiet piemērotu gradientu aizpildiet to, piemēram, kā parādīts 1. attēlā. 42. Pielāgojiet pogas pārredzamību paletē Pārredzamība (Pārredzamība) - šajā piemērā parametra vērtība Dūmainība (Necaurredzamība) ir 50%. Izveidojiet pogas kopiju, piepildiet to ar tumši zaļu (43. att.) Un pēc tam pārvērst to uz režģa objekta komandu Objekts \u003d\u003e Izveidojiet gradienta sietu(Objekts \u003d\u003e Izveidojiet gradienta režģi), norādot četras līnijas un desmit kolonnas, un sarakstā Izskats(Skatīt), izvēloties iespēju Uz centru. (Uz centru) un vērtību iestatīšana Izcelt (Apgaismojums) ir vienāds ar 100. Samaziniet slāņa dūmainību ar režģa objektu par jā 40% (44. att.). Novietojiet režģa objektu virs gradienta, un poga tiks atgādināta 1. attēlā. 45.

Fig. 44. Poga kopijas pagriešana uz režģa objektu

Pabeidziet ierosinātā uzraksta pogu un pielāgojiet savu pozīciju, izmantojot atbilstošās paletes pogas. Izlīdzināt. (Izlīdzināšana). Iegūtajam attēlam būs viens slānis ar trim objektiem virs otra (46. att.). Plānotie notikumi attieksies uz teksta objektu, tāpēc ērtībai, mainīt savu vārdu Tekstu.Veicot dubultklikšķi uz objekta un ievadot jaunu nosaukumu. Līdzīgi mainiet slāņa nosaukumu ar 1. slānis uz slāņa (47. att.).

Pasākumu apstrāde ietver JavaScript procedūras, tāpēc jums ir nepieciešams savienot failu ar šo procedūru aprakstu. To sauc par notikumiem.JS un saglabāts uz diska parauga failos izlasīt mākslu \\ SVG SVG mapi, uzstādot adobe programmas Ilustrators. Lai savienotu notikumus.JS failu, izmantojiet komandu JavaScript faili. SVG interaktivitāte (48. att.). Tālāk jums ir nepieciešams noklikšķināt 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 Darīts (Ej ārā).

Fig. 48. JavaScript failu komandas izvēle

Pēc tam noteikt reakciju uz peles notikumiem objektam Tekstu.. Izvēlieties teksta objektu laukā Notikums (Notikums) paletes SVG interaktivitāte Izvēlieties notikumu onmouseover elemcolor (EVT, "Teksts", "# 3333FF") - tas nozīmēs, ka, atrodot peli pār objektu Tekstu.tās krāsa mainīsies uz zilu (50 att.). Lai veiktu teksta tekstu pēc ievadīšanas aktīvā zonā, teksta krāsa ir mainījusies melnā krāsā, tas būs nepieciešams, lai izveidotu citu notikumu. onmouseout.- Izvēlieties to laukā Notikums (Notikums) paletes SVG interaktivitāte. Pēc tam ievadiet tekstu rindā elemcolor (EVT, "Teksts", "# 000000")- Tas novedīs pie melno krāsu atgriešanās (51. att.).

Fig. 51. SVG interaktivitātes paletes galīgais skats uz objekta tekstu

Saglabājiet izveidoto apgāšanās kā SVG failu komandu Fails \u003d\u003e Saglabāt kā (File \u003d\u003e Faila tips formāts SVG.Un pēc tam konfigurējot SVG failu saglabāšanas iespēju, kā parādīts 1. attēlā. 52. Pēc saglabāšanas tiks saņemts tikai viens viens fails ar paplašinājumu SVG, nevis divi, tāpat kā klasiskā apgāšanās gadījumā, - šajā gadījumā tika iegūts primer5.svg fails (mape Primer5). Tomēr, lai apgāšanās tiešām darbotos, ir nepieciešams kopēt notikumus.JS failu ar aprakstu JavaScript mapē ar SVG failu. Pēc tam, jūs varat pārbaudīt veiktspēju apgāšanās - rezultāts izskatīsies parādīts attēlā. 53.

SVG animācija

SVG formātu var izmantot, lai pārraidītu animāciju. Mēģināsim izveidot vienkāršāko animācijas elementu (šajā gadījumā tas būs informācija par uzņēmumu), kas parādīsies ekrānā, kad jūs pārvietojat peli uz atbilstošo grafisko objektu un izzūd, izņemot peli no interaktīvā elementa.

Izveidojiet aptuveni šādu grafisko un teksta objektu sēriju, kā parādīts 1. attēlā. 54. Mēs pārdēvēt visus radītos objektus, kas ir konsekventi noklikšķinot uz nosaukuma nākamo objektu paletē. Slāņi. un ievadot vēlamo vārdu (55. att.). Lūdzu, ņemiet vērā, ka izcelts attēlā. 56 objekti - Teksts1, teksts2, teksts3 un Path1 - vienmēr būs redzams, un visi citi - tikai tad, kad jūs pārvietojat peli Teksts1.

Fig. 54. Oriģinālais attēla veids

Pievienojiet notikumus.JS failu ar JavaScript procedūru aprakstu, izmantojot komandu. JavaScript faili. (JavaScript faili) no paletes SVG interaktivitāteNospiežot pogu Pievienot.(Pievienot), norādot vajadzīgo failu cietajā diskā un noklikšķinot uz pogas Darīts (Ej ārā).

Noteikt reakciju uz peles notikumiem objektam Teksts1. Izvēlieties objektu Tekstu., laukā Notikums (Notikums) paletes SVG interaktivitāteizvēlieties notikumu onmouseover un zemāk esošajā rindā ievadiet tekstu elemshow (EVT, "text4"); Elemshow (EVT, "Path2"). Tā rezultātā, atrodot peli virs objekta Teksts1 kļūs redzami objekti Teksts4. un Ceļš2. Ņemiet vērā, ka, ja notiek notikums, ir jāizpilda vairākas darbības, tad tie jānorāda caur zīmi ";". Tad līdzīga darbība, ņemot notikumu. onmouseout.Ievadot tekstu par to, kas nozīmēs slēpšanās objektus (57. att.).

Saglabājiet rezultātu kā SVG failu komandu Fails \u003d\u003e Saglabāt kā (File \u003d\u003e Saglabāt kā), norādot faila nosaukumu, izvēloties laukā Faila tips SVG formāts un pēc tam SVG failu saglabāšanas opcijas konfigurēšana atbilstoši 1. attēlam. 58. Pēc saglabāšanas tiks saņemts primer6.svg fails (mape Primer6). Neaizmirstiet kopēt notikumus.JS failu mapē ar šo failu. Ja tad jūs palaist pops Šis failsJūs redzēsiet rezultātu attēlā. 59. Tas ir gandrīz tas, kas jums nepieciešams. Vienīgais, kas nebija iekļauts mūsu plānos, ir objektu sākotnējais izskats. Tekstu.4 I. Ceļš.2 Iekraušanas laikā. Lai atbrīvotos no šīs nepilnības, atlasiet abus objektu datus uzreiz un izveidojiet to darbību. elemhide (EVT, "TEXT4"); Elemhide (EVT, "Path2") notikumā uz slodzes. (60. att.). Saglabājiet failu vēlreiz un pārliecinieties, ka tagad objekti Teksts4. un Ceļš2 redzams tikai tad, kad pārvietojas peli uz objekta Teksts1.

Gif animācija

Jebkura tīmekļa lapa nav iedomājama bez tīmekļa animācijas, tostarp bez animācijas Gif'ov. Viena no to radīšanas iespējām ir piemērot Adobe Impteready lietojumprogrammu, kas ļauj izveidot animāciju no slāņiem. Tajā pašā laikā, daudzslāņu attēlu var sagatavot dažādās lietojumprogrammās, tostarp Adobe Illustrator.

Ļoti viegli izveidot animāciju, pamatojoties uz paletes elementiem Simboli. (Simboli) atvērta komanda Logs \u003d\u003e simboli (Logs \u003d\u003e rakstzīmes) vai no vienas no simbolu bibliotēkām, kuras var atvērt, piemērojot komandu Logs \u003d\u003e simbolu bibliotēkas (Logs \u003d\u003e simbolu bibliotēkas).

Piemēram, mēs centīsimies palielināt jebkura simbola objekta lielumu, objekta galvenos soļus, lai palielinātu objektu, jānosaka uz atsevišķiem slāņiem. Sākumā vienkārši novietojiet objektu simbolus pa otru, un pēc tam palieliniet katra sekojošā objekta lielumu, piemēram, kā parādīts 1. attēlā. 61. Tā rezultātā paletē Slāņi. Viens slānis ar dažādiem objektiem tiks izveidots (62. att.). Ja tieši eksportējat šo attēlu uz PSD formātu, tas nedos neko, jo slānis ir viens, un, protams, atverot PSD failu iztēles programmā, būs tikai viens slānis. Tāpēc ir provizoriski nepieciešams ievietot objektus dažādos slāņos. To var izdarīt dažādi ceļi - Vieglākais veids ir vispirms izcelt slāni 1. slānis. Slāšu paletē un izmantojiet komandu Atbrīvot slāni. (Izlaišana slāņos). Rezultāts būs katra objekta kustība uz jūsu slāņa, bet tie visi tiks ligzdoti slānī 1. slānis.. Tāpēc jums būs jāturpina manuāli vilkt visus ieguldītos slāņus slāņu paletes augšējā daļā, lai tie būtu virs slāņa 1. slānis.un tad kļuva tukšs slānis 1. slānis. Vienkārši noņemt (63. att.). Eksportējiet attēlu uz PSD formātu, izmantojot komandu File \u003d\u003e Eksports (File \u003d\u003e Eksports) ar iekārtām kā 1. attēlā. 64.

Augšupielādējiet izveidoto PSD failu Imageryy programmā (65. un 66. att.). Atveriet paletes izvēlni Animācija. Padarīt rāmjus no slāņiem (Izveidojiet rāmjus no slāņiem). Tā rezultātā tiks izveidoti pieci rāmji, no kuriem katrs atbilst viņu slānim un paletes logam Animācija. izskatīsies kā 1. attēlā. 67.

Pēc tam iestatiet katra radīto rāmju ilgumu - šajā gadījumā ir uzstādīts 0,2 S ilgums visiem rāmjiem. Un pēc tam saglabājiet animāciju ar optimizāciju, izmantojot komandu. File \u003d\u003e Saglabāt optimizēts (File \u003d\u003e Saglabāt ar optimizāciju). Iegūtais rezultāts var atgādināt 1. att. 68.

Vēl ērtāk iegūt stieņus, kas ir viegli pārvēršas par animāciju imageReady, izmantojiet funkcijas Live maisījumi. Ilustratora programmas. Šāda kombinētā ilustratora un iztēles programmu piemērošana ievērojami palielina GIF animāciju izveides procesu.

Piemēram, zīmējiet divus patvaļīgus daudzkrāsainus objektus un pēc tam sasiet to maisījuma saikni ar piemērotiem parametriem (69. att.). Nav iespējams tieši izmantot šo failu, lai izveidotu animāciju, jo attēls ir uz viena slāņa (70. att.). Tāpēc tas būs iepriekš vajadzīgs katrs maisījuma objekta elements, kas jānovieto uz atsevišķa slāņa. Lai to izdarītu logā Slāņi. Iezīmējiet virkni , aktivizējiet paletes izvēlni, noklikšķinot uz melnā bultiņas augšējā labajā stūrī un izvēlieties komandu Atbrīvojiet slāņu secību (Pārvērst slāņos secīgi) (71. att.). Aizturēt Maiņa., izcelt radītos slāņus un novietojiet tos virs slāņa. 1. slānis.un pēc tam noņemiet slāni 1. slānis., pārvietojot to uz grozu - kā rezultātā, palete slāņu veiks tādu pašu izskatu kā 1. attēlā. 72.

Fig. 70. Sākuma slāņu loga sākotnējais stāvoklis

Eksportēt izveidoto failu uz PSD komandu formātu File \u003d\u003e Eksports (File \u003d\u003e Eksports). Atveriet izveidoto PSD failu Imageready programmā (73. att.). Ņemiet vērā, ka slāņos logs visi slāņi, kas izveidoti programmā parādīsies (74. att.), Un logā Animācija. Būs viens tikai rāmis.

Aktivizējiet paletes izvēlni Animācija.Noklikšķinot uz melnā bultiņas paletes augšējā labajā stūrī un izvēlieties komandu Padarīt rāmjus no slāņiem (Izveidot rāmjus no slāņiem) - kā rezultātā, pieci rāmji tiks izveidoti šajā piemērā, un paletes logs tiks izveidots. Animācija. Uzņem skatījumu saskaņā ar 1. att. 75. Izcelt visus rāmjus, turot nospiestu taustiņu. Maiņa.un iestatiet atbilstošu rāmju ilgumu - šajā piemērā katram rāmjiem, kas ņemti tajā pašā laikā 0,2 s. Pēc tam saglabājiet failu ar komandu optimizāciju. File \u003d\u003e Saglabāt optimizēts(File \u003d\u003e Saglabāt ar optimizāciju), instalējot sarakstā Faila tips Opcija Tikai attēli (* .gif). Animācija līdzinās rīsiem. 76.

Tas neizskatās daudz interesantāk, lai pārvietotos, bet vienmērīgas pārmaiņas maisījumu objektu lielumā. Piemēram, jūs varat izmantot jau izveidoto maisījumu pāreju. Šajā gadījumā pēc tam, kad izveidotu atsevišķus slāņus katram maisījuma pārejas elementam, novietojiet visus objektus savā starpā, izmantojot pogas Horizontālā izlīdzināšanas centrs(Saskaņošana attiecībā pret centrālo horizontālo) un Vertikālais izlīdzināšanas centrs. (Izlīdzināšana attiecībā pret vertikālo) paleti Izlīdzināt. (77. att.).

Eksportēt izveidoto failu uz PSD formātu ( File \u003d\u003e Eksports- File \u003d\u003e Eksports) un atveriet izveidoto PSD failu Imageready programmā (78. att.). Izveidojiet, pamatojoties uz animācijas rāmju slāņiem ( Padarīt rāmjus no slāņiem - Izveidojiet rāmjus no slāņiem) un izvēlieties piemērotu ilgumu (79. att.). Un tad, lai padarītu animāciju iespaidīgāku, kopēt esošos rāmjus, bet apgrieztā secībā, lai attēls vispirms palielināsies, un pēc tam samazinās, un tā ir aplis (80. att.). Pēc tam saglabājiet optimizācijas failu ( File \u003d\u003e Saglabāt optimizēts- File \u003d\u003e Saglabāt ar optimizāciju). Iegūtā animācija ir parādīta 1. attēlā. 81.

Fig. 80. Animācijas loga statuss pēc rāmju dublēšanas

Fig. 81. Gatavā animācija

Šodien mēs neesam diezgan parasts mācība Adobe. Ilustrators. Jo šoreiz mēs nedarīsim statisku attēlu, bet patiesāko animāciju. Iedomājieties, izrādās ar izmantojot Adobe. Illustrator Jūs varat arī izdarīt karikatūras :)

Un mums tas nebūs vajadzīgs. Kompetentā organizācija slāņos un eksporta gala darbu SWF formātā, kur katrs slānis tiek pārvērsts rāmī animācijas. Šodienas stundā mēs sastādām retro stilā atskaites animāciju. Pie izejas, flash filma ar šo ir ļoti atpakaļskaitīšana.

Pirmā lieta, kas jādara, ir izdarīt visus nepieciešamos priekšmetus turpmākai animācijai. Lai to izdarītu, atsevišķā dokumentā tika veikti divas filmas filmas pozīcijas, aplis, kas ir sagriezts atsevišķās nozarēs, tekstūrā un vertikālajā skrāpējumā, lai pievienotu senatnes efektu, kā arī visus numurus un uzrakstus.

Kad visas mūsu karikatūras daļas ir gatavas, jūs varat sākt veidot sevi animāciju. Ērtības labad ir labāk darīt jaunā dokumentā. Tajā pašā laikā slāņi spēlēs animācijas rāmju lomu. Un pašā pirmajā slānī ir nepieciešams kopēt filmas rāmi. Novietojiet to darba vietas vidū.

Tagad izveidojiet otru slāni un kopējiet filmu attēlu rāmi tajā, kurā caurumi ap malām tiek veikti ar maiņu. Tas ir arī jāatrodas centrā.

No šiem diviem slāņiem jūs jau varat saņemt kustīgās filmas animāciju. Bet vēlāk mums būs nepieciešams daudz vairāk slāņu. Tāpēc iezīmējiet pirmos divus slāņus, dodieties uz paneļa opcijām un izveidojiet slāņa kopiju.

Tāpat mums ir nepieciešams uzkrāt 12 slāņus ar filmas rāmjiem, uzdodot viņas kustību.

Tagad mums ir vesels slāņu ķekars, un visi no tiem ir redzami. Tādā nozīmē, ka augšējos slāņus bloķē zemāks, kas nav pilnīgi ērts darbam. Tāpēc, jūs varat izslēgt dažus slāņus, noklikšķinot uz ikonas ar aci pa kreisi no slāņa nosaukuma. Lai izslēgtu vai iespējotu visus slāņus uzreiz, saglabājiet Alt taustiņu nospiestu, kad noklikšķināt uz Glazik ikonas. Ieskaitot un izslēdzot slāņus, jūs varat redzēt tieši to, kas atrodas noteiktā mūsu nākotnes animācijas ietvaros. Un tagad, lai filmas pārvietošanai pievienotu vieglu nervozētu, jums ir nepieciešams, lai saņemtos rāmjus mazliet dažādos virzienos. Lai to izdarītu, ieslēdziet tikai slāni, ar kuru jūs strādājat Šis brīdisUn pēc tam novirziet rāmi uz pikseļu pāri jebkurā virzienā.

Kad jūs aizgājāt pār visiem slāņiem un pievienojāt nelielu maiņu, jūs varat sākt izveidot kustīgu apļa animāciju. Lai to izdarītu, kopējiet loku, kas sastāv no nozarēm, no dokumenta ar karikatūras rezerves daļām un ievietojiet to uz pirmā slāņa virs filmas rāmja.

Ja noņemat izvēli no apļa, tas izskatīsies vienam veselam skaitlim. Tas ir tas, kas mums nepieciešams.

Bet, tā kā tas sastāv no atsevišķām nozarēm, jūs varat, mainot to krāsu, ļoti ātri un viegli izveidot animāciju. Lai to izdarītu, kopējiet šo apli otrajā kārtā un izveidojiet pirmo sektora šķiltavu. Jūs atceraties, ka filma ir trīce braukšanas laikā, tāpēc tas nav nepieciešams, lai aplis tieši centrā rāmja. Novietojiet to uz acs.

Tāpat jums ir nepieciešams, lai kopētu apli uz katru nākamo slāni, bet krāsot suku līniju uz vienu sektoru vairāk nekā iepriekšējā laikā. Visi kopā šie 12 slāņi veido filmas kustības animāciju ar uzpildes loku.

Tālāk jums ir jāpievieno tekstūra mūsu slāņos. Ieslēdziet pirmo slāni un kopējiet tekstūru no avota faila ar rezerves daļām.

Tad, savukārt ieslēdziet šādus slāņus un kopēt to pašu tekstūru tur. Lai viņa izskatījās atšķirīgi katrā rāmī, vienkārši pagrieziet to 90 grādu leņķī. Kā jūs jau uzminējāt, mums ir jāpievieno tekstūra visiem 12 kadriem.

Ja jūs jau esat noguris no pārvarēšanas, tad es varu jums piegādāt - tas joprojām ir ļoti maz. Visgrūtākais jau aiz. Tas joprojām pievienot vertikālas skrāpējumus un gandrīz visu. Lai to izdarītu, atkal kopējiet sākotnējo skrāpējumus un ievietojiet to patvaļīgā vietā vairākos slāņos. Manā gadījumā skrāpējumi parādās tikai divos slāņos.

Tagad tas ir gatavs galvenajam ciklam ar filmas animāciju, tas paliek, lai pievienotu numurus. Tā kā tas nāk no 3 līdz 1 plus vēl viens vārds !!!, tad mums ir nepieciešams vēl vairāk slāņu. Ne 12, bet tik daudz kā 48. Tas jums ir nepieciešams veikt vēl trīs kopijas gatavu slāņu ar animāciju filmu.

Un tad viss ir vienkāršs. Mēs ieslēdzam pirmo slāni un tur ievietojam trīs numurus.

Tad jums ir nepieciešams kopēt šo skaitli šādos slāņos, līdz tiek pabeigta apļa animācija. Kad jūs sasniedzat nākamo slāņa kopiju, kur aplis tiks piepildīts pilnīgi pilnīgi, jums ir jāievieto divi numuri divi. Līdzīgi kopējiet numuru uz vēlamajiem slāņiem. Un, kad jūs nokļūsiet gala slāņos, kas paredzēti, lai ierakstītu Go !!!, vienkārši noņemiet apli pirms uzraksta kopēšanas vēlamajā slānī.

Uz to ar animāciju viss. Galvenais šeit nav sajaukt. Jūs varat dot slāņus dažus ērtus vārdus, bet es biju kaut kā slinks :) Un pat tad, kad esat pabeidzis darbu, pārliecinieties, lai atgrieztos visus slāņus, noklikšķinot uz stiklojuma ikonas.

Logā ar eksporta iestatījumiem pārliecinieties, lai instalētu eksportu kā: AI slāņus SWF rāmjiem. Tā ir šī iespēja, kas ieslēdz ilustratora slāņus animācijas rāmjos. Tālāk noklikšķiniet uz pogas Advanced.

Papildu iestatījumi tiks atvērti. Šeit jums ir nepieciešams iestatīt kadra rāmja ātrumu. Man ir 12 kadri sekundē. Check Mark Looping ir atbildīga par ciklisko animāciju. Pateicoties viņai, video tiks atskaņots aplī. Un slāņa pasūtījuma variants: apakšā uz augšu spēlē ilustratora slāņus no apakšas uz augšu panelī. Tikai tas, ka mēs izveidojām mūsu animāciju.

Pie izejas mēs saņemam flash filmu ar mūsu animāciju.

Tagad jūs redzat, ka vienkāršā animācija, kas jādara Adobe Illustrator, nav tik grūti, kā šķiet pirmajā acu uzmetienā.

Bet, lai izveidotu garus veltņus vai interaktīvus lietojumus, tas joprojām ir labāk izmantot Adobe Flash. vai nu citi flash redaktori. Piemēram, šis kaķis es darīju vecajā Macromedia Flash, kurš izraka darbu darbā.

Pēdējo reizi, HTML5 un CSS3 tiek izmantots vairāk un biežāk, lai izveidotu animāciju. Šis kods tiek atbalstīts mūsdienu pārlūkprogrammas Un neprasa izmantot zibspuldzi.

Romiešu aka Dacascas. Īpaši blogam

Abonējiet mūsu biļetenu, lai nepalielinātu kaut ko jaunu:

Šodien mums nav tieši parastā Adobe Illustrator nodarbība. Jo šoreiz mēs nedarīsim statisku attēlu, bet patiesāko animāciju. Iedomājieties, izrādās, ka jūs varat arī izdarīt karikatūras ar Adobe Illustrator :)

Tagad izveidojiet otru slāni un kopējiet filmu attēlu rāmi tajā, kurā caurumi ap malām tiek veikti ar maiņu. Tas ir arī jāatrodas centrā.

Tāpat mums ir nepieciešams uzkrāt 12 slāņus ar filmas rāmjiem, uzdodot viņas kustību.

Tagad mums ir vesels slāņu ķekars, un visi no tiem ir redzami. Tādā nozīmē, ka augšējos slāņus bloķē zemāks, kas nav pilnīgi ērts darbam. Tāpēc, jūs varat izslēgt dažus slāņus, noklikšķinot uz ikonas ar aci pa kreisi no slāņa nosaukuma. Lai izslēgtu vai iespējotu visus slāņus uzreiz, saglabājiet Alt taustiņu nospiestu, kad noklikšķināt uz Glazik ikonas. Ieskaitot un izslēdzot slāņus, jūs varat redzēt tieši to, kas atrodas noteiktā mūsu nākotnes animācijas ietvaros. Un tagad, lai filmas pārvietošanai pievienotu vieglu nervozētu, jums ir nepieciešams, lai saņemtos rāmjus mazliet dažādos virzienos. Lai to izdarītu, ieslēdziet tikai slāni, ar kuru jūs gatavojaties strādāt brīdī, un pēc tam novirzīt rāmi uz pikseļu pāriem uz jebkuru pusi.

Ja noņemat izvēli no apļa, tas izskatīsies vienam veselam skaitlim. Tas ir tas, kas mums nepieciešams.

Tālāk jums ir jāpievieno tekstūra mūsu slāņos. Ieslēdziet pirmo slāni un kopējiet tekstūru no avota faila ar rezerves daļām.

Un tad viss ir vienkāršs. Mēs ieslēdzam pirmo slāni un tur ievietojam trīs numurus.

Pie izejas mēs saņemam flash filmu ar mūsu animāciju.

Tagad jūs redzat, ka vienkāršā animācija, kas jādara Adobe Illustrator, nav tik grūti, kā šķiet pirmajā acu uzmetienā.

Bet, lai izveidotu garus veltņus vai interaktīvus lietojumus, tas joprojām ir labāk izmantot Adobe Flash vai citus flash redaktorus. Piemēram, šis kaķis es darīju vecajā Macromedia Flash, kurš izraka darbu darbā.

Pēdējo reizi, HTML5 un CSS3 tiek izmantots vairāk un biežāk, lai izveidotu animāciju. Šo kodu atbalsta mūsdienu pārlūkprogrammas un neprasa izmantot flash player.

Romiešu aka Dacascas. Īpaši par blogu piezīmi Micolstrum Illustrator