9-Slice Scaling nedir , nasıl hazırlanır ?


Merhaba arkadaşlar ;

Flash içerisinde tasarım ya da programlama sürecinde sahnede kullandığınız ya da kullanacağınız objelerin boyutlandırma sorunu mutlaka sizinde başınıza gelmiştir. Obje aspect ratio denilen kendi birebirlik oranını geçtikçe bozulur. Bu özelliği Adobe hem Flash hem Fireworks hemde Flex ve AIR çalışmalarındaki tasarımlarda imkan vererek hem tasarımsal hemde scaleX ve scaleY sayesinde kod ile yapacağımız ölçeklendirmelerde bozulmaların önüne geçmeye çalışıyor.

scale9Grid seçilen bir objeyi 9 ayrı parçaya bölündüğünü farz ederek sadece ortadaki parçanın büyümesini olanak verir. Yani geriye kalan kısımlar objenin boyu büyüse bile değişmeyecektir. Bu özelliği sadece MovieClip ler destekliyor. Yani bu işlemi yapmanız için kullanmanız gereken obje kesinlikle MovieClip olmalıdır. İlk olarak size bu özelliği kullandığınızda alacağınız sonucu göstermek istiyorum :
Örnekte ilk olarak 150×100 boyutlarında kenarları yuvarlanmış olan bir dikdörtgen yaptım. Daha sonra aynı objenin kopyasına scale9grid uygulayarak bu objenin boyutunu 350×100 olarak ayarladım. İkinci kopyaya ise herhangi müdahalede bulunmadan objenin boyutunu 350×100 olarak ayarladım. Aşağıdaki resimde açıkça görülüğü gibi scale9grid özelliği uygulanmış örnekte herhangi bir bozulma yok, uygulanmamış olanda ise bozulma derecesi baya yüksek.

Bu özelliği kullanmanın iki yolu var, birincisi objeye birebir olarak sahnede bu özelliği vermek ikincisi ise bu işlemi Actionscript kodları ile yapmak. İlk olarak bu işlemi sahnede yapalım.

İlk olarak sahnede 150×100 boyutlarında kenarı yuvarlatılmış olan bir dikdörtgen çizin.Daha sonra bu objeyi seçerek F8 tuşuna basın. Eğer önünüze çıkan pencere aşağıdaki gibi değilse “Cancel” butonunun altındaki “Advanced” butonuna tıklayın.


Daha sonra “Enable guides for 9-slice scaling” seçeneğini işaretleyip “Ok” tuşuna basın. Unutmayın bu özellik sadece MovieClip ler için geçerlidir. Şimdi oluşturduğunuz MovieClip e çift tıklayıp MovieClip in içerisine girin. Alacağınız görüntü aşağıdaki görüntüye benzer bir görüntü olacaktır.Bu görüntüde çizgili olan rehber çizgiler ölçeklendirmeye katılacak kısımı içeride kalacak şekilde belirler , bu çizgileri gerektiği noktada tekrardan üstüne gelerek konumlandırabiliriz.

Gördüğünüz gibi çizdiğiniz dikdörtgenin üzerinde kesik çizgili hat bulunmakta.Bu hatları ihtiyacınıza göre düzenleyebilirisniz. Aşağıdaki resimde ise kırmızı ile işaretlenmiş alanlar yani orta kısım objenin boyu değiştiğinde değişecek olan bölümdür, geriye kalan kısımlarda obje boyu değişse bile herhangi bir değişme olmayacaktır.

Şimdi ise bunu Actionscript 3.0 içerisinde nasıl yapabiliriz ona bakalım.Öncelikle 9-Slice içerisinde kalacak şekili kare olarak köşe koordinatlarını vererek tanımlamamız gerekiyor.

import flash.geom.Rectangle;
var rect:Rectangle = new Rectangle(16, 16, 119, 68);
bg_mc.scale9Grid = rect;
bg_mc.width= 400;

gibi bir yapıyla ile runtime oluşturulacak şekillere de 9-Slice Scaling özelliği kazandırabiliriz.Yazıda faydalandığım görseller için Engin Yöyen'e teşekkür ederim.Faydalı olması dileğiyle...





Cumhuriyet Bayramımız Kutlu Olsun



Tekrardan merhaba arkadaşlar ;

Blogspot erişim yasağının bazılarına göre geçici bazılarına göre komple kalkmasıyla bende hem Cumhuriyet bayramı hemde bloguma erişmeyi deneyenlere burdayım demek amaçlı bir yazı yazmaya karar verdim ama klasik bir bayram yazısı olacağını sanıyorsanız devamını okumayın.

Özelliklerle son dönemlerde sık sık karşılaştığım ve Mustafa filminde artık tavan yapmış bein rahatsız olan bir durumla ilgili düşüncelerimi blogumun açılışı anısına blogum madem günlüğüm yazmak istedim. Biz Atatürk'ü kitaplardan öğrenmiş bir nesiliz. Fazla merak etmeyenin okul kitaplarındaki sipariş bilgilerle,merak edenin farklı kaynaklarla okuyup anladığı veya anlamadığı bir Atatürk'ü okuduk.Biz derken şuan bu ülkenin yönetici seviyelerine de gelmiş 50 ve sonrası doğumlu tüm insanlardan bahsediyorum.

Dün Mustafa filminin Ankara'daki galasından çıkan ironikte olsa çok yakın zamanda çıkarları çakışınca ülkenin yönetim kademeleriyle kavgaya tutuşan bir medya devinin haberleri sunan "büyük" ismi canlı yayında NTV mikrofonuna "Kaşı Çatık Atatürk'ten sıkılmıştık , Can saolsun duvarları yıktı bize İnsan Atatürk'ü gösterdi" diyiverince zaten ondan önce konuşan Devlet Bakanlarının da ufaktan "lazımdı böyle bir film işte budur " havalarına benim için ve bu yazı için tuz biber oldu.

