Сүүлийн үед вэбсайтууд болон програмууд дээр SVG (Scalable Vector Graphics) графикийн төрөл бүрийн хөдөлгөөнт дүрсүүд маш их алдартай болсон. Энэ нь бүх зүйл байгаатай холбоотой юм хамгийн сүүлийн үеийн хөтчүүдЭнэ форматыг аль хэдийн дэмждэг. SVG-д зориулсан хөтөчийн дэмжлэгийн талаарх мэдээллийг эндээс авна уу.

Энэ нийтлэлийг хэлэлцэх болно хамгийн энгийн жишээ SVG векторуудыг хялбархан хөдөлгөөнтэй болгох jQuery залгаасЗалхуу зураач.

эх сурвалж

Энэ даалгаврыг гүйцээж, бүрэн дүүрэн ойлгохын тулд HTML, CSS, JQuery-ийн үндсэн мэдлэгтэй байх нь зүйтэй боловч хэрэв та зүгээр л SVG-г хөдөлгөөнтэй болгохыг хүсч байвал шаардлагагүй) Эхлээрэй!

Тиймээс бидний хийх ёстой алхамууд:

1. Файлын зөв бүтцийг бий болгох
2. Залгаасыг татаж аваад холбоно уу
3. Adobe Illustrator дээр Cool Line Art зур
4. Манай зургийг Lazy Line Converter болгон хувирга
5. Гарсан кодыг main.js-д буулгана уу
6. Зарим CSS нэмнэ үү

1. Файлын зөв бүтцийг бий болгох
Initializr үйлчилгээ нь энэ талаар бидэнд туслах бөгөөд та доорх зурган дээрх параметрүүдийг сонгох хэрэгтэй.

• Сонгодог H5BP (HTML5 бойлер хавтан)
• Загвар байхгүй
• Зүгээр л HTML5 Shiv
• жижигрүүлсэн
• .IE ангиуд
• Chrome хүрээ
• Дараа нь "Татаж авах" дээр дарна уу!

2. Залгаасыг татаж аваад холбоно уу

Initializr нь хамгийн сүүлийн үеийн JQuery номын сантай ирдэг тул бидний Lazy Line Painter төслийн репозитороос татаж авах шаардлагатай архиваас зөвхөн 2 файлыг манай төсөл рүү шилжүүлэх шаардлагатай. Эхнийх нь ‘jquery.lazylinepainter-1.1.min.js’ (залгаасны хувилбар нь өөр байж болно) нь үүссэн хавтасны үндсэн хэсэгт байрладаг. Хоёр дахь нь example/js/vendor/raphael-min.js юм.

Эдгээр 2 файлыг js хавтсанд байрлуулсан. Мөн бид тэдгээрийг үндсэн.js-ээс өмнө index.html-д дараах байдлаар оруулна:

3. Adobe Illustrator дээр гайхалтай тойм зураг зур

1. Illustrator дээр бидний тойм зургийг зур (Үүнийг хийх хамгийн хялбар арга бол Pen Tool юм)
2. Бидний зургийн контур хаагдахгүй байх шаардлагатай, учир нь бидний нөлөөнд эхлэл ба төгсгөл хэрэгтэй.
3. Дүүргэгч байх ёсгүй
4. Файлын дээд хэмжээ нь 1000×1000 пиксел, 40кб
5. Object>Artboards>Fit To Artboards Bounds-ын хил хязгаарыг тайрцгаая.
6. SVG хэлбэрээр хадгалах (стандарт хадгалах тохиргоо зүгээр)

Жишээлбэл, та хавсралт дахь дүрсүүдийг ашиглаж болно.

4. Манай зургийг Lazy Line Converter болгон хувирга
Доорх хайрцагт өөрийн дүрсийг чирээд унагахад л болно.
Контурын зузаан, өнгө, хөдөлгөөнт дүрсийн хурдыг хөрвүүлсний дараа гарч ирэх код дотор өөрчилж болно!

5. Гарсан кодыг main.js-д буулгана
Одоо гарсан кодыг хоосон main.js файл руу буулгахад л хангалттай
Сонголтууд:
strokeWidth — тойм зузаан
strokeColor - тойм өнгө
Та мөн үргэлжлэх хугацааны параметрийн утгыг өөрчлөх замаар вектор бүрийн зурах хурдыг өөрчилж болно (анхдагч 600)

6. Амтлахын тулд бага зэрэг CSS нэмнэ үү
index.html-ээс догол мөрийг устгана уу

сайн уу ертөнц! Энэ бол HTML5 бойлер хавтан юм.

Үүний оронд бид хөдөлгөөнт дүрс хийх блокыг оруулдаг

Дараа нь илүү сайхан харагдахын тулд main.css файлд CSS нэмнэ үү:

