Rusya Federasyonu Eğitim ve Bilim Bakanlığı

Devlet eğitim kurumu

Yüksek mesleki eğitim

Güney Federal Üniversitesi Taganrog Eyalet Enstitüsü

Bilgisayar Destekli Tasarım Sistemleri Bölümü

AÇIKLAYICI NOT

dönem ödevi

Disiplin: Gelişmiş bilgi teknolojileri ve ortamları.

Konuyla ilgili EOR: “ Animasyon Destek Araçları 2 NS ve 3 NS ».

Tamamlanmış:

Öğretmen:

Taganrog

Ders ödevi:

Animasyon oluşturma ilkesini birkaç örnekle göstermenin gerekli olduğu "Animasyon destek araçları" konulu elektronik bir eğitim kaynağının oluşturulması. Ayrıca 2D ve 3D animasyon oluşturmak ve desteklemek için bazı teknolojilere kısa bir genel bakış yapın.

Tanıtım

Bugün "Animasyon" konusunun alaka düzeyi şüphesizdir. Neredeyse bir asır önce, herkesi memnun eden ilk karikatürler ortaya çıktı. Modern teknolojilerin ortaya çıkmasıyla birlikte animasyon, multimedya projelerinin ve sunumlarının ana unsurlarından biri haline geliyor ve internet sayfalarında giderek daha fazla yer alıyor. Ayrıca, animasyon televizyonda çok yaygın olarak kullanılmaktadır. Örneğin, birçok yayıncı CGI ekran koruyucuları kullanır. Video üretimi de bilgisayar olmadan tamamlanmaz ve giderek daha profesyonel video bilgisayar animasyon tekniklerini kullanır.

Bu makale, animasyon oluşturmanın teknolojilerini ve ilkelerini tartışmaktadır.

Animasyon

Dünya çapında profesyonel tanım "animasyon" (Latince "anima" - ruh, "animasyon" - canlanma, animasyondan çevrilmiştir), animasyon sinemasının tüm modern teknik ve sanatsal olanaklarını olabildiğince doğru bir şekilde yansıtır, çünkü animasyon ustaları sadece karakterlerini canlandırmakla kalmaz, aynı zamanda bir parça ruhlarını yarattıklarına...

Animasyon teknolojileri.

Şu anda, animasyon oluşturmak için çeşitli teknolojiler var:

Klasik (geleneksel) animasyon, her biri ayrı ayrı çizilen resimlerin sıralı bir şekilde değiştirilmesidir. Animatörlerin her kareyi ayrı ayrı oluşturması gerektiğinden, bu çok zaman alan bir işlemdir.

Durdurma çerçevesi (kukla) animasyon. Uzaya yerleştirilen nesneler çerçeve tarafından sabitlenir, ardından konumları değiştirilir ve tekrar sabitlenir.

Sprite animasyon bir programlama dili kullanılarak gerçekleştirilir.

dönüşme - belirli sayıda ara çerçeve üreterek bir nesnenin diğerine dönüştürülmesi.

Renk animasyonu - nesnenin konumunu değil, yalnızca rengini değiştirir.

3D animasyon özel programlar kullanılarak oluşturulur (örneğin, 3D MAX). Resimler bir sahne oluşturularak elde edilir ve her sahne bir dizi nesne, ışık kaynağı, dokudur.

Hareket yakalama (Hareket Yakalama), doğal, gerçekçi hareketleri gerçek zamanlı olarak aktarmayı mümkün kılan ilk animasyon yönüdür. Sensörler, hareketin girilmesi ve sayısallaştırılması için bilgisayar modelinin kontrol noktaları ile hizalanacak olan yerlerde canlı aktöre bağlanır. Oyuncunun koordinatları ve uzaydaki yönelimi grafik istasyonuna iletilir ve animasyon modelleri canlanır.

Animasyon yazılımı.

Animasyon yazılımı hem acemi hem de deneyimli kullanıcı için kullanım kolaylığı sağlar. Bu tür programlar, animatör için çok kullanışlı ve kullanımı kolay olan çeşitli teknik özelliklere sahiptir. Kullanıcı istediği zaman çevrimiçi yardım alabilir. Bu tür yazılımlar iki kategoriye ayrılır: iki boyutlu (2B) ve üç boyutlu (3B) animasyon. Bugün piyasada animasyon oluşturmak için çok sayıda ve çeşitli program var. Birçoğu yaygın olarak bulunur ve kullanıcının programı ücretsiz olarak kullanabileceği bir deneme moduna sahiptir. Bu sürenin sona ermesinden sonra, kullanıcı programdan memnun kalırsa, daha fazla kullanım için tam sürümü satın alabilir.

2D animasyon yazılımının özellikleri (2 NS ):

Bu programların çoğu kullanıcı dostudur ve birçok işlev sunar. Örneğin, özelleştirilebilir ızgara ve otomatik doldurma gibi kullanışlı özellikler. Otomatik video ve ses senkronizasyonu zaman kazandırır.

Tüm varlıklarınızı ve oluşturulan animasyonları düzenlemek, depolamak ve yeniden kullanmak için tasarlanmış bir şablon kitaplığı, her tür medya dosyasını içerebilir: filmler, fotoğraf koleksiyonları, SWF, AI, PDF, JPEG, PSD, TGA ve GIF gibi biçimlerdeki sanat eserleri.

Özel yazılım öğeleri, animasyon oluşturma sürecini bir, iki, üç kadar kolay hale getirir. Yazılım araçları, kullanıcının hareket, ölçekleme, döndürme ve bozulma efektleri oluşturmasına olanak tanır. Zaman çizelgesine otomatik olarak bir ana kare eklemek için bir işlev vardır.

Sürükle bırak ve konum tasarım araçlarını kullanarak bir konum oluşturma işlemi saniyeler alacaktır. Gölge oluşturma özelliği animasyona gerçekçilik katacaktır. Program sayesinde, fikir ne kadar karmaşık olursa olsun, bir animasyon oluşturma süreci kolay bir iş haline geliyor.

Web, PDA, iPod, cep telefonları, SWF, AVI, QuickTime, DV akışları ve daha fazlasını içeren HDTV için yüksek kaliteli animasyonlar oluşturun veya derleyin.

2D animasyon yazılımının çalışması için:

Mac işletim sistemleri için - Power Macintosh G5, G4 (minimum) veya Intel (r) CoreTM, Mac OS X v10.4.7 işlemci, 512 MB RAM (rastgele erişimli bellek) (veya daha fazla), 120 MB kullanılabilir sabit disk alanı, 24 64 MB (önerilen) veya 8 MB (minimum) video belleğine sahip, 1024x768 piksele kadar çözünürlük kapasitesine sahip bit renkli monitör.

PC sistemleri için - Windows Microsoft XP veya 2000 ile 800 MHz Intel Pentium III işlemci (minimum), (önerilir) 512 MB RAM, 256 MB (veya daha fazla), 120 MB boş sabit disk alanı, 24 bit renkli monitör, 32 video belleği MB veya daha fazla, 1024x768 piksel çözünürlüğe sahip.

Üç boyutlu animasyon (3D) oluşturmak için yazılımın özellikleri:

3B modülasyon araçları, TrueType yazı tipi desteği, dosya formatlarını içe aktarma ve değiştirme, 3DS dosyalarını dışa aktarma, yerleşik 3B tarayıcı, bileşik karakter düzenleyici, nesneleri değiştirme, yüksek kalite için oluşturucu, yüksek kaliteli görüntüler oluşturma, 3B sahneler ve animasyonlar oluşturma, kenarlıkları destekleme, çarpma dönüşümleri, yumuşak gölgeler oluşturma, spot ışıkları, sis efekti ve çok daha fazlası, BMP.GIF ve .JPG dosya biçimleri, komut dosyası dili vb. için destek.

Gerekli sistem gereksinimleri 3D animasyon yazılımının çalışması için:

Windows NT 4, Win 95, Win 98, Win ME, Win 2 K veya Win XP, tam ICD destekli OpenGL hızlandırılmış grafik kartı, (ala GeForce), en az 64 MB RAM, 128 MB (önerilir) veya 256 MB , Win XP, 300 MHz Pentium, 5 MB disk alanı kullanıyorsanız.

Daha popüler animasyon oluşturma yazılımlarından bazıları:

Ulead Animation, Ulead GIF Animator 5, CoffeeCup Animasyon Yazılımı, CoffeeCup GIF Animator, CoffeeCup Firestarter, Firestarter, Reallusion Animasyon Yazılımı, Effect3D Studio, 3D Max, Toonboom Studio, Macromedia Flash.

GIF animasyonları bu formatın bir dosyada birkaç görüntüyü saklama yeteneği kullanılır - animasyonlu gifler, animasyon efektinin elde edilmesinden dolayı birbirini hızla değiştiren bir dizi karedir. Çerçeveler, örneğin bağımsız görüntüler veya bir görüntünün ayrı katmanları, herhangi bir grafik paketinde - Adobe Photoshop, Jasc Paint Shop Pro, vb. Oluşturulabilir. Ancak bunları yalnızca tüm orijinal görüntüleri değil, aynı zamanda ayrıca ekrana çıktılarının hızı, uygulanan palet, ses vb. (ve yüksek oranda sıkıştırılmış bir biçimde) hakkında bilgiler özel programlar yardımıyla gerçekleştirilir. Günümüzde Animasyon GIF formatının Web tasarımında yaygın olarak kullanılması sayesinde bu tür programların sayısı oldukça fazladır.

gif - animasyonlar oluşturmak için programların sınıflandırılması.

Genel olarak, animasyonlu gifler oluşturmaya yönelik tüm programlar üç gruba ayrılabilir:

1. İlk olarak öncelikle iki boyutlu raster grafiklerle çalışmaya odaklanan ve aynı zamanda tamamlayıcı yardımcı programları aracılığıyla Animasyon GIF formatında dosyalar oluşturmanıza izin veren popüler iki boyutlu grafik paketlerini içerir. Bunların en popülerleri, ImageReady programıyla Adobe Photoshop, Animation Shop ile birlikte gelen Jasc Paint Shop Pro ve GIF Animator ile Ulead PhotoImpact'tir. Bu grubun uygulamalarının ana avantajı, animasyon programının karşılık gelen grafik paketiyle yakından ilişkili olması ve bu nedenle, gerekirse görüntüyü düzeltmek için animasyon programı ve grafik düzenleyici arasında hızlı bir şekilde geçiş yapmak mümkün olmasıdır. Bu, yalnızca bu tür paketlerle çalışmanın tüm inceliklerini anlıyorsanız uygundur (hepsi, özellikle Adobe Photoshop, ciddi hazırlık gerektirir). Bu nedenle, bu seçenek profesyoneller için daha uygundur ve yeni başlayanlar için ikinci grubun programlarından birini seçmek daha iyidir.

2. Saniyede grup, yalnızca hareketli gifler oluşturmak için tasarlanmış paketler içerir. Kural olarak, sınırlı çizim yetenekleri vardır, bu nedenle animasyon için kaynak görüntüler herhangi bir grafik paketinde oluşturulur - bu gif animatörleri belirli bir grafik uygulamasına bağlı değildir. Adobe Photoshop, Jasc Paint Shop Pro ve Ulead PhotoImpact gibi iş için karmaşık paketler seçmek hiç de gerekli değildir. Tanıdık bir grafik paketi kullanma yeteneği, bu gruptaki gif animatörlerinin ana avantajı olarak kabul edilebilir. Ek olarak, animasyonlu giflerin geliştirilmesi için bağımsız programların küçük boyutlu dağıtımları vardır, bu nedenle İnternet üzerinden sorunsuz bir şekilde satın alınabilirler. Son olarak, bu gruptaki uygulamaların çoğu çok basittir, bu nedenle hızlı bir şekilde yönetilebilirler.

3. Üçüncü grup, 3D grafikler oluşturmaya (örneğin, 3D Studio Max) odaklanan ve aynı zamanda Animasyon GIF formatında animasyon oluşturmaya (genellikle teslimata dahil olan özel bir eklenti kullanarak) odaklanan programlardan oluşur. Grafik 3D programları, kare kare oluşturma gerektirmedikleri için uygundur - genellikle, bir gif dosyası oluşturmak için, bir nesneyi bir tür döngüsel eylem ayarlamak, örneğin bir eksen etrafında döndürmek, kaydetmek yeterlidir. ortaya çıkan animasyonu bir dizi kare olarak ve animasyonlu bir gif'e aktarın. Bununla birlikte, bir "ama" vardır - üç boyutlu grafiklerle çalışmak için geleneksel programlar, derin profesyonel bilgi gerektirir ve kullanımı zordur. Ama umutsuzluğa kapılmayın! Örneğin, animasyonlu üç boyutlu bir logo oluşturmanız gerekiyorsa, programla başa çıkmak oldukça mümkündür. Xara3D , üç boyutlu grafiklerle çalışmak için konumlandırılmış olmasına rağmen, hareketli gifler oluşturabilen ve kullanımı çok kolay.

Yalnızca animasyonlu gifler oluşturmaya odaklanan yazılım ürünleri grubunun, Xara3D programını kullanırken olduğu kadar etkili olmayacak olsalar da, üç boyutlu animasyonlu düğmeler ve logolar oluşturmak için de kullanılabilecek paketler içerdiğini ekliyoruz.

Animasyon oluşturmanın bazı teknolojilerini ve ilkelerini ele alalım.

ulead GIF Animatör

Ulead GIF Animator, Ulead PhotoImpact grafik paketine dahildir, ancak bağımsız olarak da kullanılabilir - herhangi bir grafik paketinde oluşturulan görüntülere dayalı animasyonlu gifler oluşturmak için. Kullanışlı ve sezgisel arayüzü ve zengin özellikleri sayesinde, bu program bugün en kullanışlı ve işlevsel gif-animatörlerinden biri olarak kabul edilir ve harici editörlerde (PhotoImpact, Photoshop veya Paint Shop) yapılan değişiklikleri tanıyabildiği için bir web tasarımcısının zamanını önemli ölçüde azaltır. Pro) ve animasyondaki ilgili kareleri otomatik olarak güncelleyin. Animasyonlu çizim, katmanlamanın korunmasıyla PhotoImpact (UFO) veya Photoshop (PSD) formatına aktarılabilir. Ayrıca, PhotoImpact, Photoshop veya Paint Shop Pro grafik düzenleyicisinde oluşturulan bir resmin herhangi bir katmanını GIF Animator için ayrı bir nesne olarak seçebilirsiniz.

Program, kompozisyon, düzenleme, özel efektler uygulama, optimizasyon ve dışa aktarma için zengin bir araç seti sağlar. Tam renkli nesne yönelimli bir modele dayalı katmanlı çizimlerin dinamik animasyonu, bir çizimdeki birden çok nesneyi değiştirmeyi ve hızlı bir şekilde çok nesneli animasyonlar oluşturmayı kolaylaştırır ve harici düzenleyicilerde oluşturulan görüntülerin dinamik olarak güncellenmesi, entegrasyon için yeni bir standart belirler. Animasyon Sihirbazı, görüntüleri çalışma alanına yerleştirmeyi kolaylaştırır ve oluşturulan animasyonun kalitesini, önizleme penceresindeki demo görüntüsüne göre anında değerlendirmeyi mümkün kılar. Nesne Yöneticisi, çiziminizdeki tüm nesneleri izlemenize yardımcı olur ve ara doldurma işlevleri, seçilen nesneler için ara konumlar oluşturarak animasyon sürecini otomatikleştirir.

Ulead GIF Animator, metin animasyonu ve 130'dan fazla animasyon efekti içerir. Programda uygulanan gelişmiş görüntü sıkıştırma yöntemleri, animasyon dosyalarının boyutunda önemli bir azalma elde edilmesini sağlar, HTML kodunun otomatik oluşturulması, hazır animasyonları bir web sayfasına ekleme sürecini önemli ölçüde hızlandırır ve çeşitli formatlara dışa aktarma desteği sağlar. Flash, AVI, MPEG ve QuickTime gibi formatlar, programı daha da çekici kılıyor.

ImageReady CS

ImageReady CS, Adobe'nin popüler Photoshop CS paketinin bir parçasıdır ve Photoshop ile tam uyumluluğu hesaba katarak onu profesyoneller için tasarlanmış mükemmel bir web tasarımı aracı yapan animasyonlu gifler de dahil olmak üzere çeşitli Web öğeleri geliştirmek üzere tasarlanmıştır. Photoshop ve ImageReady birlikte çalışır ve birbirlerini güzel bir şekilde tamamlar ve düzenlenen dosya, otomatik kaydetme ile düzenleme sırasında programlar arasında kolayca taşınabilir. Oluşturulan animasyonlu gif dosyalarını Macromedia Flash (SWF) formatına aktarmak mümkündür.

Animasyonlu gif'ler, hem Adobe Photoshop ve Adobe Illustrator'ın katmanlı dosyaları temelinde hem de çeşitli grafik formatlarında kaydedilen tek tek görüntülerden oluşturulabilir. Çerçeveleri düzenlemek için bir dizi görüntüye dayalı bir animasyon oluştururken, her görüntüyü ayrı olarak yüklemeniz gerekmez - gelecekteki animasyonun ayrı karelerinin önceden kaydedildiği bir klasörden içe aktarma özelliğini kullanabilirsiniz. Her kareyi manuel olarak oluşturmaya gerek olmadığından, düzgün animasyonların alınmasını önemli ölçüde hızlandıran gerekli sayıda ara kareyi otomatik olarak oluşturmak mümkündür. Program penceresinde sonucu hemen görüntüleyebilir ve gerekirse gerekli değişiklikleri yapabilirsiniz.

pilav. bir

ImageReady, ünlü Photoshop filtrelerinin çoğuna benzer geniş bir filtre galerisine sahiptir. Bu nedenle, bir çerçeveye efekt eklemek için her zaman Photoshop'a geçmeniz gerekmez - ImageReady ortamında birçok eylem de mevcuttur.