Hepimiz hem İstanbul'da hem tatile gittiğimizde bir sürü yere,markete,restaurantlara hatta evlere kısa süreli girip çıkarız.Ben özellikle duvardaki fotoğraflara ve asılı olan şeylere dikkat ederim,aslında İstanbul'da da şirketlerde Kurumsal eğitim verdiğimden deyim yerindeyse turist gibi gezdiğimden (geçen hafta Sultanahmette,buhafta Ortaköyde,haftaya da Yeşilköyde ajans ve şirketlerde eğitimlerim var) eğitim öncesi ve sonrası birçok değişik yerlerde bulunuyorum ve bakıyorum.Herkesin kendince bir Atatürk yorumu var. Hiç koymayanı da olduğu gibi,altta gösterdiğim gibi bir Hacı Dede'nin yanında gösterenler anlıyorumki aslında Atatürk'te dindardı ve bakın dindar insanları severdi demek istiyorlar.



Bu fotoğrafın hikayesi belkide şans eseri baba tarafımın Alevi olmasından öğrendiğimden bir Alevi Dedesinin bir meselesini köyünü ziyaret eden Atatürk'e anlatışıdır ve bu dedenin kuşağından Alevi Dedesi halen yaşamaktadır. Aleviler bilmeyenler için söylemem gerekirse Cem Evlerinde bile Hz.Ali'nin yanında mutlaka Atatürk resmini koyarlar ve ASLA o ayrı o ayrı demezler.

Başka bir örnekte alttaki gibi eşi Latife Hanım'la birlikteki fotoğrafıdır.Şuara BilgeAdam Fatih'te eğitimim olduğundan bir süredir ordaki esnafla da haşır neşirim gördüğüm kadarıyla orada Abdullah Gül'ün eşini kast ederek Çankaya'daki 2.başörtülü diyerek aslında iyiden iyiye bu fotoğrafla sadece dünya görüşünü değil siyasi duruşunu da belli ediyorlar.



İşin iç yüzü ise çok farklıdır. Latife Hanım bir Osmanlı hanfendisidir ve zaten o dönemde başı açık gezmek bir Türk kadını için olabilecek en zor şeydir. Cumhuriyet Devrimleri ve kazanımlarının (arasında Laiklikte var) çoğu daha gerçekleşmemiş ve gerçekleşenlerde harf,kıyafet gibi daha halk tarafından benimsenememişti. Ayrıca Latife hanım'ınki başörtüsü , hatta halk dilinde çarşaf denilen bir giysidir , Türban o zamanlar yoktu, ne zamanki başörütüsü ve dolayısıyla din siyasete alet edilip bir sembol oldu o zaman yüzyılların başörtüsü modern türban olarak takılmaya başlanıldı.

Ve enson örnekte yeni Türk Liralarında gülen Atatürk resimleridir. Demek istediğim herkes kafasına göre kendine yakın görmek istediği Atatürk'ü almış,sahiplenmiş görülüyor. Oysaki işin aslı böyle değil.



Atatürk'ü anlamak için çok uzaklara gitmeye gerek yok bir Nutuk'u baştan sona okumak yeterlidir. Bu ülkenin savaşarak topraklarını kazandıktan sonra asıl savaşın cahilliklerle ve yobazlıklarla şimdi başladığını söylemiş tüm devrimlerinde yüzyıllardan beri gelen Hilafet,Alfabe ve Şeri kanunlar gibi din merkezli olguları kaldırarak tek kurtuluşun , aydınlık geleceğin Medeniyet Seviyesine ulaşmakla mümkün olduğunu söylemiştir. Ezanı Anadilimizde Türkçe okutmuştur.Köy Enstitüleriyle Halkın Efendisi Köylüye bir kültür kazandırmıştır. Halkevleriyle halkını eğitmiştir.Ancak zamanla o eski zihniyet bu devrimleri anlayamadığı gibi tek tek kaldırmış günümüzdeki hale gelmişizdir.

Kişisel görüşürüm Atatürk'ün 1900'lü yılların başında müthiş bir gelecek görüşüyle yaptığı Devrim ve İnkilaplar bile daha hala anlaşılmadığından onun o çatık kaşlı,soğuk ve hatta sert üslubunun korunması taraftarıyım.Atatürk'ün gülmesini sağlamamız onun devrimlerine ne kadar sahip çıkıp hatta geliştirmemizle mümkündür.Şuan paramızda gülen Atatürk'ün kime güldüğü ise bence çok açıktır.


Aklıma hep Lenin'in o müthiş sözü geliyor : " Her halk hakettiği rejimle yönetilir " . Bizde sanıyorum hakettiğimiz rejim ve yöneticilerle yönetiliyoruz,Atatürk'ün 1900'lu yıllardaki devrimleri bile bize hala fazla.Şimdi kalan kazınımlarımızla mutlu bir Cumhuriyet Bayramı geçirmenizi diliyorum..



Ercan Altuğ YILMAZ



Ve Blogger 'da Sansürlendi !

Evet arkadaşlar ;

Uzun süredir konuşulan , tartışılan ve beklenen şey oldu ve Blogger'da Türkiye'den erişilemez hale geldi. İşin kötü tarafı bir kaç blog yüzünden binlerce blogger ve milyonlarca internet kullanıcısının bu karardan olumsuz etkilenecek olmasıdır.