Үндсэн хэсэг (арын дэвсгэр:#F3B71C; ) #дүрс (байрлал: тогтмол; дээд: 50%; зүүн: 50%; захын зай: -300px 0 0 -400px; )

бүх файлыг хадгалах.
Одоо зүгээр л орчин үеийн хөтөч дээр index.html-г нээгээд эффектийг эдэлнэ үү.

P.S. локал машин дээр ажиллаж байх үед хөдөлгөөнт дүрс эхлэх нь хэдхэн секундээр хойшлогдож магадгүй юм.

Сайн уу! Өнөөдөр би програмын онцлог шинж чанаруудын талаар тайлбар хийхийг хичээх болно Adobe Illustrator, үүнийг угаах боломжуудтай харьцуулах. Энэ нь хөтөлбөрийг ясаар нь дэлхийн хэмжээнд дүн шинжилгээ хийх биш, харин заримыг нь тайлбарлах болно сонирхолтой чипсБи энэ програмаас олж мэдсэн. Би бүгдийг нэг бичлэгт оруулахын тулд судалж байхдаа мэдээллийг хэсэг хэсгээр нь цуглуулсан. Би гайхалтай туршлагатай зураач биш гэдгээ шууд хүлээн зөвшөөрөх ёстой, би үүнийг зөвхөн сүүлийн зургаан сарын турш зурахад ашиглаж байна (үүнээс өмнө би бүх зүйлийг флэшээр зурдаг байсан). Олон хүмүүс зураач нь нарийн төвөгтэй, үргэлж зөн совинтой байдаггүй гэж гомдоллодог. Флэш хийсний дараа энэ програм хэцүү гэдгийг би зарим талаараа хүлээн зөвшөөрч байна. Гэхдээ энд гол зүйл бол орхих биш, харин үргэлжлүүлэн суралцах явдал юм. Хэдэн долоо хоногийн дараа би үүнгүйгээр яаж даван туулж байсан бэ гэсэн бодол төрж байна!

Тэгэхээр, зураачийн надад таалагдсан зүйл, мөн өөрийнхөө олж мэдсэн зүйл бол гэрэлтдэггүй.
1. Би хамгийн энгийн, гэхдээ нэгэн зэрэг шаардлагатай зүйлээс эхэлнэ. Гялсгуураар объектуудыг тойрог хэлбэрээр байрлуулахыг хичээ. Өмнө нь байсан Деко хэрэгсэл, гэхдээ үүнийг шаардлагагүй гэж үзсэн бололтой устгасан. Үүнийг гараар хийх нь илүү хөгжилтэй байх болно гэж бид шийдсэн. Illustrator нь дараах онцлогтой. Effect - Distort&Transform - Transform.

Бүх зүйл хурдан бөгөөд энгийн, бид тохиргоондоо утгыг (объект хоорондын зай, хуулбарын тоо) өөрөө тохируулдаг.

2. Зигзаг

Бүр илүү энгийн, гэхдээ ашигтай зүйл. Энэ нь өчүүхэн зүйл мэт санагдах боловч та гараараа зурах хэрэгтэй, зураач дээр энэ нь хэдхэн секундын асуудал юм.

3. Объектуудын хэв гажилт (Warp)

Flash дээр ийм зүйл байхгүй. Доорх жишээн дээр би энгийн хэлбэрийг гажуудуулах 2 аргыг л харуулсан (Effect - Warp - Arc / Fish). Үнэндээ тэдний 15 нь байдаг. Хамгийн сүүлийн үеийн хувилбархөтөлбөрүүд.

4. Булангийн автомат дугуйлах (Дугуй булан)

Үүнийг гараар хийж болно: график объект дээр буланд (бүх буланд) сонгогдсон үед цагаан цэг ба дугуйрсан шугамын тэмдэг гарч ирнэ. Хулганаа чирээд өөрийн амтанд тохируулна уу.

Гэхдээ энэ нь зөвхөн дүрст хамаарна, харандаа шугам нь арай өөрөөр - дугуйруулагч эффектийг хэрэглэнэ ( Effect - Stylize - Дугуй булан). Гаралтын үед бид ижил үр дүнд хүрнэ.

5. Барзгар болгох

Үр нөлөөг нь хэрэглэнэ энгийн хэлбэрүүд (Effect-Distort&Transform-Roughen). Үүний үр дүнд бид бага поли 3D загвартай төстэй зүйлийг олж авдаг. Би үүнийг дажгүй гэж бодож байна :) Тэгээд хамгийн чухал нь - маш энгийн.

6 Pucker & Bloat(Татаж, хийлээрэй)
Доорх зурган дээрх жишээ:

7. Маягтын өргөтгөл (Offset Path)

