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

Үүний тулд бидэнд юу ч хэрэггүй. Давхаргыг чадварлаг зохион байгуулж, эцсийн ажлыг давхар бүрийг хөдөлгөөнт дүрс болгон хувиргадаг 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 нь хөдөлгөөнт дүрс үүсгэхэд улам их ашиглагдаж байна. Энэ кодыг орчин үеийн хөтөч дэмждэг бөгөөд флаш тоглуулагч ашиглах шаардлагагүй.

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

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

Танд хөдөлгөөнт дүрсээр амилуулмаар байгаа ганц хоёр дүрс бий. Та хаанаас эхлэх вэ? Танд SVG файлууд, Illustrator CC болон After Effects CC байна гэж бодъё, гэхдээ шийдэл нь таныг тойрч гарахгүй.

Энэ нийтлэлд би SVG файлыг хэрхэн хялбархан хөдөлгөх, тэр дундаа SVG файлыг Illustrator дээр бэлдэж, After Effects CC руу импортлох зэргийг харуулах болно. Би үүнийг хэрхэн Shape Layers болгон хувиргаж, хөдөлгөөн нэмэх талаар тайлбарлах болно. Эцэст нь экспортлох, үзүүлэх талаар ярилцъя.

Ажлын эцсийн үр дүн.

Одоо хамгийн сонирхолтой хэсэг рүүгээ орцгооё - зургийг хэрхэн хөдөлгөж сурах.

Illustrator дээр SVG файлыг бэлтгэж байна

SVG файлаа Adobe Illustrator CC дээр нээж эхэлцгээе. Би "Week Of Icons" дээр үнэ төлбөргүй авах боломжтой жижиг машины дүрсийг хөдөлгөөнтэй болгох болно.

Файлыг нээсний дараа бид бүх объектыг давхарга болгон хуваах хэрэгтэй. Та үүнийг гараар эсвэл ашиглаж болно Давхаргууд руу гаргах (дараалал)үйл явцыг хурдасгахын тулд. Бид файлыг After Effects руу импортлохын өмнө Illustrator файлын форматаар хадгалах хэрэгтэй.

Бид үнэт цагаа дэмий үрэхгүйн тулд Release to Layers (Sequence) ашиглан объектуудыг задалж болно.

After Effects CC-д файл импортлох, цэгцлэх

Та одоо After Effects CC руу импортлоход бэлэн боллоо. Гарын товчлолыг ашиглацгаая Ctrl+I (Windows)эсвэл Command+I (Mac)харилцах цонхыг ачаалах импортын файл, эсвэл очих Файл > Импорт > Файл…Яг тэр газраас бидний бэлтгэсэн Illustrator CC файлыг сонгоод товшино уу импорт.Сонгосон файлын нэр бүхий жижиг харилцах цонх гарч ирэх ёстой. Сонго найрлагагэж нэрлэдэг доош унах жагсаалтаас Импортын төрөл.

Файлыг импортлох илүү хурдан арга бол төслийн самбар дээрх баганын байршил дээр давхар товших явдал юм.

Он цагийн хэлхээсийн самбараас бид шинэ найрлагыг харах болно. Бид үүн дээр давхар товшино. Бид одоо нэрнийх нь зүүн талд улбар шар дүрс бүхий Illustrator CC давхаргыг харах ёстой.

Ажилдаа орохын өмнө бид эдгээр бүх давхаргыг хөрвүүлэх хэрэгтэй хэлбэрийн давхаргууд. Бид бүгдийг нь сонгох хэрэгтэй Ctrl+A/Command+A, эсвэл гараар ашиглах Shift + Зүүн хулгана. Үүний дараа давхарга дээр хулганы баруун товчийг дараад сонгоно уу Үүсгэх > Вектор давхаргаас дүрс үүсгэх.

Одоо шинэ давхаргууд сонгогдсон тул тэдгээрийг Illustrator CC давхаргуудын дээрх самбарын дээд талд чирээд, Illustrator CC давхаргуудад саад учруулахгүйн тулд устгана уу.