Neyazıkki bende blogumu taşıma kararı arifesine geldim. Kendi hostingime wordpress benzeri bir sistemi kurarak tabiiki yazılarıma ve ders notlarıma devam edeceğim. Ama bu 2senelik blog , bir sürü sağda solda kalmış linkler,insanların browerlarındaki adresler,page rankım( 4tü :( ) ,googledan gelen ziyaretçiler bu geçiş döneminde kaybedeceğim şeyler olacak. Üzücü.

Bu bloga yeni kararımı ve eğer olacaksa yeni blogumun adresini de paylaşacağım son yazımla veda edeceğim. O yazımı yazasıya kadar kendinize iyi bakın ve sansürsüz bir internet için bir daha iç çekin.



E.Altuğ YILMAZ

Photoshop CS4 & Dreamweaver CS4 Kardeşliği


Merhaba arkadaşlar ;

Adobe'nin yeni CS4 ürünlerindeki tasarımlarınıza hız kazandıracak özellikleri paylaşmaya devam ediyorum , belki de buradan göreceğiniz bir özellik sizin CS4'e geçmenizi sağlayabilir. Hatta 8 kullananlar hala çok büyük sayıda olduğundan CS3'ü atlayıp direk CS4'e geçebilir.

Bundan birkaç ay önce Microsoft'un Web Tasarım programı (benimde favori programım) Expression Web 2 Yeniliklerini incelediğim yazımda Microsoft ürününde olan Photoshop desteği Dreamweaver'da olmadığından ufak bir taş(belki kayada olabilir) atmıştım. Duymuş olmalılarki Adobe yapınca daha iyisini yapmış.Artık Dreamweaver da sadece insert-image ile psd de seçilebiliniyor,Expression'daki gibi özelbir menüsü yok. Sadece psd seçtiğinizde arayüze eski Photoshop'taki Save for Web & Devices veya Fireworks Optimize paneli gibi bir panel geliyor.Tabiiki direk PSD dosyasını internete ekleyemiyoruz bu yüzden dosya formatlarını seçeceğimiz ekran geliyor. JPG,GIF veya PNG buradaki seçeneklerimiz.


Daha da önemlisi eğer PSD dosyamız bir Smart Object ise ve filtresi bile güncellenirse bizim Expression'daki gibi Update et dememize gerek kalmadan yanında ufak bir imleç çıkarak bizi uyarıyor ve bizde OK güncelle dediğimizde aynı ayarlarla değişiklikleri algılıyor. Süper !


CS4'lerdeki süper yeniliklere devam edeceğim...





“WYSIWYG” Web Tasarım Savaşları


Merhaba arkadaşlar ;

Webtasarımı programlarında en güncel versiyonlarıyla Microsoft’un ve Adobe’nin Web Editörlerini teknoloji bazlı karşılaştırılmasını bir makaleyle grafiksel olarak yaptım. Tabiiki kullanım kolaylığı veya alışkanlıklar mutlaka seçiminizde rol alacaktır.Ancak ortaya çıkan sonuç kullandığınız teknolojilerin yoğunluğuna gore seçim yapmanız gerektiği. Flash , Flex ve AIR teknolojilerini sık sık kullanılan bir projede Expression Web baya bir sorun çıkarabilir, aynı şekilde bir .Net projesinde de Dreamweaver .Net kontrollerinde baş ağrıtabiliyor.

Ama her 2 programında bir önceki versiyonlarına bakacak olursak (Frontpage ve Dreamweaver 8 ‘I katmıyorum bile) inanılmaz güzel yenilikler ve kolaylıklar eklenmiş olduğunu bununda biz tasarımcıların işine yaradığını görebiliyoruz. Sanıyorum eğer tek teknolojiye odaklanmamışsanız zaten seçim yapmak zorunda da değiliz her ikisi de kendince avantajlarıyla sizzler tarafından keşfedilmeyi bekliyor.


WYSIWYG” WEB TASARIM SAVAŞLARI PDF MAKALEMI İNDİRİN.




Adobe Photoshop CS4 ile Vanishing Point



Adobe Photoshop CS4 ile geliştirilen en önemli özelliklerden biri de 3 boyut uygulamalardır. 3 Boyutlu görsellerde işlemler yapmak için Photoshop’un Vanish Point Tool’unu iyi kullanabilmek gerekir. Hem perspektif kazanmış görsellere efekt verirken hemde düzenlemeler yaparken Vanish Point Tool çok önemlidir.

Örnekteki gibi bir Adobe logosunu diğer kutunun bu sefer yan yüzeyine kopyalamak isteyelim. Kutuların bulunduğu alttaki yüzeydeki çizgiler bize perspektif hakkında yardımcı olacaktır. Eğer uygulamaları aynı görseller ile yapmak isterseniz çalışma dosyalarını indirmek için tıklayın.




Adobe logosunu seçelim ve CTRL-C ile kopyalayalım.Ben seçim için Polygonal Lasso Tool’u kullandım. Daha sonra kopyalamak istediğimiz karenin yan yüzeyini Photoshop’a anlatmak için Filter-Vanish Point diyerek Vanish Point ekranımıza girelim. Vanish Point kaçış noktası demektir. Burada biz solda çıkan menüden bu perspektifleri Create Plane Tool ile Photoshop’a anlatacağız ve Photoshop bizim için o perspektifte o görseli güncelleyecek.


Mesela yukarıdaki gibi kutunun ön yüzüne bu görseli yapıştırmak isteseydik yukarıdaki gibi bir alan çizecektik. Ben daha da farklı olması için onun da yanına çiziyorum. Her seferinde yeni bir perspektif çizebilmek için Create Plane Tool diyerek yeni bir tane çizebilirsiniz. Daha sonra CTRL-V (Yapıştır) kısayolu ile kopyaladığımız görseli ekrana getiriyoruz. Eğer gelmediyse Vanish Point ekranından çıkıp tekrar kopyalamanız gerekebilir.


Kopyalanıp yapıştırılmış logoyu alttaki gibi gerekli yere getirdiğimde eğer boyutu büyükse yan panelden Transform Tool ile o ayarları da yaparak yapıştırıyorum. Kopyalanan görselin arkaplanıyla atadığımız arkaplan uyumlu değilse kopyaladıımız nesnenin transparan olmasıyla ya da Blend Mode’lar ile uyumunu sağlayabiliriz , altta sağda olduğu üzere.



Bilgisayarinizda Photoshop yüklü ise Photoshop ile beraberinde gelen bir Vanish Point örneği olabilecek çalışmada bulunmaktadır. Photoshop klasörünün altında Samples klasöründeki alttaki Vanishing Point.psd dosyasını açalım.

Bu örnek çalışmayı açtığımızda Filter-Vanish Point dediğimizde Vanish Point olacak ızgaralar otomatik algılanır.Sizde Stamp Tool mantığını aynen kullanarak perspektife uygun kalacak şekilde mesela fırçayı yukarıda sağdaki gibi kaldırabilirsiniz.

Vanish Point uygulamalarından 2 tanesini ilki kopyalamak diğeri ise düzeltmek olmak üzere yaptık. Bir de görsellere komple perpektif vermek üzerine alttaki gibi mesela bir DVD kapağı giydirelim. Örnek psd dosyalarını blog adresimden indirebilirsiniz.



DVD Kapağını açtığımız anda bu kapakta altta numaralandırdığım üzere 3 farklı perpektif olduğu görülüyor.Sizinde yapmanız gereken Vanish Point ekranına girerek burada 3 kere Create Plane Tool diyerek bu 3 farklı perspektifi çizerek Photoshop’a anlatmak.



Devamında beğendiğiniz bir filmin DVD kapağının 3 farklı yerden de Marquee Tool ile seçip kopyalayıp Vanish Point ekranında yapıştırarak ölçeklendirerek giydirmek. Hepsi bukadar kolaydı ve sonuç :



Faydalı olması dileğiyle....

Adobe Flash Media Server programları...


Merhaba arkadaşlar ;

Adobe firması tarafından geliştirilen Adobe Flash Media Server program ailesi ; sunucu taraflı uygulamalarda sunucu tarafında daima çalışması gereken objeleri çalıştırarak gelen kullanıcılara hizmet veren bir yazılım ailesidir.

MMS'ye alternatif olarak gerçek zamanlı ses, görüntü yayını yapılabilir,
Kullanıcıların birbirleriyle gerçek zamanlı olarak sesli ve görüntülü olarak iletişim kurabildikleri ortamlar kurulabilir,Kullanıcı kapasitesini arttırabilir, çeşitli arabirimler sayesinde anlık olarak yayını takip eden kitleyi denetleyebilir ve görebilirsiniz.

Bu sayede;Gerçek zamanlı olarak sohbet, iletişim ve yazışma alanları kurabilir ve yönetebilirsiniz.Forum, Portal, Web Uygulaması gibi prototipleri Adobe AIR, Adobe Flash üzerinde geliştirerek yayınlayabilirsiniz.

Flash videolarını bir websitenizde yayınlamak için eğer Flash Media Server programlarından herhangi birisi serverda yüklü değilse seçmeniz gereken tek opsiyon vardır:Progressive.

Progressive Download ile bir flv (flash video) dosyasını ziyaretçinin bilgisayarına indirerek izletebilirsiniz.Yani bir cashlenme sözkonusu. Eğer ziyaretçi 5 dakikalık videonun 3-5 saniyesini izleyip kapatırsa yüklediğiniz geri kalan 4 küsür dakikalık video boşa yüklenmiş ve dolayısıyla bant genişliğinizi kullanmış olur. Dahası dinamik veya çoklu video uygulamarında progressive olarak çoklu video oynatamazsınız.Websitelerinde videoları izletmekte statik bir çözüm olan Progressive ile dosyalar cashlendiği için ayrıca bir lisans ve güvenlik sorunu ortaya çıkarmaktadır.

Diğer taraftan streaming download yöntemiyle ziyaretçi video üzerinde isterse dilediği süreyi izleyebilir,ileri sarabilir,asla cashlenmez ve dolayısıyla güvenlik sorunu çıkmaz,ve aynı anda çoklu videoyu stream edebilir,sesli ve görüntülü canlı yayın yapabilir. Stream ettiği miktarı da size raporlar halinde sunabilir ki bu da Web on Demand uygulamalarında,e-learning projelerinde çok değerli bir bilgidir.Websiteniz için doğru olanı eğer streaming bir video oynatımı ise mutlaka Flash Media Server kurulu olmalıdır. Gelin Adobe Flash Media Server ailesi üyelerini bu konuda nasıl kullanabilirsiniz inceleyelim.


http://www.adobe.com/products/flashmediaserver/



Flash Media Interactive Server :

Eski adı communication server olan bu ürün asıl ürün. Flash Video olarak canlı kayıt imkanı veren,üzeinde bir yönetim paneliyle tüm bant genişliği trafiğini tutabileceğiniz programın lisanslaması için yukarıkdai linki tıklayın.

Flash Media Streaming Server :

Eğer canlı kayıt veya iletişim gibi interaktif olarak videoları yönetmek değil sadece flash videonuz flv olarak hazır ve stream yayınlamak isterseniz yani progressive olarak değil streaming olarak yayınlatmak için sadece server hizmeti almak için bu programı kurabilir ya da bu hizmeti veren şirketlere başvurabilirsiniz.

Flash Media Development Server :

Asıl ürün olan Flash Media Interactive Server 'in lisanslamasındaki pahallılık ve trial versiyonunun olmamasından bu ürünü denemek amaçlı sadece 10 kişiye kadar lokalde test amaçlı kurulup denenebilecek Interactive Server'ın tüm özelliklerine sahip sadece kullanıcı kısıtlanmış hali.

Ayrıntılı bir karşılaştırma grafiği için :


http://www.adobe.com/products/flashmediaserver/compare


Flash Media Encoding Server:

Eğer projenizde sadece canlı kayıt ve streaming yeterli kalmıyorsa ziyaretçilere kendi videolarını da 30 formattan fazla versiyonla yükleyebilmelerini ve runtime bu dosyaları flv dosyasına çevirme ve çevirirken de sürelerini,boyutlarını,hatta çeşitli video efektleriyle beraber yapmalarını sağlamak isterseniz Flash Media Encoding Server kullanmanız gerekiyor.Youtube benzeri hizmetler en güzel örnek olabilir.

Flash Media Rights Management Server :

Adobe'nin 2008 yılı sonlarında süreceği bu programın amacı hem Adobe Flash hemde AIR uygulamalarının kullandığı video dosyalarının haklarını korumak ve kopyalanmasını engellemek amacını taşıyor. Bilindiği üzere artık masaüstü uygulamaları AIR ile geliştirilmiş bir projede internete bağlanarak flash videolar izlenebiliyor. Adobe TV masaüstü programı en güzel örnek olacaktır.

Creative Suite 4 paketleriyle olası gelişmeleri bu yazıyı güncelleyerek ekleyeceğim. Faydalı olması dileğiyle....


Adobe CS4 Classroom in a Book serisi yolda...






Merhaba arkadaşlar ;

Adobe CS4 programlarını yayınladıktan kısa süre sonra video eğitimler internette yayınlanmaya başladı. Ama kitapların yeri bir ayrı değilmi? Evet sıra geldi kitaplara. Türkiye'de de Kaynağından Eğitim serisi olarak çevirilen " Classroom in a Book " serileri CS4 'ler için önümüzdeki haftadan itibaren çıkmaya başlıyor. Önce Photoshop ve devamında da aşağıda gösterdiğim Flash CS4 Temel kitapı çıkıyor.Devamında Actionscript 3.0 for Flash CS4 kitapı da Aralık'ta satışa sunulacak. Ben siparişlerimi amazon'dan hazırladım bekliyorum. Türkçe'ye çevrilmesi sanıyorum yine 1 seneyi aşkın süre alabilir CS3'lerdeki hıza göre.

" Classroom in a Book " CS4 serisinde hangi kitaplar ne zaman yayınlanacak göz atmak için :



http://www.graphicmania.net/?p=299



Flash CS4 ile gelen Adobe Kuler Paneli


Merhaba arkadaşlar ;

Flash CS4 ile gelen yeni panellerden biri de CS3'te extension olarak ekleyebildiğimiz AIR tabanlı Kuler. Kuler , Adobe'nin Renk paletleri yönetim ve paylaşım web sitesinin adıydı.Ancak o kadar çok talep olduki extensionlarla programlara panel ve ayrı bir masaüstü programı olarak geliştirildi.

Adobe Kuler'ı tekrar anlatmak yerine işlevinde bir değişiklik olmadığından Flash CS3 için yazdığım yazıyı aynen güncelliyorum. İsteyen CS3 için extension'ı veya masaüstü programı indirebilir veya sadece websitesinden Swatches'ları renk paletlerini indirebilirsiniz.



Adobe Kuler paneline CS4'te Window-Components-Kuler ile ulaşabilirsiniz.AIR teknolojisiyle internet bağlansıtı yardımıyla kuler.adobe.com sitesine bağlanarak oradan renk paletlerini karşınıza getirecektir. Yazının en başında aşağıda gösterdiğim 2 butondan ilkiyle beğendiğiniz bir swatches'ı yani renk paletini direk kendi Swatches panelinize (Window-Swatches) ekleyebilir veya kendi yarattığınız paletleri yandaki düğmeden Adobe ID ile giriş yapıp upload edebilirsiniz. Aslında renk paletleri çok önemli çünkü profesyonel bir websitesinde kafanıza göre mavi veya istediğiniz tonda bir siyah kullanamazsınız,o şirketin kurumsal kimliğinde olan tonları kullanmalı ve uyumlu olmalısınız. İşte bu yüzden bu palet paylaşımları çok önemlidir. Ayrıntılı bilgi için Adobe Kuler yazıma göz atabilirsiniz.



Adobe Kuler üzerine 18 Mart 2008 tarihli yazım :
______________________________________________________________________________

Adobe Labs bildiğiniz üzere arkadaşlar Adobe'nin test altında geliştirilmeye devam eden teknolojilerinin sergilendiği yerdir. Buaralar özellikle Adobe Kuler adındaki yeni bir teknolojiyi Adobe Labs'ta şuan kullanıma açtı. Burada dünya üzerindeki tasarımcıların hazırladığı en çok beğenilen renk aileleri Highest Rated(En çok oylananlar) ve Popular(çok sevilen) ile Newest (yeniler) başlığında görünür. Seçilen beş renkten biri ana renktir. “Base color” denen bu rengi pasta şeklindeki renk seçiminde mouse ile sürüklenen renklerden daha büyük bir çember ile görürüz. Diğer renkler bu renge göre seçilirler. Hue, doygunluk değerleri arasında uyum olanlar gibi. Daha sonra renklerden biri base renk olarak taban renk seçilebilir.Renk ailelerinin RGB, CMYK, Hex, HSV, LAB karşılıkları görülüyor. Sisteme Adobe ID'miz ile girip kendi renk seçimlerimizi yayınlayabiliyoruz. Bunun için "register" düğmesiyle kayıt olup "Sign in" ile sisteme giriyoruz. Kendi seçtiğimiz renkleri "Create" ile oluşturuyoruz, diğer tasarımcılarıa ulaştırmak için "Save" ile kaydedip, oldu dediğimiz zaman, "Publish" ile yayınlıyoruz. Tag (etiket) sistemi önemli. Bu renk yapısı hangi tasarımlarda iyi olur, deniz, çöl, toprak gibi…


http://kuler.adobe.com/

Ayrıca bu websitesinden renk paletlerini alabildiğiniz gibi Kuler Desktop adlı programla aşağıdaki gibi programı masaüstünüze kurarak siteyi ziyaret etmenize gerek kalmadan populer olan veya beğendiğiniz renk paletlerini programınızın Swatches kısmına ekleyebilirsiniz.



Adobe Photoshop ve Illustrator 'da Color Swatches kısmına çok rahat bir şekilde eklenebilirken,Flash içinde aynı rahatlığı sağlayabilmek için bir Extension yayınlandı.

Aşağıda görebildiğiniz gibi Extension yükledikten sonra panellerinize kuler adında bir panel ekleniyor. Bu panelden internet erişiminiz varsa kuler websitesinden güncel ve populer renk paletlerini inceleyip direk kendi Color Swatches kısmına yükleyebiliyorsunuz.


Adobe Flash CS3 Kuler Extension yüklemek için tıklayınız.



MS Powerpoint Sunumlarına Flash eklemek



Merhaba arkadaşlar ;

Powerpoint Dosyalarınıza daha etkili sunumlar için Flash eklemek isterseniz arkadaşlar yanda makalelerim kısmındaki Flash hızında Vektörel sunumlar yazımı indirip okuyabilirsiniz.iyi çalışmalar.

http://www.expression.web.tr/al2y/Flash2pps.pdf



Transitions Class ile Animasyon Teknikleri


Merhaba arkadaşlar ;

Adobe Flash içerisindeki foto-galerilerimizde kullanabileceğimiz önemli bir class'tan bahsetmek istiyorum.Türkçe kaynak olarak Transitions Class üzerine yazı bulamadığımdan uzun uzun yazdım aslında çok basit bir konu olsada.







Actionscript 2.0 :
______________________________________________________________________________

import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start
(
foto1_mc,
{
type : Wipe ,
direction : Transition.IN ,
duration : 1 ,
easing : Bounce.easeOut
}
)
______________________________________________________________________________



Actionscript 3.0 :
______________________________________________________________________________

import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start
(
foto1_mc,
{
type : Wipe ,
direction : Transition.IN ,
duration : 1 ,
easing : Bounce.easeOut
}
)
______________________________________________________________________________

Yukarıdaki kod ile fotoğraflarınıza Transitions Class ile çeşitli efektler verebilirsiniz. Gelin satır satır açıklamaya çalışayım. İlk satırda kullanılcak Transitions Class'ını import ettiğimiz satır var.Devamındaki satırda TransitionManager ile bu efektin başlayacağını ve parametrelerini belirtiyoruz.

foto1_mc : Efektin atanacağı Movie Klip'in instance name'i.
type : Efekt tipi (Yukarıdaki diğer örneklere göz atabilirsiniz.)
direction : Transition.IN ile fotoğrafın ekrana gelmesi ve Transition.OUT ile gitmesi.
duration : Saniye bazlı animasyon süresi.
easing : Animasyonun ivme tipi ve değeri.

easing metodu için Tween Class'taki ile aynı ease metodlarını efekti değiştirmek için kombine edebiliyoruz.
______________________________________________________________________________


Back , Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, ve Sine.

______________________________________________________________________________


Ve ease değer listesi :

______________________________________________________________________________


easeIn , easeOut , easeInOut , easeNone .

______________________________________________________________________________


Ek olarak bazı efektlerin kendilerine özel metodları var. Mesela puzzle efekti gibi parça parça ekrana gelen

Blinds :

numStrips (1 ile 50 arası bir değer)

dimensions (Dikey : 0 , Yatay : 1)

Fly :

startPoint (1 ile 9 arası animasyonun başlama noktası)

Iris :

startPoint (1 işle 50 arası bir değer)

şekil belirtme (Iris.CIRCLE veya Iris.SQUARE)

PixelDissolve :

xSections (1 ile 50 arası animasyon olacak yatay piksel miktarı)

ySections (1 ile 50 arası animasyon olacak dikey piksel miktarı)

Rotate :

ccw (saat yönünün tersi dönmesi için ccw:true veya saat yönü için ccw:false)

degrees (Dönüş miktarını belirleyen açı. 2 tur için 720 yazılır.)

Squeeze :

numStrips (Yatay için : 0 , Dikey için : 1)

Wipe :

numStrips (1 ile 9 arası animasyonun başlama noktası)




Ek metodların kullanılışına örnek verecek olursak :

Actionscript 2.0 :
______________________________________________________________________________

import mx.transitions.*;
import mx.transitions.easing.*;
TransitionManager.start
(
foto1_mc,
{
type : Wipe ,
direction : Transition.IN ,
duration : 1 ,
numStrips : 20,
easing : Bounce.easeOut
}
)
______________________________________________________________________________



Actionscript 3.0 :
______________________________________________________________________________

import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start
(
foto1_mc,
{
type : Wipe ,
direction : Transition.IN ,
duration : 1 ,
numStrips : 20,
easing : Bounce.easeOut
}
)
______________________________________________________________________________



Makalenin başındaki örnek çalışmanın FLA dosyası için :

http://expression.web.tr/al2y/transition.fla


Faydalı olması dileğiyle....



Photoshop CS4 ile gelen Devrim : Content Aware Scale


Merhaba arkadaşlar ;

Tasarım veya yazılımcı bilgisayar karşısına oturmuş herkesin bir fotoğraf düzenleme için başvuracağı ilk program Photoshop olmuştur.Web , Grafik , Matbaa ,Yazılım , Tasarım ayırmadan herkesin fotoğraf düzenleme aracı olarak tercihi Photoshop CS4 versiyonu ile herkesin tasarımlarını etkileyecek bir yeniliğe sahip : Content Aware Scale ( İçerik Analizli Ölçeklendirme ) .

Adobe Photoshop 'u çok ileri düzeylerde veya sadece görsellerinizi ölçeklendirmede,kesmede birleştirmede kullanıyor olabilirsiniz.Ancak Scale araçları
Photoshop'un en temel aracı. Tasarımlarınızda birçok sefer karşımıza çıkan mesela enine uzun fotoğraflarınızı kare şekline getirmek için mecbur Crop işlemine başvuruyor ve içerikten bazı kısımlardan vazgeçiyorduk,veya boyuna uzun gelen bir görseli enine uzun çevirmek görselin ratiosu yani oranını bozmadan yapmak çok zordu ve yine Crop Tool devreye giriyordu.Ancak artık Content Aware Scale ile bu işler sorun olmaktan çıkıyor.



Aşağıdaki gibi bir görselimiz olduğunu düşünelim.Bu görsel enine uzun bir görsel ve eğer galerinizde karesel bir şekilde ihtiyacınız var ve her botta sizin için değerliyse işiniz zordu ama artık değil.Bu görsel seçiliyken Edit-Content Aware Scale dedikten sonra Transform tool ile sadece enine ölçeklendirmeye başlayalım.



Normal şartlarsa fotoğrafımız deforme olması gerekirken Photoshop Content Aware Scale sayesinde içeriği analiz ederek benzer pikselleri optimize ederek kaldırıyor ve bu sayede tüm botlarımız ve arkaplanımızda kaybolmadan görselimiz kare boyutlarına geliyor. Süper !



Piyasada bu işlemi yapan bazı programlar bulunmaktaydı,ancak Photoshop sadece ölçeklendirmeyle kalmamış bazı ek ayarlarda getirmiş.Bazı uygulamalarda özellikle insan fotoğraflarında anlamsız deformasyonlar olduğundan Photoshop - Content Aware Scale içerisinde ek olarak " Protect Skin Tones " diyerek insan ten rengini analiz ettirerek o kısımları deforme etmeden yapıyor. Sadece bu Tool için bile CS4'e geçilebilinir.

Faydalı olması dileğiyle...



Tween Class ile Animasyon Teknikleri




Merhaba arkadaşlar ;

Flash içerisindeki Actionscript ile animasyon yeteneklerinizi geliştirecek bazı sınıflar vardır. Bunlardan en önemlisi Tween Class ile bir Movie Klip nesnesini sahnede sadece kod ile çok esnek bir animasyon yaptırabilirsiniz. Esnek derken süresinden,tipine,özelliklerine ve easingine kadar matematiksel olarak karar verebilirsiniz. Ve bir animasyon bitmeden diğeri tekrardan hesaplanarak yürüyen animasyona katılabilir.Bu yazımdaki kodları hem 2.0 hem de 3.0 olarak anlatacağım.

Actionscript 2.0 :
______________________________________________________________________

import mx.transitions.*
import mx.transitions.easing.*
var basla:Tween
basla = new Tween(daire_mc,"_x",Back.easeIn,200,400,1,true)
______________________________________________________________________

Sahnemizde duran daire_mc instance name'ine sahip bir nesneye Tween Class'ı ile bir animasyon yaptırdık. Burada ilk 2 satırda gerekli class isimlerini çalışmaya belirterek import ediyorum.mx versiyonunda gelen bir class oldugundan mx geçiyor bu satırda. 3.satırda ise basla isimli bir tween degiskeni tanımlıyorum.4.satırda da bu basla tween nesnesine Tween class yardımıyla bazı parametreler atıyorum.

daire_mc : animasyonun atanacak olduğu movie klip instance name'i
"_x" : Movie Klip'in hangi property'sinde animasyon yapılacağı (width,alpha,scale..)
Back.easeIn : Animasyon tipi ve ease versiyonu.
200 :Animasyon başlangıç değeri
400 :Animasyon bitiş değeri
1: Animasyon süresi (saniye cinsinden)
true : Animasyonu saniye bazlı hesaplanacağı (false olursa frame bazlı hesaplar)


Actionscript 3.0 :
______________________________________________________________________

import fl.transitions.*;
import fl.transitions.easing.*;

var basla:Tween;

basla = new Tween(daire_mc, "x", Back.easeIn, 200, 400, 1, true);
___________________________________________________________________

Aynı animasyonun 3.0 ile yazılışıda yukarıda.Parametreler aynı olduğundan değişen class isimlerine dikkat etmeniz yeterli olacaktır.

Gelin buradaki Back Tween animasyonu yerine kullanabileceğiniz diğer animasyon tekniklerini sıralayalım ve merak edenler tek tek yazarak denesin anlatmaya çalışmayacağım denedim komik oluyor :)

