Illustrator'da gif animasyonu nasıl oluşturulur? Adobe Illustrator'da animasyon nasıl yapılır? SWF dosyalarını Illustrator'dan dışa aktarma

Bugün alışılmadık bir şeyimiz var Adobe dersiİllüstratör. Çünkü bu sefer statik bir resim değil, gerçek bir animasyon yapacağız. Hayal edin, ortaya çıkıyor Adobe'yi kullanmaİllüstratör karikatür de çizebilir :)

Ve bunun için hiçbir şeye ihtiyacımız yok. Katmanların uygun şekilde düzenlenmesi ve son çalışmanın, her katmanın bir animasyon çerçevesine dönüştürüldüğü swf formatına aktarılması. Bugünkü dersimizde retro film tarzında bir geri sayım animasyonu çizeceğiz. Çıktı, aynı geri sayıma sahip bir flash video olmalıdır.

Yapmanız gereken ilk şey gelecekteki animasyon için gerekli tüm unsurları çizmektir. Bunu yapmak için, ayrı bir belgede, bir film çerçevesinin iki konumunu, referans için ayrı sektörlere kesilmiş bir daireyi, bir dokuyu ve antik çağ etkisi eklemek için dikey bir çizik ile tüm sayıları ve sayıları hazırladım. yazıtlar.

Karikatürümüzün tüm parçaları hazır olduğunda animasyonun kendisini oluşturmaya başlayabiliriz. Kolaylık sağlamak için bunu yeni bir belgede yapmak daha iyidir. Bu durumda katmanlarımız animasyon kareleri rolünü oynayacaktır. Ve ilk katmanda sadece bir film karesini kopyalamanız gerekiyor. Çalışma alanınızın ortasına yerleştirin.

Şimdi ikinci bir katman oluşturun ve kenarlarındaki deliklerin bir ofsetle oluşturulduğu bir film çerçevesini buraya kopyalayın. Ayrıca merkeze yerleştirilmesi gerekiyor.

Bu iki katmandan zaten hareketli filmin animasyonunu alabilirsiniz. Ancak daha sonra çok daha fazla katmana ihtiyacımız olacak. Bu yüzden ilk iki katmanı seçin, panel seçeneklerine gidin ve katmanların bir kopyasını oluşturun.

Benzer şekilde, hareketini tanımlayan 12 katman film karesini biriktirmemiz gerekiyor.

Artık bir sürü katmanımız var ve hepsi görünür durumda. Üst katmanların alt katmanları bloke etmesi anlamında, bu da iş için pek uygun değil. Bu nedenle katman adının solunda göz bulunan simgeye tıklayarak bazı katmanları kapatabilirsiniz. Tüm katmanları aynı anda kapatmak veya açmak için göz simgesine tıklarken Alt tuşunu basılı tutun. Katmanları açıp kapatarak, gelecekteki animasyonumuzun belirli bir karesinde tam olarak neyin bulunduğunu görebilirsiniz. Ve şimdi filmin hareketine hafif bir titreşim katabilmek için ortaya çıkan kareleri biraz farklı yönlere hareket ettirmemiz gerekiyor. Bunu yapmak için yalnızca çalışacağınız katmanı açın. şu an simgesine dokunun ve ardından çerçeveyi herhangi bir yönde birkaç piksel hareket ettirin.

Tüm katmanları geçip küçük bir kaydırma ekledikten sonra hareketli dairenin animasyonunu oluşturmaya başlayabilirsiniz. Bunu yapmak için, çizgi film parçalarının bulunduğu belgeden sektörlerden oluşan daireyi kopyalayın ve film çerçevesinin üstündeki ilk katmana yerleştirin.

Çemberin seçimini kaldırırsanız tek bir bütün gibi görünecektir. Bu tam olarak ihtiyacımız olan şey.

Fakat tek tek sektörlerden oluştuğu için renklerini değiştirerek çok hızlı ve kolay bir şekilde animasyon oluşturabilirsiniz. Bunu yapmak için bu daireyi ikinci katmana kopyalayın ve ilk sektörü daha hafif hale getirin. Filmimizin hareket ettikçe sallandığını hatırlarsınız, bu nedenle daireyi tam olarak çerçevenin ortasına yerleştirmenize gerek yoktur. Göze göre konumlandırın.

Benzer şekilde, bir sektörü öncekinden daha açık bir renkle daha fazla boyarken daireyi sonraki her katmana kopyalamanız gerekir. Bu 12 katman birlikte, bir dolgu dairesi ile hareket eden filmin bir animasyonunu oluşturur.

Daha sonra katmanlarımıza doku eklememiz gerekiyor. İlk katmanı açın ve dokuyu orijinal dosyadan yedek parçalarla birlikte kopyalayın.

Daha sonra sonraki katmanları tek tek açın ve aynı dokuyu oraya kopyalayın. Her karede farklı görünmesini sağlamak için 90 derece döndürmeniz yeterlidir. Tahmin edebileceğiniz gibi 12 karenin tamamına doku eklememiz gerekiyor.

Zaten kopyalamaktan oldukça yorulduysanız, sizi memnun edebilirim - çok az şey kaldı. En zor kısım bitti. Geriye kalan tek şey dikey çizikler eklemek ve neredeyse bu kadar. Bunu yapmak için, orijinal çizikleri tekrar kopyalayıp birkaç katman halinde rastgele bir yere yerleştiriyoruz. Benim durumumda çizikler yalnızca iki katmanda görünüyor.

Artık film animasyonunun ana döngüsü hazır olduğuna göre geriye kalan tek şey sayıları eklemektir. Geri sayımımız 3'ten 1'e artı Go!!! sözcüğünden oluştuğu için, daha da fazla katmana ihtiyacımız var. 12 değil, 48'e kadar. Bunu yapmak için, film animasyonlu hazır katmanların üç kopyasını daha yapmanız gerekir.

Ve sonra her şey basit. İlk katmanı açın ve üç numarayı oraya koyun.

Daha sonra daire animasyonu bitene kadar bu şekli sonraki katmanlara kopyalamanız gerekir. Dairenin tekrar tamamen doldurulacağı katmanların bir sonraki kopyasına ulaştığınızda, iki rakamını koymanız gerekir. Aynı şekilde bir numarayı istediğiniz katmanlara kopyalayın. Go!!! yazısının son katmanlarına ulaştığınızda, yazıyı istediğiniz katmana kopyalamadan önce daireyi silmeniz yeterlidir.

Animasyon için bu kadar. Burada asıl önemli olan kafanızın karışmamasıdır. Katmanlara uygun isimler verebilirsiniz ama ben biraz tembellik ettim :) Ayrıca, işinizi bitirdiğinizde göz simgesine tıklayarak tüm katmanları tekrar açmayı unutmayın.

Dışa aktarma ayarları penceresinde Farklı Dışa Aktar: AI Katmanlarını SWF Çerçeveleri olarak ayarladığınızdan emin olun. Illustrator katmanlarını animasyon karelerine dönüştüren bu seçenektir. Daha sonra Gelişmiş düğmesine tıklayın.

