Merhaba arkadaşlar ;

Daha önceki yazılarımla ilgili gelen bir email üzerine güzel bir bilgiyi paylaşmak istedim. Bildiğiniz üzere webde kullanacağımız Flash videolarına istediğimiz şekil ve renkte play,pause,ses .. butonları ekleyebiliyoruz.Bununla ilgili ve HD video ekleyebilmemizi anlatan yazıma alttaki linkten erişebilirsiniz.

http://ercanaltug.blogspot.com/2007/10/adobe-flash-hd-video-custom-skin.html

Bu yazımla ilgili aynı youtube'taki gibi fullscreen yapabilecek bir düğmenin kodları için bir eposta aldım ve kodları sanalkurs'ta Yalçın beyin yazınından buldum burada da paylaşacağım. Video veya flash çalışmanız üzerinde bir buton tasarlayın fullscreen yapacağını bildirecek şekilde ortasında yuvarlak falan olsun :)Eğer videoya tıklanınca fullscreen yapmak isterseniz benim örneğimdeki gibi video kadar bir görünmez buton yapmanız gerekecektir ve butona instance name olarak "tamekranbuton" yazıp sağ tıklayarak actionslarına :
_____________________________________________

on(press) {


tamekran();


}

_____________________________________________


yazarak tıklandığında tamekran fonksiyonunu çalıştıracağını belirtelim.Daha sonra bu butonun bulunduğu frame'e gidelim ve alttaki kodu yazalım :

_____________________________________________


function tamekran(){


if(Stage["displayState"]=="normal"){


Stage["displayState"]="fullScreen";


}else{


Stage["displayState"]="normal";


}


}


var boyutlandir:Object = new Object();


boyutlandir.onResize = function () {


tamekranbuton._x=Stage.width/2;


tamekranbuton._y=Stage.height/2;


}


Stage.addListener(boyutlandir);

_____________________________________________


Böylece butona fullscreen yapacak tamekran fonksiyonunu da tanıtmış olduk. Ancak flash çalışmamızı sonuçta html'e embed edeceğiz ve embed kodlarının da fullscreen'e izin vermesi gerekiyor. Bunun için flash çalışması swf dosyasını gömdüğünüz html'in kodlarında allowFullscreen parametrtesinin değerini (value) "true" olarak değiştirmemiz gerekiyor.

< param name="allowFullScreen" value="true" />

gibi html kodundaki değişiklikleri 2 farklı yerde vardır,embed eden kısımda ve source yani kaynak gösteren dosya adında değişiklikleri yapın. Ayrıca html kodunun yukarısında AC_FL_RunContent javascript kodu ile çağrılmış ise flash çalışmanız,head kısmındaki bu satırlarda onun metodlarından 'allowFullScreen', 'true', satırını da true olarak değiştirmeniz gerekiyor.

Örnek çalışmamı görmek için tıklayın:

http://ercanaltug.googlepages.com/fullscreen_flash.html

Çalışma dosyasını indirmek için :

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

Faydalı olması dileğiyle...

Benim de yazarlarından olduğum sanalkurs ailesi çok güzel bir çalışma sonucu sitede bulunan yazarların yazılarından en talep görenlerden bir e-dergi çıkarmış.Ellerine sağlık çokta güzel olmuş.Benimde Adobe Flash'ta pekte anlatılmayan interaktif CD'ler için kullanılan fscommand actionscripti üzerine yazdığım yazı eklenmiş.Sanalkurs sitesinden aynen alıyorum.

Bu ayki derginin içeriği:
Sanalkurs E-Dergi ilk sayısı ile sizlerle. Bu sayıda yazı ve dersleri yer alan yazarlarımız aşağıdaki gibi gerçekleşti:

- Nereden, Nasıl Başlamalı? Abdullah Tekin
- Bilgisayarımda Casus Yazılım Varsa...Çağlar Umut Tosun
- Fireworks Nedir, Ne Değildir? Siraceddin El
- ASP ile IP'leri Engelleme - Kerim Sarıgül
- MSN Sohbetinizi Birileri Dİnliyor - Serdar Kuzuloğlu
- CSS İle Şeffaf Tasarımlar - Hakan Çamoğlu
- Şimdi İllustrator Zamanı - Ceyhun Akgün
- Gazete İlanları Tasarımı Nasıl Olur? Fatih Nebioğlu
- İnteraktif CD'lerde fsCommand - Ercan Altuğ Yılmaz
- Corel'de Yazı İçine Resim Gömmek - Zeynep Seymen
- Microsoft Nedir, Ne Yapar? Hakan Ayaz Damar
- Yorumlarınız - Zeynep Seymen
- Sanalkurs Haber7'de (Röportaj)- Seçkin Çakır
- Adminim, Mod Olmak İstiyorum - Siraceddin El

Dergiyi ücretsiz indirmek için :

http://www.sanalkurs.net/e-dergi-1.html

Sanalkurs forumda da hemen bu dergi uygulamalarının nasıl yapıldı üzerine bir yer açılmış ve buna benzer bir "pageflip" hazır flash çalışması eklenmiş.Ben bu seferkini başarılı buldum,çünkü benim de daha önce verdiğim bir sürü hazır pageflip çalışması paylaşan siteler var ancak bu uygulamada yeni sayfa açmak ve içerisinde gösterilecek içeriği xml dosyasında gösteriyorsunuz.

XML klasörünün altında Pages.xml dosyasının içeriği bunu sağlıyor.Aşağıda hem jpg hemde swf gösterilmiş 2 sayfanın kodu var,buradan yeni page leride ekleyebiliyorsunuz.Hatta flv video dosyasını da swf embed edip denedim oynatıyor,eh ne de olsa flash :)

src="pages/page2.jpg"
canTear="true"
/>

src="pages/transparent_page1.swf"
/>

İngilizcesi olanlar readme.txt dosyasında tüm metodlar daha ayrıntılı anlatılıyor.Bu çalışmayı forumda paylaşan arkadaşa ve bana ileten Hamza Erbay arkadaşımıza teşekkür ederim. Çalışma dosyasını indirmek için :

Silverlight ile yapılmaya başlanan Foto ve Video galerilerinin tahmin edebileceğiniz üzere open source , açık kaynaklı olduğundann javascript,xaml ve html dosyalarını kopyalamak ve geliştirmek çok basit.İşte öyle bir galeriyi tüm dosyalarıyla inceleyebilmeniz için paylaşıyorum.Öncelikle Silverlight galerimize bir göz atın.

Silverlight Foto-Galeri Örnek Uygulamasını görmek için tıklayın.

gallery.js adlı Javascript dosyasının içinde klasörde tutulan dosyalara erişme yolları kayıtlı.Buradan yeni diziler atayıp images klasörü altına da görselleri eklerseniz bu galeriyi genişletmek için yeterli olacaktır.Adını da buradan değiştirebiliyorsunuz.

var galleryTitle = "Basit Silverlight Galerim";
var photoArray = new Array(12)
photoArray[0]="images/purpleFlowers640x480.jpg"
photoArray[1]="images/crownPoint640x480.jpg" .....

Çalışma dosyasını indirmek için :

Merhaba arkadaşlar ;

Bireysel eğitimlerde Adobe CS3 programları üzerinden gitmeye başladık.Fireworks CS3 ilk programımız. 8'den farklılıkları ilk gözüme çarpan Assets Style zenginliği ve Shapes'lerdeki yeni hazır şekiller(Inspire-ilham demek-inanılmaz eğlenceli,her ekrana bıraktığınızda farklı bir şekil oluşturuyor size ilham almanız için:) ve Pages paneli ile master page'ler tanıtarak yayınlamaya yarıyor. Bir de bu programlara yeni başlayanların en çok başvurdukları hazır uygulamalar. Aynı Photoshop CS3'te olduğu gibi burada da bir klasördeki tüm fotoğraflarınızdan bir foto-albüm yaratmanız sadece birkaç tık ötenizde. Bunun için commands-create slideshow diyelim.

Size açıla yeni ekranın çok beğenilen bir extension olduğunu belirtmeme gerek yok sanırım orjinal Fireworks ekranıyla ne akdar farklı olduğunu görebilirsiniz.Fireworks'e dahil edilmiş 3th party başka bir şirketin geliştirdiği uygulamadır bu Albumbook. 5 adet flash tabanlı 1 adet HTML ancak AJAX teknolojisi ( Adobe tarafında Spry denmekte) kullanılmış toplamda 6 adet stil seçerek foto albümünüzün yaratılacak klasörünü,önizleme fotolarının büyüklüklerini gibi kısımları seçip yayınlayabiliyorsunuz.