After Effects CC дээрх Illustrator CC давхаргыг хэлбэр дүрс болгон хувиргаж байна

Шаардлагагүй ч давхарга бүрд тохирох нэр, өнгө өгөх нь чухал юм. Энэ нь бид түлхүүр фрэймүүдэд анхаарлаа төвлөрүүлснээр илүү үр дүнтэй ажиллах боломжийг олгоно. Доорх жишээн дээр шошгоны өнгө нь тус тусын давхаргын дүүргэлттэй бага багаар таарч байна.

Хэлбэрийн давхаргыг зохих нэр, өнгө, шошго, байрлалаар шошголох нь маш практик юм.

Тохиргоог тохируулахын тулд гарын товчлолыг ашиглана уу Ctrl+K/Command+Kэсвэл Зохиол > Зохиолын тохиргоо...Зохиолын тохиргооноос бид өргөн, өндөр, кадрын хурд, үргэлжлэх хугацааг сонгох хэрэгтэй. Энэ төслийн хувьд би хөдөлгөөнт дүрсийг жигд байлгахын тулд 60 fps-ийг сонгосон.

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

Олон давхаргад эх давхаргыг оноохын тулд Pick Whip ашиглана уу.

Бидний жишээн дээр би салхины шил, биеийн хэсгүүд, мод, олс зэрэг бага ач холбогдолтой давхаргыг (хүүхдийн давхарга) биеийн үндсэн давхаргад (эцэг эх давхарга) хуваарилсан. Энэ нь надад эцэг эхийн давхаргыг ашиглан бүхэл бүтэн машины байрлал, эргэлтийг (дугуйнаас бусад) хянах боломжийг олгосон.

Хөдөлгөөнт дүрс бүтээх

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

Хөдөлгөөнт дүрсийг дүрсэлсэн ноорог

Эхний алхам нь чулуулгийн элемент эсвэл давхарга хийх байсан, гэхдээ би Illustrator CC руу буцаж очоод өөр давхарга нэмэхийн оронд After Effects CC-ийн Pen Tool-ийг ашигласан. Энэ нь надад жижиг чулууг хурдан зохион бүтээх боломжийг олгосон.

Өө, хүчирхэг үзэг хэрэгсэл!

Их бие нь харьцангуй энгийн ажил байсан. Би үүнийг машины арын хэсэгт суулгаж, зүүн доод орой дээр бэхэлгээний цэг хийсэн. Pick Whip-ийг ашиглан би үүнийг биеийн эх давхаргад хуваарилсан. Эцсийн өмнөх алхам нь эргэлтийн эффектийг өгөх явдал байсан бөгөөд энэ нь эргээд машины үсрэх мөчийг илүү бодитой болгосон.. Lottie зөөврийн номын сантай хослуулан Bodymovin.

P.S.Та миний Illustrator CC болон After Effects CC файлуудыг олох боломжтой.

Дүрс багцыг эндээс үнэгүй татаж авах боломжтой.

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

Энэ нийтлэлд хөнгөн жинтэй JQuery залгаас Lazy Line Painter ашиглан SVG векторыг хөдөлгөөнт болгох хамгийн энгийн жишээг тайлбарласан болно.

эх сурвалж

Энэ даалгаврыг гүйцээж, бүрэн дүүрэн ойлгохын тулд 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 болон After Effects
Импорт, энгийн хөдөлгөөнт дүрс

