>>

‹çindekiler

CHIP Workshop Klasörü
Kesin, biriktirin, kendi arflivinizi oluflturun
CHIP WORKSHOP’da BU AY
Web Programc›l›¤›
DHTML ile sihirli web sayfalar›

Flash Serisi
Flash Filmlerine Dosya Aktarmak -2

Photoshop Serisi
Photoshop ile Biçki Dikifl

CHIP Workshop Klasörü’nü ayraçlar›yla birlikte siparifl edebilir ve kendi arflivinizi oluflturabilirsiniz.
Fiyat: 9.000.000

Excel Serisi
EXCEL UYGULAMALARI -2

TL

(KDV ve gönderim ücreti dahil)

Siparifl için: http://abone.vogel.com.tr

Web Programc›l›¤›

<<

DHTML ile
W
eb sayfalar› yapmaya merak› olan herkes DHTML’in ad›n› duymufltur. Bir ço¤u ise bir DHTML scriptini internetten kopyalay›p sayfas›nda kullanm›flt›r da onun DHTML oldu¤unun fark›nda de¤ildir. Web merakl›lar›n›n›n bir ço¤u DHTML’in ismine bakarak onun HTML benzeri ya da ona alternatif bir imleme dili oldu¤unu zannetmektedir. Oysa iflin gerçe¤i DHTML bir “metot”tan baflka bir fley de¤ildir. DHTML asl›nda HTML’dir! Üzerindeki JavaScript ve CSS’in birbiriyle etkileflti¤i saf HTML. Bize web sayfalar›m›zda hayal etme cesaretini kazand›ran yeniliklerden biri olan DHTML web teknolojileri içerisinde tan›mlanmas› en güç konu olmaya aday. Zira DHTML’in s›n›rlar›n›n nerede bafllay›p nerede bitti¤ini tan›mlamak pek de san›ld›¤› gibi kolay bir ifl de¤il.

sihirli web sayfalar›
‹smindeki ve tan›mlanmas›ndaki zorluk sebebiyle bugüne kadar hakketti¤i ölçüde tan›n›p anlafl›lamam›fl ola¤anüstü bir teknolojinin s›r kap›lar›n› aralayaca¤›z bu say›m›zda: DHTML, ya da nam-› di¤er Dinamik HTML. Bugünden itibaren DHTML’in ne oldu¤unu, ne olmad›¤›n› bilerek bilgisayar›n›z›n karfl›s›na geçeceksiniz.

genel yap›lar› birbirinin ayn›s› olup sadece içerikleri farkl›l›k gösterirler. Buna al›fl-verifl sitelerinin sayfalar›n› örnek olarak verebiliriz. Dinamik HTML’in di¤er anlam› ise iki büyük taray›c› üreticisi olan Microsoft ve Netscape’in versiyon 4 taray›c›lar› ile bafllalad›klar› ve daha sonraki sürümlerinde de destekledikleri ve World Wide Web Konsorsiyumu (W3C) taraf›ndan art›k bir web standart› olarak kabul edilen teknolojiye verilen isimdir. Tan›m kargaflas›n›n önüne geçebilmek amac›yla biz bu teknolojiyi Dinamik HTML yerine DHTML olarak ifade edebiliriz.

DHTML nedir?
DHTML’e asl›nda teknolojiden çok soyut bir kavram demek daha do¤ru olur. Çünkü DHTML kendi içinde bütünlü¤ü ve kurallar› olan HTML gibi bir imleme (mark-up) dili ya

da JavaScript gibi bir program dili de¤ildir. Tamamen farkl› kullan›c›-taraf› teknolojileri olan HTML, CSS ve JavaScript’in belirli bir anlamda ve birbirleriyle dayan›flma içerisinde kullan›ld›¤› bir ‘yöntem’dir. Dolay›s› ile DHTML teknolojisi diye hitap edilen sanal kavram asl›nda DHTML metodunun kulland›¤› HTML, CSS ve JavaScript teknolojilerinin bütününe verilen add›r. “DHTML’in temel tafllar›” olan HTML, CSS ve JavaScript hakk›nda StudioWeb köflemizde bugüne kadar bilgiler edindik, edinmeye de devam edce¤iz. Bu teknolojilerin her biri farkl› bir amaç do¤rultusunda gelifltirilmifl ve birbirinden farkl› konularda güçleri olan web standartlar›d›rlar. DHTML ile yap›lan ise bu teknolojilerin her birini özgün bir flekilde birbirleriyle etkileflim içerisinde kullanarak, web sayfalar› üzerinde, bu teknolojilerin sahip olduklar› güçlerin bileflkesinden dahi daha büyük bir kontrol gücü oluflturmakt›r.

DHTML mi? Dinamik HTML mi?
DHTML konusunda tan›m karmafl›kl›klar›n›n ilki isimlendirmede karfl›m›za ç›k›veriyor. DHTML mi demek do¤ru yoksa Dinamik HTML mi demek? DHTML asl›nda “Dinamik HTML” ( Dynamic HTML ) ifadesinin k›salt›lm›fl fleklidir. Ancak “Dinamik HTML” ifadesi ise iki ayr› anlama gelebilmektedir. Dinamik HTML ifadesinin anlamlar›ndan birincisi HTML ile yaz›lan web sayfalar›n›n içeri¤inin statik de¤il de dinamik, yani kullan›c›n›n istek ve seçimlerine uygun oluflturulmas› olay›d›r ki bunu JavaScript gibi taray›c›n›zda çal›flan bir program veya veritaban› ba¤lant›l› websunucu aplikasyonlar› ile en üst boyutlara ulaflt›rabiliriz. Mesela sadece tek bir html sayfas› flablonu içerisine veritaban›ndan getirebilece¤iniz farkl› farkl› içeriklerle birbirinden tamamen farkl› yüzlerce web sayfas› yaratabilir ve ziyaretçiye gösterebilirsiniz. Bu tür web sayfalar› tek bir flablonu kulland›¤›ndan sayfalar›n

DHTML temel anlamda HTML, JavaScript ve CSS’in birbirleriyle etkileflim içinde olacak flekilde kullan›lmas› metodudur. Bu üç temel teknolojinin bibirleriyle iletiflim kurmas›n› sa¤layan DOM, DHTML’in en önemli anahtar›d›r. 47 • CHIP Workshop > >

>>
DHTML nedir?

Web Programc›l›¤›

❿ Belirli teknolojilerin birbirleriyle dayan›flma içinde kullan›ld›¤› bir yöntem’dir. ❿¤ Geleneksel HTML sayfalar›na görsel ve ifllevsel aç›dan zenginlik katan bir metottur. Bizzat normal HTML sayfalar›na eklenirler. ❿ Kullan›c›-taraf› teknolojilerini (HTML, CSS ve JavaScript) kullan›r. ❿ Taray›c›-özgün çal›fl›r. ❿ Web standart›d›r. ❿¤Bedavad›r.

lay› içinde bar›nd›rd›¤› karar/kontrol, döngü yap›lar› ve eventhandler diye adland›r›lan tetikleme mekanizmalar› sayesinde yazac›¤›m›z sciptlerin mant›¤›n› oluflturabilmemizdir. Bir “web sayfas›nda”, dinamik olarak (sayfan›n tekrardan yüklenmesine gerek kalmayacak flekilde): ❿ Sayfan›n içeri¤i (yaz›lar, sayfa elemanlar›n›n varl›¤›, dizilifli vs.) de¤iflebiliyorsa ❿ Sayfa elemanlar›ndan en az birinin görsel özellikleri de¤iflebiliyorsa ❿ Sayfada bulunan elemanlar›n en az biri görünebiliyorken görünmez olabiliyor ya da görünmezken tekrardan görünebiliyorsa ❿ Sayfa elemanlar›ndan en az birinin sayfa üzerinde bulundu¤u koordinatlar› de¤iflebiliyorsa (Kayan yaz›lar vs.) ❿ Sürükle-B›rak tekni¤i kullan›labiliniyorsa ❿ Sayfada bulunan bir tekst bilgisayar›n›zda bulunmayan bir fontta görünebiliyorsa O sayfada DHTML kullan›ld›¤›ndan söz edilebilir. Farkettiyseniz yukar›daki flartlar›n tümünü t›rnak içinde ifade etti¤imiz bir “web sayfas›” için s›ralad›k. Çünkü yukar›daki flartlar›n baz›lar› bir baflka teknoloji ile gerçeklefltirilmifl uygulamalar için de geçerlidir. Macromedia Flash, Java appletleri, Shockwave, Viewpoint 3D gibi daha nicesini sayabilece¤imiz teknolojileri bu tarz uygulamalara örnek olarak verebiliriz. Ancak bu uygulamalarla bir web sayfas› yap›lmas› de¤il onun yerine bu uygulamalar›n web