Açıkçası gerçekten çok sayıda gösterilmesi gereken fotoğrafınız var ise büyük bir zaman kazancı sağladığı kesin. Ve AJAX ( Spry) tabanlı albüm özellikle çok başarılı,fotoların bilgilerinin tuttuğu bir xml,fotoların kendilerini tuttuğu bir images klasörü ve html yayınlıyor.Direk Dreamweaver ile html sayfasını açıp tasarıma devam edebiliyorsunuz.

CS3'ün beğendiğim ve dikkatimi çeken özelliklerini paylaşmaya devam edeceğim. İyi tasarımlar...

Arkadaşlar blog adresime özellikle ilginç ve eğlenceli bulduğum şeyleri de eklemeye çalışıyorumki hali hazırda bir günlük olduğu belli olsun :) Blogum sayesinde flashı öğrenenler,ilk defa silverlightı duyanların sayısı hiçte az değil. Ancak blogumun amacı da bu değildi ama e-learning blogu oldu,faydalı oluyorsa ne mutlu bana.

Dün akşam NASA'nın yayınladığı bir mars fotoğrafına Çin'den birinin zoomlayarak ayrıntılarında bir kaya (!) parçasının insansı bir görünüm kazanmış olduğunu gösterince bir fırtına koptu.NASA'dan bile tam bir cevap verilememesi üzerine herkeste klasik " Evrende yanlız değilmiyiz ? " sendromu başladı.

Biz ise hala türbanmı başörtüsümü konularında ülke olarak enerjimizi harcamakla meşgul olalım sanırım Tayyip bu fotoğrafı görse "marslıda türban takıyor bakın" yorumunu yapardı :) Bense ilk gördüğümde nedense yukarıdaki mizanseni gördüm ve buraya aktarmak istedim,NASA bu durumdan hoşnutmuş çünkü Amerika planlanan ilk insanlı Mars mekiğini daha erkene çekmek üzerine projelere başlamış. Sanırım marslılar karşılarında ilk dünyalıyı gördüklerinde alacakları cevap İngilizce olacak,dünyanın resmi dili bu oldu.Teknolojiye ne kadar sahipseniz bence aslında o kadar zenginsiniz.Petrolünüzde olsa,kültürünüz de olsa gelir elinizden alırlar.

Neyse bu Mars'lı olayları ile ilgili sizi de kendi iç dünyanızın fantastik düşüncelerine bırakıyorum ve haberin linkini ve daha ilgili linklerini de buradan bulabilirsiniz.

Merhaba arkadaşlar ;

Adobe CS3 programlarının en önemli gücü programlar arası entegre iş akışı imkanları. Bugün size bende Adobe'nin vektörel tasarım programı Illustrator'un Flash programı ile entegresi üzerine birkaç örnek göstereceğim. Illustrator tüm tasarım toolları ve vektörel çizimleriyle çok güçlü bir program.Aslında Flash kısmında da biz vektörel çizimler yaparak butonlarımızı yaratabiliyoruz ancak Flash'ta toollar Illustrator'a göre oldukça kısıtlı.

Mesela öncelikle bir Illustrator çalışmamızı flash'a getirmeyi görelim. Illustrator'da tasarladığım bir logoyu ai dosyası olarak saklayıp Flash'ta bir movie klip içerisine file-import to stage diyelim. Aşağıdaki gibi bir ekran gelecektir ve her vektörel nokta için renk,stil ve geleceği konum üzerine ayarlar yapmamızı sağlayacaktır. Burada özellikle vektörel olarak rahatça gözüken ancak Flash'ta aynı verimi alamadığımız vektörel efektleri bitmap olarak getirip bire bir aynı kalmasını vektörelliği bozulsa da görselliği eş bırakabiliyoruz.

