Arkadaşlar merhaba ;
Daha önce uygulamasını yaptığımız Flash içerisindeki uzun yazılarımıza ScroolBar
ekleme yazısında http://ercanaltug.blogspot.com/2007/09/flash-iinde-yazlara-scroolbar-ekleme.html hatırlarsanız Componenet'lar yardımıyla bu işlemlerimizi yapıyorduk.Ancak çıkan scrool gri renkte çıkıyor bazı arkadaşlarımızın tasarımlarında renk uyuşmazlığına yol açıyordu.Componentlar hazır kodlar oldukları için sizler sadece o componentı yaratan developerın parametreler kısmında veya Component Inspector size tanıdığı haklar kadar o componentı özelleştirebilirsiniz.

Yukarıda örneğini altta da fla dosyasını indirebileceğiniz uygulamamızda ise artık sadece Dynamic Text alanımız var,2 tane yazıyı aşağı yukarı kaydıran butonumuz var.
Fla dosyasındaki actionscipt kodlarını açtığınızda ;

this.createTextField("runtime_txt", 1, 50, 50, 400, 200);

kodu yaratılacak text'in adını ve boyutunu belirtiyor.Sahnede verdiğiniz boyutun bir önemi yok.


runtime_txt.text+="Ercan ..."
... ile devamı olan uzun yazınızı bu kısma ekliyorsunuz.


yukari_btn.onRelease=function(){
runtime_txt.scroll--;
asagi_btn.onRelease=function(){
runtime_txt.scroll++;

yukarı_btn ve asagi_btn instance name atanmış 2 butonun da aşağı yukarı işlevini kazandıran satırda burası. Butonların stili tamamen keyfinize kalmış.



İyi tasarımlar....

http://www.expressionforum.net/al2y/scroolbar.fla

Myfonts.com 'un What the Font?! uygulamasının adını ilk duyduğumda klasik bir küfür cümlesine göndermesinden dolayı ciddiyetten uzak sadece eğlence amaçlı bir uygulama gibi gelmişti.Ancak şimdi yaptığı işleri ve gelişimini görünce gerçekten birçok yerde kullanmaya başladım. İnternette gördüğünüz bir fontu screenshot yaparak veya o fontu barındıran görselin kaynağını göstererek WhattheFont'a fontu analiz etmesini sağlıyabiliyoruz.

Örnek olarak NTV Spor yazısını denedim. Her ne kadar O karakter fontunu g olarak algıladıysa da yaklaşık fontlar verip o fontları download linklerini de sunması gayet etkileyici.
Seçiminizi de alttaki gibi karşılaştırma yapabilmeniz için yanında taşıması da büyük bir kolaylık.


Kesinlikle deneyin çok eğlenceli , Faydalı olması dileğiyle ...

Merhaba arkadaşlar ;
Artık internette sık sık gördüğümüz Web 2.0 stilinde logolar , bannerlar aslında temelinde bir yansıma ve saydam bir şeritten ibaret. Adım adım bir RSS logosunu bu şekilde tasarlamanın mantığını burada göstereceğim siz de kendi logolarınıza bu adımları uygulayabilirsiniz.

Adobe Photoshop'ta 500 - 500 piksel beyaz arkaplanlı bir dosya açın.Köşeleri yuvarlanmış(rounded rectangle tool) ile radius 8 px iken shift tuşuna basılı alttaki gibi bir kare çizin ve renklerini de daha sonra Gradient seçip #BC0000 ve #DE0002 olarak verin.

Bu layerı daha sonra Duplicate Layer diyerek çoğaltın. Çoğalttığınız layerın adını cam olarak atayın ve üstte alın. Bu layerın Blending Options Overlay den rengini #FFFFFF olarak verelim ve opacity %50 getirelim. Daha sonra alttaki rengi elde etmeniz gerekte , square marquee tool ile alttaki gibi bir seçim yapın ve Delete tuşuna basarak o kısmı silin.

Şeklimize bir çeper görünümü eklemek için 1 piksel genişliğinde daha koyu bir kırmızı alttaki gibi ekledim.

Kenarlarına da beyaz çizgiler ekleyerek uclarından Marquee Tool -Feather 30 iken biraz silerek alttaki görseli elde edelim.

Şimdi RSS ikonu için gerekli beyaz şeritleri AutoShapes kısmından bularak ekleyelim. Daire ve parantezleri kullanın.

Görselimiz tamam şimdi yansımayı tamamlayacağız. Gaussian Blur 1 pks olarak alttaki gibi verelim.

Daha sonra görselin 1e 1 kopyasını aşağı basmak için Layerı duplicate edelim ve Flip Vertical diyelim.

Aynı şekilde Marquee tool ile feather 30 iken 2-3 kere delete tuşuna basalım.

Alttaki yansıma layerının Opacity sini çokaz düşürürseniz alttaki şekli elde edersiniz.

Referans : 9Tutorials

Cebit Bilişim Eurasia 2007 fuarını dün ziyaret etme fırsatı bulabildim.
Öncelikle bu fuara İstanbul'da demek bin şahit ister onu belirtmeden geçemeyeceğim,İstanbul tabelaları dolu şehir dışında bir yerlerdeydi.
Amerikalıların deyimiyle ordan da Downtown'a dönmek trafik yüzünden gayet maceralı oldu,ancak yine de Bilişim ve teknoloji fuarı nerde olursa olsun ziyaret edilmeli.Son brikaç yıldır farketmeden hayatımızın vazgeçilmezleri olmaya başlamış cep telefonları şimdilerde ise laptoplar artık vazgeçilmez durumdalar. Bu fuarda da birbirlerine iyice entegre oldukları ve geliştiklerini gördük.Fuarın yıldızı 3G ve Turkcell idi herkes bir müşteri hizmetlisi ve ya arkadaşıyla görüntülü konuşmak için sıradaydı. Bence güzel olan ise eski dost Medyasoftu tekrardan aramızda görmek oldu.Eğitim sektörünün kilometre taşları Netron ve Bilgeadam'ın katılmadığı fuarda sektörün seniorları Edutime,Arıbil,Bilişim,Bilimer ve tabiiki SmartPRO güzel standlar açmışlar. Hepsini gezmeye fırsatım olmadı ancak gerçek anlamda o gürültüde pozitif bişeyler yapaya çalışan Arıbil'i eğitim odasını,eğitmenlerini ve seminerler takvimlerini gördüm,kutluyorum eğitim anlamında yaptuığımız asıl işi unutmadan pazarlama taraftarı oldum hep.İnşallah Compex'te büyüklerinde katılımıyla hem eğitim hemde bilişim anlamında daha güzel bir fuar bizi bekliyor.Aralık ' ta görüşmek üzere diyorum.

Adobe Illustrator üzerine kurabileceğiniz çoklu sayıda ve stilde çeper eklenebilen bu Plug-in gerçekten güzel sonuçlar elde edebiliyorsunuz. Tavsiyemdir...

İndir

Photoshopta 800×700piksel bir sahne açın. Pen Tool kullanarak aşağıdaki gibi bir araba şirketi logosu tasarlıyalım.Pen Tool ile başlangıç ve bitiş noktalarına tıklayarak çizimi yapın.

Çizim bittikten sonra sağ tıklayarak Make Selection diyelim.Yeni bir layerda #FC610D ile #F99A04 renkleri arasında Gradient bir renk verelim.

Şimdi logoyu şirket adı ile tamamlamak için aşağıdaki hale gelebilmesi için şirket adını yazalım ve baş harflerini lastik temsil edicek şekilde daire içinde yazalım.


Şirketimizin logosu hazır şimdi banner tasarlayacağız.Internetten bulacağınız bir araba resmini parça parça opacity ile oynanmış ekleyelim. Görselimize bir background verelim ve yeni bir Layerda arka plan fotoğrafı ekleyelim.Araba fotoğrafının üstte olmasına dikkat edin. Örnekte dalga fotoğrafı eklenmiş. Daha sonra arabanın bulunduğu Layera Blending Mode Soft Light verelim. Ve dalganın sağ kısmını örtmek için Layer mask ile sağdan sola geçiş Gradient verelim.

Logo ve banner kısmı tamamlandıktan sonra şimdi menu kısmına bakalım. Arabanın rengiyle uyuşumlu bir dikdörtgen çizelim.

Daha sonra dörtgenin orta kısmına zoom yapın ve alttaki gibi Pencil Tool ile bir adet siyah bir adet beyaz çizgiyi yan yana çizin.Ve çizgilerin Opacitylerini %30’a getirin.

Menu de tamamlanmıs oldu. Sitemizi ortaya çıkarıcak görselleri ve yazıları eklediğinizde aşağıdaki gibi bir hazır template siteyi ortaya çıkarmış olduk. Doğru görseller ve yerleşim (mizanpaj) burada çok önemli. Yandaki Flash menu içinde eski Flash Menu proje notlarımdan faydalanabilirsiniz.

Arkadaşlar yukarıdaki gibi etkileyici bir geçişi sandığınızın aksine hiç Actionscript yazmadan yapabilirsiniz.Sadece maske ve alpha kullanarak.

http://ercanaltug.googlepages.com/flash-banner.fla

Websitenize ekleyeceğiniz fotoslide sunumları için çok basit ancak göze hoş gelen geçiş efektli bu uygulamayı kullanabilirsiniz. Fotolarınız dağılarak bir sonrakine geçecektir. Actionscript kodları fla dosyasında 2 frame toplanmış ve 30.satırda transition adında bir fonksiyon tanımlanmış ve geçiş efekti kodları bu fonksiyonda toplanmış. Size kalan ise ekrana koyacağınız görüntülere karar vermek kalıyor. Buton ise bir movie klip ve instane name olarak doTrans seçilmiş ve bu butona tıklandığında transition efektini başlatmamızı sağlayan kod ise :

doTrans.onPress = transition;

Ayrıca bu efekti yazı dolu olan sayfa geçişlerinde de kullanabilirsiniz.

Kolay gelsin....

http://rapidshare.com/files/59847925/dagitma.fla

Flash tasarımlarınızda Dinamik bir text alanına bilgisayardan okunarak günü,ayı,saati hatta dakikasına kadar yazabilirsiniz. new Date();getFullYear();getMinutes();getHours(); komutlarını kullanıyoruz. Tek dikkat etmeniz gereken nokta yazdıracağınız Dinamik Text'in instance name'i

zaman.text = gun + "." + ay + "." + yil + " - " + saat + ":" + dakika;

gibi yazarsanız "zaman" olarak atamanız.

tarih = new Date();
ay = tarih.getMonth();
gun = tarih.getDate();
yil = tarih.getFullYear();
saat = tarih.getHours();
dakika = tarih.getMinutes();
ay = ay + 1;
if (length(ay) == 1)
{
ay = "0" + ay;
} // end if
if (length(gun) == 1)
{
gun = "0" + gun;
} // end if
if (length(saat) == 1)
{
saat = "0" + saat;
} // end if
if (length(dakika) == 1)
{
dakika = "0" + dakika;
} // end if
zaman.text = gun + "." + ay + "." + yil + " - " + saat + ":" + dakika;


Faydalı olması dileğiyle...

Tek yapmanız gereken fla dosyasını indirip Library'deki Fethiye fotoğraflarına sağ tıklayarak properties kısmından update dedikten sonra 1'e 1 olması tasarım açısından önemli olduğundan; 500-150 piksel olan fotolarınızla update etmeye dikkat edin.

Kolay gelsin...

http://rapidshare.com/files/59931477/cooool.fla

Fenerbahçe'miz bu akşam Moskova'da Şampiyonlar Ligindeki 2.maçına çıktı.Çokta iyi ve baskılı başladı,baskısı sonuç verince Alex ile öne geçtik ve ilk devre gayet rahattık.Ancak 2.yarı Edu sanki maçı denkleştirmeye çalışır gibi bir kısa pas ve hemen ardındanda penaltı ile maçı 2-1'e getirdi.Tam tüm hesaplar altüst oldu Inter maçı boşa gitti diye düşünürken Deivid'in güzel vuruşu ve Rus kalecinin hediyesiyle geceyi 1 puan ve daha önemlisi rakipe 3 puan vermeyerek tamamladık.Inter'in de yenmesiyle grupta liderliğe oturduk. Şimdi 1 ay içerisinde 2 kere PSV Eindoven ile oynayacağız. Daha önce zorlanmadan yendiğimiz ve yine yenebileceğimiz bir takım.2 maçta enaz 4 puan alırsak gruptan çıkmamız kesin gibi.

23/10/2007 PSV Eindhoven - Fenerbahçe
07/11/2007 Fenerbahçe - PSV Eindhoven

Sanıyorum ilk maçta alacağımız bir puan veya puanlar bizi üst tura taşıyacaktır. Inter'in de 2 maçtada CSKA'ya puan vermeyeceğini enfazla 1 puan vereceğini düşünüyorum. Şimdilik herşey yolunda gibi,ama bu Kezman'la nereye kadar onu da bilmiyorum ve ara transferi dört gözle bekliyorum.

90'ların sonuna doğru (çok eskiyi anlatır gibi ama 91-92 doğumlu öğrencilerim oluyor artık) üniversitemin zorlamasıyla yapmaya başladığım staj günlerinden ufak bir anımı anlatmak isterim. Taksim'de hala bulunan Akademi-İstanbul 'un efsane dönemlerinde staj için aile dostumuz Ali Özmeral'in vesilesiyle kabul edilmiştim. O zamanlar Web Tasarım dersinde tabiiki sektörün lokomotifi olan Frontpage gösteriliyordu. Ancak Flash'tan da görselliği ve gençlerin merakı yüzünden bahsedilinmesi gerekiyordu ve Ali Abi elime bir flash kitabı tutuşturup haftaya uygulama dersinde bunu gösteriyorsun demesiyle sanırım benimde geleceğim değişiyordu. O zamanki derslerde Motion yapabilmek ve ses eklemek gayet tatmin edici oluyordu,ekranın dışından yuvarlanarak gelen ve ekrana çarpıp ses çıkaran menuler insanları oldukça şaşırtıyordu,ben de dahil. Zaten bir süre sonra Matematik Mühendisliği beklesin flash ve eğitmenlik daha eğlenceli diyerekten haftaiçi adresimde Yıldız yerine Taksim olur olmuştu.
Zaman içinde bir gün hala eğitim sektöründe olan değerli hocamız Okan Turhan benden akademinin websitesini Flash arayüzüyle yapmaya ve kendisine de göstermemi istemişti. Severek kabul etmiştim ancak hemen bir macintosh'un başına geçmeye çalışınca kendisi hoop bi dur bakalım önce kağıt-kalem demişti ve oturup sitenin arayüzünün tipografisini,fontlarını,renklerini,yerleşimlerini...çizerek belirlemiştik. Uzun süre o kağıdı diğer tasarımlarım için saklamış örnek almıştım.

Şimdilerde artık 3D ve marjinal yerleşik tasarımlar iyice Webte kendini hissettirmesiyle Tipografik kaygılar geride kaldı,site tasarımlarında kağıt kalemle yapanlar azaldı.
10 seneyi aşkındır aynı adrese girerek feyz aldığım bir site Typography-1st, internet algılarına ve altyapısına uygun biçimde Tipografi anlatılmaya çalışılmış.

http://www.typography-1st.com/typo/txt-lay.htm

Sadece Web'e özel font seçimi ile ilgili uygulamalı güzel bir adresi daha saklıyorum. Web 2.0 rüzgarına kendini kaptıran Trebuchet MS ; Vista ile yeniden populerleşen Calibri , yılların Arialı , emektar Times New Roman, karizmatik Garamound ve efsanevi Helvetica .

http://www.mezzoblue.com/presentations/2005/wdw/type/slides.html

Garamound'un çok değerli bir edebiyatçı olduğunu ve tüm eserlerinde kendi stilinde yazdığını ölümünden yıllar sonra bu stilin bir font olarak onun adıyla çağırılarak kullanılması,Helvetica'nın Amerika'da trafik levhalarında uzun yıllar denenerek kullanılmaya karar verilmiş okunabilirliği en rahat font olduğunu ilovetypography.com sitesinden dahasını da öğrenebilirsiniz.

Hemen altta görünen ise çok güzel vurgulanmış Serif Font Ailesinin geçmişten günümüze gelişimi ve kullanım çeşitleri : Serif Font Tree 'de verilmiş. Çok sanatsal .

Lazım olduğunda inanılmaz işinizi görür. Meraklısına benim değil buarada ;)


http://rapidshare.com/files/59590680/parmakizi_illustration.eps

İlk önce blur resmini elde etmemiz için Photoshop 'da birkaç filtreler vermemiz gerekicek. Orijinal resminizi açtıktan sonra 2 kere duplicate edelim daha sonra Photoshop 'da Filter > Blur > Gaussian Blur filtresini seçin.

Radius 6.5 yapın ve OK tuşuna basın.



İsterseniz resme biraz daha efekt ekleyebilirsiniz. Örneğin bu resime Blending options bölümünden Stroke eklenmiş. Sonra diğer layer larda bulunan gözleri kapatın. Bunları yaptıktan sonra Blur resminizi File > Save For Web bölümünü seçerek JPEG olarak belirleyin.



Flash 'ı açın ve aşağıdaki gibi 410 px * 236 px bir doküman açın ve background rengi de gri olsun.Sonra File > Import > Import to Stage yapın ve Blur olan resmi çağırın.

Yeni bir layer yaratın ve onunda ismi Original Image olsun ve Import >Import to Stage yaparak 5*5 pozisyonlarını yukarıdaki Blur resme yaptığınız gibi aynısını yapın.

Başka bir layer daha yaratın ve ismine Border klasörü koyun.



Frame 1 yani 1. sahne karesine yandaki araç menüsünden Rectangular Tool seçin ve aşağıdaki gibi çizgisi 2 px kalınlığında rengi de aşağıdaki gibi olan ve tırtıklı olan bir kare çizgisi oluşturun ama iç renginin boş olmasına dikkat edin.



Bunun gibi bir kare oluşacak.



Aşağıdaki resimde olduğu gibi Mask diye Original Image layer üstüne bir layer daha yaratın.



Sonra yine Rectangular Tool aracını seçerek aşağıdaki değerleri girin.

Tırtıklı çizgileri olan karenin içine bu yaptığınız kareyi yerleştirin.



Mask ve Border layer larında bulunan kare ve tırtıklı kenarlı kare üzerine teker teker gelin ve mouse ile sağ tıklayarak teker teker Convert to Symbol yapın.

Mask layerındaki kareyi F8 ile Movie Clip yapın.

Windows > properties bölümünden bu karenin ismine px1 yapın.



Adımın en başından başlayarak aynı şeyi Border layerındaki tırtıklı kare için uygulayın,movie clip yapın ve ismini px2 olarak belirleyin.

Sonra Border Layer ında tırtıklı çizgili kare seçili iken F9 basın ve aşağıdaki kodu yazın.

speed = .9;
setInterval(CursorMovement, 40);
function CursorMovement() {
px2._x = speed*(px2._x-_xmouse)+_xmouse;
px2._y = speed*(px2._y-_ymouse)+_ymouse;
}

Sonra Mask Layer ındaki kareyi seçerek F9 basın ve aşağıdaki kodu yazın.

speed = .9;
setInterval(CursorMovement, 40);
function CursorMovement() {
px1._x = speed*(px1._x-_xmouse)+_xmouse;
px1._y = speed*(px1._y-_ymouse)+_ymouse;
}

Son adımda ise Mask Layer ı seçili iken mouse ile sağ tıklayın ve Mask işaretleyin.



Artık Ctrl + Enter basarak movie test edilebilir. Faydalı olması dileğiyle ...

Plug-in 'ler gerçekten tasarım sürenizi ve hayatı kolaylaştırıyor. SmartPRO'da yaptığım bir afişte böyle bir efekti elde edebilmek için yarım saatten fazla uğraştığımı hatırlarım. Sarı etrafı siyah küçük kağıtlara verildiğinde sticker görünümü kazandırabilirsiniz.Kıvırdığınız kısıma kendi logonuzu,şirket logosunu getirebilirsiniz. Faydalanmanız ümidiyle...

Plug-in'i indir