Açılacak ek ayarlar. Burada Kare Hızını ayarlamanız gerekir. Saniyede 12 karem var. Döngüsel animasyondan Döngü onay kutusu sorumludur. Bu sayede video bir daire içinde oynatılacak. Katman Sırası: Aşağıdan Yukarı seçeneği, illustrator katmanlarını panelde aşağıdan yukarıya doğru yeniden üretir. Animasyonumuzu tam olarak bu şekilde oluşturduk.

Çıktı, animasyonumuzu içeren bir flash videodur.

Artık basit bir animasyonun neler yapabileceğini görüyorsunuz. Adobe İllüstratör ilk bakışta göründüğü kadar zor değil.

Ancak uzun videolar oluşturmak veya etkileşimli uygulamalar yine de kullanmak daha iyi Adobe Flash veya diğer flash editörleri. Mesela bu kediyi eski bir evde yapmıştım. Macromedia Flash, iş yerimde kazdım.

Ayrıca son zamanlarda animasyon oluşturmak için HTML5 ve CSS3 giderek daha fazla kullanılıyor. Bu kod modern tarayıcılar tarafından desteklenir ve flash oynatıcı kullanılmasını gerektirmez.

Özellikle blog için Roman yani dacascas

Yeni hiçbir şeyi kaçırmamak için bültenimize abone olun:

Son zamanlarda web sitelerinde ve uygulamalarda SVG (Ölçeklenebilir Vektör Grafikleri) grafiklerinin çeşitli animasyonları oldukça popüler hale geldi. Bunun nedeni her şeyin en yeni tarayıcılar bu formatı zaten destekliyoruz. SVG için tarayıcı desteğine ilişkin bilgileri burada bulabilirsiniz.

Bu makalede, hafif Jquery eklentisi Lazy Line Painter'ı kullanan bir SVG vektör animasyonunun en basit örneği anlatılmaktadır.

Kaynak

Bu görevi tamamlamak ve tam olarak anlamak için temel HTML, CSS, Jquery bilgisi arzu edilir, ancak yalnızca SVG'yi canlandırmak istiyorsanız gerekli değildir) Haydi başlayalım!

Ve izlememiz gereken adımlar şunlar:

Doğru dosya yapısını oluşturun

Eklentiyi indirin ve bağlayın

Adobe Illustrator'da harika bir taslak resim çizin

İmajımızı Lazy Line Converter'a dönüştürün

Ortaya çıkan kodu main.js'ye yapıştırın

Tatmak için biraz CSS ekleyin

1. Doğru dosya yapısını oluşturun
Parametreleri aşağıdaki resimdeki gibi seçmemiz gereken bu konuda İnitializr servisi bize yardımcı olacaktır.

• Klasik H5BP (HTML5 Kazan Plakası)
• Şablon Yok
• Sadece HTML5 Shiv
• Küçültülmüş
• IE Sınıfları
• Krom Çerçeve
• Ardından İndir'i tıklayın!

2. Eklentiyi indirin ve bağlayın

İnitializr en güncel Jquery kütüphanesi ile birlikte geldiğinden Lazy Line Painter proje deposundan indirmemiz gereken arşivden sadece 2 dosyayı projemize aktarmamız yeterli olacaktır. Birincisi ‘jquery.lazylinepainter-1.1.min.js’ (eklenti sürümü farklı olabilir) ortaya çıkan klasörün kökünde bulunur. İkincisi example/js/vendor/raphael-min.js'dir.

Bu 2 dosyayı js klasörüne yerleştiriyoruz. Ve bunları main.js'den önce index.html'mize şu şekilde bağlarız:

3. Adobe Illustrator'da harika bir taslak resim çizin

Anahat resmimizi Illustrator'da çizin (bunu yapmanın en kolay yolu Kalem Aracı'nı kullanmaktır)

Çizimimizin konturlarının kapanmaması gerekiyor çünkü etkimiz için bir başlangıca ve sona ihtiyacımız var.

Hiçbir dolgu olmamalıdır

Maksimum dosya boyutu – 1000×1000 piksel, 40kb

Nesnenin sınırlarına kırpma yapalım Nesne>Çalışma Yüzeyleri>Çalışma Yüzeylerine Sığdır Sınırlar

SVG formatında kaydedin (standart kaydetme ayarları uygundur)

Örneğin ekteki simgeleri kullanabilirsiniz.

4. İmajımızı Lazy Line Converter'a dönüştürün
Simgenizi aşağıdaki resimdeki pencereye sürüklemeniz yeterlidir.
Ana hatların kalınlığı, rengi ve animasyon hızı, dönüştürmeden sonra görünecek olan kodun kendisinde değiştirilebilir!

5. Ortaya çıkan kodu main.js'ye yapıştırın
Şimdi ortaya çıkan kodu boş bir main.js dosyasına yapıştırmamız yeterli.
Seçenekler:
vuruş Genişliği — anahat kalınlığı
strokeColor — anahat rengi
Süre parametresinin değerlerini değiştirerek de her vektörün çizim hızını değiştirebilirsiniz (varsayılan 600)

6. Tatmak için biraz CSS ekleyin
index.html'den paragraf kaldırma

Selam Dünya! Bu HTML5 Genel Bilgidir.

Ve onun yerine animasyonumuzun gerçekleşeceği bir blok ekliyoruz

daha sonra daha güzel görünmesi için main.css dosyasına biraz CSS ekliyoruz:

Gövde ( arka plan:#F3B71C; ) #icons ( konum: sabit; üst:%50; sol:%50; kenar boşluğu: -300px 0 0 -400px; )

tüm dosyaları kaydet.
Şimdi index.html'yi modern bir tarayıcıda açın ve efektin keyfini çıkarın.

Not: başladığında yerel makine Animasyonun başlangıcında birkaç saniyelik bir gecikme olabilir.

Web Grafiği Optimizasyonu

Grafik bilgileri metinden çok daha yavaş iletilir ve görsellerin yüklenme süresi boyutlarıyla orantılıdır grafik dosyaları. Bu nedenle, Web sayfalarının hızlı yüklenmesi, küçük boyutlu gömülü bellek gerektirir. grafik görseller, bunların optimizasyonu yoluyla elde edilir. Görüntü optimizasyonu, bu durumda gerekli görüntü kalitesini korurken minimum dosya boyutunu sağlayan dönüşüm olarak anlaşılmaktadır; bu, öncelikle grafik görüntülerdeki renk sayısını azaltarak, sıkıştırılmış ve özel dosya formatlarını kullanarak ve bireysel olarak sıkıştırma parametrelerini optimize ederek elde edilir. görüntü parçaları

Illustrator, çeşitli önizleme yöntemleriyle optimizasyon sürecini hızlı ve verimli hale getiren yerleşik görüntü optimizasyon araçlarına sahiptir. Önizleme, optimize edilmiş görüntünün gerçek zamanlı olarak nasıl görüneceğine dair oldukça doğru bir fikir verir; bu, optimizasyon sonucunu değerlendirmenize ve doğru ayarları başarıyla seçmenize yardımcı olur. Hem doğrudan Illustrator'da oluşturulan görüntüleri hem de Web sitesine yerleştirilmesi gereken fotoğraflar gibi diğer görüntüleri optimize edebilirsiniz.

Optimizasyon parametreleri, Dosya menüsünden aynı isimli komutla çağrılan Web için Kaydet penceresinde ayarlanır. Program size dört önizleme modundan birini kullanmanızı sağlar, ancak ikisi optimizasyonun kalitesini değerlendirmek için en uygun olanıdır:

• Belirtilen ayarlara uygun olarak orijinal ve optimize edilmiş görüntünün 2-Up (iki seçenek) eşzamanlı olarak görüntülenmesi (Şekil 1);
• 4-Up (dört seçenek) Bu modda, görüntü alanı orijinal görüntüyü ve optimize edilmiş görüntünün üç versiyonunu görüntülemek için dört pencereye (Şekil 2) bölünür: ilk sürüm, ayarlanan optimizasyon değerlerine göre oluşturulur ve diğer ikisi mevcut optimizasyon ayarlarının varyasyonlarıdır.

Her iki mod da, görüntüleri farklı optimizasyon ayarlarıyla kaydetme ve bunların daha sonraki görsel karşılaştırma ihtiyacını ortadan kaldırdığından, en iyi optimizasyon seçeneğini bulma konusunda önemli ölçüde zaman kazanmanıza olanak tanır. Ayrıca optimize edilen görüntünün kalitesinin yanı sıra boyutunu ve yükleme süresini de farklı bağlantı seçenekleri altında değerlendirmek mümkün. Karşılaştırma için, en uygun mod 4-Up'tır (dört seçenek); bu, sıkıştırmanın veya palet azaltmanın görüntü kalitesi ve boyutu üzerindeki etkisini görsel olarak değerlendirmenize ve sonuçta en iyi optimizasyon parametrelerini belirlemenize olanak tanır.

Illustrator, Web grafiklerini yalnızca GIF, JPG, PNG-8 ve PNG-24 formatlarında değil, aynı zamanda SWF ve SVG formatlarında da optimize etmenize olanak tanır. Az sayıda renge sahip indekslenmiş görseller GIF formatında kaydedilir. JPG formatı, tam renkli ve gri tonlamalı görüntüleri, fotoğrafları ve degrade dolgular gibi renk açısından zengin grafikleri kaydetmek için kullanılır. Şeffaf alanlara sahip tam renkli görüntüler için, hem dizine alınmış hem de tam renkli görüntüleri kaydetmenize olanak tanıyan PNG formatı kullanılırken, PNG-8 formatında optimize edilmiş görüntünün mümkün olan maksimum renk sayısı 256'dır ve PNG-24 formatındaki görüntü milyonlarca renge sahip olabilir ve bu yüzden şuna benzer: JPEG formatı. PNG-24 ile JPEG arasındaki fark, PNG-24 formatındaki görselleri optimize etmek için kullanılan sıkıştırma yönteminin kalite kaybına yol açmaması, bunun sonucunda dosya boyutunun artmasıdır. SVG ve SWF formatları grafikleri, metni ve etkileşimli bileşenleri birleştirir ve ayrıca optimize edilebilir.

Hadi düşünelim spesifik örnek görüntü optimizasyonu. Diyelim ki Illustrator'da (Şekil 3) bir web sitesi logosu geliştirildi ve başlangıçta AI formatında kaydedildi. Bunu Web için hemen optimize etme girişimi iyi bir şeye yol açmayacak, çünkü bu durumda görüntü otomatik olarak kırpılacak ve bu, deformasyonun bir sonucu olarak ortaya çıkan yazıtın gerçek konumunu hesaba katmayacaktır (Şekil 4 ve 5).

Bu nedenle File=>Export (File=>Export) komutu ile logoyu PSD formatına aktarmayı deneyelim, oluşturulan görselin boyutu 143 KB olacaktır. Ortaya çıkan PSD dosyasını açın ve Dosya=>Web için Kaydet komutunu kullanın. Görüntüde yer alan sınırlı sayıda renk dikkate alındığında, bu durumda GIF formatı en uygunudur ve bunun özel ayarlarına karar verilmesi gerekir. Ayarları deneyerek emin olabilirsiniz: en iyi kalite programın varsayılan sıkıştırma algoritması olan Seçici'yi verir. Yumuşatmaya gelince, degrade dolgunun varlığı göz önüne alındığında, gürültü üreten Gürültüye sahip bir algoritma seçmek daha iyidir (Şekil 6). Ortaya çıkan optimizasyon dosyasının boyutu 6,729 KB olacaktır (Şekil 7), arka planın şeffaflığı korunacaktır; bu, görüntüyü HTML dosyasıyla birlikte GIF formatında kaydederek doğrulanması kolaydır (Şekil 8). Sonuç olarak bu örnekte Primer1 klasöründe amblem.html ve amblem.gif dosyaları elde edildi.

Düğmeler

Herhangi bir Web sayfasının tasarımının vazgeçilmez bir özel unsuru, grafiksel kontrol düğmeleridir. Onlarsız bir sayfayı hayal etmek imkansızdır. Düğme çizimi günümüzde özel bir tür haline geldi ve Illustrator, en karmaşık seçenekleri oluşturmanıza olanak tanıyor. Örneğin, ağ nesneleri olarak ve/veya kaplama maskeleri ile tasarlanan düğmeler, normal olanlardan çok daha etkileyici görünür.

Illustrator'da yuvarlak, dışbükey bir düğme oluşturma seçeneğini düşünün. İsteğe bağlı bir renkle doldurulmuş daire şeklinde bir vektör nesnesi çizin (Şekil 9) ve bunu, dört satır ve dört satır belirterek Nesne => Degrade Kafes Oluştur (Nesne => Degrade kafes oluştur) komutuyla bir ağa dönüştürün. sütunlarını seçin ve Görünüm listesinde 60'a eşit Ortaya Vurgula seçeneğini seçin (Şek. 10). Doğrudan Seçim aracını seçin ve nesnenin sol üst köşesine tıklayarak orada bulunan bağlantı noktalarını seçin (Şek. 11). İlgili hücrenin rengini, Renk Örnekleri paletinde seçerek beyaza değiştirin (Şek. 12).

Elips aracını alın, fare işaretçisini daha önce oluşturulan dairenin ortasına yerleştirin ve Alt ve Shift tuşlarını basılı tutarak yeni daireyi eskisinden 1-2 piksel daha büyük olacak şekilde eski dairenin üzerine uzatın taraflar. 1-2 piksel genişliğinde siyah bir kenarlık (Kontur) verin ve kırmızıdan beyaza doğru radyal bir degradeyle doldurun (Şek. 13). Oluşturulan vektör nesnesini 1-2 piksel sağa ve aşağı sürükleyin, ardından seçimi kaldırmadan üzerine sağ tıklayın ve dışarı çıkın içerik menüsü Düzenle=>Arkaya Gönder'i seçin. Sonuç, Şekil 2'de gösterilen düğme için bir boşluk olacaktır. 14.

Kural olarak, herhangi bir Web sayfasında, örneğin yalnızca üzerlerine çizilen ve site etrafındaki hareket yönünü gösteren okların yönünde farklılık gösteren aynı türde birkaç düğme vardır. İki düğmeye sahip olmanın en basit durumunu ele alalım; bunlardan biri aşağı okluysa bir sonraki sayfaya geçme anlamına gelir ve yukarı oklu düğme bir önceki sayfaya geçme anlamına gelir. Ok şablonu olarak, Çokgen aracıyla çizilen, siyaha boyanmış ve daha büyük etki için kafes nesnesi olarak tasarlanmış normal bir üçgeni ele alalım. Oku düğmeye taşıyın ve Hizala paletindeki ilgili düğmeleri kullanarak tüm nesnelerin konumunu birbirine göre ayarlayın. Ortaya çıkan düğmelerden ilki Şekil 2'de gösterilmektedir. 15. Katman Katmanlarını Çoğalt komutunu seçerek butonu ile katmanın bir kopyasını oluşturalım, bunun sonucunda iki özdeş katman elde edeceğiz. Daha sonra katmanın kopyasındaki oku seçin ve içerik menüsünden Dönüştür=>Döndürme Dönüştürme=>Döndür komutunu seçerek onu 180° döndürün. Şekil 2'de gösterilen düğmenin aynısını alacağız. 16. Bir proje için aynı türdeki düğmelerin tümünü farklı katmanlardaki tek bir dosyada saklamanın çok daha uygun olduğunu lütfen unutmayın; bu, bu durumda gösterilmiştir.

Artık her düğmenin optimize edilmiş sürümlerini kaydetmeniz gerekiyor. Öncelikle alt katmanı görünmez yapın, bu durumda üst katmandaki düğme korunacaktır. Dosya=>Web için Kaydet komutunu seçin, düğme optimizasyon parametrelerini örneğin Şekil 2'de gösterildiği gibi yapılandırın. 17, Kaydet düğmesine tıklayın ve bir dosya adı girin. Nihai olarak kaydedilen düğme Şekil 2'de gösterilmektedir. 18. Şimdi görünürlüğü alt katmana döndürün, üst katmanı görünmez hale getirin ve ikinci düğmeyi aynı şekilde farklı bir ad vererek kaydedin. Sonuç Şekil 2'de gösterilmektedir. 19.

Artık geriye kalan tek şey, düğmelerin Web sayfasında oldukça kabul edilebilir göründüğünden emin olmak ve bunları özel bir sayfaya yerleştirmektir (Şekil 20). Sonuç olarak, bu örnekte Primer2.html dosyası ve görüntüler klasöründe (Primer2 klasörü) iki grafik görüntüsü elde edildi.

İstenirse optimizasyon işlemi sırasında bir düğmeyi dilime dönüştürmek kolaydır. Bu durumda File=>Web için Kaydet (File=>Web İçin Kaydet) komutunu seçip optimizasyon parametrelerini ayarladıktan sonra araç paletinden Dilim Seçimi aracını seçip görselin üzerine çift tıklamalısınız. otomatik olarak seri numarası 1 olan bir dilime dönüşür (Şek. 21). Tekrar çift tıklamak, bir bağlantı belirtmeniz ve isteğe bağlı olarak dilimin adını değiştirmeniz (Şekil 22) ve ardından optimize edilmiş görüntüyü kaydetmeniz gereken Dilim Seçenekleri penceresini açacaktır. Bu durumda sonuç Primer3.html (Şekil 23) ve Primer3.gif (Primer3 klasörü) dosyaları olacaktır.

Etkileşimli öğeler

Bir sayfayı hayata geçirmenin bir yolu, onu değiştiren tasarım öğelerini eklemektir. dış görünüş(veya durum) farenin davranışına bağlı olarak veya daha az sıklıkla başka durumlarda: ölçeklendirme, kaydırma, yükleme, hatalar vb.

Bu tür unsurlar arasında en ünlüsü, farenin etkisi altında görünümü değiştiren rollover (İngilizce roll over roll over, ters çevirme kelimesinden gelir) unsurlarıdır. Tipik rollover'lara örnek olarak animasyonlu düğmeler verilebilir. Rollover'lar genellikle diğer web sitesi gezinme öğelerini oluştururken kullanılır. Gerçekte, herhangi bir rollover bir değil, her biri belirli bir olaya karşılık gelen birkaç (en fazla dört) görüntüden oluşur. Ana olayların aşağıdakiler olduğu kabul edilir: Normal normal durum, Fare imlecini bir öğenin üzerine getirin ve imleci öğenin üzerine getirirken sol fare düğmesine Aşağı basın. Teorik olarak, tıkladıktan sonra sol fare düğmesini bırakma, düğmeyi bıraktıktan sonra yukarı, aktif bölgeden çıkarken dışarı çıkma gibi olaylar söz konusu olabilir. Ancak uygulamada bunlar genellikle yalnızca ilk üç, hatta iki olay için öğenin değiştirilmesiyle sınırlıdır.

Klasik devredenler

Klasik anlamda, rollover, GIF formatındaki bir dizi grafik görüntü ve buna karşılık gelen HTML kodudur; bu sayede, fare davranışına bağlı olarak, tarayıcı penceresinde bir görüntü diğerinin yerini alır.

Illustrator, klasik anlamda doğrudan rollover'lar oluşturmak için tasarlanmamıştır ancak bunlar için başlangıç ​​öğelerinin geliştirilmesine yardımcı olabilir. Bu durumda amaç, ilk olaya karşılık gelen görüntünün yer aldığı bir katman oluşturmaktır. Daha sonra katmanın bir kopyasını oluşturun ve görüntüyü ikinci olayla eşleşecek şekilde dönüştürün ve bu şekilde devam edin. Ortaya çıkan çok katmanlı görüntü, katmanları korunarak bir PSD dosyasına aktarılır ve buna göre Image Ready programında bir rollover oluşturulur. Diğer birçok durumda olduğu gibi Illustrator programını kullanmanın avantajı, diğer programlarda bulunmayan ilginç özelliklerinin bir kısmıdır. yazılım, vektör grafiklerini dönüştürmenin rahatlığıyla birleştirildi.

Fare davranışına bağlı olarak renk değiştiren yazı şeklinde bir rollover oluşturmaya çalışalım. Illustrator'ı açın ve siyahla doldurulmuş yuvarlak dikdörtgen şeklinde bir şekil oluşturun (Şek. 24), bunun bir kopyasını alın ve ekranın boş bir yerine yerleştirin. Dikdörtgenin ilk kopyasını, ortasında bir vurgu bulunan bir kafes nesnesine dönüştürün (Nesne=>Degrade Kafes Nesnesi Oluştur=>Degrade Kafes Oluştur komutu), dört satır ve on sütun belirterek (Şekil 25). Dikdörtgenin ikinci kopyasını etkinleştirin ve yaklaşık olarak Şekil 2'de gösterildiği gibi bir degrade dolguya ayarlayın. 26. Degrade nesnesini ağ örgüsünün üzerine yerleştirin, degrade nesnesinin opaklığını yaklaşık %80'e ve boyutunu da yaklaşık 1 piksel azaltıp sonuçta bir tümsek efektini simüle edin. Daha sonra yazıyı nesnelerin üstüne yazdırın. Orijinal biçiminde, Normal duruma karşılık gelecek beyaz bir renge sahip olmasına izin verin (Şek. 27) ve ardından rollover durumu değiştiğinde, fare işaretçisi kullanıldığında yazının rengi örneğin yeşile dönüşecektir. üzerine gelindiğinde (Üst durum) ve fare düğmesine basıldığında maviye döner (Aşağı durum).

Bu aşamada Layers paletine dikkat edin içerisinde sadece tek bir katman bulunmaktadır. Katmanlar paleti menüsünden Katmanı Çoğalt komutunu kullanarak bu katmanın iki kopyasını yapın, palette üç katman olacaktır (Şekil 28). Daha sonra katmanın ilk kopyasında yazının rengini yeşile, ikinci kopyada ise maviye değiştirin (Şek. 29). Sonuç olarak, rollover için gerekli boşluk elde edilecektir.

Oluşturulan görüntüyü, katmanları koruyarak, Dosya=>Dışa Aktar komutunu kullanarak ve RGB renk modelini seçerek PSD formatına aktarın (Şek. 30). Oluşturulan PSD dosyasını ImageReady programında açın (Şek. 31 ve 32). Animasyon paleti menüsünden Katmanlardan Kareler Oluştur komutunu seçerek katmanlara dayalı kareler oluşturun. Animasyon penceresi Şekil 2'deki gibi görünecektir. 33. Bu durumda Rollovers paletinde başlangıçta tek bir Normal durum oluşturulacaktır.

Ardından, Animasyon penceresinde, oluşturulan duruma karşılık gelen kareyi seçin; Katmanlar paletinde Katman 1 Kopya katmanı otomatik olarak seçilecektir (Şekil 34). Rollovers paletine gidin ve Rollover durumu oluştur düğmesine tıklayın (Rollover durumu oluşturun) Şek. 35, bu da Over State durumunun Rollovers paletinde görünmesine neden olacaktır (Şekil 36). Aynı şekilde bir Aşağı Durumu oluşturun. Rollovers paletinde Normal durumunu etkinleştirin ve Animasyon paletindeki Normal duruma karşılık gelmesi gereken kareler dışındaki tüm kareleri silin. Sonuç olarak, Animasyon paletinde her bir rollover durumu için yalnızca bir kare olacaktır (Şekil 37, 38 ve 39).

Pirinç. 38. Aşırı Durum durumu için görüntünün, Animasyon penceresinin ve Katmanlar ve Rollover paletlerinin görünümü

Araç çubuğundaki Varsayılan Tarayıcıda Önizleme düğmesini tıklatıp tarayıcı penceresine giderek sonucu kontrol edin (Şekil 40). Bundan sonra Dosya=>En İyileştirilmiş Kaydet komutunu kullanarak ve HTML ve Görseller (*.html) seçeneğini belirterek dosyayı kaydedin. Sonuç olarak bu örnekte Primer4.html dosyası ve resimler klasöründe bir dizi grafik resim elde edildi.

Pirinç. 40. Rollover öğeli tarayıcı penceresi

SVG devredenleri

Giderek daha popüler hale gelen SVG (Ölçeklenebilir Vektör Grafikleri) formatı Vektör grafikleri XML standardına göre oluşturulan ), aynı zamanda çeşitli etkileşimli öğeleri, özellikle de rollover'ları almanıza olanak tanır, ancak pratikte bu tamamen farklı şekilde uygulanır. İlgili HTML kodu tamamen otomatik olarak oluşturulduğunda, klasik olanlardan farklı olarak etkileşimli SVG rollover'ları oluşturmanın, JavaScript dili bilgisi ve nesne yönelimli programlamanın temel ilkelerinin anlaşılmasını gerektirdiğini belirtmekte fayda var.