DHTML ne de¤ildir?
❿ Kendine özgü bütünlü¤ü ve kurallar› olan bir imleme ya da program dili de¤ildir. ❿ HTML’in bir alternatifi de¤ildir. ❿ Sunucu-taraf› teknolojisi de¤ildir. ❿ Eski model web taray›c›lar›n›n da halen kullan›ld›¤›n› düflünürsek flimdilik her taray›c›da ayn› flekilde çal›flan ba¤›ms›z bir uygulama de¤ildir. ❿ Gelifltirme ve çal›flt›rma için ekstra bir yaz›l›ma ihtiyaç yoktur. Hiç bir firman›n tekelinde de¤ildir.

sayfalar›na (<embed> gibi tak›larla) ilifltirilmeleri sözkonusudur. Bu tür uygulamalar kullan›c›n bilgisayar›nda bulunmas› gereken bir eklenti dosyas› (plug-in) yard›m›yla sayfada kendileri için tan›mlanan alanda çal›fl›rlar. Teknoloji gelifltikçe plug-in’li uygulamalar›n di¤er uygulamalarla iletiflim kurabilme olanaklar›n›n geliflmesine ra¤men flimdilik bu tür uygulamalar›n hükmedebildikleri alan›n genelde kendileri için tan›mlanan bölge ile s›n›rl› oldu¤unu söyeleyebiliriz. Mesela bir Flash animasyonunda ya da Java appletinde görünen bir nesneyi Flash animasyonunun d›fl›nda HTML sayfas›n›n herhangi bir noktas›na sürüklemeniz flimdilik söz konusu de¤ildir. Oysa DHTML’in kendisini bu tarz teknolojilerin tümünden ay›ran çok önemli bir niteli¤i vard›r. DHTML kullan›lan bir uygulama temelde normal bir HTML sayfas› oldu¤undan bünyesindeki JavaScript sayesinde bizzat HTML sayfam›zdaki elementlerin kendilerini kontrol edebilmekteyiz. Üstelik ziyaretçinizin herhangi bir eklenti dosyas›n› bilgisayar›nda bulundurmas›na gerek duymadan!

DHTML nedir?
En basit tan›m›yla DHTML, bir HTML sayfas› üzerinde yap›land›r›lm›fl, birbirleriyle belirli bir anlamda etkileflim halinde bulunan CSS ve JavaScript uygulamalar›d›r. Bu etkilflim sayesinde sayfa kendini tekrardan yüklemeden ya da baflka bir sayfaya gitmeden içeri¤ini de¤ifltirebilmesi mümkün olabilmektedir. Web sayfalar›n›na görsel zenginlikler katan CSS, HTML dosyas›na eklenen ya da kullanaca¤›m›z bir ek dosyada yer alan kodlardan oluflur. Ancak bu kodlarla tan›mlam›fl oldu¤umuz özelliklerin ve de¤erlerin sayfa çal›fl›r durumda iken de¤ifltirilebilmesi (script kullanmad›¤›m›z sürece) söz konusu de¤ildir. E¤er bu tan›mlamalarda bir de¤ifliklik yapman›z gerekiyorsa bunu sayfan›z›n kaynak kodunu de¤ifltirerek yapman›z gerekecektir. Sayfam›zda görünen özellikleri sayfam›z›n kaynak kodundaki de¤erleri de¤ifltirmeden ve hatta sayfam›z çal›fl›r durumda iken dahi de¤ifltirebilmek ancak DHTML kullanarak mümkündür. DHTML’in ismindeki “Dinamik” ifadesi ile tan›mlanmaya çal›fl›lan kavram iflte bu olay›n ta kendisidir. DHTML scriptlerinde JavaScript ise DOM yard›m›yla kontrol etmek istedi¤imiz sayfa eleman›na ulaflabilmemize ve bu eleman›n istedi¤imiz özelli¤ini de¤ifltirebilmemize imkan sa¤lar. JavaScript’in DHTML aç›s›ndan bir di¤er ifllevi ise JavaScript’in bir scripting/programlama dili olmas›ndan do< CHIP Workshop • 48 <

Katmanlar
DHTML kullan›lan sayfalardaki en karakteristik özellik, sayfada katman (layer) ad› verilen nesnelerin kullan›lmas›d›r. Katmanlar›n ne olduklar›n› geçen say›lar›m›zda CSS konusunda ele alm›flt›k. Bir sayfada DHTML’in görsel olanaklar›ndan faydalanabilmek için nesnelerin katmanlar›n üzerine yerlefltirilmeleri gerekir. Bir web sayfas›na ekleye-

Dynamic Drive sitesinde kopyalay›p web sitelerinizde kullanabilece¤iniz yüzlerce kullan›fll› DHTML scripti mevcut.

Web Programc›l›¤›

<<

ternet Explorer ise ilk if sorgusundan baflar›yla geçecek, burada kendisi için yerlefltirilmifl bulunan ifadeleri yorumlayacak, di¤erlerini ise görmezden gelecek.

‹lk DHTML scriptimiz görün-kaybol
Tüm browser’larda ayn› flekilde ve sorunsuzca çal›flabilen DHTML programlar›na Cross-Browser DHTML ad› verilir.

DHTML scriptlerinde oldukça s›k kullan›lan görün-kaybol özelli¤i bir çok etkileyici kullan›c› arayüzlerinin de temelini oluflturmaktad›r. Scriptimiz bir HTML sayfas›ndaki içeriklerin kullan›c› kontrolünde nas›l görünüp kaybolabilecekelrini gösterecek.
ilkdhtml.html <html> <head> <title>Görün-Kaybol</title> <style type="text/css"> #birinciKatman { position:absolute; top:150px;

bilece¤iniz her türlü HTML nesnesini katmanlar›n üzerine de yerlefltirmeniz mümkündür. Katmanlar›n sayfa içindeki pozisyonunu ve görselli¤ini, üst üste birden fazla katman varsa hangisinin en üstte, hangisinin altta olaca¤› kontrol edilebilir.
NOT: HTML kodu içine katmanlar <div>, <layer> ya da <span> tak›lar› ile eklenirler.

document.getElementById("obje‹smi") ➝ .style.stilPropertysi=de¤er; }

left:200px; width:200px; height:200px; background-color:#ff55ff; layer-background-color:#ff55ff; } #ikinciKatman { position: absolute; top:250px; left:350px; width:200px; height:200px; background-color:#ffbb00; layer-background-color: ➝ #ffbb00; } </style> <script language="JavaScript"> function kaybol(katman) { if (document.all) { document.all[katman] .style.visibility="hidden"; } else if (document.layers) { document.layers [katman].visibility="hide"; } else { document.getElement- ➝ ById(katman).style.visibility="hidden"; } } function gorun(katman) { if (document.all) { document.all ➝ [katman].style.visibility="visible"; } ➝ ➝

JavaScript’in herhangi bir katman›n ya da katman içerisindeki nesnenin özelli¤ini de¤ifltirebilmesi yine DOM sayesinde gerçekleflir.

Cross-Browser DOM
Temelde taray›c›-ba¤›ml› bir teknoloji olan DHTML’de farkl› taray›c›lar aras›ndaki uyumsuzlu¤u gidermek ve scriptlerimizin farkl› platformlarda sorunsuzca çal›flabilmesi için DHTML scriptimizde farkl› DOM modelleri için birer ifade bulundurmam›z gerekir. Bu tarzda yaz›lm›fl ve her taray›c›da da çal›flabilen DHTML scriptlerine CrossBrowser DHTML scriptleri ad› verilir. JavaScript kullanarak scriptimizin çal›flt›¤› taray›c› ve modelini (taray›c› filtresi scripti ile) dedekte edip uygun ifadenin yorumlanmas› sa¤layabiliriz. Afla¤›daki blok tüm taray›c› modellerinde çal›flabilecek bir DOM yap›s›n›n nas›l olmas› gerekti¤ini gösteriyor.
if (document.all) { document.all.obje‹smi.style.stilPropertysi ➝ =de¤er ; } else if (document.layers) { document.layers.obje‹smi.stilPropertysi ➝ =de¤er ; } else {

Yukar›daki ifade basit bir JavaScript if..else karar/kontrol yap›s›ndan meydana geliyor ancak çok önemli bir ifllevi yerine getiriyor. If’ten sonra gelen parantezler aras›nda kalan ifade scriptin çal›flt›rd›¤› taray›c›daki DOM yap›s›n› sorguluyor ve karfl›laflt›¤› anda da uygun DOM yap›s› ile yaz›lm›fl ifadeyi iflleme koyuyor. Dolay›s› ile bir nesnenin görünürlü¤ünü kontrol eden bir bloku bu DOM kurgusu ile yazmak istersek flu flekilde olmas› gerekir.
if (document.all) { document.all.katman2.style.visibility= ➝ "hidden"; } else if (document.layers) { document.layers.katman2.visibility= ➝ "hide"; } else { document.getElementById("katman2") ➝ .style.visibility="hidden"; }

Dikkat edecek olursan›z karar kontrol yap›m›zda sadece if yerine if .. else ifadelerini kulland›k. Bunun sebebine gelince Internet Explorer 5+ taray›c›lar› hem document.all modelini hem de document.getElementById() modelini desteklemektedirler. Else ifadesi ile ayn› taray›c› için iki farkl› model kullan›m›n›n önüne geçmifl oluyoruz. Yukar›daki ifadede e¤er taray›c›m›z In-

49• CHIP Workshop > >

>>
} else { } } </script> </head> <body bgcolor="White">