Флэш дээр Expand Fill (бөглөх өргөтгөл) функц байдаг бөгөөд энэ нь зураачаас ялгаатай нь харандаа шугамтай огт ажилладаггүй.

8. Сойз (Урлагийн багс, Хээний сойз, Скатер сойз)
Жишээнүүдийг доорх зургийг үзнэ үү.

9.Текстур сойз (Текстур сойз)

Illustrator дээр миний бичсэн болон тэдгээр нь хэрхэн гарч ирсэн талаар олон тооны бүтэцтэй багснууд байдаг шинэ хувилбарфлэш -. Adobe Animate дээр багс ашиглах нь маш удаан байдаг нь анзаарагдсан. Ингээд л болоо :(

10. Энэ заль мэх эсэхийг би сайн мэдэхгүй байна, гэхдээ би хөгжилтэй нэртэй бийр дээр анхаарлаа төвлөрүүлэхийг хүсч байна. бөмбөгСойз. Хэрэгслийн самбар дээр байрладаг, ашиглахад маш сайхан сойз. Энэ нь олон тооны тохиргоотой, надад ердийнхөөсөө илүү таалагдаж байна. Үүний ашиг тусыг үгээр тайлбарлахад хэцүү байдаг тул нэг удаа туршиж үзсэн нь дээр.

10.Split to Grid

Өөр нэг ашигтай функц бол Split to Grid (Object-Path-Split to Grid) функц юм. Энэ нь маягтыг тэнцүү хэсгүүдэд хуваах боломжийг олгодог. Энэ нь бидэнд юуг сануулж байна вэ? Энэ нь зөв - өндөр байшингийн цонхнууд. Миний хувьд, жишээ нь хотын ландшафтыг зурахад тохиромжтой зүйл;)

Illustrator-д нэвтрүүлсэн өөр нэг хэрэгтэй хэрэгсэл, магадгүй анхны хувилбараасаа хойш. Үүний тусламжтайгаар та жишээлбэл, модон бүтэц үүсгэж болно.

12. Зөөх (баруун - Хувиргах - Зөөх)

Тухайн объектыг өгөгдсөн зайд шилжүүл. Хэрэв хүсвэл сонгосон объектоос хэвтээ / босоо байдлаар хүссэн зайд байрлуулах хуулбарыг нэн даруй үүсгэж болно. Флэшийн өмнөх хувилбарт залгаас байсан энэ функц. Харамсалтай нь нэрийг нь санахгүй байна.

Illustrator дээр үл үзэгдэх хэв маягийг бий болгох нь маш тохиромжтой ( Объект-Загвар-Үйлдвэрлэл). -г бүтээж байхдаа би хэрхэн гайхалтай амжилт гаргаснаа санаж байна. CC 2015-ийн зураач хувилбарт бүх зүйл автоматжуулсан, олон тооны тохиргоонууд нь хэдхэн график элементийн тусламжтайгаар хэдэн арван хувилбараар загвар үүсгэхэд тусална. Хөтөлбөрийн өмнөх хувилбаруудад одоог хүртэл флэш шиг бүх зүйлийг гараар хийх ёстой байв.

(Тэмдэглэл - задлах функцийг ашиглан загварыг вектор засварлах боломжтой объект болгож болно. Объект-Харагдах байдлыг өргөжүүлэх).

14. Объект мозайк (Мозайк)

Одоо байгаа зураг дээр үндэслэн өнгөт палитр үүсгэ. Дуртай зургаа дүрслэлд оруулаарай (Нээлттэй), дараа нь Объект - Объект мозайк үүсгэх. Тохиргоонд бид өндөр, өргөнөөр хуваах давтамжийг зааж өгдөг.

Мөн гаралт дээр бид дараахь зүйлийг авна.

15. Холих (холих)

Градиент үүсгэхэд ашигладаг. Та жишээ нь зурган дээрх шиг алхам алхмаар шилжилтийг үүсгэж болно. Би үүнийг байнга хэрэглэдэг гэж хэлж чадахгүй ч энэ нь хэн нэгэнд хэрэг болж магадгүй юм. Үүнийг энгийн дэвсгэр зураг бүтээхэд ашиглаж болох юм шиг санагдаж байна.

Энэ хэрэгслийг мөн объектуудыг хувилахад ашиглаж болно. Бид хоёр объектыг бие биенээсээ хол зайд байрлуулж, "Blend Options" -ийг ашиглан, алхамуудын тоог (клонжуулсан объектын тоо) сонгоно.

16. Дүрс бүтээх хэрэгсэл.Командуудтай ажиллахад маш тохиромжтой зүйл. Гэнэтийн хувьд энэ нь тийм ч тохиромжтой биш юм шиг санагдсан.

Alt товчийг дараад сонгосон сегментүүд дээр дарахад сегментүүдийг устгана уу. Хэрэв бид хулганыг хэд хэдэн сонгосон хэсэг дээр чирвэл - холболтууд.