SVG nesneleriyle çalışmak için, Pencere => SVG Etkileşimi (Pencere => SVG etkileşimi) (Pencere => SVG etkileşimi) şek. 41.

Etkileşimli bir düğme örneğini kullanarak bir rollover oluşturmak için bu seçeneği ele alalım; üzerindeki yazının rengi, fareyi gezdirdiğinizde siyahtan maviye değişecek ve fare aktif bölgeyi terk ettiğinde tekrar siyaha dönüşecektir.

Yuvarlatılmış kenarları olan dikdörtgen bir düğme oluşturun ve bunun için uygun bir degrade dolgusu seçin, örneğin Şekil 2'de gösterildiği gibi. 42. Şeffaflık paletinde butonun şeffaflığını ayarlayın.Bu örnekte Opaklık değeri %50 olarak ayarlanmıştır. Düğmenin bir kopyasını oluşturun, koyu yeşille doldurun (Şekil 43) ve ardından Nesne => Degrade Kafes Oluştur komutuyla dört satır ve on sütun belirterek ve Görünüm listesinde (Görünüm) onu bir kafes nesnesine dönüştürün. Ortaya seçeneğini seçip Vurgu değerini 100'e ayarlayarak. Kafes nesnesinin bulunduğu katmanın opaklığını yaklaşık %40'a düşürün (Şek. 44). Degrade olanın üstüne bir ağ nesnesi yerleştirin; düğme Şekil 2'de gösterilene benzeyecektir. 45.

