Adobe Edge Animate ile Animasyonlar

Web'deki kullanıcılar, zaman kaybetmedikleri veya sayfa gezinmesini olumsuz etkilemedikleri sürece, muhteşem tasarımlar bulmayı ve bu tasarımlara katkıda bulunan animasyonları takdir etmeyi beklerler.
İyi yapılmış animasyonlar, dikkati önemli ayrıntılara odaklar, bir uygulamanın nasıl çalıştığını gösterebilir ve bu animasyonların çoğunun yapıldığı önceki gereksinimi karşılıyorlarsa gezinmeye yardımcı olabilir. flaş ve gerekli kaliteye sahiplerse, kullanıcı tarafından iyi karşılandılar.
Ancak zaman değişti ve teknolojilerin de animasyon yapma şeklini geliştirmesi gibi, işte burada devreye giriyor. Adobe Kenar Animasyonuile animasyonlar oluşturmamızı sağlayan bir araç HTML5, CSS3 ve JavaScript programlama bilgisine ihtiyaç duymadan.
Yukarıdakiler biraz karmaşık gelebilir, programlama bilgisi olmadan bu teknolojilerde animasyon oluşturmama yardımcı olan bir araca nasıl sahip olabilirim? Göründüğü kadar karmaşık değil, ama önce aracı bilmeli ve onunla çalışmalıyız, bunun için onu çalıştıracağız ve şöyle görünmesi gereken ana ekran tarafından karşılanacaktır:

BÜYÜT

Sağ tarafta araçla bazı animasyonların nasıl yapıldığını öğrenmek için bazı bağlantılar ve sağ tarafta bir dosyayı açmak veya oluşturmak için bağlantılar görebiliriz. linke tıklayalım Yeni oluşturmak ve aracın çalışma alanına götürüleceğiz, şimdilik bunun için endişelenmeyeceğiz ancak aracın oluşturduğu yapıyı inceleyebilmek için projemizi kaydedeceğiz, yapımızın nasıl göründüğünü görelim:

BÜYÜT

Web uygulamalarının geliştirilmesine aşinaysak, bilinen uzantılara sahip bazı dosyalar görebiliriz, bunların her birinin işlevini bir projede görelim. Kenar Animasyonu:
.Bir dosyaBu dosya araç tarafından projemizi takip etmek için kullanılır.
.Html dosyasıBu dosya, kod kullanan bir web sayfasını açıklar. HTML, İnternet'teki diğer sayfaların yanı sıra.
.Js dosyasıBu dosyalar kod içerir JavaScript animasyonumuz için boş bir sahne tanımlayan ve projelerinde gerekli diğer görevleri yerine getiren projemiz için Kenar Animasyonu.
Bu dosyaların yanı sıra, klasörde edge_includes iki dosyamız var JavaScript ek, projemiz için kütüphaneler olan ve bizim içinde referans verilen HTML ve işlevi, hareket eylemini olduğu gibi gerçekleştirmektir.
Projemizin nasıl yapılandırıldığını gördükten sonra, çalışma alanımızın alanlarını bilmenin zamanı geldi, önce neye benzediğini görelim:

BÜYÜT

Her panel, adıyla tanımlanır, burada Elementler, Özellikler (düzenle) ve Zaman çizelgesi Animasyon oluşturmak için araçları ve widget'ları var. En büyük panel o sahne olarak bilinir. Sahne ve orada animasyonu oluşturuyoruz, hadi çalışma alanımızdaki öğelerin her birine daha yakından bakalım:
SahneBurası, projenin grafiklerinin ve metinlerinin görüntülendiği ve canlandırıldığı yerdir, düzenlemesinde sınırları vardır ve öğeleri gizlememize veya içinde konumlandırmamıza izin verir. Ayrıca projemizi kaydettiğimizde canlandır metin ve grafikleri bir HTML sayfası olarak kaydetmeye özen gösterir.
ElementlerÖğeler, sahnemize eklediğimiz nesnelerdir ve sonuç olarak, bu öğelerin illüstrasyonlar, fotoğraflar ve hatta metin olabileceği son web sayfamızda görünürler.
Özellikler (düzenle)Elemanların sahnedeki konumlarını ve hatta görünümlerini etkileyebilecek özellikleri vardır ve bunları panel kullanarak yönetebiliriz. Özellikler (düzenle).
Zaman çizelgesiProjemiz boyunca elementlerin ve özelliklerinin kaydını tutmamızı sağlar.
KütüphaneBurada projeye aktardığımız kaynakların kaydını tutabilir ve inandığımız sembollere kolay erişim sağlayabiliriz. canlandır.
AraçlarÇalışma alanının en üstünde görünürler. Onları sahnede öğeler yaratmak, seçmek ve değiştirmek için kullanıyoruz, çok fazla değiller ama onlarla ne kadar yapabileceğimizi bilsek şaşırırdık.
Aracımızın nasıl dağıtıldığını bildiğimiz ve içindeki kavramlara aşina olduğumuz için ilk animasyonumuzu oluşturmaya girişebiliriz.
İlk animasyonumuzu oluşturmak için, verilen bir görüntüdeki geçişlerle biraz deney yapacağız, izlenecek adımlara bakalım:
1- Aracın yapısını ve içindeki elemanları anlamaya çalıştığımız kapalı durumda yeni dosya seçeneği ile yeni bir proje oluşturacağız. Bir projeye başladığımızda sahnemiz boş oluyor, bunu özelliklerden değiştirebiliriz. sahne Bunun için ekranın sol tarafında beyaz kutucuğa basıyoruz ve tercihimize göre bir renk seçiyoruz veya onaltılık gösterimde bir rengimiz olması durumunda aşağıdaki resimde gördüğümüz gibi dahil edebiliriz:

BÜYÜT

2- Bu eğitimde koyu bir renk seçtik, böylece içine dahil edeceğimiz görüntü sahne vurgulamak. Şimdi gideceğimiz bir resim eklemek için Arşiv ve biz seçiyoruz ithal etmek, dosya gezgini görüntülenecek ve eklenecek resmi seçeceğiz:

BÜYÜT

Senaryomuzun özelliklerinde u taşmasına sahip olmamız önemlidir. taşma içinde gizlenmiş bizim beri sahne tüm HTML'mizin küçük bir bölümünü sunar, bu nedenle sahnenin dışındaki öğeleri görmek istemiyorsak, o özellik için bu değere sahip olmak önemlidir. Bölümümüzde elementlerimizin adını da değiştirebiliriz. Özellikler (düzenle), bu şekilde onları projemizde daha iyi tanımlayabiliriz.
3- Şimdi bizimkine gidiyoruz Zaman çizelgesi ve oynatma sayacının 0:00 animasyonumuzla başlamak için. İşin ilginç yanı da burada devreye giriyor ve burada azami dikkat göstermemiz gerekiyor. ana kare modu hem de basıyor otomatik geçiş modu, aşağıdaki resimde görebiliyoruz:

Animasyonlarımızı yapmak için işlevselliğini kullanmalıyız. Pimi aç/kapat yanındaki düğmede etkinleştirilen otomatik geçiş moduBu butonu aktif ederken kareleri veya geçişi aktif ediyoruz ve buna sarı sayaç eşlik etmelidir, çünkü bu şekilde Pinimizi ikinci sayaçla aynı seviyeye getirene kadar bu kadar saniyelik bir geçiş yapabiliriz.
4- Görevimizi yürütmek için ilk geçiş hadi düğmeye basalım Pimi aç/kapat ve ikinci sayacı alacağız ve onu hareket ettireceğiz 200 saniye, bundan sonra resmimizi ekranımızın en altına taşıdık, bakalım nasıl görünüyor:

BÜYÜT

Görüldüğü gibi mavi ile vurgulanan kısım Zaman çizelgesi boşluk tuşuna basarsak önizleyebileceğimiz geçişi temsil eder. O zaman bir geçiş yapmanın oldukça kolay olduğunu görüyoruz, peki ya bunlardan ikinci bir geçiş ya da daha fazlasını yapmak istiyorsak? Bunun için hareketlerimizi Toplu iğne ikinci sayaca doğru, bu şekilde belirtiyoruz canlandır ilk geçiş sürecini kapattığımızı ve yeni bir geçiş başlatabileceğimizi.
5- Bir şey yapacağız ikinci geçiş bu sefer imajımızın opaklığını azaltacağız, bunun için opaklığını %46'ya düşürerek imajımızı seçiyoruz ve bahsettiğimiz gibi Toplu iğne ikinci sayaçta ve 4. maddenin adımlarını tekrarlayın, görelim:

BÜYÜT

6- Sonunda bir üçüncü geçiş animasyonumuzu tamamlamak için. Zaten bildiğimiz gibi ikinci sayacımızı birkaç saniye hareket ettiriyoruz, resmimizi çapraz olarak sola doğru sürükleyip geçişi hareket ettirerek kapatıyoruz. Toplu iğne ikinci sayaç hakkında:

BÜYÜT

7- Çalışmamızı kaydediyoruz ve animasyonumuzu görüntülemek için boşluk tuşuna basıyoruz, yine de memnun kalmazsak mavi renk ile temsil edilen geçişler arasında geçiş yapabiliriz. Zaman çizelgesi ve dilersek geçiş tipini veya değerleri değiştiriyoruz.
İşimizden memnun olduğumuza göre, son adımı gerçekleştirmenin zamanı geldi ve bu, çalıştığımız amaç olan bir tarayıcıda görüntülenmek üzere görüntülemektir.
Çalışmamızı görmenin iki yolu vardır, ilki ve en basiti araçtan yapılabilir, bunun için sekmeye gidiyoruz Arşiv ve biz seçiyoruz Tarayıcıda önizleme, animasyonu hemen varsayılan web tarayıcımızda açacak:

İkincisi, dosyaları alıp web uygulamamızla entegrasyon yapmak olan web geliştirme konusunda deneyimimiz yoksa biraz daha karmaşıktır. Bunu yaparken çok dikkatli olmak ve tarafından oluşturulan tüm dosyaları dahil etmek önemlidir. canlandır aksi halde animasyon çalışmayacaktır.
Bununla nasıl çalıştığını bilebileceğimiz bu öğreticiyi bitirdik Adobe Kenar Animasyonu, en önemli özelliklerini görerek ve tek satır koda ihtiyaç duymadan dakikalar içinde ilk animasyonumuzu yaparak, HTML5 Y JavaScript herhangi bir web uygulamasında uygulama için.