Нэмэлт - автоматаар зүсэх, холбох гэх мэт туслах хэрэгсэл. сонгосон маягтууд. Миний хувьд энэ нь тийм ч тохиромжтой биш, би үүнийг илүү олон удаа ашигладаг бариххэлбэрхэрэгсэл.

(зурагны хавтан)

18. Custom Tool Panel

Шаардлагагүй зүйлсийг хаяж, зөвхөн өөрийн ашигладаг хэрэгслийг сонгох боломжтой.

Флэш, урлагийн самбар, тухайлбал үзэгдэл ( Үзэгдэл 1,2,3..) нь тусад нь байрладаг бөгөөд тэдгээрийн хооронд шилжих шаардлагатай (Shift + F2). Illustrator дээр бүгдийг нь таны нүдний өмнө байрлуулж болно. Нэг зургийн хэд хэдэн хувилбарыг хийх нь тохиромжтой бөгөөд ингэснээр бүх сонголтуудыг харьцуулах боломжтой болно.

19. График хэв маягтай изометр

Хамгийн сүүлчийн зүйл бол график хэв маягийг ашиглан 1 товшилт (эсвэл 3 товшилт) ашиглахгүйгээр изометрийг бий болгох явдал юм. График хэв маяг). Үүнийг яаж хийх вэ, би дараагийн удаа бичих болно.

Зураачийн флэштэй адил нийтлэг зүйл бол объектыг тэмдэгт (тэмдэгт) болгон хадгалах чадвар бөгөөд энэ тэмдгийг мөн ямар ч асуудалгүйгээр флаш руу шилжүүлэх боломжтой (.ai файлыг флаш дээр нээх, Импорт - Тайз руу импортлох).
Illustrator дээрх тэмдэг нь флэштэй ижил шинж чанартай байдаг.
Эцэст нь би зураач дээр флэшээс доогуур байгаа зүйлийг бичих болно. Тийм, тийм, бас байдаг. Энэ бол дүүргэх хэрэгсэл юм ( будгийн хувин). Хэчнээн илла-д дасах гэж оролдсон ч флаш-д илүү тохиромжтой.
Хэрэв миний тэмдэглэл танд хэрэг болсон эсвэл та өөрөө ямар нэг зүйл нэмэхийг хүсч байвал сэтгэгдэл дээр тавтай морилно уу! Бүгдэд нь амжилт хүсье ;)

Flash файлын формат (SWF) нь дээр үндэслэсэн вектор графиквэбэд зориулсан өргөтгөх боломжтой, авсаархан графикт зориулагдсан. Энэ файлын формат нь вектор график дээр суурилдаг тул объект нь ямар ч нарийвчлалтай зургийн чанарыг хадгалж, хөдөлгөөнт дүрс үүсгэхэд тохиромжтой. Illustrator дээр та давхаргууд дээр бие даасан хөдөлгөөнт фрэймүүдийг үүсгэж, дараа нь зургийн давхаргыг вэбсайтад ашиглахын тулд тусдаа жааз болгон экспортлох боломжтой. Та мөн тодорхойлж болно тэмдэгхөдөлгөөнт дүрсийг багасгахын тулд Illustrator файлд. Экспортлох үед тэмдэг бүрийг SWF файлд зөвхөн нэг удаа тодорхойлдог.

Экспортын команд (SWF)

Хөдөлгөөнт дүрс болон бит шахалтын хамгийн их хяналтыг хангадаг.

Хэсэгчилсэн байрлал дахь SWF болон битмап форматын холимог дээр илүү хяналтыг өгдөг. Энэ тушаал нь Экспорт (SWF) командаас цөөн зургийн сонголтыг санал болгодог боловч хамгийн сүүлд ашигласан Экспортын командын сонголтуудыг ашигладаг (харна уу).

Объектыг SWF болгон хадгалахад бэлтгэхдээ дараах удирдамжийг санаарай.

Device Central програмыг ашиглан Illustrator график нь апп дотор ямар харагдахыг хараарай Flash тоглуулагчянз бүрийн гар төхөөрөмж дээр.

Illustrator график оруулж байна

Illustrator дээр бүтээгдсэн график объектыг хурдан, хялбар, хялбар хуулж, Flash програмд ​​буулгах боломжтой.

Та Flash програмд ​​Illustrator графикийг буулгахад дараах шинж чанарууд хадгалагдана.

Контур ба хэлбэр

• Цус харвалтын зузаан

  Градиентуудын тодорхойлолт

  Текст (OpenType фонтыг оруулаад)

  Холбоотой зургууд

• Холимог горимууд

Нэмж дурдахад Illustrator болон Flash нь график буулгахдаа дараах функцуудыг дэмждэг.