Photoshop'tan ImageReady'ye geçmek ve geri dönmek için dikey araç çubuğunun son satırına sol tıklayın - Hazır Görüntüye Düzenleyin(Image Ready'de Aç) veya aynı anda tuş kombinasyonunu basılı tutun Üst Karakter + Ctrl + M :

Animasyon paneli komutu ile çağrılabilir. Pencere> Animasyon(Pencere> Animasyon).

GIF animasyonu, kullanıcı tanımlı bir sırayla bir dizi görüntü karesini oynatır. Bir Web sayfası için çeşitli animasyon efektleri oluşturabilirsiniz: metin veya grafikleri hareket ettirin, karartın veya görünün veya başka bir şekilde değiştirin.

ImageReady'de bir animasyon hazırlamak için Şekil 1'de gösterilen Animasyon paletini kullanarak bir görüntünün birden çok karesini oluşturmanız gerekir. 3. Ardından, Katmanlar paletini (Katmanlar) şek. 4, her çerçevenin Katmanlar paletinde kendi benzersiz ayar kümesine sahip olması. Son olarak, kare dizisini tek bir GIF dosyası olarak kaydetmeniz gerekir - animasyon artık etkileşimli görüntüleme için hazırdır.

pilav. 3

pilav. 4

Katman efektleri

ImageReady, Photoshop ile aynı katman efektlerini sunar. Ancak Photoshop, Katman Stili iletişim kutusunu kullanarak katman özelliklerini ve bağlamsal katman seçenekleri paletini kullanarak ImageReady'yi ayarlar.

ImageReady'deki efektler, Photoshop'takiyle aynı özelliklere sahiptir: adları, uygulandıkları katmanın adının altında görüntülenir; efektler katmanla birlikte hareket eder; paletin öğeleri, yardımıyla efekt listesini açıp kapatabileceğiniz sağa bakan oklara sahiptir. Her efektin, o efekti göstermek veya gizlemek için kendi simgesi vardır.

Bir görüntü için bir animasyon efektinin oluşturulması.

1. Bir arka plan katmanı ve bir nesnenin resmini içeren şeffaf bir katman içeren bir görüntü açın veya oluşturun.

2. Paleti aç Animasyon(Animasyon).

3. Katmanlar paletinde (Katmanlar) bir katman seçin.

4. bir araçla Hareket(Taşı) Resim öğesini ana pencerenin kenarına sürükleyin.

5. Paletin alt kısmında Animasyon düğmeye tıklayın Geçerli kareyi çoğalt(Geçerli kareyi çoğaltın). Kopyalanan çerçeve vurgulanacaktır.

6. 3. adımda seçilen katman seçili kalmalıdır.

7. bir araçla Hareket(V tuşu) Katman öğesini ana pencerenin diğer tarafına sürükleyin. Bu katmanı seçili bırakın!

8. palet üzerinde Animasyon düğmeye tıklayın Ara(Ara çerçeveler) seçili olanlar arasında ara çerçeveler oluşturmak için.

9. iletişim kutusunda Ara(Çerçeveler arası) Katmanlar anahtarını aşağıdaki konumlardan birine ayarlayın:

· Tüm katmanlar(Tüm Katmanlar) tüm katmanlardaki noktaları yeni çerçevelere kopyalamak için.

· Seçili Katman(Seçili Katman) yalnızca seçili katmanın noktalarını yeni karelere kopyalamak için. Diğer tüm katmanlar gizlenecektir.

Daha sonra grupta ayarlayın parametreler(Parametreler) ara çerçevelerde değişecek olan parametrelerin onay kutuları: Konum(Konum), opaklık(Opaklık) ve/veya Etkileri(Etkileri).

Açılır menüden ile ara(Orta çerçeve aralığı) seçim modu Önceki Çerçeve(Seçilen çerçeve ile önceki çerçeve arasına ara çerçeveler ekleme).

Animasyon oynatma seçeneklerini belirleme

Paletin sol alt köşesinde bulunan açılır menüden Animasyon(Animasyon), animasyonun nasıl oynatılacağını belirten bir oynatma modu seçin: Bir kere(Bir kez) veya Sonsuza dek(Sürekli bir döngüde). Veya seçeneği etkinleştirin Diğer(Aksi takdirde) animasyonun kaç kez oynatılacağını belirtmek için ve ardından Tamam düğmesini tıklayın.

Animasyon önizlemesi

1. Ana pencerede sekmeyi seçin orijinal(Orijinal Resim) veya Optimize edilmiş(Optimize edilmiş görüntü).

2. İlk kare seçili değilse paletin en altında Animasyon(Animasyon) düğmesine tıklayın İlk kareyi seç(İlk kareyi seçin).

pilav. 5. Yinelenen animasyon karesi

3. düğmesine tıklayın Oyna(Oynat) - Şekil 5'e bakın. Animasyon olması gerekenden biraz daha yavaş oynayacak. (Önizleme, ImageReady'de tarayıcıdan daha yavaştır.)

4. düğmesine tıklayın Durmak Oynatmayı duraklatmak için kareye benzeyen (Durdur).

5. Dosyayı kaydedin, ardından düğmesine tıklayın Varsayılan Tarayıcı(Varsayılan tarayıcıda önizleme) araç çubuğunda bulunur. düğmesine tıklayın Geri(Geri) Görüntüleme bittiğinde ImageReady'ye dönmek için.

kıpır kıpır animasyon

Bir katman öğesinin bir yandan diğer yana nasıl kıpırdatılacağı aşağıda açıklanmıştır. Bu tür animasyon, katmanın noktalarını etkiler ve mevcut tüm karelere kopyalanır. Hareketin her aşaması için bir kopya katman oluşturmak gerekir.

Nesnenin belirli bir yönde ve geri hareket edeceği bir animasyon oluşturalım.

1. Resmi ve paleti açın Animasyon(Animasyon).

2. Paletin alt kısmında Animasyon düğmeye tıklayın Geçerli kareyi çoğalt(Geçerli kareyi çoğaltın). Yinelenen çerçeve şimdi seçilecektir.

3. palet üzerinde Animasyon Ara düğmesine tıklayın ve ardından radyo düğmesini kontrol edin Katmanlar(Katmanlar) konumlandırmak için Tüm katmanlar(Tüm katman), kutuya çerçeve sayısını girin Eklenecek Çerçeveler(Çerçeve ekle) animasyon oluşturmak için butona tıklayın TAMAM.

4. Kıpırdamanın başlaması gereken çerçeveye tıklayın.

5. palet üzerinde Katmanlar(Katmanlar) görüntüsü hareket edecek olan katmanın bir kopyasını oluşturun.

6. Yinelenen katmanı düzenleyin (örneğin, rengi ayarlayın). Değişikliklerinizi görmek için orijinal katmanı gizleyin. Değişiklikler, palet üzerinde seçilen çerçeveye yansıtılacaktır. Animasyon.

7. Sonraki kareyi seçin. Orijinal alıcı katmanını görünür yapın ve düzenlenen kopyayı gizleyin.

8. Sonraki kareye tıklayın. Şimdi düzenlenen yinelenen katmanı gösterin ve orijinal katmanı gizleyin.

Bu nedenle, animasyonun kalan kareleri için dönüşümlü olarak katmanları gösterin / gizleyin.

GIF animasyonunu açma

GIF kullanmanın tek görünür faydası, dosya optimizasyon ayarlarını uygulama veya düzenleme yeteneğidir.

1. Komutu yürütün Dosya> Aç(Dosya> Aç) veya tuş kombinasyonuna basın Ctrl + O.

2. .gif uzantılı dosyanın adını bulun ve üzerine tıklayın.

3. düğmesine tıklayın Açık(Açık). Animasyon dizisinin kareleri korunacaktır. Ancak, Katmanlar paleti artık bir dizi katman görüntüleyecektir: her kare için bir katman. Katmanın tek tek öğeleri artık diğer çerçevelerden bağımsız olarak düzenlenemez!

Animasyon optimizasyonu

1. Palet menüsünde optimize et(Optimizasyon) komutunu kullanın Animasyonu Optimize Edin(Animasyonu optimize edin).

2. Parametre grubunda Optimize Etme Ölçütü(İle optimize et) kutuyu işaretleyin Sınırlayıcı kutu(Sınırlayıcı kutu) orijinal kareyi ve yalnızca siz bir kareden diğerine geçerken değişen alanları korumak için. Sonuç olarak, dosya boyutu azalacak, ancak aynı zamanda GIF formatını kabul eden tüm düzenleme programları bu dosyayla çalışamayacak.

Bu eylemlere ek olarak veya bunların yerine kutuyu işaretleyin. Fazla Piksel Kaldırma(Gereksiz noktaları kaldırın) nesnenin veya arka planın değişmeyen noktalarını kaldırmak için, yani her yeni kare yüklendiğinde yeniden görüntülenirler. Ayrıca dosya boyutunu küçültmeye yardımcı olacaktır.

Bu seçeneklerin hiçbiri animasyonun gerçek görünümünü değiştirmeyecektir, tüm değişiklikler sahne arkasında yapılır.

Animasyon kaydediliyor.

Oluşturulan animasyon GIF formatında veya QuickTime filmi olarak kaydedilebilir. JPEG veya PNG gibi diğer dosya biçimleri görüntünün yalnızca ilk karesini kaydederek tüm animasyonun oynatılmasını engeller. Bir Web sayfasında kullanılmak üzere optimize edilmiş animasyonları kaydetmenin birkaç yolu vardır. ImageReady'de sadece komutu seçin Dosya> Optimize Edilmiş Kaydet(Dosya> Optimize Edilmiş Kaydet) animasyonu en son kaydettiğinizde seçilen ayarlarla kaydetmek için. Bu ilk kaydetme değilse, iletişim kutusu Kayıt etmek(Kaydet) görünmez ve dosya adı ve parametreler daha önce atananlarla aynı kalır.

