Ինչպես ստեղծել անիմացիոն պատկերազարդ եւ սպրիտներ: Պատկերազարդում անիմացիաներ ստեղծելը

Ողջույն բոլորին! Այսօր ես կփորձեմ նկարագրել ծրագրի առանձնահատկությունները Adobe Illustrator, այն համեմատելով ֆլեշ հատկությունների հետ: Դա չի լինի ոսկրային ծրագրի գլոբալ կնքումը, այլ մի քանի հետաքրքիր չիպերի նկարագրություն, որոնք ես գտել եմ ինձ համար այս ծրագրում: Տեղեկատվությունը հավաքվել է կտորներով, որպես սովորում ամեն ինչ մեկ գրառմամբ դնելու համար: Անմիջապես խոստովանեմ, որ ես գերհզոր պատկերազարդ օգտագործող օգտվող չեմ, միայն վերջին վեց ամիսներն եմ օգտագործում նկարչության մեջ (մինչ այդ ամեն ինչ գծվում է): Շատերը համոզվում են, որ Illustrator- ը բարդ է, ինտուիտիվորեն միշտ չէ, որ հասկանալի է: Ինչ-որ չափով համաձայն եմ, որ Flash- ից հետո այս ծրագիրը բարդ է: Բայց հետո գլխավորը չեղյալ հայտարարելը չէ, բայց շարունակել սովորել: Եվ մի քանի շաբաթ անց հայտնվում է միտք, ինչպես ես դա անում էի առանց դրա:

Այսպիսով, այն, ինչ ինձ դուր եկավ նկարազարդում, եւ որ ես գտա ինձ համար այդպիսին, ինչը չի անում:
1. Ես կսկսեմ առավել պարզ, բայց միեւնույն ժամանակ անհրաժեշտության դեպքում: Փորձեք տեղադրել առարկաները մի շրջանակի մեջ: Ավելի վաղ էր Deco գործիք: Բայց այն հանվեց, ըստ երեւույթին, ավելորդ հաշվարկվեց: Նրանք որոշեցին, որ բռնակներն ավելի զվարճալի են: Illustrator- ում այս հատկությունն է. Էֆեկտ - աղավաղում եւ վերափոխել - վերափոխել.

Բոլորը արագ եւ պարզ, արժեքները (օբյեկտների միջեւ հեռավորությունը, պատճենների քանակը) նշում են կարգավորումները ինքներդ:

2. Զիգ-զագ

Դեռ ավելի պարզ, բայց, այնուամենայնիվ օգտակար բան: Թվում է, թե մանրուք է, բայց թափառում է, որ դուք պետք է ձեռքով գծեք, նկարազարդում սա երկրորդն է:

3. Օբեկտների դեֆորմացիա (Warp)

Ֆլեշի մեջ նման բան չկա: Ստորեւ բերված օրինակի վրա ես ցույց տվեցի պարզ ձեւերի դեֆորմացման միայն 2 եղանակ (էֆեկտ - Աղեղ / ձուկ): Իրականում, նրանց 15-ը Վերջին տարբերակը Ծրագրեր:

4. Անկյունների ավտոմատ կլորացում (կլոր անկյուններ)

Դուք կարող եք ձեռքով անել. Անկյունում մեկուսացման ժամանակ գրաֆիկական օբյեկտի վրա (ամբողջ գեղձում) կա սպիտակ կետ եւ դաշնային գծի նշան: Մկնիկը քաշում եմ, հարմարվում եմ ձեր ճաշակին:

Բայց սա վերաբերում է միայն ձեւերին, մատիտի տողով մի փոքր այլ կերպ `կիրառեք կլորացման ազդեցությունը ( Էֆեկտ - ոճավորված - կլոր անկյուններ): Արդյունքում մենք ստանում ենք նույն ուժը:

5. Կոպիտ (յուղ)

Էֆեկտը կիրառվում է Կ. Պարզ ձեւեր (Էֆեկտ - աղավաղում եւ վերափոխել - կոշտացնել): Արտաքին տարածքում մենք ստանում ենք ինչ-որ բան, որը նման է ցածր պոլիճալ 3D մոդելներին: Իմ կարծիքով, զով :) Եվ ամենակարեւորը `շատ պարզ:

6. Պոկեր եւ փչում (Քաշում եւ փչում)
Ստորեւ նկարում օրինակ.

7. ձեւի ընդլայնում (օֆսեթական ուղի)

Flash- ում կա ընդլայնման լրացման գործառույթ (լրացման ընդլայնում), մատիտի գծերով լիարժեք չի գործում, ի տարբերություն նկարազարդողի:

8. Խոզանակներ (արվեստի խոզանակ, օրինակների խոզանակ, ցրման խոզանակ)
Ստորեւ օրինակ չենք նայենք օրինակներով.

9.Texture խոզանակ (հյուսվածքային խոզանակներ)

Նաեւ նկարազարդում կա շատ հյուսվածքային խոզանակներ, որոնց մասին ես գրել եմ, եւ ինչպես են դրանք հայտնվել նոր տարբերակ Flash. Նկատվում էր, որ Adobe անիմացիոն խոզանակների օգտագործումը սարսափելի խանգարում է: Դա է. (

10. Համոզված չէ, որ դա ուղիղ հնարք է, բայց ես ուզում եմ զվարճալի անունով մնալ տաճարում ԳռանԽոզանակ:, Գտնվում է գործիքագոտում, շատ հաճելի է խոզանակ օգտագործել: Նա ունի պարամետրերի մի փունջ, ինձ ավելի շատ դուր է գալիս: Ըստ բառերով, դժվար է բացատրել իր առավելությունների մասին, ավելի լավ է փորձել մեկ անգամ:

10.split to grid.

Նաեւ օգտակար բան. Split to Grid Feature (օբյեկտ-ուղի-պառակտում ցանցին): Տեղացիները կտրում են ձեւը հավասար հատվածների վրա: Ինչ է մեզ հիշեցնում: Right իշտ - պատուհաններ բարձրահարկ շենքում: Ինչ վերաբերում է ինձ, նկարչության համար զով կտոր, օրինակ, քաղաքային լանդշաֆտներ;)

Հատկապես մեկ օգտակար գործիք, որը ներկայացվել է նկարազարդում, հավանաբար առաջին թողարկումից ի վեր: Դրանով դուք կարող եք ստեղծել, օրինակ, փայտե հյուսվածք.

12. Տեղափոխել (աջ - վերափոխել - Տեղափոխել)

Օֆսեթ առարկան կանխորոշված \u200b\u200bհեռավորության վրա: Եթե \u200b\u200bցանկանում եք, կարող եք անմիջապես ստեղծել պատճեն, որը տեղադրվելու է ընտրված հորիզոնական օբյեկտի / կամ ուղղահայաց օբյեկտի ցանկալի հեռավորության վրա: Flash- ի ավելի վաղ տարբերակում կատարվեց plugin- ը Այս հատկությունը, Դժբախտաբար, ես չեմ հիշում նրա անունը:

Illustrator- ում շատ հարմար է ստեղծել անթերի նախշեր ( Օբեկտ-օրինակների պատրաստում): Հիշում եմ, թե ինչպես եմ ես ֆանտաստիկորեն բարդանում ստեղծագործության մեջ: SS 2015 պատկերների տարբերակում պատկերված է, ամեն ինչ ավտոմատացված է, շատ պարամետրեր կօգնեն կույր օրինաչափություններին տասնյակ տատանումներով, ունենալով ընդամենը մի քանի գրաֆիկական տարրեր: Ծրագրի ավելի վաղ տարբերակներում բոլորը ստիպված էին ձեռքով անել, ինչպես մինչ այժմ լողում:

(Նշում - Նախշը կարող է արվել վեկտորային խմբագրելի օբյեկտի կողմից `օգտագործելով գործառույթ` ապամոնտաժելու համար ( Օբեկտ - Ընդլայնել հայտնությունը).

14. օբյեկտի խճանկար (խճանկար)

Գույնի պալիտրա ստեղծում `առկա նկարի հիման վրա: Ձեր նախընտրած նկարը Ill (Open) ներմուծեք, ապա Օբեկտ - ստեղծել օբյեկտի խճանկար, Պարամետրերում նշեք ճեղքման հաճախությունը բարձրության եւ լայնության մեջ:

Եվ մենք ստանում ենք ելքի մոտ.

15.Blend (խառնել)

Օգտագործվում էր գրադիենտներ ստեղծելու համար: Կարող եք ստեղծել քայլ առ քայլ անցումներ, օրինակ, նկարում: Ես չեմ ասի, որ այն հաճախ եմ օգտագործում, բայց կարող եմ ինչ-որ մեկին հարմար լինել: Ինձ թվում է, որ կարող եք օգտագործել պարզ ֆոնային նկարների ստեղծման մեջ:

Բացի այդ, գործիքը կարող է օգտագործվել կլոն առարկաներ: Մենք երկու առարկա ենք դնում միմյանցից հեռավորության վրա եւ դիմում ենք խառնուրդի ընտրանքներ, ընտրեք քայլերի քանակը (կլոնավորված առարկաների քանակը):

16. Կառուցված ձեւի գործիքների գործիք: Շատ հարմարավետ բան է աշխատել պրիմիտիվների հետ: Flash- ում, ինչպես ինձ թվաց, ավելի քիչ հարմար է:

Կտտացնելով Alt- ը եւ կտտացրեք Նվիրված հատվածներին `ջնջել հատվածները: Եթե \u200b\u200bդուք պարզապես ձգում եք մկնիկը մի քանի նվիրված տարածքների վրա `միացեք:

Լրացում - գործիք, որն օգնում է ինքնաբերաբար կտրել, միացնել եւ այլն: Ընտրված ձեւեր: Ինչ վերաբերում է ինձ, այն շատ հարմար չէ, ես ավելի հաճախ եմ օգտագործում ԿառուցելՁեւավորելԳործիք:

(Մոնտաժային տարածքներ)

18.Custom գործիքային վահանակ:

Ձեր սեփական գործիքագոտին ինքնուրույն ստեղծելու ունակությունը, ավելորդ նետելը եւ ընտրեք միայն դրանք, որոնք օգտագործում եք:

Բլուշի, մոնտաժային տարածքներում, մասնավորապես տեսարաններ ( Տեսարան 1,2,3 ..) Գտնվում է առանձին եւ նրանց միջեւ, որը ձեզ հարկավոր է փոխել (Shift + F2): Պատկերազարդում դրանք կարող են տեղադրվել իրենց աչքերի առջեւ: Հարմարավետորեն, երբ միեւնույն նկարի մի քանի տարբերակ եք պատրաստում, որպեսզի համեմատության համար բոլոր տարբերակները լինեն մեր աչքերի առաջ:

19. Իզոմետրիկ գրաֆիկական ոճերով

Վերջինս իզոմետրիկի ստեղծումն է, առանց 1 կտտոցով օգտագործելու (եւ ավելի ճշգրիտ, 3 կտտոցով, քանի որ մենք ունենք 3 կողմ;) գրաֆիկական ոճերով ( Գրաֆիկական ոճեր:): Ինչպես է դա արվում, ես կգրեմ հաջորդ անգամ:

Ընդհանուր առմամբ, Illustrator- ի Flash- ի հետ `առարկան խորհրդանիշը (խորհրդանիշ) պահելու ունակություն (խորհրդանիշ) եւ առանց որեւէ խնդիրների կարող է տեղափոխվել Flash (բացեք Flash.AI ֆայլը Ներմուծում - ներմուծում բեմ).
Illustrator- ի կերպարը ունի նույն հատկությունները, որքան Flash- ում:
Եվ վերջում ես կգրեմ, որ նկարազարդում, իմ կարծիքով, զիջում է Flash- ին: Այո, այո, եւ դա է: Եվ սա լրացման գործիք է ( Ներկեք դույլ:): Քանի որ ես չեմ փորձում ընտելանալ նրան Ille- ում, թռուցքով ավելի հարմար է:
Եթե \u200b\u200bիմ նոտաները օգտակար են դարձել ձեզ համար կամ ինչ եք ուզում ինքներդ ձեզ լրացնել - Վելկով մեկնաբանություններում: Հաջողություն բոլորին;)

Վերջերս SVG անիմացիան (մասշտաբելի վեկտորային գրաֆիկա) կայքերում եւ դիմումները դարձել են շատ տարածված: Դա պայմանավորված է նրանով, որ բոլորը Նոր զննարկիչներ Արդեն աջակցում են այս ձեւաչափին: Ահա տեղեկատվությունը SVG զննարկիչներին աջակցելու համար:

Այս հոդվածում քննարկվում է Ամենապարզ օրինակը Շարժապատկերներ SVG: վեկտորներ Լույսի օգնություն JQuery plugin Ծույլ գծի նկարիչ:

Աղբյուրի կոդ

Այս առաջադրանքի կատարման եւ ամբողջական հասկանալու համար HTML- ի, CSS, JQuery- ի հիմնական գիտելիքները, բայց ոչ պարտադիր չէ, որ պարզապես ուզում եք անիմաստացնել SVG): Եկեք բարձրանանք:

Եվ այսպես, այն քայլերը, որոնք մենք պետք է կատարենք.

Ստեղծեք ֆայլի ճիշտ կառուցվածքը
Ներբեռնեք եւ միացրեք plugin- ը
Adobe Illustrator- ում նկարեք զով շրջապատի պատկեր
Փոխարկեք մեր նկարը ծույլ գծի փոխարկիչում
Տեղադրեք արդյունքում ստացված ծածկագիրը Main.js- ում
Ավելացնել մի քանի CSS համտեսել

1. Ստեղծեք ֆայլի ճիշտ կառուցվածքը
Դրանով սա կօգնի նախնական ցանցի ծառայությանը, որտեղ դուք պետք է ընտրեք պարամետրերը, ինչպես ներքեւի նկարում:

Classic H5BP (HTML5 կաթսայի ափսե)
Ոչ մի ձեւանմուշ:
Պարզապես HTML5 Shiv:
Ականազերծված
Այսինքն, կասես:
Chrome շրջանակ:
Այնուհետեւ կտտացրեք Ներբեռնեք այն:

2. Ներբեռնեք եւ միացրեք plugin- ը

Քանի որ սկզբնական ցանցը գալիս է jQuery- ի վերջին գրադարանով, արխիվից, որը մենք պետք է ներբեռնենք Lazy Line Painter Project Repository- ից, դուք պետք է փոխանցեք ընդամենը 2 ֆայլ մեր նախագծին: Առաջինը 'jquery.lazylainter-1.1.min.js' (plug-in- ի տարբերակը կարող է տարբեր լինել) արդյունքում ստացված թղթապանակի հիմքում է: Երկրորդը օրինակ է / JS / վաճառող / Raphael-Min.js.

Այս 2 ֆայլերը տեղադրված են JS թղթապանակում: Եւ դրանք միացրեք մեր ինդեքսին. Html հիմնականի առջեւ հետեւյալը.

3. Adobe Illustrator- ում նկարեք կտրուկ ուրվագիծ պատկեր

Մենք նկարում ենք մեր ուրվագծային պատկերը Illustrator- ում (գրիչ գործիքների հետ կապված ամենահեշտ ձեւը)
Անհրաժեշտ է, որ մեր նկարչության ուրվագիծը չփակվի TC- ն `մեր ազդեցության համար: Սկսել եւ վերջ
Պետք չէ լրացնել
Ֆայլի առավելագույն չափը `1000 × 1000 PX, 40KB
Բուսաբուծություն օբյեկտի օբյեկտի\u003e Artboards\u003e Տեղավորվում է Artboards- ի սահմանները
Save in SVG ձեւաչափով (Ստանդարտ պահվող պարամետրերը հարմար են)

Օրինակ, դուք կարող եք օգտագործել սրբապատկերները հավելվածում:

4. Փոխարկեք մեր նկարը ծույլ գծի փոխարկիչում
Պարզապես քաշեք ձեր պատկերակը պատուհանի մեջ, որը ներքեւում գտնվող նկարում:
Հաստ, միացման գույնը եւ անիմացիայի արագությունը կարող են փոփոխվել հենց այն օրենսգրքում, որը կհայտնվի փոխարկումից հետո:

5. Տեղադրեք արդյունքում ստացված օրենսգիրքը Main.js- ում
Այժմ պարզապես տեղադրեք ստացված ծածկագիրը դատարկ Main.js ֆայլում
Պարամետրեր.
Strokewidth - Եզրագծային հաստություն
Strokecolor - Եզրագծային գույն
Կարող եք փոխել նաեւ յուրաքանչյուր վեկտորի նկարչության արագությունը `փոխելով տեւողության պարամետրերի արժեքները (Լռելյայն 600)

6. Ավելացնել որոշ CSS համտեսել
Հեռացրեք index.html պարբերությունից

Բարեւ աշխարհ! Սա HTML5 կաթսա է:

Եւ դրա փոխարեն տեղադրեք այն բլոկը, որում տեղի կունենա մեր անիմացիան

Այնուհետեւ ավելի հաճելի դիզայնի համար ավելացրեք մի քանի CSS ֆայլ:

Մարմին (ֆոն. # F3B71C;) #Icons (դիրքը, ֆիքսված; վերեւ, 50%; ձախ, 50%; -300px 0 -400px;)

Պահպանեք բոլոր ֆայլերը:
Այժմ պարզապես բացեք index.html ժամանակակից զննարկչի մեջ եւ վայելեք էֆեկտը:

Սիրված Տեղական մեքենայից սկսած, անիմացիայի սկիզբը սկսվում է մի քանի վայրկյան հնարավոր է:

Վեբ գրաֆիկայի օպտիմիզացում

Գրաֆիկական տեղեկատվությունը փոխանցվում է շատ ավելի դանդաղ, քան տեքստը, եւ պատկերի բեռնման ժամանակը համամասն է իրենց գրաֆիկական ֆայլերի չափի հետ: հետեւաբար Արագ բեռնել Վեբ էջերը ներառում են դրանցում ներկառուցված գրաֆիկական պատկերների փոքր չափս, ինչը հասնում է դրանց օպտիմիզացման միջոցով: Պատկերի օպտիմալացման համաձայն, դա հասկացվում է իր փոխարկմամբ, որն ապահովում է ֆայլի նվազագույն չափը `պահելով պահանջվողը Այս դեպքը Պատկերի որակը, որը հիմնականում ձեռք է բերվում գրաֆիկական պատկերների գույների քանակը `սեղմված եւ հատուկ ֆայլի ձեւաչափերի օգտագործումը եւ անհատական \u200b\u200bպատկերի բեկորների համար սեղմման պարամետրերի օպտիմալացում:

Illustrator- ը ներկառուցված պատկերի օպտիմիզացման գործիքներ ունի, մատուցելով տարբեր նախադիտումների մեթոդներ օպտիմիզացման գործընթացի արագ եւ արդյունավետ իրականացում: Նախադիտում Այն տալիս է բավականին ճշգրիտ դիտում այն \u200b\u200bմասին, թե ինչպես է օպտիմիզացված պատկերը իրական ժամանակում, ինչը օգնում է գնահատել օպտիմիզացման արդյունքը եւ հաջողությամբ ընտրեք ցանկալի կարգավորումները: Եվ դուք կարող եք օպտիմիզացնել երկու պատկերները, որոնք ներկայացված են ուղղակիորեն նկարազարդման ծրագրում եւ այլոց, ինչպիսիք են լուսանկարները, որոնք ենթադրաբար պետք է տեղադրվեն վեբ կայքում:

Պատուհանում տեղադրված են օպտիմիզացման ընտրանքներ Խնայեցեք Վեբ: (Խնայողություն վեբի համար), որը պայմանավորված է ընտրացանկի հրամանով Ֆայլ (Ֆայլ): Ծրագիրն առաջարկում է օգտագործել նախադիտման չորս ռեժիմներից մեկը, բայց գնահատել օպտիմիզացման որակը լավագույն միջոցը Երկուսը հարմար են.

2-վեր (երկու տարբերակ) - բնօրինակ եւ օպտիմիզացված պատկերի միաժամանակյա դիտում `համաձայն նշված պարամետրերին համապատասխան (Նկար 1);
4-վեր: (Չորս տարբերակ) - Այս ռեժիմում տեսադաշտը բաժանվում է չորս պատուհանի (Նկար 2) օպտիմիզացված բնօրինակ պատկերն ու երեք տարբերակները ցուցադրելու համար. Առաջին տարբերակը ստեղծվում է տեղադրված օպտիմիզացման արժեքների հիման վրա, իսկ մյուս երկուսը Ընթացիկ օպտիմիզացման պարամետրերի ընտրանքներ:

Երկու ռեժիմներն էլ թույլ են տալիս զգալիորեն խնայել ժամանակը `գտնելու ավելի լավ օպտիմիզացման տարբերակ, քանի որ պահպանում եք պատկերները պահելու անհրաժեշտությունից Տարբեր պարամետրեր Օպտիմիզացում եւ դրանց հաջորդ տեսողական համեմատություն: Բացի այդ, հնարավոր է գնահատել ոչ միայն օպտիմիզացված պատկերի որակը, այլեւ դրա չափը եւ բեռնախցիկը `տարբեր կապի տարբեր ընտրանքներով: Համեմատության համար նշենք, որ 4-up ռեժիմն առավել հարմար է (չորս տարբերակ), ինչը թույլ է տալիս տեսողականորեն գնահատել սեղմման ազդեցությունը կամ նվազեցնել պալիտրա պատկերի որակի եւ դրա չափի վրա եւ ի վերջո որոշել լավագույն օպտիմիզացման պարամետրերը:

Illustrator- ը թույլ է տալիս օպտիմալացնել վեբ գրաֆիկները ձեւաչափերով ոչ միայն GIF, JPG, PNG-8 եւ PNG-24, այլեւ SWF եւ SVG- ում: Ինդեքսավորված պատկերներ, որոնք ունեն մի փոքր քանակություն Գույները պահվում են GIF ձեւաչափով: Օգտագործվում է ամբողջական գույնի եւ կիսալուսնի պատկերները. Լուսանկարներ եւ գունավոր հագեցած գծապատկերներ, ինչպիսիք են գրադիենտ լրացնելը jPG ձեւաչափ, Կիրառված թափանցիկ կայքեր ունեցող ամբողջական գունային պատկերների համար pNG ձեւաչափՈրը թույլ է տալիս պահպանել ինչպես ինդեքսավորված, այնպես էլ լիարժեք գունավոր պատկերներ, իսկ PNG-8 ձեւաչափով `օպտիմիզացված պատկերի գույների առավելագույն հնարավոր թիվը 256 է, իսկ PNG-24 ձեւաչափով, պատկերը կարող է ունենալ միլիոնավոր գույներ եւ Հետեւաբար կարծես թե jPEG ձեւաչափ, JPEG- ից PNG-24 տարբերությունն այն է, որ սեղմման մեթոդը օգտագործվում է PNG-24 ձեւաչափով պատկերները օպտիմալացնելու համար, չի հանգեցնում որակի կորստի, բայց արդյունքում ֆայլի չափը մեծանում է: SVG եւ SWF ձեւաչափերը համատեղում են գրաֆիկական տվյալները, տեքստը եւ ինտերակտիվ բաղադրիչները եւ կարող են նաեւ օպտիմիզացվել:

Դիտարկենք պատկերի օպտիմիզացման հատուկ օրինակ: Ենթադրենք, Illustrator ծրագիրը մշակել է կայքի խորհրդանիշ (Նկար 3), որն ի սկզբանե պահպանվել է AI ձեւաչափով: Համացանցի համար դա անմիջապես օպտիմալացնելու փորձը չի հանգեցնի որեւէ լավ բանի, քանի որ այս դեպքում կլինի պատկերի ավտոմատ թլփատությունը, որում հաշվի չի առնվի մակագրության դեֆորմացիայի արդյունքում ստացված իրական դիրքը ( Նկար 4 եւ 5):

Եկեք փորձենք արտահանվել զինանշանը pSD ձեւաչափ Թիմ File \u003d\u003e Արտահանել (File \u003d\u003e Արտահանում) - Ստեղծված պատկերի չափը կլինի 143 KB: Բացեք արդյունքում ստացված PSD ֆայլը եւ օգտագործեք հրամանը File \u003d\u003e Խնայեք վեբի համար (Ֆայլ \u003d\u003e Խնայողություն վեբի համար): Հաշվի առնելով այս դեպքում պատկերով ներգրավված գույների սահմանափակ քանակը, GIF ձեւաչափը օպտիմալ է, որի առանձնահատուկ պարամետրերը եւ պետք է որոշեք: Փորձեր ունենալով պարամետրերը, կարող եք համոզվել, որ լավագույն որակը տալիս է ընտրված սեղմման ալգորիթմը `ընտրված լռելյայն ծրագրով Ընտրողական (Ընտրովի): Ինչ վերաբերում է հարթեցմանը, հաշվի առնելով գրադիենտ լցնելի առկայությունը, ավելի լավ է ընտրել ալգորիթմ `աղմուկի սերունդով - Աղմուկ. (Նկար 6): Արդյունքում ֆայլի օպտիմիզացման չափը կկազմի 6,729 KB (Նկար 7), իսկ ֆոնային թափանցիկությունը կփրկվի, ինչը հեշտ է, որ HTML ֆայլը պահեք GIF ձեւաչափով պատկերը (Նկար 8): Արդյունքում, այս օրինակում Emblem.html եւ Emblem.gif ֆայլերը ստացվել են Primer1 թղթապանակում:

Կոճակներ

Any անկացած վեբ էջերի անփոխարինելի հատուկ տարրը գրաֆիկական հսկողություն է `կոճակներ: Ուղղակի անհնար է պատկերացնել առանց նրանց: Նկարչական կոճակները այսօր դարձել են հատուկ ժանր, եւ նկարազարդողը թույլ է տալիս ստեղծել առավել բարդ տարբերակներ: Օրինակ, կոճակները, որոնք զարդարված են որպես ցանցային առարկաներ եւ (կամ) դիմակների կիրառմամբ, շատ ավելի արդյունավետ են թվում:

Դիտարկենք Illustrator ծրագրում շրջանաձեւ ուռուցիկ կոճակը ստեղծելու տարբերակը: Նկարեք վեկտորի օբյեկտը կամայական գույնով շրջապատի տեսքով (Նկար 9) եւ վերափոխեք այն ցանցային հրամանատարության Օբեկտ \u003d\u003e Ստեղծեք գրադիենտ ցանց (Օբեկտ \u003d\u003e Ստեղծեք գրադիենտ ցանց), նշելով չորս տող եւ չորս սյուն, իսկ ցուցակի մեջ Արտաքին տեսք (Դիտում) Ընտրելով տարբերակը Կենտրոնում: Առանձնացնել (Լուսարձակ) հավասար է 60-ի (նկ. 10): Ընտրեք գործիք Ուղղակի ընտրություն եւ կտտացրեք օբյեկտի վերին ձախ անկյունում `ընտրելով այնտեղ հանգույցային կետերը (Նկար 11): Փոխեք համապատասխան խցիկի գույնը սպիտակ գույնի վրա `ընտրելով այն ներկապնակում Swatches. (Նկար 12):

Վերցրեք գործիքը Էլիպս (Ellipse), մկնիկի մարկը տեղադրեք այս շրջանի առաջ ստեղծված կենտրոն եւ պահելով ստեղները Alt. մի քանազոր Shift., Ձգեք նոր շրջանակի վերեւում, որպեսզի պարզվի, որ բոլոր կողմերից 1-2 պիքսել է: Արա նրա սեւ սահմանը ( Ինսուլտ) 1-2 պիքսել լայնությունը եւ լցնել ճառագայթային գրադիենտը դեպի կարմիրը դեպի սպիտակ (Նկար 13): Քաշեք ստեղծված վեկտորի օբյեկտը 1-2 պիքսելում աջ եւ ներքեւ, ապա առանց ընտրությունը հանելու, կտտացրեք այն մկնիկի աջ կոճակով եւ ընտրեք հրամանը համատեքստի ընտրացանկից: Կազմակերպել \u003d\u003e Ուղարկել դեպի ետ (Տեսակ \u003d\u003e Ուղարկել ետ): Արդյունքում, պարզվում է, որ թուզը ցուցադրված կոճակի համար դատարկ է: տասնչորս:

Որպես կանոն, ցանկացած վեբ էջում կան մի քանի նմանատիպ կոճակներ, որոնք տարբերվում են, օրինակ, դրանց վրա գծված նետերի միայն ուղղությունը, նկատի ունենալով տեղանքի երկայնքով շարժման ուղղությունը: Դիտարկենք երկու կոճակների առկայության ամենահեշտ դեպքը, որոնցից մեկը, ներքեւի սլաքով, կնշանակի շարժվել Հաջորդ էջը, Իսկ սլաքի սլաքի կոճակը նախորդի վրա է: Որպես հավաքող սլաք, մենք վերցնում ենք սովորական եռանկյունով, որը նկարված է գործիքով Պոլիգոն: (Պոլիգոն), ներկված սեւ եւ ավելի մեծ ազդեցության համար, որը զարդարված էր նաեւ որպես ցանցային առարկա: Տեղափոխեք սլաքը կոճակի վրա եւ կարգավորեք բոլոր առարկաների դիրքը միմյանց նկատմամբ միմյանց նկատմամբ, օգտագործելով համապատասխան պալիտրա կոճակները: Շարել. (Հավասարեցում): Ստացված կոճակներից առաջինը ներկայացված է Նկ. 15. Մենք կկազմենք մի շերտ կոճակով `ընտրելով հրամանը Կրկնօրինակ շերտ: Շերտեր:- Արդյունքում մենք ստանում ենք երկու նույնական շերտ: Այնուհետեւ շերտի պատճենների վրա ընտրեք սլաքը եւ միացրեք այն 180 °, ընտրելով հրամանը Համատեքստի ընտրացանկից Փոխակերպել \u003d\u003e պտտել - Փոխակերպում \u003d\u003e պտտել: Մենք ստանում ենք նույն կոճակը, ինչպես ցույց է տրված Նկ. 16. Նշեք, որ շատ ավելի հարմար է պահել բոլոր նույն նախագծային կոճակները `մեկ ֆայլով մեկ ֆայլով պահելու համար տարբեր շերտերի վրա, որոնք ցուցադրվում են այս դեպքում:

Այժմ անհրաժեշտ է պահպանել օպտիմիզացված տարբերակները յուրաքանչյուր կոճակներից: Սկզբում կատարեք անտեսանելի ներքեւի շերտ `այս դեպքում վերին շերտի կոճակը կփրկվի: Ընտրեք թիմ File \u003d\u003e Խնայեք վեբի համար (File \u003d\u003e Պահել վեբ-ի համար), օրինակ, կարգաբերել կոճակի օպտիմիզացման ընտրանքները, օրինակ, ինչպես ցույց է տրված Նկ. 17 Կտտացրեք կոճակը Պահել (Պահպանել) եւ մուտքագրել ֆայլի անվանումը: Վերջում պահված կոճակը ներկայացված է Նկ. 18. Այժմ վերափոխեք տեսանելիությունը ներքեւի շերտով, իսկ վերին մասը կլինի անտեսանելի եւ նույն ձեւով, պահեք երկրորդ կոճակը, նշելով դրա համար մեկ այլ անուն: Արդյունքը ներկայացված է Նկ. տասնիններ

Այժմ մնում է համոզվել, որ կոճակները բավականին ընդունելի տեսք ունեն վեբ էջում եւ դրանք տեղադրեք կամայական էջի վրա (Նկար 20): Արդյունքում, այս օրինակում, նախնական 2.html ֆայլերը ստացվել են պատկերների պանակում երկու գրաֆիկական պատկերներով: Primer2.).

Desired անկության դեպքում, օպտիմիզացման գործընթացում կոճակը հեշտ է մի կտոր վերածվել: Այս դեպքում հրամանը ընտրելուց հետո File \u003d\u003e Խնայեք վեբի համար (File \u003d\u003e Պահպանել վեբ-ի համար) եւ օպտիմիզացման ընտրանքների տեղադրում պետք է ընտրվի գործիքի գործիքների պալիտրաից Slice ընտրեք:(Կտորների բաշխում) եւ կրկնակի կտտացրեք պատկերի վրա, որը, ի վերջո, ինքնաբերաբար կվերածվի սլայդի, 1-ին հաջորդականության համար (Նկար 21): Կրկնակի սեղմեք մկնիկը կհանգեցնի պատուհանի բացմանը Կտոր ընտրանքներ: (Slace ընտրանքներ), որում անհրաժեշտ կլինի հղումը նշել, եւ ցանկության դեպքում փոխեք կտրատված անունը (նկար 22), ապա պահեք օպտիմիզացված պատկերը: Այս դեպքում արդյունքը կլինի Primer3.html ֆայլերը (Նկար 23) եւ Primer3.gif (primer3 թղթապանակ):

Ինտերակտիվ տարրեր

Էջը վերակենդանացնելու ձեւերից մեկը դիզայնի տարրերի ներդրումն է, որը փոխում է իրենց արտաքին տեսք (կամ պայմանը) կախված մկնիկի պահվածքից կամ, ավելի քիչ հավանական է, ցանկացած այլ իրավիճակի դեպքում `մասշտաբավորում, պտտվում, բեռնվում, սխալների առաջացում եւ այլն:

Նման տարրերի մեջ Rollovers- ը ստացավ ամենամեծ համբավը (անգլերենից: Roll over - Roll) - մկնիկի ազդեցության տակ տեսքը փոխող տարրեր: Բնորոշ ռոլովների օրինակներն անիմացիոն կոճակներ են: Rollovers- ը հաճախ օգտագործվում է եւ կայքի այլ նավիգացիոն տարրեր ստեղծելիս: Փաստորեն, ցանկացած շրջադարձ չէ, բայց մի քանի (մինչեւ չորս) պատկեր, որոնցից յուրաքանչյուրը համապատասխանում է հատուկ իրադարձությանը: Հիմնական իրադարձությունները սովորական են հետեւյալ կերպ. Նորմալ - նորմալ պետություն, ավելի շուտ `մկնիկի կուրսորը դեպի տարր եւ ներքեւ, սեղմելով մկնիկի ձախ կոճակը, երբ սայթաքում եք կուրսորը: Տեսականորեն, իրադարձությունները կարող են ներգրավվել որպես կտտացում. Թողարկեք մկնիկի ձախ կոճակը սեղմելուց հետո, վերեւից հետո `ակտիվ գոտուց դուրս գալուց հետո: Այնուամենայնիվ, գործնականում այն \u200b\u200bավելի հաճախ սահմանափակվում է տարրի փոփոխություններով միայն առաջին երեք կամ նույնիսկ երկու իրադարձությունների վրա:

Դասական դերասան

Դասական ընկալմամբ, Rollover- ը GIF ձեւաչափով գրաֆիկական պատկերների շարք է եւ համապատասխան HTML կոդ, որի պատճառով, կախված մկնիկի պահվածքից, մեկ պատկեր է փոխարինվում դիտորդի պատուհանից:

Illustrator ծրագիրը նպատակ չունի ուղղակիորեն ստեղծել ռոլովեր իրենց դասական ընկալման մեջ, բայց դա կարող է օգնել նրանց համար նախնական տարրերը մշակելիս: Այս գործի գաղափարն այն է, որ դուք պետք է մի շերտ ստեղծեք առաջին միջոցառմանը համապատասխան պատկերով: Այնուհետեւ պատրաստեք շերտի պատճենը եւ վերափոխեք պատկերը, որպեսզի այն համապատասխանի երկրորդ իրադարձությանը եւ այլն: Արդյունքում MultiLayer պատկերը արտահանվում է PSD ֆայլ `շերտերի պահպանմամբ, որի հիման վրա ստեղծվում է ROLOVER- ը Պատկերների պատրաստ ծրագրում: Ավելին, Illustrator ծրագրի օգտագործումը, ինչպես եւ շատ այլ դեպքերում, մի շարք հետաքրքիր հնարավորություններ է, որոնք անհասանելի են այլ կերպ Ծրագիր, վերափոխման վեկտորի գրաֆիկայի հարմարության հետ միասին:

Եկեք փորձենք ստեղծել վերափոխում `մակագրության փոփոխվող գույնի տեսքով, կախված մկնիկի պահվածքից: Բացեք նկարազարդիչը եւ ստեղծեք ձեւ, կլորացված եւ սեւ ուղղանկյունի տեսքով (Նկար 24), այն պատճենեք եւ տեղադրեք այն էկրանի անվճար մասում: Ուղղանկյունի առաջին օրինակը վերածեք կենտրոնում լուսավորությամբ ցանցի օբյեկտին (թիմ Օբեկտ \u003d\u003e Ստեղծեք գրադիենտ ցանց - Օբեկտ \u003d\u003e Ստեղծեք գրադիենտ ցանց), նշելով չորս տող եւ տաս սյուն (Նկար 25): Ակտիվացրեք ուղղանկյունի երկրորդ օրինակը եւ կարգավորեք գրադիենտ Լրացրեք դրա համար հետեւյալ կերպ, ինչպես ցույց է տրված Նկ. 26. Ստուգեք ցանցի վերեւում գրադիենտային օբյեկտը, իջեցրեք գրադիենտ օբյեկտի անթափանցությունը մոտ 80% -ին, իսկ չափը մոտ 1 պիքսել է, որպեսզի վերջում սիմոտիզացվի փչոցի ազդեցությունը: Եվ ապա տպեք մակագրությունը օբյեկտների վերեւում: Բնօրինակ ձեւով, թող այն ունենա սպիտակ գույն, որը կհամապատասխանի նորմալ վիճակին (Նկար 27), այնուհետեւ, վերափոխման վերջավորությունը փոխելիս, օրինակ, կանաչի գույնը, երբ դու Սավառնել մկնիկի ցուցիչը դրա վրա (ավելի քան պետության) եւ կապույտի վրա, երբ սեղմում եք մկնիկի կոճակը (նշեք ներքեւ):

