Macintosh stilinde : PhotoFlip Gallery

Merhaba arkadaşlar ;

Adobe Flash ile çok etkileyici ve çeşitli fotoğraflarla fotogaleriler yapabiliyoruz.
Derslerimizde de bazı basit versiyonlarını gördük.Ancak güzel extensionlar ve XML tabanlı uygulamalarla daha etkiliyici arayüzlerle bunları gerçekleştirebiliriz.Apple kendi sitesinde böyle Flash tabanlı bir arayüzle Apple TV tanıtımı yapıyor.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)

WebDesignerWall.com sitesi bu şekilde bir Flash Photo Galerisini nasıl yapılacağını göstermeye çalışmış.Arka plan için Photoshop'ta yansıma ve Wrap toollarını kullanmış.
Daha sonra da bir Flash componenti olan PhotoFlow'u kullanarak fotoğraflar arasında geçiş sağlanmış. Şimdi öncelikle Photoshop'ta backgroundu oluşturmakla başlayalım.
Foreground rengi siyah background rengi #384b55 olan 950 - 620 piksel bir proje açın.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)
Şimdi arka planda duracak fotoğraflarımızı belirlemeye geldi sıra.Aşağıdaki gibi durması için Fireworks'te Batch Process ile aynı boyuta getirin tüm görselleri ve photoshopta istediğiniz şekilde yerleştirin.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)Arka plandaki sabit duracak fotoğraflarımızı tamamladık,daha sonra bir yansıma göstermemiz lazım.Bunun için Edit > Transform > Flip Vertical diyelim ve opacity sini düşürelim.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)

Şimdi ise arkadaki fotoğrafı bükmeye geldi.Bunun için Photoshop'ta Edit > Transform > Warp toolunu aşağıdaki gibi kullanarak istediğiniz bükümü verin.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)
Arkaplanda bir Bent gibi durması izlenimi verebilmek için köşelerdeki 4 adet anchor point ve 2 tane yanlardaki çizgiyi yukarıya doğru çekin.Bent izlenimi verebilmek için bükme işlemlerini yansıma layerı içinde aşağıdaki gibi uygulayın.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)Arkaplanı seçerek opacity 30% ve yansıma layerını da 50% opacity yapın.Daha sonra aşağıdaki gradient layer mask'ı alttaki layera uygulayın.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.) 50px Gökmavisi renginde Oval tool seçin ve alttaki gibi spot ışığı gibi gözükebilecek Gaussian Blur (Filter > Blur > Gaussian Blur) efekti verin.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)Photoshop'ta işlemlerimiz tamamlandı. Şimdi bu arkaplanla aynı boyutta Flash'ta bir çalışma açıp oraya aktarıyoruz. Flash'ta fotoğraflarımızın gelişini bir component ile yapacağımızı söylemiştim. Bunun için alttaki dosyayı indirin ve içindeki "photoFlow.mxp" extension dosyasını kurun.Bu extension Flash'ta component kısmına kendini alttaki gibi ekleyecektir.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)Component panelinden bu extension'ı ekrana bıraktığınızda Foto Galleryinizin başlaması için gerekli ayarları yapmanız gerekicek.Resim dosyalarının durduğu konumu belirtecek xml dosyasını, autoflip, image dimensions, reflection, zoom effects gibi ayarlarını isteğinize göre yapmanız gerekiyor.
Bunun için Flash Photoflow kullanıcı kılavuzunu okuyabilirsiniz.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)
Ayarları yapacağınız parametre ekranı aşağıdaki gibidir.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)
Fotoğraf konum ve açıklama bilgilerini aşağıdaki gibi XML dosyasının içinde tuttuğunu ve XML dosyasını notepad,expression web,dreamweaver.. . ile açıp güncellemeyi buradan yapabileceğinizi belirtmek isterim.

Linkleri Görebilmek İçin Üye Olmalısınız. Üye Olmak için Tıklayınız.
Eğer üyeyseniz en az 1 tane mesajınızın bulunması gerekmektedir. (Bu konuya yorum yaparak başlayabilirsiniz. - Yorum yaptıktan sonra sayfayı yenilemeyi unutmayın.)
İyi tasarımlar...

alıntıdır....

çok güzel bir paylaşım teşekkürler

çok güzel bir paylaşım teşekkürler

kardeş emeğine sağlı ya

paylaşım içi teşekkürler.

guzel