Takım seçimi Dosya> Optimize Edilmiş Farklı Kaydet(Dosya> Optimize Edilmiş Olarak Kaydet) dosya adını değiştirmenize ve farklı bir depolama konumu seçmenize olanak tanır. Ek olarak, değiştirilmiş bir parametre seçmek mümkündür Türü Olarak Kaydet(Dosya Türü) kullanılabilir değerler kümesinden:

· HTML ve Görseller(HTML ve Resimler) - bir HTML dosyası oluşturur ve her resmi ayrı bir dosya olarak kaydeder;

· Yalnızca Görüntüler(Yalnızca resimler) - yalnızca resmi ayrı bir dosyaya kaydeder;

· Yalnızca HTML(Yalnızca HTML) - Görüntü dosyaları olmadan yalnızca HTML dosyasını kaydeder.

Ayrıca ImageReady, HTML kodunu panoya kopyalayan HTML Kopyala komutuyla bir HTML dosyası oluşturmanıza olanak tanır ve ardından herhangi bir HTML düzenleyicide bir Web sayfasına yapıştırılabilir. Orijinal görüntü değişirse, HTML dosyasını güncellemek için, güncellenen dosyanın adıyla HTML'yi Güncelle komutunu çalıştırın.

Animasyonu QuickTime formatında kaydetmek için komutu seçin. Dosya> Orijinali Dışa Aktar ( Dosya> Başlangıcı Dışa Aktar) ve açılır listeden bir değer seçin. Hızlı Zaman Filmi(Bu, bilgisayarınızda QuickTime kuruluysa kullanılabilir). Dosyanın adını ve konumunu belirttikten sonra butonuna tıklanır. Kayıt etmek(Kaydet) seçilen türde bir dosya oluşturun.

Animasyonlu yağmur nasıl yapılır.

Aşama 1. Resmi açıyoruz.

Adım 2. Yeni bir katman oluşturun ve onu gri ile doldurun. Ve ona bir filtre uygula Filtre - Gürültü - Gürültü ekle ve bu ayarları yapın.

Sonra filtreyi uygularız Filtre-Bulanıklık-Hareket Bulanıklığı.

Katmanın şeffaflığını %30 olarak ayarlayın

Aşama 3. Tekrar yeni bir katman oluşturun ve onu gri renkle doldurun ve ikinci adımdakiyle aynı filtreleri uygulayın, ancak filtre Hareket bulanıklığı zaten diğer ayarlarla yapıyor.

ve katmanın opaklığını %30 olarak ayarlayın

4. Adım ... Her şeyi 2. adımda yaptığımızın aynısını tekrarlıyoruz. Hareket bulanıklığı aynı ayarlarla yapın ve katmanın opaklığını %30'a ayarlayın.

Adım 5 ... git Resim Okuyucu bu, klavye kısayolu kullanılarak yapılır ( Üst Karakter + Ctrl + M)

6. Adım ... Çerçeve uzunluğunu 0.1sn yapıyoruz.

7. Adım ... Çerçevemizin iki kopyasını yapıyoruz.

8. Adım ... İlk kareye gidin ve sadece yaptığımız dropların bulunduğu ilk katmanın görünür olduğundan emin olun.

9. Adım ... İkinci kareye gidin ve yaptığımız damlalarla sadece ikinci katmanın göründüğünden emin olun.

Adım 10 ... Üçüncü kareye gidin ve yaptığımız damlalarla sadece üçüncü katmanın göründüğünden emin olun.

Tüm animasyonlarımız hazır!

Xara3D 5.0

Üç boyutlu grafiklerle çalışan çoğu programın aksine, Xara3D basit ve kullanıcı dostu bir arayüze ve minimum sayıda ayara sahiptir, böylece yeni başlayanlar bile kolayca ve hızlı bir şekilde anlayabilir. Program öncelikle hacimli metin ve düğmeler oluşturmak için tasarlanmış olsa da, Animasyonlu GIF ve AVI formatlarında animasyonlar elde etmek için harikadır. Bu nedenle, web tasarımcıları tarafından ağırlıklı olarak profesyonel üç boyutlu metin logoları oluşturmak için başarıyla kullanılmaktadır.

Programın cephaneliğinde - oluşturulan nesneleri süslemek için geniş bir yazı tipi ve doku seti. Konum, hizalama, satır aralığı, karakter aralığı vb. dahil olmak üzere oluşturulan metin üzerinde tam kontrol, 3B görüntünün renk ve yapısının verimli ve esnek kontrolü sağlar. Ayrıca görüntüleri mat veya parlak yapabilir, yumuşak bir çerçeveleme gölgesi uygulayabilir ve daha fazlasını yapabilirsiniz. Animasyon efektlerinin seçimi yeterince geniştir: nesneler dönebilir, kademeli olarak görünebilir, titreyebilir, adım atabilir, sallanabilir veya kaybolabilir. Ayrıca, bir dosyadan animasyon özelliklerini içe aktarabilir ve bunları diğerine uygulayabilirsiniz. Basit animasyon kontrolleri, herhangi bir zaman sınırı belirlemenize, örneğin farklı zamanlarda duraklamalar eklemenize veya her nesne için kendi animasyon özelliklerinizi ayarlamanıza olanak tanır.

Program, WMF, EMF, GIF ve PNG formatlarındaki iki boyutlu grafik dosyalarının içe aktarılmasını destekler ve animasyon sonuçları yalnızca Animasyon GIF formatında değil, istenirse AVI veya SWF formatlarında da kaydedilebilir.

Makromedya Flaşı

Daha kesin olmak gerekirse, Adobe Flash, diğer araçlarla (ortamlar) birlikte Flash Platformu için uygulamalar oluşturmaya yönelik bir ortamdır:

Adobe Flex Oluşturucu

Flash Geliştirme Aracı (FDT), vb.

Flash uygulamaları kullanılarak oluşturulur ActionScript - Programlama dili. Kaynak kod dil talimatları içermiyorsa, derleme sırasında her durumda bazı temel ActionScript kodları oluşturulur (bu, Flash bayt koduna bakılarak görülebilir). Ayrıca, buna göre, sahnede, MovieClip sınıfından devralınan ve oynamaya başlayan bir temel klip vardır. Adobe Flash ortamı, tam teşekküllü kod yazmak mümkün olsa da, daha çok tasarımcılara ve animatörlere odaklanmıştır. Flex Builder, FDT, programlama odaklıdır ve animasyon, görselleştirme için özel arayüz araçları yoktur.

Flash, formatın adı olarak da kullanılır (flash filmler, flash filmler) (tam ad - Flash Film).

Ürün oluştururken ses ve grafik dosyalarını kullanabilir, PHP ve XML kullanarak etkileşimli arayüzler ve tam teşekküllü web uygulamaları oluşturabilirsiniz.

Flash dosyaları ".swf" uzantısına sahiptir ve tarayıcıya eklenti olarak yüklenebilen Flash Player ile görüntülenir. Ayrıca swf dosyaları Gnash oynatıcı kullanılarak görüntülenebilir. Adobe web sitesi aracılığıyla ücretsiz olarak dağıtılır. ".fla" uzantılı kaynak dosyalar Adobe Flash geliştirme ortamında oluşturulur ve ardından Flash Player'ın anladığı ".swf" biçiminde derlenir.

Flash, vektör geçişine, yani bir ana kareden diğerine yumuşak bir "akışa" dayanır. Bu, her karakter için yalnızca birkaç ana kare ayarlayarak oldukça karmaşık çizgi film sahneleri oluşturmanıza olanak tanır.

Flash, ECMAScript tabanlı ActionScript programlama dilini kullanır.

Vektör dönüştürme teknolojisi Flash'tan çok önce vardı. 1986 yılında bu teknolojiyi kullanan Fantavision yazılımı piyasaya sürüldü. 1991 yılında, Başka Bir Dünya oyunu bu teknolojide piyasaya sürüldü ve iki yıl sonra - Flashback.

Flash'ın tarihi 1995 yılında, FutureSplash Animator animasyon programını satın aldıktan sonra Macromedia'nın Flash adlı bir ürünü piyasaya sürmesiyle başladı.

Flash, profesyonel kariyerine geleneksel bir 2D animasyon yazılım ürününün piyasaya sürülmesiyle başladı. Zaman geçtikçe her şey çok hızlı gelişti. Flash gelişmeden vazgeçmedi, daha modern ve mükemmel hale geldi.

Bugün sözde 3D motorlar var, örneğin:

PaperVision3D, ancak esas olarak şu anda flash player'ın bir parçası olarak directX veya openGL araçlarını kullanma olasılığının olmaması nedeniyle, hızları ve çalışma kalitesi oldukça düşüktür, bu nedenle tüm 3d algoritmalar tamamen öykünmüştür. Donanım hızlandırma, çok çekirdekli işlemciler için destek yoktur - bu da motorun hızını azaltır. Bununla birlikte, tasarımcılar genellikle belirli bir projenin (oyunun) özelliklerine göre uyarlanmış kendi 3d motorlarını yaratırlar.

Günümüzde çoğu tarayıcıda, Flash dosyalarını oynatmalarına izin veren özel olarak yerleşik bir Macromedia Flash Player eklentisi vardır. Flash teknolojisi İnternet'e hakim oldu ve web sitelerinde vektör animasyonunu görüntülemek için standart haline geldi. Adobe Flash Player olmadan, tarayıcılar web sayfalarını ve gömülü Flash etkileşimli web öğelerini doğru şekilde görüntülemeyecektir.

Macromedia Flash arayüzü.

şekil 1

Flash uygulama penceresini açtığınızda, ekranda aşağıdaki arayüz öğeleri görünür:

Sahne (masaüstü) - bireysel kareler oluşturmak, grafik öğelerden veya içe aktarılan bitmaplerden bir kompozisyon oluşturmak ve animasyon sonuçlarını görüntülemek için bir alan;

· Zaman çizelgesi (zaman ekseni) - üzerlerinde grafik nesneler bulunan ve bunların zaman içindeki dağılımını içeren ayrı katmanların bir listesini içeren bir pencere (filmin her karesi zaman ekseninde işaretlenir);

· Semboller (semboller) - filmin ana unsurları, kural olarak, içinde tekrar tekrar kullanılır;

· Kitaplık - sembollerin ve içe aktarılan dosyaların listesini içeren, bunları düzenlemenize ve sıralamanıza olanak tanıyan bir pencere;

· Yüzer, sabitlenebilir paneller (yerleştirilebilir paneller) - uygulamayı yapılandırmak ve film öğelerinin parametrelerini değiştirmek için kullanılan bir dizi sekmeye sahip pencereler;

· Film Gezgini (film tarayıcısı) - filmin yapısını görüntülemek için ek olarak adlandırılan bir pencere.

Kare kare animasyon

Şimdi Flash penceresine bir kez daha bakalım. İçinde bir video açıldığında, sözde zaman çizelgesi pencerenin üst kısmında bulunur. Sol tarafında, bu bölümde biraz sonra bahsedeceğimiz katmanların adları ve nitelikleri yer almaktadır. Sağ tarafta ise videonun numaralandırılmış kareleri bulunmaktadır (Şek. 4). Karelerin numaralandırılması nedeniyle, bu pencereye zaman çizelgesi denir - sonuçta videodaki kareler birbiri ardına gelir.

Zaman çizelgesinde her zaman geçerli kareyi seçen kırmızı bir dikdörtgen vardır.

Çözüm:

Modern teknolojiler dünyasında animasyon, multimedya projelerinin ve sunumlarının ana unsurlarından biri haline geliyor ve internet sayfalarında giderek daha fazla yer alıyor.

Bu yazıda, animasyonu desteklemenin ve oluşturmanın en yaygın yolları ele alınmakta ve çeşitli efektler kullanılarak gif dosyaları, flash klipler ve animasyonlu hacimsel metin oluşturma aşamaları anlatılmaktadır.

Xara3D - üç boyutlu metinle çalışmak için bir program, kolay bir arayüze ve minimum sayıda ayara sahiptir, basit ve kullanışlı olarak kabul edilir.

Kullanışlı ve sezgisel bir arayüz ve zengin özellikler sayesinde, Ulead GIF Animator bugün gif dosyaları oluşturmak için en kullanışlı ve işlevsel programlardan biri olarak kabul edilir ve bir web tasarımcısının zamanını önemli ölçüde azaltır.

multimedya içeriği oluşturmak için önde gelen araçtır. Yazılım, etkileşimli sunumlar, pazarlama materyalleri, e-Öğrenim kaynakları ve grafik kullanıcı arayüzleri için mükemmel sonuçlar veren etkileşimli bir multimedya ortamı oluşturmak için metin, grafik, ses ve videoyu bütünleştirir.

Macromedia Flash Professionalçok çeşitli bilgi işlem cihazları kullanarak dünya çapında bir milyondan fazla geliştiriciyi ve kullanıcıyı bir araya getiriyor. Macromedia Flash teknolojisi, en yaygın yazılım çizim biçimi olarak kabul edilir.

Kaynakça:

1. Bilgisayar Basın 3 '2005;

2.http: //computer.damotvet.ru/software/887515.htm;

3. İnternet için animasyon üzerine resimli eğitim; 2007 Dinamit Yazılım Grubu.

Tanıtım ................................................. ................................................................ ................................ 3

Animasyon................................................. ................................................................ ................................4

Animasyon teknolojileri ................................................. . ................................................4

Animasyon yazılımı .................................................. ... ...........4

2D animasyon yazılımının (2D) özellikleri ................................. 5

Üç boyutlu animasyon (3D) oluşturmak için yazılımın özellikleri ... 5

GIF Animasyonu ................................................. . ................................................ . ................................ 6

GIF - animasyon oluşturmak için programların sınıflandırılması ................................................ ..........6

Üç ana eğlence işlevinden (terapötik, sağlığı geliştirici ve bilişsel) turist animasyonu, doğrudan iki işlevi yerine getirmek üzere tasarlanmıştır - spor ve sağlığı geliştirici ve bilişsel. Dolaylı olarak, uygun koşullar altında terapötik işlev de gerçekleştirilir.

Animasyon pratiğinde, animasyon programlarının hedeflenen tasarımı için turist animasyonunun aşağıdaki işlevleri ayırt edilebilir:

Uyarlanabilir, günlük bir ortamdan özgür, boş bir ortama geçmenizi sağlar;

Telafi edici, bir kişiyi günlük yaşamın fiziksel ve zihinsel yorgunluğundan kurtaran;

Dengeleyici, olumlu duygular yaratan ve zihinsel istikrarı teşvik eden;

Bir kişinin fiziksel gücünü geri kazanmayı ve geliştirmeyi amaçlayan sağlık, günlük çalışma hayatında zayıfladı;

Bilgilendirici, ülke, bölge, insanlar vb. hakkında yeni bilgiler almanızı sağlar;

Canlı izlenimler sonucunda çevrenizdeki dünya hakkında yeni bilgiler edinmenizi ve pekiştirmenizi sağlayan eğitici;

Yetiştirme, entelektüel ve fiziksel gelişme getirme;

Turist animasyonunun bu kadar çeşitli işlevleri, çok çeşitli animasyon etkinliklerinin yanı sıra çok çeşitli animasyon programları ve etkinliklerine yol açmıştır.

Sistematik bir yaklaşım açısından turist animasyonu, iletişim, hareket, kültür, yaratıcılık, keyifli zaman ve eğlencede belirli turist ihtiyaçlarının karşılanmasıdır.

Bu ihtiyaçların kapsamı çok geniştir, çünkü tatile gidenler bu kavrama tamamen farklı anlamlar yüklerler: kimisi için tatil bir yolculuktur, kimisi için kitap okumak, ormanda yürümek, balık tutmak vb. Talebe göre. Turist hizmetleri uygulamasında, turistlerin (tatilciler) çeşitli ihtiyaçlarını karşılayan aşağıdaki animasyon türleri oluşturulur:

Hareket halinde animasyon - zevk ve hoş deneyimlerle birlikte modern bir insanın hareket ihtiyacını karşılar;

Deneyim yoluyla animasyon - yeni, bilinmeyen, beklenmedik aşinalık, keşifler ve ayrıca zorlukların üstesinden gelme ihtiyacını karşılar;

İletişim yoluyla animasyon - insanların iç dünyasını keşfetmede ve iletişim yoluyla kendini tanımada yeni, ilginç insanlarla iletişim ihtiyacını karşılar;

Sakinlik yoluyla animasyon - insanların günlük yorgunluktan sükunet, yalnızlık, doğa ile temas ve ayrıca barış ve "boş tembellik" ihtiyacı yoluyla psikolojik rahatlama ihtiyacını karşılar;

Kültürel canlandırma - ülkenin, bölgenin, halkın, ulusun kültürel ve tarihi anıtları ve kültürünün modern örnekleri ile tanışarak bireyin ruhsal gelişimi için insanların ihtiyacını karşılar;

Yaratıcı animasyon - bir kişinin yaratıcılık ihtiyacını karşılar, yaratıcı yeteneklerini gösterir ve ortak yaratıcılık yoluyla benzer düşünen insanlarla iletişim kurar.

Gerçek animasyon programları çoğunlukla karmaşık yapıdadır ve listelenen animasyon türleri bu programların kurucu unsurlarıdır.

Animasyon programları, tamamen eğlence etkinliklerinin yanı sıra çeşitli spor oyunları, egzersizler ve yarışmaları içerir. Bu kombinasyon, bu programları sağlığı güçlendirmek, iyileştirmek için daha zengin, daha ilginç ve kullanışlı hale getirir, bu nedenle turist animasyonu ve spor arasındaki ilişkide en büyük onarıcı ve sağlığı iyileştirici etki çoğu zaman elde edilir.

İş konusuyla ilgili animasyon türlerini vurgulayalım: eğlence, turizm, otel.

Rekreasyonel animasyon, bir kişinin ruhsal ve fiziksel gücünü geri kazanmayı amaçlayan bir tür boş zaman etkinliğidir. Rekreasyon amaçlı uygulanan boş zaman programları hem turistler, tatilciler ve misafirler ile turizm ve tatil işletmeleri hem de yerel sakinlerle eğlence işletmeleri tarafından gerçekleştirilebilir. Bu bize rekreasyonel animasyon kavramının otel ve turist kavramından daha geniş olduğunu söyleme hakkını verir. Şekil 2, turist animasyonunun yapısını göstermektedir.

Şekil 2 - Eğlence amaçlı animasyon çeşitleri

Turist animasyonu, sağlanmasında turistin aktif eylemde bulunduğu bir turizm hizmetidir.

Otel animasyonu, yalnızca turizm işletmelerinde boş zaman organizasyonunu içerdiğinden, dikkate alınan üçünün en dar kavramıdır: turizm kompleksleri, oteller, oteller, kamp alanları vb.

Ek animasyon hizmetleri de vardır - tur paketinde belirtilen ana turizm hizmetlerini, seyahat nedeniyle teknolojik molalar, yoldaki gecikmeler, kötü hava durumunda, hedeflenen eğlence için koşulların olmaması durumunda "desteklemek" için tasarlanmış animasyon programları.

Tablo 1, sağlıklı yaşam rekreasyonuna vurgu yapan bir turist animasyonunu sunmaktadır.

Tablo 1 - Animasyon etkinliklerinin tipolojisi

Buna göre, animasyon türlerinin her biri için hedefler turizm ve turist yarışmaları, spor yarışmaları ve spor, eğlence etkinlikleri, bilişsel ve gezi etkinlikleri olacaktır.

uygulamada mükemmel animasyon hakkında.

Muhtemelen “İyi tasarım hemen görülebilir” ifadesini duymuşsunuzdur. Harika tasarım görünmezdir." Aynı ilke, mobil uygulamalardaki animasyonlara da uygulanabilir: Gerçekten de başarılı bir animasyon, uygulamayı kullanışlı hale getirir ve dikkat çeker, ancak kullanıcıyı uygulamanın kendisinden uzaklaştırmaz. Animasyonun asıl görevi, uygulamanın mantığını kullanıcıya anlatmaktır.

Animasyon türleri

Animasyonların kullanımını optimize etmek için uygulamanızdaki yerini ve işlevini tanımlamanız gerekir. Ne tür animasyonların var olduğunu öğrenelim.

Görsel geri bildirim

Herhangi bir kullanıcı arayüzü için görsel geri bildirim çok önemlidir. Fiziksel dünyada nesneler, onlarla etkileşimimize yanıt verir. İnsanlar aynı şeyi uygulamanın unsurlarından da bekler. Görsel geri bildirimin yanı sıra işitsel ve dokunsal geri bildirim, kullanıcıya bir güven duygusu verir. Görsel geri bildirim ayrıca basit bir işlevi yerine getirir: uygulamanızın doğru çalıştığını gösterir! Simge büyütüldüğünde veya "kaydırılan" görüntüler belirli bir yönde hareket ettiğinde, kullanıcının girdisine yanıt olarak uygulamanın "bir şeyler yaptığı" anlaşılır. Aşağıdaki örnekte, kullanıcı görev tamamlandı onay kutusunu işaretlediğinde alan daralır ve rengi yeşile döner.

Tinder'ın tanıdık soldan benzer sağdan atlamaya kaydırma yaklaşımı da görsel geri bildirimdir. Bu animasyonu açık kaynak kitaplığımız Koloda'da uyguladık:

Fonksiyonel değişiklik

Bu tür animasyon, kullanıcı onunla etkileşime girdiğinde bir öğenin nasıl değiştiğini gösterir. Öğelerin işlevlerinin nasıl değiştiğini göstermek istiyorsanız en uygunudur. Çoğu zaman düğmelerde, simgelerde ve diğer küçük tasarım öğelerinde kullanılır.

İlk örnekte, "hamburger" simgesinden "X"e dönüşen bir düğme görebilirsiniz; bu, düğmenin işlevinin değiştiği anlamına gelir.

İkinci örnekte hem simge hem de içerik değişir.

uzayda oryantasyon

Çoğu mobil uygulama karmaşıktır. Bu durumda tasarımcının görevi, navigasyonu mümkün olduğunca basitleştirmektir. Animasyon bu görevi gerçekleştirmek için son derece yararlı olabilir. Size öğenin nerede saklandığını gösterirse, bir dahaki sefere kullanıcının onu bulması daha kolay olacaktır. Bu örnekte, gezinme çubuğunda bir menü görüyoruz. Kullanıcı düğmeye tıkladığında döner:

Bu örnekte, ekranın altında ek düğmelerin nasıl göründüğünü görüyoruz - diğer seçeneklerle aynı yerde.

Öğelerin hiyerarşisi ve etkileşimleri

Animasyon, bir arayüzün parçalarını tanımlamak ve nasıl etkileşime girdiklerini göstermek için idealdir. Animasyonda her öğenin kendi amacı ve yeri vardır. Örneğin, bir düğme bir açılır menüyü etkinleştirirse, menünün yalnızca ekranın bir köşesinden dışarı çıkması değil, düğmeden görünmesi daha iyidir: kullanıcıya tıklamanın sonucunu gösterecektir. Bu, kullanıcının iki öğenin (düğme ve açılır menü) ilişkili olduğunu anlamasına yardımcı olacaktır.

Tüm animasyonlar, elemanların nasıl bağlandığını göstermelidir. Bu hiyerarşi ve öğelerin etkileşimi, sezgisel bir arayüz için çok önemlidir. Simgeye tıkladıktan sonra bir menünün göründüğü ilk örnekte, kullanıcının bakış açısından menü aynı öğedir, yalnızca büyütülür.

İkinci örnekte tıklandığında elemanla ilgili bilgiler artıyor, kullanıcı bunun aynı eleman olduğunu fark ediyor, fark sadece boyut olarak.

Görsel işaret

Animasyonlar size öğelerle nasıl etkileşim kuracağınızı söyler. Uygulama, öğeler arasında öngörülemeyen bir etkileşim modeline sahip olduğunda görsel ipuçları sunmak özellikle önemlidir. Bu örnekte, bir kullanıcı bir blog açtığında, ekranın sağ kenarında gönderi etiketleri görünür ve kullanıcının bunlar arasında gezinmek için yatay olarak kaydırması gerekir.

İkinci örnek, benzer bir teknik kullanır, ancak yalnızca sosyal medya simgeleri için.

sistemin durumu

Bazı işlemler her zaman uygulamanızın içinde gerçekleşir: bilgiler sunucudan indirilir, hesaplamalar yapılır vb.

Göreviniz, kullanıcıya uygulamanızın donmadığını veya bozulmadığını anlamasını sağlamak ve mevcut sürecin durumu hakkında onu bilgilendirmektir. İdeal olarak, uygulamadaki her işleme ayrı bir animasyon eşlik etmelidir. Örneğin, ses kaydedilirken, uygulama ekranı ses parçasının dinamiklerini göstermelidir. Animasyonlu ses dalgası ses seviyesini gösterebilir.

Bu tür animasyonun en yaygın örneklerinden biri, yenilemek için çekmedir.

komik animasyonlar

Komik animasyonlar iyi veya kötü olabilir. Genellikle anlamsız kullanılırlar ve uygulama geliştirmeyi önemli ölçüde karmaşık hale getirebilirler. Ancak gerçekten benzersiz animasyonlar, kullanıcılara çok çekici gelebilir ve uygulamanızı diğerlerinden farklı kılabilir. Tasarımcıların, kullanıcıları ürünlerine aşık etmek için kullandıkları gizli araçlardan biridir. Benzersiz animasyonlar, tanınabilir bir marka oluşturmanıza yardımcı olabilir.

Örneğimizde, hareketli daireler çok sıra dışı görünüyor ve kullanıcının dikkatini çekiyor. Bu daireleri ekran etrafında hareket ettirebilme özelliği hem keyif veriyor hem de süreci oyunlaştırıyor. Kolay ve eğlenceli.

Kaynatma tenceresi şeklinde sunulan "yenilemek için çek" özelliğinin sizi kayıtsız bırakmayacağına eminim!

Eğlenceli animasyonlar oluştururken akılda tutulması gereken iki şey vardır: 1) uygulamanın işlevselliğini gölgelemediğinden veya engellemediğinden emin olun. 2) uzun sürmemelidir.

Ana tasarım ilkeleri

Animasyonun temel türlerini ve işlevlerini ele aldık. Gerçekten etkili animasyonlar oluşturmak için başlangıçta, ancak UI tasarımına da uygulanabilecek 9 ilkeyi aklınızda bulundurun.

1. Malzeme

Elemanınızın nelerden oluştuğunu gösterin: hafif mi ağır mı, sabit mi esnek mi, düz mü hacimli mi? Kullanıcılara bu UI öğesinin başkalarıyla nasıl etkileşime gireceğini bildirin.

2. Hareketin yörüngesi

Hareketlerin doğasını belirlemeniz gerekir. Temel ilkeler, cansız mekanik nesnelerin genellikle düz bir hareket yörüngesine sahip olduğunu, canlıların ise esnek ve çok düz olmayan bir yörüngeye sahip olduğunu belirtir. Kullanıcı arayüzünüzün nasıl bir izlenim vermesi gerektiğine karar vermeniz ve ardından buna bağlı kalmanız gerekecek.

3. Zamanlama

Zamanlama muhtemelen animasyondaki en önemli konulardan biridir. Gerçek dünyada, fiziksel nesneler doğrusal hareket kurallarına göre hareket etmezler çünkü hızlanmaları ve yavaşlamaları için zamana ihtiyaçları vardır. Nesnelerinizin daha doğal hareket etmesini sağlamak için eğrileri kullanın.

4. Odak animasyonu

Ekranın içerik alanına dikkat çekin. Örneğin, yanıp sönen bir simge, kullanıcıyı bildirimi görüntülemek için tıklaması konusunda uyaracaktır. Bu tür animasyon, belirli bir öğeyi vurgulamanın başka bir yolu olmadığında çok fazla ayrıntı ve öğe içeren arabirimlerde kullanılır.

En önemli:

• Hedef kitlenizin kim olduğunu hatırlayın ve onların sorunlarına bir çözüm olarak prototipinizi oluşturun.
• Animasyonunuzun her öğesinin rasyonel olduğundan emin olun. (Neden o? Neden öyle? Neden şimdi?)
• Ürününüzü öne çıkarmak için gerçek dünyadaki hareket kalıplarına benzeyen doğal görünümlü animasyonları hedefleyin.
• Projenizin her aşamasında geliştiricilere danışın.
• Açgözlü olmayın - bileşenlerinizi GitHub'da paylaşın.

Bir yazım hatası bulursanız, onu seçin ve Ctrl + Enter tuşlarına basın! Bizimle iletişime geçmek için kullanabilirsiniz.

"Burada ise geriye bakıyoruz ama yerimizde duramıyoruz. İleriye doğru çabalıyoruz, yeni yollar açıyoruz, yeni şeyler üstleniyoruz, çünkü meraklıyız... ve merak bizi yeni yollara sürüklüyor. Sadece ileriye." (Walt Disney)

Animasyon teknolojisi hakkında

Bazen, ben ve müşteri arasında, gelecekteki animasyon çalışmalarının teknik özellikleri üzerinde anlaşmaya varırken bir yanlış anlaşılma oluyor. Bu makale, animasyon teknolojisi sorunlarını daha iyi anlamanıza yardımcı olacaktır.

Başlamak için, kafa karıştırmamak için, animasyon hakkında karar verilebilecek 3 ana kriteri vurgulamak istiyorum: animasyon türleri, animasyon yöntemleri ve animasyon stilleri. Birçoğu için aynı şey, ama değil! Animasyon türleri, karikatürün gösterilme şekli veya şeklidir (çizilmiş, kukla vb.). Animasyon teknikleri, animasyonun oluşturulduğu teknik özelliklerdir (kare kare animasyon, programlanabilir animasyon vb.). Son olarak, animasyon stili, animasyonda (gerçekçilik, anime vb.) kullanılan sanatsal bir tekniktir. Bu yazıda "animasyon türleri" kavramını daha yakından inceleyeceğim ve ardından buna "yöntemler" ve "stiller" ekleyeceğim. Bütün bunlar birlikte animasyon teknolojisidir.

Elle çizilmiş klasik animasyon.

En ilginç ve yaygın animasyon türlerinden biri, sözde klasik animasyondur. Klasik animasyon, her bir ayrı kareye şeffaf film (veya aydınger kağıdı) çizilerek yapılır. Daha sonra bu kareler özel bir düzenleme programında toplanır. Bu animasyon çok canlı, pürüzsüz, uzamsal ama pahalıdır))). Bu tür bir animasyonun bir örneği, Disney stüdyosunun ve Soyuzmultfilm'in çizgi filmleri olabilir.

Disney Studios'un "Pamuk Prenses ve Yedi Cüceler" çizgi filminden bir kare

Geçiş animasyonu.

En eski animasyon türü. Bu tür animasyonun özü, karton veya kağıt üzerine çizilen bir nesnenin ayrı parçalara bölünmesi ve bu parçaların çerçeveden çerçeveye taşınmasıdır (kaydırılır). Bu nedenle adı - yeniden döşeme! Birçok insan bu tür bir animasyonu ilkel olarak görür, ancak doğru ellerde bu tür karikatürler çok ilginç olabilir. Yuri Norshtein'in yönettiği "Sisteki Kirpi" adlı çizgi film, geri dönüşümlü animasyonun en çarpıcı örneklerinden biri olarak adlandırılabilir. "Sisteki Kirpi" dünya topluluğu tarafından TÜM ZAMANLARIN VE İNSANLARIN EN İYİ KARİKATÜRÜ olarak kabul edildi !!! Transfer için çok fazla ... İlkel için çok fazla ...

Yuri Norshtein'in yönettiği "Sisteki Kirpi" çizgi filminden bir kare

Cam üzerine boyama.

Ama burada animasyon kesinlikle ilkel değil! Böyle bir animasyonun özü, cam üzerine yağlı boya ile resim yapmaktır. Aynı zamanda, her çerçeve, sanatçının vuruşlarıyla değiştirilen pitoresk bir resimdir. Böyle bir animasyonun çarpıcı bir örneği, "Oscar" ile ödüllendirilen Alexander Petrov'un "Yaşlı Adam ve Deniz" eseridir.

Alexander Petrov'un yönettiği "Yaşlı Adam ve Deniz" adlı animasyon filminden bir kare.

Kukla animasyonu.

Aynı eski tarz animasyon. Kukla animasyonundaki tüm bebekler ve süslemeler el yapımıdır, bu da onları klasik animasyon kadar pahalı hale getirir. Bununla birlikte, bu tür animasyon bugün bile çok popülerdir (3D bilgisayar animasyonunun yayılmasına rağmen). Dürüst olmak gerekirse, çocukken kukla animasyonunu sevmezdim))) Ama aydınlanmam Tom Burton'ın "The Nightmare Before Christmas" çizgi filmini gördüğümde geldi.

Tom Burton'ın yönettiği "The Nightmare Before Christmas" çizgi filminden bir kare.

hamuru animasyon

Hamuru animasyon adı kendisi için konuşur. Sadece, hamuru animasyonunun oyuncak bebek animasyonundan çıktığını ve Alexander Tatarsky'nin yönettiği "Geçen yılki kar yağıyordu" çizgi filmlerinin ortaya çıkmasından sonra Rusya'da popüler hale geldiğini ekleyeceğim.

A. Tatarsky'nin yönettiği "Geçen Yıl Kar Yağıyordu" adlı karikatürden bir kare.

Bilgisayar 2D animasyon.

Beğensek de beğenmesek de eski tip animasyonların yerini yenileri alıyor. Bazı nedenlerden dolayı, bilgisayar 2D animasyonu Flash animasyonu olarak adlandırmak gelenekseldir ve bu tamamen doğru değildir. Flash sadece bir programdır. 2D animasyon oluşturmak için diğer güçlü bilgisayar programlarını adlandırabilirsiniz, örneğin: After Effect, Anime Studi Pro, Toon Boom Studio ve daha birçok ücretli ve ücretsiz program. Günümüzde neredeyse tüm stüdyolar bilgisayar 2D animasyonu ile uğraşmaktadır. Bu, bugün TV dizilerinde, internette, gündelik bilgisayar oyunlarında vb. gördüğümüz türde bir animasyondur.

"The Simsons" adlı animasyon dizisinden bir kare

3 boyutlu animasyon.

3D animasyon - bilgisayar 3D programları temelinde oluşturulan bir tür animasyon. Bu, en genç ve en umut verici animasyon türüdür. Bilgisayar teknolojisinin gelişmesiyle birlikte sadece iki boyutlu düzlemde (2D animasyon) grafik ve animasyon çizmek değil, aynı zamanda üç boyutlu formları canlandırmak da mümkün hale geldi. Bu teknoloji çok karmaşık ama kısaca anlatırsanız üretim süreci şöyle bir şeye benziyor. İlk olarak, konsept sanatı (herhangi bir şekilde) çizilir, bu çizimlere dayanarak modelin üç boyutlu bir geometrisi oluşturulur. Sonra bir karakterin veya nesnenin şekline uyan dokular. Ardından, nesnenin kemiklerini oluşturun ve şeklin hareket edebilmesi için bunları şekle ekleyin. Animatörler hareket için hazır bir model alır ve onu canlandırmaya başlar. Model ne kadar iyi hazırlanırsa hareketleri o kadar doğal ve esnek olur. Animasyonu oluşturduktan sonra sahne işlenir (3D'den normal bir resme çevrilir). Bu tür animasyonların çarpıcı örnekleri, Pixar stüdyosunun karikatürleridir.

Pixar stüdyosunun "Ratatouille" adlı çizgi filminden bir kare.

Kombine animasyon.

Kompozit animasyon, herhangi bir animasyon türünün bir video ile birleşimidir. Bu tür animasyonların ilk örnekleri şunlar olabilir: "Roger Rabbit'i Kim Çerçeveledi" filmi, "Kaptan Vrungel'in Macerası" adlı çizgi film, vb. 3D teknolojisinin ve bilgisayar özel efektlerinin gelişmesiyle, bu tür animasyon uzun metrajlı filmlerde bulunur. ve daha sık. Modern kombine animasyonun ana özelliği, eksiksiz gerçekçiliğidir.

Steven Spielberg'in yönettiği "Jurassic World" filminden bir kare

Diğer animasyon türleri.

Listelenen animasyon türlerine ek olarak, başkaları da var, örneğin: kum animasyonu, lazer animasyonu, fotoğraf animasyonu, iğne animasyonu, vb. Ancak bu türler daha az popüler olarak kabul edilir ve bu yazıda sadece onlardan bahsetmeme izin verdim.

Cardboard Tower stüdyosunda animasyon türleri.

Animasyon stüdyomuz bilgisayar 2D animasyonu üretiminde uzmanlaşmıştır. Bilgisayar programlarının esnek yetenekleri sayesinde aynı anda hem crossover hem de klasik animasyon oluşturabiliyoruz. Ayrıca 3D animasyonlar da oluşturabiliyoruz. Örnek olarak portföyümüzden 3 videoya bakabilirsiniz:

1. Klasik tarzda bilgisayar 2D animasyonu.

3D Studio MAX, gelişmiş animasyon kontrol yetenekleri uygular, her nesnenin yaşam geçmişini saklar, çeşitli aydınlatma efektleri oluşturmanıza olanak tanır ve açık bir mimariye sahiptir, yani üçüncü tarafların sisteme ek uygulamalar eklemesine izin verir.

TrueSpace - Caligari'den 3D animasyon için tasarlanmış bir pakettir ve kullanım kolaylığı, şekil kontrolünde esneklik, spline desteği ve nesneler üzerinde Boolean işlemleri ile karakterize edilir. Yenilikçi arayüz, araç çubuklarını doğrudan 3B alanda gösterir ve bunları nesneye hizalar. Uzantılar ve mimarinin açıklığı, paketin yeteneklerini artırmanıza olanak tanır.

Ray Dream Studio, 3B tasarım ve animasyon için bir dizi profesyonel araç sağlar. Kullanıcılar, boole işlemlerini ve deformasyonları kullanarak çeşitli modeller oluşturabilir. Bu modeller, çeşitli dokulara veya video görüntülerine uygulanabileceği gibi, doğrudan yüzeylerine de boyanabilir.

Video düzenleme için birçok yazılım ürünü bulunmaktadır. 3D animasyon paketlerine ek olarak, örneğin hacimsel yazı tipleri oluşturmak için oldukça özel programlar vardır. Ayrıca çeşitli animasyon efektleri kullanır, görüntüler oluşturur ve video dosyaları oluştururlar. Bunlardan bazıları aşağıda listelenmiştir.

Adobe Premiere, en yaygın kullanılan dijital video düzenleme yazılımıdır. Kullanışlı, sezgisel bir arayüze sahiptir. Birden fazla video ve ses kanalını destekler, çerçeveler arasında bir dizi geçiş içerir, ses ve görüntüyü senkronize etmenize olanak tanır. MOV ve AVI dosyalarını destekler. Üçüncü taraf üreticilerin ek modüllerini bağlamak, programın yeteneklerini genişletir.

Speed ​​Razor SE, kullanışlı bir programdır. Kullanıcı arayüzü... Video ve ses kanallarıyla çalışmak için gelişmiş araçlar sayesinde Speed ​​Razor, karmaşık kompozisyon ve kaplamalara sahip projelerde kullanıma uygundur. Yaygın olarak kullanılan bir dizi özel efekt içerir, uç düzenleme (doğrudan yapıştırma)

gerçek zamanda. Bu programla oluşturulan multimedya projeleri videoya, CD-ROM'a yazılabilir veya bir Web sitesinde yayınlanabilir.

Ulead VideoStudio, acemi kullanıcılar için tasarlanmış bir programdır. Dijital video için DV ve MPEG-2 formatları için tam destek sunar. Bir filmin müziği için MP3 müzik dosyalarını veya bir ses CD'sindeki ses parçalarını kullanabilirsiniz. İyi düşünülmüş ve kullanıcı dostu arayüz sayesinde programla çalışmak oldukça basittir. Videonuza başlıklar ekleyebilir, ayrı parçalar arasındaki yumuşak geçişlerden yararlanabilir ve ortaya çıkan klibe ses veya arka plan müziği ekleyebilirsiniz.

COOL 3D, Ulead'den sunumlar, videolar, multimedya ve Web sayfaları için bir 3D başlık oluşturma programıdır. Program, 100'den fazla otomatik sihirbaz, son sahnenin modellenmesini ve oluşturulmasını büyük ölçüde basitleştiren birçok efekt içerir. Ayrıca 3B nesneler ve materyallerden oluşan devasa bir kitaplığın yanı sıra fotogerçekçi şablonlar ve dokular içerir.

Sesle çalışma programları kabaca iki büyük gruba ayrılabilir: sıralayıcı programlar ve ses düzenleyiciler olarak adlandırılan dijital ses kayıt teknolojilerine odaklanan programlar.

Sıralayıcılar müzik yapmak içindir. Sıralayıcılar, müzik parçalarını kodlamak için kullanılır. Düzenleme için kullanılırlar, tek tek parçaları "reçete etmenize", enstrüman tınılarını atamanıza, kanalların (parçaların) seviyelerini ve dengelerini oluşturmanıza, müzikal dokunuşlar (ses vurguları, zaman ofseti, akorttan sapmalar, modülasyon, vb.) Sıradan müzik bestelemesinden farklı olarak, bir sıralayıcının etkili kullanımı, bir aranjör bestecisinden özel mühendislik bilgisi gerektirir.

Ses düzenleme programları, bilgisayarınızın sabit diskine gerçek zamanlı olarak ses kaydetmenize ve dijital işleme ve çeşitli kanalları birleştirerek dönüştürmenize olanak tanır.

Sesle çalışmak için bazı programları ele alalım.

Cakewalk Pro Audio, profesyoneller arasında haklı olarak popüler olan Twelve Tone Systems'dan profesyonel bir çok kanallı sıralayıcıdır. Cakewalk, DirectX arabirimi için oluşturulmuş çeşitli ses efektleri için ek eklentiler için destek sağlayan ilk yazılım ürünlerinden biriydi. DirectX efektlerinin karakteristik bir özelliği, hepsinin gerçek zamanlı olarak çalışması ve ses parçasının oynatılması sırasında seçilen efektin tüm parametrelerini ayarlayabilmenizdir.

Logic Audio Platinum, Emagic'ten profesyonel bir sıralayıcıdır. DirectX desteği sağlar, gerçek zamanlı işleme, birden fazla ses kartı ile çalışabilir. Ayrıca sesi kaydetmenizi ve dijital olarak işlemenizi sağlar.

Sound Forge, ses editörleri arasında liderlerden biri olan bir programdır. Güçlü düzenleme işlevlerine sahiptir, DirectX teknolojisini destekleyen herhangi bir eklentiyi yerleştirmenize izin verir, kullanışlı bir modern arayüze sahiptir, RealAudio dahil modern ses formatlarını destekler.

CoolEdit Pro, Syntrillium Software'den profesyonel bir kayıt stüdyosudur. Bir mikrofondan, CD çalardan veya başka bir kaynaktan bir ses kartı aracılığıyla ses kaydetmenize, popüler MP3 formatındaki dosyaları okumanıza ve yazmanıza, ortaya çıkan ses dosyalarını düzenlemenize ve bunlara çeşitli harika efektler eklemenize olanak tanır. Multimedya siteleri ile çalışma sağlar.

Tüm multimedya bileşenlerini oluşturduktan sonra bunları tek bir multimedya uygulamasında birleştirmeniz gerekir. Bu, geliştirilmesi için bir yazılım aracı seçme sorununu gündeme getirir. Çeşitli multimedya bileşenlerini tek bir üründe birleştirmenin mevcut araçları şartlı olarak üç gruba ayrılabilir:

• bir kontrol programının doğrudan geliştirilmesi için algoritmik diller;
• sunumlar oluşturmak ve bunları internette yayınlamak için özel programlar (multimedya uygulamalarının hızlı hazırlanması);
• multimedya araçları yazma.

Kural olarak, bir araç seçimi, multimedya uygulamasının verimliliği ve geliştirme hızı gereksinimlerine dayanmaktadır. Önemli bir özellik, kullanıcı etkileşiminin derecesidir. Özel sunum programları, öncelikle bir bilgisayardan bir kullanıcıya bilgi aktarmaya odaklanır. Yazma araçları, yüksek derecede etkileşime izin verir ve gerçekten etkileşimli bir uygulama oluşturur.

En basit ve en hızlısı, yetenekleri bazı durumlarda basit bir multimedya uygulaması oluşturmak için yeterli olan sunum yazılımını kullanmaktır. Yazma sistemleri, yüksek derecede kullanıcı etkileşimi ile yazılım ürünleri oluşturmak için tasarlanmıştır ve kullanıcı arayüzünün geliştirilmesi için özel bir betik dili sunar. Tüm multimedya bileşenlerini tek bir kontrol programında birleştiren nihai bir ürün oluşturmanıza olanak tanır. Ayırt edici özelliği, multimedya bileşenlerinden herhangi birini seçmenize, yürütme için başlatmanıza (bir ses dosyasını dinlemenize veya bir video izlemenize), istenen nesne için bir arama düzenlemenize vb.

Başlangıçta sunum yapan kişinin mesajını açıklamaya yardımcı olmak için elektronik slaytlar oluşturmak üzere tasarlanmış sunum yazılımı, son zamanlarda daha çok multimedya odaklı hale geldi. Görsel ve animasyon efektleri kümesinde farklılık gösteren çok sayıda bu tür program vardır, bazıları aşağıda sunulmuştur.

Power Point, Microsoft Office paketinde bulunan bir sunum programıdır. Görsel ve animasyon efektlerinin sayısı açısından, birçok yazarın multimedya araçlarından daha düşük değildir. Esnek sunum senaryoları oluşturmaya ve her slayt için film müzikleri kaydetmeye yönelik araçlar içerir. Rusça dil sürümünün varlığı, Rusça metinlerle başarılı bir şekilde çalışmanıza olanak tanır. Yerleşik web desteği, sunumları HTML biçiminde kaydetmenize olanak tanır, ancak animasyonlu bileşenlerin yüklenmesi için özel bir PowerPoint eklentisi gerekir