___________________________________________________________________

Back , Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, ve Sine.

___________________________________________________________________

Back ve Elastic çok sık tercih edilenleridir. Gelelim kombine edebileceğiniz animasyon tiplerine bir nokta koyduktan sonra eklenebilen kodla ease tiplerine.

___________________________________________________________________

easeIn , easeOut , easeInOut , easeNone .

___________________________________________________________________



Ease tipleriyle de bu tween animasyonlarının ivmelerine karar verebilirsiniz.Hızlanıp yavaşlayarak animasyonu tamamlayabilir ya da tam zıttı.Yerçekimi ve arayüz geçişlerinde çok lazım olan bir ayar. Back.easeOut veya Elastic.easeInOut gibi kombineler yapabilirsiniz.

Tween animasyonları ile ilgili çok lazım olan bir durumda tween animasyonun metodları. Tween animasyonuna ancak bu metodlarla müdahale edebiliyoruz. Direk bir butonun çalıştıracağı fonksiyon içine yada frame'e yazabilirsiniz.

___________________________________________________________________

Tweenadi.yoyo() : Geri alır.
Tweenadi.fforward() : En sonuna alır.
Tweenadi.start() : Animasyonu sıfırdan başlatır.
Tweenadi.stop() : Animasyonu durdurur.
Tweenadi.nextFrame() : Durdurulmuş animasyonun bir frame sonrasına alır.
Tweenadi.prevFrame() : Durdurulmuş animasyonun bir frame öncesine alır.
Tweenadi.resume() : Durdurulmuş animasyonu kaldığı yerden devam eder.
Tweenadi.rewind() : Durdurulmuş animasyonu kaldığı yerden geri devam eder.
___________________________________________________________________