Pirinç. 44. Bir düğmenin kopyasını ağ nesnesine dönüştürün

Düğmeyi istenen yazıyla tamamlayın ve Hizala paletindeki ilgili düğmeleri kullanarak konumunu ayarlayın. Ortaya çıkan görüntü, üst üste bindirilmiş üç nesneden oluşan bir katman içerecektir (Şek. 46). Zamanlanmış etkinlikler bir metin nesnesine göre olacaktır; dolayısıyla kolaylık olması açısından nesneyi çift tıklayıp yeni bir ad girerek adını Metin olarak değiştirin. Benzer şekilde katman adını Katman 1'den Katman'a değiştirin (Şek. 47).

Olay işleme, JavaScript prosedürlerinin kullanımını içerir, dolayısıyla bu prosedürleri açıklayan bir dosya eklemeniz gerekir. Buna Events.js adı verilir ve kurulum sırasında Sample Files\Sample Art\SVG\SVG klasöründeki diske kaydedilir. Adobe programlarıİllüstratör. Events.js dosyasını bağlamak için JavaScript Dosyaları SVG Etkileşim komutunu kullanın (Şek. 48). Daha sonra Ekle düğmesine tıklamanız ve istediğiniz dosyayı sabit sürücünüzde bulmanız gerekir. Adı URL alanında göründüğünde (Şekil 49), Bitti düğmesine tıklayın.

