DataLife Engine > Teknoloji haberleri > flash projeleri

flash projeleri


12 Haziran 2008. Düzenleme: KraL
Flash'ın birçok özelliğinden yararlanarak, birçok hazır aracı kullanıp tasarımları zenginleştirmek ve sonrasında ortaya çıkan başarıya bakarak, "güzel iş çıkarttık" demek biz tasarımcıların en büyük keyfidir. Özellikle de bir zaman problemimiz olmadığında.
Öğrenme aşamasındayken, herhangi bir iş yetiştirme sorunumuz yokken ya da sadece keyif almak için uğraşıyorken Flash'la çok güzel tasarımlara imza atabiliriz. Ne var ki, elimizde yetişmesi gereken bir iş varsa ve bu iş üzerinde çalışırken bir şeyler öğrenmeye çabalıyorsak o zaman işin rengi biraz değişir ve bazen ıstırap verici bir hal alır.
Bu nedenle de burada daha büyük proje yapımlarını tartışmadan önce bazı küçük püf noktalarına değinmekte yarar var. Bu küçük püf noktalan, yeri geldiğinde bize çok yardımcı olacak büyük ve önemli kozlar haline gelecektir. Öncelikle tıpkı uzay düzleminde

www.bio-hak.nl
www.orqanizeisler.com
www.caiado.com.br/site/index.asp
www.leoburnett.ca
www.susannavokohenkel.com
www.badthisevenz.web.pt
www.kreativemindz.cl
www.ohlconcesiones.com
www.mrmass.com
www.studiosaray.com
www.3ppin.com
www.Qaiamobili.it

olduğu gibi, (doğal olarak) Flash içinde de her objenin bir konumu ve boyutu olduğunu bilmeliyiz. Objelerin, x ve y düzlemlerinde bir koordinatları vardır ve bir genişliğe ve boya sahiptir.
Bu özellikleri Flash içinde tanımlamaksa bizim ekstramız olacaktır. Flash, objelerin koordinat düzlemindeki konularını ve ebatlarını belirleyebilir ve biz de bu bilgileri ekrana yansıtabiliriz.

Flash'ta konum ve boyut değerleri

önce obje kelimesini Flash diline çevirerek movieClip ifadesini kullanalım. Flash için yer tanımlaması, tanımlanacak olan objelerin movieClip olmasına bağlıdır.
Sarı yuvarlak adlı yeni bir proje hazırlayalım. Amacımız, sarı yuvarlak bir obje oluşturup bunun koordinatlarını ve boyut bilgilerini saptamak olsun.
.,*"....■,--—,
Timeline'ımızda bir layer açalım ve içine sarı yuvarlak bir şekil çizelim. Az önce
belirttiğimiz gibi önce bu objemizi bir movieClip içine almamız gerekecek. Window > Properties seçeneğinden Özellikler penceresini açarak movieClip'in instance name'ini, "sari" olarak belirleyelim.
İnstance name, movieClip tanımlamaları için bir çeşit nick name'dir, yani takma addır. Bizim örneğimizde ele alırsak programlama sırasında "sari" dediğimizde o movieClip'i kastettiğimiz anlaşılacaktır.
Şeklimizin ebat ve koordinatlarını bize göstermesi için Timeline'ımızda yeni bir layer açalım ve onun da içine dinamik yazı alanları girelim. Yazı alanını girdikten sonra Özellikler penceresinde Static, Dynamic ve Input Text seçeneklerini göreceksiniz. Sistemi otomatikleştirmek için yazı alanımızı Dynamic Text haline getirelim. Dynamic Text'imiz yine movieClip'te olduğu gibi bir örnek adı almalı. Projemizin x düzlemindeki yerini bildiren koordinat değerini gösterecek olan yazı alanımıza "sari_x" adını verelim.
Dinamik yazı alanımızın renk, font, font size, blok, tek veya çok satır gibi özelliklerini de yine Özellikler pencerede belirleyebilirsiniz.

Örneğimizde de olduğu gibi, aynı şekilde 4 tane yazı alanı oluşturalım. Bunların instance
name alanlarını sırayla sari_x, sari_y. sari_w, sari_h şeklinde adlandıralım. x ile x koordinatını, y ile y koordinatını, w ile genişlik değerini, h ile de yükseklik değerini göstereceğiz.
Yazı alanlarımız ve şeklimiz, artık projemizde ve dilediğimiz yerde hazır bulunmakta. Şeklimizi baz alarak yanındaki yazı alanlarının boyutlarını ve koordinatını projemizde göstereceğiz.
Kod satırı

Timeline'ımızda en yukarıya boş bir Keyframe atayalım. Bunun için Timeline'a sağ tıkladığımızda çıkan pencereden Insert Blank Keyframe'i seçebilir ya da Insert > Timeline > Blank Keyframe komutunu verebiliriz.
Artık ekranın en üstünde yer alan boş bir Keyframe'imiz var ve kodları yazmamızı bekliyor:
En önce koyacağımız kod stopO;
olacak. Bu kod projemizi sürekli sona gidip başa dönerek gireceği döngüden kurtaracaktır. Hazır yeri gelmişken Flash'ta dinamik yazı alanları için kullanacağımız minik bir kod öğrenelim.