En son olarakta eğer runtime ziyaretçinin bu tween'e müdahale etmesine izin verdiğiniz (mesela bir oyunda) ancak tween'in tamamlandığında bir fonksiyon çalıştırmak istiyorsunuz (oyun bitti gibi) bunun içinde :

___________________________________________________________________

Tweenadi.onMotionFinished() : Tween animasyonu tamamlandığında.
Tweenadi.onMotionResumed() : Tween animasyonu duraklatıldığında.
Tweenadi.onMotionStarted() : Tween animasyonu başlatıldığında.
Tweenadi.onMotionStopped() : Tween animasyonu durdurulduğunda.
___________________________________________________________________




Faydalı olması dileğiyle....




Bir Cumhuriyet Hikayesi : Devrim Arabaları



24 Ekim'de vizyona girecek olan Tolga Örnek yapımı film Devlet Başkanı Cemal Gürsel tümüyle yerli üretim bir otomobil yapılmasını emredip görevin TCDD işletmesine verildiği bildirmesiyle başlayan yerli araba üretimi hikayesini anlatan bir Türk filmi.

16 Haziran 1961. Devlet Başkanı Cemal Gürsel tümüyle yerli üretim bir otomobil yapılmasını emreder ve görevin TCDD işletmesine verildiği bildirilir. O gün orada bulunan 23 mühendis bu emri "Türk insanının makûs talihine karşı bir meydan okuma" olarak algılarlar. En küçük bir tereddüt ya da endişe sergilenmeksizin derhal işe başlanır. Çalışma mekanı olarak Devlet Demiryolları'nın Eskişehir'deki Cer Atölyesi seçilir.

