Adobe Photoshop Express Beta


Merhaba arkadaşlar ;

Bundan birkaç ay önce Adobe'nin Photoshop için ayrı bir logo ve kurumsal kimlik hazırlaması aslında Photoshop'un Creative Suite paket programının herhangi bir programı vizyonundan çok daha ötesine sahip olacağının belirtisiydi. Ki öylede oldu.Adobe , Photoshop'u internetten temel şekilde kullanılmak üzere yayınlama kararı aldı ve Adobe Photoshop Express hayata geçti.

Hemen belirtmem gerekirki bende büyük ümitlerle tüm Photoshop toollarını AIR teknolojisiyle internette de bulabileceğimi düşünüyordum ancak o açıdan hayal kırıklığı olsada solda gösterdiğim en temel görsel işleme metodlarının birçoğu bulunuyor. Kesme,döndürme,ışık düzeltme,kırmızı göz kaldırma gibi basit işlemlerden en sonunda da Tint,Pop Color ,Hue gibi bazı efektlerimizi de direk fotomuza uygulayabiliyoruz.

Bunlar için öncelikle Adobe ID ile siteye üye olmalı ve fotoğraflarınızı upload etmeniz gerekli.İşlemler sonrası fotolarınızı direk download edebiliyorsunuz.Ayrıca picasa,facebook gibi başka sitelerde barındırılan fotoğraflarınızı şifrenizle bağlanıp açarak aynı efektleri direk onlara da verebiliyorsunuz,o açıdan büyük kolaylık.

Beta olduğunu tekrardan düşünerek release olduğunda tekrardan bir değerlenme gerekicek gibi ama asla portable Photoshop gibi bir uygulama olmamış belkide biz biraz büyüttük oralara çok var.

Üye olup bu değişik uygulamayı denemek için tıklayın :







Swift 3D ile 3D Flash & Silverlight Animasyonlar











Merhaba arkadaşlar ;



Şuanda runtime gerçek zamanlı 3 boyut internette desteklenemiyor.Ancak 3D perspektifliymiş gibi görsellerimize 2 boyutta sadece trigonometrik olarak büküp animasyon vererek 3D havası verebiliyoruz. Gerçek fotoğrafla bile bu mümkün. Bir projede telefon döndürmek gerektiğinden 15 adet fotoğrafını ayrı konumlarda gelirmiş gibi çekip arkaplanını boşaltıp bir Movie Klipe getirttiğimizde başarılı sonuç almıştık ama tam bir türk çözümü olmuştu :)



Eğer bir şirketin logosunu döndürmek isterseniz , veya böyle bir telefon da olabilirdi, bu vektörel olarak o görsele sahipseniz bu iş Swift 3D ile çok kolay. Swift 3D Electric Rain firmasının çeşitli programlara 3D uygulamalar iletebilen programı.Bu programlar arasında gerçek 3D desteği olmayan programlar da var. Bunlardan biri de Adobe Flash.



Yukarıda blogumun logosuna uyguladığım gibi animasyonlar,ışık oyunları,modellemeler yapılabiliyor ve direk Flash için render ettirebiliyorsunuz. Vektörel tasarımınız sahnedeyken tek yapmanız gereken ok ile gösterdiğim kısımdaki animasyonlara bir kere tıklayıp önizlemelerini görebilirsiniz,beğendiğinizi sürükleyip görselin üzerine bırakmak. Alt ortadaki menude 6 adet farklı efekt verme mantığıyla istediğiniz efektleri verebiliyorsunuz.



Beğendiğiniz animasyonları atadıktan sonra yayınlamak için 1.adım olarak en üst sekmedeki Preview and Export Editor kısmına geliyoruz,daha sonra 2.adımda Target File Type ile çıkaracağımız dosya tipine karar veriyoruz ve 3.ve son adımda "Generate Selected Frames" ile bu formata göre seçtiğimiz animasyonu oluşturacak keyframe'leri oluşturacak. Size kalan en sağ taraftaki Export All kısmından Export to File ile gerekli swf dosyasını çıkartmak olacak.

Swift 3D'den çıkarttığımız swf dosyasını Flash çalışmamızda CTRL-F8 ile yeni bir movie klip oluşturup onun içerisinde o swf dosyasını File-import to stage diyelim ve anasahnede istediğimiz yerde bu movieklipi libraryden sürükleyip sahneye bırakarak kullanabiliriz.


Swift 3D programının yeni çıkan v5 versiyonunda artık aynı Flash'a verilmiş destek gibi Microsoft'un webteki vektörel animasyon standartı silverlight içinde gerçek 3D olmasada 3 boyut perspektifli 2 boyutlu gerekli XAML dosyalarını size çıkartabiliyor. Süper!



Ayrıntılı bilgi ve programı indirmek için :


http://www.erain.com/products/swift3d/silverlight





Expression Web 2 - CSS Uygulamaları

Merhaba arkadaşlar ;

Expression Web 2 Beta üzerinde CSS uygulamalarına bir göz atalım.Bildiğiniz gibi CSS ( Cascading Style Sheets ) Html elementlerine kazandırdığımız stil dosyalarıdır. Klasik HTML yapısında yazılara,görsellere,tablolara kısaca html tagi olan her websayfası elementine stil kazandırmak için çok opsiyonumuz yoktu ve hepsine teker teker yazıyorduk. CSS ile bu sorun ortadan kalkıyor. CSS stil dosyalarını merkezi tutarak istediğinizde tüm sayfadaki bu stile sahip elementleri güncelliyebiliyorsunuz. Expression Web'teki uygulamalarımıza bakmadan kısaca temel CSS stil dosyaları geliştirilimi ve yönetiminden de bahsetmek istiyorum. CSS dosyaları sadece bir yazıyı örnek alacak olursak onun rengi,büyüklüğü,italicliği gibi stil bilgilerini saklayabilen kodlardır. Metnin kendisi html olarak kalırken onun özelliklerini ayrı bir kısımda tutarak bu stilleri diğer aynı stili vermek istediğimiz kısımlar içinde kullanabiliriz.


CSS dosyalarının temel yapısı şu şekildedir :


stil {
atanacak stil;
mesela arkaplan rengi ;
}


gibidir. Öncelikle stil adı yazılır ve süslü parantezler ile atanacak stiller sıralanır.


CSS stil dosyaları sayfamıza 3 farklı mantıkla eklenebilir.


1-) Tag seçiciler ile ( body,p,table,h1,h2,h3,h4,h5,h6....)
2-) Class ( Sınıf ) ile
3-) ID ile


Bu 3 yöntem aslında sadece stilin adını yaratırken adından anlaşılabilir. Tag yapılı bir örnek alacak olursak :


body {
background-color: #FFFFFF" ;
}


gibi tüm body tagine arkaplan rengi olarak beyaz atamış oluyoruz.


.stil1 {
font-size:3 ;
}


gibi noktalı bir class (sınıf ) ismi oluşturarak font büyüklüğü 3 olan bir stil yaratmış oluyoruz.Tagten farkı bu class'ı head taglerinin arasında yarattıktan sonra body kısmında :


<p class="stil1"> Lorem Ipsum </p>


gibi Lorem Ipsum yazısının bulunduğu paragraf tagine atamamız gerekecek.Tagler direk o taglere atanırken classları mutlaka bir html tagine bu yapıda classlarımızı atamamız gerekiyor. Eğer herhangi bir html tagi arasında olmayan bir yazıya atamak gerekirse(illaki paragraf tagş olmayabilir)


<span class="stil1">Lorem Ipsum </span>


gibi span tagiyle ayırabiliriz.


ID yapılı atamalarımızda ise Class yapısına benzer olmakla beraber class yapısının avantajı olan sayfanın farklı yerlerinde aynı class yapısını kullanabilmek ID ile bir tekillik gerektiğinde kullanılıyor.


#kutu


{
width : 550 px ;
height : 700 px ;
}


gibi head taglerinde stilimizi yarattıktan sonra body kısmında yine atarken


<div id="kutu"> İçerik </div>


gibi o özellikleri bir div tagiyle division'a atayabiliyoruz. Özellikle arayüz tasarımları yapabildiğimiz CSS Layerları bu yapıyı kullanmaktadır.Class'tan farkı tekil olarak atanabilmesidir başka bir divisiona kutu atanamaz.


3 farklı yöntemde CSS stil dosyalarını yaratmayı gördük.Ayrıca bu yaratmış olduğumuz ve sayfada kullanılan stillerimizi HTML sayfamıza eklemenin de 3 yolu var.


1-) internal ( dahili )
2-) external ( harici )
3-) inline ( satıriçi )


Yukarıda bahsettiğimiz CSS stilleri oluşturulurken html sayfamıza eklerken eğer dahili kullanılacaksa head tagleri arasında oluşturup body'de CSS tipine göre istenen yerde çağırılıyor.Bu stilleri ayrıca harici bir stil.css dosyası gibi bir dosyada tutarak merkezi stil yönetimi sağlayabiliriz.Böylelikle dışarıda tutulan herhangi bir stil güncellendiğinde bu stili kullanan tüm sayfalarımız güncellenebiliyor.


Dahili ve harici olarak tutulabilen stillerimizden öte bazende direk o satırda stilimizi tanıtıp ne bir class ile ne de dışarıda bir dosya ile stil oluşturmadan o satırda stilimizi tanıtabiliyoruz. Satıriçinde sonuçta CSS html taglerine atanabilen stillerimiz olduğundan herhangi bir html tagini açtıktan sonra


<p style="font-size:3"> Örnek yazı </p>


gibi bir yapı ile style tagi açarak istediğimiz stili o satırda o html tagi içerisinde atayabiliyoruz.Ancak sadece o satırda kullanılabiliniyor ve merkezi yönetilemiyor.


Expression Web tam bir CSS 2.1 desteğiyle geliyor. Açılış ekranında sağ alt kısımda öncelikle sayfanızda oluşturacağınız CSS stillerinin adlarıyla beraber alttaki gibi bir önizleme ile beraber gelen Apply Styles paneli yer alıyor.



Yukarıdaki panelde sayfamızda bulunan tag yani seçici stiller hariç tüm CSS stillerimiz isimleri ve konumları ile yer alıyor.New Style diyerek sayfamız için yeni bir CSS stili oluşturabilir ve kullanabiliriz.CSS stillerini teker teker saha sonra inceleyeceğiz.Sayfada herhangi bir html tagini seçip ( yazı,görsel,div...) burada mesela style2 tıklayarak ona bu stilin atanmasını sağlayabiliriz. Attach Style Sheet ile dışarıda tuttuğumuz veya hazır bulduğumuz stil dosyalarını mesela style.css dosyasını çalışmamıza bağlayarak onun stillerini de kullanabiliriz. Options ile görünüm ayarlarının sıralamasını değiştirebilirsiniz.


Dikkatinizi mutlaka çekmiş olan Dreamweaver'a göre tasarımcılar için büyük bir yenilik olanrak Expression Web ile gelen CSS stillerindeki renklenmelerdir.Renklerin anlamları :


Mavi Daire : Tag Seçicileri ile atanmış CSS stili
Yeşil Daire : Class yapısında CSS stili
Kırmızı Daire : ID ile atanmış CSS stili
Sarı Daire : Inline ( Satıriçi ) atanmış CSS stilleri


Dairenin etrafı gri çemberle sarananlar ( fotoda style1 de olduğu, style2 de olmadığı gibi ) sayfada kullanılıyor anlamına geliyor,sarılı olmayanlar kullanılmıyor.(Inline'da yok o zaten direk atandığından)


CSS stillerinin üzerine sağ tıkladığımızda alttaki gibi bir menü geliyor. Apply Style ile o anda sahnede seçili olan html taglerine o stili atıyor.Normaldeki çift tıklama ile aynı görevi görür. GotoCode ile bu stili tutan kodlara ulaşabilirsiniz.Eğer internal bir stil ise head taglerindeki kısmı açar,eğer inline ise direk o kısmı seçer ama eğer external yani harici bir dosyadan gelen bir stil ise o dosyayı html dosyasının yanına stil.css diye açarak onun içerisine götürür.New Style yeni stil oluştururken New Style Copy varolan bir stilin bir kopyasını çıkararak geliştirmeye imkan verir.Modify Style ile bu stili geliştirmeye devam edebiliriz.Rename class ile bu stil dosyalarının adını style1,style21 gibi anlamsız ve karmaşıklığa yol açabilecek şekilden çıkarıp daha anlamlı olabilecek anabaslik,metin gibi türkçe karakter içermeyen isimlerle ekleyebiliriz.Böylece daha sonraki geliştirmelerde daha rahat okunabilirlik sağlamış oluruz.Delete ile sağ tıkladığımız stili silebiliriz. Attach Style Sheets ile dışarıdan bir css dosyasını sayfamıza bağlayabiliriz. Manage Style Sheet Links ile dışarıdan çoklu bağladığımız CSS stillerinde de en son eklenen her zaman daha önceliklidir ve mesela body tagine atanmış bir arkaplan rengi ilk eklediğimizde siyah sonrakinde sarı olursa en son eklenen harici dosyadaki CSS stili geçerli olur ve arkaplan sarı olur.Bu hiyerarşiyi düzenleyebileceğiniz kısım ekrana gelir. Remove Class , Remove ID , Remove Inline Style ile stili silmeden sayfadaki atanmış kısmından kaldırabiliyoruz.


Modify Style diyerek Expression Web 'in CSS stillerini teker teker yaratabileceğimiz CSS panelimiz geliyor. Buradan sol taraftaki menüden sırasıyla stil kodlarını seçerek atayabiliriz. New Style Sheet ile buradan da stil oluşturup daha sonra sayfaya atayabiliriz,burada Modify Style ile girdiğimiz bu menüde yapacağımız değişiklikler sağ tıkladığımız stili ve dolayısıyla ona sahip tüm stilleri güncelleyecektir.Eğer harici dosyadan çalışmamıza dahil olmuş bir stili Modify Style ile güncellerseniz Expression Web html dosyasının yanında o stil.css dosyasını da açarak üstüne yıldız koyarak değiştiğini yaptığınız değişikliği saklamanız için sizi uyaracaktır.

Expression Web arayüzünde CSS stillerinin özelliklerini bu açılan CSS panelinde değilde kısaca görebileceğimiz sağda bir CSS Properties panelimiz var. Altta gösterdiğim kısımdaki 3 buton ile en baştaki ile o an sahnede seçili olan html elementinin sahip olduğu stil dosyasının CSS kategorilerine göre getirmesi 2.cisi ise alfabetik olarak getirmesini sağlar.Benim tavsiyem alışmanız açısından CSS kategorisi şeklinde bırakılmasıdır. 3.buton ise atanmış stilleri mavi ile işaretliyerek üstte gösterip göstermemesini sağlıyor. Sağdaki Summary ile atanmamış class'ları görmediğinizi belirtebiliyorsunuz.CSS Properties kısmından istediğiniz özelliğin yanına gelerek aynı büyük CSS panelindeki gibi CSS stillerini atanabilecek özelliklerinden seçebiliyorsunuz.


Aslında bir de sayfamıza CSS atarken kullanabileceğimiz bir yöntem benim de günlük hayatta çok sık başvurduğum hem Dreamweaver'da hem Expression Web'te olan CSS Intellisense desteğidir. Zamanla CSS mantığını ve atanmasını kavradığınızda paneller yerine çok hızlı bir şekilde atamak istediğinizi stili kod kısmından da verebileceksiniz. Bu intellisense desteğine erişebilmek için mesela aşağıdaki gibi style1 adında örnek bir class'ımız olsa stil olarakta font-family seçtikten sonra yeni bir stil atamak için font family stilinin sonundaki noktalı virgülden sonra enter'a bastığımızda alttaki gibi atayabileceğiniz tüm CSS stilleri sıralanabiliyor.Ancak burada atadığınız stillerin sonuna burada noktalı virgül koymazsanız CSS stili atanmıyor siz yazmayı unutmayın.


En sık yaşadığımız sıkıntılardan biri de özellikle CSS positining için hazır internetten bulduğumuz Layout CSS dediğimiz sayfanın arayüzünü tasarımlarının bulunduğu CSS dosyalarını açtığımızda dinamik olarak oluşturulan bu dosyaların altta solda gösteriğim gibi tek satırda gelmesi ve yönetiminin ve okunabilirliğinin zorluğudur.Bu CSS dosyasını Expression Web ile açıp sağ tıklayarak Reformat CSS diyerek sağdaki gibi okunabilir ve geliştirilebilir hale getirilebiliniyor.


CSS stil dosyaları ile çalışırken kendi html sayfanızda yarattığınız internal ( dahili ) CSS stillerini merkezi yönetmek üzere tüm sayfalarınızı buna bağlayarak çalışmanızın tümü için geçerli stiller oluşturmak isteyebileceksiniz. Bunun için yeni bir CSS dosyası oluşturup zincirlemek gerekiyor.New Style kısmına tıklayıp "Define in" kısmından New Style Sheet diyebiliriz. Bu projemize yeni bir CSS dosyası yaratıp bunu Attach yani zincirlemek isteyip istemediğinizi soracak OK dersek bağlamış olacağız.Expression Web alttaki gibi Manage Styles panelinde size 1.css dosyasını ben örnek olarak zincirledim onda da bir arkaplan rengi olarak body tagine stil atadım.Ayrıca başlık yazılarıma atadığım internal yarattığım bir style1 stilim var.Bu başlık stilinin tüm projemdeki dosyalarda aynı olmasını ve bu css dosyasındaki stili güncellediğimde hepsi güncellensin istiyorum.Bu yüzden bu stilimi dışarıdaki dosyama eklemem lazım.Normalde o stili head kısmından cut ( kesmeli) daha sonra harici dosyama düzgün formatta yapıştırmam gerekiyordu ama Expression Web'te altta gösterdiğim üzere istediğiniz stilleri dahiliden hariciye sürükleyip bırakabiliyoruz ve arkaplan da bu dahili stili silip harici dosyaya bu stili ekliyor.aynı şekilde harici bulduğunuz stilleri de dahiliye bu şekilde taşıyabiliyoruz.Mükemmel bir zaman kazancı.


Expression Web 2 Beta tam CSS desteği ve tasarımcılar için yardımcı birçok unsurla Dreamweaver dahil rakiplerinin önüne geçiyor. Expression Web 2 release olunca CSS tarafında birkaç yenilik daha bizi bekliyor olucak.




Faydalı olması dileğiyle...






Adobe Flash'ta ComboBox kullanımı


Merhaba arkadaşlar ;

Flash'ta çok güzel bir component olarak hazır gelen ComboBox kullanımı aslında gayet basit ve çok kullanışlı olabiliyor yerine göre. ComboBox uygulamasını Window-Component panelinden tutarak sahnemize bırakalım ve Instance name olarak alltaki gibi combom diyebiliriz.Parametre panelinden labels ile ComboBox'tan seçim yapabileceğimiz menuleri seçebiliyoruz,romCount ile maksimum açabileceğimiz seçeneği belirliyoruz.En son adımda componentı seçip Movie Klip olarak tanıtalım.Artık bu movieklipe "combom.selectedIndex" gibi bir kod ile seçili olan combo adımını okuyabiliyorum.Menu seçiniz burada 0 iken 1.menü 1 oluyor.

Daha sonra eğer ComboBox 1.menu seçildiğinde mesela anasahnede 2.frame'e gitsin isteseydik onClipEvent(enterFrame) kodu ile , çünkü bu kod devamlı çalışmak durumunda olduğundan yazarak alttaki gibi bir kod ile anasahnemizi gönderebilirdik.

_____________________________________________________

onClipEvent (enterFrame) {

if (combom.selectedIndex==1)
{
_root.gotoAndStop(2);
}
{
_____________________________________________________

Böylelikle diğer seçeneklere de tıklandığında anasahnede istediğimiz kısma sitemizi gönderebiliyoruz veya yeni sayfa açabiliriz. Örnek çalışmam için tıklayınız :


http://ercanaltug.googlepages.com/combo.fla



Faydalı olması dileğiyle....



Flash içerisinden pop-up pencere açmak

Flash animasyonunuz içerisinden popup pencere açmak için; öncelikle sayfanıza bir javascript fonksiyonu tanımlamalısınız.

Aşağıda ki kodu sayfanızın <head> ... </head> etiketi arasına ekleyin.

<script language="javascript">
<!--
function ac(adres){
pencereayarlari = 'width=200px,height=300px,top=0px,left=20px,scrollbars=no,location=no, directories=no,status=yes,menubar=no,toolbar=no,resizable=yes';
ac = window.open(adres,"pencere",pencereayarlari);
}
//-->
</script>

pencereayarlari alanında ki; width ve height açılacak pencerenizin genişlik ve yükseklik değerleridir. Açılacak pencerenin içeriğine göre bir boyut verebilirsiniz. top ve left değişkenleri açılacak pencerenin tarayıcı ekranına göre soldan ve yukarıdan hiza değerleridir. scrollbars, location, directories, status, menubar, toolbar; açılacak pencerede bulunmasını istediğiniz ek tarayıcı özelliklerini içerir. Olmasını istediklerinizin karşısında ki no / yes kısımlarını pozitif veya negatif değerler girerek değiştirebilirsiniz. resizable ise açılacak sayfanın kullanıcı tarafından yeniden boyutlandırılmasına izin verip vermeyeceğinizi sorar.

ac ile özelliklerini belirlediğimiz penceremizin adresini, ismini ve ayarlarını çalıştırdığımız alan. Burada bulunan pencere kısmına popup yazmayın. Zira kimi engelleyiciler bu isimde ki pencereleri otomatik olarak engellemekte.

Böylelikle HTML içerisinde Javascript ile DHTML kısmını tamamlamış olduk.Sıra bunu Flash içerisindeki bu mini pencereyi açacak butona eklenecek koda geldi.Sahnemiz içerisinde bir buton oluşturduktan sonra bu butonumuz ile ac fonksiyonunu çağırmamız yeterli. Bunun için butonumuza altta ki actions' ı ekliyoruz.

on (release) {
getURL("javascript:ac('http://www.ercanaltug.blogspot.com')");
}

Burada, javascript içerisinde ki ac fonksiyonumuzu çağırarak, bu fonksiyona açmak istediğimiz adresi gönderiyoruz. Tırnak işaretlerine dikkat.

Faydalı olması dileğiyle...


Mutlu ol bu bir emirdir kısa filmi.



Günümüzdeki yöneticilerin Batıcılık anlayışı çokta değişmemiş.Özümüzü kaybetmeden gerçek çağdaşlaşma yolunda bir Batıcılık lazım,ekonomi iyi gitsin dostlar alışveriste görsün diye Cumhuriyet Devrim ve İnkilaplarını kalemleri ve düşünceleriyle savunanları tutuklatarak Avrupa Birliğine girmeye çalışanlara duyurulur. Güzel bir kısa film ama anlayana...

Silverlight QuickStarts & Projeleri

Merhaba arkadaşlar ;

Microsoft'un Silverlight anasayfası Silverlight.net adresindeki eğitimler hem güncellendi hem de Silverlight 2.0 da eklendi. Learn linkinden Quickstart kısmına baktığınızda 3 anabaşlık var.1.0 için Blend ve Javascript ile yapılabilecek projeler,devamında Blend ile daha görsel animasyonlar gösteriliyor.En son adımda da 2.0 Beta için ( C# ve VB kodları seçmeli ) .Net Framework uyumlu vektörel animasyonları gösteriyorlar,süper.

Silverlight 1.0 QuickStarts


Silverlight QuickStart Using Microsoft Expression Blend


Silverlight 2 Beta QuickStarts

Silverlight 2.0 projelerinde bir butona verilmiş C# kodu aşağıdaki gibi :


public void ButtonMouseEnter(object sender, EventArgs e)

{
glassRectangle.Visibility = Visibility.Visible;

}

Actionscripte ne kadar benzer,çok sevindirici benim açımdan demekki önümüz C# :)

Ayrıca vektörel tasarımlarınızda hazır bazı Datagrid kontrollerini de paylaşan siteler de ortaya çıkmış. RadControls örnekleri gerçekten görülmeye değer. Veritabanından aldığınız raporları çeşitli vektörel animasyonlarla sunabiliyoruz ve dahası gayet dinamik.

Mutlaka bir göz atın ve takip edin.



Netron Silverlight Gün-2 Tamamlandı

Merhaba arkadaşlar ;

Netron BA'da Daron YÖNDEM'in eğitmenliğini yaptığı tam gün Silverlight Workshoplarının 2.gününü de dün tamamladık. Silverlight ile Veri İşlemlerini gördük ve veritabanlarıyla iletişim halinde dinamik çalışabilen animasyonlu barlar tasarladık,gerçekten bir görsel şölendi.

Kaçıranlar uygulama notlarını Daron hocanın blog adresinden edinebilirsiniz. Yukarıda bir Silverlight etkinliği klasiği dün sonu fotoğrafımızda da ben Daron hocanın Silverlight şapkasıyla poz verdim,şapkasız çıkmam abi :P

Netron BA'da olacak son etkinlik " Silverlight Video Uygulamaları " olacak ve 5 Nisan'da Altunizade'de 401de gerçekleşecekki böylelikle 30 kişi kadar alabileceğiz.Yine başvurular için duyurular ve hatırlatmalar yapacağız. Eminim Silverlight'ın şuanda rakipsiz tek tarafı olan video uygulamaları çok daha keyifli ve güzel geçecek böylelikle finali de yapmış olacağız.

Takipte kalın...


Shape Hint ile 3D Arayüz Deneyimleri




Merhaba arkadaşlar ;

Shape Hint ile vektörel animasyonlarınızda söz sahibi olabiliyorsunuz.Dersteki uygulamalarımızdan birinde bu kadar güzel bir projeye imza attık ve bende bloguma çıkarmaya karar verdim,olay sadece ışık,gölge ve Shape Hint 'te saklı.

Önce Rectangle aracıyla shift tuşu yardımıyla bir kare oluşturalım. Bu aşamada tek renk (solid) ve kontursuz bir kare işimize yarayacaktır. F8 ile bunu kup3d_mc isminde bir Movie Clip haline getiriyoruz. Daha sonra karemize çift tıklayarak düzenleme moduna geçiyoruz, dikkat etmemiz gereken ise Shape animasyon vereceğimizden karenin group değilde shape olmasıdır. Eğer gruplu ise Ctrl G ile grubu bozabilirsiniz

Sonrasında 30. kareyi seçip F6 ile yeni bir keyframe oluşturuyoruz, arada bir yeri seçip Properties panelinden Tween’i None dan Shape’e getiriyoruz. Şimdi 3 boyutlu ilizyonu verebilmek için 2 adet Shape Hint eklememiz gerekiyor. İlk keyframe geliyoruz şeklimizi seçip Modift > Shape > Add Shape Hint seçimini yapıyoruz.

İlk shape hinti sol üst köşeye, aynı aşamalardan geçip ikinci shape hinti sol alt köşeye yerleştiriyoruz. Şimdi animasyonumuzu tamamlamak için yerleştirdiğimiz Shape Hintleri animasyonun 20.Keyframe’indede taşımamız gerekli. 20. Kareyi ve şeklimizi seçip bu seferde ikinci oluşturduğumuz Shape Hint’i (B yazılı olan) sağ alt koşeye, ilk oluşturduğumuzuda (A yazılı olan) sağ üst köşeye yerleştiriyoruz.

Aslında burda yaptığımız ilk keyframedeki shape hintler başlangıç, son keframedekiler ise varışı yani animasyonun hedefini belirliyor. Nihayi olarak animasyonumuzu Ctrl Enter ile test ettiğimizde şekildeki gibi bi görünüm olması gerekiyor.Şimdiki aşama ise ana Timeline’a geri dönüp, dönüyormuş gibi görünen karemize hareket kazandırmak olacak. Bunun için boş biyere çift tıklayabilir. Timeline panelindeki Mavi Ok’a basabilir yada Scene 1’i seçebilirsiniz. Bu sefer ana Timeline’da 20. Kareye F6 ile yeni bir keyframe oluşturuyoruz aradaki bir frame’e gelip Tween’i Motion olarak seçerek animasyonumuzu aktif hale getiriyoruz. kup3D Movie Clip’imizin hedef ve varış noktaları aynı olduğundan animasyon teknik olarak gerçekleşsede görünürde hiç bişey oynamayacaktır. Bunun için 20. Karedeki “kup3D” Movi Clip’imizin konumunu sayfanın sol üst tarafına yakın bir yere taşıyoruz.

Animasyonumuzda Küpümüz yukarıya çıkıyor. Ve 20. Kareden sonra 1. Kareye kendiliğinden dondüğü için (loop) animasyonumuz kesik görünüyor. Akışkan bi görüntü elde etmek için birinci kareyi seçip Shift tuşuna basıyoruz, shift tuşunu bırakmadan 20. Kareyide seçersen aradaki tüm kareler seçilmiş olacaktır. Şimdi seçili olan animasyonları 20. kareden itibaren tekrar ettirmek istiyoruz bunun için seçimi tutup 21.ve 40. kare arasına farenin sol tuşu ile taşıyoruz farenin sol tuşunu bırakmadan Alt tuşuna basarak animayonun kopyalanmasını sağlıyoruz. Şimdi sırasıyla Fare tuşunu ve Alt tuşunu bırakabilirsiniz. Böylece animasyonu kopyalamış olduk. Şimdi ise 21~40. kareler arasına sağ tıklayıp Reverse Frames diyoruz. Böylece kesik görünümün önüne geçmiş olduk.

Şimdi arkaplanı süslemeye geçebiliriz. Bunun için yeni bir Layer oluşturup alt tarafa taşıyoruz. Ve Beyazdan Siyaha degredeli bir dikdörtgen çiziyoruz. Bunu sahne boyutlarına getirmek için Window>Align paneline ihtiyacımız olacak. Align panelinde To Stage seçeneği aktif iken sırası önemli olmamakla diğer hizalama kurallarınıda seçip şeklimizi sahne boyutuna getirip tam olarak ortalamış oluyoruz.

Sıradaki adımda Gradient Transform Tool ile ışık hissi vermek için renk geçişlerini düzenleyeceğiz. Gradient Transform Tool’u ardındanda az önce sahneye ortaladığımız dikdörtgeni seçiyoruz. Type kısmından Radial’ etkinleştirdikten sonra dolgu etkisini resimdeki gibi yapmak için tutamaçları resimdeki yerlerine taşıyın.Bu aşamada arka planı biraz daha süsleyeceğiz ve yeni bir renk geçişini az önce tamamladığımız ile kaynaştıracağız. Bunun için yeni bir layer oluşturup küp3d Movie Clipinin olduğu layer ile arkaplan layerinin arasına yerleştiriyoruz.

Yatay uzunluğu sahnenin boyutlarında, dikey olarak sahnenin aşağı-yukarı yarısı kadar yeni bir dikdörtegen çiziyoruz. Degredesini Type kısmından Liner yapıyoruz. Degrede açısınıda (yönünüde), 90 derece (dikey) olarak ayarlıyoruz. Color Mixer penceresinden renk tutamaçlarını şekildeki gibi ekleyelim. Eklemek Renk Geçiş Önizleme çubuğuna tıklayabilir, çıkarmak için ise tutamaçı tutup aşağıya doğru iterseniz silinecektir.Makyajımızı tamamlamak için biraz da esasoğlan olan kup3d’yi ışıklandıralım. Küp yükseldikçe yanı ışık kaynağına yaklaştıkça ışığın artmasını simüle etmek için küpün olduğu layerda ortadaki keyframelerin içindeki küpleri seçip Properties panelinden Color: Brigthness 80% yapıyoruz.Sonrasında Küp3d Movie Clipin içine girip Paint Bucket Tool ile Karenin sağ üst köşesine siyahtan beyaza doğru radial bir degrede veriyoruz. Yalnız bunu ilk kareye ve son kareye verirsek daha gerçekçi bir görünüm elde etmiş oluruz. Şimdi Anasahneye dönebiliriz.


Son aşamada ise Küpümüze göle ekleyeceğiz bunun için yeni bi layer oluşturalım. Küpün bulunduğu layerdaki ilk küpü kopyaladıktan sonra tekrar yeni onuşturduğumuz boş layerin boş frame’ine kup3d movie clipimizi yapıştıralım.
Küpün altına gelecek şekilde taşıyalım, daha sonra Free Transform Tool ile resimdekine benzer bi hal aldıralım.

Ardından Filtre paletinden Dop Shadow filtresine resimde de görünen opsiyonları girip gölgeyi biraz netsizleştirip, esas objeyi gizleme (Hide Object) seçeneğini aktif edelim.


Şimdi ise aradaki bir frame ve son frame’e F6 ile keyfame’e dönüş komutunu veriyoruz. Aradaki frame’i seçin bu sefer küpün gölgesini biraz yayalım ki obje ışığa yaklaştıkça gölgeside kaybolur gibi olsun bunun için Blur’unu resimdeki gibi seçebilirsiniz.


Ek olarak motion tween animasyonlarına Ease özelliği verirseniz daha yumuşak geçiş sağlayabilirsiniz.



Projenin fla çalışma dosyasını indirmek için :



Çalışmayı gerçekleştiren Turgay Berberoğlu öğrencime teşekkürlerimi iletiyorum.


Expression Web 2 Beta - Yenilikleri

Merhaba arkadaşlar ;


Microsoft Expression ürünlerinin 2.ci versiyonlarının betalarını MIX'08 ile birlikte yayınladı ve download sayfasına ekledi. Ben de hemen Expression Web'teki yeniliklere bir göz attım ve iyi bir yazı olacağını düşünerek sizlerle paylaşıyorum.



Microsoft'un en öne çıkardığı yenilik artık Expression Web'in php sayfalarını açabileceği,dahası intellisense ile geliştirmeler yapılabileceği.


Ayrıca aynı aspx sayfalarda olduğu gibi php sayfalarını da önizlemek için " Microsoft Expression Development Server " adında bir hizmet ile direk serverdaymış gibi izleyebilmemiz.IIS ve Apache Server kurmalar geride kalıyor.



Bence en büyük yenilik ise Photoshop dosyalarını direk psd dosyası olarak layerları ile beraber projemize dahil edebilmemiz. Insert - Picture - From Adobe Photoshop (.psd) diyerek bir photoshop dosyasını web sayfamıza getirebiliriz. Böyle bir güzelliği Dreamweaver dan beklerdik değilmi ?


PSD Photoshop dosyamızı seçtikten sonra Expression Web PSD dosyasının layerlarını alttaki gibi ekrana getiriyor ve size hangilerini getirmek istediğinizi soruyor. All layers diyerek hepsini veya alttaki örnekteki gibi text layerlarını kaldır gibi bir seçenekte bulunabiliyoruz. PSD dosyaları direk internette bildiğiniz gibi kullanılamıyor,bu görseli jpeg,gif veya png olarak yayınlayabilmek için dosya formatı ve kalitesine karar veriyoruz.


Böylelikle psd dosyasından jpeg kalitesine karar verdiğimiz şekilde kullanabilir hale getiriyoruz. Bu kadar ile kalmıyor,bence en etkileyici noktası psd dosyasını eğer bir grafik tasarımcı ile çalışıyorsak veya Photoshop'ta web arayüzünde güncelleme yaptıysak direk fotoğrafa Expression Web'te sağ tıklayıp alttaki ekrandaki gibi Update from Source ile kaynaktan istediğimiz değişen layerları güncelleyebiliyoruz.

Böylelikle bence Microsoft aslında görsel tasarım tarafında sanılanın aksine Expression toollarıyla Photoshopu veya herhangi bir Adobe ürününü rakip almadığını aksine onun tasarım gücünden entegre bir şekilde faydalanıp daha görsel web projeleri çıkarmayı öngördüğünü gösteriyor. Bir başka Adobe ürünlerini direk çağırmada başka bir sürpriz :Adobe Flash. Insert - Media - Flash ile alttaki gibi object dosyası olarak Flash çalışmamızı getirebiliyoruz ve dahası aynı Dreamweaver'daki gibi sağ tıklayıp Play diyerek Flash çalışmasının da önizlemesini tasarımda görebiliyoruz,Flash SWF Properties kısmı ile de transparan ayarları gibi parametreleri de ekliyebiliyoruz.


Tabiiki Insert - Media menüsünde Flash olur da Silverlight olmaz mı? Insert - Silverlight seçtiğimizde alttaki gibi öncelikle Silverlight tek bir dosya değil bütün bir proje olduğundan o projedeki ( js,xaml,html...) dosyalarının bulunduğu klasörü seçmenizi istiyor,daha sonra bu proje altında hangi html sayfasının bu Silverlight projesinin giriş sayfası olduğunu sorarak size bu htmldeki div içerisindeki Silverlight projesini getiriyor.Dahası aynı Flashtaki gibi Silverlight projesini tasarımda da görebiliyoruz.

Tasarım kısmında gayet hoş yenilikler ve entegreler gelmişken aynı şekilde yazılım ki Microsoft'un .Net gücünü arkasına alması çok beklenir bir durumdu. ASP.Net kontrollerinin yanına alttaki gibi Ajax Extensionları ile Update Panelleri ile veritabanları ile asenkron iletişimler artık tasarımcılar da geliştirebilecek.


Ayrıca çok hoş bir özellikte iframe yani inline frame'ler de var. Bildiğimiz üzere Dreamweaver'da iframeleri desteklese de ancak kodlarla eklenebiliyor ve kara bir pencere olarak görülüyordu. Visual Studio'da da durumlar pek farklı değil. Ancak Expression Web 'te HTML kontrollerinden bir Inline-Frame'i sahneye bıraktığımızda alttaki gibi pencere geliyor burada Set Initial Page ile projemizden hazır bir html sayfasını gösterebilirken new page ile yeni bir sayfa tasarlayabiliyoruz.

I-frame içerisinden sabit duran menüler sayesinde istediğimiz içeriği sayfamızın istediğimiz bir kısmına istediğimiz pencere ile yükleyebiliyoruz. Ancak yüklenen içerik gelende önizleme yapılarak görülebiliniyordu. Ancak mesela ben Set Initial Page seçip adrese bir html yerine http://www.nba.com yazarak dışarıdan bir websitesinin de yükleyebiliyorum,dahası o kısmı tasarımda direk yüklenmiş olarak görebiliyorum ve sağ tıklayarak büyüklüğü(width,height),scroll çıkması gibi klasik i-frame özelliklerini anlık güncelliyebiliyorum.

Beni daha da etkileyen bu i-frame içerisine tıkladığınızda sağda CSS panelinde bu yüklediğiniz sayfadaki CSS kodlarını class ve genel yapıları ile görebiliyorsunuz,isterseniz kendi projenize de sürükle bırak ile kazandırabiliyorsunuz,muazzam! Aşağıda nba.com adresinin CSS class larını görüyoruz.


Expression Web genel yapıda daha birçok yeniliklere sahip , gelişmiş ve güncellenmiş CSS 2.1 desteği , FTP protokolleri ile erişim imkanı , ASP.Net 3.5 projelerine uyumluluk gibi birçok yeniliği daha içerisinde barındırıyor.


Açıkçası Dreamweaver CS3'teki Ajax frameworkleri Spry dışındaki hiçbir yenilik bu kadar heyecan verici değildi ama Expression Web bir çok puzzle'ı oturtuyor ve tasarım oyunun çok önemli bir oyuncusu olacağnın mesajlarını gayet açıkça belirtiyor. Dahası benim kişisel sevincim Silverlight dışında kalan bir ürün gibi gösterilmesine naziren bence tam zıttına Silverlight projelerinin kalbine oturuyor.Ve bunu sadece değişen siyah arayüzü ile değil Expression Design 2 ile gelmiş olan Fireworks ve ImageReady'den hatırlayacağımız Slice Tool ile XAML vektörel arayüzleri okuyabilmesi ve işleyebilmesi , tek işlem ile Silverlight projelerini anlık görünteleyebilmesi ile artık gerçekten oyunun tam içinde.

Tasarımcılar ve yazılımcılar Expression Web 2 , kesinlikle yükleyin ve siz de bu programın keyfini çıkarın.




JumpEye Components for Flash


Merhaba arkadaşlar ;

Internet üzerinde Flash hazır animasyonları ve componentları paylaşan siteler oldukça var.Bunlardan bazıları da gayet profesyonel şeklide paket halinde bunları sunuyorlar. JumpEye Componentları da bunlardan birisi. Normal şartlarda paket olarak ücretli olan bu componentlar forumlarda elden ele dolaşıyor.Component olarak mxp(Macromedia eXtension Package) dosyasını yükledikten sonra kullanımı ücretsizdir çünkü hazır kod parçalarıdır ve lisansları serbesttir.

JumpEye şirketinin güzel bir component listesi var :

- Accordion Menu V3
- Accordion Panel V3
- Accordion Tree Menu V3
- Advanced MP3 Player V1
- Color Picker Pro V3
- Context Menu Pro V1
- CPTheme Dark Black
- CPTheme Office 2007
- Drop Down Menu V3
- Drop Down Tree Menu V3
- Easy ToolTip Component V1
- Flv Video Player Pro V1
- Loader Pro V3
- Numeric Sliders V1
- ScrollBar Pro V1
- Special Blur Transition Loader
- Special Crossfade Transition Loader
- Special Loader
- Special Pixelate Transition Loader
- Special Pixeldissolve Transition Loader
- Special Swap Transition Loader
- Square Effects Pro V1
- Text Menu Bar V1
- Thumbnail List V1
- Thumbnail Slider V1
- ToolTip 2007 Pro V1
- Vector Shape Pixelate Pro V1
- XML Slide Show V3



Bu componentları aşağıdaki gibi forumlarda bazılarını paylaşılmış olarak bulabilirsiniz. Gerçekten çok hoş componentlar ve dahası AS 2.0 kodlardan oluşuyor.

http://www.softarchive.net/graphics_&_design/jumpeye_components_for_flash:53048.html


Faydalanın...

Flash'ta ShapeHint taktikleri


Merhaba arkadaşlar ;

Adobe Flash gücünü vektörel animasyonlardan alır.Vektörel olmasından dolayı Flash'ta hepimizin bildiği gibi vektörel görsellerin kendileri değil matematiksel anlamları,koordinatları,renkleri,boyutları.. tutulur.Ve animasyon olarak bir Shape Tween verdiğimizde mesela bir kareden daire oluşturmaya çalıştığımızda Flash aradaki frame'leri tween(between'den gelir) mantığıyla doldurarak animasyonu gerçekleştirir.

Alttaki ilk örnekte Flash'ta shifte basarak çizilmiş bir kareden 10.frame'de bir daire oluşturduğumuzda Flash bunu döndürerek oluşturuyor,ancak bir sonrakindeki gibi bir dönüşüm yani bizim istediğimiz noktalardan istediğimiz noktalara deformasyon olsun isteseydik burada Shape Hint ( Şekil İpuçları ) devreye girecekti.






Bir animasyonunuza Shape Hint eklemek için Shape Tween verilmiş frame seçiliylen üst toolbardan Modift-Shape Hint-Add Shape Hint diyerek bir Hint noktası ekleyin.Bu nokta shape tweeni gerçekleyen 2 frame'de de gözükecektir,seçerek istediğiniz noktadan diğer son ahlindeki geçeceği noktayı seçin.Alttaki gibi 4 tane Hin t noktası ekleyerek 2 frame'de de bu başlangıç şeklindeki bu noktadan bitiş şeklindeki bu nokta oluşsun diyelim.


Shape Hint için güzel bir proje olabilecek mesela 2 rakamından direk 3 rakamı oluşturmak istediğinizde de Flash saçmalayacaktır ancak siz Shape Hintler ekleyerek 2'nin içerisinden 3 karakterinin çıkmasını sağlayabilirsiniz.

Shape Hint ile ilgili çok güzel örnekler var zaman buldukça ekleyeceğim,kolay gelsin.

AL2y.com Giriş Sayfam artık Flash - Silverlight


Merhaba arkadaşlar ;

Blog adresimi blogspotta tutuyorum,açıkçası kendi domain adresim var ancak 7 gün eğitime girip,boş zaman yaratıp onda da seminerlere,sunumlara ve tasarımlara ayırdığım için blogu altyapısıyla çok uğraşamadım.Ancak www.AL2y.com domain adresimin giriş sayfasına ne zamandır birşeyler düşünüyordum ensonunda eğitimlerde de misal kullanmak üzere yarı Silverlight yarı Flash bir giriş sayfası tasarladım ve senkronlarını tam olarak CSS ile yerleştirdim.Flash logosuna tıklarsanız blogumun sadece Flash etiketlerine sahip yazılarına,Silverlight logosuna tıklarsanız sadece Silverlight etiketli yazılarına,logoya tıklarsanız hepsini gösteriyor.Eksikleri var çok uğraşamadım ancak zamanla daha da güzel fikirler geldikçe ekleyip toparlayacağım.

Buradan göstermek istiyorumki Silverlight yeterli sayıda bilgisayarda yüklü hale gelince aynı safyada eğer Flash tasarımlarına daha hızlı ve yetenekliyseniz mesela bir menüyü Flash ile tasarlıyıp aynı sayfada mesela video uygulamaları var ise onları tabiiki videoda çok güçlü olan Silverlight ile etkileşimli gösterebiliriz,hem de Silverlight Live Services ile ücretsiz bant genişliği ile.

Bence şuan Adobe tarafının Silverlight'a yakınlaşmamasının tek nedeni yeterli PC'de olmamasıdır o engeli Microsoft Windows Update,Facebook,Live Messenger gibi uygulamalarla aşarsa o zaman aynı sayfada çoklu pluginleri görmek şaşırtıcı olmamalıdır.

Web Teknolojileriyse , görselse , etkileşimliyse biz içindeyiz,arkasındayız.



Flash - PHP Mailform Tasarımı

Merhaba arkadaşlar ;

Sizlerden gelen epostalara göre webte eksik olan türkçe içerikli Flash kaynaklarının eksikliğini gidermek için bazen cevap olarak gönderdiğim emailleri buraya da toparlayıp ekliyorum.Bu da öyle bir yazı.Daha önce sizlere eğitimlerde kullandırttığım kitabımızda olan hazır bir Flash tabanlı PHP Mailformu paylaşmıştım.

http://ercanaltug.blogspot.com/2007/09/flash-iin-php-form.html

Ancak çoğunluk tasarımı componentlardan oluştuğundan geliştirelemediğinden yakınıyordu.Bugün ise sıfırdan sizin input textler atayarak istediğiniz kadar doldurabilen kutu ve tasarımını yapabileceğiniz bir php tabanlı flash mail form tasarımını göstereceğim. Öncelikle Text Tool seçtikten sonra Input Text seçimi yapıyoruz.


Text alanımızı seçtikten sonra properties panelinden Var(variable-Değişken) kısmını dolduruyoruz.Adtext alanına Var değeri olarak ad, soyad text alanının var değeri olarak soyad E-mail text alanına email ve Not text alanına not değişkenlerini atayın,türkçe karakter tasarımda kullansanızda var kısmında kullanmayın.



Formumuzun tasarımı ve text alanı ile ilgili işlemleri tamamladıktan sonra güzel bir gönder butonu tasarlayın ve seçerek actions paneline aşağıdaki kodu yazalım.

on(release){
loadVariablesNum("mail.php",0,"POST");
}

Bu kod ile bu değişkenlere girilen yazılar mail.php dosyası tarafından işlenip gerekli email adresine iletilecek olduğunu anlatıyor.Mail gönderme işlemini yapacak olan mail.php sayfasını da yaparak mail formumuzu çalışır hale getiriyoruz. mail.php dosyasının içeriği aşağıdaki gibi olacaktır.Fazladan eklemek istediğiniz diğer Input Textler içinde en son satırdan sonra $mesaj .= "$yenigiris"; gibi bir metodla ekleyebilir,mail.php de de çekebilirsiniz.


< ?
@extract($_POST);
$mesaj = "$not\n\n";
$mesaj .= "$ad";
$mesaj .= "$soyad";

mail("sizin@emailiniz.com","INTERNET SAYFASINDAN MESAJ",$mesaj,"From: $email");
? >


Yukarıda ki kodda mail adresi olarak kendi mail adresinizi yazın.Mail formumuzu kullanıma hazır hale getirdik. Dilerseniz benim örneğimde yaptığım gibi butona tıklandığında farklı bir frame e gönderek mailiniz başarıyla gönderilmiştir benzeri bir açıklama yazabilirsiniz.

Ayrıca türkçe karakterler Input Text'e girildiğinde sorun çıkabiliyor bu sorunun çözümü için Flash'ta ilk frame'e alttaki kodu yazın.

System.useCodePage = true;

Unutmayalımki mail.html sayfasını çalıştırarak önizleyeceğiz ve PHP sayfalarını Linux tabanlı server'lara atarak denememiz gerekiyor,localde çalışmaz arkadaşlar.
Örnek çalışmamı indirmek için tıklayın.

http://www.expression.web.tr/MailForm.rar

Faydalı olması dileğiyle...

Microsoft 2008 Lansmanı gerçekleşti.


Merhaba arkadaşlar ;

Dün güzel bir bilişim günüydü.Microsoft 2008 ürün ailesinin lansmanını güzel bir etkinlikle gerçekleştirdi.Bende öğrencilerimden gelmek isteyenlerle beraber oradaydım.Paralel seminerlerle de ürünlerin mini-demolarını uzmanlarından izleme şansımız oldu.Aslında Expression Studio ve silverlight üzerine de mutlaka bir seans olmalıydı dedik Daron hocayla , eski MS Zirvelerinin kulaklarını çınlattık.

Neyse hiç yoktan iyidir diyelim Adobe kısmı gibi değil en azından gene MS etkinlik yapıyor,artması dileğiyle..

Güzel bir anı olarak bu fotoğrafı da paylaşıyorum 2008 güzel geçecek...


Flash içerisinde XML Foto Galeri


Merhaba arkadaşlar ;

Şampiyonlar Liginde Çeyrek Finale çıkan Fenerbahçemiz için güzel bir Flash Menü tasarımına gittim.En çok gelen sorulardan biri XML tabanlı görsellerini XML dosyasında tutan ve görselleri ve yazılarının güncellemesini sadece notepad ile XML'den yapabileceğimiz bir galeri tasarımı çok zaman kazancı olacaktır ve fla dosyasına gerek kalmayacaktır.

Görsellerin statik geldiğini preloader(önyükleyicilerinin olmadığını belirteyim.Ancak Alpha sıfırdan yüze geldiklerinden sorun olmuyor ancak yavaş bağlantılarda ancak büyük görsellere uygularsanız mutlaka dinamik olarak bir yükleme çubuğu kullanmak gerekicek.

İstediğiniz şekilde XML dosyasını açıp Semih'i çıkarıp alttaki çalışma dosyalarında Kezman var onu ekleyip fla açmadan XML'de yazıyı ve 12.jpg olarak dosyayı değiştirince oyuncu değişikliğini de yapmış olacaksınız.

Faydalı olması dileğiyle.Çalışma dosyam :

http://www.expression.web.tr/XML_Galeri/XML_Galeri.rar



Expression Web için CSS Layout Tasarım Programı


Merhaba arkadaşlar ;

Expression Web artık Web editörleri arasındaki yerini sağlamlaştırıyor.Artık üzerine eklentiler de geliştirilmeye başlandı.CSS yönetimini oldukça kolaylaştıran ve Dreamweaver'a göre tasarım noktasında birçok artısı ve kolaylığı olan Expression Web,CSS Layout tasarımlarını ilk çıktığında DW gibi hazır birkaç CSS Layout template verip bırakmıştı.Ancak Eric Meyer adlı programcı artık Expression Web için bir CSS Layout hazırlama programı yazdı ve sitenin arayüzüne siz sadece px cinsinden karar veriyorsunuz gerekli kodları Expression Web'e bu eklenti gömüyor.

File-New sekmesinin altına kendini ekliyor ve gerisi gerçekten bire bir görerek rahatça geliştirilebiliniyor.Benim geliştirdiğim birtane arayüz aşağıda.


Artık hazır CSS bulup eklemek veya positining relative,static kim kimin içinde olayları da dahası hangi browserda hangisi çalışıyordu mevzuuları büyük acılarla geride kalıcak gibi,en azından benim için. Açıkçası derslerde de kitabımda da bahsetmeyi ve anlatmayı düşünüyorum bu eklentiyi. Umarım sizde faydalanırsınız...



http://www.webassist.com/professional/products/productdetails.asp?PID=150&RID=930



Süper Flash Picasa Foto-Galerileri



Merhaba arkadaşlar ;

Bildirgec'te birikmiş bildirileri okurken 16 Flash Picasa Gallery Template yazısı ilgimi çekti ve Paul adlı bir bloggerın kendi blogunda bu hazır galerileri demolarıyla ve dosyalarıyla paylaştığını gördüm size de iletmek istedim.


http://www.paulvanroekel.nl/picasa

Flash Photo Stack Gallery en çok hoşuma giden oldu ve size gerekli dosyaları XML'de değiştirince direk vermesi çok hoş.Kendi örneğim :

http://www.expression.web.tr/stackfotogaleri/index.php


Bu örneği indirip incelemek isterseniz :

http://ercanaltug.googlepages.com/stackfotogaleri.rar

Projelerinizde çok rahat bir şekilde kullanın.Gerçekten büyük zaman kazancı ve görsellik! Faydalı olması dileğiyle...