Illustrator зургийн давхаргыг сонгохдоо дээд түвшинТэдгээрийг бүхэлд нь Flash програм руу буулгахад давхаргууд болон тэдгээрийн шинж чанарууд (харагдах байдал, хаалт) хадгалагдана.

RGB-аас бусад Illustrator өнгөний форматыг (CMYK, саарал өнгө, өөрчлөн тохируулсан формат) Flash ашиглан RGB болгон хөрвүүлдэг. RGB өнгийг ердийн аргаар оруулдаг.

Та Illustrator-ийн урлагийн бүтээлийг импортлох эсвэл буулгахдаа тодорхой эффектүүдийг (текстээр сүүдэрлэх гэх мэт) Flash шүүлтүүр болгон хадгалахын тулд янз бүрийн сонголтыг ашиглаж болно.

Flash нь Illustrator маскуудыг хадгалдаг.

Illustrator-аас SWF файлуудыг экспортлох

Illustrator-аас экспортолсон SWF файлууд нь Flash-ээс экспортолсон SWF файлуудтай ижил чанар, шахалттай байдаг.

Экспортлохдоо та оновчтой гаргахын тулд урьдчилан тодорхойлсон төрөл бүрийн загваруудаас сонгож, олон зургийн самбарыг хэрхэн ашиглах, тэмдэгтүүд, давхарга, текст болон маскуудыг хэрхэн хөрвүүлэхийг зааж өгөх боломжтой. Жишээ нь, та Illustrator тэмдэгтүүдийг кино хэлбэрээр эсвэл экспортлох боломжтой график зургууд, мөн Illustrator давхаргуудаас SWF тэмдэг үүсгэх.

Импорт Illustrator файлууд Flash програм руу

Illustrator дээр бүтнээр нь зураг төсөл үүсгэж, дараа нь нэг алхамаар Flash руу импортлохын тулд та уран бүтээлээ Illustrator оригинал (AI) форматаар хадгалж, File > Import to Workspace командуудыг ашиглан Flash руу өндөр нарийвчлалтайгаар импортлох боломжтой. талбар" эсвэл " Файл" > "Номын санд импортлох".

Хэрэв Illustrator файлд олон ажлын самбар байгаа бол Flash Import харилцах цонхноос импортлох зургийн самбарыг сонгоод тухайн ажлын самбар дахь давхарга бүрийн тохиргоог зааж өгнө үү. Сонгосон самбар дээрх бүх объектыг Flash-д нэг давхарга болгон импортлодог. Та ижил AI файлаас өөр ажлын самбарыг импортлох үед тэр самбарын объектууд Flash руу шинэ давхарга болгон импортлогдох болно.

Та Illustrator урлагийн бүтээлийг AI, EPS эсвэл PDF файл болгон импортлох үед Flash нь Illustrator урлагийн бүтээлийг буулгахтай ижил шинж чанаруудыг хадгална. Мөн таны оруулж буй Illustrator файлд давхаргууд байгаа бол та дараах аргуудын аль нэгийг ашиглан тэдгээрийг оруулж болно.

Illustrator давхаргыг Flash давхарга болгон хөрвүүлэх.

Illustrator давхаргыг Flash хүрээ болгон хөрвүүлэх.

Illustrator-ийн бүх давхаргыг нэг Flash давхарга болгон хөрвүүлэх.

Adobe Illustrator болон нөлөөллийн дараах
Импорт, энгийн хөдөлгөөнт дүрс

Сайн уу. Өнөөдөр бид After Effects дээрх энгийн хөдөлгөөнт дүрсийг үзэж байна.

Нөөц: Adobe Illustrator CC
Adobe After Effects CC

Illustrator дээр зурж эхэлцгээе.

Бид зурдаг
1) Шар өнгийн тэгш өнцөгтийг дэвсгэр болгон зур

Зураг 1 - Тэгш өнцөгт

2) Тойрог зурж, градиентаар дүүргэ
Тойрог дээр жаахан ажиллацгаая:
- контур дээрх доод цэгийг арилгах, бид нум авах;
- шулуун шугам зурж, нумын ёроолыг хааж, бид хагас тойрог авдаг

Зураг 2 - 1) тойрог зурах; 2) градиент; 3) цэгийг устгах

3) Тэгш өнцөгт зурж, хуулбарыг нь хий
- нэг саарал тэгш өнцөгт;
- өөр хар саарал тэгш өнцөгт
4) Одноос гурвалжин зурж, цацрагийн тоог тохируулна - 3

Зураг 3 - 1) шулуун гэрэл; 2) шулуун харанхуй; 3)гурвалжин

5) Үзэг, энгийн дүрс бүхий муур зур