Pirinç. 48. JavaScript Dosyaları Komutunu Seçme

Daha sonra, Metin nesnesi için fare olaylarına bir yanıt tanımlamanız gerekir. SVG Etkileşim paletinin Etkinlik alanında Metin nesnesini seçin, farenin üzerine gelindiğinde olayı seçin elemColor(evt, "Text", "#3333FF") bu, fare Metin nesnesinin üzerine geldiğinde renginin şu şekilde değişeceği anlamına gelir: mavi (Şek. 50). Fare aktif alandan ayrıldıktan sonra metin renginin siyaha dönüşmesi için, başka bir onmouseout olayı oluşturmanız gerekir, bunu SVG Etkileşim paletinin Etkinlik alanında seçin. Daha sonra eylem satırına elemColor(evt, "Text", "#000000") metnini girin; bu, rengi siyaha döndürecektir (Şekil 51).

Pirinç. 51. Metin nesnesi için SVG Etkileşim paletinin son görünümü

Oluşturulan rollover'ı Dosya=>Farklı kaydet (Dosya=>Dosya türü SVG formatı) komutuyla bir SVG dosyası olarak kaydedin ve ardından SVG dosyasını kaydetme seçeneklerini Şekil 52'de gösterildiği gibi ayarlayın. Kaydettikten sonra yalnızca bir tane alacaksınız Klasik rollover'da olduğu gibi iki değil, SVG uzantılı tek dosya, bu durumda Primer5.svg dosyası (Primer5 klasörü) alındı.Ancak, rollover'ın gerçekten işe yaraması için ek olarak kopyalamanız gerekir. Events.js dosyasını JavaScript prosedürlerinin açıklamasından indirin.Bundan sonra rollover'ın işlevselliğini kontrol edebilirsiniz, sonuç Şekil 53'te gösterildiği gibi görünecektir.

SVG animasyonu

SVG formatı animasyonu iletmek için de kullanılabilir. Fareyi ilgili grafik nesnesinin üzerine getirdiğinizde ekranda görünecek ve fareyi etkileşimli öğeden kaldırdığınızda kaybolacak basit bir animasyonlu öğe (bu durumda şirket hakkında bilgi olacaktır) oluşturmaya çalışalım.

Şekil 2'de gösterildiği gibi yaklaşık olarak aşağıdaki grafik ve metin nesneleri dizisini oluşturalım. 54. Katmanlar paletinde bir sonraki nesnenin adına sırayla tıklayıp girerek oluşturulan tüm nesneleri uygun bir şekilde yeniden adlandıralım. istenen isim(Şekil 55). Lütfen Şekil 2'de vurgulananlara dikkat edin. 56 nesne Metin1, Metin2, Metin3 ve Yol1 her zaman görünür olacaktır ve diğerleri yalnızca fareyi Metin1 nesnesinin üzerine getirdiğinizde görünür olacaktır.

Pirinç. 54. Resmin orijinal görünümü

SVG Etkileşim paletindeki JavaScript Dosyaları komutunu kullanarak, Ekle düğmesini tıklatarak, sabit sürücünüzde istediğiniz dosyanın üzerine gelerek ve Bitti düğmesini tıklatarak, JavaScript prosedürlerini açıklayan Events.js dosyasını ekleyin.

Text1 nesnesi için fare olaylarına bir yanıt tanımlayın. Metin nesnesini seçin, SVG Etkileşim paletinin Etkinlik alanında fareyle üzerine gelindiğinde olayını seçin ve aşağıdaki satıra elemShow(evt, "Text4"); metnini girin. elemShow(evt, "Yol2") . Sonuç olarak fare Text1 nesnesinin üzerine getirildiğinde Text4 ve Path2 nesneleri görünür hale gelecektir. Bir olay meydana geldiğinde birden fazla eylemin gerçekleştirilmesi gerekiyorsa bunların “;” işareti kullanılarak belirtilmesi gerektiğini lütfen unutmayın. Daha sonra farenin açılması olayı için benzer bir işlem gerçekleştirin, bunun için metni girin, bu da nesnelerin gizlenmesi anlamına gelecektir (Şek. 57).

Dosya=>Farklı kaydet komutunu kullanarak sonucu bir SVG dosyası olarak kaydedin, dosya adını belirtin, Dosya türü alanında SVG formatını seçin ve ardından Şekil 1'e göre SVG dosyasını kaydetme seçeneklerini ayarlayın. 58. Kaydettikten sonra Primer6.svg dosyası alınacaktır (Primer6 klasörü). Events.js dosyasını bu dosyanın bulunduğu klasöre kopyalamayı unutmayın. Eğer bundan sonra koşarsan çünkü bu dosya, ardından Şekil 2'de gösterilen sonucu göreceksiniz. 59. Bu neredeyse ihtiyacınız olan şey. Planlarımıza dahil olmayan tek şey, Metin 4 ve Yol 2 nesnelerinin yükleme sırasında ilk kez ortaya çıkmasıydı. Bu eksikliği gidermek için her iki nesne verisini aynı anda seçin ve onlar için bir eylem oluşturun elemHide(evt, "Text4"); elemHide(evt, "Path2") onload olayında (Şekil 60). Dosyayı yeniden kaydedin ve Text4 ve Path2 nesnelerinin artık yalnızca Text1 nesnesinin üzerine geldiğinizde görünür olduğundan emin olun.

GIF animasyonu

Herhangi bir Web sayfası, animasyonlu gifler de dahil olmak üzere Web animasyonu olmadan düşünülemez. Bunları oluşturma seçeneklerinden biri, diğer şeylerin yanı sıra katmanlardan animasyon oluşturmaya da olanak tanıyan Adobe ImageReady uygulamasını kullanmaktır. Bu durumda çok katmanlı görüntünün kendisi Adobe Illustrator dahil farklı uygulamalarda hazırlanabilir.

Window=>Symbols komutuyla açılan Semboller paletindeki veya Window=>Symbol Libraries komutunu kullanarak açılabilen sembol kütüphanelerinden birindeki öğelere dayalı bir animasyon oluşturmak çok kolaydır.

