Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Flash ve ActionScript programlama dili kullanarak XML tabanlı scroll menü oluşturma eğitimidir.
- Video, XML tabanlı scroll menü projesinin tüm aşamalarını adım adım göstermektedir. İçerik, XML dosyası oluşturma, Flash'ta grafik hazırlama, XML yükleme sınıfı oluşturma, konteyner oluşturma, item oluşturma, active item işlemleri ve glow efekti uygulama gibi konuları kapsamaktadır. Eğitim, bir aydın ve altındaki silik aydınlar üzerinden çalışan bir menü sistemi oluşturma sürecini detaylı olarak anlatmaktadır.
- Eğitimde ayrıca Photoshop'tan import edilen PSD dosyalarının Flash'a aktarılması, dinamik text alanlarının oluşturulması, registration noktasının önemi, resimlerin boyutlandırılması, TwinMax klasörlerinin kullanımı ve item'ların ekrandaki konumlandırılması gibi teknik detaylar da ele alınmaktadır. Video, kod yazma ve hata düzeltme süreçlerini içeren pratik bir eğitim sunmaktadır.
- 00:06XML Tabanlı Scroll Menü Tanıtımı
- Bu dersde XML tabanlı scroll menü oluşturulacak.
- Uygulamada ekranda ortada bir aktif aydın bulunacak, alttaki silik aydınlar üzerine tıklandığında aktif duruma gelecek.
- Aktif olan aydının alt bölümünde glow efekti olacak ve aktif olmayan aydınlar küçülüp opaklık değeri düşecek.
- 01:22Uygulama İçin Kullanılacak Teknikler
- Dışarıdan XML yüklemek, Flash içerisinde kullanmak ve animasyon oluşturmak gerekecek.
- Tween efektini kullanmak ve kliplerin koordinatlarını değiştirmek yapılacak.
- Dışarıdan bulunan TweenLite veya TweenMax gibi klaslar kullanılacak.
- 02:20Dosya Hazırlıkları
- Flash içerisinde boş bir sayfa oluşturulup "xml scroll" olarak kaydedildi.
- Klasör sistemi oluşturuldu: "src" klasörü kodların olacağı yer, "img" klasörü 80x80 piksel boyutunda 10 adet resim içerecek.
- Glow efektini uygulamak için TweenMax klası "src" klasörüne eklendi.
- 04:14XML Dosyası Oluşturma
- Flash Develop editörüne yeni bir sayfa açılıp "source.xml" olarak kaydedildi.
- XML dosyasında en üst seviyede "root" ve "note" isimli yapılar oluşturuldu.
- Her bir "note" içinde "pad" (resim adresi), "title" (başlık) ve "text" (açıklama) isimli etiketler bulundu.
- 07:05XML İçeriği Doldurma
- "rootpad" olarak "img/" belirtildi ve dosyaların isimleri direkt yazıldı.
- 10 adet "note" oluşturuldu ve her birine farklı resim, başlık ve açıklama eklendi.
- XML dosyası oluşturulduktan sonra Flash içerisine yüklenerek gerekli yerlere yerleştirilecek.
- 09:57Flash Hazırlıkları
- Photoshop dosyasından Flash için gerekli grafikler seçildi.
- Background ve silik item'lar kapatıldı, sadece aktif item ve ok işaretleri aktif bırakıldı.
- Item'ın içerisinde ekranda görülen grafikler olacak şekilde Flash'ta oluşturulması gerekiyor.
- 10:52Flash Projesinde XML Verileri İçin Hazırlık
- Dosya kaydedildikten sonra Flash'a geçiş yapılıyor ve kilitli layer'a grafik koymak istemediğimiz için yeni bir layer açılıyor.
- PSD dosyası import edilerek bitmap data'sına dönüştürülüyor ve PNG formatında saklanıyor.
- Grafiklerin registration noktasının orta seçilmemesi durumunda scale işlemi sırasında grafiğin doğru şekilde küçülmediği, bu nedenle registration noktasının orta seçildiği belirtiliyor.
- 12:53Flash İçerisinde XML Verileri İçin Hazırlık
- Dosyalar Flash'a alındıktan sonra layer'lar açılıyor ve "İnsan Aydın" adlı bir movie clip seçilerek işlemlere devam ediliyor.
- Statik text alanları dinamik text'e dönüştürülerek font özellikleri ayarlanıyor ve "details" ismi veriliyor.
- Diğer text alanları da benzer şekilde dinamik text'e dönüştürülüyor, font özellikleri ayarlanıyor ve "title" ismi veriliyor.
- 16:25Resim Alanı Hazırlığı
- Resim alanına bakılıyor ve gereksiz layer'lar iptal ediliyor.
- Yerleştireceğimiz resim için Layer 5 seçiliyor ve ölçüsü 85x83 olarak belirleniyor.
- Resim için "img" ismi veriliyor ve ana ekrana çıkarak item için de "img" ismi veriliyor.
- 18:01Final Hazırlıklar ve XML Hazırlığı
- Item'ın koordinatları ayarlanıyor ve y koordinatı 240 olarak belirleniyor.
- Library'de item'ın class olarak export edilmesi gerekiyor, bu nedenle properties'den export for actionscript işaretlenerek "item" ismi veriliyor.
- Bir sonraki derste XML dosyası yüklenerek ve document class'ı hazırlanarak işlemlere devam edileceği belirtiliyor.
- 21:26Class Oluşturma ve XML Yükleme
- Move klibi extend edilerek tanımlayıcı fonksiyon oluşturuluyor, class ismiyle aynı olmak zorunda.
- XML yüklemek için ayrı bir class oluşturulması mantıklı, böylece farklı projelerde de kullanılabilir.
- XML yükleme class'ı, adres alarak XML'i yükleyecek ve yükleme işlemi bittiğinde complete eventini tetikleyecek.
- 22:49XML Load Class Oluşturma
- XML Load Class adında yeni bir dosya oluşturuluyor ve package adresi belirleniyor.
- Tanımlayıcı fonksiyonunun olmadığı class'lar Flash tarafından boş bir tanımlayıcı fonksiyonla doldurulur.
- Public function startLoad oluşturuluyor, dışarıdan adres bilgisi alarak XML yükleme işlemini başlatacak.
- 24:45Global Değişkenler ve XML Yükleme İşlemi
- XML ve rootpad gibi global değişkenler public olarak tanımlanıyor, böylece class'ın dışından da erişilebiliyor.
- URLRequest ve URLLoader kullanılarak XML yükleme işlemi başlatılıyor.
- Flash, text tabanlı dosyaları tamamen yükledikten sonra kullanılabilir hale getirir, bu nedenle complete eventini beklemek gerekiyor.
- 28:32XML Verilerine Erişim ve Event Yönetimi
- XML complete fonksiyonu private olarak tanımlanıyor ve XML verileri global değişkenlere atanıyor.
- XML verilerine erişim için XML nesnesinin node ve attribute yapısından yararlanılıyor.
- XML yükleme işlemi bittiğinde dispatchEvent kullanılarak complete eventi fırlatılıyor, böylece document class'ında bu eventi yakalayarak yükleme işleminin tamamlandığını anlayabiliyoruz.
- 35:07Konteyner Oluşturma
- Birden fazla item'ı barındıracak bir "konteyner" olarak adlandırılan boş bir MovieClip oluşturulacak.
- Konteyner, içindeki item'ları bir arada tutarak, birden fazla item'ı döngüyle alt alta veya yan yana sıralarken hareket ettirmeyi pratik hale getirir.
- Konteyner, ekranda istenilen yere yerleştirildiğinde içindeki item'lar da o bölüme yerleşmiş olacak.
- 36:02Konteyner Özellikleri
- Konteyner, null olan bir MovieClip olarak oluşturulacak ve init değerleri (x ve y koordinatları) belirlenecek.
- Konteynerin yüksekliği ve genişliği, içindeki item'ların toplam alanı kadar olacak, bu nedenle bu değerler belirtilmeyecek.
- Konteyner, ekrandaki itemları ok işaretinin hizasına getirmek için y koordinatı değiştirilecek.
- 37:47Değişken Tanımlamaları
- Konteynerın ekrandaki konumunu belirlemek için contX ve contY değişkenleri tanımlanacak.
- Eski haline dönecek item'ı tutmak için oldItem değişkeni oluşturulacak.
- Aktif olmayan item'ların boyutunu ve alfa değerini belirlemek için smallScale ve smallAlfa değişkenleri tanımlanacak.
- 41:47Animasyon ve Import İşlemleri
- Gerekli class'lar import edilecek: GS'nin easing'i, Flash'ın event içerisindeki MouseEvent ve TweenEvent.
- Document class'ı tanımlanacak ve test edilecek.
- XML dosyası yüklendikten sonra tetiklenecek event için dispatchEvent kullanmak gerekiyor.
- 47:00Menü Oluşturma
- XML dosyası yüklendikten sonra menü oluşturulacak.
- XML içerisindeki not sayısı kadar döngüye sokulacak ve her döngüde kütüphanedeki yeni bir item konteynerin içerisine yerleştirilecek.
- Önce konteyner ayarlanıp ekrana add child ile yerleştirilecek, sonra item'lar bu konteynerin içerisine yerleştirilecek.
- 47:55Flash'de XML Verisi ile Item Oluşturma
- Container'ın x ve y koordinatları add child'dan önce veya sonra ayarlanabilir.
- XML'in içerisindeki not sayısı kadar bir döngü yapılıp, her döngüde kütüphanede olan bir item örneği oluşturulacak.
- Her item örneğindeki title text, details text ve img içerisindeki resim yüklenip işlemeye devam edilecek.
- 50:23Item Oluşturma ve Özelliklerinin Ayarlanması
- Kütüphaneden bir item örneği oluşturulup, item'ın id'si değiştiriliyor.
- Item'ın alfa değeri ve scale özellikleri (scalex, scaley) ayarlanıyor.
- Item'ın x ve y koordinatları belirleniyor ve konteyner içerisine ekleniyor.
- 53:18XML Verilerini Item'a Aktarma
- Item'ın içerisinde bulunan title text'e XML'deki ilgili node'un title'ı yerleştiriliyor.
- Item'ın details text'e ilgili node'un details'ı yerleştiriliyor.
- Dışarıdan okunacak resim için loader nesnesi oluşturulup, resim yükleniyor.
- 54:26Item'ın Aktif Hale Getirilmesi
- Item'a click event eklenerek, tıklanıldığında aktif olması sağlanıyor.
- Item click isimli bir fonksiyon çalıştırılarak item'ın ekranın orta bölgesine gelmesi sağlanıyor.
- Item'lar ekrana yerleşmiş oluyor ve test ediliyor.
- 55:35Item Click Fonksiyonu Oluşturma
- Item click isimli bir fonksiyon oluşturuluyor ve mouse event ile çalıştırılıyor.
- XML load ve item click fonksiyonu için hatalar düzeltiliyor.
- Item'ların x koordinatları ayarlanarak istenilen yere yerleşmesi sağlanıyor.
- 58:58Item Click İşlemlerinin Tamamlanması
- Item click fonksiyonunda, hangi item click yapıldığını belirlemek için evt.currentTarget kullanılıyor.
- Active item isimli bir nesne örneği oluşturulup, click yapılan item nesnesi aktif hale getiriliyor.
- Evt.currentTarget'ın bir item nesnesi olduğu belirtilerek veri tipi kontrolü yapılıyor.
- 1:01:02Active Item Fonksiyonu Oluşturma
- Active item'ı ekrana getirecek bir fonksiyon oluşturuluyor ve aktif item fonksiyon isimlerindeki tüm karakterler büyük harfle yazılıyor.
- Oluşturulan fonksiyona aktif item gönderilecek ve ekranda olan item iptal edilerek, twin scale ve glow işlemlerini yaparak devam edilecek.
- Fonksiyon herhangi bir parametre döndürmeyecek ve item ismiyle bir item örneği kabul edecek.
- 1:02:09Item İsminden İndeks Bulma
- Item'ın y koordinatları için ekranın orta noktasına gelebilmesi için item'in kaçıncı sırada olduğunu bilmek gerekiyor.
- Item isimleri "item_5" gibi formatta olduğundan, isimden indeksi bulmak için ayrıştırma işlemi yapılacak.
- Item ismini string değişkenine atayıp, alt çizgiye göre parçalama işlemi yaparak dizinin birinci elemanından indeksi elde edilecek.
- 1:04:56Twin Animasyonları
- Aktif item için alpha, scale x ve scale y değerleri değiştirilerek normal boyuta dönüştürülüyor.
- Alpha değeri 0'dan 1'e (yüzde yüz) çıkacak şekilde 2 saniyede strong ease out animasyonu uygulanıyor.
- Scale x ve scale y değerleri sırasıyla 0.8'den 1'e çıkacak şekilde 1 saniyede strong ease out animasyonu uygulanıyor.
- 1:08:25Konteyner Hareketi
- Item'ı ekranın orta noktasına taşımak için aslında konteyner'ın (item'ların bulunduğu klib) y koordinatı değiştirilecek.
- Konteynerın başlangıç y değeri ile item'ın y değeri arasındaki fark hesaplanacak ve bu fark konteynera twin animasyonu olarak uygulanacak.
- Konteynerın y koordinatı, başlangıç değeri olarak konteynerın y koordinatını alıp, movey'de saklanan değere gitmesi için time kadar süreyle animasyon uygulanacak.
- 1:12:55Old Item İşlemi
- Daha önce ekrana clicklenmiş olan item (old item) saklanmalı ve yeni item ekrana gelecek.
- Old item'a gelen item atanmalı ve bu atama işlemi fonksiyonun sonunda yapılmalı.
- Old item varsa, onun scale'leri ve alfa değerleri küçültülmeli, bunun için old item null olup olmadığını kontrol etmek gerekiyor.
- 1:14:35Eski Item'ın Boyutunu ve Alfa Değerini Düzenleme
- Nal olmadığı durumlarda çalışması için eski item'in scale'i küçülüp alfa değeri düşürülecek.
- Eski item'in ekranda normal boyutlara dönüştürülmesi için yukarıdaki işlemlerin kopyası kullanılacak.
- İşlemlerde "old item" yerine "item" kullanılmalı ve değerler small alpha ve small scale'e gitmelidir.
- 1:16:54Click İşlemi ve En Üst Seviye Ayarlama
- Click işlemi için setChildIndex kullanılarak item en üst seviyeye alınabilir.
- Ekranda bulunan eleman sayısından bir eksiği kadar seviye belirlenmelidir.
- Konteyner içerisinde setChildIndex işlemi yapılmalı ve active item belirlenmelidir.
- 1:18:48Glow Efektinin Uygulanması
- Twin-max class kullanılarak glow efekti uygulanacaktır.
- Glow efektinin parametreleri: item, zaman dilimi (3), glow filter (siyah renk, alfa 1, blur x ve y 15, quality 2, ease "quint").
- Glow efektini iptal etmek için remove true parametresi eklenmelidir.
- 1:24:41Uygulamanın Son Hali
- Uygulama son halini almıştır ve istenen değerler global değişkenlerden değiştirilebilir.
- Item arasındaki boşluklar, başlangıç ve bitiş animasyonlarının zamanları ayarlanabilir.
- Flash player içinde çalıştırıldığında bazı sorunlar olabilir, ancak dışarıdan izlendiğinde sorunlar ortadan kalkar.