Adobe animasyon örnekleri. HTML editörlerinde reklamların hazırlanması. Hareket Animasyonu Bileşenleri

HTML reklam öğelerini ADFOX'a yerleştirilmek üzere hazırlamak için, bir banner'a yapılan tıklamayı işleyen ve banner'daki etkinlikleri sayan kod ekleme gereksinimlerine uymak önemlidir.
HTML kodunu geliştirirken bu talimatların yazıldığı düzenleyicileri kullanabilirsiniz:
- Adobe Animate CC;
- Google Web Tasarımcısı;
- Adobe Edge Animate CC.

HTML kodu gereksinimleri (kod geliştiricileri için)

Aşağıdaki gereksinimleri karşılayarak projenizi hazırlayın:

1. HTML kodunda izin verilen maksimum karakter sayısı 65.000'dir;
2. Banner'ın HTML kodunun içine JavaScript ve CSS'nin yerleştirilmesi tercih edilir;
Ortaya çıkan HTML kodu izin verilen maksimum karakter sayısını aşarsa, JavaScript ve CSS'yi ayrı dosyalara taşıyarak kodu azaltmanız gerekir:
- js ve css kodunu .js veya .css uzantılı ayrı dosyalara kaydedin;
3. Bir proje yalnızca .html uzantılı tek bir dosya içerebilir;
4. Bir projede izin verilen maksimum dosya sayısı 50'dir;
5. Projede izin verilen dosya türleri: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx , eot, fnt, fon, mf, ttc, woff;
6. Her dosyanın maksimum boyutu (arşiv içindeki dosyalar için de geçerlidir):
- 300Kb;
- Video dosyaları için 1 MB.
7. Dosya adları yalnızca İngilizce alfabenin rakamlarını veya harflerini ve alt çizgi karakterini içermelidir. Dosya adında Rusça harfler, boşluklar, tırnak işaretleri ve özel karakterlerin kullanılması yasaktır;
8. Değişken ve nesne adlarında Rusça harfleri kullanamazsınız.
Bunun tek istisnası banner üzerindeki metindir.
9. Bitmiş projenin formatı - zip Arşiv.

Adobe Animate CC

1. Editör hazırlığı.

AdobeAnimate CC'de yeni bir proje oluşturmak için "HTML5 Canvas" projesini seçin.

Bu şablonun kodu, düzenleyicide reklam öğeleri oluşturulurken temel olarak kullanılabilir.

Bir projeye şablon uygulamak için yayınlama ayarlarında "Gelişmiş Yayınlama Ayarları -> Yeniyi İçe Aktar...".

Şablon komut dosyası içeriyor adfox_HTML5.js

3. İşleme tıklayın

Reklam öğeniz döngüsel animasyon içeriyorsa düğmeler için kodları yalnızca bölümdeki kullanın.

3.1 Banner alanının tamamını tıklanabilir hale getirmek ve gidilecek tek bir bağlantıya sahip olmak için animasyonun ilk karesine aşağıdaki kodu ekleyin:

Canvas.style.cursor = "işaretçi"; canvas.addEventListener("tıklayın", function() ( window.callClick(); ));

3.2 Farklı bağlantılarla hareket etmek üzere birden fazla düğme eklemek için, üst animasyon katmanındaki banner'a tıklamak için bir ana düğme ekleyin, düğmeye bir Örnek Adı atayın ve düğmenin kodunu yazın:

This.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.hangi == 1 || t.button == 0) ( window.callClick(); ); )) ;

Tıklandığında kullanıcıyı reklamı yapılan sitenin farklı sayfalarına aktaracak başka düğmeler ekleyin.
Animasyonun belirli bölümlerinin üzerindeki üst katmana bazı düğmeler yerleştirin, düğmelere bir Örnek Adı verin ve her düğme için kod yazın:

This.btnLeft.addEventListener("tıklama", fonksiyon (e) ( var t = e.nativeEvent; if (t.hangi == 1 || t.button == 0) ( window.callClick(n); ); ) );

Nerede N

3.3

This.btnText.addEventListener("mouseover", function() ( window.callEvent(n); ));

Nerede fareyle üzerine gelme- javascript olayı, N- tetiklenmesi gereken 1'den 30'a kadar olay numarası.

Döngüsel animasyon oluşturmanın özellikleri

Animate CC düzenleyicisinde bir reklam öğesinde döngüsel animasyon uygulamak için:
- yayın ayarlarında "Döngü Zaman Çizelgesi" seçeneğini ayarlayın;
- bu bölümdeki düğme kodlarını kullanın ve paragraf 3.1 ve 3.2'deki normal düğme kodları kaldırılmalıdır.

Tek düğmeli ve döngüsel animasyonlu bir reklam öğesinin kodu:

Birkaç düğme varsa, ADFOX olaylarını çağırma koduna aşağıdaki kodu ekleyin:

If (typeof(this.stopCycle) == "unDefinition") ( this.btnMain.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.hangi == 1 || t.button) == 0) ( window.callClick(); ; )); this.btnLeft.addEventListener("click", function (e) ( var t = e.nativeEvent; if (t.hangi == 1 || t.button) == 0) ( window.callClick(n); )); this.stopCycle = true; )

Nerede N- tetiklenmesi gereken 1'den 30'a kadar olay numarası.

Şeffaf düğmeleri kullanma

Örneğin banner alanının tamamını veya yalnızca bir kısmını tıklanabilir hale getirmeniz gerekiyorsa şeffaf düğmeler kullanılabilir. Onlar için ve normal düğmeler için, bir geçiş veya olayı çağırmak için bir kod eklenmelidir.

Animate'teki düğmeler dört çerçeve içeren sembollerdir. Ekle > Zaman Çizelgesi > Anahtar Kare yoluyla içerik (grafik öğesi) ekleyerek ilk üçünü boş bırakıp yalnızca son "İsabet"i doldurabilirsiniz.

Hit çerçevesinin içeriği görünmez ancak düğmenin tıklamaya yanıt veren alanını tanımlar. Bu kareye Ekle > Zaman Çizelgesi > Ana Kare aracılığıyla içerik (grafik öğesi) ekleyebilirsiniz. Karelerin geri kalanı boş bırakılırsa veya görünmezse, sahnedeki düğme şeffaf mavi görünür ve bir sonraki İsabet karesindeki içerik gibi şekillendirilir. Projenizi yayınladığınızda şeffaf mavi alan görünmeyecektir.

Germe (kauçuk) afiş uygulamasının özelliği

Banner'ın sitede yer alacağı konteynerin genişliği boyunca uzanması için ayarları yapın: Dosya > Yayınlama Ayarları.
Sekmede Temel, seçme Duyarlı Yap> Genişlik, Yükseklik veya Her İkisi.
Seçme Görünür alanı dolduracak şekilde ölçeklendirinÇıktıyı tam ekran modunda görüntülemek için.
"Görünümde sığdır" seçeneğinin seçilmesi, aynı en boy oranını korurken içeriğin kullanılabilir tüm ekran alanını dolduracak şekilde ölçeklendirilmesini sağlar. Dolayısıyla, Maksimum genişliğe zaten ulaşılmışsa ekranın yüksekliği boyunca kalan alan doldurulmamış kalabilir veya bunun tersi de geçerlidir.

Program ayarlarını kullanarak istediğiniz sonucu elde edemiyorsanız komut dosyalarını kullanın.
İşte kod örnekleri:
En boy oranı ölçeklendirme kodunu indirin.
En boy oranı olmadan ölçeklendirme kodunu indirin.
Konumlandırma elemanlarına ilişkin kodu indirin; an0..an4 elemanların Örnek Adıdır.

Otomatik yanıp sönen banner oluşturmanın özellikleri