Web Programc›l›¤›

else if (document.layers) { document.layers➝ [katman] .visibility="show";

document.getElement➝ ById(katman).style.visibility="visible";

<b>Kontrol panosu:</b> <br> <a href="javascript:kaybol('birinci Katman')">Birinci katman kaybolsun </a><br> <a href="javascript:gorun('birinci <a href="javascript:kaybol('ikinci ➝ ➝ Katman')">Birinci katman görünsün</a><br> Katman')">Ikinci katman kaybolsun</a><br> <a href="javascript:gorun('ikinciKatman') ➝ ">Ikinci katman görünsün</a><br> <div id="birinciKatman"> <br> &nbsp;&nbsp;<b>Birinci Katman </b> </div> <div id="ikinciKatman"> <br> &nbsp;&nbsp;<b> Ikinci Katman </b> <br><br><br> &nbsp;&nbsp;&nbsp;&nbsp; <img src="resim.jpg" border="0" alt=""> </div> </body> </html> ➝ ➝

Katmanlar ve içeriklerigörünür durumda

nak tan›yan birer JavaScript fonksiyonunu ise <script> tak›lar› içerisinde tan›mland›klar›n› görüyoruz. kaybol(katman) ve gorun(katman) fonksiyonlar›. kaybol(katman) fonksiyonu sayfa üzerindeki bir katman nesnesini içeri¤iyle birlikte görünmez hale getiren fonksiyonken gorun(katman) ise buna paralel olarak oluflturulmufl, görünmez yap›lm›fl bir katman› tekrar görünür yapan bir baflka JavaScript fonksiyonu. Fonksiyonlar›m›z› parametreli olarak yazm›fl oldu¤umuzdan iki ayr› katman için ikifler ayr› fonksiyon kullanmak yerine fonksiyonlar›m›z›n her ikisini de iki farkl› katman taraf›ndan ortaklafla kullanabilmekteyiz. Sadece fonksiyonumuzu ça¤›r›rken hangi katman nesnesi için ifllem görmesini istedi¤imizi bildirmemiz gerekiyor. Bunu da ça¤›r›lan fonksiyonun parantezeleri içerisine katman›n ismini yerlefltirmekle yap›yoruz.
kaybol('birinciKatman')

Script kodlar›m›z› incelemeye geçmeden önce taray›c›n›zda çal›flt›r›p ne yapt›¤›na bir bak›n. Sayfam›zda iki adet katman var ve bu katmanlar›n görünürlüklerinin kontrolü tamamen kullan›c›n›n kontrolünde. Üstelik sayfa içerikleri görünüp kaybolurken sayfam›z kendini tekrardan yüklemiyor! Katmanlar›m›z›n üzerindeki nesneler ise tamam›yla saf HTML nesneleri olan resim ve tekst parçalar›. fiimdi gelelim bu ifli nas›l baflard›¤›m›z› incelemeye. Sayfam›z›n kaynak koduna bakacak olursak içlerinde birer parça tekst bulunan iki adet katman objesi ve bu objelere ait stil tan›mlar› bulunmaktad›r. Katmanlar›m›z›n görünürlü¤ünü kontrol edebilmemize ola< CHIP Workshop • 50 <

Dilerseniz 1 numaral› katman› gizleyebilirsiniz

2 numaral› katman› gizlemeye ne dersiniz?

Burada dikkat edilmesi gereken nokta ismin t›rnak iflaretleri aras›nda yeralmas› gereklili¤i. Bunu yapmazsan›z JavaScript birinciKatman olarak adland›r›lan fleyin ne oldu¤unu anlamayacak ve ilgili objeyi sayfa üzerinde bulamay›nca da hata bildirisi vererek çal›flmayacakt›r. Dikkatinizi çekmek istedi¤im bir di¤er önemli nokta ise tetikleme mekanizmas›, yani görünürlük özelliklerinin de¤iflmesini bafllatan kullan›c› hareketleri. Bunlar›n ne olmas› gerekti¤ine tamamen siz kendiniz karar verebilirsiniz. Ben bu ifl için basit link objeleri seçtim. Diyelim ki kullan›c›m›z ilk linke bast›¤› anda

Web Programc›l›¤›

<<

DHTML kullan›larak etkileyici bir menü sistemleri oluflturmak mümkün

<a href="javascript:kaybol('birinciKatman')"> ...

ve dezavantajlar›
DHTML kullanarak yapabilece¤iniz fleylerin bir k›sm›n› baflka hiç bir teknoloji ile gerçeklefltiremezsiniz. DHTML’in ola¤anüstü etkilerine ra¤men henüz yeni bir teknoloji olmas›n›n getirdi¤i s›n›rlamalar da mevcuttur.

sat›r› ile diledi¤imiz JavaScript fonksiyonunun programlanm›fl oldu¤u ifllemini yerine getirmesini, yani birinci katman›n kaybolmas›n› belirtiyoruz.

DHTML kullanman›n avantajlar› DHTML kullanman›n avantajlar›
❿ DHTML ile yaz›lm›fl sayfalar Macromedia

Flash, Shockwave ve Java appletleri gibi di¤er multimedya programlar›na göre daha küçüktürler. Yani DHTML scriptleri ziyaretçilerinizin bilgisayar›na daha çabuk yüklenip çal›flabilirler. ❿ DHTML’in JavaScript ile olan iç içe ba¤lant›s›ndan dolay› JavaScript’in tüm olanaklar›ndan daha etkileflimli bir flekilde faydalanman›za olanak tan›r. ❿ DHTML sayfalar› temelde HTML sayfalar›ndan meydana geldi¤inden web sayfalar›nda güncellenme ve de¤ifliklik ifllemleri çok daha kolay gerçekleflir. Yenilemifl oldu¤unuz döküman tekrardan derlenmesine ya da çal›flabilmesi için s›k›flt›r›larak baflka bir dokümana çevrilmesine gerek olmadan direkt olarak aç›l›p çal›flt›r›labilir. Java appletleri ve Flash gibi uygulamalarda bu sorunun ortadan kald›r›labilmesi için XML ya da tekst bazl› harici dokümanlarla ve hatta veritabanlar› ile de ba¤lant› kurulabilmektedir. Böylece güncellenmesi gereken uygulaman›n kendisi de¤il sadece ilgili tekst doküman› ya da veritaban› olmaktad›r. Buna karfl›n DHTML’in kendisi tekst bazl› bir HTML dosyas› kulland›¤›ndan veritaban› gibi dinamik içerik uygulamalar›ndaki basitlik sade bir HTML sayfas›ndakinden farks›zd›r. Dolay›s› ile sayfalar›n›zda hem DHTML’in zengin görsel olanaklar›ndan faydalan›p hem de bir veritaban›na ba¤l› gerçek uygulamalar da gelifltirebilirsiniz. ❿ DHTML, temelde HTML sayfas› üzerinde yap›land›r›lan CSS ve JavaScript uygulamas› oldu¤undan ve bizzat web sayfas› objelerini kulland›¤›ndan çal›flabilmek için baflka hiç bir eklenti dosyas›’na (plug-in) ihtiyaç duymayacakt›r. DHTML scripti bizzat taray›c›n›n kendisi taraf›ndan yorumlan›r ve çal›flt›r›l›r. ❿ DHTML teknolojisi hiç bir firman›n tekelinde de¤ildir ve tüm popüler web taray›c›lar› taraf›ndan desteklenmektedir. ❿ DHTML uygulamalar› gelifltirmek için ekstra hiç bir yaz›l›ma ihtiyac›n›z yoktur. ❿ DHTML bir web standart›d›r.

DHTML kullanman›n dezavantajlar›
DHTML’in ola¤anüstü etkilerine ra¤men henüz yeni bir teknoloji olmas›n›n getirdi¤i s›n›rlamalar da mevcuttur. fiimdi dilerseniz DHTML’in dezavantajlar›n› ö¤renelim ❿ Eski taray›c›lar ( Internet Explorer 3.0 ve afla¤›s›, Netscape 3.0 ve afla¤›s›, Opera 4.0’ten afla¤›s› ) DHTML’i desteklemezler. Belki say›lar› çok az bile olsa yine de bir grup kullan›c› (% 2) bugün hala bu taray›c›lar› kullanmaktad›rlar. JavaScript ile DHTML içeren sayfalar›n›za taray›c› filtresi
51 • CHIP Workshop > >

Websitesine özgün stilde tasarlanm›fl sürüklenebilir pop-up pencereler.

>>

Web Programc›l›¤›

DHTML ile programlanm›fl bir oyun

scripti ekleyerek ziyaretçinizin taray›c› isim ve modelini dedekte edebilir, e¤er yazm›fl oldu¤unuz scripti desteklemiyorsa onlar için haz›rlam›fl oldu¤unuz alternatif sayfaya yönlendirebilirsiniz. (Günümüz internet piyasas›nda Internet Explorer 5.5 ve yukar›s› ile Netscape 6.0 ve yukar›s› standart olarak kabul görmektedir ve web sayfalar›n›n bu taray›c›larda sorunsuz çal›flabilmeleri beklenmektedir) ❿ Farkl› taray›c› modelleri ve sürümleri DHTML scriptlerini farkl› flekilde desteklemektedirler. Bu bak›mdan scriptlerimizin farkl› taray›c›larda ayn› flekilde çal›flmas› beklentisini tafl›yorsak scriptlerimizin farkl› yorumlanabilen bölümlerinde farkl› taray›c›lar için ayr› birer ifade bulundurmam›z gerekecektir. Neyse ki burada da JavaScript yard›m›m›za yetiflmektedir. ❿ DHTML ö¤renmek HTML, JavaScript, CSS ve DOM bilgisi gerektirir. Henüz DHTML’in sunmufl oldu¤u bütün olanaklar›n› gelifltirip rahatl›kla kontrol edebilece¤imiz komple bir görsel DHTML editörü olmad›¤›ndan DHTML scriptlerimizi tam anlam›yla kontrolümüz alt›nda tutabilmek için özellikle CSS, JavaScript ve taray›c› modelleri konular›nda yeterli bilgiye sahip olmam›z gerekecektir. ❿ Basit bir animasyon geçeklefltirmek bile bir dizi kod yazman›z› gerektirir. Oysa sayfan›z›n belirli bölümünde göstermek istedi¤ininiz bir animasyonu Flash veya benzeri
< CHIP Workshop • 52 <

bir uygulama ile gerçeklefltirmek çok daha çabuk ve kolayd›r. Genifl grafiksel içeriklerle çal›flan scriptlerde web sayfas›n›n toplam dosya büyüklü¤ünü göz önünde bulundurmak gerekir. ❿ DHTML kodlar›n›z› ziyaretçilerinizden gizleyemezsiniz. Scriptleriniz derlenme gerektirmeden taray›c›-taraf›ndan yorumland›¤›ndan script kodlar›n›n kullan›c› bilgisayar›na ulaflmas› gerekir. Bu demek oluyor ki yazd›¤›n›z DHTML scriptleri baflkalar› taraf›ndan kopyalanabilirler ve kullan›labilirler.

DHTML ile neler yapabiliriz?
Web gelifltirme konusundaki hayallerinizi flimdiye kadar HTML’in getirdi¤i s›n›rlamalardan DHTML sayesinde kurtarabilirsiniz. DHTML sayesinde kullan›c› ile daha etkileflimli, daha güzel ve daha ilgi çekici sayfalar yapabilirsiniz. DHTML scriptlerinin en çok yo¤unlaflt›¤› uygulamalar› flöylece s›ralayabiliriz: ❿ Geliflmifl navigasyon ve menü scriptleri ❿ Etkileflimli animasyonlar ❿ Geliflmifl prezentasyonlar ❿ Tan›t›m gösterileri (‹ntrolar)

❿ Kayan yaz›lar ❿ Özgün pop-up pencereleri ❿ Fare imlecine duyarl› uygulamalar ❿ Yar›-fleffaf (semi-transparent) grafik uygulamalar› ❿ ‹ki resim ya da iki sayfa aras›nda sinematik geçifller (Bir sayfadan di¤erine video görüntülerinde oldu¤u gibi animasyonlu geçifller) ❿ “Yükleniyor… Lütfen bekleyin” bilgisi (HTML sayfalar›n›zda ziyaretçileriniz sayfan›z›n yüklenmesini beklerken onlara yüklenme süreci ile ilgili bilgi veren görsel grafik uygulamalar) ❿ Grafiksel Filtreler Microsoft’un ActiveX teknolojisi ile bize sundu¤u özel efektler kolleksiyonu sayesinde bir sayfa içeri¤ine Photoshop filtrelerindekine benzer efektler uygulayabiliyoruz. ❿ Yüklenebilir fontlar Yüklenebilir fontlar sayesinde ziyaretçileriniz sayfalar›n›zda sizin diledi¤iniz fontlar› göreceklerdir. Bu font bilgisayarlar›nda olmasa bile! ❿ HTML sayfalar›nda Sürükle–B›rak (Drag’n Drop) Tekni¤i ❿ Grafikli Oyunlar ❿ Dinamik içerik Tekrar yüklenmesine gerek kalmadan içeri¤ini harici bir baflka dosyadan okuyabilen uygulamalar Bu liste DHTML ile yap›labileceklerin sadece baz›lar›n› kaps›yor. Yeri geldikçe StudioWeb serimiz boyunca bu listede yer alan uygulamalardan bir ço¤u için örnek çal›flmalar yapaca¤›z. DHTML konusunda daha fazla bilgi edinmek isteyenler, DHTML konusuna adanarak Türkçe olarak yaz›lm›fl ilk ve tek kitap olan DHTML ve CSS kitab›ndan faydalanabilirler: DHTML ve CSS, Numan Pekgöz, Pusula yay›nc›l›k, 2.bask› Numan Pekgöz numanpekgoz@chip.com.tr

» eCHIP StudioWeb+’da bu ay:
DHTML Menü
Bu bölümde ö¤rendi¤imiz DHTML görün-kaybol tekni¤ini kullanarak hem kolay hem de gösteriflli bir menü scriptinin nas›l yap›labilece¤ini bu ayki eCHIP’in StudioWeb+ bölümünde bulacaks›n›z. Not: Uygulamalar›n kaynak kodlar›n› da eCHIP’teki StudioWeb+ bölümünde bulabilirsiniz.

Flash Serisi

<<

Flash Filmlerine Dosya Aktarmak - 2
orkshop 7. say›m›zda “Flash Filmlerine Dosya Aktarmak - 1” bafll›kl› yaz›m›zda flash içerisine aktar›labilen dosya formatlar›, bunlar›n aktar›m flekli, swf dosyalar›n›n aktar›m›ndan ve k›saca d›flar›ya dosya aktar›m›ndan bahsetmifltik. Bu yaz›m›zda ses ve video formatlar›n›n aktar›m›ndan bahsedece¤iz. Bunlardan önce ise yine d›flar›dan dosya aktar›m›nda resim dosyalar›n›n vektörel hale getirilmesi ve flash ile de¤iflikliklerin gerçeklefltirilmesini inceleyece¤iz.

W

Color Threshold: 50 Minimum Area:1 pixel Cruve Fit: Pixels Corner Threshold: Many Corners dosya büyüklü¤ü (20kb

Bitmaplerin vektörel formata çevrilmesi (Trace Bitmap)
D›flar›dan File>Import ile flasha aktard›¤›m›z resim dosyalar›n› flash içerisinde üzerinde de¤ifliklik gerçeklefltirebilmek için Trace Bitmap komutunu kullan›yoruz.

gul.bmp Orijinal resim dosya büyüklü¤ü (45kb)

Modify>Trace Bitmap

Örnek bir çal›flma için File>Import ile bir resim dosyas› aktar›n. Flasha aktar›labilen resim formatlar›n› bitmap(bmp), jpeg(.jpg), png, gif olarak s›ralayabiliriz. Daha sonra resmi seçili hale getirip Modify>Trace Bitmap komutunu uyguluyoruz. Trace Bitmap penceresinde yer alan seçenekler; ❿¤Color Threshold: 1-500 aras›nda de¤iflen bir de¤er almaktad›r. Resmin içindeki renk de¤erleri aras›nda birbirine yak›nl›k derecesine göre bir ayr›m gerçeklefltirmektedir ve resmi renk de¤erlerine göre parçalayarak vektörel hale getirmektedir. Küçük de¤erler

resmi orijinal renklerine yak›n olarak vektöre çevrilmesini gerçeklefltirmektedir, yaln›z bunun dezavantaj› dosya büyüklü¤ünü artt›rmas›d›r. Yüksek de¤erler ise dosya boyutunu küçültmesine karfl›n orjinal resim ile aras›ndaki benzerli¤i azalmaktad›r. Color Threshold sayesinde resim renklerine göre parçalanacakt›r, vektörel haldeki seçimde ise renk ayr›mlar› baz al›nacakt›r. ❿¤Minimum Area: Bir rengin piksele atamas› yap›l›rken, pikselin etraf›nda yer alan dikkate al›nacak piksel say›s›n› belirler. Bu de¤er 1 ile 1000 aras›nda verilebilmektedir. Yüksek de¤erler detaylar› azaltacakt›r. ❿¤Curve Fit: E¤imlerin, kenarlar›n oluflumunu belirlemektedir. Piksel piksel, s›k› olarak veya yumuflak e¤imler belirlenebilmektedir. (“Pixels”, “Very Tight”, “Tight”, “Normal”, “Smooth”, “Very Smooth”) Piksel cinsinden detaylar ve benzerlik artacakt›r, yaln›z yine dosya büyüklü¤ünde art›fl gerçekleflmektedir. Smooth ve Very Smooth seçenekleri kenarlar›n yumuflakl›¤›n› belirlemektedir, yaln›z detaylar ve benzerlik azalacakt›r. ❿¤Corner Threshold : Köflelerin say›s›n› belirlemektedir. “Many Corners”, “Normal”, “Few Corners” seçenekleri yer almaktad›r. Çok, normal ve az olarak seçim yap›labilmektedir. Many Corners yani çok say›da köfle seçene¤i dosya boyutunu artt›racak yaln›z

orjinal resme benzerlik artacakt›r. fiekilde görüldü¤ü gibi gül resmini Trace Bitmap komutu ile vektörel hale getiriyoruz. Vektörel hale getirilmifl halini ikinci ve üçüncü flekillerde görmektesiniz. ‹kinci ve üçüncü aras›nda sadece Color Threshold de¤erini artt›r›yoruz ve dosya boyutunun azald›¤›n› görüyoruz. Ama yukar›da bahsetti¤imiz gibi Color Threshold de¤erini artt›rd›kça resmin detaylar› azalmaktad›r. Trace Bitmap ile vektörel grafi¤e çevirdi¤imiz resmin üzerinde de¤ifliklikler gerçeklefltirebiliriz. ‹mleç ile renk seçimini gerçeklefltirip Araçlar kutusundan Paint Bucket tool ile tek tek parçalar›n renk de¤iflikliklerini gerçeklefltirebilirsiniz. Vektörel grafi¤e dönüflen nesne üzerinde her türlü de¤iflikli¤i gerçeklefltirebiliriz. Araçlar menüsünde yer alan “Subselect Tool” ile grafi¤i oluflturan noktalardan seçim yap›p sündürebilirsiniz. Trace Bitmap komutunu kullan›rken dosya boyutunu sürekli göz önünde bulundurman›zda fayda var çünkü ço¤u zaman orjinal resimden daha çok yer kaplamakta ve dosya boyutunu artt›rmaktad›r. Bununla birlikte çok fazla vektör grafi¤in kullan›lmas› ifllemci h›z› yavafl makineleri zorlamaktad›r.

Break Apart
Trace Bitmap komutu d›fl›nda d›flar›dan aktard›¤›m›z resim dosyalar› üzerinde de¤ifliklik gerçeklefltirebilmek için “Break Apart” komutu da kullan›lmaktad›r. Break Apart komutunun fark› orjinal resim üzerinde renkleri de¤ifltirmenizi sa¤lamas›d›r ve kütüphanede orjinal resim dosyas›n›n yer almas› gerekmektedir. Trace Bitmap komutu kullan›lan resimler kütüphaneden silebilirsiniz. D›flar›dan File>Import ile ça¤›rd›¤›m›z resim dosyas›n› “Modify>Break Apart(Ctrl+B)”

Color Threshold: 100, Minimum Area:1 pixel, Cruve Fit: Pixels, Corner Threshold: Many Corners, dosya büyüklü¤ü (7kb) 16 • CHIP Workshop > >

>>

Flash Serisi

komutu ile flash içerisinde düzenlenebilir hale getirmekteyiz. Bundan sonra Araçlar kutusundan “Lasso Tool” seçiyoruz. Lasso Tool içinde yer alan “Magic Wand” ile parçalanm›fl resim üzerinde seçimi gerçeklefltiriyoruz. Seçim özellikleri için Magic

Wand’›n yan›nda yer alan butona t›klayarak Magic Wand Properties penceresini aç›yoruz. ❿¤ Threshold: 1-200 de¤erleri aras›nda de¤iflmektedir ve de¤er artt›kça renkler aras›nda geçifl oran› arttarak seçim gerçekleflmektedir. Azaltt›kça sadece ayn› de¤ere yak›n renklerden ve hassas seçim gerçekleflmektedir. ❿¤Smoothing: Seçili bölgenin pürüzlü veya yumuflat›lm›fl seçimi için kullan›lmaktad›r. Bu de¤erleri belirledikten sonra seçimi gerçeklefltirdi¤iniz alana Paint Bucket arac› ile renk de¤iflikli¤ini uygulayabilirsiniz.

meline zaman çizelgesinde herhangi bir layerda bofl bir frame’e sa¤ t›klad›ktan sonra panels>sound ile sound penceresini açarak frame’e ses dosyas›n› tan›mlayabiliriz.

durdurabilir(stop), event veya stream olarak belirleyebiliriz. Ayr›ca alt›nda yer alan Loop bölümü ile de sesin kaç kez tekrarlanaca¤›n› girebiliyoruz. Kütüphane içerisinde yer alan ses dosyas›na çift t›klayarak ya da sa¤ t›klay›p properties seçene¤i ile Sound Properties penceresini aç›yoruz. Burada ses dosyas›n›n kalitesini belirleyebiliyoruz. Dosyay› Update ile tekrar d›flar›dan import edebiliyoruz. Import ile yeni bir dosya ile de¤ifltirebiliyoruz. Compression menüsünden s›k›flt›rma formatlar›n› seçebiliyoruz. Burada en iyi s›k›flt›rma format› olarak Flash-5 ile gelen mp3 format› dosya boyutunu önemli ölçüde azaltmaktad›r. Bit Rate 8kbps ile 160kbps aras›nda bir seçim yaparak dosyan›n kalitesini de¤ifltirebiliyoruz. Ayr›ca stereo dosyay› mono formata çevrilebilmektedir. ‹nternet ortam› için 20kbps Quality: medium olarak belirleyebilirsiniz. Yap›lan de¤iflikleri Test butonuna t›klay›p dinleyebilirsiniz, ayr›ca alt tarafta dosyan›n büyüklü¤ü hakk›nda bilgi verilmektedir. (kbps=kilobitspersecond saniye bafl›na kilobit say›s›)

Flash’a Video Aktarmak
Sound penceresinde sound bölümünde ses dosyas›n› seçiyoruz. Alt›nda dosyan›n özellikleri belirecektir. Effect penceresinden sesin fliddetini, geçiflleri belirleyen efektler uygulayabilmekteyiz. Sa¤ hoparlörden sol hoparlöre geçen ses, artan veya azalan, sadece tek hoparlörden sesin ç›kmas› gibi özellikleri buradan uygulayabiliyoruz. Sync bölümünde sesi bafllatabilir(start), File>Import ile Quictime Movie Format olan mov uzant›l› video dosyalar›n› flash içerisine aktarabilmekteyiz. Yaln›z Flash-5 video dosyalar›n›n yönetimi konusunda Flash-Mx’e göre çok k›s›tl› kalmaktad›r. Flash Mx ile ayr›ca avi format›nda video dosyalar›n› da flash içerisine aktarabilmekteyiz. Mov formatlar›n›n Flash-5 içerisinde kullan›m› ise sadece tasar›m aflamas›nda zaman çizelgesinde çubu¤u ilerleterek görüntüleyebilmekteyiz. Bunun d›fl›nda bu dosyay› publish iflleminde kullanamamaktad›r. Bunun için yine Flash-Mx’i kullanman›z› tavsiye etmekteyiz. Macromedia Flash ile ilgili her türlü sorular›n›z› ve isteklerinizi bize iletebilirsiniz. Gelecek ay görüflmek üzere hoflçakal›n.
Ali YÜCEL aliyucel@chip.com.tr

Flash’a Ses Aktarmak
File>Import ile Files of Types menüsünden All Sound Formats seçene¤ini kullanarak sadece ses dosyalar›n›n listelenmesini sa¤layabilirsiniz. Flash’a aktar›labilen ses formatlar› wav, aiff, mp3 gibi formatlard›r. Ayr›ca QuicTime 4 veya üstü yüklü bilgisayarlarda ayr›ca afla¤›daki formatlar› flasha aktarabilirsiniz.
Sound Designer II (Mac için) Sound Only QuickTime Movies (Windows ve Mac) Sun AU (Windows ve Mac) System 7 Sounds (Mac) Wav (Windows ve Mac)

Flasha aktar›lan ses dosyas›n› Kütüphanede görebilirsiniz. Kütüphanede yer alan ses dosyas›n› Ti< CHIP Workshop • 17 <

Photoshop Serisi

<<

Photoshop ile Biçki Dikifl
fi›k görünen grafikler haz›rlamak için mutlaka plug-in paketlerini kullanman›z gerekmez. Do¤ru efektleri yerinde kullanarak siz de baflar›l› çal›flmalar yapabilirsiniz.

Kot kumafl›n›n yarat›lmas›
Yarat›lan dokuya kot benzeri s›k örülmüfl bir kumafl hissi verebilmek için öncelikle rengi belirlemeniz gerekir. En s›k tercih edilen kot rengi mavi oldu¤u için yandaki resimdeki de¤erleri girebilirsiniz. Daha sonra da File/New seçene¤i alt›ndan 400x400 piksellik yeni bir dosya yarat›n. Burada çözünürlü¤ü 150pixels/inch, “Contents”i de “Background Color” olarak ayarlay›n. Sonuç olarak fleklimizin en sa¤daki resim gibi görünmesi gerekir. fiimdi Filters/Sketch/Halftone Pattern filtresini seçin. Karfl›n›za gelecek olan pencerede “Size” de¤erini 1, “Contrast” de¤erini de 10 olarak ayarlay›n. Burada “Pattern Type”›n “Dot” olmas› gerekir. Filtreyi uygulad›ktan sonra fleklimiz ikinci resimdeki gibi olacakt›r. fiimdi tekrar Filters menüsü alt›ndan Stylize/Diffuse seçene¤ini seçin. Bu sefer karfl›n›za gelecek olan pencerede ise sadece “Mode”u “Lighten Only” olarak ayarlay›p “OK” tufluna t›klay›n. Diffuse filtresini uygulad›ktan sonraki flekil art›k kot dokusuna iyice benzedi. ‹sterseniz diffuse filtresini tekrar tekrar uygulayarak dokuyu de¤ifltirebilirsiniz. fiimdi Image/Image Size seçene¤i ile boyutu 200x200 piksele indirgeyip dokuyu s›klaflt›r›n. Daha sonra da Edit/Define Pattern seçene¤i ile flekli pattern olarak atay›n. Bir isim verip kaydedin. fiimdi art›k 1024 X 1024 çözünürlükte yeni bir dosya oluflturup pattern ile bu alan› doldurabilirsiniz.

KISA KISA

» Belli bir izi takip eden f›rça darbeleri
Photoshop ile de¤iflik f›rçalar kullanarak serbest olarak farkl› desenler yaratabilece¤iniz gibi bu desenleri daha önceden tan›mlad›¤›n›z bir Path boyunca düzenli olarak da s›ralayabilirsiniz. Bunun için öncelikle seçim arac› kullanarak bir seçim oluflturun. Daha sonra sa¤daki araçlardan Paths kart›na gelip “Make Work Path...” seçene¤ine t›klay›n ve Tolerans olarak 1.0 de¤eri girin. Be¤endi¤iniz f›rçay› seçip Path üzerine sa¤ tufl ile t›klay›p “Stroke Path” komutuyla istedi¤inizi gerçeklefltirebilirsiniz.

17 • CHIP Workshop > >

>>

Photoshop Serisi

Katlanm›fl halat
Bu örne¤in kare flekilli olmas› önemli oldu¤u için öncelikle File/New seçene¤i ile 600x600 piksellik bir kare dosya yarat›n Daha sonra Filter/sketch/halftone pattern seçene¤ini seçin ve buradaki de¤erleri Size=2, Contrast=50 ve Pattern Type=Line olarak ayarlay›n. Daha sonra CTRL-T tufllar›na bas›n ve resmi 45 derece kadar çevirin. fiimdi biraz daha gerçekçilik katmak için Filter/noise/add noise seçene¤inden faydalanabilirsiniz. Son resimdeki ayarlar› kullanabilirsiniz. fiimdi daha rahat çal›flmak için görünümü biraz büyütün ve dikdörtgen seçim arac› ile flekildeki gibi, istedi¤iniz halat kal›nl›¤›nda bir seçim yap›n. fiimdi CTRL-J ile seçimden yeni bir katman oluflturun. ‹lk katman› göz simgesine t›klayarak görünmez hale getirdikten sonra ince uzun seçiminizi çal›flma alan›n›n tam ortas›na tafl›y›n ve Filter/distort/polar coordinates seçene¤ine t›klay›n. “Rectangular to polar”› seçip OK tufluna t›klay›n. Siyah ve beyaz renkler aras›ndaki kontrast› biraz azaltmak için CTRL-L tufllar›n› kullanarak Levels penceresini aç›n. “Output Levels” de¤erini 103 civar›na getirmeniz yeterli olacakt›r. fiimdi halata biraz derinlik katmak için katman üzerine sa¤ tufl ile t›klay›p “Blending Options” seçene¤ini seçin. Karfl›n›za gelecek olan pencerede sol taraftaki listeden s›ras›yla “Inner Shadow” ve “Drop Shadow”u seçip yandaki 2. ve 3. resimdeki de¤erleri uygulay›n. Art›k tek kat da olsa halat fleklimiz ortaya ç›kt›. fiimdi katman› 4-5 kez kopyalay›n ve birbirlerinin üzerine gelecek flekilde tafl›y›n. fiimdi halat›n ucunu oluflturmak için görünmez yapt›¤›n›z katmandan CTRL-J ile tekrar benzer bir flekil kopyalay›n. fiekli dik çevirmemiz gerekece¤i için CTRL-T tufllar›na bas›n ve flekli 90 derece döndürün. Dalgal› formu vermek için Filter/distort/shear seçene¤ini yandaki flekildeki ayarlar ile kullanabilirsiniz. Bu parçaya da biraz önceki gölge ayarlar›n› aynen uygulay›n. Daha sonra halat›n ucunu di¤erlerinin üzerine uygun bir flekilde yerlefltirip ek yerini silgi arac› ile hafifçe yumuflat›n. fiimdi son olarak Layers kart›ndan “Flatten image” seçene¤i ile katmanlar› teke indirin. Halata renk vermek için ise Image/Adjustments menüsü alt›ndan Hue/Saturation seçene¤ini seçin. De¤erleri flekildeki gibi ayarlad›¤›n›zda gerçek rengine yak›n bir halat elde edebilirsiniz.
Mahmut Karsl›o¤lu, mkars@chip.com.tr

< CHIP Workshop • 18 <

Excel Serisi

<<

EXCEL UYGULAMALARI - 2
Excel’de kullan›labilecek bir çok kestirme yol vard›r. Birilerinin bu yollara iflaret koymas› gerekir ki, “Excel yolu”ndan gelen geçen bu ara sokaklar› da ö¤renebilsin.
eçen ay “Excel Uygulamalar›-1” bafll›kl› makalemizde Çarp›m Tablosunun en basit flekilde uygulamas›ndan bahsetmifltik. Sizlerden gelen bir çok mesajdan anlad›k ki, Excel’de “Tablo” komutunu ilk defa bu uygulama ile kullanm›fls›n›z. Yine bir çok okurumuz, http://www.excel.gen.tr sitesinde bulunan animasyonlar›n nas›l yap›ld›¤›n› ö¤renmek istiyorlar. Biz de bu ay ki makalemizi Excel’de animasyonlar üzerine haz›rlad›k. Öncelikle belirtmek isteriz ki Excel’de animasyon dedi¤imizde akl›m›za sadece bir fleklin sayfa üzerindeki hareketi gelmemeli. “Excel Uygulamalar›” makalelerinde sizlere hem bir fleklin hareketini hem de di¤er animasyon tekniklerinin nas›l olaca¤›ndan bahsedece¤iz.

G

yapaca¤›n›z için sayfadaki hücrelerde seçilebilecektir. Bu da size s›k›nt› verir. Oysa “Nesneleri Seç” simgesine t›klarsan›z, sayfa üzerinde herhangi bir hücreye çift t›klamad›¤›n›z sürece imleç normal moda dönmeyecek ve hücreler seçilmeyecektir. 2) “Çizim Araç Çubu¤u” üzerinden “Oval” simgesini t›klay›n ve fare imlecinizi sayfa üzerine konumland›r›n. 3) Klavyeden SHIFT (Üst Karakter) tufluna bas›l› tutun ve farenizin de sol tufluna bas›l› tutarak sayfa üzerine “Daire” çizimi yap›n. Dikkat ederseniz “Oval” fleklinde de¤il “Daire” fleklinde bir çizim oluflturmufl oldunuz. Çünkü Shift tuflu en ve boy orant›s›n› sabitler (fiekil-2).