Zaman müthiş dardır. Ekibin Cumhuriyet Bayramı' na kadar yalnızca 130 günü vardır. Türkiye’nin ilk yerli otomobili olacak eserin adı da konmuştur: “Devrim”.

“Devrim Arabaları” azmin ve birbirine inanan insanların neleri başarabileceğini gösteren, bu topraklarda yaşanmış bir başarı öyküsüdür… Hikaye, bu aracı üretme görevini üstlenmiş 23 mühendisin kariyerlerini ve aile hayatlarını riske atarak girdikleri bu üretim macerasında zamanla, yoklukla, politikayla, karşılarına çıkan sayısız engelle mücadelelerini anlatır. Aslında anlatılan bir inanç ve azim öyküsüdür.

“Devrim Arabaları” Türk mühendisinin ve işçisinin, 20 sene öncesine kadar toplu iğne dahi üretemeyen bir ülkede kalkıştıkları bu meydan okumayı, bugün her şeye kolayca sahip olan nesillere, idealist zihniyeti ve zaferi de aktararak yaşattıkları bir birlik ve başarı öyküsüdür.

Yıl 1961. Otomotiv Endüstri Kongresi sonrası verilen davette işadamları, gazeteciler, bürokratlar, Devlet Başkanı Cemal Gürsel ülkenin kalkınmasının durumunu tartışmaktadırlar. Cemal Aga sinirlenip bu ülkenin otomobil bile imal edebileceğini söyler. Bir anda bu iddia ciddi bir meydan okumaya dönüşür. Paşa emrini verir. Yaklaşmakta olan Cumhuriyet Bayramı’na ilk yerli otomobil yetişecektir! Neredeyse imkansız bu görevi hem gerçekleştirebilecek hem de kabul edecek kişi aranır. Gündüz Serter’de karar kılınır. Vatana hizmet duygusuyla tereddütsüz görevi kabul eden Gündüz Bey güvendiği mühendislerden oluşan bir ekip kurar. Yaklaşık 130 günde sıfırdan bir otomobil imal edeceklerdir. Otomobilin gösterileceği 29 Ekim tarihine kadar neredeyse hiç görüşmemek üzere ailelerinden ayrılan ekip, Eskişehir’de kendilerine tahsis edilen eski bir atölyede buluşur. Araba yapmak için gerekli özel bir makine, tesisat olmadığı gibi basit bir vinç ve küçük el aletleri dışında hiçbir şeyleri yoktur. Güya devlet eliyle yapılan bu projeye Başkan dışında herkesin muhalefet ettiği buradan bile bellidir. Zaten daha proje bütçesi onaylanırken muhalifler neredeyse yarısını kırpmış, “alt tarafı bir otomobil için” 900 bin lirayı uygun görmüştür. Görünen o ki, ekibin uğraşacağı tek şey arabanın imalatı olmayacaktır. Başkanın danışmanı Sami Bey tavrını daha ilk günden koymuştur. Bir başka muhalif grup da basındır. Her gün projeyle ilgili olumsuz bir haber çıkmaktadır. “Pahalı, lüzumsuz” bu proje için kullanılan en hafif sıfatlardır. Uzun araştırmalar ve teknik toplantılardan sonra nasıl bir araba yapılacağına karar veren ekip, imalata geçtiğinde makine parkı eksikliğini fazlasıyla hisseder. Aslında arabadan önce yapılması gereken, arabayı yapacak makinelerin yapılmasıdır. Ancak buna zaman yoktur. Ekip herşeyi pratik çözümlerle, şartları zorlayarak halleder. Zaman ilerledikçe proje esnasında tanışanlar dost olurlar, birbirini tanıyanların da dostlukları pekişir. Ortak amaçları onları bir aile haline getirir.