Bir vektörel tasarımı hem vektörel hemde piksel getirip yayınlarsak ( bu uygulamayı yaptığım çalışma dosyalarını yazının sonundan indirebilirsiniz.) pikselin boyutları fotoğrafın kendisini tuttuğundan 15-20 kb olabilirken vektörel ise 3 kb olabiliyor.1 tane değil animasyonunuzda enaz 10-15 tane böyle görsel olacağından 150-200 kb optimizasyonlar söz konusu,fotoğraf özlü görseller dışında herşeyi Flash içerisinde vektörel tutmak çok daha mantıklı.

Ayrıca vektörel olarak tekrardan konumlandırma,renklendirme işlemlerimizi de rahatça yapıp aşağıdaki gibi parça parça animasyonlara katabiliyoruz.

Adobe CS3 ile Illustrator layerlarını Flash'a keyframe olarakta getirebiliyoruz. Böylelikle bir butonun üzerine gelince tıklanınca gibi efektlerini ilkel flash toollarıyla değil alttaki gibi Illustrator ile ayrı layerlarda tasarlayıp flasha direk buton olarak atabiliriz.
Adobe Illustrator programının zengin tasarım toollarıyla bu 3 layerlı yıldızı tasarladım ve flash çalışmamda bir buton özellikleri olarak getirmek istiyorum.Flash'ta da CTRL-F8 (insert new symbol) ile bir buton yaratıp içine giriyoruz. Daha sonra insert to stage ile ai dosyasını seçip aşağıda gösterdiğim gibi en alttaki oktan keyframes seçelim. İstersek eğer efektlerimiz uyumlu gelmedilerse ortadaki okun gösterdiği yerden bir bitmap olarak getirebiliriz efektlerimizi.


Butonun Hit sekmesine de aktif edeceğiniz alanı istediğiniz tool ile çizerek butonunuzun tasarımını tamamlayın ve ana sahneye geri dönelim.Library'den butonu sahneye sürükleyip butonumuzu deneyelim. Böylelikle bir butonu Illustrator ile tasarlayıp Flash'a birebir uygunluk ile getirebildiniz. Gerçekten vektörel entegrasyon çok önemli ve Flash'ta tasarımın adı Illustrator olmuştur.Bol bol Illustrator ile ilgili web odaklı uygulamaları blogda bulabileceksiniz. Çalışma dosyalarımı indirmek için :

http://ercanaltug.googlepages.com/AI-Flash.rar

Faydalanmanız dileğiyle...

Merhaba arkadaşlar ;

Bugün biraz da eğlenceli şekilde size de faydalı olacağına inandığım bir deneyimimi paylaşacağım.Zeynep Kamil hastanesinin her sene düzenlediği bir kongrenin web sitesinin güncellenmesi eski öğrencim ve dostum Önder'e verilmiş. Önder'de eski dosyaları organize etmekte zorlanınca beraber giriştik.

İçerisinde Flash öğeleri de içeren HTML dosyaları Dreamweaver CS3 ile açmaya çalıştığımda yukarıdaki uyarıyla karşılaştım. Dreamweaver < object > taglerini otomatik olarak algılayıp bu taglerin taşıdığı ActiveX objelerinin sadece Internet Explorer'da ancak tıklamayla aktif olacağından(Firefox,Opera ve Safaride bu sorun yok sadece IE)burada çağırılan Flash objesini otomatik olarak Javascriptle çağıracak şekilde değiştirebileceğini bildiriyor.Gerçekten büyük rahatlık. ActiveX objelerinin tıklanma sorununun nedeni Daron hocanın yazısından okuyabilirsiniz :

http://daron.yondem.com/tr/PermaLink.aspx?guid=b359c340-e08c-4466-a49b-4e304438824f

Dreamweaver object ile çağırılan Flash objesini gerekli kodları yaratarak Javascriptle çağırdıktan sonra bu kodları "Scripts" adlı bir klasöre "AC_RunActiveContent.js" adından bir dosya ile ekliyor,bu klasörü de servera upload etmeniz gerekiyor.Zaten Dreamweaver 8.0.2 güncellemesiyle birlikte CS3 versiyonuyla da flash objeleri bu şekilde getiriliyor. Flash'ın yayınladığı HTML de de aynı durum sözkonusu. Dreamweaver 8 kullananlar hemen bu konuyla ilgili yazımı ve adresten ücretsiz güncellemeyi indirsinler.

http://ercanaltug.blogspot.com/2007/09/dreamweaver-template-dwt-ile-ablon.html

