Иллюстраторда gif анимациясын қалай жасауға болады. Adobe Illustrator бағдарламасында анимацияны қалай жасауға болады. SWF файлдарын Illustrator қолданбасынан экспорттаңыз
Бүгін бізде ерекше нәрсе бар Adobe сабағыИллюстратор. Өйткені бұл жолы біз статикалық сурет емес, нақты анимация жасаймыз. Елестетіп көріңізші, бұл шығады Adobe көмегіменИллюстратор мультфильмдер де сала алады :)
Ал бұл үшін бізге ештеңе керек емес. Қабаттарды дұрыс ұйымдастыру және әр қабат анимациялық кадрға түрленетін swf форматына соңғы жұмысты экспорттау. Бүгінгі оқулықта біз ретро фильм стилінде кері санақ анимациясын саламыз. Шығару дәл осындай кері санақпен флэш-бейне болуы керек.
Сізге қажет бірінші нәрсе - болашақ анимация үшін барлық қажетті элементтерді салу. Бұл әрекетті орындау үшін, жеке құжатта, мен фильм кадрының екі позициясын, жеке секторларға кесілген анықтамалық шеңберді, антикалық әсерді қосу үшін текстураны және тік сызуды, сондай-ақ барлық сандарды және жазулар.
Мультфильмнің барлық бөліктері дайын болғанда, біз анимацияның өзін жасауға кірісе аламыз. Ыңғайлы болу үшін мұны жаңа құжатта жасаған дұрыс. Бұл жағдайда біздің қабаттар анимациялық кадрлар рөлін атқарады. Ал ең бірінші қабатта фильмнің кадрын көшіру керек. Оны жұмыс аймағының ортасына қойыңыз.
Енді екінші қабатты жасаңыз және оған пленка жақтауын көшіріңіз, оның шеттеріндегі тесіктер ығысу арқылы жасалады. Оны да орталыққа орналастыру керек.
Осы екі қабаттан сіз қазірдің өзінде қозғалатын фильмнің анимациясын ала аласыз. Бірақ кейінірек бізге көптеген қабаттар қажет болады. Сондықтан алғашқы екі қабатты таңдап, панель опцияларына өтіп, қабаттардың көшірмесін жасаңыз.
Осыған ұқсас, біз оның қозғалысын анықтайтын пленка жақтауларының 12 қабатын жинақтауымыз керек.
Қазір бізде көптеген қабаттар бар және олардың барлығы көрінеді. Жоғарғы қабаттар төменгі қабаттарды блоктайды деген мағынада, бұл жұмыс үшін мүлдем ыңғайлы емес. Сондықтан қабат атауының сол жағындағы көзбен белгішені басу арқылы кейбір қабаттарды өшіруге болады. Барлық қабаттарды бірден өшіру немесе қосу үшін көз белгішесін басқан кезде Alt пернесін басып тұрыңыз. Қабаттарды қосу және өшіру арқылы сіз біздің болашақ анимациямыздың нақты кадрында не орналасқанын дәл көре аласыз. Ал енді, фильмнің қозғалысына аздап діріл қосу үшін біз алынған кадрларды әртүрлі бағытта аздап жылжытуымыз керек. Мұны істеу үшін тек сіз жұмыс істейтін қабатты қосыңыз. осы сәт, содан кейін кадрды кез келген бағытта бірнеше пиксельге жылжытыңыз.
Барлық қабаттардан өтіп, аздап жылжу қосқаннан кейін, қозғалатын шеңбердің анимациясын жасауға кірісуге болады. Ол үшін мультфильм бөліктері бар құжаттан секторлардан тұратын шеңберді көшіріп, пленка жақтауының жоғарғы жағындағы бірінші қабатқа қойыңыз.
Шеңбердің таңдауын алып тастасаңыз, ол бір бүтін болып көрінеді. Бұл бізге дәл керек нәрсе.
Бірақ ол жеке секторлардан тұратындықтан, олардың түсін өзгерту арқылы анимацияны өте тез және оңай жасауға болады. Ол үшін осы шеңберді екінші қабатқа көшіріп, бірінші секторды жеңілірек етіңіз. Біздің фильм қозғалған сайын дірілдеп тұратыны есіңізде, сондықтан шеңберді кадрдың дәл ортасына қоюдың қажеті жоқ. Оны көзбен орналастырыңыз.
Сол сияқты, алдыңғы уақытқа қарағанда ашық түспен бір секторды көбірек бояй отырып, шеңберді әрбір келесі қабатқа көшіру керек. Бұл 12 қабат бірге толтыру шеңберімен қозғалатын фильмнің анимациясын құрайды.
Содан кейін біз қабаттарымызға текстураны қосуымыз керек. Бірінші қабатты қосыңыз және сол жерде қосалқы бөлшектермен түпнұсқа файлдан текстураны көшіріңіз.
Содан кейін келесі қабаттарды бір-бірден қосыңыз және сол текстураны сол жерге көшіріңіз. Оны әр кадрда әртүрлі етіп көрсету үшін оны 90 градусқа бұраңыз. Сіз болжағандай, біз барлық 12 кадрға текстураны қосуымыз керек.
Егер сіз көшіруден шаршаған болсаңыз, мен сізді қуанта аламын - өте аз қалды. Ең қиыны аяқталды. Тек тік сызаттар қосу ғана қалды және бұл дерлік. Мұны істеу үшін біз бастапқы сызатты қайтадан көшіріп, оны бірнеше қабатта еркін жерге орналастырамыз. Менің жағдайда сызаттар тек екі қабатта пайда болады.
Енді фильм анимациясының негізгі циклі дайын, тек сандарды қосу ғана қалады. Біздің кері санақ 3-тен 1-ге және Go!!! сөзін қосатындықтан, бізге одан да көп қабаттар қажет. 12 емес, 48-ге жетеді. Ол үшін фильм анимациясы бар дайын қабаттардың тағы үш көшірмесін жасау керек.
Содан кейін бәрі қарапайым. Ең бірінші қабатты қосып, үш санын сол жерге қойыңыз.
Содан кейін шеңбер анимациясы аяқталғанша бұл суретті келесі қабаттарға көшіру керек. Шеңбер қайтадан толығымен толтырылатын қабаттардың келесі көшірмесіне жеткенде, сіз екі санын қоюыңыз керек. Сол сияқты, бірінші нөмірді қажетті қабаттарға көшіріңіз. Go!!! жазуының соңғы қабаттарына жеткенде, жазуды қажетті қабатқа көшірмес бұрын шеңберді жойыңыз.
Мұның бәрі анимация үшін. Мұнда ең бастысы - шатастырмау. Қабаттарға ыңғайлы атаулар беруге болады, бірақ мен жалқау болдым :) Сондай-ақ, жұмысыңызды аяқтаған кезде, көз белгішесін басу арқылы барлық қабаттарды қайта қосуды ұмытпаңыз.
Экспорттау параметрлері терезесінде Экспорттау: AI қабаттарын SWF кадрларына орнатуды ұмытпаңыз. Дәл осы опция Illustrator қабаттарын анимациялық кадрларға айналдырады. Содан кейін «Қосымша» түймесін басыңыз.
Ашылады қосымша параметрлер. Мұнда кадр жиілігін орнату керек. Менде секундына 12 кадр бар. Циклдік анимацияға «Цикл» құсбелгісі жауап береді. Оның арқасында бейне шеңберде ойнатылады. Ал «Қабат реті: төменнен жоғары» опциясы иллюстратор қабаттарын панельде төменнен жоғарыға қарай шығарады. Біз анимацияны дәл осылай құрастырдық.
Шығару - біздің анимациямыз бар флэш-бейне.
Енді сіз қарапайым анимация не істей алатынын көресіз Adobe Illustratorбір қарағанда қиын емес.
Бірақ ұзақ бейнелерді жасау үшін немесе интерактивті қолданбаларпайдалану әлі де жақсы Adobe Flashнемесе басқа флэш-редакторлар. Мысалы, мен бұл мысықты ескіде жасадым Macromedia Flash, оны мен жұмысымда қазып алдым.
Сондай-ақ, соңғы уақытта HTML5 және CSS3 анимация жасау үшін жиі қолданылуда. Бұл кодты заманауи браузерлер қолдайды және флеш ойнатқышты пайдалануды қажет етпейді.
Роман ака дакаскалар әсіресе блог үшін
Жаңа ештеңені жіберіп алмау үшін біздің ақпараттық бюллетеньге жазылыңыз:
Жақында веб-сайттар мен қолданбалардағы SVG (Scalable Vector Graphics) графикасының анимациясының әртүрлі түрлері өте танымал болды. Бұл барлығына байланысты соңғы браузерлербұл пішімді қазірдің өзінде қолдайды. Мұнда SVG браузерін қолдау туралы ақпарат берілген.
Бұл мақалада жеңіл JQuery плагині Lazy Line Painter көмегімен SVG векторлық анимациясының қарапайым мысалы талқыланады.
ДереккөзБұл тапсырманы орындау және толық түсіну үшін HTML, CSS, JQuery негіздерін білу қажет, бірақ егер сіз жай ғана SVG-ге анимация жасағыңыз келсе, талап етілмейді) Бастайық!
Және бұл біз орындауымыз керек қадамдар:
1. Дұрыс файл құрылымын жасаңыз
Бұл бізге Initializr қызметі көмектеседі, мұнда төмендегі суреттегідей параметрлерді таңдау керек.
- Классикалық H5BP (HTML5 қазандық тақтасы)
- Үлгі жоқ
- Тек HTML5 Shiv
- Кішірейтілген
- IE сыныптары
- Chrome Frame
- Содан кейін Жүктеп алу түймесін басыңыз!
2. Плагинді жүктеп алыңыз және қосыңыз
Initializr ең соңғы JQuery кітапханасымен бірге келгендіктен, архивтен Lazy Line Painter жобасының репозиторийінен жүктеп алу қажет болғандықтан, жобамызға тек 2 файлды тасымалдау керек. Біріншісі ‘jquery.lazylinepainter-1.1.min.js’ (плагин нұсқасы әр түрлі болуы мүмкін) ол алынған қалтаның түбірінде орналасқан. Екіншісі мысал/js/vendor/raphael-min.js.
Осы 2 файлды js қалтасына орналастырамыз. Біз оларды main.js алдында index.html-ге келесідей қосамыз:
3. Adobe Illustrator бағдарламасында әдемі контур суретін салыңыз
Мысалы, қосымшадағы белгішелерді пайдалануға болады.
4. Біздің кескінді Lazy Line Converter түрлендіріңіз
Төмендегі суреттегі терезеге белгішеңізді сүйреңіз.
Контурдың қалыңдығын, түсін және анимация жылдамдығын кодтың өзінде өзгертуге болады, ол түрлендіруден кейін пайда болады!
5. Алынған кодты main.js ішіне қойыңыз
Енді алынған кодты бос main.js файлына қоямыз
Опциялар:
strokeWidth — контурдың қалыңдығы
strokeColor — контур түсі
Ұзақтық параметрінің мәндерін өзгерту арқылы әр вектордың сурет салу жылдамдығын өзгертуге болады (әдепкі 600)
6. Дәміне қарай біраз CSS қосыңыз
index.html ішінен абзацты жою
Сәлем Әлем! Бұл HTML5 Boilerplate.
Оның орнына біз анимация өтетін блокты енгіземіз
сосын main.css файлына әдемірек көріну үшін CSS қосамыз:
Негізгі мәтін (фон:#F3B71C; ) #белгішелер ( орны: бекітілген; жоғарғы: 50%; сол жақта: 50%; жиегі: -300px 0 0 -400px; )
барлық файлдарды сақтаңыз.
Енді заманауи браузерде index.html ашыңыз және әсерден ләззат алыңыз.
P.S. бастағанда жергілікті машинаАнимацияның басталуында бірнеше секундқа кідіріс болуы мүмкін.
Веб графикасын оңтайландыру
Графикалық ақпаратмәтінге қарағанда әлдеқайда баяу тасымалданады және кескіндерді жүктеу уақыты олардың өлшеміне пропорционалды графикалық файлдар. Сондықтан, веб-беттерді жылдам жүктеу кірістірілген шағын өлшемді қажет етеді графикалық бейнелер, бұл оларды оңтайландыру арқылы қол жеткізіледі. Кескінді оңтайландыру деп оның түрлендіруі түсініледі, бұл жағдайда талап етілетін кескін сапасын сақтай отырып, ең төменгі файл өлшемін қамтамасыз етеді, бұл ең алдымен графикалық кескіндердегі түстердің санын азайту, қысылған және арнайы файл пішімдерін пайдалану және жеке файлдар үшін қысу параметрлерін оңтайландыру арқылы қол жеткізіледі. кескін фрагменттері.
Illustrator қолданбасында әртүрлі алдын ала қарау әдістерімен оңтайландыру процесін жылдам және тиімді ететін кірістірілген кескінді оңтайландыру құралдары бар. Алдын ала қарау оңтайландырылған кескіннің нақты уақытта қалай болатыны туралы нақты түсінік береді, бұл оңтайландыру нәтижесін бағалауға және дұрыс параметрлерді сәтті таңдауға көмектеседі. Сіз тікелей Illustrator бағдарламасында жасалған кескіндерді де, басқаларды да, мысалы, веб-сайтта орналастырылуы тиіс фотосуреттерді оңтайландыруға болады.
Оңтайландыру параметрлері Файл мәзіріндегі аттас командамен шақырылатын Web үшін сақтау терезесінде орнатылады. Бағдарлама төрт алдын ала қарау режимінің бірін пайдалануды ұсынады, бірақ екеуі оңтайландыру сапасын бағалау үшін ең қолайлы:
- 2-Жоғары (екі опция) көрсетілген параметрлерге сәйкес түпнұсқа және оңтайландырылған кескінді бір уақытта қарау (1-сурет);
- 4-жоғары (төрт опция) Бұл режимде бастапқы кескінді және оңтайландырылғанның үш нұсқасын көрсету үшін қарау терезесі төрт терезеге (2-сурет) бөлінеді: бірінші нұсқа орнатылған оңтайландыру мәндерінің негізінде жасалады және қалған екеуі ағымдағы оңтайландыру параметрлерінің нұсқалары.
Екі режим де оңтайландырудың ең жақсы нұсқасын табуға уақытты айтарлықтай үнемдеуге мүмкіндік береді, өйткені олар әртүрлі оңтайландыру параметрлері бар кескіндерді сақтау және олардың кейінгі көрнекі салыстыру қажеттілігін жояды. Сонымен қатар, әртүрлі қосылым опциялары бойынша оңтайландырылған кескіннің сапасын ғана емес, оның өлшемін және жүктеу уақытын да бағалауға болады. Салыстыру үшін ең қолайлы режим 4-Up (төрт опция) болып табылады, ол қысу немесе палитраны азайтудың кескін сапасына және оның өлшеміне әсерін визуалды түрде бағалауға және сайып келгенде оңтайландырудың ең жақсы параметрлерін анықтауға мүмкіндік береді.
Illustrator сізге GIF, JPG, PNG-8 және PNG-24 форматтарында ғана емес, сонымен қатар SWF және SVG форматтарында веб-графиктерді оңтайландыруға мүмкіндік береді. Түстердің аз саны бар индекстелген кескіндер GIF пішімінде сақталады. JPG пішімі толық түсті және сұр реңкті кескіндерді, фотосуреттерді және градиент толтырулары сияқты түстерге бай графиканы сақтау үшін пайдаланылады. Мөлдір аймақтары бар толық түсті кескіндер үшін индекстелген және толық түсті кескіндерді сақтауға мүмкіндік беретін PNG пішімі пайдаланылады, ал PNG-8 пішімінде оңтайландырылған кескін түстерінің максималды мүмкін саны 256, ал PNG-24 форматында кескінде миллиондаған түстер болуы мүмкін, сондықтан ол ұқсайды JPEG пішімі. PNG-24 пен JPEG арасындағы айырмашылық мынада: PNG-24 пішіміндегі кескіндерді оңтайландыру үшін қолданылатын қысу әдісі сапаның жоғалуына әкелмейді, бірақ нәтижесінде файл өлшемі артады. SVG және SWF пішімдері графиканы, мәтінді және интерактивті құрамдастарды біріктіреді және оларды оңтайландыруға болады.
қарастырайық нақты мысалкескінді оңтайландыру. Веб-сайт логотипі Illustrator бағдарламасында әзірленді делік (3-сурет), бастапқыда AI форматында сақталған. Оны Интернет үшін бірден оңтайландыру әрекеті жақсы ештеңеге әкелмейді, өйткені бұл жағдайда кескін автоматты түрде кесіледі, бұл деформация нәтижесінде алынған жазудың шынайы орнын есепке алмайды (4-сурет және 5).
Сондықтан, File=>Export (File=>Export) пәрменімен логотипті PSD пішіміне экспорттап көрейік, жасалған кескіннің өлшемі 143 КБ болады. Алынған PSD файлын ашыңыз және File=>Save for Web пәрменін пайдаланыңыз. Кескінге тартылатын түстердің шектеулі санын ескере отырып, бұл жағдайда GIF пішімі оңтайлы болып табылады, оның нақты параметрлерін шешу қажет. Параметрлермен тәжірибе жасай отырып, сіз бұған көз жеткізе аласыз ең жақсы сапабағдарламаның әдепкі қысу алгоритмін береді, Таңдамалы. Тегістеуге келетін болсақ, градиентті толтырудың болуын ескере отырып, шуды тудыратын Шу бар алгоритмді таңдаған дұрыс (6-сурет). Алынған оңтайландыру файлының өлшемі 6,729 КБ болады (7-сурет), бұл ретте фонның мөлдірлігі сақталады, бұл кескінді HTML файлымен бірге GIF форматында сақтау арқылы оңай тексеруге болады (8-сурет). Нәтижесінде, бұл мысалда emblem.html және emblem.gif файлдары Primer1 қалтасында алынды.
Кез келген Web-парақ дизайнының ерекше элементі графикалық басқару түймелері болып табылады. Оларсыз бетті елестету мүмкін емес. Түймемен сурет салу бүгінде ерекше жанрға айналды және Illustrator сізге ең күрделі опцияларды жасауға мүмкіндік береді. Мысалы, торлы нысандар ретінде жасалған және/немесе қабаттасу маскалары бар түймелер әдеттегіге қарағанда әлдеқайда әсерлі көрінеді.
Illustrator бағдарламасында дөңгелек, дөңес түймені жасау опциясын қарастырыңыз. Ерікті түспен толтырылған шеңбер түрінде векторлық объектіні салыңыз (9-сурет) және оны Объект => Градиент торын құру (Объект => Градиент торын құру) командасы арқылы торға түрлендіріңіз, төрт жолды және төрт жолды көрсетіңіз. бағандарды және «Көрініс» тізімінде 60-қа тең Ортаға бөлектеу опциясын таңдаңыз (Cурет 10). Тікелей таңдау құралын таңдап, сол жерде орналасқан бекіту нүктелерін таңдай отырып, нысанның жоғарғы сол жақ бұрышында шертіңіз (Cурет 11). Swatches палитрасында таңдау арқылы сәйкес ұяшықтың түсін ақ түске өзгертіңіз (Cурет 12).
Эллипс құралын алып, тінтуір маркерін бұрын жасалған шеңбердің ортасына қойып, Alt және Shift пернелерін басып тұрып, жаңа шеңберді бұрынғыдан 1-2 пиксельге үлкен болатындай етіп ескінің үстіне созыңыз. жақтары. Оған ені 1-2 пиксель болатын қара жиек (штрих) беріңіз және оны қызылдан ақ түске дейінгі бағытта радиалды градиентпен толтырыңыз (Cурет 13). Жасалған векторлық нысанды 1-2 пиксель оңға және төмен сүйреңіз, содан кейін таңдауды жоймай, оны тінтуірдің оң жақ түймешігімен басып, сыртқа шығарыңыз. контекстік мәзір Rrange=>Send To Back таңдаңыз. Нәтиже суретте көрсетілген түйме үшін бос орын болады. 14.
Әдетте, кез келген Web-бетте бір түрдегі бірнеше түймелер болады, мысалы, оларда сызылған көрсеткілердің бағыты бойынша ғана сайттың айналасындағы қозғалыс бағытын көрсетеді. Екі түйме болуының ең қарапайым жағдайын қарастырайық, олардың біреуі төмен көрсеткі бар келесі бетке өтуді білдіреді, ал жоғары көрсеткі бар түйме алдыңғыға өтуді білдіреді. Көрсеткі үлгісі ретінде көпбұрыш құралымен сызылған, қара түске боялған және үлкен әсер ету үшін тор нысаны ретінде жасалған кәдімгі үшбұрышты алайық. Көрсеткіні түймеге жылжытыңыз және туралау палитрасындағы сәйкес түймелердің көмегімен барлық нысандардың бір-біріне қатысты орнын реттеңіз. Алынған түймелердің біріншісі суретте көрсетілген. 15. Қайталанатын қабат қабаттары командасын таңдау арқылы батырмамен қабаттың көшірмесін жасайық, нәтижесінде екі бірдей қабат аламыз. Содан кейін қабаттың көшірмесіндегі көрсеткіні таңдап, контекстік мәзірден Трансформация=>Трансформацияны бұру=>Бұру командасын таңдап, оны 180° бұраңыз. Біз суретте көрсетілгендей түймені аламыз. 16. Бір жобаға арналған түймелердің барлығын бір файлда әртүрлі қабаттарда сақтау әлдеқайда ыңғайлы екенін ескеріңіз, бұл жағдайда көрсетілген.
Енді әрбір түйменің оңтайландырылған нұсқаларын сақтау керек. Алдымен төменгі қабатты көрінбейтін етіп жасаңыз, бұл жағдайда үстіңгі қабаттағы түйме сақталады. File=>Save for Web пәрменін таңдаңыз, түймені оңтайландыру параметрлерін конфигурациялаңыз, мысалы, суретте көрсетілгендей. 17, Сақтау түймесін басып, файл атын енгізіңіз. Соңында сақталған түйме суретте көрсетілген. 18. Енді көрінуді төменгі қабатқа қайтарыңыз, үстіңгі қабатты көрінбейтін етіп жасаңыз және екінші түймені басқаша атаумен сақтаңыз. Нәтиже суретте көрсетілген. 19.
Енді веб-бетте түймелердің өте қолайлы болып көрінетініне көз жеткізу және оларды пайдаланушы бетінде орналастыру ғана қалады (Cурет 20). Нәтижесінде бұл мысалда Primer2.html файлы және кескіндер қалтасында екі графикалық кескін алынды (Primer2 қалтасы).
Қажет болса, оңтайландыру процесінде түймені кесіндіге айналдыру оңай. Бұл жағдайда File=>Save for Web (File=>Save for Web) пәрменін таңдап, оңтайландыру параметрлерін орнатқаннан кейін құралдар палитрасынан Slice Select құралын таңдап, суретті екі рет шертіңіз, ол ақырында автоматты түрде реттік нөмірі 1 кесіндіге айналады (Cурет 21). Қайтадан екі рет шерткенде, сілтемені көрсету және кесінді атауын өзгерту қажет (22-сурет), содан кейін оңтайландырылған кескінді сақтау қажет болатын «Бөлім опциялары» терезесі ашылады. Бұл жағдайда нәтиже Primer3.html (23-сурет) және Primer3.gif (Primer3 қалтасы) файлдары болады.
Бетті өмірге әкелудің бір жолы оны өзгертетін дизайн элементтерін енгізу болып табылады сыртқы түрі(немесе күй) тінтуірдің әрекетіне байланысты немесе кез келген басқа жағдайларда: масштабтау, айналдыру, жүктеу, қателер және т.б.
Мұндай элементтердің ішінде ең танымалы тінтуірдің әсерінен сыртқы түрін өзгертетін rollovers (ағылшынша rollover roll over, turn over) элементтері. Әдеттегі айналдыру мысалдары анимациялық түймелер болып табылады. Басқа веб-сайтты шарлау элементтерін жасау кезінде жылжыту жиі пайдаланылады. Шындығында, кез келген ауытқылау бір емес, әрқайсысы белгілі бір оқиғаға сәйкес келетін бірнеше (төртке дейін) кескін болып табылады. Негізгі оқиғалар мыналар болып саналады: Қалыпты қалыпты күй, Тінтуір курсорын элементтің үстіне апару және курсорды оның үстіне апарған кезде тінтуірдің сол жақ түймесін басу. Теориялық тұрғыдан алғанда, басқаннан кейін тінтуірдің сол жақ түймешігін босатыңыз. Дегенмен, іс жүзінде олар көбінесе элементті тек алғашқы үш немесе тіпті екі оқиға үшін өзгертумен шектеледі.
Классикалық айналдыруларКлассикалық мағынада айналдыру - бұл GIF форматындағы графикалық кескіндер сериясы және сәйкес HTML коды, соның арқасында тінтуірдің әрекетіне байланысты браузер терезесінде бір кескін екіншісін ауыстырады.
Illustrator классикалық мағынада тікелей айналдыруды жасауға арналмаған, бірақ олар үшін бастапқы элементтерді әзірлеуге көмектесе алады. Бұл жағдайда идея бірінші оқиғаға сәйкес келетін кескінмен қабат жасау болып табылады. Содан кейін қабаттың көшірмесін жасаңыз және суретті екінші оқиғаға сәйкестендіру үшін түрлендіріңіз және т.б. Алынған көп қабатты кескін қабаттары сақталған PSD файлына экспортталады, оның негізінде Image Ready бағдарламасында айналдыру жасалады. Illustrator бағдарламасын пайдаланудың артықшылығы, көптеген басқа жағдайларда сияқты, оның басқа бағдарламаларда жоқ бірқатар қызықты мүмкіндіктері болып табылады. бағдарламалық қамтамасыз ету, векторлық графиканы түрлендіру ыңғайлылығымен үйлеседі.
Тінтуірдің әрекетіне байланысты түсін өзгертетін жазу түрінде айналдыруды жасауға тырысайық. Illustrator бағдарламасын ашып, қара түспен толтырылған дөңгелектенген тіктөртбұрыш түріндегі пішінді жасаңыз (24-сурет), оның көшірмесін жасаңыз және экранның бос бөлігіне орналастырыңыз. Тіктөртбұрыштың бірінші көшірмесін ортасында ерекшелеуі бар тор нысанына түрлендіріңіз (объект Object=>Create Gradient Mesh Object=>Create Gradient Mesh) төрт жол мен он бағанды көрсете отырып (25-сурет). Тіктөртбұрыштың екінші көшірмесін іске қосыңыз және оны шамамен суретте көрсетілгендей градиентті толтыруға орнатыңыз. 26. Соққы әсерін имитациялау үшін градиент нысанын тордың үстіне қойыңыз, градиент нысанының мөлдірлігін шамамен 80%-ға және өлшемін шамамен 1 пиксельге азайтыңыз. Содан кейін нысандардың үстіне жазуды басып шығарыңыз. Өзінің бастапқы түрінде қалыпты күйге сәйкес келетін ақ түске ие болсын (27-сурет), содан кейін айналдыру күйі өзгерген кезде, жазудың түсі өзгереді, мысалы, тінтуір маркерінде жасыл түске айналады. оның үстіне меңзейді (Оверный күй) және тінтуір түймесі басылғанда көк түске (Төмен күй).
Бұл кезеңде қабаттар палитрасына назар аударыңыз, онда бір ғана қабат бар. Қабаттар палитрасы мәзіріндегі «Қабатты қайталау» командасын пайдаланып, осы қабаттың екі көшірмесін жасаңыз, палитрада үш қабат болады (Cурет 28). Содан кейін қабаттың бірінші данасында жазудың түсін жасыл түске, ал екінші көшірмеде көк түске өзгертіңіз (29-сурет). Нәтижесінде айналдыруға қажетті дайындама алынады.
Жасалған кескінді PSD пішіміне, қабаттарды сақтай отырып, File=>Export командасын қолданып және RGB түс үлгісін таңдап экспорттаңыз (Cурет 30). Құрылған PSD файлын ImageReady бағдарламасында ашыңыз (Cурет 31 және 32). «Анимация» палитрасы мәзірінен «Қабаттардан кадр жасау» пәрменін таңдау арқылы қабаттар негізінде кадрларды жасаңыз. Анимация терезесі суреттегідей болады. 33. Бұл жағдайда Rollovers палитрасында бастапқыда жалғыз Қалыпты күй жасалады.
Содан кейін «Анимация» терезесінде индукцияланған күйге сәйкес кадрды таңдаңыз, сонда «Қабаттар» палитрасында 1-қабат көшірме қабаты автоматты түрде таңдалады (34-сурет). Rollovers палитрасына өтіп, Rollover күйін жасау түймешігін басыңыз (Айналмалы күйді жасау) сур. 35, бұл Айналмалы палитрада Over State күйінің пайда болуына әкеледі (Cурет 36). Төмен күйді дәл осылай жасаңыз. Rollovers палитрасында Қалыпты күйді белсендіріңіз және Қалыпты күйге сәйкес келетіннен басқа Анимация палитрасындағы барлық кадрларды жойыңыз. Нәтижесінде әрбір айналдыру күйі үшін Анимация палитрасында бір ғана кадр болады (37, 38 және 39-сурет).
Күріш. 38. Кескіннің көрінісі, Анимация терезесі және Over State күйіне арналған қабаттар мен жылжыту палитралары
Құралдар тақтасындағы «Әдепкі шолғышта алдын ала қарау» түймесін басып, шолғыш терезесіне өту арқылы нәтижені тексеріңіз (40-сурет). Осыдан кейін файлды File=>Save Optimized пәрменін қолданып, HTML және Images (*.html) опциясын көрсету арқылы сақтаңыз. Нәтижесінде бұл мысалда Primer4.html файлы және суреттер қалтасында графикалық кескіндер қатары алынды.
Күріш. 40. Rollover элементі бар шолғыш терезесі
SVG ауысуыБарған сайын танымал SVG (масштабталатын векторлық графика) пішімі Векторлық графика), XML стандарты негізінде жасалған, сонымен қатар әртүрлі интерактивті элементтерді, атап айтқанда, ауысуларды алуға мүмкіндік береді, бірақ іс жүзінде бұл мүлдем басқаша жүзеге асырылады. Айта кету керек, интерактивті SVG rollovers жасау классикалық кодтардан айырмашылығы, сәйкес HTML коды толығымен автоматты түрде жасалған кезде JavaScript тілін білу және объектіге бағытталған бағдарламалаудың негізгі принциптерін түсіну қажет.
SVG объектілерімен жұмыс істеу үшін SVG Interactivity арнайы палитрасы бар, оны Window => SVG Interactivity (Терезе => SVG интерактивтілігі) командасы арқылы оңай ашуға болады. 41.
Интерактивті батырманың мысалын пайдалана отырып, айналдыруды жасаудың бұл опциясын қарастырайық, тінтуірді жылжытқанда жазудың түсі қарадан көкке өзгереді және тінтуір белсенді аймақтан шыққан кезде қайтадан қара түске айналады.
Дөңгелектелген жиектері бар тікбұрышты түймені жасаңыз және оған сәйкес градиентті толтыруды таңдаңыз, мысалы, суретте көрсетілгендей. 42. Мөлдірлік палитрасындағы батырманың мөлдірлігін реттеңіз.Бұл мысалда Мөлдірлік мәні 50% деп орнатылған. Түйменің көшірмесін жасаңыз, оны қою жасыл түспен толтырыңыз (43-сурет), содан кейін оны Объект => Градиент торын жасау, төрт жол мен он бағанды көрсете отырып, және Сыртқы көрініс тізімінде (Көрініс) пәрменімен тор нысанына түрлендіріңіз. Орталыққа опциясын таңдау және Бөлектеу мәнін 100 мәніне орнату арқылы. Тор нысаны бар қабаттың мөлдірлігін шамамен 40%-ға дейін азайтыңыз (Cурет 44). Тор нысанын градиенттің үстіне қойыңыз, сонда түйме суретте көрсетілгенге ұқсайды. 45.
Күріш. 44. Түйменің көшірмесін тор нысанына айналдырыңыз
Түймені белгіленген жазумен аяқтаңыз және туралау палитрасындағы сәйкес түймелерді пайдаланып оның орнын реттеңіз. Алынған кескінде бір-бірінің үстіне қойылған үш нысаны бар бір қабат болады (Cурет 46). Жоспарланған оқиғалар мәтіндік нысанға қатысты болады, сондықтан ыңғайлы болу үшін нысанды екі рет басып, жаңа атау енгізу арқылы оның атын Мәтінге өзгертіңіз. Сол сияқты, қабат атауын 1-қабаттан Қабатқа өзгертіңіз (Cурет 47).
Оқиғаларды өңдеу JavaScript процедураларын пайдалануды қамтиды, сондықтан осы процедураларды сипаттайтын файлды қосу керек. Ол Events.js деп аталады және орнату кезінде Sample Files\Sample Art\SVG\SVG қалтасында дискіге сақталады. Adobe бағдарламаларыИллюстратор. Events.js файлын қосу үшін JavaScript Files SVG Interactivity пәрменін пайдаланыңыз (Cурет 48). Әрі қарай, сіз «Қосу» түймесін басып, қатты дискідегі қажетті файлды табуыңыз керек. Оның аты URL өрісінде пайда болған кезде (49-сурет), Дайын түймесін басыңыз.
Күріш. 48. JavaScript файлдары пәрменін таңдау
Әрі қарай, Мәтін нысаны үшін тінтуір оқиғаларына жауапты анықтау керек. Мәтін нысанын таңдаңыз, SVG интерактивті палитрасының Оқиға өрісінде тінтуірдің үстінен оқиғаны таңдаңыз elemColor(evt, "Мәтін", "#3333FF") бұл тінтуір Мәтін нысанының үстінде болғанда оның түсі өзгеретінін білдіреді. көк (Cурет 50 ). Тінтуір белсенді аймақтан шыққаннан кейін мәтін түсі қара түске ауысуы үшін сізге басқа onmouseout оқиғасын жасау керек, оны SVG интерактивті палитрасының Оқиға өрісінде таңдаңыз. Содан кейін әрекет жолында мәтінді енгізіңіз elemColor(evt, "Мәтін", "#000000") бұл түсті қара түске қайтарады (51-сурет).
Күріш. 51. Мәтін нысаны үшін SVG интерактивті палитрасының соңғы көрінісі
Жасалған айналдыруды File=>Save as (Файл=>Файл түрі SVG пішімі) пәрменімен SVG файлы ретінде сақтаңыз, содан кейін 52-суретте көрсетілгендей SVG файлын сақтау опцияларын орнатыңыз. Сақтағаннан кейін сіз тек біреуін аласыз. классикалық ауысу жағдайындағыдай екі емес, SVG кеңейтімі бар жалғыз файл, бұл жағдайда Primer5.svg файлы (Primer5 қалтасы) алынды.Бірақ, ауысу шынымен жұмыс істеуі үшін қосымша көшіру керек. JavaScript процедураларының сипаттамасынан Events.js файлын алыңыз. Одан кейін айналдырудың функционалдығын тексеруге болады - нәтиже 53-суретте көрсетілгендей болады.
SVG пішімін анимацияны жеткізу үшін де пайдалануға болады. Қарапайым анимациялық элемент құруға тырысайық (бұл жағдайда ол компания туралы ақпарат болады), ол тінтуірді сәйкес графикалық объектінің үстіне апарған кезде экранда пайда болады және интерактивті элементтен тінтуірді алып тастағанда жоғалады.
Суретте көрсетілгендей графикалық және мәтіндік объектілердің шамамен келесі қатарын құрайық. 54. Қабаттар палитрасындағы келесі объектінің атын ретімен шерту және енгізу арқылы барлық құрылған объектілердің атын ыңғайлы түрде өзгертейік. қалаған атау(Cурет 55). Назар аударыңыз, суретте көрсетілгендер. 56 нысан Text1, Text2, Text3 және Path1 әрқашан көрінеді, ал қалғандары тек тінтуірді Text1 нысанының үстіне апарған кезде ғана көрінеді.
Күріш. 54. Суреттің бастапқы көрінісі
JavaScript процедураларын сипаттайтын Events.js файлын SVG интерактивті палитрасындағы JavaScript файлдары пәрменін пайдаланып, Қосу түймесін басып, қатты дискідегі қалаған файлды меңзеп, Дайын түймешігін басу арқылы қосыңыз.
Text1 нысаны үшін тінтуір оқиғаларына жауапты анықтаңыз. Мәтін нысанын таңдаңыз, SVG интерактивті палитрасының Оқиға өрісінде тінтуірдің үстінен өту оқиғасын таңдаңыз және төмендегі жолға elemShow(evt, "Мәтін4") мәтінін енгізіңіз; elemShow(evt, "Жол2") . Нәтижесінде тінтуір Text1 нысанының үстінде болғанда, Text4 және Path2 нысандары көрінетін болады. Оқиға орын алған кезде бірнеше әрекетті орындау қажет болса, оларды «;» белгісі арқылы көрсету керек екенін ескеріңіз. Содан кейін onmouseout оқиғасы үшін ұқсас операцияны орындаңыз, оған мәтінді енгізіңіз, бұл нысандарды жасыруды білдіреді (Cурет 57).
Нәтижені SVG файлы ретінде File=>Save as пәрмені арқылы сақтаңыз, файл атын көрсетіңіз, File type өрісінде SVG пішімін таңдап, содан кейін SVG файлын сақтау опцияларын суретке сәйкес орнатыңыз. 58. Сақтағаннан кейін Primer6.svg файлы алынады (Primer6 қалтасы). Events.js файлын осы файлы бар қалтаға көшіруді ұмытпаңыз. Осыдан кейін сіз coz іске қоссаңыз бұл файл, содан кейін сіз суретте көрсетілген нәтижені көресіз. 59. Бұл сізге керек дерлік. Біздің жоспарларымызға кірмеген жалғыз нәрсе - жүктеген кезде 4-ші мәтін және 2-жол нысандарының бастапқы пайда болуы. Бұл кемшіліктен құтылу үшін екі нысан деректерін бірден таңдап, оларға әрекет жасаңыз elemHide(evt, "Text4"); elemHide(evt, "Path2") жүктеу оқиғасында (Cурет 60). Файлды қайта сақтаңыз және Text4 және Path2 нысандары енді Мәтін1 нысанының үстіне апарған кезде ғана көрінетініне көз жеткізіңіз.
Кез келген веб-бетті веб-анимациясыз, оның ішінде анимациялық gif файлдарынсыз елестету мүмкін емес. Оларды жасау нұсқаларының бірі Adobe ImageReady қолданбасын пайдалану болып табылады, ол басқа нәрселермен қатар қабаттардан анимация жасауға мүмкіндік береді. Бұл жағдайда көп қабатты кескіннің өзін әртүрлі қолданбаларда, соның ішінде Adobe Illustrator бағдарламасында дайындауға болады.
Терезе=>Символдар командасымен ашылған Символдар палитрасындағы немесе Терезе=>Таңбалар кітапханалары командасы арқылы ашылатын символдар кітапханаларының бірінен элементтер негізінде анимация жасау өте оңай. ).
Мысалы, біз кез келген символдық нысанның өлшемін үлкейтуге тырысамыз, нысанды ұлғайту процесінің негізгі кезеңдері бөлек қабаттарда орнатылуы керек. Алдымен таңба нысандарын бірінің үстіне бірін орналастырыңыз, содан кейін әрбір келесі нысанның өлшемін үлкейтіңіз, мысалы, суретте көрсетілгендей. 61. Нәтижесінде Layers палитрасында көптеген нысандары бар бір қабат жасалады (62-сурет). Егер сіз бұл кескінді PSD пішіміне тікелей экспорттасаңыз, ол ештеңе бермейді, өйткені бір ғана қабат бар және, әрине, ImageReady бағдарламасында PSD файлын ашқанда, тек бір қабат болады. Сондықтан алдымен нысандарды әртүрлі қабаттарға орналастыру керек. Мұны істеуге болады әртүрлі жолдарЕң оңай жолы - алдымен Қабаттар палитрасында 1-қабатты таңдап, Қабатқа шығару командасын пайдалану. Нәтижесінде нысандардың әрқайсысы өз қабатына жылжытылады, бірақ олардың барлығы 1-деңгейде кірістірілген болады. Сондықтан, содан кейін барлық кірістірілген қабаттарды 1-қабаттың үстінде болатындай етіп Қабаттар палитрасының жоғарғы жағына қолмен сүйреп апару керек, содан кейін қазір бос 1-қабатты жою керек болады (Cурет 63). Суреттегідей параметрлері бар File=>Export пәрменін пайдаланып кескінді PSD пішіміне экспорттаңыз. 64.
Құрылған PSD файлын ImageReady бағдарламасына жүктеңіз (Cурет 65 және 66). «Қабаттардан кадрлар жасау» палитрасы мәзірін ашыңыз. Нәтижесінде бес кадр құрылады, олардың әрқайсысы өз қабатына сәйкес келеді және Анимация палитрасының терезесі суреттегідей болады. 67.
Осыдан кейін, бұл жағдайда жасалған кадрлардың әрқайсысының ұзақтығын орнатыңыз, барлық кадрлардың ұзақтығы 0,2 секундқа орнатылады. Содан кейін Файл=>Оңтайландырылған сақтау (Файл=>Оңтайландырумен сақтау) командасы арқылы анимацияны оңтайландырумен сақтаңыз. Алынған нәтиже суретке ұқсауы мүмкін. 68.
Illustrator бағдарламасының Live Blends функцияларын пайдалану үшін ImageReady бағдарламасында оңай анимацияға түрлендіруге болатын бос орындарды алу әлдеқайда ыңғайлы. Бұл Illustrator және ImageReady біріктірілген пайдалану GIF анимацияларын жасау процесін айтарлықтай жылдамдатады.
Мысалы, екі ерікті көп түсті нысанды салыңыз, содан кейін оларды сәйкес параметрлері бар аралас сілтеме арқылы қосыңыз (Cурет 69). Бұл файлды тікелей анимация жасау үшін пайдалану мүмкін емес, өйткені кескін бір қабатта (Cурет 70). Сондықтан, алдымен араластыру нысанының әрбір элементін бөлек қабатқа орналастыру керек. Ол үшін «Қабаттар» терезесінде жолды таңдап, оның жоғарғы оң жақ бұрышындағы қара көрсеткіні басу арқылы бояғышты мәзірді белсендіріңіз және «Қабаттар тізбегіне шығару» командасын таңдаңыз (Cурет 71). Shift пернесін басып тұрып, жасалған қабаттарды таңдап, оларды 1-қабаттың үстіне орналастырыңыз, содан кейін 1-қабаттың өзін жойыңыз, нәтижесінде оны қоқыс жәшігіне жылжытыңыз, қабаттар палитрасы суреттегідей пішінді алады. 72.
Күріш. 70. Бастапқы күйҚабаттар терезелері
Жасалған файлды File=>Export командасы арқылы PSD пішіміне экспорттаңыз. Құрылған PSD файлын ImageReady бағдарламасында ашыңыз (Cурет 73). Illustrator бағдарламасында жасалған барлық қабаттар қабаттар терезесінде пайда болатынын ескеріңіз (74-сурет), ал Анимация терезесінде әзірге бір ғана кадр болады.
Анимация палитрасы мәзірін палитраның жоғарғы оң жақ бұрышындағы қара көрсеткіні шерту арқылы белсендіріңіз және «Қабаттардан кадрлар жасау» командасын таңдаңыз.Нәтижесінде бұл мысалда бес кадр құрылады, анимация палитрасы терезесі суретке сәйкес пішін. 75. Shift пернесін басып тұрып барлық кадрларды таңдаңыз және осы мысалда сәйкес кадр ұзақтығын орнатыңыз, әр кадр үшін бірдей 0,2 с уақыт алынады. Содан кейін Файл түрі тізімінде Тек кескіндер (*.gif) опциясын орнатып, Файл=>Оңтайландырылған сақтау (Файл=>Оңтайландырумен сақтау) пәрменін пайдаланып файлды оңтайландырумен сақтаңыз. Анимация суретке ұқсайды. 76.
Қозғалыс емес, аралас нысандардың біркелкі өлшемін өзгерту қызықтырақ көрінеді. Мысалы, бұрыннан жасалған аралас өтуді пайдалануға болады. Бұл жағдайда, әрбір аралас өту элементі үшін бөлек қабаттарды жасағаннан кейін, туралау палитрасының Көлденең туралау орталығы және Тігінен туралау орталығы түймелері арқылы барлық нысандарды бірінің үстіне бірін орналастырыңыз (Cурет 77) .
Құрылған файлды PSD пішіміне экспорттаңыз (Файл=>Экспорттау файлы=>Экспорт) және жасалған PSD файлын ImageReady бағдарламасында ашыңыз (Cурет 78). Қабаттар негізінде анимациялық кадрлар жасаңыз (Қабаттардан кадрлар жасау Қабаттардан кадрлар жасау) және олар үшін қолайлы ұзақтықты таңдаңыз (Cурет 79). Содан кейін, анимацияны тиімдірек ету үшін, бар кадрларды көшіріңіз, бірақ кері ретпен сурет алдымен үлкейіп, содан кейін азаяды және т.б. шеңбер бойымен (80-сурет). Содан кейін оңтайландыру файлын сақтаңыз (Файл=>Оңтайландырылған файлды сақтау=>Оңтайландырумен сақтау). Алынған анимация суретте көрсетілген. 81.
Күріш. 80. Анимация терезесінің кадрларды көшіруден кейінгі күйі
Күріш. 81. Дайын анимация
Adobe Illustrator бағдарламасында мөлдір GIF келесідей жасалады. Файл > Веб және құрылғылар үшін сақтау (Alt+Ctrl+Shift+S) мәзіріне өтіңіз. Ашылған терезеде «Оңтайландырылған файл пішімі» өрісінде алдымен «Сурет өлшемі» қойындысына өту керек. Мәселе мынада, әдепкі бойынша бүкіл бет оңтайландыру терезесіне кіреді және бұл әдетте қажет емес. Сондықтан, «Кескін өлшемі» қойындысында Clip to Artboard құсбелгісін алып, «Қолдану» түймесін басыңыз.
Содан кейін пішім таңдау тізімінен GIF таңдап, «Мөлдірлік» құсбелгісін қойыңыз.
Осыдан кейін біз қандай түстер мөлдір болатынын анықтаймыз. Суреттегі барлық түстер Түстер кестесі қойындысында қамтылған және түрлі-түсті квадраттар түрінде көрсетіледі. Терезенің сол жағындағы құралдар тақтасынан Тамшуыр құралын таңдаңыз.
Түстерді анықтаудың екі жолы бар. Ең оңай әдіс - көз тамшысының көмегімен түсті тікелей суретте көрсету - осыдан кейін түс түс кестесінде қараңғы штрихпен бөлектеледі. Егер сіз қандай түс мөлдір болуы керек екенін нақты білсеңіз, сәйкес түсті шаршыны басу арқылы оны түстер кестесінде тікелей таңдауға болады. Бірінші және екінші жағдайда да бірнеше түстерді таңдау қажет болса, Shift (немесе Ctrl) пернесін басып жұмыс істеу керек. Түсті таңдағаннан кейін оны мөлдір ету үшін бағдарламаға нұсқау беру керек. Мұны істеу үшін Таңдалған түстерді мөлдір етіп көрсету белгішесін басыңыз. Суретте бұл түйме дөңгелектелген және қызыл түс мөлдір етіп орнатылған. Кескінде мөлдір аймақ пайда болады, ал түсті кестедегі шаршы оның көрінісін өзгертеді - оның бір бөлігі ақ үшбұрышқа айналады. Таңдалған түстен бас тарту үшін оны Түстер кестесінде таңдау керек, содан кейін Таңдалған түстерді мөлдір етіп көрсету белгішесін қайтадан басыңыз.
Мөлдірлікті орнату әдісі туралы бірнеше сөз. Ол ашылмалы мәзірге жауап береді Specify Transparency Dither Algorithm, орыс тілінде - Алгоритм имитациялау мөлдірлік (төмендегі сурет). Төрт таңдау бар: мөлдірлігінің ауытқуы жоқ, диффузиялық мөлдірлігінің ауытқуы, үлгінің мөлдірлігінің ауытқуы және шудың мөлдірлігінің ауытқуы. Диффузиялық алгоритм режимінде Сома жүгірткісі белсенді болады, бұл диффузия мәнін өзгертуге мүмкіндік береді. Іс жүзінде нені қолдану керек? Мақсаты мен суретіне байланысты. Мен бұл опцияны пайдаланбаймын және оны әрқашан әдепкіде қалдырамын - Transparency Dither жоқ.
Сақтау түймесін басыңыз - мөлдір GIF дайын. Жұмыс Adobe Illustrator CS4 (v.14) нұсқасында орындалды, бірақ барлық әрекеттер мен пернелер тіркесімдері CS3 (v. 13) бұрынғы нұсқасына да қатысты.
Импорт және қарапайым анимацияСәлеметсіз бе. Бүгін біз 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 ішіне импорттау
Файл - Импорт - Файл - сақталған Illustrator файлымызды таңдаңыз.
Illustrator қолданбасынан қабаттарды импорттауды таңдайық; егер біз кадрларды салсақ, біріктірілген қабаттары бар сурет аламыз, бірақ бізге бұл қажет емес.
7-сурет - Құрам ретінде импорттау
Міне, импорттық.
Енді бізде не бар екенін көрейік. Композицияны екі рет басыңыз, сонда ол ашылады және біз қабаттарды көреміз (егер бәрі дұрыс орындалса, бірнеше қабат болады). Біз мұны түсінеміз, суретті қараңыз
8-сурет - Ашық композиция
Ал енді біздің бүгінгі күніміз – Анимация.
After Effects бағдарламасындағы анимация
Айналдыру нүктесін көрсеткінің жоғарғы жағындағы панорамалау құралының көмегімен орнатыңыз (таңбаша – Y). Біз жай ғана нүктені алып, оны қажет жерге жылжытамыз. Нәтижесінде ол келесідей болады.. 
9-сурет - Панорамалық құрал және қабаттар
Міне, енді анимация үшін қабаттарға көшейік.
Бізге 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-сурет - Бастың орналасуы
Сонымен, анимация принципі осылай болды. Көрсеткі бүйірден екінші жаққа ауытқиды, ол котенкаға жақындаған бойда басын тартып, осы күйде біраз уақыт қалады, содан кейін оны орнына қайтарады.
Соңғы кезең
Өндіріс
Сіз өз жұмысыңыздан дайын өнімді жасауыңыз керек.
Мәзірге өтіңіз - Көрсету кезегіне қосу
Көрсету тақтасы ашылады және Шығыс модулінде (екі рет басу) шығыс пішімін таңдаңыз. Мен *.mov алдым
12-сурет – Рендер
RENDER түймесін басып, нәтижені алыңыз (тек жолды көрсетуді ұмытпаңыз).
Бар болғаны.