Zor şartlarda, aksiliklerle son günlere yaklaşılırken ilk arabanın marşına basılır. Bu gelişme, projeyi takip eden herkesi şaşırtmıştır. Özellikle, projeyle çok alay eden gazeteciler ve projenin gerçekleşmemesi için elinden geleni yapan Sami ve yandaşları.

Uykusuz geçen son hafta ile birlikte bir araba daha imal eden ekip, ertesi gün Ankara’da Paşa’nın huzuruna çıkacak arabaları 28 Ekim gecesi trene yüklerler.

Devrim, ilk ve son yolculuğuna hazırdır.

http://www.devrimarabalari.com



Süper bir Yenilik : Photoshop CS4 Configurator


Adobe Photoshop'u, CS4 sürümüyle birlikte kendinize özel hale getirebileceksiniz. Adobe Configurator isimli araç sayesinde kendinize uygun şekilde barlar ve menüler oluşturabiliyorsunuz. Basit bir özellik gibi dursa da bugüne kadar Adobe Photoshop kullanıcıları, yazılımla beraber sunulan her türlü kısayol ve araç çubuğunu bu derece özelleştiremiyorlardı.Actions panelinde bazı işlemleri artık panele bir isimle ekleyip paylaşabileceğiz.Mesela Puzzle Efekti yap gibi.Birçok kullanıcının bu özelliği seveceği açık.Darısı diğer programlara da ...