Merhaba arkadaşlar ;

Merhaba arkadaşlar ;

Dün CETURK ailesinin davetlisi olarak Microsoft Türkiye'de Ineta ve Microsoft sponsorluğunda "2008 Microsoft Vizyonu ve Yeni Teknolojiler" seminerini gerçekleştirdik.Açılış konuşmacısı Nuri Çankaya'nın ardından ben 2 saate yakın vardım.Benden sonra WPF ve Silverlight uygulamalarını Türkiye'de Silverlight denince akla gelen ilk isim olan üstad Daron YONDEM'den öğrendik. Daha sonra da MVP Eralp ERAT VS 2008 ve LINQ 'dan uygulamalı olarak bahsetti,açıkçası o da ufaktan eğitime geçmişti proje odaklı örneklerle tadından doyamadı kimse 5buçukta bitmesi gereken seminer 7sularında bitti.

Ben Microsoft Expression ürün ailesinin Web Tasarım programı Expression Web'in yazılım odaklı taraflarından bahsetmeye çalıştım,XHTML,CSS,XML ve Access uygulamalarını gösterdim.Zaman ve internet sıkıntısından Expression Vektörel programı Design ve animasyon programıyla entegresini uygulamasına zamanımız yetmedi,ancak bir sonraki seminerde eminim daha güzel iş akışlarıyla demolarını geniş zamanla gösterebilirim.

Özellikle hem sunumumu evde tekrar izlemek hemde gösteremediğim demo ve sonunu görmek isteyenler için powerpoint sunumumuda paylaşıyorum.

Merhaba arkadaşlar ;

2 gündür Microsoft Türkiye'nin düzenlediği Ingiliz e-learning şirketi Xperties'den Mark Price'ın verdiği " Silverlight 1.0 for Designers " eğitimindeydim. Eğitim Orta Asya'daki seçkin Microsoft ortağı ajans ve şirketlerin çalışanlarına özel ve Türkiye'de Silverlight üzerine Microsoft-Based bir eğitim olmasından dolayı ilkti. Mısır,Ürdün,İsrail,Belçika,Güney Kıbrıs ve Kanada gibi ülkelerden insanlar gelmişti.Sayabildiğim ve tanıdığım kadarı ile 4 veya 5 türkte içerideydi.Luckyeye,Anadolu Finans ve Digiturk firmaları çalışanları vardı.

Eğitim çok keyifli , gayette güzel geçti. Gerçi çoğunluk sıfır olduğundan bizim için çok verimli oldu diyemem ama altta paylaştığım üzere Microsoft'un aynı MCPD,MCSE gibi moduller ve Lablar(evet tasarım labı var 15 dk buton yapıyoruz :) olması beni çok heyecanlandırdı. Bu eğitimlerin MOC ( Microsoft Official Curriculum ) çıkması yakın duruyor. Silverlight 1.0 for Developer bu ay sonunda hazır olacakmış o eğitimi de açıkçası Javascript yoğun olacağından dört gözle bekliyorum.

Eğitim içeriği bu şekilde oluyor. Biz hızlandırmış şekilde 2 günde tamamladık,Labların bazılarını atladık,yazılım gereken 4 modulu yapmadık ama materyal olarak hepsi var,ben uygulayıp bu bloga zaman zaman ekleyeceğim.

Adından da anlaşılacağı üzere daha çok Silverlight'ın tasarım programları ve entegreleri üzerine geliştirilimş bir eğitim.Expression Web içerikte yok ne yazıkki. Eğitim temel olarak Silverlight ve programların tanıtımıyla başlıyor.Daha sonra XAML ve kodlama mantığı var.XAML tasarımları yapan Expression Design ve tooları tasarımcıları pek tatmin etmesede daha çoğunlukla bu kısımda zamanı Illustrator2XAML Plug-in verimliliğini irdeleyerek geçirdik. Daha sonra oluşan XAML tasarımları Expression Blend atarak orada anime ettik.Çoklu buton ve Javascriptlerle metodlar(Begin();,Play();,Pause();) ve triggerları eklemeyi gördük. En son adımda da Encoder ile video dosyaları yönetimi,markerlar,script commands,Overlay ve Template(Flash'taki Skin) editing gördük ve yarattığımız videoları Media Element ile Blend'e çağırmayı izledik. Eğitimin en verimli kısmı bu kısımdı benden yana. Encoder gerçekten sağlam geliyor. Silverlight Video uygulamalarında ; değil Flash flv - Quicktime dahil hiçbir rakip tanıyamayak ve webte video uygulamaları sektör standartı olacak.Bunlardan en önemlisi de e-learning.