Dinamik yazı alanı oluşturup, bu yazı alanına bir isim verebildiğimizi hatırlayalım. Diyelim ki oluşturduğumuz yazı alanının instance name'i isim olsun. İlgili kodumuz;
isim.text="fati";
olursa movie'yi Export ettiğimizde alacağımız sonuç; dinamik yazı alanı yerinde fati yazısının görünmesidir. Burada isim adını verdiğimiz yazı alanımızın text değerini, fati yazısına eşitleyerek isim adı altındaki bütün dinamik yazı alanlarının içini fati ile doldurabileceğimizi garantilemiş oluyoruz. Şimdi konumuza geri dönerek dinamik yazı alanını tanımlama bilgilerimizi kendi örneğimizde pekiştirelim. 4 tane dinamik yazı alanımız var ve her birinin adları belli. Her birinin text değerliğini girmek için önce eşitliğin bildiğimiz tarafını aşağıdaki şekilde yazalım:
sari_x.text= sari_y.text= sari_w.text= sari_h.text=

Eşitliğin boş taraflarının neyle dolmasını istediğimizi biliyoruz. Sadece ifade edebilmemiz gerekiyor. Öncelikle şuradan hareketle yola çıkarsak her şey daha az karmaşık görünecek. Bilmemizi istediğimiz özellikler sarı yuvarlak şeklimize ait. Yani sarı yuvarlak objemizin "özelliklerini bilmek istiyoruz ve bu sarı objemizi movieClip haline getirip bir isim vermiştik bile: sari. Şu halde, "sari"nin x, y, genişlik ve yükseklik özelliklerinin Flash için denk düşen kavramlarını öğrenelim:
sari._x; sari._y; sari._width; sari._height;
Görüldüğü gibi bize hiç de yabancı olmayan "sari"nin -x, -y _width ve _height özellikleri sari ile birleşince anlatmak istediklerimiz koda dönüşmüş oluyor.
Şimdi kod hanemizdeki eşitliğimizi tamamlayalım.
sari_x.text= sari._x; sari_y.text= sari._y; sari_w.text= sari._width; sari_h.text= sari._height;

Movie'mizi test ettiğimizde alacağımız sonuç aşağıdaki gibi olacaktır.
sarı yuvarlak
Bu basit örneğimiz bir adım daha karmaşık bir yapıya sahip olabilirdi. Mesela bu örneğimiz başka bir movieClip içinde yer alabilir, ya da biz bir movieClip içindeki başka bir movieClip'e ait bir objeye ait bilgileri elde etmek isteyebilirdik.
Bir adım daha karmaşıklaşan olayımızda mantığımızı yine aynı şekilde kurmalıyız. Bu sefer mor renkli bir yuvarlak oluşturalım ve
içine de bordo bir kare şekil çizelim. Mor yuvarlak için "Mor" adlı bir movieClip, bordo kare için ise "Bordo" adlı bir movieClip oluşturalım. Bilmek istediğimiz; hem Mor'un hem de Bordo'nun özellikleri olsun.

Mor için işlemimiz kolay

Yazı alanlarını da adeti bozmayarak mor_x, mor_y ve mor_w olarak belirtmiş olalım. (Yükseklikle ilgili bir veri almak istemediğimizi var saydık).
Kodumuz:
mor_x.text= mor._x; mor_y.text= mor._y; mor_w.text= mor._width;
Normal şartlarda Bordo için de durum aynı olmalı:
bordo_x.text= bordo._x; bordo _y.text= bordo._y; bordo _w.text= bordo._width;

Resimler için Flash'ın Blend özelliği

Geçtiğimiz ay değindiğimiz Filtreler konusunda, Flash içinde değişik ve özgün tasarımlar yapmaya izin verecek yeni araçlardan bahsetmiştik. İster yazı ister görsel malzeme üzerinde, Photoshop filtreleriyle yarışabilecek çok sayıda filtreyi de inceleme fırsatı bulmuştuk.
Yazı üzerinde denemeler yaparak Drop Shadow, Blur. Glow, Bevel, Adjust color özelliklerini, yazılarımıza farklı görünümler vermek amacıyla kullanmıştık. Bu aysa resimler üzerinde neler yapabileceğimize yine kısaca değineceğiz.

Projenize bir resim eklediğinizde resimle proje arasında nasıl farklı
kompozisyonlar oluşturabileceğinizi göreceksiniz. Flash aslen bir fotoğraf düzeltme programı olmadığı için resim üzerinde doğrudan bir düzeltme yapamaz. Bunu mümkün hale getirmek için resmi önce bir movieClip içine alın. Blend resmin orijinal özelliklerini değil movieClip haline geldikten sonra movieClip'in resim üzerine etkiyebilecek özelliklerini değiştirir. Özellikle renk ve kontrast niteliklerine yönelik olanlan... Resminizin içinde olduğu movieClip'in üzerine gelerek özellikler penceresinde Blend kutucuğunu seçin. Önünüze bir sürü daha çok ışık ya da alpha değerleriyle ilgili özellikler
İşte burada küçük bir nokta var: Bordo, Mor'un altında yer alan bir movieClip'tir. Yani Bordo Mor'un alt kümesidir. O halde kodumuza "_root" eklememiz gerekir. _root, çok önceleri _tellTarget ile JevelO seviyesine yükseltme kodumuzun ileri programlama dilindeki halidir. Şu halde kodumuzu;
bordo_x.text= _root.bordo._x; bordo _y.text= _root. bordo._y; bordo _w.text= _root.bordo._width;
şeklinde olmalıdır. Gördüğünüz gibi, _x,_y,_width ve _height değerleri Flash içinde tanımlı olduğu için bu özelliklerinizi bilmek istediğimiz movieClip'lerimizin adlarının yanına getirerek, önce doğru cümleler sonra da doğru kodlar kurmak zor değil. Bu özellikleri daha geniş kapsamlı projeler üretirken ileride örneklendireceğiz ve bazı işleri bu küçük bilgiler sayesinde ne kadar az zamanda yapabileceğimizi göreceğiz. Bu da değerli vaktimizi daha önemli ve ileri düzey konulara yoğunlaştırmamızı kolaylaştırmış olacak.