Photoshop CS4 Configurator Extension teknolojisini kullanacağından hemen bir Adobe ID edinmeniz ve Adobe Extension Manager'ı kullanmaya başlamanız sizin için iyi olur.

Faydalı olması dileğiyle..






BilgeAdam Kariyer Noktası'ndaki Makalem



Merhaba arkadaşlar ;

BilgeAdam 'ın Mezunlarına ve Bilişim çalışanlarına Kariyer Desteği verdiği "Kariyer Noktası" portalında Makaleler kısmı için "Web Teknolojilerinin Dünü,Bugünü,Geleceği" başlıklı bir giriş makalesi yazdım. Zamanı olanlar bir göz atabilir...


http://kariyernoktasi.com/Article/Default.aspx




Digital Arts Yazımda Flash CS4 Tanıttım.


Merhaba arkadaşlar ;

Digital Arts Dergisi Ekim-Kasım sayısında Web-i Derya adlı köşemde Flash CS4 programının yeniliklerini ele alan makalem yayınlandı. Köşe adım Web-i Derya çünkü Web Teknolojileri üzerine konuşacak o kadar çok şey varki ve sadece sanılanın aksine Adobe odaklı değil programlama ve Microsoft Silverlight üzerine yazılar yazmayı düşünüyorum.

Digital Arts dergisinin bu ayki sayısına Adobe 'nin CS4 paket programları damgayı vurdu.Photoshop CS4 'teki yeni özellikleri Melih Sancar göstermiş.3D Layer olayı iyice geliştirilmiş. Illustrator ,Indesign ,Bridge programları da uzmanları tarafından incelenmiş.Gerçekten CS4'teki tasarımsal yenilikler heyecan verici.Bir Digital Arts dergisi tükenmeden edinmenizi tavsiye ederim.

GÜNCELLEME :

Flash CS4 ile gelen anlattığım yeni özelliklerin uygulamalı video'larını izlemek için :

http://www.adobe.com/products/flash/features/?view=topnew

http://www.layersmagazine.com/cs4