CSS(Cascading Style Sheets), standart HTML sayfaları hazırlanırken her seferinde aynı belirleyicileri yazmamak için kullanılan, sayfalarda genel kullanıma açık veriler oluşturmaya yarayan bir web teknolojisidir. CSS yi sayfa içindeki yazıların renk, yazı tipi, büyüklük gibi parametrelerinin değiştirilmesinde de kullanırız. Flash’da da bir kısım CSS stilleri kullanarak textleri şekillendirmemiz ve düzenlememiz mümkündür. Şimdi buna bakalım;
Öncelikle yeni bir metin belgesi(txt) oluşturup buraya uygun CSS kodlarımızı yazalım. Örnek olarak ben aşağıdaki gibi bir css alanı hazırladım;
p { font-family: Arial, Helvetica, _serif; font-size: 14;} h1 {font-family: Arial, Helvetica, _sans; font-size: 20; font-weight: bold;} yt {font-family: Times New Roman, Helvetica, _sans; font-size: 14;} .link {color: #FF0000;} a:hover {color:#1E90FF;} .Mavi {color: #0000CC;}
Daha sonra bu dosyayı “ornek.css” diye kaydedelim ve flash’ı açıp actionscript panelinde kodlamalara başlayalım.
Önce bir Urlloader oluşturarak ornek.css diye kaydettiğimiz CSS dosyasını flash içine yüklememiz gerekir. Bunun için aşağıdaki kodları kullanıyoruz; (kodların açıklamaları aynı satırda)
var loader:URLLoader= new URLLoader();//yeni yükleyici var req:URLRequest = new URLRequest("ornek.css");//yeni url yolu loader.load(req);//yükleyiciye bu yoldaki veriyi yükle loader.addEventListener(Event.COMPLETE, CSSyuklendi);//yükleme biterse çalışacak fonksiyon function CSSyuklendi(event:Event):void{//fonksiyonu yazıyoruz trace("CSS Yüklendi!") trace(loader.data)//Burada yüklenen CSS nin içeriğini görebiliriz. }
Bu fonksiyon gerçekleşince CSS nin yüklendiğine dair uyarı ve yüklenen CSS nin içeriği Output ekranında görülecektir. Şimdi CSS’yi üzerine işleyeceğimiz textimizi oluşturalım;
var yazi:TextField= new TextField();//yeni textfield yazi.width = 400;//yazı alanının genişliği yazi.height = 60 ;//yazı alanının yüksekliği addChild(yazi); //yazı alanı sahneye eklendi var ornekYazi:String = "<h1>Büyük Yazı</h1>" + "<p>Standart Yazı <span class='Mavi'>" + "Şimdi Rengini Mavi Yaptık.</span></p>"+ "<yt>Yazı Tipini Değiştirdik</yt>" + "<p><span class='link'><a href='http://google.com' target='_blank'>Buraya da Tepkili Link Verdik</a></span></p>" //burada da örnek yazıyı CSS de hazırladığımız taglara göre oluşturduk.
Bundan sonra da ilk kod bloğunda CSS yüklemesinin bittiği anda çalıştırılmasını istediğimiz “CSSyuklendi” fonksiyonunu şu şekilde düzenleyip yeniden yazalım;(burada yüklediğimiz CSS’yi yazının styleSheet ayarlarına yönlendiriyoruz)
function CSSyuklendi(event:Event):void{ var stil:StyleSheet = new StyleSheet();//flash içinde yeni StyleSheet oluşturuyoruz stil.parseCSS(loader.data);//oluştırduğumuz StyleSheet’e daha önceden yüklediğimiz CSS’nin içeriğini aktarıyoruz yazi.styleSheet = stil;//önceki blokda “yazi” adını verdiğimiz TexdField’ın styleSheet ayarını oluştuduğumuz stil’e yönlendiriyoruz yazi.text = ornekYazi;//ve son olarak yazı alanımızın içeriğini yukarıda hazırladığımız “ornekYazi” stringi olarak ayarlıyoruz. }
Tüm kodlarımızın son hali altta görünen şekildedir. Bu kodu test edelim;
var loader:URLLoader= new URLLoader(); var req:URLRequest = new URLRequest("ornek.css"); loader.load(req); loader.addEventListener(Event.COMPLETE, CSSyuklendi); var yazi:TextField= new TextField(); yazi.width = 400; yazi.height = 60; addChild(yazi); var ornekYazi:String = "<h1>Büyük Yazı</h1>" + "<p>Standart Yazı <span class='Mavi'>" + "Şimdi Rengini Mavi Yaptık.</span></p>"+ "<yt>Yazı Tipini Değiştirdik</yt>" + "<p><span class='link'><a href='http://google.com' target='_blank'>Buraya da Tepkili Link Verdik</a></span></p>" function CSSyuklendi(event:Event):void{ var stil:StyleSheet = new StyleSheet(); stil.parseCSS(loader.data); yazi.styleSheet = stil; yazi.text = ornekYazi; }
Sonuç / Örnek Swf:
—
Görüldüğü gibi CSS de belirttiğimiz parametreleri flash üzerinden yazımıza uyguladık. Bu şekil kullanım hem pratiklik hem de normalde yapamadığımız bazı uygulamaları(örneğin tepkili linkler) yapabilmemiz için yararlıdır. Son olarak şunu söylemem gerekir ki Flash tüm CSS stillerini desteklemez. Flash’ın desteklediği CSS stilleri ve sınıf bilgileri için şurayı inceleyebilirsiniz.
Bu kadar, herkese kolay gelsin…
——————————————————————————————-
Yazarı Takip Edin (Bilal):
Tüm Yazılar | Twitter.com/3bilal | Facebook.com/3bilal
Posted by
Bilal in