Ayrıca hoşuma giden Microsoft dökümanlarda rakip tanımamazlık yapmadan sektörün gerçekleriyle bolbol Adobe ürünlerinden bahsederek iş akışlarını anlatmış. Mesela altta görsel tasarımcı gerektiği yerde Blend'e atılacak tasarımı Photoshop ile yapıp Design ile XAML çıkartıp kullanabilecek veya Illustrator Plug-in ile Design'ı atlayıp direk Blend'de vektörel görseline animasyon ve datagridler bağlayabilecek. Bunu slaytlarda Adobe ürün adlarıya gösteriyorki aynen katılıyorum. Yıllarca insanlar Photoshop,Illustrator(veya Freehand) çalıştılar tüm el alışkanlıkları ve güçlerini biliyorlar yeni bir programla bu dönem çok daha zor olacaktır.

Arayüzü Design ile tasarladıktan sonra Video dosyalarımızı Encoder ile sadece encode değil,boyutuna,süresine,skin template tasarımına,metadatasına(evet bu metadata arama motorlarının videoyu okuyup cashlemesi için) karar veriyorsunuz.

Silverlight projesinin temel noktada komple görebileceğiniz iş akışı ise alttaki gibi olacaktır. Kalpte Blend var. XAML kodlu görsellerin Expression Design ile veya Illustrator'dan Plug-in ile veya Photoshoptan Designa oradan Blende gelecek.Video dosyaları da Encoder ile tasarlanıp Blende ilişiklendirilecek ve en son noktada Visual Studio 2008 ile triggerlar ve data kısımları Javascript ile yazılacak. Actionscriptteki Event Listenerlarla aynı algoritmada yazılıyor.

Şubat ayında 2 tane Kurumsal Silverlight eğitimi gözüküyor Netronda,eminim o eğitimler müddetince bloguma çok daha ayrıntılı ve uygulamalı örnekler koyabilirim.Şimdilik linklerimdeki nibbles ile yetinin. Teşekkürler....

Yok böyle gırgır ya :)

Bir blog adresiniz var ve ne kadar ziyaretçi olduğunu bir scripting veya Google Analytics benzeri bir servisle tutuyorsunuz.Peki sizi kaynak gösterip BlogRoll denilen takip ettiğim bloglara ekleyenleri görebilirmisinz? Technorati ile evet,ayrıca blogunuzun içeriğini kaynak göstererek kullanan etik blog adreslerini görebilir(kaynak göstermeden kullananları google'dan aratıp bulabilir okkalı bir eposta atabilirsiniz,ben öyle yapıyorum:) ve blog adresinizin Authority yani otoritesi,önemliliğini görebilirsiniz. Benimki için :

Merhaba arkadaşlar ;

Yeni bir yılın ilk mesajımda bu blog sayesinde bana gelen hem yardım konulu hemde teşekkür epostalarından birisine verdiğim güzel bir cevaptaki konuyu sizle de paylaşmak istedim.
Websitenizde Flash Video'larınızı belki Final Cut ile oluşturdunuz,Photoshopla süslediniz,güzelce Flash'a getirdiniz.Daha önce gösterdiğim örneklerdeki gibi istediğiniz skin playerı siz seçtiniz,veya renklendirdiniz ancak flash videonuzu tutan FLV Component bu videonuzu bittiğinde başa sarsada tekrar otomatik olarak oynatmıyor.Kullanıcın Play düğmesine basması gerekli.Loop olarak bu flv dosyanızın sürekli oynamasını isterseniz FLV Componentı sahnede seçiliyken Window-Actions kısmına girin,bu componenta alttaki kodu yazın.

on (complete)
{
this.autoRewind=true;
this.play();
}

Ve böylelikle flv videonuz oynayıp bitsede tekrardan başlayacaktır.
Faydalı olması dileğiyle...