“Aktif Sayfa” üzerindeki Oval 1 flekli seçilir.”
Selection.ShapeRange.IncrementLeft 0.75

Seçilmifl olan flekil alan› sayfa üzerinde sa¤a do¤ru do¤rusal olarak 0,75 birim hareket ettirilir.” “‹leri Hareket” makrosunu 10 defa üst üste çal›flt›rd›¤›n›zda flekil her defas›nda 0,75 birim hareket edece¤i için fiekil-3’deki solda bulunan 1. k›rm›z› çizgiden sa¤a do¤ru devam eden ikinci k›rm›z› çizgiye gelecektir.

fiEK‹LLER‹N HAREKET‹
Excel çal›flma sayfa üzerinde flekilleri hareket ettirebilmek için iki fleyi bilmeliyiz. Bunlardan birincisi “Çizim Araç Çubu¤u”nu kullanabilmek, di¤eri ise biraz kod yazabilmek. Her ikisini de basit düzeyde kullanabilmek yeterli olacakt›r. Çünkü kodlama k›sm›na yazm›fl oldu¤umuz kodlar› ad›m ad›m aç›klamaya çal›flaca¤›z. Ancak bu makalemizi neredeyse Excel’e yeni bafllayan okurlar›m›z›n da uygulayabilece¤i tarzda haz›rlad›k. Bu nedenle ad›m ad›m anlatt›¤›m›z uygulamalar› izleyiniz. 1) “Standart Araç Çubu¤u” üzerinde bulunan “Çizim” simgesine t›klay›n. Ekran›n herhangi bir yerinde “Çizim Araç Çubu¤u” belirecektir. Araç çubu¤unu sol kenar›ndan farenin sol tufluna bas›l› tutarak ekran›n herhangi bir bölümüne yerlefltirin. E¤er varsay›lan görüntülenme yerini de¤ifltirmediyseniz ekran›n alt k›sm›nda belirecektir (fiekil-1).