Сайн уу. Өнөөдөр бид 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 Tool (товчлол - 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 Illustrator дээрх ил тод GIF дараах байдлаар хийгдсэн. Файл > Вэб болон төхөөрөмжүүдэд хадгалах (Alt+Ctrl+Shift+S) цэс рүү очно уу. Нээгдсэн цонхны оновчтой файлын формат талбарт та эхлээд таб руу очих ёстой зургийн хэмжээ(зургийн хэмжээ). Үнэн хэрэгтээ хуудас бүхэлдээ оновчлолын цонхонд ордог бөгөөд энэ нь ихэвчлэн шаардлагагүй байдаг. Тиймээс, "Зургийн хэмжээ" таб дээрээс хайрцгийн сонголтыг арилгана уу Artboard руу хавчуулна(Хуудсыг тааруулахын тулд тайрах) болон Apply товчийг дарна уу.

Дараа нь формат сонгох жагсаалтаас GIF-г сонгоод Ил тод байдлын нүдийг шалгана уу.

Үүний дараа бид ямар өнгө ил тод байхыг тодорхойлох болно. Зурагт байгаа бүх өнгө нь таб дээр байгаа өнгөт хүснэгт(Өнгөний график) ба өнгөт дөрвөлжин хэлбэрээр харагдана. Цонхны зүүн талд байрлах багаж самбараас хэрэглүүрийг сонгоно уу дусаагуур(пипетк).

Өнгөийг хоёр янзаар тодорхойлж болно. Хамгийн хялбар арга бол зурган дээр шууд дусаагуураар өнгийг зааж өгөх явдал юм - үүний дараа өнгө нь өнгөт хүснэгтэд харанхуй зураасаар тодрох болно. Хэрэв та аль өнгө нь тунгалаг байх ёстойг яг таг мэдэж байгаа бол харгалзах өнгийн хайрцаг дээр дарж өнгөний хүснэгтээс шууд сонгож болно. Эхний болон хоёр дахь тохиолдолд, хэрэв та хэд хэдэн өнгө сонгох шаардлагатай бол Shift (эсвэл Ctrl) товчийг дарж ажиллах хэрэгтэй. Өнгө сонгосны дараа та програмыг ил тод болгох зааварчилгаа өгөх хэрэгтэй. Үүнийг хийхийн тулд дүрс дээр дарна уу Сонгосон өнгийг Ил тод болгох(Ил тод байдалд сонгосон өнгө нэмнэ). Зураг дээр энэ товчлуурыг дугуйлсан бөгөөд улаан өнгийг ил тод болгож тохируулсан байна. Зураг дээр ил тод хэсэг гарч ирэх бөгөөд өнгөт хүснэгт дээрх дөрвөлжин нь гадаад төрхийг өөрчлөх болно - түүний нэг хэсэг нь цагаан гурвалжин болно. Сонгосон өнгийг цуцлахын тулд өнгөний хүснэгтээс сонгоод, сонгосон өнгийг ил тод болгох газрын зургийн дүрс дээр дахин дарна уу.

Ил тод байдлыг тохируулах аргын талаар хэдэн үг хэлье. Унждаг цэс нь үүнийг хариуцдаг. Transparency Dither Algorithm-ийг зааж өгнө үү, Орос хэл дээр - Ил тод байдлын симуляцийн алгоритм (доорх зураг). Дөрвөн сонголт байна: No Transparency Dither - алгоритмгүй, Diffusion Transparency Dither - сарнисан алгоритм, Pattern Transparency Dither - загварт суурилсан алгоритм ба Noise Transparency Dither - дуу чимээнд суурилсан алгоритм. Сарнисан алгоритмын горимд гулсагч идэвхтэй болно Дүн(Тоо хэмжээ) нь тархалтын утгыг өөрчлөх боломжийг олгодог. Практикт юу хэрэглэх вэ? Зорилго, дүр төрхөөс хамаарна. Би энэ сонголтыг ашигладаггүй бөгөөд үргэлж анхдагч тохиргоог орхидог - Ил тод байдал байхгүй.

Хадгалах товчийг дар - тунгалаг GIF бэлэн боллоо. Энэ ажлыг Adobe Illustrator хувилбар CS4 (v.14) дээр хийсэн боловч бүх үйлдэл болон гарын товчлол нь өмнөх хувилбар CS3 (v. 13)-д хамааралтай.