Ուշադրություն դարձրեք պալիտրա Շերտեր: - Այս փուլում դրա մեջ կա միայն մեկ շերտ: Պատրաստեք այս շերտի երկու օրինակ `հրամանը կիրառելով: Կրկնօրինակ շերտ: (Կրկնօրինակ շերտ) պալիտրա ընտրացանկից Շերտեր:- Ներկապնակում կդառնան երեք շերտ (Նկար 28): Այնուհետեւ շերտի առաջին օրինակում փոխեք արձանագրության գույնը կանաչի վրա, իսկ երկրորդում `կապույտի վրա (Նկար 29): Արդյունքում կստացվի Rollover- ի անհրաժեշտ աշխատանքային մասը:

Ստեղծված պատկերը արտահանեք PSD ձեւաչափով `հրամանը օգտագործող շերտերի պահպանմամբ File \u003d\u003e Արտահանել (File \u003d\u003e Արտահանում) եւ ընտրելով RGB գույնի մոդելը (Նկար 30): Բացեք ստեղծված PSD ֆայլը Imagoweady ծրագրում (Նկար 31 եւ 32): Ստեղծեք շրջանակներ, հիմնվելով շերտերի վրա `ընտրելով հրամանը Շերտեր կազմեք շերտերից (Ստեղծեք շրջանակներ շերտերից) պալիտրա ընտրացանկից Անիմացիա:, Անիմացիոն պատուհանը կանդրադառնա ինչպես FIG- ում: 33. Միեւնույն ժամանակ ներկապնակում Rollovers Սկզբնապես կստեղծվի նորմալ նորմալ վիճակ:

Հետո պատուհանում Անիմացիա:Ընտրեք ներբեռնված վիճակին համապատասխան շրջանակը, գտնվելու ընթացքում Շերտեր: Ինքնաբերաբար առանձնացրեք շերտը Շերտ 1 օրինակ (Նկար 34): Գնացեք պալիտրա Rolloversեւ կտտացրեք կոճակը Ստեղծեք Rollover State (Ստեղծեք շրջադարձային պայման) - Նկար: 35, որը կհանգեցնի պետության տեսքին ՊետությունՆերկապիկում Rollovers(Նկար 36): Նմանապես, ստեղծեք պետություն Ներքեւ պետություն, Ակտիվացրեք վիճակը Նորմալ Ներկապիկում Rollovers Եւ հեռացրեք պալիտրա Անիմացիա: Բացի այդ, բոլոր շրջանակները, որոնք պետք է համապատասխանեն պետությանը Նորմալ, Արդյունքում, պալիտրաում ռոլովերով յուրաքանչյուր պետության համար Անիմացիա:Կլինեն միայն մեկ շրջանակ (Նկար 37, 38 եւ 39):

ՆկՂ 38. Դիտեք պատկերը, անիմացիան պատուհանները եւ շերտերը եւ շրջապտույտները `պետական \u200b\u200bկարգավիճակի համար

Ստուգեք արդյունքը `կտտացնելով կոճակը Նախադիտումը լռելյայն զննարկչի մեջ (Զննարկիչում նախադիտում) գործիքագոտում եւ վերածվելով զննարկչի պատուհանի (Նկար 40): Դրանից հետո պահեք ֆայլը `դիմելով հրամանը: File \u003d\u003e Օպտիմիզացված (File \u003d\u003e Պահպանեք օպտիմիզացիայով) եւ նշելով տարբերակը HTML եւ պատկերներ (* .html), Արդյունքում, այս օրինակում ձեռք են բերվել Primer4.html ֆայլը եւ պատկերների պանակում պատկերների մի շարք գրաֆիկական պատկերներ:

ՆկՂ 40. Զննարկչի պատուհանը `Rollover- ի տարրով

SVG ROLOVIER