Зураг 4 - 1) толгой; 2) хүзүү; 3) бие; 4) хөл; 5) сүүл

Тэгээд одоо хамгийн их ҮНДСЭНмөч
Зургуудыг давхарга болгон (хөдөлгөөнтэй байх нь тусдаа давхарга дээр) дараах байдлаар тараацгаая.

Зураг 5 - бүх зураг (чухал давхаргыг улаанаар тэмдэглэнэ)

Бүгд, одоо бид хэмнэдэг.
Хадгалах тохиргоог харцгаая

Зураг 6 - Хадгалах

Тэгээд одоо дараагийн шат. ХаахAdobe Illustrator болон After Effects програмыг нээнэ үү.

After Effects руу импортлох
File - Import - File - бидний хадгалсан файлыг сонгоно ууЗураач.
Illustrator-аас давхаргыг импортлохоор сонгоцгооё, хэрэв бид бичлэг хийвэл нэгтгэсэн давхаргууд бүхий зураг авах болно, гэхдээ бидэнд энэ хэрэггүй.

Зураг 7 - Найрлага болгон импортлох

Бүгд импортолсон.
Одоо бидэнд юу байгааг харцгаая. Зохиол дээр давхар товшино уу , юу нээгдэж, бид давхаргуудыг харах болно (хэрэв бүх зүйл зөв хийгдсэн бол хэд хэдэн давхарга байх болно). Бид үүнийг ойлголоо, зургийг харна уу

Зураг 8 - Нээлттэй найрлага

Өнөөдөр бид юуны төлөө энд байна - Анимэйшн.

Хөдөлгөөнт дүрс нөлөөллийн дараах
Сумны дээд талд Pan Behind хэрэгслийг ашиглан эргэх цэгийг тохируулна уу ( товчлолын товчлуур- Y). Зүгээр л нэг цэг аваад хүссэн газраа шилжүүлээрэй. Үүний үр дүнд энэ нь иймэрхүү харагдах болно..

Зураг 9 - Pan хэрэгсэл ба давхарга

Ингээд л анимаци хийх давхаргууд руу шилжье.
Бидэнд Arrow давхарга болон Head_cat хэрэгтэй.
Сумнаас эхэлцгээе.
Жагсаалтыг өргөжүүлж, цагийг олоод дарна уу. Тиймээс бид эхний цэгийг тэг секундэд тавьсан. Нийтдээ хөдөлгөөнт дүрс 2 секунд үргэлжилнэ.
Тиймээс эдгээр нь таны хийх ёстой тохиргоо юм (бид нийтдээ 3 оноо өгөх болно)

Хоёрдугаарт	0	1	2
	+66	- 70	+66

Энэ нь иймэрхүү харагдах болно:

Зураг 10 - Эргүүлэх сум

Одоо муурны толгойг хөдөлгөцгөөе.
head_cat-г өргөтгөж олоорой байрлал.
4 оноо байх болно.
Энэ нь үлдсэн хэсэгт хүрэхгүйгээр зөвхөн сүүлчийн координатыг өөрчлөх болно.

Хоёрдугаарт	0.1	0.17	1.12	2.0
байрлал	689.3	729.3	729.3	689.3

Зургийг харцгаая.

Зураг 11 - Толгойн байрлал

Тэгэхээр хүүхэлдэйн киноны зарчим ийм байсан. Сум нь хажуу тийшээ эргэлдэж, зулзага руу ойртсон даруйдаа толгойгоо өөртөө татаж, энэ байрлалд бага зэрэг саатаж, дараа нь байрандаа буцаж ирдэг.

Эцсийн шат

Үйлдвэрлэл
Хийсэн ажлаасаа бэлэн бүтээгдэхүүн бүтээх хэрэгтэй.
Цэс рүүгээ орцгооё Render дараалалд нэмэх
Render самбар нээгдэх ба Гаралтын модульд (хоёр товшилт) гаралтын форматыг сонгоно. Би *.mov авсан

Зураг 12 - Зураг

RENDER товчийг дараад үр дүнг нь аваарай (замаа зааж өгөхөө бүү мартаарай).
Тэгээд л болоо.

Өнөөдөр бидэнд ердийн зүйл байхгүй Adobe хичээлЗураач. Учир нь бид энэ удаад статик зураг биш, харин бодит хөдөлгөөнт дүрс хийх болно. Энэ нь болж байна гэж төсөөлөөд үз дээ Adobe-ийн тусламжЗураач хүүхэлдэйн кино зурж болно :)

Үүний тулд бидэнд юу ч хэрэггүй. Давхаргыг чадварлаг зохион байгуулж, эцсийн ажлыг давхар бүрийг хөдөлгөөнт дүрс болгон хувиргадаг swf формат руу экспортлох. Өнөөдрийн хичээлээр бид чимэг киноны хэв маягаар цаг тоолох хөдөлгөөнт дүрс зурах болно. Гаралт нь яг ийм тооллоготой флаш кино байх ёстой.