fiekil 3

fiekil 2

Yazd›¤›m›z kodu biraz daha gelifltirelim. Amac›m›z yukar›daki makronun yapt›¤› iflin 100 kat›n› tek bir seferde yapan makro kodu haz›rlamak olsun. Bunun için “‹leri Hareket” makrosunu afla¤›daki gibi de¤ifltirin.
Sub Ileri_Hareket() Dim i As Integer ActiveSheet.Shapes("Oval 1").Select For i = 1 To 100 Selection.ShapeRange.IncrementLeft 0.75 Next i End Sub

fiekli seçti¤inizde “Ad” kutusundaki flekil isminin de otomatik olarak verildi¤ine dikkat edin. Her yeni flekilde indeks numaras› artacakt›r. Siz isterseniz her flekle kendi ismini verebilirsiniz. 4) VBE sayfas›n› aç›n (ALT+F11). 5) “Insert” menüsünden “Module” komutunu seçin. 6) Aç›lan kod penceresine afla¤›daki kodlar› yaz›n.
Sub Ileri_Hareket()

fiekil 1

ActiveSheet.Shapes("Oval 1").Select Selection.ShapeRange.IncrementLeft 0.75 End Sub

Çizim Araç Çubu¤unu hemen hemen herkes kullan›r. Ancak pek kullan›lmayan bir komutu vard›r ki, çizim yap›l›rken size en faydas› olacak komuttur. “Nesneleri Seç” simgesi, çizim yapma modunda iken fare imlecini sadece çizim için ayarlar. Sayfa üzerinde dolafl›rken imleç normal olarak fleklindedir. Dolay›s› ile çizim yaparken sürekli t›klamalar