Genişletilmiş bir durumdan bir banner görüntülemek istiyorsanız, arayüze bir banner eklerken, "Her zaman otomatik genişlet" veya "Başlangıçta genişlet" parametresinde "evet" değerini belirtmeli ve kodu HTML reklamı:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = this.main_banner; window.global_exp_banner.visible = yanlış; if (window.isBannerExpanded) ( window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; ) else( window.global_exp_banner. görünür = yanlış; window.global_exp_banner.btnCollapse.visible = yanlış; window.global_main_banner.visible = doğru; window.global_main_banner.btnExpand.visible = doğru; ) window.global_main_banner.btnExpand.addEventListener("tıklayın", extendBanner.bind(this) )); window.global_exp_banner.btnCollapse.addEventListener("tıklayın", çöküşBanner.bind(this)); window.onBannerExpand = function() ( window.callEvent(2); window.global_exp_banner.visible = doğru; window.global_exp_banner.btnCollapse.visible = doğru; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false ; ) window.onBannerCollapse = function() ( window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = doğru;)

5. Projenin yayınlanması.

Önemli! Bir projeyi tarayıcıda önizlerken (Ctrl-Enter | Cmd-Enter) formun rastgele değerleri HTML'deki dosya adlarındaki bağlantılara eklenir ?1468231208369 . ADFOX'a yüklenirken bu tür değerlerin projeden çıkarılması gerekir.
Bunun için editördeki final projesinin şu adresten yayınlanması gerekir: Dosya > Yayınlama Ayarları > Yayınla (Shift-Ctrl-F12 | Shift-Cmd-F12).

Bir proje yayınlarken bir şablon seçin AdobeAnimate_Adfox_.html.

.zip

Google Web Tasarımcısı

Bu banner'ın kodu, düzenleyicide reklam öğeleri oluşturulurken temel olarak kullanılabilir.

Şablon komut dosyası içeriyor adfox_HTML5.js ve geçişlerin ve olay sayımının doğru çalışması için bir dizi parametre:
%referans%, %kullanıcı1%, %olayN%; burada N, 1'den 30'a kadar olay numarasıdır.

2. İşleme'yi tıklayın.

Tüm etkinlikler, Etkinlikler sekmesi aracılığıyla belirli animasyon öğelerine atanır.

Etkileşimli Alan bileşeni eylemleri başlatmak için kullanılır.
Ekle ve bir etkinlik seç "Etkileşimli Alan" - "Dokunma/Tıklama"(veya İngilizce versiyonunda "Dokunma Alanı > Dokunma/Tıklama").

"Özel Kod" sekmesinde tıklama işlevine bir çağrı belirtin.

2.1

CallClick();

2.2

CallClick(n);

Nerede N

2.3 Geçiş olmadan bir animasyondan bir etkinliği tetiklemeniz gerekiyorsa aşağıdaki kodu kullanın:

CallEvent(n);

Nerede N- çağrılması gereken olayın numarası.

Banner'ın panel üzerinde, sitede yer alacağı konteynerin genişliği boyunca uzanması için Özellikler Konum ve boyutlar için piksel yerine yüzdeleri belirtin.

Ayrıca seçenekleri kullanın "Kapsayıcıya Hizala" Ve "Kauçuk düzeni"üst araç çubuğunda.
Herhangi bir hizalama aracını kullanmadan önce Akışkan Mizanpajını etkinleştirirseniz ana kapsayıcıyı yeniden boyutlandırdığınızda tüm öğeler birbirine ve kabın boyutlarına göre hizalanır.
Bu durumda, öğelerin hem göreceli boyutlarını yüzde olarak hem de mutlak boyutları piksel cinsinden aynı anda kullanabilirsiniz.

4. Projenin yayınlanması.

ADFOX'a banner eklerken yöneticinin düğmelerin ve olay numaralarının yazışmalarını bilmesi gerekecektir. Her etkinlik için yönetici, gidilecek kendi bağlantısını yazacak ve bu bağlantı daha sonra bir değişken kullanılarak banner koduna aktarılacaktır.

Projeyi yayınladıktan sonra şu formatta arşivleyin: .zip. Reklam öğeniz ADFOX banner'ına yüklenmeye hazır.

Adobe Edge Animate CC

Başlamak için dosyayı uzantıyla çalıştırın .BİR arşivden.

2. İşleme'yi tıklayın.

Tüm etkinlikler "Kod" sekmesi aracılığıyla belirli animasyon öğelerine atanır.

Seçilen öğede gezinmek için bir etkinlik seçmelisiniz tıklamak ve tıklama işlevine bir çağrı yazın.

Düğmelere bir Örnek Adı atanmalıdır; örneğin: btnMain, btnRight.

2.1 Bir atlama düğmesi kullanıyorsanız:

CallClick();

2.2 Birden fazla geçiş düğmesi varsa:

CallClick(n);

Nerede N- çağrılması gereken olayın numarası.

2.3 Geçiş olmadan bir animasyondan bir etkinliği tetiklemeniz gerekiyorsa aşağıdaki kodu kullanın:

CallEvent(n);

Nerede N- çağrılması gereken olayın numarası.

Germe (kauçuk) afiş uygulamasının özelliği.

Banner'ın sitede yer alacağı konteynerin genişliği boyunca uzanabilmesi için Özellikler panelindeki editörde banner hazırlarken konum ve boyut için piksel yerine yüzde belirtmeniz gerekir.

Konum ve Boyut panelindeki öğeler için Ölçek Boyutu ve Ölçek Konumu düğmeleri de vardır

4. Projenin yayınlanması.

Proje aşağıdaki ayarlarla yayınlanmalıdır:

Projeyi yayınladıktan sonra şu formatta arşivleyin: .zip. Reklam öğeniz ADFOX banner'ına yüklenmeye hazır.

GÜNCELLEME 6 Aralık 2015:
Flash Runtime ve Adobe AIR ürün müdürü şunları söyledi: planlarım yok Flash Runtime ve AIR üzerinde çalışmayı durdurmak ve içerik oluşturma ürününü yeniden adlandırma Mümkün değil Flash Player'ın kaderiyle ilgili değil ve ilgili ekosistem.

Anlamını büyük ölçüde değiştiren bir nüans dışında her şey yoluna girecek - teknik cehalet ve genel kopyala-yapıştır. Yayınlar, orijinalinde olmayan giderek daha fazla "gerçek" ekleyerek birbirini yeniden basıyor. Tek kelimeyle - hasarlı bir telefon.

Orijinal makale http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html, Adobe'nin Flash Professional'ı Animate CC olarak yeniden adlandırdığını bildiriyor. Ayrıca müşterilerin daha fazla desteklenen platform vb. istediklerini de bildiriyorlar.

Ve pek çok kişinin Flash ile Flash Professional arasındaki farkı görememesine şaşırmadım. Haber sitelerinde, zincirin daha aşağılarına bağlantı veren diğer kaynaklara atıfta bulunularak çeşitli espriler ortaya çıkmaya başladı. Ve her zaman orijinal değil.

Günümüzde Flash kelimesi tarayıcılar için bir eklenti olarak algılanmaktadır. Teknik olarak Flash Player'dır. Ancak bir içerik oluşturma aracı var - Flash Professional. Microsoft, Word'ün adını TextMachine olarak değiştirseydi, insanlar "Microsoft, Word'ü geliştirmeyi bıraktı mı?" diye bağırır mıydı? İçerik oluşturmanın destekleneceği ve verilerin düzenlenebileceği siyah beyaz yazılmış olmasına rağmen mi?

Kendi örneklerimden canlı bir tablo ortaya koyabilirim. Yerel müşteriler bana iOS için bir sunum için animasyon oluşturmak amacıyla ne kullanacağımızı soruyor. Bunu Flash Professional'da söylemekten gurur duyuyorum. Ve müşteri bir sersemlik içindedir. Bir süre sonra şöyle diyor:

"Ama merkezde flaşın öldüğünü ve tablette çalışmadığını yazıyorlar"

Ve sonra bir sersemliğe düşüyorum. Müşterilerin ve flash hakkındaki makalelerin yazarlarının teknik bilgisizliği, insanların istenen sonuçtan uzaklaşmasına neden oluyor. Neyse ki müşteri ikna oldu ve sonuçtan memnun kaldı.

Orijinal makaleye dönelim. Html5'in olgunlaştığını ve Flash'ın çoğu özelliğini zaten desteklediğini bildiriyorlar. Aşağıya indiğimizde, Adobe'nin Flash'ı birinci sınıf içerik (web oyunları ve birinci sınıf video) sunmanın temel aracı olarak gördüğünü görüyoruz. Ancak Flash desteğini durdurduklarına dair bir haber yok.

Üstelik... Flash Player'ın uyumluluğunu ve güvenliğini artırmak için Microsoft ve Google ile ortaklaşa çalıştıklarını açıkça belirtiyorlar. Flash Player'daki oyunların güvenilirliğini ve güvenliğini artırmak için Facebook ile yakın işbirliği içinde çalıştıklarını da eklemeyi unutmadılar. Peki Flash'ı terk ettiklerine dair herhangi bir haber nerede var?

Genel olarak Flash'ın gelişiminden bahsedecek olursak evet, uzun zaman önce durdu. Yalnızca küçük (ancak önemli) iyileştirmeler yapıldı ve güvenlik hataları düzeltildi. Ama gerçekten o kadar kötü mü? Benim bakış açıma göre Flash ihtiyacı olan her şeye sahip. Elbette daha fazlasını isterim. Ama neden?

Daha fazlası için Bağımsız oyun formatını tercih etmelisiniz. Ve Adobe AIR var (Flash'ı düşünürsek). Adobe AIR desteği kullanımdan kaldırılmadı. 2016 yılı planları hakkında bilgim var. Peki tarayıcı flaşı ölecek mi? Kesinlikle. Ama kesinlikle yarın değil.

Flash'ın pili tükettiğini klişe bir şekilde söylemekten hoşlananlar için bana Canvas'ın pili nasıl şarj ettiğini gösterin.

Adobe Edge Animate projesinin artık aktif olarak geliştirilmeyeceğini de belirtmekte fayda var. Ama çünkü Flash Professional'ın geliştirilmesine yakınım - Sizi temin ederim ki Edge Animate hiç geliştirilmeyecek (kritik hatalar hariç). Bu karar Adobe Flash Professional (gelecekteki Animate CC) lehine verildi.

Sürekli gelişmek, bir şeyler öğrenmek ve sürekli yeni bir şeyler öğrenmek isteyen insanlar için bu kategoriyi özel olarak hazırladık. Kesinlikle keyif alacağınız, yalnızca eğitici, faydalı içerikler içerir. Çok sayıda video belki de okulda, kolejde veya üniversitede bize verilen eğitime bile rakip olabilir. Eğitim videolarının en büyük yanı, en güncel ve en alakalı bilgileri vermeye çalışmalarıdır. Teknoloji çağında çevremizdeki dünya sürekli değişiyor ve basılı eğitim yayınlarının en son bilgileri sağlayacak zamanı yok.

Videolar arasında okul öncesi çocuklara yönelik eğitici videolar da bulabilirsiniz. Orada çocuğunuza harfler, sayılar, sayma, okuma vb. öğretilecektir. Katılıyorum, çizgi filmlere çok iyi bir alternatif. İlkokul öğrencileri için ayrıca İngilizce dil eğitimi bulabilir ve okul derslerini çalışma konusunda yardım alabilirsiniz. Daha büyük öğrenciler için, testlere, sınavlara hazırlanmanıza veya yalnızca belirli bir konudaki bilginizi derinleştirmenize yardımcı olacak eğitim videoları oluşturulmuştur. Edinilen bilgilerin zihinsel potansiyelleri üzerinde niteliksel bir etkisi olabilir ve sizi mükemmel notlarla memnun edebilir.

Zaten okuldan mezun olmuş, üniversitede okuyan veya okumayan gençler için birçok büyüleyici eğitici video var. Öğrenim gördükleri mesleğe ilişkin bilgilerini derinleştirmelerine yardımcı olabilirler. Veya programcı, web tasarımcısı, SEO optimize edici vb. gibi bir meslek edinin. Bu meslek henüz üniversitelerde öğretilmiyor, bu nedenle bu ileri ve ilgili alanda yalnızca kendi kendine eğitim yoluyla uzman olabilirsiniz, biz de en yararlı videoları toplayarak yardımcı olmaya çalışıyoruz.

Yetişkinler için bu konu da geçerlidir, çünkü çoğu zaman bir meslekte yıllarca çalıştıktan sonra bunun sizin işiniz olmadığını anlarsınız ve kendinize daha uygun ve aynı zamanda karlı bir şey öğrenmek istersiniz. Ayrıca bu kategorideki insanlar arasında genellikle kişisel gelişim, zamandan ve paradan tasarruf etme, hayatlarını optimize etme, çok daha iyi ve daha mutlu bir hayat yaşamanın yollarını bulma gibi konularda videolar bulunur. Yetişkinler için bile kendi işinizi kurma ve geliştirme konusu çok uygundur.

Ayrıca eğitici videolar arasında hemen hemen her yaşa uygun, genel odaklı videolar da var; bunlarda yaşamın nasıl başladığı, hangi evrim teorilerinin var olduğu, tarihten gerçekler vb. hakkında bilgi edinebilirsiniz. Bir kişinin ufkunu mükemmel bir şekilde genişleterek onu çok daha bilgili ve hoş bir entelektüel muhatap haline getirirler. Bu tür eğitici videolar gerçekten de istisnasız herkesin izlemesi açısından faydalıdır çünkü bilgi güçtür. Keyifli ve faydalı bir izleme dileriz!

Günümüzde “dalgada” denilen şey olmak basitçe gerekli. Bu sadece haberleri değil aynı zamanda kişinin kendi zihninin gelişimini de ifade eder. Gelişmek, dünyayı keşfetmek, toplumda talep görmek ve ilgi çekici olmak istiyorsanız bu bölüm tam size göre.

Yeni bir dosya oluşturalım, 800x600 boyutunda yapalım ve içerisine bazı dosyaları yani bu birkaç resim ve “ormanın gürültüsü mp3” yani ses aktaralım. Onu buraya taşıyorum. Sonuç olarak elimizde bu resim var - bu bir orman, adı "bg", "oynat" ve "duraklat", bunlar düğmeler. Şimdi onları aşağıya taşıyacağım, hadi taşıyalım, bunun gibi bir şey - en basit seçenek.

Şimdi animasyonu başlatacağım, cntr+enter'a basacağım, sadece bir orman ve sadece iki düğme var, hiçbir şey çalışmıyor. Bir sesin benim için otomatik olarak çalınmasını istersem buna "orman gürültüsü" denir, o zaman bu katmanı seçip "otomatik oynat"ı seçmem gerekir, şimdi cntr+enter tuşlarına bastığımda ses çalacaktır. İnanılmaz.

Adobe Edge Animate'te bir videoya tıklanabilir bağlantı nasıl eklenir?

Sadece bir düğme çizersek ve bir tür arka plan varsa, o zaman üzerine tıklarsak hiçbir yerde geçiş olmayacaktır. Eklemek etkileşimli bağlantı Bu butonu seçmemiz gerekiyor, sağ tık aç aksiyon, faul butonu yani ben buna derim ve tık tık yani tıklandığında ne yapılacak. Ve burada Open you are raol'u seçmemiz gerekiyor.

Bu videoda size bunu nasıl yapacağınızı göstereceğim, karmaşık değil ancak doğru kodu nereye kopyalamanız gerektiğini ve nereye yapıştırmanız gerektiğini doğru bir şekilde anlamanız gerekiyor.

Diyelim ki sende var adobe edge animate'te yapılmış video, üzerine tıkladığınızda istenilen açılış sayfası açılır, edge animate formatındadır ve kaynak kodu ve Java scriptlerinin bulunduğu klasöre kaydedilir. Herhangi bir metin düzenleyicide açın, herhangi bir test düzenleyiciyi kullanabilirsiniz, örneğin: not defteri vb.

Adobe Edge Animate'te bir animasyon nasıl döngüye alınır, yani sonuna kadar oynatıldığında baştan başlayıp sonsuza kadar devam edecek şekilde nasıl yapılır.

Burada anahtar kareleri kopyalayabilirsiniz, yani bir kare seçiyorum, cntr+c'ye basıyorum, istenilen alana tıklıyorum, cntr+v'ye basıyorum, animasyon döngüye girecek, yani döngüye girmeyecek, ancak bu durumda, başlangıç noktasından başlangıç noktasına geri dönülür. Bu videoyu çalıştırıp cntr+enter tuşlarına bastığımda animasyonun sadece 1 saniye sürdüğünü, bir tarafa gidip diğer tarafa döndüğünü görüyoruz.

Diyelim ki Adobe edge animate'te yapılmış bir banner'ınız var, üzerine tıkladığınızda istediğiniz açılış sayfası açılıyor, edge animate formatında ve kaynak kodu ve Java scriptlerinin bulunduğu bir klasöre kaydedilmiş. Herhangi bir metin düzenleyicide açın, herhangi bir test düzenleyiciyi kullanabilirsiniz, örneğin: not defteri vb.

Daha sonra bu banner'ı siteye eklemek istiyorum. Ne yapılmalı? İndeks dosyasını indirip bir metin düzenleyicide açıp adobe edge kodunu kopyalayıp en sonunda kodu buraya “head” den önce, ardından bannerımızı ekleyeceğimiz yerin başlığının önüne eklemeniz gerekiyor. div. Daha hassas uygulama için size yardımcı olacak talimatlar vardır: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. Daha sonra kaydedip FTP servisine geçiyoruz, filezilla kullanıyorum, sitenizin depolama yerini buluyorum ve index klasörünü sunucuda bulunan dosyanıza, mevcut dosyaların yerine kopyalıyorum. Daha sonra tüm Java scriptlerini indirip siteyi güncelliyoruz. Her şey hazır - animasyon çalışıyor ve açılış sayfasının bulunduğu sekme de açılıyor.

Bu tür derslerle ilgileniyorsanız kanalıma abone olun, çünkü... yakın gelecekte birçok yeni video olacak - http://www.youtube.com/user/danilfimushkin?sub_confirmation=1

00:32 – diyelim ki Adobe edge animate'te hazırlanmış bir bannerınız var

01:30 – siteye banner ekleyin

02:09 – “head” etiketinin önüne kod ekleyin

02:50 – siteye banner ekleme talimatları

03:31 – dosyaları sunucuya yükleyin

05:29 – siteyi güncelliyoruz ve her şey hazır!

Katılın ve sorular sorun:

Üç ücretsiz Muse şablonunu indirin: http://site/free-landing.html

http://vk.com/adobeedgeanimate

VKontakte'deyim: http://vk.com/danilfimushkin

Web seminerinde vektör illüstrasyonundan nasıl tam teşekküllü bir animasyonlu banner yapabileceğinizi anlattım ve gösterdim.

00:17 – Edge Animate'te vektör illüstrasyonunu canlandırmaya başlıyoruz
14:06 – karakterin patilerinin hareketini yaratın
16:54 – iç içe geçmiş sembolün avantajları
17:48 – iç içe geçmiş sembol nedir
18:24 – döngüsel bir animasyon yazma
19:42 – döngüsel animasyon hazır
23:40 – göz kırpmaları yaratın
26:54 – kaydederken dosya adlarını belirleyin
27:57 – “açılır” metnin animasyonu
28:39 – bir hareket eğrisi ekleme – animasyon eksenini değiştirme
30:03 – Animasyonun ara özeti, karlı bir manzara oluşturulması ve bir kar tanesinin canlandırılması
33:39 – Edge Animate incelemesi
34:52 – ev ödevi
35:25 – aktif bağlantı nasıl eklenir
39:09 – birkaç düğme oluşturma ve bağlantı ekleme

Katılın ve soru sorun: http://vk.com/adobeedgeanimate