Хамгийн эхний хийх зүйл бол бүх зүйлийг зурах явдал юм шаардлагатай элементүүдирээдүйн анимейшн. Үүнийг хийхийн тулд би тус тусад нь баримт бичигт хоёр кино хүрээ байрлалыг хийсэн, лавлагаа хийх тойрог, тус тусад нь салбар болгон хуваасан, бүтэц, босоо зураас нь эртний нөлөөг нэмэх, түүнчлэн бүх тоо, бичээс.

Манай хүүхэлдэйн киноны бүх хэсгүүд бэлэн болмогц та хөдөлгөөнт дүрсийг өөрөө үүсгэж эхлэх боломжтой. Тохиромжтой болгохын тулд үүнийг шинэ баримт бичигт хийх нь дээр. Энэ тохиолдолд давхаргууд нь хөдөлгөөнт фрэймийн үүрэг гүйцэтгэнэ. Эхний давхаргад та зөвхөн киноны хүрээг хуулах хэрэгтэй. Үүнийг ажлын талбайн дунд байрлуулна.

Одоо хоёр дахь давхаргыг үүсгэж, киноны хүрээг хуулж, ирмэг дээрх нүхийг ээлжлэн хийнэ. Мөн төвлөрсөн байх шаардлагатай.

Эдгээр хоёр давхаргаас та аль хэдийн хөдөлгөөнт киноны хөдөлгөөнт дүрсийг авах боломжтой. Гэхдээ дараа нь бидэнд илүү олон давхарга хэрэгтэй болно. Тиймээс эхний хоёр давхаргыг сонгоод самбарын сонголтууд руу очиж давхаргуудын хуулбарыг хийнэ үү.

Үүнтэй адилаар бид түүний хөдөлгөөнийг тодорхойлдог хальсан хүрээ бүхий 12 давхаргыг хуримтлуулах хэрэгтэй.

Одоо бидэнд бүхэл бүтэн давхаргууд байгаа бөгөөд тэдгээр нь бүгд харагдаж байна. Дээд давхаргууд нь доод давхаргыг хаадаг гэсэн утгаараа ажил хийхэд тийм ч тохиромжтой биш юм. Тиймээс давхаргын нэрний зүүн талд байгаа нүдний дүрс дээр дарж зарим давхаргыг унтрааж болно. Бүх давхаргыг нэг дор унтрааж эсвэл асаахын тулд нүдний дүрс дээр дарж Alt товчийг удаан дарна уу. Давхаргыг асааж, унтрааснаар та бидний ирээдүйн хөдөлгөөнт зургийн тодорхой хүрээнд яг юу байрлаж байгааг харж болно. Одоо бид киноны хөдөлгөөнд бага зэрэг сэгсрэхийн тулд хүлээн авсан хүрээг өөр өөр чиглэлд бага зэрэг шилжүүлэх хэрэгтэй. Үүнийг хийхийн тулд зөвхөн ажиллах гэж буй давхаргыг асаана уу Энэ мөч, дараа нь хүрээг хоёр тал руу нь хэд хэдэн пиксел зөөнө үү.

Бүх давхаргыг давж, бага зэрэг өөрчлөлт оруулсны дараа та хөдөлж буй тойргийн хөдөлгөөнт дүрсийг үүсгэж эхлэх боломжтой. Үүнийг хийхийн тулд хүүхэлдэйн киноны хэсгүүдийн баримтаас секторуудаас бүрдэх тойргийг хуулж аваад киноны хүрээний дээд талд байрлах эхний давхаргад байрлуулна.

Хэрэв та тойргоос сонголтыг хасвал энэ нь нэг бүхэл мэт харагдах болно. Энэ нь бидэнд яг хэрэгтэй зүйл юм.

Гэхдээ энэ нь тусдаа салбаруудаас бүрддэг тул өнгийг нь өөрчилснөөр маш хурдан бөгөөд хялбархан хөдөлгөөнт дүрс үүсгэх боломжтой. Үүнийг хийхийн тулд энэ тойргийг хоёр дахь давхарга руу хуулж, эхний секторыг илүү хөнгөн болго. Хөдөлгөөний явцад хальс нь сэгсэрч байгааг та санаж байгаа тул хүрээний төвд яг тойрог тавих шаардлагагүй. Нүдэнд нь тавь.

Үүний нэгэн адил та тойргийг дараагийн давхарга болгон хуулж, өмнөхөөсөө нэг сектороор илүү цайвар өнгөөр ​​будах хэрэгтэй. Эдгээр 12 давхарга нь нийлээд дүүргэгч тойрог бүхий киноны хөдөлгөөний хөдөлгөөнийг бүрдүүлдэг.

