İllüstratorda necə animasiya etmək olar. Adobe illustrator-da məsləhətlər və fəndlər: İllüstratorda fəndlər. Illustrator-da qrafika yaratmaq bacarığı (Adobe Flash ilə müqayisədə). Illustrator-da SVG faylının hazırlanması
Veb qrafikasının optimallaşdırılması
Qrafik məlumat mətndən xeyli yavaş ötürülür və şəkillərin yüklənmə müddəti onların ölçüsünə mütənasibdir qrafik fayllar. Buna görə də, sürətli yüklənən Web səhifələri onlara daxil edilmiş kiçik ölçü tələb edir. qrafik şəkillər, bu da onların optimallaşdırılması ilə əldə edilir. Təsvirin optimallaşdırılması dedikdə, bu halda tələb olunan görüntü keyfiyyətini qoruyarkən minimum fayl ölçüsünü təmin edən çevrilməsi başa düşülür, bu, ilk növbədə qrafik təsvirlərdə rənglərin sayını azaltmaqla, sıxılmış və xüsusi fayl formatlarından istifadə etməklə və fərdi şəkillər üçün sıxılma parametrlərini optimallaşdırmaqla əldə edilir. təsvir fraqmentləri.
Illustrator müxtəlif önizləmə üsulları vasitəsilə sürətli və səmərəli optimallaşdırma prosesini təmin edən daxili təsvir optimallaşdırma alətlərinə malikdir. Preview optimallaşdırılmış görüntünün real vaxtda necə görünəcəyi barədə kifayət qədər dəqiq fikir verir ki, bu da optimallaşdırmanın nəticəsini qiymətləndirməyə və düzgün parametrləri seçməyə kömək edir. Siz həm birbaşa Illustrator-da yaradılmış şəkilləri, həm də Veb saytına yerləşdirmək istədiyiniz şəkilləri optimallaşdıra bilərsiniz.
Optimallaşdırma parametrləri pəncərədə müəyyən edilir Veb üçün saxla(Save for Web), menyudan eyni adlı komanda ilə çağırılır Fayl(Fayl). Proqram dörd baxış rejimindən birini istifadə etməyi təklif edir, lakin optimallaşdırmanın keyfiyyətini qiymətləndirmək üçün ikisi ən yaxşısıdır:
- 2-Yuxarı(iki variant) göstərilən parametrlərə uyğun olaraq orijinal və optimallaşdırılmış təsvirin eyni vaxtda baxılması (şək. 1);
- 4-Yuxarı(dörd seçim) Bu rejimdə görünüş sahəsi orijinal təsviri və optimallaşdırılmışın üç versiyasını göstərmək üçün dörd pəncərəyə bölünür (şək. 2): ilk versiya təyin edilmiş optimallaşdırma dəyərlərinə əsasən yaradılır, digər ikisi isə cari optimallaşdırma parametrləri üçün seçimlərdir.
Hər iki rejim ən yaxşı optimallaşdırma variantını tapmaq üçün vaxta əhəmiyyətli dərəcədə qənaət etməyə imkan verir, çünki onlar müxtəlif optimallaşdırma parametrləri ilə şəkilləri saxlamaq və sonra onları vizual olaraq müqayisə etmək ehtiyacını aradan qaldırırlar. Bundan əlavə, yalnız optimallaşdırılmış təsvirin keyfiyyətini deyil, həm də ölçüsünü və müxtəlif əlaqə variantları üçün yükləmə vaxtını qiymətləndirmək mümkündür. Müqayisə üçün qeyd edək ki, ən əlverişli rejim 4-Up (dörd seçim) olub, sıxılmanın və ya palitranın kiçilməsinin təsvirin keyfiyyətinə və ölçüsünə təsirini vizual qiymətləndirməyə və son nəticədə optimallaşdırmanın ən yaxşı parametrlərini müəyyən etməyə imkan verir.
Illustrator sizə yalnız GIF, JPG, PNG-8 və PNG-24 formatlarında deyil, həm də SWF və SVG-də veb qrafikasını optimallaşdırmağa imkan verir. Az sayda rəngə malik indekslənmiş şəkillər GIF formatında saxlanılır. Tam rəngli və boz tonlu şəkilləri saxlamaq üçün fotoşəkillər və gradient dolguları kimi rənglərlə zəngin qrafiklər JPG formatından istifadə edilir. Şəffaf sahələri olan tam rəngli şəkillər üçün PNG formatı istifadə olunur ki, bu da həm indekslənmiş, həm də tam rəngli şəkilləri saxlamağa imkan verir, PNG-8-də optimallaşdırılmış təsvirin rənglərinin maksimum mümkün sayı 256, PNG-də isə 24 şəklin milyonlarla rəngi ola bilər və buna görə də belə görünür jpeg formatı. PNG-24 və JPEG arasındakı fərq ondan ibarətdir ki, PNG-24 şəkillərini optimallaşdırmaq üçün istifadə edilən sıxılma metodu keyfiyyətin itirilməsi ilə nəticələnmir, lakin faylın ölçüsünü artırır. SVG və SWF formatları qrafika, mətn və interaktiv komponentləri birləşdirir və həmçinin optimallaşdırıla bilər.
düşünün konkret misal təsvirin optimallaşdırılması. Tutaq ki, Illustrator proqramında əvvəlcə AI formatında saxlanılan sayt emblemi hazırlanmışdır (şək. 3). Onu İnternet üçün dərhal optimallaşdırmaq cəhdi yaxşı bir şeyə səbəb olmayacaq, çünki bu halda şəkil avtomatik olaraq kəsiləcək, bu deformasiya nəticəsində əldə edilən yazının həqiqi mövqeyini nəzərə almayacaq (şəkil 4 və 5).
Buna görə də komanda ilə emblemi PSD formatına ixrac etməyə çalışaq Fayl=>İxrac(Fayl=>İxrac) Yaradılan şəklin ölçüsü 143 KB olacaq. Yaranan PSD faylını açın və əmrdən istifadə edin Fayl=>Veb üçün saxla(Fayl=>Veb üçün Saxla). Şəkildə iştirak edən rənglərin məhdud sayını nəzərə alsaq, bu halda GIF formatı optimaldır, onun xüsusi parametrlərinə qərar verməlisən. Parametrləri sınaqdan keçirərək, bunu görə bilərsiniz ən yaxşı keyfiyyət proqramın standart sıxılma alqoritmini verir seçici(Seçmə). Hamarlaşdırmağa gəldikdə, gradient dolğunun mövcudluğunu nəzərə alaraq, səs-küy yaratma alqoritmini seçmək daha yaxşıdır. səs-küy(Şəkil 6). Nəticədə optimallaşdırma faylının ölçüsü 6,729 KB (şək. 7), fon şəffaflığı isə qorunub saxlanılacaq, bunu HTML faylı ilə birlikdə GIF şəklini saxlamaqla yoxlamaq asandır (şək. 8). Nəticədə, bu nümunədə Primer1 qovluğunda emblem.html və emblem.gif faylları əldə edilmişdir.
Düymələr
İstənilən veb səhifənin əvəzedilməz xüsusi dizayn elementi qrafik idarəetmə düymələridir. Onlarsız bir səhifə təsəvvür etmək sadəcə mümkün deyil. Düymələrin çəkilməsi bu gün xüsusi bir janra çevrilib və Illustrator sizə ən mürəkkəb variantları yaratmağa imkan verir. Məsələn, şəbəkə obyektləri kimi hazırlanmış və (və ya) maskalı düymələr adi olanlardan daha effektiv görünür.
Illustrator-da yuvarlaq qaldırılmış düymə yaratmaq variantını nəzərdən keçirin. Dairə şəklində ixtiyari rənglə doldurulmuş vektor obyektini çəkin (şək. 9) və əmrdən istifadə edərək onu torna çevirin. Obyekt=>Qradient Mesh yaradın(Object=>Gradient Mesh yaradın) dörd sətir və dörd sütun göstərərək və siyahıda Görünüş(Bax) seçim seçərək Mərkəzə vurğulamaq(Arxa işıqlandırma) 60-a qədər (Şəkil 10). Bir alət seçin Birbaşa Seçim və orada yerləşən lövbər nöqtələrini seçərək obyektin yuxarı sol küncündə klikləyin (şək. 11). Müvafiq xananın rəngini palitrada seçməklə ağ rəngə dəyişdirin Nümunə nümunələri(şək. 12).
Bir alət götürün Ellips(ellips), siçan markerini əvvəl yaradılmış dairənin mərkəzinə qoyun və düymələri basıb saxlayın alt və Shift, yeni dairəni köhnənin üstünə elə uzatın ki, hər tərəfdən köhnədən 1-2 piksel böyük olsun. Qara bir haşiyə edin Vuruş) 1-2 px enində və onu qırmızıdan ağa qədər radial gradientlə doldurun (Şəkil 13). Yaradılmış vektor obyektini 1-2 piksel sağa və aşağı dartın, sonra seçimi silmədən üzərinə sağ klikləyin və kontekst menyusu komanda seçin Arrange=>Göndər(Təşkil et=>Geri göndər). Nəticədə Şəkildə göstərilən düymə üçün boşluq alırıq. on dörd.
Bir qayda olaraq, hər hansı bir Web səhifəsində eyni tipli bir neçə düymə var, məsələn, yalnız onların üzərində çəkilmiş oxlar istiqamətində fərqlənir ki, bu da saytın ətrafında hərəkət istiqamətini göstərir. İki düymənin olmasının ən sadə halını nəzərdən keçirək, bunlardan biri aşağı ox ilə növbəti səhifəyə keçmək deməkdir və oxlu düymə əvvəlki birinə keçmək deməkdir. Ox üçün boşluq olaraq alətlə çəkilmiş müntəzəm üçbucağı götürək Poliqon(Çoxbucaqlı) qara ilə doldurulmuş və daha çox effekt əldə etmək üçün hörgü obyekti kimi tərtib edilmişdir. Oxu düyməyə köçürün və müvafiq palitrası düymələrindən istifadə edərək bütün obyektlərin bir-birinə nisbətən mövqeyini tənzimləyin. Hizalayın(Hazırlama). Qəbul edilmiş düymələrdən birincisi Şəkildə göstərilmişdir. 15. Komandanı seçməklə düymə ilə təbəqənin surətini çıxarın Dublikat Layer qatlar, nəticədə iki eyni təbəqə əldə edirik. Sonra təbəqənin surətində oxu seçin və kontekst menyusundan əmri seçməklə onu 180° fırladın. Transform =>Döndür Transformasiya=>Döndür. Şəkildə göstərildiyi kimi eyni düyməni alırıq. 16. Nəzərə alın ki, bir layihənin bütün eyni tipli düymələrini bir faylda müxtəlif təbəqələrdə saxlamaq daha rahatdır, bu, bu halda nümayiş etdirilir.
İndi düymələrin hər biri üçün optimallaşdırılmış variantları saxlamalısınız. Əvvəlcə alt təbəqəni görünməz edin, bu halda üst təbəqədəki düymə saxlanılacaq. Komanda seçin Fayl=>Veb üçün saxla(Fayl=>Veb üçün Saxla), düyməni optimallaşdırma parametrlərini konfiqurasiya edin, məsələn, Şəkildə göstərildiyi kimi. 17, düyməni basın Yadda saxla(Saxla) və fayl adını daxil edin. Nəticədə saxlanılan düymə Şəkildə göstərilmişdir. 18. İndi alt təbəqəni görünən hala gətirin, üst təbəqəni görünməz hala gətirin və ikinci düyməni eyni şəkildə qeyd edin, başqa bir ad verin. Nəticə Şəkildə göstərilir. on doqquz.
İndi qalan şey düymələrin Veb-səhifədə yaxşı görünməsinə əmin olmaq və onları xüsusi səhifəyə yerləşdirməkdir (Şəkil 20). Nəticədə, bu nümunədə Primer2.html faylı və şəkillər qovluğunda (qovluqda) iki qrafik təsvir əldə edilmişdir. Astar 2).
İstəyirsinizsə, optimallaşdırma prosesi zamanı düyməni asanlıqla bir dilimə çevirmək olar. Bu vəziyyətdə, əmri seçdikdən sonra Fayl=>Veb üçün saxla(Fayl => Veb üçün Saxla) və optimallaşdırma parametrləri alət palitrası alətindən seçilməlidir Dilim Seçin(Dilim seçimi) seçin və avtomatik olaraq seriya nömrəsi 1 olan dilimə çevriləcək təsvirə iki dəfə vurun (Şəkil 21). Yenidən iki dəfə klikləmək pəncərəni açacaq Dilim Seçimləri(Dilim Seçimləri), burada bir keçid təyin etməli və istəsəniz, dilimin adını dəyişdirməlisiniz (Şəkil 22), sonra optimallaşdırılmış şəkli saxlamalısınız. Bu halda nəticə Primer3.html (Şəkil 23) və Primer3.gif (Primer3 qovluğu) faylları olacaq.
İnteraktiv elementlər
Səhifəni rəngləndirməyin bir yolu, onları dəyişdirən dizayn elementlərini təqdim etməkdir görünüş(və ya vəziyyət) siçanın davranışından asılı olaraq və ya daha nadir hallarda, hər hansı digər vəziyyətlərdə: böyütmə, sürüşdürmə, yükləmə, səhvlər və s.
Bu elementlər arasında ən məşhurları siçanın təsiri altında görünüşünü dəyişən rollover (ingilis dilindən roll over to roll, roll) elementlərdir. Animasiya edilmiş düymələr tipik sürüşmə nümunələridir. Rolloverlər tez-tez saytın digər naviqasiya elementlərini yaratarkən istifadə olunur. Əslində, hər hansı bir rollover bir deyil, hər biri müəyyən bir hadisəyə uyğun gələn bir neçə (dördədək) təsvirdir. Əsas hadisələr aşağıdakılar hesab olunur: Normal normal vəziyyət, Siçan kursorunu elementin üzərinə gətirin və onun üzərinə gətirərkən siçanın sol düyməsini Aşağı basın. Nəzəri olaraq, kliklədikdən sonra sol siçan düyməsini buraxmaq, düyməni buraxdıqdan sonra Yuxarı, aktiv zonanı tərk edərkən Out kimi hadisələr iştirak edə bilər. Bununla belə, praktikada daha çox elementin yalnız ilk üç və ya hətta iki hadisə üçün dəyişdirilməsi ilə məhdudlaşır.
Klassik dönmələr
Klassik mənada yuvarlanma GIF formatında bir sıra qrafik şəkillər və onlara uyğun HTML kodudur, bunun sayəsində siçanın davranışından asılı olaraq brauzer pəncərəsində bir şəkil digərini əvəz edir.
Illustrator klassik mənada bilavasitə rolloverlər yaratmaq üçün nəzərdə tutulmayıb, lakin onlar üçün ilkin elementlərin işlənib hazırlanmasına kömək edə bilər. Bu vəziyyətdə ideya ilk hadisəyə uyğun bir şəkil ilə bir təbəqə yaratmaqdır. Sonra təbəqənin surətini çıxarın və şəkli ikinci hadisəyə uyğunlaşdırmaq üçün çevirin və s. Yaranan laylı şəkil, təbəqələri qorunan PSD faylına ixrac olunur, bunun əsasında Image Ready proqramında rollover yaradılır. Illustrator-dan istifadənin üstünlüyü, bir çox başqa hallarda olduğu kimi, onun digərlərində mövcud olmayan bir sıra maraqlı xüsusiyyətləridir. proqram vasitələri, vektor qrafikasının çevrilməsinin rahatlığı ilə birlikdə.
Siçanın davranışından asılı olaraq rəngini dəyişən bir yazı şəklində yuvarlanma yaratmağa çalışaq. Illustrator proqramını açın və dairəvi və qara düzbucaqlı ilə doldurulmuş formada forma yaradın (şək. 24), onun surətini çıxarın və ekranın boş hissəsinə qoyun. Dördbucaqlının ilk nüsxəsini mərkəzdə vurğulanan bir şəbəkə obyektinə çevirin (əmr Obyekt=>Qradient Mesh yaradın Obyekt=>Create Gradient Mesh), dörd cərgə və on sütun göstərərək (Şəkil 25). Düzbucaqlının ikinci nüsxəsini aktivləşdirin və onun üçün Şəkildə göstərilənə bənzər bir gradient doldurma təyin edin. 26. Sonda qabarıqlıq effektini simulyasiya etmək üçün qradiyent obyektini şəbəkənin üstünə qoyun, gradient obyektinin qeyri-şəffaflığını təxminən 80%-ə, qradiyent obyektinin ölçüsünü isə təxminən 1 pikselə endirin. Və sonra obyektlərin üzərində yazı çap edin. İlkin formada, Normal vəziyyətə uyğun gələn ağ rəngə sahib olsun (şək. 27), sonra yuvarlanma vəziyyəti dəyişdikdə, yazının rəngi dəyişəcək, məsələn, siçan markeri olduqda yaşıl rəngə keçəcək. siçan düyməsini sıxdıqda mavi rəngə (Aşağı vəziyyət) üzərinə sürülür.
Palitraya diqqət yetirin qatlar bu mərhələdə yalnız bir tək təbəqə var. Komandadan istifadə edərək bu təbəqənin iki nüsxəsini çıxarın Dublikat Layer(Dublicate Layer) palitrası menyusundan qatlar, palitrada üç qat olacaq (şək. 28). Sonra təbəqənin birinci nüsxəsində yazının rəngini yaşıl, ikincidə isə mavi rəngə dəyişdirin (şək. 29). Nəticədə, yuvarlanma üçün lazımi boşluq əldə ediləcəkdir.
Yaradılmış şəkli əmrdən istifadə edərək qorunan təbəqələrlə PSD formatına ixrac edin Fayl=>İxrac(Fayl=>İxrac) və RGB rəng modelinin seçilməsi (Şəkil 30). Yaradılmış PSD faylını ImageReady-də açın (Şəkil 31 və 32). Komandanı seçməklə təbəqələr əsasında çərçivələr yaradın Qatlardan Çərçivələr Hazırlayın(Create Frames from Layers) palitrası menyusundan animasiya. Animasiya pəncərəsi Şəkildəki kimi görünəcək. 33. Eyni zamanda palitrada Rolloversİlkin olaraq vahid Normal dövlət yaradılacaq.
Sonra pəncərədə animasiya palitrada ikən hovered vəziyyətinə uyğun çərçivəni seçin qatlar təbəqə avtomatik seçilir Layer 1 Surəti(Şəkil 34). Palitraya keçin Rollovers və düyməni basın Rollover vəziyyəti yaradın(Yolvermə vəziyyəti yaradın) şək. 35, dövlətin görünməsinə səbəb olacaq Dövlət üzərində palitrada Rollovers(Şəkil 36). Dövləti də eyni şəkildə yaradın Aşağı Dövlət. Dövləti aktivləşdirin Normal palitrada Rollovers və palitrada silin animasiya vəziyyətə uyğun gələndən başqa bütün çərçivələr Normal. Nəticədə, palitrada hər rollover vəziyyəti üçün animasiya yalnız bir çərçivə olacaq (şəkil 37, 38 və 39).
düyü. 38. Şəklin görünüşü, Animasiya pəncərəsi və Over State üçün Layers və Rollovers palitrası
Düyməni klikləməklə nəticəni yoxlayın Defolt Brauzerdə önizləmə(Browser Preview) alətlər panelində və brauzer pəncərəsinə keçməklə (Şəkil 40). Bundan sonra əmrdən istifadə edərək faylı qeyd edin Fayl=>Optimallaşdırılmış Saxla(Fayl=>Optimallaşdırma ilə Saxla) və seçimi göstərin HTML və Şəkillər (*.html). Nəticədə, bu nümunədə Primer4.html faylı və şəkillər qovluğunda bir sıra qrafik təsvirlər əldə edilmişdir.
düyü. 40. Rollover elementi olan brauzer pəncərəsi
SVG sürüşmələri
Getdikcə populyarlaşan SVG formatı (Ölçəkləşdirilə bilən vektor qrafikası Vektor qrafikası), XML standartı əsasında yaradılmışdır, həmçinin müxtəlif interaktiv elementləri, xüsusən də rolloverləri əldə etməyə imkan verir, yalnız praktikada bu tamamilə fərqli şəkildə həyata keçirilir. Qeyd etmək lazımdır ki, interaktiv SVG rolloverlərinin yaradılması klassiklərdən fərqli olaraq, müvafiq HTML kodu tamamilə avtomatik olaraq yaradıldıqda, JavaScript dilini bilmək və obyekt yönümlü proqramlaşdırmanın əsas prinsiplərini başa düşmək tələb olunur.
SVG obyektləri ilə işləmək üçün xüsusi palitrası nəzərdə tutulmuşdur. SVG İnteraktivliyiəmri ilə açmaq asan olan Pəncərə=>SVG İnteraktivliyi(Pəncərə=>SVG interaktivliyi) şək. 41.
İnteraktiv düymənin nümunəsindən istifadə edərək yuvarlanma yaratmağın bu variantını nəzərdən keçirək, siçan üzərinə əyildikdə etiketin rəngi qaradan maviyə dəyişəcək və siçan aktiv zonadan çıxdıqda yenidən qara rəngə çevriləcək.
Dairəvi kənarları olan düzbucaqlı bir düymə yaradın və bunun üçün uyğun bir gradient doldurma seçin, məsələn, Şəkildə göstərildiyi kimi. 42. Palitrada düymənin şəffaflığını tənzimləyin Şəffaflıq(Şəffaflıq) bu nümunədə parametrin dəyəri Qeyri-şəffaflıq(Şəffaflıq) 50%-ə təyin edilib. Düymənin surətini çıxarın, onu tünd yaşıl rənglə doldurun (şək. 43) və sonra onu komanda ilə mesh obyektinə çevirin. Obyekt=>Qradient Mesh yaradın(Obyekt=>Qradient Mesh yaradın) dörd sətir və on sütun göstərərək və siyahıda Görünüş(Bax) seçim seçərək Mərkəzə(Mərkəzə doğru) və dəyəri təyin edin vurğulamaq(Vurğulayın) 100-ə qədər. Mesh obyekt təbəqəsinin qeyri-şəffaflığını təxminən 40%-ə endirin (Şəkil 44). Mesh obyektini gradient obyektinin üstünə qoyun və düymə Şəkil 1-də göstərildiyi kimi görünəcəkdir. 45.
düyü. 44. Düymənin Kopiyasının Grid Obyektinə çevrilməsi
Düyməni nəzərdə tutulan yazı ilə tamamlayın və müvafiq palitrası düymələrindən istifadə edərək mövqeyini tənzimləyin Hizalayın(Hazırlama). Yaranan şəkil bir-birinin üzərinə qoyulmuş üç obyektdən ibarət bir təbəqədən ibarət olacaq (şək. 46). Planlaşdırılmış hadisələr mətn obyektinə istinad edəcək, ona görə də rahatlıq üçün onun adını dəyişdirin Mətn obyektə iki dəfə klikləmək və yeni ad daxil etməklə. Eynilə, təbəqənin adını dəyişdirin Layer 1 to Layer(Şəkil 47).
Hadisələrin işlənməsi JavaScript prosedurlarının istifadəsini nəzərdə tutur, ona görə də bu prosedurların təsviri olan faylı daxil etməlisiniz. O, Events.js adlanır və quraşdırıldıqda Nümunə Fayllar\Sample Art\SVG\SVG qovluğunda diskdə saxlanılır. Adobe proqram təminatıİllüstrator. Events.js faylını daxil etmək üçün əmrdən istifadə edin JavaScript Faylları SVG İnteraktivliyi(Şəkil 48). Sonra, düyməni basmalısınız əlavə et(Əlavə et) və sabit diskinizdə istədiyiniz faylı tapın. Onun adı sahədə görünəndə URL(şək. 49), düyməni sıxın Bitdi(Çıxmaq).
düyü. 48. JavaScript Faylları Komandasının seçilməsi
Bundan sonra, obyekt üçün siçan hadisələrinə reaksiyanı təyin etməlisiniz Mətn. Sahədə Mətn obyektini seçin hadisə(hadisə) palitraları SVG İnteraktivliyi hadisə seçin siçan üzərində elemColor(evt, "Mətn", "#3333FF") bu, siçan obyektin üzərində olduqda o deməkdir Mətn onun rəngi maviyə dəyişəcək (şək. 50). Siçan aktiv zonanı tərk etdikdən sonra mətn rənginin qara rəngə keçməsi üçün daha bir hadisə yaratmalısınız onmouseout sahəsində onu seçin hadisə(hadisə) palitraları SVG İnteraktivliyi. Sonra hərəkət xəttinə mətni daxil edin elemColor(evt, "Mətn", "#000000") bu, qara rəngə dönəcək (şək. 51).
düyü. 51. Mətn obyekti üçün SVG İnteraktivlik palitrasının son görünüşü
Yaradılmış çevirməni əmrlə SVG faylı kimi yadda saxlayın Fayl=>Fərqli saxla(Fayl=> Fayl növü format SVG, və sonra Şəkildə göstərildiyi kimi SVG faylını saxlamaq üçün seçimləri təyin edin. 52. Yadda saxladıqdan sonra klassik rollover vəziyyətində olduğu kimi iki deyil, yalnız bir SVG uzantılı bir fayl əldə ediləcək, bu halda Primer5.svg faylı (Primer5 qovluğu) əldə edilmişdir. Bununla belə, çevrilmənin həqiqətən işləməsi üçün JavaScript prosedurlarının təsviri ilə Events.js faylını SVG faylı olan qovluğa əlavə olaraq kopyalamalısınız. Bundan sonra, rollover performansını yoxlaya bilərsiniz, nəticə Şəkil 1-də göstərildiyi kimi görünəcəkdir. 53.
SVG animasiya
SVG formatı animasiyanı ötürmək üçün də istifadə edilə bilər. Gəlin sadə animasiya elementi yaratmağa çalışaq (bu halda bu, şirkət haqqında məlumat olacaq), siçan müvafiq qrafik obyektin üzərinə gətirildikdə ekranda görünəcək və siçan interaktiv elementdən çıxarıldıqda yox olacaq.
Şəkildə göstərildiyi kimi təxminən belə bir sıra qrafik və mətn obyektləri yaradaq. 54. Palitrada növbəti obyektin adına ardıcıl klikləməklə bütün yaradılmış obyektlərin adını rahat şəkildə dəyişdirin. qatlar və təqdim edir arzu olunan ad(Şəkil 55). Qeyd edək ki, Şəkildə vurğulanır. 56 maddə Mətn1, Mətn2, Mətn3 və Yol 1 həmişə, digərləri isə yalnız obyektin üzərinə gətirdiyiniz zaman görünəcək Mətn1.
düyü. 54. Şəklin orijinal görünüşü
Komandadan istifadə edərək JavaScript prosedurlarının təsviri ilə Events.js faylını daxil edin JavaScript Faylları(JavaScript faylları) palitradan SVG İnteraktivliyi düyməsini basaraq əlavə et(Əlavə et) sabit diskdə istədiyiniz faylı seçib düyməni sıxaraq Bitdi(Çıxmaq).
Obyekt üçün siçan hadisəsi cavabını təyin edin Mətn1. Obyekt seçin Mətn, sahədə hadisə(hadisə) palitraları SVG İnteraktivliyi hadisə seçin siçan üzərində və aşağıdakı sətirdə mətni daxil edin elemShow(evt, "Mətn4"); elemShow(evt, "Path2"). Nəticədə, siçan obyektin üzərində olduqda Mətn1 obyektlər görünəcək Mətn 4 və Yol 2. Nəzərə alın ki, hadisə baş verən zaman bir neçə hərəkət yerinə yetirilməlidirsə, onlar “;” işarəsi ilə qeyd edilməlidir. Sonra hadisə üçün eyni şeyi edin onmouseout, onun üçün mətnin daxil edilməsi, bu, obyektlərin gizlədilməsi demək olacaq (şək. 57).
Nəticəni əmrlə SVG faylı olaraq qeyd edin Fayl=>Fərqli saxla(Fayl=>Saxla kimi), fayl adını göstərərək, sahədə seçin Fayl növü SVG formatını seçin və sonra Şəkil 1-ə uyğun olaraq SVG faylını saxlamaq üçün seçimləri təyin edin. 58. Saxladıqdan sonra Primer6.svg faylı (Primer6 qovluğu) əldə ediləcək. Events.js faylını bu faylın olduğu qovluğa kopyalamağı unutmayın. Bundan sonra coz run verilmiş fayl, Şəkildə göstərilən nəticəni görəcəksiniz. 59. Demək olar ki, sizə lazım olan budur. Planlarımıza daxil olmayan yeganə şey obyektlərin ilkin görünüşü idi Mətn 4 və Yol 2 yüklənərkən. Bu çatışmazlıqdan qurtulmaq üçün bir anda hər iki obyekti seçin və onlar üçün bir hərəkət yaradın elemHide(evt, "Mətn4"); elemHide(evt, "Path2") hadisə üzrə yükləmək(Şəkil 60). Faylı yenidən yadda saxlayın və obyektlərin indi olduğundan əmin olun Mətn 4 və Yol 2 yalnız siçanı obyektin üzərinə gətirdikdə görünür Mətn1.
GIF animasiya
Hər hansı bir veb səhifəni Web animasiyası, o cümlədən animasiya gifləri olmadan təsəvvür etmək mümkün deyil. Onları yaratmağın bir yolu Adobe ImageReady proqramından istifadə etməkdir ki, bu da digər şeylərlə yanaşı, təbəqələrdən animasiya yaratmağa imkan verir. Eyni zamanda, çox qatlı təsvirin özü də daxil olmaqla müxtəlif tətbiqlərdə hazırlana bilər Adobe Illustrator.
Palitradakı elementlər əsasında animasiya yaratmaq çox asandır Simvollar(Rimələr) əmri ilə açılır Pəncərə=>Simvollar(Window=>Symbols) və ya əmrdən istifadə etməklə açıla bilən simvol kitabxanalarından birindən Pəncərə=>Simvol Kitabxanaları(Pəncərə=> Simvol Kitabxanaları).
Məsələn, hər hansı obyekt-simvolun ölçüsünü artırmağa çalışaq, obyektin artırılması prosesinin əsas mərhələləri ayrı-ayrı təbəqələrə qoyulmalıdır. Əvvəlcə simvol obyektlərini bir-birinin üstünə qoyun və sonra hər bir sonrakı obyektin ölçüsünü artırın, məsələn, Şəkil 1-də göstərildiyi kimi. 61. Nəticədə, palitrada qatlarçoxlu obyektli bir təbəqə yaradılacaq (şək. 62). Bu şəkli birbaşa PSD formatına ixrac etsəniz, bu işləməyəcək, çünki yalnız bir təbəqə var və təbii olaraq, PSD faylını ImageReady-də açdığınız zaman yalnız bir təbəqə də olacaq. Buna görə də, əvvəlcə müxtəlif təbəqələrə obyektləri yerləşdirməlisiniz. Bunu etmək olar fərqli yollarən asan yol əvvəlcə təbəqəni seçməkdir Qat 1 Layers palitrasında və əmrindən istifadə edin Layerə buraxın(qatlara buraxın). Nəticə obyektlərin hər birini öz təbəqəsinə köçürəcək, lakin onların hamısı təbəqədə yerləşəcək Qat 1. Buna görə də, daha sonra bütün iç-içə qatları əl ilə Layers palitrasının yuxarısına sürükləməli olacaqsınız ki, onlar təbəqənin üstündə olsunlar. Qat 1, sonra isə boş təbəqə Qat 1çıxarmaq asandır (Şəkil 63). Komandadan istifadə edərək şəkli PSD formatına ixrac edin Fayl=>İxrac(Fayl=>İxrac) Şəkildəki kimi parametrlərlə. 64.
Yaradılmış PSD faylını ImageReady proqramına yükləyin (şək. 65 və 66). Palitra menyusunu açın animasiyaQatlardan Çərçivələr Hazırlayın(Qatlardan çərçivələr yaradın). Nəticədə, hər biri öz qatına və palitrası pəncərəsinə uyğun gələn beş çərçivə yaradılacaq animasiyaşəkildəki kimi görünəcək. 67.
Bundan sonra, bu halda yaradılmış çərçivələrin hər birinin müddətini təyin edin, bütün kadrların müddəti 0,2 s olaraq təyin olunur. Və sonra optimallaşdırılmış animasiyanı əmrlə qeyd edin Fayl=>Optimallaşdırılmış Saxla(Fayl=>Optimallaşdırma ilə yadda saxla). Əldə edilən nəticə Şəkil 1-ə bənzəyir. 68.
Funksiyalardan istifadə etmək daha rahatdır Canlı Qarışıqlarİllüstrator proqramı. Illustrator və ImageReady-nin bu birgə istifadəsi GIF animasiyalarının yaradılması prosesini əhəmiyyətli dərəcədə sürətləndirir.
Məsələn, iki ixtiyari çoxrəngli obyekti çəkin və sonra onları müvafiq parametrlərlə qarışdırın (Şəkil 69). Şəkil bir təbəqədə yerləşdiyindən animasiya yaratmaq üçün bu fayldan birbaşa istifadə etmək mümkün deyil (şək. 70). Buna görə, əvvəlcə qarışıq obyektinin hər bir elementini ayrı bir təbəqəyə yerləşdirməli olacaqsınız. Bunu etmək üçün pəncərədə qatlar xətti vurğulayın
düyü. 70. İlkin vəziyyət Laylar pəncərəsi
Yaradılmış faylı komanda ilə PSD formatına ixrac edin Fayl=>İxrac(Fayl=>İxrac). Yaradılmış PSD faylını ImageReady-də açın (şək. 73). Nəzərə alın ki, Illustrator proqramında yaradılmış bütün təbəqələr təbəqələr pəncərəsində (şək. 74) və pəncərədə görünəcək. animasiya yalnız bir çərçivə olacaq.
Palitra menyusunu aktivləşdirin animasiya, palitranın yuxarı sağ küncündəki qara oxa klikləyərək əmri seçin Qatlardan Çərçivələr Hazırlayın(Qatlardan çərçivələr yaradın) sonunda, bu nümunədə beş çərçivə yaradılacaq və palitrası pəncərəsi animasiyaşəklə uyğun formanı alacaq. 75. Düyməni tutaraq bütün çərçivələri seçin Shift, və bu nümunədə uyğun bir çərçivə müddəti təyin edin, çərçivələrin hər biri üçün 0,2 s eyni vaxt alınır. Sonra faylı optimallaşdırma əmri ilə qeyd edin Fayl=>Optimallaşdırılmış Saxla Siyahıda (Fayl=>Optimallaşdırma ilə yadda saxla) parametri Fayl növü seçim Yalnız Şəkillər (*.gif). Animasiya Şəklə bənzəyəcək. 76.
Daha maraqlısı hərəkət deyil, qarışıq obyektlərin hamar ölçülərinin dəyişdirilməsidir. Məsələn, artıq yaradılmış qarışıq keçidindən istifadə edə bilərsiniz. Bu halda, qarışıq keçidinin hər bir elementi üçün ayrıca təbəqələr yaratdıqdan sonra düymələrdən istifadə edərək bütün obyektləri bir-birinin üstünə qoyun. Horizontal Align Center(Üfüqi mərkəzə nisbətən hizalama) və Şaquli Hizalama Mərkəzi(Şaquli mərkəzə düzülmə) palitraları Hizalayın(Şəkil 77).
Yaradılmış faylı PSD formatına ixrac edin ( Fayl=>İxrac File=>Export) və yaradılmış PSD faylı ImageReady proqramında açın (şək. 78). Qatlara əsaslanan animasiya çərçivələri yaradın ( Qatlardan Çərçivələr Hazırlayın Qatlardan çərçivələr yaradın) və onlar üçün uyğun müddəti seçin (şək. 79). Və sonra, animasiyanı daha təsirli etmək üçün, mövcud kadrları köçürün, lakin tərs qaydada ki, şəkil əvvəlcə artsın, sonra azalsın və s. dairədə (şək. 80). Sonra optimallaşdırma faylını yadda saxlayın ( Fayl=>Optimallaşdırılmış Saxla Fayl=>Optimallaşdırma ilə yadda saxlayın). Nəticədə animasiya əncirdə göstərilmişdir. 81.
düyü. 80. Kadrların təkrarlanmasından sonra Animasiya pəncərəsinin vəziyyəti
düyü. 81. Tamamlanmış animasiya
Salam! Bu gün proqramın xüsusiyyətlərini təsvir etməyə çalışacağam Adobe Illustrator, flush imkanları ilə müqayisə. Bu, sümük proqramının qlobal təhlili olmayacaq, əksinə, bu proqramda kəşf etdiyim bəzi maraqlı çiplərin təsviri olacaq. Hamısını bir yazıda yerləşdirmək üçün onları tədqiq edərkən hissə-hissə məlumat topladım. Dərhal etiraf etməliyəm ki, mən super təcrübəli illüstrator istifadəçisi deyiləm, yalnız son altı aydır ki, ondan rəsm çəkməkdə istifadə edirəm (bundan əvvəl hər şeyi flaşda çəkirdim). Çoxları illüstratorun mürəkkəb olduğundan şikayətlənir, həmişə intuitiv deyil. Müəyyən dərəcədə razıyam ki, flaşdan sonra bu proqram çətindir. Amma burada əsas olan işdən çıxmaq deyil, oxumağa davam etməkdir. Və bir neçə həftədən sonra fikir yaranır ki, mən onsuz necə bacardım!
Beləliklə, illüstrator haqqında nəyi bəyəndim və özüm üçün tapdığım şeylər flaşda deyil.
1. Ən sadə, lakin eyni zamanda zəruri olandan başlayacağam. Flaşda obyektləri bir dairədə yerləşdirməyə çalışın. Əvvəllər idi Deko Aləti, lakin silindi, görünür, lazımsız hesab edildi. Qərara gəldik ki, bunu əl ilə etmək daha əyləncəli olacaq. Illustrator bu funksiyaya malikdir: Effekt - Distort & Transform - Transform.
Hər şey sürətli və sadədir, parametrlərdə dəyərləri (obyektlər arasındakı məsafə, nüsxələrin sayı) özümüz təyin edirik.
2. Ziqzaq
Daha sadə, lakin buna baxmayaraq faydalı bir şey. Bu xırda görünəcək, amma flaşda əl ilə çəkmək lazımdır, illüstratorda bu bir neçə saniyədir.
3. Obyektlərin deformasiyası (Əzgi)
Flash-da belə bir şey yoxdur. Aşağıdakı nümunədə sadə formaları deformasiya etməyin yalnız 2 yolunu göstərdim (Effekt - Çözgü - Qövs / Balıq). Əslində onlardan 15-i var. son versiya proqramlar.
4. Künclərin avtomatik yuvarlaqlaşdırılması (Round Corners)
Əl ilə edilə bilər: qrafik obyektdə, küncdə (bütün künclərdə) seçildikdə, ağ nöqtə və dairəvi xətt işarəsi görünür. Siçanı sürükləyin, zövqünüzə uyğunlaşdırın.
Ancaq bu, yalnız bir qələm xətti ilə bir az fərqli formalara aiddir - yuvarlaqlaşdırma effektini tətbiq edin ( Effekt - Stilize - Dairəvi Künclər). Çıxışda eyni nəticəni alırıq.
5. Kobudlaşdırmaq
Effekt sadə formalara tətbiq olunur ( Effekt-Təhrif və Çevrilmə-Kobudlaşdırın). Nəticədə, aşağı poli 3D modellərə bənzəyən bir şey əldə edirik. Məncə sərin :) Və ən əsası - çox sadə.
6 Pucker & Bloat(İçəri çək və şişir)
Aşağıdakı şəkildəki bir nümunə:
7. Formanın genişləndirilməsi (Offset yolu)
Flaşda Genişləndirilmiş Doldurma (doldurma uzantısı) funksiyası var, o, illüstratordan fərqli olaraq ümumiyyətlə karandaş xətləri ilə işləmir.
8. Fırçalar (İncəsənət Fırçası, Naxış Fırçası, Dağılma Fırçası)
Nümunələr üçün aşağıdakı şəkilə baxın:
9.Textura Fırçası (Tekstura Fırçaları)
İllüstratorda yazdığım və onların necə göründüyü haqqında çoxlu faktura fırçaları da var yeni versiya flash - . Adobe Animate-də fırçaların istifadəsinin olduqca yavaş olduğu müşahidə edilmişdir. Bu belədir:(
10. Bunun hiylə olub olmadığına əmin deyiləm, amma diqqətimi gülməli adı olan bir fırçaya yönəltmək istəyirəm. damlaFırça. Alətlər panelində yerləşir, istifadə etmək üçün çox gözəl bir fırça. Onun bir çox parametrləri var, həmişəkindən daha çox xoşuma gəlir. Faydalarını sözlə izah etmək çətindir, bir dəfə cəhd etmək daha yaxşıdır.
10. Şəbəkəyə bölün
Digər faydalı xüsusiyyət Split to Grid (Object-Path-Split to Grid) funksiyasıdır.O, formanı bərabər seqmentlərə kəsməyə imkan verir. Bu bizə nəyi xatırladır? Doğrudur - hündürmərtəbəli binanın pəncərələri. Mənə gəlincə, məsələn, şəhər mənzərələri çəkmək üçün gözəl bir şey;)
Başqa biri faydalı alət, illustrator-da təqdim olunur, ehtimal ki, ilk buraxılışından bəri. Bununla, məsələn, ağac toxumaları yarada bilərsiniz:
12. Köçür (sağa - Çevir - Köçür)
Müəyyən bir məsafədə bir obyekti dəyişdirin. İstəyirsinizsə, dərhal seçilmiş obyektdən üfüqi / və ya şaquli olaraq istədiyiniz məsafədə yerləşdiriləcək bir nüsxə yarada bilərsiniz. Flaşın əvvəlki versiyasında bunu edən bir plagin var idi bu funksiya. Təəssüf ki, adını xatırlamıram.
İllüstratorda qüsursuz naxışlar yaratmaq çox rahatdır ( Obyekt-Nümunə-Yarat). Yaradılması ilə flaşda necə çılğınlıqla fərqləndiyimi xatırlayıram. CC 2015-in illüstrator versiyasında hər şey avtomatlaşdırılıb, bir dəstə parametr əlinizdə yalnız bir neçə qrafik elementlə onlarla variasiyada naxış yaratmağa kömək edəcək. Proqramın əvvəlki versiyalarında indiyə qədər flaşda olduğu kimi hər şey əl ilə edilməli idi.
(Qeyd - nümunə təhlil funksiyasından istifadə edərək vektor redaktə edilə bilən obyektə çevrilə bilər ( Obyekt-Görünüşü genişləndirin).
14. Obyekt Mozaikası (Mozaika)
Mövcud bir şəkil əsasında rəng palitrası yaradın. Bəyəndiyiniz şəkli illüstrasiyaya idxal edin (Açıq), sonra Obyekt - Obyekt Mozaikasını yaradın. Parametrlərdə hündürlüyü və eni bölmə tezliyini təyin edirik.
Və çıxışda alırıq:
15. Qarışdırmaq (qarışdırmaq)
Qradiyent yaratmaq üçün istifadə olunur. Məsələn, şəkildəki kimi addım-addım keçidlər yarada bilərsiniz. Tez-tez istifadə etdiyimi deyə bilmərəm, amma kiminsə işinə yaraya bilər. Mənə elə gəlir ki, ondan sadə fon şəkilləri yaratmaqda istifadə etmək olar.
Alət obyektləri klonlaşdırmaq üçün də istifadə edilə bilər. İki obyekti bir-birindən aralıda yerləşdiririk və Qarışıq Seçimlərini tətbiq edirik, addımların sayını (klonlanmış obyektlərin sayı) seçirik.
16. Forma Yaratma Aləti. Primitivlərlə işləmək üçün çox lazımlı bir şey. Bir flaşda, mənə göründüyü kimi, daha az rahatdır.
Alt düyməsini basıb seçilmiş seqmentlərə klikləməklə - seqmentləri silin. Siçanı sadəcə bir neçə seçilmiş sahənin üzərinə sürükləsək - bağlantılar.
Əlavə - avtomatik olaraq kəsməyə, birləşdirməyə və s. seçilmiş formalar. Mənə gəlincə, çox rahat deyil, daha tez-tez istifadə edirəm qurmaqformaalət.
(iş lövhələri)
18. Xüsusi Alət Paneli
Öz alətlər panelinizi yaratmaq, lazımsızları atmaq və yalnız istifadə etdiyinizləri seçmək imkanı.
Flaşda, iş lövhələri, yəni səhnələr ( Səhnə 1,2,3..) ayrıca yerləşir və onlar arasında keçid etmək lazımdır (Shift + F2). İllüstratorda onların hamısı gözləriniz qarşısında yerləşdirilə bilər. Eyni rəsmin bir neçə versiyasını hazırladığınız zaman rahatdır ki, bütün variantlar müqayisə üçün gözünüzün qarşısında olsun.
19. Qrafik üslublarla izometrik
Və son şey, qrafik üslublardan istifadə edərək 1 klik (daha doğrusu 3 klik, çünki 3 tərəfimiz var;) istifadə etmədən izometriyanın yaradılmasıdır ( Qrafik Üslublar). Bu necə edilir, gələn dəfə yazacam.
İllüstratorun flaşla ortaq cəhəti obyekti simvolda (simvolda) saxlamaq imkanıdır və bu simvolu da problemsiz olaraq flaşa köçürmək olar (flaşda .ai faylını açın. İdxal - Səhnəyə idxal edin).
İllüstratordakı simvol flaşdakı kimi xüsusiyyətlərə malikdir.
Və sonda illüstratorda mənim fikrimcə flaşdan aşağı olanı yazacağam. Bəli, bəli və var. Və bu doldurma vasitəsidir ( boya qabı). İllada nə qədər alışmağa çalışsam da flaşda daha rahat olur.
Əgər mənim qeydlərim sizin üçün faydalı olubsa və ya özünüz bir şey əlavə etmək istəyirsinizsə - şərhlərdə xoş gəlmisiniz! Hamıya uğurlar ;)
Son zamanlar vebsaytlarda və proqramlarda SVG (Ölçeklenebilir Vektor Qrafikası) qrafiklərinin müxtəlif növ animasiyaları çox populyarlaşıb. Bu, hər şeyin olması ilə əlaqədardır ən son brauzerlər artıq bu formatı dəstəkləyir. Burada SVG üçün brauzer dəstəyi haqqında məlumat var.
Bu məqalə yüngül çəkili Jquery plaginindən istifadə edərək SVG vektorunu canlandırmağın ən sadə nümunəsini təsvir edir Lazy Line Painter.
mənbəBu tapşırığı yerinə yetirmək və tam başa düşmək üçün HTML, CSS, Jquery-nin əsas bilikləri arzuolunandır, lakin sadəcə SVG-ni canlandırmaq istəyirsinizsə, tələb olunmur) Gəlin başlayaq!
Və buna görə də əməl etməli olduğumuz addımlar:
- Düzgün fayl strukturunu yaradın
- Plugini yükləyin və qoşun
- Adobe Illustrator-da Cool Line Art çəkin
- Şəklimizi Lazy Line Converter-ə çevirin
- Yaranan kodu main.js-ə yapışdırın
- Zövqünüzə bir az CSS əlavə edin
1. Düzgün fayl strukturunu yaradın
Initializr xidməti bu işdə bizə kömək edəcək, burada aşağıdakı şəkildəki kimi parametrləri seçmək lazımdır.
- Klassik H5BP (HTML5 Qazan Plitəsi)
- Şablon yoxdur
- Sadəcə HTML5 Shiv
- kiçildilmiş
- .IE Dərsləri
- Xrom çərçivə
- Sonra Yükləyin!
2. Plugini yükləyin və birləşdirin
Initializr ən son JQuery kitabxanası ilə gəldiyi üçün Lazy Line Painter layihə deposundan yükləməli olduğumuz arxivdən layihəmizə yalnız 2 fayl köçürülməlidir. Birincisi ‘jquery.lazylinepainter-1.1.min.js’ (plugin versiyası fərqli ola bilər) yaranan qovluğun kökündə yerləşir. İkincisi, example/js/vendor/raphael-min.js-dir.
Bu 2 fayl js qovluğuna yerləşdirilib. Biz onları main.js-dən əvvəl index.html-ə daxil edirik:
3. Adobe Illustrator proqramında gözəl kontur şəkli çəkin
- Illustrator-da kontur şəklimizi çəkin (bunun ən asan yolu Qələm Aləti ilədir)
- Rəsmimizin konturlarının bağlanmaması lazımdır, çünki təsirimiz üçün başlanğıc və son lazımdır.
- Doldurma olmamalıdır
- Maksimum fayl ölçüsü 1000×1000 piksel, 40kb-dir
- Gəlin obyektin sərhədlərinə qədər kəsək Obyekt>Artboards>Fit To Artboards Bounds
- SVG kimi saxla (standart saxlama parametrləri yaxşıdır)
Məsələn, siz qoşmadakı nişanlardan istifadə edə bilərsiniz.
4. Şəkilimizi Lazy Line Converter-ə çevirin
Sadəcə ikonanızı aşağıdakı qutuya sürükləyib buraxın.
Konturun qalınlığı, rəngi və animasiya sürəti konvertasiyadan sonra görünəcək kodun özündə dəyişdirilə bilər!
5. Nəticə kodunu main.js-ə yapışdırın
İndi sadəcə yaranan kodu boş main.js faylına yapışdırın
Seçimlər:
strokeWidth — kontur qalınlığı
strokeColor - kontur rəngi
Siz həmçinin müddət parametrinin dəyərini dəyişdirərək hər bir vektorun çəkmə sürətini dəyişə bilərsiniz (standart 600)
6. Zövqünüzə bir az CSS əlavə edin
index.html-dən paraqrafı çıxarın
salam dünya! Bu HTML5 Boilerplate-dir.
Və bunun əvəzinə animasiyamızın yerləşəcəyi bir blok daxil edirik
sonra daha gözəl görünüş üçün main.css faylına bəzi CSS əlavə edin:
Gövdə (fon:#F3B71C; ) #işarələr (mövqe: sabit; yuxarı:50%; sol:50%; kənar: -300px 0 0 -400px; )
bütün faylları saxla.
İndi sadəcə müasir brauzerdə index.html açın və effektdən həzz alın.
P.S. qaçarkən yerli maşın animasiyanın başlamasını bir neçə saniyə gecikdirmək mümkündür.
Bu gün bizdə adi hal yoxdur Adobe dərsiİllüstrator. Çünki bu dəfə statik şəkil yox, real animasiya edəcəyik. Təsəvvür edin ki, belə çıxır Adobe-dən köməkİllüstrator cizgi filmi də çəkə bilər :)
Və bunun üçün bizə heç nə lazım deyil. Qatların səlahiyyətli təşkili və yekun işin hər bir təbəqənin animasiya çərçivəsinə çevrildiyi swf formatına ixracı. Bugünkü dərslikdə biz retro film üslubunda geri sayım animasiyasını çəkəcəyik. Çıxış eyni geri sayma ilə bir flash film olmalıdır.
Ediləcək ilk şey gələcək animasiya üçün bütün lazımi elementləri çəkməkdir. Bunu etmək üçün ayrı bir sənəddə iki film çərçivəsi mövqeyini, ayrı-ayrı sektorlara kəsilmiş istinad üçün bir dairəni, antik dövrün təsirini əlavə etmək üçün bir faktura və şaquli cızıq, eləcə də bütün rəqəmlər və yazılar etdim.
Cizgi filmimizin bütün hissələri hazır olduqda, siz animasiyanın özünü yaratmağa başlaya bilərsiniz. Rahatlıq üçün bu ən yaxşı şəkildə yeni sənəddə edilir. Bu halda təbəqələr animasiya çərçivələri rolunu oynayacaq. Və ilk təbəqədə sadəcə filmin çərçivəsini kopyalamaq lazımdır. Onu iş sahəsinin ortasına yerləşdirin.
İndi ikinci bir təbəqə yaradın və film çərçivəsini ona köçürün, orada kənarlardakı deliklər sürüşmə ilə edilir. Onu da mərkəzləşdirmək lazımdır.
Bu iki təbəqədən siz artıq hərəkət edən filmin animasiyasını əldə edə bilərsiniz. Ancaq sonradan daha çox təbəqəyə ehtiyacımız olacaq. Beləliklə, ilk iki təbəqəni seçin, panel seçimlərinə keçin və təbəqələrin surətini çıxarın.
Bənzər bir şəkildə, onun hərəkətini müəyyən edən film çərçivələri ilə 12 qat toplamaq lazımdır.
İndi bizim bir dəstə təbəqəmiz var və hamısı görünür. O mənada ki, yuxarı təbəqələr aşağı olanları bloklayır, bu da iş üçün çox əlverişli deyil. Buna görə də, təbəqə adının solunda yerləşən göz işarəsinə klikləməklə bəzi təbəqələri söndürə bilərsiniz. Bütün təbəqələri birdən-birə söndürmək və ya yandırmaq üçün göz işarəsinə klikləyərkən Alt düyməsini basıb saxlayın. Qatları yandırıb-söndürərək, gələcək animasiyamızın müəyyən bir çərçivəsində nəyin yerləşdiyini dəqiq görə bilərsiniz. Və indi, filmin hərəkətinə bir az silkələnmə əlavə etmək üçün, alınan kadrları bir az fərqli istiqamətlərə köçürməliyik. Bunu etmək üçün yalnız işləyəcəyiniz təbəqəni yandırın Bu an, və sonra çərçivəni hər iki tərəfə bir neçə piksel köçürün.
Bütün təbəqələri keçdikdən və bir az sürüşmə əlavə etdikdən sonra, hərəkət edən dairənin animasiyasını yaratmağa başlaya bilərsiniz. Bunun üçün cizgi film hissələri sənədindən sektorlardan ibarət dairəni köçürün və film çərçivəsinin üstündəki birinci təbəqəyə qoyun.
Seçimi dairədən çıxarsanız, o, tək bir bütöv kimi görünəcək. Bizə məhz bu lazımdır.
Amma ayrı-ayrı sektorlardan ibarət olduğu üçün onların rəngini dəyişdirərək çox tez və asanlıqla animasiya yaratmaq mümkündür. Bunun üçün bu dairəni ikinci təbəqəyə köçürün və birinci sektoru yüngülləşdirin. Filmin hərəkət zamanı silkələndiyini xatırlayırsınız, buna görə də dairəni tam olaraq çərçivənin mərkəzinə qoymaq lazım deyil. Gözün üstünə qoyun.
Eynilə, əvvəlkindən bir sektor daha çox açıq rənglə rəngləyərkən dairəni hər növbəti təbəqəyə köçürməlisiniz. Bu 12 təbəqə birlikdə filmin doldurma dairəsi ilə hərəkətinin animasiyasını təşkil edir.
Sonra təbəqələrimizə toxuma əlavə etməliyik. Birinci təbəqəni yandırın və ehtiyat hissələri ilə mənbə faylından toxumanı kopyalayın.
Sonra növbəti təbəqələri növbə ilə yandırın və eyni toxumanı orada kopyalayın. Hər çərçivədə fərqli görünməsi üçün onu 90 dərəcə çevirin. Təxmin etdiyiniz kimi, bütün 12 çərçivəyə faktura əlavə etməliyik.
Əgər siz artıq kopyalamaqdan çox yorulmusunuzsa, o zaman sizi sevindirə bilərəm - çox az qalıb. Ən çətin hissəsi bitdi. Şaquli cızıqları və demək olar ki, hər şeyi əlavə etmək qalır. Bunu etmək üçün, yenidən orijinal cızıqları kopyalayın və bir neçə təbəqədə ixtiyari bir yerə qoyun. Mənim vəziyyətimdə cızıqlar yalnız iki təbəqədə görünür.
İndi film animasiyası ilə əsas sikl hazırdır, nömrələri əlavə etmək qalır. Biz 3-dən 1-ə qədər üstəgəl Get!!! sözünü saydığımız üçün bizə daha çox təbəqə lazımdır. 12 yox, 48-ə qədər. Bunun üçün film animasiyası ilə hazır qatların daha üç nüsxəsini çıxarmaq lazımdır.
Və sonra hər şey sadədir. Ən birinci təbəqəni yandırın və orada üç rəqəmi qoyun.
Sonra dairə animasiyası bitənə qədər bu rəqəmi növbəti təbəqələrə köçürməlisiniz. Dairənin yenidən tamamilə doldurulacağı təbəqələrin növbəti nüsxəsinə çatdıqda, iki nömrəsini qoymalısınız. Eyni şəkildə, bir nömrəni istədiyiniz təbəqələrə köçürün. Siz Go!!! etiketi üçün son qatlara çatdıqda etiketi istədiyiniz təbəqəyə köçürməzdən əvvəl sadəcə olaraq dairəni silin.
Bütün bunlar animasiya ilə bağlıdır. Burada əsas şey çaşqınlıq yaratmamaqdır. Qatlara bəzi rahat adlar verə bilərsiniz, amma mən nədənsə çox tənbəl idim :) Və bununla belə, işiniz bitdikdən sonra göz işarəsinə klikləməklə bütün təbəqələri yenidən yandırdığınızdan əmin olun.
İxrac parametrləri pəncərəsində Export As: AI Layers to SWF Frames parametrini təyin etdiyinizə əmin olun. Illustrator təbəqələrini animasiya çərçivələrinə çevirən bu seçimdir. Sonra, Ətraflı düyməsini basın.
Əlavə parametrlər açılacaq. Burada Frame Rate təyin etməlisiniz. Məndə saniyədə 12 kadr var. Döngə qutusu animasiyanın hərəkətinə cavabdehdir. Onun sayəsində video bir dairədə oynayacaq. Və Layer Order: Bottom Up seçimi illüstrator təbəqələrini paneldə aşağıdan yuxarıya doğru göstərir. Animasiyamızı məhz belə qurmuşuq.
Nəticədə animasiyamızla birlikdə flash film əldə edirik.
İndi görürsünüz ki, Adobe Illustrator-da sadə animasiya etmək ilk baxışdan göründüyü qədər çətin deyil.
Amma uzun videolar yaratmaq və ya interaktiv proqramlar istifadə etmək daha yaxşıdır Adobe Flash və ya digər flash redaktorları. Məsələn, mən bu pişiyi köhnədə düzəltdim Macromedia Flash işdə qazdığımı.
Həmçinin son zamanlarda HTML5 və CSS3 animasiya yaratmaq üçün getdikcə daha çox istifadə olunur. Bu kod müasir brauzerlər tərəfindən dəstəklənir və flash player istifadə etməyi tələb etmir.
Roman aka dacascas xüsusilə blog üçün
Yeni heç nəyi qaçırmamaq üçün bülletenimizə abunə olun:
