Flash ile CSS ve HTML

Flash'ın daha kolay güncellenerek tüm mecralarda yayılmasını planlayan Macromedia, XML'e verdiği desteği daha da arttırmasının yanında Flash içerisine CSS ve HTML dosyalarının dahil edilmesini sağlayarak bu konudaki eksikliğini de önemli ölçüde giderdi.
Flash dosyalarındaki içeriklerin ve stillerin güncellenme işleminin tüm projenin baştan açılıp Export edilmesi ve tekrar sunuculara gönderilmesi zorluğu nedeniyle, trafik alan sayfaların Flash ile hazırlanması genelde tercih edilen bir yöntem değildi.
Ancak yeni versiyonla gelen CSS ve HTML dosyalarının Flash içerisine çağırılarak bileşenler ya da metin alanları üzerinde görüntülenmesi ile Flash ile üretilen sayfaların daha da artacağı kaçınılmaz bir gerçek.
Biz de bu sayıda Flash'ı daha da güçlendiren CSS ve HTML dosyalarının Flash içerisinde kullanımını yakından inceleyeceğiz.
CSS ve HTML
Kolay hazırlanıp güncellenebilen HTML dosyaları ve CSS stillerinin, web tasarımını oldukça kolaylaştıran öğeler olduğu gerçek. Bu kez Flash'ta karşımıza çıkan bu özellikleri kullanarak kolay güncellenebilir HTML sayfaları ve içerikleri, ayrıca belirterek birden fazla öğeye ya da dosyalara uygulanabilen CSS dosyalarını Flash filminin içerisine dahil edebiliyoruz.
Hemen bir örnek ile konuyu daha da açalım. Anlatacağımız örnekte Flash içerisine bir CSS ve HTML dosyasını çağırarak dışardan metin ve stil güncellemesi yapacağız.
Öncelikle Flash içine dahil edilecek CSS dosyasını hazırlayalım. Dreamvveaver ya da herhangi bir editör ile font tipi, boyu ve rengi ayrı üç stili barındıran bir CSS dosyası oluşturalım. Ardından da ismini 'stil' olarak belirleyip kaydedelim.
Şimdi sırada Flash var. 300 x 200 piksel boyutlarında yeni bir doküman oluşturarak bileşenlerin içinde bulunan TextArea bileşenini sahneye alarak ismini 'Metin' olarak atayalım. Daha sonra da bileşen seçiliyken özellikler panelinden HTML parametresini 'true' olarak belirleyelim.
.icerik_1 { font-family: Arial; font-size: 14px; font-weight: italic; color: #000066;} .icerik_2 {
font-family: Courier; font-size: 24px; font-weight: bold; color: #FF0000;}
Sahnedeki işimiz bu kadar kolay bir şekilde sona eriyor. Bundan sonraki adım ilk anahtar karedeki script'i hazırlamak olacak. İlk karenin Actions bölümüne gelerek 'Stil' isminde bir değişken oluşturalım ve değer bölümüne de Flash MX'in 2004 sürümünde gelen ve Build in classes > Movie > TextField > StyleSheet bölümünde bulunan new TextField.StyleSheet(); sınıfını girelim. Artık stil değişkenimiz hazır olduğuna göre load metodu ile stil.css dosyasını filme çağırabiliriz. Metin ismini verdiğimiz Textarea bileşeninin StyleSheet parametresine de Stil değişkenini atamamızla sayfaya CSS dosyasının çağırılması ve bileşenin stil dosyasının saptanması işlemi sona eriyor.
Bundan sonraki aşama HTML dosyasının Flash'a dahil edilerek yükleme kontrolü ve karakter setinin hazırlanması olacak. Öncelikle bu işlem için 'İçerik' isminde bir değişken oluşturalım ve HTML olarak yorumlanabilmesi için değer olarak nevv XML(); fonksiyonunu görevlendirelim. Daha önce CSS dosyasında olduğu gibi load metodu ile HTML dosyasını da dahil edelim ve belirleyeceğimiz karakter setinin çalışabilmesi için de System.useCodepage değerini true olarak yazalım.
Yapacağımız son işlem ise içeriğin açılışta yüklenmesini bir fonksiyon ile kontrol ederek işlemin başarılı olması durumunda Metin ismini verdiğimiz bileşenin text alanını 'içerik' değişkeninden okumasını sağlamak olacak.
Filmi test ettiğinizde TextArea bileşeni içerisinde HTML dosyasını, stillerde de CSS dosyasının etkilerini görebilirsiniz. Meta ve br kodlarının sonundaki '/' işaretine dikkat ederseniz formatın XHTML olduğunu görebiliriniz. Burada yapacağınız olası HTML hataları içeriğin bileşende gösterilmemesine sebep olurlar. Sorunsuz bir kodlama için World Wide Web konsorsiyum'un resmi sitesi olan www.w3.org adresinden faydalanabilirsiniz.
HTML ve resim dosyaları
Flash içindeki HTML dosyalarında kullanılabilen özelliklerden biri de resim özelliği. Yani dışarıdan içeriği değiştirebilmek gibi Flash sayfalarındaki tüm resimleri HTML dosyası içinden yönetebilmek de mümkün. Buradaki sistem Flash kütüphanesinin içindeki film küplerinin link isimlerinin çağrılması ile gerçekleşiyor. Şimdi oldukça sade bir örnek ile bu yöntemin çalışma sistemini inceleyelim.
Öncelikle Flash'a kullanmak istediğiniz resimleri dahil ederek film klibi olarak kaydedin. Kütüphaneyi açarak bu kaydettiğiniz film küplerinin özellikler bölümünden Linkage alanlarını Resim_1, Resim_2 şeklinde isimlendirin.
Ardından da HTML kodu içerisine resmi çağıran 'img' tag'ını ekleyerek 'src' kısmına herhangi bir uzantı yazmadan, sadece kullanmak istediğiniz resmin Linkage ismini yazın.
Filmi test ettiğinizde HTML dosyaları ile birlikte belirlediğiniz resmi görebilirsiniz. Aslında resimlerin film klibi şeklinde kaydedilmesi olayından anlayacağınız üzere işlem sadece HTML ve resimleri kullanabilmek değil. Linkage ismini vereceğiniz film küpleri içinde dilediğinizce animasyon, script, ses ve video dosyası da HTML içinden değiştirerek kullanabilirsiniz.
Filme gömülü HTML ve CSS
Flash'a dışarıdan HTML ve CSS ithal etmenin yanı sıra bu yöntemleri ActionScript ile gömülü olarak da çalıştırma imkanına sahipsiniz. Yeni bir TextField.StyleSheet değişkeni oluşturduktan sonra setStyle metodu ile stili oluşturarak font tipi, boyutu ve rengi gibi parametreleri girmek mümkün. Gönderilecek içerik ise bir değişkenin değer bölümüne HTML kodlarının yazılması ile gerçekleşiyor. Burada dikkat edilmesi gereken nokta, stilin HTML koduna Metin şeklinde verilecek olmasıdır. İçeriğin sahneye yazdırılması işlemini de ilk örneğin aksine dinamik yazı alanı içerisine yapabiliriz. Yeni bir dinamik yazı alanı oluşturarak ismini 'Metin' olarak verelim ve tekrar koda dönerek Metin alanının StyleSheet değerini ilk oluşturduğumuz değişkenden, text değerini ise 'İçerik' değişkeninden okumasını sağlayarak örneğimizi tamamlayalım.
Gelecek ayki PCnet CD'si içinde bulacağınız örnek uygulama dosyasında, Flash MX 2004 ile yapılan örneğin Fla, Html ve Css dosyalarını inceleyebilirsiniz. Önümüzdeki ay bir başka konuda görüşmek üzere.