Дараа нь бид давхаргууддаа бүтэц нэмэх хэрэгтэй. Эхний давхаргыг асааж, тэндээс бүтцийг хуулна. эх файлсэлбэг хэрэгсэлтэй.

Дараа нь дараагийн давхаргыг ээлжлэн асаагаад тэнд ижил бүтэцтэй хуулж ав. Хүрээ болгон дээр өөр харагдуулахын тулд 90 градус эргүүлэхэд л хангалттай. Таны таамаглаж байсанчлан бид бүх 12 фреймд бүтэц нэмэх хэрэгтэй.

Хэрэв та хуулбарлахаас залхсан бол би танд таалагдах болно - маш бага зүйл үлдсэн. Хамгийн хэцүү хэсэг нь дууслаа. Энэ нь босоо зураас, бараг бүх зүйлийг нэмэх хэвээр байна. Үүнийг хийхийн тулд дахин анхны зураасыг хуулж, хэд хэдэн давхаргаар дурын газар тавь. Миний хувьд зураас нь ердөө хоёр давхаргаар л гарч ирдэг.

Одоо киноны анимейшн бүхий үндсэн мөчлөг бэлэн болсон тул тоог нэмэхэд үлдлээ. Бид 3-аас 1 хүртэл Go!!! гэсэн үгийг нэмж тоолж байгаа тул бидэнд илүү олон давхарга хэрэгтэй. 12 биш, 48 хүртэл. Үүнийг хийхийн тулд киноны хөдөлгөөнт дүрс бүхий бэлэн давхаргыг дахин гурван хуулбарлах хэрэгтэй.

Тэгээд бүх зүйл энгийн байдаг. Эхний давхаргыг асаагаад тэнд гурван тоог тавь.

Дараа нь тойргийн хөдөлгөөн дуусах хүртэл та энэ зургийг дараагийн давхаргууд руу хуулах хэрэгтэй. Тойрог дахин бүрэн дүүргэх давхаргын дараагийн хуулбар руу ороход та хоёр дугаарыг тавих хэрэгтэй. Үүнтэй адилаар нэг дугаарыг хүссэн давхаргууддаа хуулна. Go!!! шошгоны эцсийн давхаргад очихдоо хүссэн давхарга дээрээ шошгыг хуулахаасаа өмнө тойргийг устга.

Энэ бүхэн хөдөлгөөнт дүрстэй холбоотой. Энд гол зүйл бол төөрөлдөхгүй байх явдал юм. Та давхаргуудад тохиромжтой нэр өгч болно, гэхдээ би хэтэрхий залхуу байсан :) Тэгээд хийж дууссаны дараа нүдний дүрс дээр дарж бүх давхаргыг дахин асаахаа мартуузай.

Экспортын тохиргооны цонхонд Export As: AI Layers-ийг SWF Frames болгон тохируулахаа мартуузай. Энэ сонголт нь Illustrator давхаргыг хөдөлгөөнт дүрс болгон хувиргадаг. Дараа нь Нарийвчилсан товчийг дарна уу.

Нээх болно нэмэлт тохиргоо. Энд та Frame Rate-ийг тохируулах хэрэгтэй. Би секундэд 12 кадртай. Looping checkbox нь хөдөлгөөнт дүрсийг эргүүлэх үүрэгтэй. Түүний ачаар видео тойрог хэлбэрээр тоглох болно. "Давхаргын дараалал: Доод дээш" гэсэн сонголт нь зураачийн давхаргыг доороос дээш чиглүүлж самбар дээр харуулна. Бид анимейшнээ яг ингэж бүтээсэн.

Үүний үр дүнд бид хөдөлгөөнт дүрсээрээ флаш кино авдаг.

Adobe Illustrator дээр энгийн хөдөлгөөнт дүрс хийх нь эхлээд харахад тийм ч хэцүү биш гэдгийг та одоо харж байна.

Гэхдээ урт видео эсвэл интерактив програм үүсгэхийн тулд үүнийг ашиглах нь дээр хэвээр байна Adobe Flashэсвэл бусад флаш засварлагч. Жишээлбэл, би энэ муурыг ажил дээрээ ухаж олсон хуучин Macromedia Flash дээр хийсэн.

Мөн сүүлийн үед HTML5 болон CSS3 нь хөдөлгөөнт дүрс үүсгэхэд улам их ашиглагдаж байна. Өгөгдсөн коддэмжигдсэн орчин үеийн хөтөчмөн флаш тоглуулагч ашиглах шаардлагагүй.

Роман буюу дакаскаялангуяа блогын хувьд

Шинэ зүйлийг алдахгүйн тулд манай мэдээллийн товхимолд бүртгүүлээрэй: