Başlarken

Ara
Flash Professional Kullanıcı Kılavuzu
Şunun için geçerlidir: Flash Professional

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

WebGL Çalışma Zamanı API'sini kullanarak etkileşimli animasyon oluşturma   

Aşağıda, animasyonunuza etkileşim eklemek için Flash WebGL Çalışma Zamanı API'sini kullanmaya başlamanıza yardımcı olacak adım adım sunulan bir eğitim bulunmaktadır. Bu eğitimde basit bir FLA dosyası ile başlayıp API'yi kullanarak sahne alanındaki MovieClip örnekleri eklemekle başlarsınız.

  1. night_webgl.fla dosyasını indirin ve Adobe Flash Professional CC 2014'te açın. Dosyada sahne alanındaki bir gece göğünün bitmap görüntüsü bulunduğunu görebilirsiniz.

  2. CTRL+Enter (Windows'ta) veya Cmd+Enter (Mac'te) tuşlarına basarak filmi test edin. Bir tarayıcı penceresi bitmap'i görüntüler.

  3. .fla dosyasını içeren klasöre gidin. Yayınlama işleminden sonra şu dosya ve klasörleri bulabilirsiniz:

    • night_webgl.html dosyası 
    • WebGL çalışma zamanı JavaScript kütüphanesini içeren ‘libs’ klasörü
    • Animasyonun oluşturulması için gerekli varlıkları içeren ‘assets’ klasörü

  4. Flash Professional'a geri dönün. Kütüphane panelinde, niteliği değiştirilmiş saydamlığa sahip bir yıldızın animasyonunu içeren “Star” MovieClip'ini görebilirsiniz.  

  5. Kütüphane panelinde, Star MovieClip'in yanındaki ‘bağlantı’ sütununu çift tıklatın ve “star” yazın. Bu adım, API kullanılarak çalışma zamanında oluşturulacak MovieClip örneklerini kullanarak bağlantı adını belirtir. Ayrıca, sahne alanında kullanılmamış olsa bile bu MovieClip'in yayınlanmasını sağlar.

  6. HTML dosyasını açın ve etiketini içeren satırdan sonra bu üç satırı ekleyin. Bu işlem HTML'e bir düğme ekler ve oluşturulan yıldız sayısını görüntülemek için bir yer tutucu oluşturur.





  7. handleComplete() işlevinin ardından şu kodu ekleyin:

    var count = 0; function onAdd() { var sgf = player.getScenegraphFactory(); var star = sgf.createMovieClipInstance("star"); player.getStage().addChildAt(star, 0); var x = Math.random() * 540; var y = Math.random() * 180; var s = Math.random(); var mat = new flwebgl.geom.Matrix([s, 0, 0, s, x, y]); star.setLocalTransform(mat); count++; document.getElementById("count").innerHTML = count + (count > 1 ? " stars" : " star"); }

    Burada birkaç işlem gerçekleşir:

    • Değişken ‘player’ öğesi, bir WebGL oynatıcısı örneğine başvurur ve API'nin dış görünüşüdür.
    • SceneGraphFactory öğesine ilişkin bir başvuru elde edilir. MovieClip örnekleri oluşturmak için kullanılır.
    • createMovieClipInstance() işlevi kullanılarak ve Flash'ta belirtilen bağlantı adı iletilerek MovieClip örnekleri oluşturulur. 
    • Oynatıcıdan sahne alanına ilişkin bir başvuru (kök zaman çizelgesi) elde edilir.
    • Yeni MovieClip örneği, addChildAt() işlevi kullanılarak sahne alanının bir alt öğesi olarak eklenir. Bu işleve 0 iletildiğinde alt öğe, sahne alanının diğer tüm alt öğelerinin üstüne eklenir (bitmap'in üstüne).
    • Matrix sınıfı kullanılarak yıldızın konumu ve boyutu ayarlanır. 

  8. Yaptığınız değişiklikleri HTML dosyasına kaydedin.

  9. Flash'ın, yayınlama sırasında HTML'de yapılan değişikliklerin üzerine yazmasını önlemek için Yayınlama Ayarları iletişim kutusundaki 'HTML'in Üzerine Yaz' onay kutusunu temizleyin.

  10. Filmi tekrar test edin. Bu esnada tarayıcınız arka plan görüntüsünün altında Ekle düğmesini görüntüler. Sahne alanına yıldızlar eklemek için Ekle seçeneğini birden fazla kez tıklatın.

Not:

Bitmiş örneği buradan indirebilirsiniz.

İndir

Dosyayı alın
night_webgl.zip
night_webgl

Not:

  • WebGL animasyonunu HTML içindeki bir tuvalde oluşturduğunuzdan, çevresindeki HTML'i rahatlıkla değiştirebilirsiniz. Bu örnekte, oluşturulan yıldızların sayısını koruruz.
  • Yukarıdaki örnek, etkileşimli animasyonlar ve oyunlar oluşturmaya başlamanız için sağlanmıştır. Sahne alanınızdaki öğeleri kontrol etmenin diğer yollarıyla ilgili daha fazla bilgi almak için WebGL çalışma zamanı API'si belgeleri sayfasını ziyaret edin.
  • Herhangi bir içerik yayınladığınızda Flash çalışmayı GPU uyumlu bir formata dönüştürür. Bilgisayar işlemleri açısından zorlayıcı olduğundan, bu görevin tamamlanması birkaç dakika alır. En iyi uygulama olarak, çalışmanızdaki satır ve eğri sayısını en aza indirin. Değiştir> Şekil menüsünün altındaki seçenekleri kullanarak çalışmayı optimize etmek, düzgünleştirmek ve düzeltmek çalışmanızı kolaylaştırmaya yardımcı olur. Bu, oluşturma performansının yükseltilmesine ve yayınlama süresinin azaltılmasına yardımcı olur.