Հանրաճանաչ SVG ձեւաչափ (մասշտաբային վեկտորային գրաֆիկա `փոփոխելի Վեկտորի գրաֆիկա), որը ստեղծվել է XML ստանդարտի հիման վրա, նաեւ թույլ է տալիս ձեռք բերել մի շարք ինտերակտիվ տարրեր, մասնավորապես, ROLOVERS, միայն գործնականում այն \u200b\u200bիրականացվում է բոլորովին այլ կերպ: Հատկանշական է, որ ինտերակտիվ SVG-Rollovers- ի ստեղծումը, ի տարբերություն դասականի, երբ համապատասխան HTML կոդը ստեղծվում է լիովին ինքնաբերաբար, պահանջում է գիտելիքներ javaScript լեզու եւ հասկանալ օբյեկտի վրա հիմնված ծրագրավորման հիմնական սկզբունքները:

Հատուկ պալիտրա նախագծված է SVG օբյեկտների հետ աշխատելու համար: SVG ինտակտիվությունորը հեշտ է բացվել թիմի օգնությամբ Պատուհան \u003d\u003e SVG ինտակտիվություն (Պատուհան \u003d\u003e SVG ինտակտիվություն) - Նկ. 41:

Դիտարկենք ինտերակտիվ կոճակի օրինակով վերափոխելու այս տարբերակը, մակագրության գույնը սեւից կփոխվի, երբ մկնիկը սավառնեք, երբ մկնիկը դուրս է գալիս:

Ստեղծեք ուղղանկյուն կոճակ `կլորացված եզրերով եւ վերցրեք համապատասխան գրադիենտ Լրացրեք դրա համար, օրինակ, ինչպես ցույց է տրված Նկ. 42. Կարգավորեք ներքեւի կոճակի թափանցիկությունը պալիտրա Թափանցիկ (Թափանցիկություն) - այս օրինակում պարամետրի արժեքը Անթափանցիկություն (Անթափանցիկությունը) սահմանված է 50%: Կատարեք կոճակների պատճենը, լրացրեք այն մուգ կանաչով (Նկար 43), այնուհետեւ այն վերափոխեք ցանցի օբյեկտի հրամանին Օբեկտ \u003d\u003e Ստեղծեք գրադիենտ ցանց(Օբեկտ \u003d\u003e Ստեղծեք գրադիենտ ցանց), նշելով չորս տող եւ տաս սյուն, իսկ ցուցակի մեջ Արտաքին տեսք(Դիտում) Ընտրելով տարբերակը Կենտրոնում: (Կենտրոնին) եւ արժեքը սահմանելը Առանձնացնել (Backlight) հավասար է 100-ին: Նվազեցրեք շերտի անթափանցիկությունը ցանցային օբյեկտով `այո 40% -ի մասին (Նկար 44): Տեղադրեք ցանցի օբյեկտը գրադիենտի վրա, իսկ կոճակը կհիշեցվի FIG- ում: 45:

ՆկՂ 44. Կոճակի պատճենը ցանցի օբյեկտի վերածելը

Լրացրեք առաջարկվող մակագրության կոճակը եւ կարգավորեք դրա դիրքը `օգտագործելով համապատասխան պալիտրա կոճակները: Շարել. (Հավասարեցում): Արդյունքում ստացված պատկերը պարունակում է մեկ շերտ, միմյանց վրա գերհզոր երեք առարկաներով (Նկար 46): Նախատեսված իրադարձությունները վերաբերում են տեքստի օբյեկտին, այնպես որ հարմարության համար փոխեք նրա անունը Տեքստ:Կրկնակի սեղմելով օբյեկտը եւ նոր անուն մուտք գործելով: Նմանապես փոխեք շերտի անունը Շերտ 1 շերտով (Նկար 47):

Իրադարձությունների մշակումը ներառում է JavaScript- ի ընթացակարգեր, այնպես որ անհրաժեշտ է միացնել ֆայլը այս ընթացակարգերի նկարագրությամբ: Այն կոչվում է Events.js եւ պահվում սկավառակի վրա նմուշի ֆայլերում \\ Sample Art \\ SVG \\ SVG թղթապանակում adobe ծրագրեր Նկարազարդ: Միջոցառումները միացնելու համար. JS ֆայլը, օգտագործեք հրամանը JavaScript ֆայլեր: SVG ինտակտիվություն (Նկար 48): Հաջորդը պետք է սեղմել Ավելացնել: (Ավելացնել) եւ գտնել ցանկալի ֆայլը կոշտ սկավառակի վրա: Երբ նրա անունը հայտնվում է դաշտում Url (Նկար 49), կտտացրեք կոճակը Կատարած (Դուրս գալ).

ՆկՂ 48. JavaScript ֆայլերի թիմի ընտրություն

Դրանից հետո որոշեք արձագանքը մկնիկի իրադարձություններին օբյեկտի համար Տեքստ:, Ընտրեք դաշտում տեքստային օբյեկտը Միջոցառում (Իրադարձություն) Պալետներ SVG ինտակտիվություն Ընտրեք իրադարձություն onmouseover elemcolor (EVT, "Text", "# 3333FF") - դա կնշանակի, որ երբ մկնիկ եք գտնում օբյեկտի վրա Տեքստ:Դրա գույնը կփոխվի կապույտ (Նկար 50): Ակտիվ գոտի մուտք գործելուց հետո տեքստի տեքստը պատրաստելու համար տեքստի գույնը փոխվել է սեւ գույնի վրա, անհրաժեշտ կլինի ստեղծել մեկ այլ իրադարձություն: onmouseout:- Ընտրեք այն դաշտում Միջոցառում (Իրադարձություն) Պալետներ SVG ինտակտիվություն, Ապա մուտքագրեք տեքստը շարքում elemcolor (EVT, "տեքստ", "# 000000")- Սա կհանգեցնի սեւ գույների վերադարձին (Նկար 51):

ՆկՂ 51. SVG ինտերակտիվության պալիտրա վերջնական տեսակետը օբյեկտի տեքստի համար

Պահպանեք ստեղծված վերափոխումը որպես SVG ֆայլի հրաման File \u003d\u003e Պահել, ինչպես (Ֆայլ \u003d\u003e Ֆայլի տեսակը ձեւաչափ Svg.Եվ ապա կազմաձեւեք SVG ֆայլերի խնայողության տարբերակը, ինչպես ցույց է տրված Նկ. 52. Խնայողությունից հետո կստացվի ընդամենը մեկ մեկ ֆայլ, ընդլայնման SVG- ով, եւ ոչ թե երկուսը, ինչպես դասական վերափոխման դեպքում, այս դեպքում ստացվել է Primer5.svg ֆայլը (Primer5 թղթապանակ): Այնուամենայնիվ, որպեսզի իրականում աշխատի, անհրաժեշտ է պատճենել իրադարձությունները. JS ֆայլը `SVG ֆայլով թղթապանակում JavaScript- ի նկարագրությամբ: Դրանից հետո դուք կարող եք ստուգել վերափոխման կատարումը. Արդյունքը նման կլինի FIG- ում: 53.

SVG անիմացիա

SVG ձեւաչափը կարող է օգտագործվել անիմացիան փոխանցելու համար: Փորձենք ստեղծել ամենապարզ անիմացիոն տարրը (այս դեպքում դա տեղեկատվություն կլինի ընկերության մասին), որը կհայտնվի էկրանին, երբ մկնիկը դիմահարդարում եք համապատասխան գրաֆիկական օբյեկտի վրա եւ անհետանում եք մկնիկը ինտերակտիվ տարրից:

Ստեղծեք մոտավորապես այնպիսի գրաֆիկական եւ տեքստային օբյեկտների, ինչպես ցույց է տրված Նկ. 54. Մենք վերանվանելու ենք բոլոր ստեղծված առարկաները, որոնք հետեւողականորեն կտտացնում են պալիտրա հաջորդ օբյեկտի անունը: Շերտեր: եւ ներկայացնելով ցանկալի անունը (Նկար 55): Խնդրում ենք նկատի ունենալ, որ ընդգծված է Նկ. 56 օբյեկտ - Տեքստ 1, տեքստ 2, տեքստ 3 մի քանազոր Ուղի - Միշտ տեսանելի կլինի, եւ մնացած բոլորը `միայն այն ժամանակ, երբ դու մկնիկը սավառնես Տեքստ 1.

ՆկՂ 54. Պատկերի բնօրինակ տեսակը

Միացրեք իրադարձությունները. JS ֆայլը JavaScript- ի ընթացակարգերի նկարագրությամբ `կիրառելով հրամանը: JavaScript ֆայլեր: (JavaScript ֆայլեր) ներկապնակից SVG ինտակտիվությունՍեղմելով կոճակը Ավելացնել:(Ավելացնել) `ճշգրտելով ցանկալի ֆայլը կոշտ սկավառակի վրա եւ կտտացնելով կոճակը Կատարած (Դուրս գալ).

Որոշեք օբյեկտի համար մկնիկի իրադարձությունների արձագանքը Տեքստ 1, Ընտրեք օբյեկտ Տեքստ:, դաշտում Միջոցառում (Իրադարձություն) Պալետներ SVG ինտակտիվությունԸնտրեք իրադարձություն onmouseover Եվ ներքեւում գտնվող տողում մուտքագրեք տեքստը elemshow (EVT, "TEXT4"); Elemshow (EVT, "PATH2"), Արդյունքում, օբյեկտի վրա մկնիկ գտնելիս Տեքստ 1 կդառնան տեսանելի առարկաներ Տեքստ 4: մի քանազոր PATH2., Նկատի ունեցեք, որ եթե իրադարձություն տեղի ունենա, պետք է իրականացվեն մի քանի գործողություններ, ապա դրանք պետք է նշվեն «;» նշանով: Այնուհետեւ նմանատիպ գործողություն, հաշվի առեք իրադարձությունը: onmouseout:Դրա համար տեքստ մուտքագրելով, ինչը կնշանակի թաքցնել առարկաները (Նկար 57):

Պահպանեք արդյունքը որպես SVG ֆայլի հրաման File \u003d\u003e Պահել, ինչպես (Ֆայլ \u003d\u003e Պահպանել որպես) `նշելով ֆայլի անվանումը` ընտրելով ոլորտում Ֆայլի տեսակը SVG ձեւաչափ, այնուհետեւ կազմաձեւելով SVG ֆայլերի խնայողության տարբերակը ըստ FIG- ի: 58. Խնայողությունից հետո կստացվի Primer6.svg ֆայլը (Primer6 թղթապանակ): Մի մոռացեք պատճենել իրադարձությունները. JS ֆայլը այս ֆայլով թղթապանակով: Եթե \u200b\u200bայնուհետեւ վազում եք փոփ Այս ֆայլըԴուք կտեսնեք FIG- ում ներկայացված արդյունքը: 59. Սա գրեթե այն է, ինչ ձեզ հարկավոր է: Միակ բանը, որ ներառված չէր մեր ծրագրերում, օբյեկտների նախնական տեսքն է: Տեքստ:4 I. Ուղու2-ը բեռնման ժամանակ: Այս թերությունից ազատվելու համար ընտրեք ինչպես օբյեկտի տվյալները միանգամից եւ գործողություն ստեղծեք նրանց համար: elemhide (EVT, "TEXT4"); Elemhide (EVT, "PATH2") Մի իրադարձության ժամանակ Բեռնաթափում: (Նկար 60): Կրկին պահեք ֆայլը եւ համոզվեք, որ այժմ օբյեկտներ Տեքստ 4: մի քանազոր PATH2. Տեսանելի է միայն մկնիկը օբյեկտի վրա սավառնելու ժամանակ Տեքստ 1.

GIF անիմացիա

Any անկացած վեբ էջը անհնար է առանց վեբ անիմացիայի, ներառյալ առանց անիմացիոն GIF'OV: Նրանց ստեղծման տարբերակներից մեկը Adobe Imageady հավելվածը կիրառելն է, որը թույլ է տալիս ստեղծել անիմացիա շերտերից: Միեւնույն ժամանակ, բազմաշերտ պատկերը կարող է պատրաստվել տարբեր ծրագրերում, ներառյալ Adobe Illustrator- ը:

Շատ հեշտ է ստեղծել անիմացիա, որը հիմնված է ներկապնակից տարրերի վրա Խորհրդանիշներ: (Խորհրդանիշներ) հրամանով բացվել է Պատուհան \u003d\u003e Նշաններ (Պատուհան \u003d\u003e Անձնավորություններ) կամ խորհրդանշական գրադարաններից մեկը, որը կարող է բացվել `հրամանը կիրառելով Պատուհան \u003d\u003e Սիմվոլների գրադարաններ (Պատուհան \u003d\u003e խորհրդանիշի գրադարաններ):

Օրինակ, մենք կփորձենք բարձրացնել ցանկացած խորհրդանիշի օբյեկտի չափը, օբյեկտի բարձրացման օբյեկտի հիմնական քայլերը պետք է սահմանվեն առանձին շերտերի վրա: Սկզբում պարզապես տեղադրեք օբյեկտի խորհրդանիշը մյուսի վրա, այնուհետեւ բարձրացրեք յուրաքանչյուր հետեւյալ օբյեկտի չափը, օրինակ, ինչպես ցույց է տրված Նկ. 61. Արդյունքում, պալիտրա Շերտեր: Ստեղծվելու է մի շարք մի շարք օբյեկտներ (Նկար 62): Եթե \u200b\u200bայս պատկերը ուղղակիորեն արտահանեք PSD ձեւաչափով, ապա դա ոչինչ չի տա, քանի որ շերտը մեկն է, եւ, բնականաբար, PSD ֆայլը բացելիս նույնպես կլինի միայն մեկ շերտ: Հետեւաբար, նախապես անհրաժեշտ է տարբեր շերտերի վրա առարկաներ տեղադրել: Դա կարելի է անել տարբեր ճանապարհներ - Ամենահեշտ ձեւը առաջին հերթին ընդգծելու է շերտը Շերտ 1. շերտերի պալիտրա եւ օգտագործեք թիմը Ազատ արձակել շերտին: (Թողարկեք շերտերի մեջ): Արդյունքը կլինի ձեր շերտի յուրաքանչյուր օբյեկտի շարժը, բայց դրանք բոլորը բույն են լինելու շերտի մեջ Շերտ 1., Հետեւաբար, դուք ստիպված կլինեք ձեռքով քաշել բոլոր ներդրված շերտերը շերտերի պալիտրա վերին մասում, որպեսզի դրանք շերտից վերեւ լինեն Շերտ 1:եւ հետո դարձավ դատարկ շերտ Շերտ 1. Պարզապես հեռացրեք (Նկար 63): Արտահանեք պատկերը PSD ձեւաչափով `դիմելով հրամանը File \u003d\u003e Արտահանել (File \u003d\u003e արտահանում) տեղադրումներով, ինչպես FIG- ում: 64.

Վերբեռնեք ստեղծված PSD ֆայլը Imageady ծրագրում (Նկար 65 եւ 66): Բացեք պալիտրա ընտրացանկը Անիմացիա: Շերտեր կազմեք շերտերից (Ստեղծեք շրջանակներ շերտերից): Արդյունքում կստեղծվեն հինգ շրջանակ, որոնցից յուրաքանչյուրը կհամապատասխանի նրանց շերտին, իսկ պալիտրա պատուհանը Անիմացիա: կանդրադառնա ինչպես Նկ. 67:

Դրանից հետո սահմանեք ստեղծված շրջանակներից յուրաքանչյուրի տեւողությունը `այս դեպքում, բոլոր շրջանակների համար տեղադրված է 0.2-ի տեւողությունը: Եվ հետո փրկեք անիմացիան օպտիմիզացիայի միջոցով `օգտագործելով հրամանը: File \u003d\u003e Օպտիմիզացված (File \u003d\u003e Պահպանեք օպտիմիզացիայով): Ստացված արդյունքը կարող է նմանվել թուզ: 68:

Նույնիսկ ավելի հարմար է բիլետներ ձեռք բերել, որոնք հեշտ է վերածվել անիմացիայի, օգտագործեք գործառույթները Կենդանի խառնուրդներ: Illustrator ծրագրեր: Illustrator- ի եւ Imageready ծրագրերի նման համակցված կիրառումը զգալիորեն արագացնում է GIF անիմացիաների ստեղծման գործընթացը:

Օրինակ, նկարեք երկու կամայական բազմաշերտ առարկաներ, ապա կապեք դրանց խառնուրդը համապատասխան պարամետրերով (Նկար 69): Անիմացիա ստեղծելու համար անհնար է ուղղակիորեն օգտագործել այս ֆայլը, քանի որ պատկերը մեկ շերտի վրա է (Նկար 70): Հետեւաբար, դա անհրաժեշտ կլինի կանխագուշակ առարկայի յուրաքանչյուր տարր, որը պետք է տեղադրվի առանձին շերտի վրա: Դա անելու պատուհանում Շերտեր: Ներկիր տողը , ակտիվացրեք պալիտրա ընտրացանկը `կտտացնելով սեւ սլաքը իր վերին աջ անկյունում եւ ընտրեք հրամանը Ազատ արձակել շերտերի հաջորդականությանը (Հաջորդաբար վերածվում շերտերի) (Նկար 71): Պահել Shift., կարեւորեք ստեղծված շերտերը եւ տեղադրեք դրանք շերտից վեր: Շերտ 1.եւ ապա հեռացրեք շերտը Շերտ 1., այն տեղափոխելով զամբյուղ - Արդյունքում, շերտերի ներկապնակը կվերցնի նույն տեսքը, ինչպես FIG- ում: 72.

ՆկՂ 70. Շերտերի պատուհանի սկզբնական վիճակը

Արտահանում է ստեղծված ֆայլը PSD հրամանի ձեւաչափին File \u003d\u003e Արտահանել (File \u003d\u003e արտահանում): Բացիր ստեղծված PSD ֆայլը Imagow- ում (Նկար 73): Նկատի ունեցեք, որ շերտերում պատուհանում կհայտնվեն ծրագրում ստեղծված բոլոր շերտերը (Նկար 74) եւ պատուհանի մեջ Անիմացիա: Կլինի միակողմանի շրջանակ:

Ակտիվացրեք պալիտրա ընտրացանկը Անիմացիա:Կտտացնելով պալիտրա վերին աջ անկյունում գտնվող սեւ սլաքը եւ ընտրեք հրամանը Շերտեր կազմեք շերտերից (Ստեղծեք շրջանակներ շերտերից) - Արդյունքում, այս օրինակում կստեղծվեն հինգ շրջանակ, եւ կստեղծվի պալիտրա պատուհանը: Անիմացիա: Տեսնում է, թե ինչպես է համապատասխան: 75. Կարեւորեք բոլոր շրջանակները `բանալին պահելով: Shift.եւ սահմանեք շրջանակների համապատասխան տեւողությունը `այս օրինակում, յուրաքանչյուր շրջանակի համար, որը վերցված է նույն ժամանակ, 0.2 վրկ: Այնուհետեւ պահեք ֆայլը հրամանի օպտիմիզացիայով: File \u003d\u003e Օպտիմիզացված(File \u003d\u003e Պահպանեք օպտիմիզացիայով) `տեղադրելով ցուցակում Ֆայլի տեսակը Տարբերակ Միայն պատկերներ (* .gif), Անիմացիան նման կլինի բրինձին: 76:

Այն շատ ավելի հետաքրքիր չի թվում տեղափոխվել, բայց խառնուրդի օբյեկտների չափի սահուն փոփոխություն: Օրինակ, արդեն կարող եք օգտագործել արդեն ստեղծված խառնուրդի անցումը: Այս դեպքում, յուրաքանչյուր խառնուրդի անցումային տարրի համար առանձին շերտեր ստեղծելուց հետո տեղադրեք բոլոր առարկաները միմյանց վրա, օգտագործելով կոճակները Հորիզոնական հավասարեցված կենտրոն(Հավասարեցումը կենտրոնի հորիզոնական) եւ Ուղղահայաց հավասարեցված կենտրոն: (Հավասարեցում կենտրոնի ուղղահայաց) պալիտրա Շարել. (Նկար 77):

Ստեղծված ֆայլը արտահանեք PSD ձեւաչափով ( File \u003d\u003e Արտահանել- File \u003d\u003e Արտահանում) եւ բացեք ստեղծված PSD ֆայլը Imagow- ում (Նկար 78): Ստեղծել անիմացիոն շրջանակների շերտերի հիման վրա ( Շերտեր կազմեք շերտերից - Շերտեր ստեղծեք շերտերից) եւ ընտրեք նրանց համար հարմար տեւողությունը (Նկար 79): Եվ հետո, անիմացիան ավելի տպավորիչ դարձնելու համար պատճենեք առկա շրջանակները, բայց հակառակ կարգով, որպեսզի պատկերը առաջինը մեծանա, ապա կնվազի, եւ այդպես, մի \u200b\u200bշրջանակի մեջ (Նկար 80): Այնուհետեւ պահպանեք օպտիմիզացման ֆայլը ( File \u003d\u003e Օպտիմիզացված- File \u003d\u003e Պահպանեք օպտիմիզացիայով): Արդյունքում ստացված անիմացիան ներկայացված է Նկ. 81:

ՆկՂ 80. Անիմացիոն պատուհանի կարգավիճակը շրջանակների կրկնօրինակմամբ

ՆկՂ 81. Ավարտված անիմացիա

Այսօր մենք այնքան էլ սովորական չենք Դաս Adobe. Նկարազարդ: Քանի որ այս անգամ մենք ստատիկ պատկեր չենք անի, բայց առավել իրական անիմացիան: Պատկերացրեք, պարզվում է, որ հետ է օգտագործելով Adobe: Պատկերատորը կարող եք նաեւ նկարել մուլտֆիլմեր :)

Եվ մենք դրա համար ոչինչ պետք չէ: Շերտերի իրավասու կազմակերպումը եւ վերջնական աշխատանքի արտահանումը SWF ձեւաչափով, որտեղ յուրաքանչյուր շերտ վերածվում է անիմացիայի շրջանակներում: Այսօրվա դասում մենք ռետրո ոճով հաշմանդամության անիմացիա ենք անում: Արդյունքում, սա Flash Movie- ն է `հենց հաշվարկը:

Առաջին բանը, որ պետք է արվի, բոլոր անհրաժեշտ իրերը նկարելու համար ապագա անիմացիայի համար: Դա անելու համար առանձին փաստաթղթում արվել է կինոնկարի երկու դիրք, հղման շրջանակը, որը կտրված է առանձին ոլորտների, հյուսվածքների եւ ուղղահայաց քերծվածքների մեջ `հնության, ինչպես նաեւ բոլոր համարների եւ մակագրությունների ազդեցությունը:

Երբ մեր մուլտֆիլմի բոլոր մասերը պատրաստ են, դուք կարող եք սկսել ինքնուրույն ստեղծել անիմացիան: Հարմարության համար ավելի լավ է անել նոր փաստաթղթում: Միեւնույն ժամանակ, շերտերը կխաղան անիմացիոն շրջանակների դերը: Եվ հենց առաջին շերտում պարզապես անհրաժեշտ է պատճենել ֆիլմի շրջանակը: Տեղադրեք այն աշխատատեղի կեսին:

Այժմ ստեղծեք երկրորդ շերտ եւ պատճենեք նկարների նկարների շրջանակը դրա մեջ, որի ընթացքում եզրերի շուրջ անցքերը կատարվում են հերթափոխով: Այն նաեւ պետք է տեղակայված լինի կենտրոնում:

Այս երկու շերտերից արդեն կարող եք ձեռք բերել շարժվող ֆիլմի անիմացիան: Բայց ավելի ուշ մեզ շատ ավելի շատ շերտեր կարիքը կունենան: Հետեւաբար, կարեւորեք առաջին երկու շերտերը, գնացեք վահանակի ընտրանքներ եւ կազմեք շերտի պատճենը:

Նմանապես, մենք պետք է կուտակել 12 շերտ, ֆիլմի շրջանակներով, խնդրելով նրա շարժումը:

Այժմ մենք ունենք մի ամբողջ փունջ շերտեր, եւ բոլորն էլ տեսանելի են: Այն իմաստով, որ վերին շերտերը արգելափակված են ստորին մասով, ինչը ամբողջովին հարմար չէ աշխատանքի համար: Հետեւաբար, դուք կարող եք անջատել որոշ շերտեր `կտտացնելով պատկերակը աչքով` շերտի անվան ձախից: Միանգամից անջատելու կամ միացնելու համար բոլոր շերտերը միացնելու համար պահեք Alt ստեղնը սեղմված, երբ կտտացրեք Glazik պատկերակին: Ներառյալ եւ շերտերը անջատելուց, դուք կարող եք տեսնել, թե ինչ է գտնվում մեր ապագա անիմացիայի որոշակի շրջանակներում: Եվ ահա, լուսավորվող թռչունին ավելացնելու համար, դուք պետք է ստացված շրջանակները մի փոքր դնեք տարբեր ուղղություններով: Դա անելու համար միացրեք միայն այն շերտը, որի հետ դուք պատրաստվում եք աշխատել այս պահինԵվ ապա շրջանակը տեղափոխեք մի զույգ պիքսել ցանկացած ուղղությամբ:

Երբ դուք անցաք բոլոր շերտերի միջով եւ ավելացնեք մի փոքր տեղաշարժ, կարող եք սկսել շարժվող շրջանակի անիմացիա ստեղծել: Դա անելու համար պատճենեք շրջանակը, որը բաղկացած է ոլորտներից, մուլտֆիլմերի պահեստամասեր ունեցող փաստաթղթից եւ դրեք այն ֆիլմի շրջանակի վրա առաջին շերտի վրա:

Եթե \u200b\u200bընտրությունը շրջանից հեռացնեք, ապա այն նման կլինի մեկ ամբողջ թիվ: Դա այն է, ինչ մեզ պետք է:

Բայց քանի որ այն բաղկացած է առանձին ոլորտներից, կարող եք փոխել նրանց գույնը, շատ արագ եւ հեշտությամբ ստեղծել անիմացիա: Դա անելու համար պատճենեք այս շրջանակը երկրորդ շերտում եւ դարձրեք առաջին ոլորտը ավելի թեթեւ: Հիշում եք, որ ֆիլմը դողում է մեքենա վարելիս, ուստի անհրաժեշտ չէ շրջանակը դնել շրջանակի կենտրոնում: Տեղադրեք այն աչքի վրա:

Նմանապես, դուք պետք է պատճենեք շրջանակը յուրաքանչյուր հաջորդ շերտի մեջ, մինչդեռ խոզանակման գիծը մեկ այլ հատվածով նկարեք նախորդ ժամանակից: Բոլորը միասին, այս 12 շերտերը ֆիլմի շարժման անիմացիա են ստեղծում լցոնման շրջանակով:

Հաջորդը, դուք պետք է մեր շերտերի մեջ ավելացնեք հյուսվածք: Միացրեք առաջին շերտը եւ պատճենեք այնտեղի հյուսվածքը աղբյուրի ֆայլից պահեստամասերով:

Այնուհետեւ, իր հերթին, միացրեք հետեւյալ շերտերը եւ այնտեղ պատճենեք նույն հյուսվածքը: Որպեսզի նա տարբեր կերպ էր թվում յուրաքանչյուր շրջանակի վրա, պարզապես միացրեք այն 90 աստիճանի անկյան տակ: Ինչպես արդեն կռահել եք, մենք պետք է հյուսվածք ավելացնենք բոլոր 12 շրջանակներում:

Եթե \u200b\u200bարդեն հոգնել եք հաղթահարելուց, ապա ես կարող եմ ձեզ մատուցել, մնում է շատ քիչ: Արդեն իսկ ամենադժվարը: Մնում է ավելացնել ուղղահայաց քերծվածքներ եւ գրեթե ամեն ինչ: Դա անելու համար կրկին պատճենեք բնօրինակ քերծվածքը եւ մի քանի շերտերի մեջ դրեք այն կամայական տեղում: Իմ դեպքում քերծվածքները հայտնվում են միայն երկու շերտերով:

Այժմ, որը պատրաստ է հիմնական ցիկլը ֆիլմի անիմացիայով, մնում է թվեր ավելացնել: Քանի որ այն գալիս է 3-ից 1-ից, գումարած մեկ այլ բառ գնա !!!, ապա մեզ պետք է նույնիսկ ավելի շատ շերտեր: Ոչ 12, բայց նույնքան 48: Դրա համար անհրաժեշտ է պատրաստել պատրաստի շերտերի եւս երեք օրինակ `ֆիլմի անիմացիայի միջոցով:

Եվ հետո ամեն ինչ պարզ է: Մենք միացնում ենք հենց առաջին շերտը եւ այնտեղ երեք համարներ ենք դնում:

Այնուհետեւ հարկավոր է պատճենել այս ցուցանիշը հետեւյալ շերտերում, մինչեւ շրջանագծի անիմացիան ավարտվի: Երբ հասնում եք շերտի հաջորդ օրինակի, որտեղ շրջանակը ամբողջովին կլրացվի ամբողջությամբ, դուք պետք է երկու համար երկու համար դնեք: Նմանապես, պատճենեք համարը ցանկալի շերտերին: Եվ երբ հասնում եք վերջնական շերտերին, նախագծված է գրելու համար !!!, պարզապես հանեք շրջանակը նախքան ցանկալի շերտում մակագրությունը պատճենելը:

Այս մասին անիմացիայի ամեն ինչ: Հիմնական բանը այստեղ շփոթված չէ: Կարող եք շերտեր տալ որոշ հարմար անուններ, բայց ես ինչ-որ կերպ ծույլ էի :) Եվ նույնիսկ երբ ես ավարտում աշխատանքը, համոզվեք, որ կտտացնելով ապակեպատման պատկերակը:

Արտահանման պարամետրերով պատուհանում, համոզվեք, որ տեղադրեք արտահանումը որպես. AI շերտեր SWF շրջանակների համար: Հենց այս տարբերակն է, որը նկարազարդող շերտերը վերածում է անիմացիոն շրջանակների: Հաջորդը կտտացրեք Advanced կոճակը:

Ընդլայնված պարամետրերը կբացվեն: Այստեղ անհրաժեշտ է սահմանել շրջանակի փոխարժեքի շրջանակը: Ես վայրկյանում ունեմ 12 շրջանակ: Ստուգման նշանի օղակը պատասխանատու է ցիկլային անիմացիայի համար: Նրա շնորհիվ տեսանյութը կկայանա շրջանի մեջ: Եվ շերտի կարգի տարբերակը. Ներքեւի վերեւում նկարահանվում է նկարազարդիչները ներքեւից ներքեւից ներքեւից: Պարզապես մենք կառուցեցինք մեր անիմացիան:

Արդյունքում մենք ստանում ենք ֆլեշ ֆիլմ մեր անիմացիայի հետ:

Այժմ տեսնում եք, որ Adobe Illustrator- ում անելիքի պարզ անիմացիան այնքան էլ դժվար չէ, որքան թվում է առաջին հայացքից:

Բայց երկարատեւ գլանափաթեթներ կամ ինտերակտիվ դիմումներ ստեղծելու համար դեռ ավելի լավ է օգտագործել Adobe Flash. Կամ այլ ֆլեշ խմբագիր: Օրինակ, այս կատուն արեցի հին մակրոմեդիա Flash- ում, որը փորվել է աշխատանքի մեջ:

Անցած անգամ HTML5- ը եւ CSS3- ը ավելի ու ավելի հաճախ օգտագործվում են անիմացիա ստեղծելու համար: Այս ծածկագիրը աջակցվում է Ժամանակակից զննարկիչներ Եւ չի պահանջում ֆլեշ նվագարկչի օգտագործում:

Roman Aka Dacaskas. Հատկապես բլոգի համար

Բաժանորդագրվեք մեր տեղեկագրին, որպեսզի որեւէ նոր բան չկարոտեք.

Այսօր մենք ունենք հստակ Adobe Illustrator դասը: Քանի որ այս անգամ մենք ստատիկ պատկեր չենք անի, բայց առավել իրական անիմացիան: Պատկերացրեք, պարզվում է, որ դուք կարող եք նաեւ մուլտֆիլմեր նկարել Adobe Illustrator- ով :)

Նմանապես, մենք պետք է կուտակել 12 շերտ, ֆիլմի շրջանակներով, խնդրելով նրա շարժումը:

Այժմ մենք ունենք մի ամբողջ փունջ շերտեր, եւ բոլորն էլ տեսանելի են: Այն իմաստով, որ վերին շերտերը արգելափակված են ստորին մասով, ինչը ամբողջովին հարմար չէ աշխատանքի համար: Հետեւաբար, դուք կարող եք անջատել որոշ շերտեր `կտտացնելով պատկերակը աչքով` շերտի անվան ձախից: Միանգամից անջատելու կամ միացնելու համար բոլոր շերտերը միացնելու համար պահեք Alt ստեղնը սեղմված, երբ կտտացրեք Glazik պատկերակին: Ներառյալ եւ շերտերը անջատելուց, դուք կարող եք տեսնել, թե ինչ է գտնվում մեր ապագա անիմացիայի որոշակի շրջանակներում: Եվ ահա, լուսավորվող թռչունին ավելացնելու համար, դուք պետք է ստացված շրջանակները մի փոքր դնեք տարբեր ուղղություններով: Դա անելու համար միացրեք միայն այն շերտը, որի միջոցով պատրաստվում եք աշխատել այս պահին, ապա շրջանակը տեղափոխել մի զույգ պիքսելների վրա:

Եթե \u200b\u200bընտրությունը շրջանից հեռացնեք, ապա այն նման կլինի մեկ ամբողջ թիվ: Դա այն է, ինչ մեզ պետք է:

Եվ հետո ամեն ինչ պարզ է: Մենք միացնում ենք հենց առաջին շերտը եւ այնտեղ երեք համարներ ենք դնում:

Արդյունքում մենք ստանում ենք ֆլեշ ֆիլմ մեր անիմացիայի հետ:

Այժմ տեսնում եք, որ Adobe Illustrator- ում անելիքի պարզ անիմացիան այնքան էլ դժվար չէ, որքան թվում է առաջին հայացքից:

Բայց երկարատեւ գլանափաթեթներ կամ ինտերակտիվ դիմումներ ստեղծելու համար դեռ ավելի լավ է օգտագործել Adobe Flash կամ Flash- ի այլ խմբագիրներ: Օրինակ, այս կատուն արեցի հին մակրոմեդիա Flash- ում, որը փորվել է աշխատանքի մեջ:

Անցած անգամ HTML5- ը եւ CSS3- ը ավելի ու ավելի հաճախ օգտագործվում են անիմացիա ստեղծելու համար: Այս ծածկագիրը աջակցում է ժամանակակից զննարկիչների կողմից եւ չի պահանջում Flash Player- ի օգտագործումը:

Roman Aka Dacaskas. Հատկապես բլոգի նշման համար Microstrum Illustrator