Örneğin, herhangi bir sembol nesnesinin boyutunu artırmaya çalışacağız; nesneyi büyütme sürecinin temel aşamaları ayrı katmanlara ayarlanmalıdır. Öncelikle, sembol nesnelerini üst üste yerleştirin ve ardından takip eden her nesnenin boyutunu, örneğin Şekil 2'de gösterildiği gibi artırın. 61. Sonuç olarak, Katmanlar paletinde birçok nesneyi içeren bir katman oluşturulacaktır (Şek. 62). Bu görüntüyü doğrudan PSD formatına aktarırsanız hiçbir şey vermez çünkü tek katman vardır ve doğal olarak PSD dosyasını ImageReady programında açtığınızda da tek katman olacaktır. Bu nedenle öncelikle nesneleri farklı katmanlara yerleştirmelisiniz. Bu yapılabilir Farklı yollar En kolay yol, önce Katmanlar paletinde Katman 1'i seçmek ve Katmana Serbest Bırak komutunu kullanmaktır. Sonuç olarak, nesnelerin her biri kendi katmanına taşınacak, ancak hepsi Katman 1'de yuvalanacaktır. Bu nedenle, iç içe geçmiş tüm katmanları, Katman 1 katmanının üzerinde olacak şekilde Katmanlar paletinin üstüne manuel olarak sürüklemeniz ve ardından artık boş olan Katman 1 katmanını silmeniz gerekecektir (Şek. 63). Şekil 2'deki gibi ayarlarla Dosya=>Dışa Aktar komutunu kullanarak görüntüyü PSD formatına aktarın. 64.

Oluşturulan PSD dosyasını ImageReady programına yükleyin (Şek. 65 ve 66). Animasyon Katmanlardan Kareler Oluştur paleti menüsünü açın. Sonuç olarak her biri kendi katmanına karşılık gelecek beş kare oluşturulacak ve Animasyon paleti penceresi Şekil 2'deki gibi görünecektir. 67.

Bundan sonra oluşturulan karelerin her birinin süresini ayarlayın, bu durumda tüm karelerin süresi 0,2 saniyeye ayarlanır. Daha sonra Dosya=>Optimize Edilmiş Kaydet (Dosya=>Optimizasyonla kaydet) komutunu kullanarak animasyonu optimizasyonla kaydedin. Ortaya çıkan sonuç Şekil 1'e benzeyebilir. 68.

Illustrator'ın Canlı Karışımlar işlevlerini kullanmak için ImageReady'de kolayca animasyona dönüştürülebilecek boşluklar elde etmek daha da kullanışlıdır. Illustrator ve ImageReady'nin bu birleşik kullanımı, GIF animasyonları oluşturma sürecini önemli ölçüde hızlandırır.

Örneğin, iki adet rastgele çok renkli nesne çizin ve ardından bunları uygun parametrelere sahip bir karışım bağlantısıyla bağlayın (Şekil 69). Görüntü tek bir katmanda olduğundan bu dosyayı doğrudan animasyon oluşturmak için kullanmak imkansızdır (Şek. 70). Bu nedenle öncelikle karışım nesnesinin her bir öğesini ayrı bir katmana yerleştirmeniz gerekecektir. Bunu yapmak için, Katmanlar penceresinde satırı seçin, sağ üst köşesindeki siyah oka tıklayarak palet menüsünü etkinleştirin ve Katman Sırasını Serbest Bırak komutunu seçin (Şek. 71). Shift tuşunu basılı tutun, oluşturulan katmanları seçin ve bunları Katman 1 katmanının üzerine yerleştirin ve ardından Katman 1 katmanının kendisini silin, sonuç olarak onu çöp kutusuna taşıyın, katmanlar paleti Şekil 2'dekiyle aynı formu alacaktır. 72.

Pirinç. 70. Başlangıç ​​hali Katman pencereleri

Oluşturulan dosyayı Dosya=>Dışa Aktar komutunu kullanarak PSD formatına aktarın. Oluşturulan PSD dosyasını ImageReady programında açın (Şek. 73). Illustrator'da oluşturulan tüm katmanların katmanlar penceresinde görüneceğini (Şek. 74) ve Animasyon penceresinde şimdilik yalnızca bir kare olacağını lütfen unutmayın.

Paletin sağ üst köşesindeki siyah oka tıklayarak Animasyon paleti menüsünü etkinleştirin ve Katmanlardan Kareler Oluştur komutunu seçin.Sonuç olarak bu örnekte beş kare oluşturulacak ve Animasyon paleti penceresi aşağıdakileri alacaktır. Şekil 2'ye uygun olarak formüle edin. 75. Shift tuşunu basılı tutarak tüm kareleri seçin ve bu örnekte uygun kare süresini ayarlayın, her kare için aynı süre 0,2 s'dir. Daha sonra, Dosya=>En İyileştirilmiş Kaydet (Dosya=>Optimizasyonla kaydet) komutunu kullanarak, Dosya türü listesinde Yalnızca Görüntüler (*.gif) seçeneğini ayarlayarak dosyayı optimizasyonla kaydedin. Animasyon Şekil 2'ye benzeyecektir. 76.

Çok daha ilginç görünen şey, hareket değil, karışım nesnelerinin düzgün bir şekilde yeniden boyutlandırılmasıdır. Örneğin, önceden oluşturulmuş karışım geçişini kullanabilirsiniz. Bu durumda, her karışım geçiş öğesi için ayrı katmanlar oluşturduktan sonra, Hizala paletinin Yatay Hizalama Merkezi ve Dikey Hizalama Merkezi düğmelerini kullanarak tüm nesneleri birbirinin üzerine yerleştirin (Şek. 77).

Oluşturulan dosyayı PSD formatına aktarın (File=>Export File=>Export) ve oluşturulan PSD dosyasını ImageReady programında açın (Şek. 78). Katmanlara dayalı animasyon kareleri oluşturun (Katmanlardan Kareler Oluşturun Katmanlardan kareler oluşturun) ve bunlar için uygun bir süre seçin (Şek. 79). Ve sonra, animasyonu daha etkili hale getirmek için, mevcut kareleri kopyalayın, ancak ters sırada, böylece görüntü önce artar, sonra azalır ve bu şekilde bir daire içinde devam eder (Şek. 80). Daha sonra optimizasyon dosyasını kaydedin (Dosya=>Optimize Edilmiş Dosyayı Kaydet=>Optimizasyonla kaydet). Ortaya çıkan animasyon Şekil 2'de gösterilmektedir. 81.

Pirinç. 80. Çerçeveleri çoğalttıktan sonra Animasyon penceresinin durumu

Pirinç. 81. Bitmiş animasyon

Adobe Illustrator'da şeffaf bir GIF aşağıdaki gibi yapılır. Dosya > Web ve Cihazlar için Kaydet menüsüne gidin (Alt+Ctrl+Shift+S). Açılan pencerede Optimize edilmiş dosya formatı alanında öncelikle Resim boyutu sekmesine gitmelisiniz. Gerçek şu ki, varsayılan olarak sayfanın tamamı optimizasyon penceresine dahil edilir ve bu genellikle gerekli değildir. Bu nedenle, Görüntü Boyutu sekmesinde Çalışma Yüzeyine Klips onay kutusunun işaretini kaldırın ve Uygula düğmesini tıklayın.

Ardından format seçim listesinden GIF'i seçin ve Şeffaflık onay kutusunu işaretleyin.

Bundan sonra hangi renklerin şeffaf olacağını belirleyeceğiz. Görüntüde bulunan tüm renkler Renk Tablosu sekmesinde bulunur ve renkli kareler halinde görüntülenir. Pencerenin sol tarafındaki araç çubuğundan Damlalık aracını seçin.