Yukar›daki kodu çal›flt›rd›¤›n›zda “Oval 1” isimli fleklin sa¤a do¤ru hareket etti¤ini göreceksiniz. ‹sterseniz kodlar› tek tek aç›klayal›m.
ActiveSheet.Shapes("Oval 1").Select

Öncelikle “i” ad›nda bir tamsay› de¤iflkeni tan›mlad›k. Daha sonra “Oval 1” isimli flekli seçtik. “i” de¤iflkeni 100 defa olmak üzere flekli 0,75 birim sa¤a do¤ru kayd›rd›. (Burada biraz da olsa For-Next döngüsünü bildi¤inizi varsay›yoruz. Çünkü geçti¤imiz aylarda bu tür döngüler hakk›nda konu içerisinde detayl› aç›klamalar yapm›flt›k.) Makro durunca fiekil-4’deki görüntüyü elde ettik. Dikkat ettiyseniz burada küçük bir görüntü bozuklu¤u bulunmaktad›r. Her defas›nda “Oval 1” flekli seçiliyor ve ondan sonra ifllem gerçeklefliyor. Bu seçme ifllemini ortadan
28• CHIP Workshop > >

>>
fiekil 4

Excel Serisi

içerisinde herhangi bir yere DoEvents yazman›z yeterli olacakt›r. Kodu afla¤›daki gibi de¤ifltirebilirsiniz.
Sub Ileri_Hareket() Dim i As Integer For i = 1 To 100 ActiveSheet.Shapes("Oval 1"). © IncrementLeft 0.75 DoEvents Next i End Sub

bir de¤er verirseniz sa¤a ötele hareketi ile dönme hareketi aras›nda uyumsuzluk olacak ve siz de bunu hemen fark edeceksiniz. fiimdi toplam kodumuzu yazal›m.
Sub Ileri_ve_Donme_Hareketi() Dim i As Integer With ActiveSheet.Shapes("Oval 1") For i = 1 To 100 .IncrementLeft 0.75 .IncrementRotation 0.75 DoEvents Next i End With End Sub

kald›rmak için kodlarda baz› de¤ifliklikler yapmam›z gerekiyor.
Sub Ileri_Hareket() ActiveSheet.Shapes("Oval 1").Select Selection.ShapeRange.IncrementLeft 0.75 End Sub

Yukar›daki kodu afla¤›daki gibi de¤ifltirebiliriz.
Sub Ileri_Hareket() ActiveSheet.Shapes("Oval 1").Increment Left 0.75 End Sub ©

Kodu çal›flt›rd›¤›n›zda fleklin hafifçe sayfa üzerinde sa¤a do¤ru kayd›¤›n› göreceksiniz. fiimdi fleklimizi biraz düzenleyelim. fiekil5 ve fiekil-6’y› inceleyerek siz de fleklinize dolfu efekti verin. Burada amac›m›z “Oval-1” isimli fleklin döndü¤ünü de yazaca¤›m›z kod ile ispatlamaya çal›flmak.

Bu flekilde kodu çal›flt›rd›¤›n›zda herhangi bir seçim olmadan fleklin sayfa üzerinde ilerledi¤ini fark edeceksiniz. fiekli 100 defa 0,75 birim ilerletmek istedi¤inizde ise kod afla¤›daki düzenlenmelidir.
Sub Ileri_Hareket() Dim i As Integer For i = 1 To 100 ActiveSheet.Shapes("Oval 1").Increment © Left 0.75 Next i End Sub

fiekil 5

Dikkatli olan okuyucular›m›z, bu uygulamay› gerçeklefltirmek istediklerinde her fleyin yolunda gitmedi¤ini fark edeceklerdir. Çünkü biz burada bir animasyon yani di¤er bir deyiflle hareket oluflturmaya çal›fl›yoruz. Oysa bu kodlara göre makroyu çal›flt›rd›¤›n›zda flekil bulundu¤u konumdan 100x0,75=75 birim sola ötelenmifl oldu. Fakat arada herhangi bir hareket gözlemlenmedi.

Kod kafan›z› kar›flt›rmamal›. Çünkü yine geçen say›lar›m›zda With-End With blo¤undan bahsetmifltik. Bir çeflit ortak çarpan parantezine almak oldu¤unu söylemifltik. Bu tür kodlarda da ActiveSheet.Shapes("Oval 1") gibi tekrar eden kodlar okumay› zorlaflt›rd›¤› için With-End With blo¤u içerisine al›yoruz. Kodu çal›flt›rd›¤›n›zda “Oval 1” isimli fleklin hem döndü¤ünü hem de ilerledi¤ini göreceksiniz. Gördü¤ünüz gibi Excel sayfas› üzerinde bir cismi hareket ettirmek hiç de zor de¤ilmifl. Art›k siz de bu tür ifllerin öyle çok büyük programc›l›ktan geçmedi¤ini anlam›fl oldunuz. fieklin sa¤a öteleme hareketi yapmas› için IncrementLeft ve dönme hareketi yapmas› içinde IncrementRotation metotlar›n› kulland›k. Ancak fleklin geriye yani sola do¤ru hareket etmesi için bunlar›n ‹ngilizce karfl›l›¤›nda z›tlar› olan Right metodunu kullanmayaca¤›z. En daha basit bir ifllemle ayn› metodu kullan›p sadece say›sal birimin önüne “-” iflaretini koyaca¤›z. O halde afla¤›daki kodu yazd›¤›n›zda flekil sa¤dan sola öteleme hareketi yapacak ve saat ibrelerinin aksi istikametinde de dönme hareketini gerçeklefltirecektir.
Sub Ileri_ve_Donme_Hareketi() Dim i As Integer

fiekil 6

With ActiveSheet.Shapes("Oval 1") For i = 1 To 100 .IncrementLeft -0.75 .IncrementRotation -0.75 DoEvents Next i End With End Sub

DoEvents ile Hareketleri Görmek
fiekil, bafllang›ç konumundan 75 birim ötedeki durufl konumuna kadar tam 100 defa 0,75 birimlik hareketler gerçeklefltirdi. Ancak biz bu aradaki olaylar› görmedik. Çünkü makronun özelli¤i budur. ‹fllemlerimizi çok h›zl› yapmas›. Ancak aradaki olaylar›n görüntülenmesi için DoEvents komutunu kullanabiliriz. Bunun için For-Next döngüsünün
< CHIP Workshop • 29 <

S›ra, fleklimizi hem sa¤a do¤ru öteleme hareketi yapt›racak hem de saat ibrelerinin yönünde döndürecek kodu yazmaya geldi. Öncelikle rahat kavranabilmesi için flekli döndürmeye yarayan kod sat›r›n› yazal›m.
ActiveSheet.Shapes("Oval 1").Increment Rotation 0.75 ©

UYGULAMA-1
fiekil-7’deki gibi bir çizim düzeni oluflturun. Sayfa üzerine çizili olan 4 adet fleklin sadece Oval olan› hareketli di¤erleri ise sabittir. fiekillerin Genifllik ve yükseklikleri ise fiekil-

Burad da döndürme aç›s› olarak 0,75 birim kulland›k. Siz bunu fleklinizin büyüklü¤üne göre ayarlayabilirsiniz. E¤er çok büyük

Excel Serisi

<<

7’deki belirtilmifltir. Amac›m›z “Çizgi-1”e dayal› “Oval 1” fleklini ileri öteleme ve dönme hareketi yapt›rarak “Çizgi-3”e çarpt›rmak. “Oval 1” flekli, “Çizgi 3” e çarpt›¤›nda ise öteleme yönü ve dönme yönü aksi istikamette olacak flekilde hareket etmesini sa¤lamak. Afla¤›daki kodlar› yazd›¤›n›zda yukar›daki uygulaman›n gerçekleflti¤ini göreceksiniz.

UYGULAMA-2
Uygulama-1’i biraz daha gelifltirelim. Bunun için basit bir Araba tasar›m› yapmam›z yeterli olacakt›r. Biz Çizgilerden oluflan basit bir araba tasar›m› haz›rlad›k. Tamam, biliyoruz araba bu flekilde olmaz ancak biliyorsunuz ki tasar›m bir yetenek iflidir. Biraz da zaman. Bizim haz›rlad›¤›m›z araba tasar›m›nda çizgiler haricinde sadece 2 adet tekerlek kulland›k. Bu tekerlekleri, Çizim Araç Çubu¤undaki Temel fiekiller grubundan ald›k (fiekil-8). fiekil8’de görülen araban›n tekerlekleri haricindeki bütün çizgileri seçtik ve grupland›rd›k. Bu gruba da “Grup1” ad›n› verdik. Araban›n önündeki tekerlek flekline “Teker1” ve arkas›ndaki tekerlek flekline de “Teker2” adlar›n› verdik.

hareketi yaparken, saat ibrelerinin yönünde dönme hareketi yapacak. Teker2 (Ön Tekerlek): Sa¤a do¤ru öteleme hareketi yaparken, saat ibrelerinin yönünde dönme hareketi yapacak. Yukar›da hareket tarzlar›n› verdi¤imiz üç flekil de ayn› anda hareket edece¤i için, hareket kod sat›rlar› ayn› For-Next döngüsü içerisinde olmal›. fiekil-10’daki kodlar› herhangi bir modül sayfas›na yaz›n ve çal›flt›r›n.

fiekil 7 fiekil 10

Sub Ileri_Geri_Donme_Hareket() Dim i As Integer With ActiveSheet.Shapes("Oval 1") For i = 1 To 300 .IncrementLeft 0.75 .IncrementRotation 0.75 DoEvents Next i For i = 1 To 300 .IncrementLeft -0.75 .IncrementRotation -0.75 DoEvents Next i End With End Sub

Kodu çal›flt›rd›¤›n›zda gövde ile tekerleklerin uyumlu bir flekilde hareket etti¤ini göreceksiniz. Burada bir yoruma ihtiyaç var. Bu yorumu yapabildiyseniz olay›n s›ralama k›sm›n› kavram›fls›n›z demektir.

Yorum:
Vücudumuz hareketlerini düflünelim. Ellerimiz ve ayaklar›m›z› ayn› anda hareket ettirebiliyoruz. Çünkü genel de bu hareketlerimizi düflünerek yapm›yoruz. Tamamen bir refleks sonucu ya da en az›ndan ben öyle zannediyorum. Ancak biz her yapaca¤›m›z hareketi düflünerek yapm›fl olsayd›k. Bunun bir s›ralamas› olacakt›. Önce ellerimizi hareket ettirdi¤imizi düflünecek ve ellerimizin hareketini sa¤layacakt›k. Daha sonra da ayaklar›m›z›n hareket etmesini düflünecek ve ayaklar›m›z›n hareketini sa¤layacakt›k. Yani önce hangi hareketi düflünür ve uygulamaya geçersek, o organ›m›z di¤erinden zaman aç›s›ndan önce hareket edecekti. Yazm›fl oldu¤umuz kodlamada da durum ayn›d›r. Önce Araban›n gövdesi harekete geçti ve 0,75 birim sa¤a do¤ru ilerledi. Hemen ard›ndan ön tekerlek önce ilerleme hareketi yapt› ve bitirir bitirmez de dönme hareketini gerçeklefltirdi. Ard›ndan da ayn› hareketleri arka tekerlek yapt›. O halde flunu söyleyebiliriz. E¤er gözümüz bilgisayar›n uygulam›fl oldu¤u o komutlar› alg›layabilseydi her hareketin ard› ard›na yap›ld›¤›n› fark edecektiniz. E¤er kodlar› afla¤›daki gibi de¤ifltirirseniz siz de bunu hareketleri gözlemleyebilirsiniz.
Sub Arabanin_Hareketi() Dim i As Integer For i = 1 To 200

fiekil 8

fiekillere AD” Vermek
1) Fare ile “AD” vermek istedi¤iniz flekli seçin. 2) “Ekle” menüsünden “Ad” alt menüsünü, buradan da “Tan›m” komutunu t›klay›n. 3) Ekrana gelen “Ad Tan›mla” penceresindeki “Çal›flma Kitab›ndaki Adlar” kutusuna istedi¤iniz ad› yaz›n ve “Tamam” dü¤mesine t›klay›n (fiekil-9).

Daha önce yapt›klar›m›zdan fazla bir fark› yok sadece her iki hareketi de pefl s›ra yapt›rd›k o kadar. Bu hareketin 10 defa tekrarlanmas›n› istiyorsan›z kodlar› afla¤›daki gibi de¤ifltirebilirsiniz.
Sub Ileri_Geri_Donme_Hareket() Dim i As Integer Dim j As Integer With ActiveSheet.Shapes("Oval 1") For j = 1 To 10 For i = 1 To 300 .IncrementLeft 0.75 .IncrementRotation 0.75 DoEvents Next i For i = 1 To 300 .IncrementLeft -0.75 .IncrementRotation -0.75 DoEvents Next i Next j End With End Sub

fiekil 9

Ayn› pencereyi tekrar açt›¤›n›zda fiekil9’daki gibi tan›mlad›¤›n›z “Ad”›n listelendi¤ini göreceksiniz. fiimdi olay› tasarlayal›m. Grup1 (Araban›n Gövdesi): Sadece sa¤a do¤ru öteleme hareketi yapacak. Teker1 (Ön Tekerlek): Sa¤a do¤ru öteleme

30 • CHIP Workshop > >

>>
IncrementLeft 0.75 For j = 1 To 50 DoEvents Next j IncrementLeft 0.75 For j = 1 To 50

Excel Serisi

ActiveSheet.Shapes("Grup1").

©

Next j ActiveSheet.Shapes("Teker2"). IncrementLeft 0.75 For j = 1 To 50 Range("A1") = Range("A1") + 1 DoEvents ©

Ödüllü Yar›flma Sorusu
Bu sayfam›zda ödüllü bir sorumuz bulunmaktad›r. Cevaplar›n içerisinden seçece¤imiz 3 arkadafl›m›za ödüller verece¤iz. Yar›flmaya kat›lan arkadafllar›m›z haz›rlad›klar› xls dosyalar›n› .zip yada .rar s›k›flt›rma araçlar› ile s›k›flt›rarak yarisma@excel.gen.tr adresine gönderebilirler. Bu yar›flmadaki amac›m›z biraz da e¤lenmek ve yönlendirmek. En uygun çözümü bulan yar›flmac› arkadafllar›m›za afla¤›daki ödülleri s›ras›yla verece¤iz. 1) Olan Yar›flmac›ya: Makrolar Kitab› 2) Olan yar›flmac›ya: 6 Ayl›k Class Module dergisi aboneli¤i 3) Dosya Arflivi Cd’si
M. Temel Korkmaz temelkorkmaz@excel.gen.tr

Range("A1") = Range("A1") + 1

ActiveSheet.Shapes("Teker1").

©

Next j ActiveSheet.Shapes("Teker2"). IncrementRotation 15# For j = 1 To 50 Range("A1") = Range("A1") + 1 DoEvents ©

Range("A1") = Range("A1") + 1 DoEvents Next j ActiveSheet.Shapes("Teker1"). IncrementRotation 15# For j = 1 To 50 Range("A1") = Range("A1") + 1 DoEvents ©

Next j DoEvents Next i End Sub

< CHIP Workshop • 31 <

Sign up to vote on this title
UsefulNot useful