Renkleri tanımlamanın iki yolu vardır. En kolay yol, rengi doğrudan görüntünün üzerinde damlalık kullanarak belirtmektir - bundan sonra renk, renk tablosunda koyu bir vuruşla vurgulanacaktır. Hangi rengin şeffaf olması gerektiğini tam olarak biliyorsanız, ilgili renkli kareye tıklayarak onu doğrudan renk tablosundan seçebilirsiniz. Hem birinci hem de ikinci durumda, birden fazla renk seçmeniz gerekiyorsa Shift (veya Ctrl) tuşuna basarak çalışmanız gerekir. Bir renk seçtikten sonra programa rengi şeffaf yapması talimatını vermeniz gerekir. Bunu yapmak için Seçilen renkleri Saydam olarak eşleştir simgesini tıklayın. Resimde bu düğme daire içine alınmıştır ve kırmızı rengi şeffaf olarak ayarlanmıştır. Görüntüde şeffaf bir alan görünecek ve renk tablosundaki karenin görünümü değişecek - bir kısmı beyaz bir üçgene dönüşecek. Seçilen rengi iptal etmek için, Renk Tablosunda onu seçmeniz ve ardından Seçili renkleri Şeffafla Eşle simgesine tekrar tıklamanız gerekir.

Şeffaflığı ayarlama yöntemi hakkında birkaç söz. Rusça'da Şeffaflık Taklidi Algoritmasını Belirtin açılır menüsünden sorumludur - Şeffaflığı simüle etmek için algoritma (aşağıdaki Şekil). Dört seçenek vardır: Şeffaflık Taklidi Yok, Dağılım Şeffaflığı Taklidi, Desen Şeffaflığı Taklidi ve Gürültü Şeffaflığı Taklidi. Yaygın algoritma modunda, Miktar kaydırıcısı etkinleşerek yayılma değerini değiştirmenize olanak tanır. Pratikte ne uygulanmalı? Amaca ve görüntüye bağlı olarak. Bu seçeneği kullanmıyorum ve her zaman varsayılan ayarda bırakıyorum - Şeffaflık Taklidi Yok.

Kaydet'e tıklayın - şeffaf GIF hazır. Çalışma Adobe Illustrator'ın CS4 (v.14) sürümünde gerçekleştirildi, ancak tüm eylemler ve klavye kısayolları aynı zamanda önceki CS3 (v. 13) sürümüyle de ilgilidir.

Adobe Illustrator ve After Effects
İthalat ve basit animasyon Merhaba. Bugün After Effects'te basit animasyonlara bakıyoruz.

Kaynaklar: Adobe Illustrator CC
Adobe After Effects CC'de

Illustrator'da çizim yaparak öğrenmeye başlayalım.

Hadi çizelim
1) Arka plan olarak sarı bir dikdörtgen çizin

Şekil 1 - Dikdörtgen

2) Bir Daire çizin ve onu bir degradeyle doldurun
Biraz çember üzerinde çalışalım:
- konturun alt noktasını silin, bir yay elde ederiz;
- yayın altını kapatarak düz bir çizgi çizin, yarım daire elde ederiz

Şekil 2 - 1) daire çizin; 2) eğim; 3) noktayı sil

3) Bir Dikdörtgen çizin ve bir kopyasını alın
- bir gri dikdörtgen;
- başka bir dikdörtgen koyu gridir
4) Işın sayısını 3'e ayarlayarak yıldız işaretinden bir Üçgen çizin

Şekil 3 - 1) doğru ışık; 2) karanlık düz; 3) üçgen

5) Kalemi ve basit şekilleri kullanarak bir kedi çizin

Şekil 4 - 1) kafa; 2) boyun; 3) vücut; 4) bacak; 5) kuyruk

Ve şimdi en ÖNEMLİ an
Resimleri katmanlara (canlandırılacak olan ayrı bir katmandadır) şu şekilde dağıtalım:

Şekil 5 - tüm resimler (önemli katmanları kırmızıyla işaretleyin)

İşte bu, şimdi kurtaralım.
Şimdi kaydetme ayarlarına bakalım

Şekil 6 - Kaydet

Ve şimdi bir sonraki aşama. Adobe Illustrator'ı kapatın ve After Effects'i açın.

After Effects'e aktar
Dosya - İçe Aktar - Dosya - kayıtlı Illustrator dosyamızı seçin.
Illustrator'dan katmanları içe aktarmayı seçelim; görüntüleri koyarsak birleştirilmiş katmanlara sahip bir resim elde ederiz, ancak buna ihtiyacımız yok.

Şekil 7 - Kompozisyon Olarak İçe Aktarma

İşte bu, ithal.
Şimdi elimizde ne var bir bakalım. Kompozisyonun açılması için çift tıklayın ve katmanları görelim (her şey doğru yapılırsa birkaç katman olacaktır). Bunu anlıyoruz, şekle bakın

Şekil 8 - Açık Kompozisyon

Ve şimdi bugün burada olduğumuz konu Animasyon.

After Effects'te Animasyon
Arkaya Kaydırma Aracını (kısayol - Y) kullanarak okun üst kısmındaki dönüş noktasını ayarlayın. Sadece bir noktayı alıp ihtiyaç duyulan yere taşıyoruz. Sonuç olarak bu şekilde görünecek..

Şekil 9 - Kaydırma aracı ve Katmanlar

İşte bu kadar, şimdi animasyon için katmanlara geçelim.
Arrow ve Head_cat katmanına ihtiyacımız olacak.
Okla başlayalım.
Listeyi genişletelim, bulalım ve saate tıklayalım. Böylece ilk noktayı sıfır saniyeye ayarladık. Animasyon toplamda 2 saniye sürecektir.
Yani yapmanız gereken ayarlar bunlar (toplamda 3 puan koyacağız):

Saniye	0	1	2
	+66	- 70	+66

Şöyle görünecek:

Şekil 10 - Döndürme oku

Şimdi kedinin kafasını canlandıralım.
head_cat'ı genişletelim ve Position'ı bulalım.
Burada 4 nokta olacak.
Diğerlerini etkilemeden yalnızca son koordinat değiştirilecektir.

Saniye	0.1	0.17	1.12	2.0
Konum	689.3	729.3	729.3	689.3

Şimdi resme bakalım.

Şekil 11 - Kafayı konumlandırın

Yani animasyon prensibi şu şekildeydi. Ok bir yandan diğer yana sallanır, yavru kediye yaklaştığı anda kafasını içeri çeker, bir süre bu pozisyonda kalır ve sonra yerine geri döner.

Son aşama

Üretme
Çalışmanızdan bitmiş bir ürün yaratmanız gerekiyor.
Menüye gidin - İşleme Kuyruğuna Ekle
İşleme paneli açılacak ve Çıktı Modülünde (iki tıklama) çıktı formatını seçin. *.mov'u aldım

Şekil 12 - İşleme

RENDER butonuna tıklayın ve sonucu alın (sadece yolu belirtmeyi unutmayın).
Bu kadar.