Ana karakter olan çocuğun oyundaki engellere çarptığında farklı animasyonlar sergilemesi gerekiyordu. Bu nedenle bu hafta boyunca engellere uygun animasyonlar hazırladım. Aşağıda hazırlamış olduğum 2 farklı animasyonu görebilirsiniz. İlki arabaya ve ineğe çarptığında gelecek animasyon. İkincisi ise çamura bastığında kayıp düşme animasyonu…
Sitenin veri tabanını oluştururken, bir yandan da artık html ile sitemi yaratmaya başladım. Html kodunu yazarken daha önceden kullanmış olduğum bir program olan Dreamweaver Cs6 ‘dan yardım almaya karar verdim.
Sitemi oluşturmaya öncelikle kolay sayfalarından biri olan About kısmından başladım.
Daha sonra yapımı bu sayfadan biraz daha zor olan bir sayfa daha yaptım. Bu sayfada harita olan yere ve aşağıda bulunan tablo bölümüne şimdilik resim koydum. Bu resim yerine daha sonra Tilemill veya cartodb ile yapacağım interaktif bir harita gelecek.
Menü barı <table> kodlarını kullanarak hazırladım. Menü barın aşağıya doğru açılmasını istediğim için, onu daha sonra jQuery kullanarak ekleyeceğim bir kaç kodla hareketli hale getireceğim.
Bu sayfalara benzer birkaç sayfa daha hazırladım. Html kodlarımın database ile çalışmasını sağlamak için gerekli bağlantıyı sınıfta yaptık.
Bu bağlantı için öncelikle ayrı bir sayfada aşağıdaki kodu kaydettik. Bu kod veri tabanına nereden ulaşılacağını yazıyor eğer yanlışsa veya veri tabanına ulaşılamazsa “istenilen veritabanına ulaşılamadı” hatasını ver diyor.
<?php
@mysql_connect("localhost","root", "") || die ("mysql baglantisi kurulamadi");
@mysql_select_db("hpdb") || die ("istenilen veritabanına ulasamadı");
?>
Bu sayfayı kaydettikten sonra, bağlantı kurmak istediğim sayfaya (Login) Dreamweaverda aşağıda gördüğünüz kodu dosyanın en başına yazarak bağlantıyı kurduk. Artık kullanıcılar login sayfasında şifreleri ve kullanıcı adlarını girdiklerinde gerekli olan sayfaya gidebiliyorlar.
Sitenin arayüz tasarımı ve kurumsal kimlik çalışmasını bitirdikten sonra, siteyi oluşturmaya başladım. Bunun için öncelikle database oluşturmam gerekiyordu. Database sitemin içindeki tüm bilgilerinin tutulacağı veritabanı sistemidir. Veritabanı basit olarak bilgi depolayan bir yazılımdır. Birçok yazılım bilgi depolayabilir ama aralarındaki fark, veritabanın bu bilgiyi hızlı bir şekilde yönetip değiştirebilmesidir. Ben bu yazılımlar arasında Mysqli seçip kullanmaya karar verdim.
Öncelikle bilgisayarıma Xampp adlı programı indirdim. Xammp kendi bilgisayarımızda php tabanlı sitelerimizi çalıştırabilmek için oluşturulmuş, içerisinde Apache web server, Php, MySQL gibi programların bulunduğu bir pakettir. Bu programı bilgisayarıma kurduktan sonra otomatik olarak başlayan XAMPP Control Panelde Apache ve Mysql seçeneklerini işaretleyip çalıştırdım.
Veri tabanımı oluşturmaya başlamak için http://localhost/ sayfasından sol menüde bulunan phpMyAdmin linkine tıkladım ve açılan sayfada yeni veritabanı oluştur bölümünden database için gerekli olan tabloları yapmaya başladım.
Tablolar için bir kaç ufak bilgiye sahip olmak gerekiyor.
Alan: Hücrenin ismi
Tür: Hücrede ne olacağı, tarih, yazı, sayı gibi
Varsayılan: Kullanıcının boş bırakabileceği bir yer veya bırakmaması gereken bir yer (buna siz karar veriyorsunuz) Örneğin; kullanıcının email kısmını boş bırakmasını istemiyorsanız burayı ona göre işaretliyorsunuz.
Karşılaştırma: Dil kodlaması (burası için utf_8 seçtim)
Bu tablolar ihtiyacınız olan şeylere göre değişiyor.
Ben şimdilik 3 ana tablo yarattım (city-nation-user)
City tablosunda;
*cityId, cityTitle, citynationID, citycoordinate
Nation tablosunda;
*nationId, nationTitle
User tablosunda;
userId, username, user username, user password, user gender, user nation, user birth date, user tourist profile, user email, user picture ve user home town bölümlerini açtım.
En son sitemin arayüz sayfalarının final halini bloğa koymuştum. Site için aşağıda gördüğünüz logoyu seçtik. Logoda bulunan üç yuvarlak, üç ana turist profilini temsil ediyor (Authentic, Centric, Venturer) bu yuvarlakların renkleri de yine o turist profillerinin renkleri olacak.
Sitenin içerisinde kullanacağım yazı fontunda da “Caviar Dreams” olarak belirledik.
Logo ve font seçimi için yapmış olduğum diğer çalışmalarıda burada görebilirsiniz.
Arka plan için öncelikle çekilen fotoğrafların uygun olduğunu düşünmüştük. Ancak sonradan fotoğraflara eklediğim efektler de tam uygun olmadı. Ardından suluboya ile arka plan yaptım; ancak onun da tam uygun olmadığına karar verdik. Ve son olarak hamurdan arka plan yapımına başladım. İlaç kutularını kaplayarak yaptığım 10-15 evi farklı kompozisyonlarda dizerek farklı fotoğraflar çektim ve ardından photoshopta bunları birleştirdim. Ortaya çıkan sonucu aşağıda görebilirsiniz 🙂
Arka plan çalışmalarına ek olarak oyundaki engel karakterlerinin devamını yaptım: dolmuş, renkli arabalar ve inek 🙂
Merhabalar! Uzun bir aradan sonra projeyle ilgili gelişmeleri blogda da paylaşmanın zamanı geldi sanırım. Şu anda arayüz tasarımının büyük bir kısmı tamamlandı ve videolar çekilmeye başlandı. Arayüz tasarımı konusunda neredeyse bir ay süren kararsızlıklar sonucunda drag and drop mantığıyla çalışan bir menü sistemi oluşturmaya karar verdim. Bu sisteme göre ziyaretçiler, menüde bulunan 10 adet butondan birini seçip oradaki nesneyi benim fotoğrafım üzerine yerleştirdiklerinde, seçili nesnenin yönlendirdiği bölüme geçiş yapacaklar ve buradan istedikleri videoyu seçip izlemeye başlayacaklar. Ana menüdeki butonların üzerinde, benim fotoğrafım üzerine yerleştirmek üzere, yönlendirdiği bölümün ruhunu yansıtan bir takım nesneler ve kıyafetler yer alacak. Bu sistem de aynı zamanda cinsiyetin üzerimize giyilen bir kıyafet, başkaları tarafından öğretilen bir performans oyunu olduğu fikrine gönderme yapacak.
Bölüm sayfalarında her video, bir alıntının tipografik olarak düzenlenmesiyle oluşturulan tuşlarla temsil edilecek. Ayrıca benim fotoğrafım ve üzerine yerleştirilen nesne ve kıyafetin hareketli (henüz karar aşamasın) bir versiyonu da bu sayfalarda yer alacak. Bölümlerin sayfaları dışında, katılımcıların tanıtıldığı kim? adlı sayfada da ziyaretçilerden katılımcıların kafalarını temsili bir Adem ve Havva çiziminin birleştirilmesiyle oluşturulmuş insansı şeklin üzerine yerleştirilmeleri istenilecek. Bu işlemden sonra kişinin tanıtıcı sayfasına gideceğiz. Bu sayfada o kişi hakkındaki videolar tekrar eden ve sessiz bir şekilde sergilenecek. Videoların üzerine tıklandığında sesleri açılacak. Ne kadar çok video açılırsa, o kadar çok videonun sesi birbirine karışacak, fakat videoları tekrar sessize alma imkanı da sunulacak.
Bir diğer seçenek ise rastgele adlı seçenek olacak. Bu tuşa basıldığında rastgele bir videonun başlığı açılacak ve başlığa tıklandığında video izlenmeye başlanılacak. Bu seçenek belgeselin lineer kurgudan daha çok kurtarılsa için tasarlandı. Böylece ziyaretçiler herhangi bir bölüm sayfasındayken rastgele başka bir video izleyebilecekler.
Arayüz tasarımı dışında, tatil günlerinde daha çok video çekimine odaklandım. Tasarladığım 10 video çekiminden 6 tanesini gerçekleştirdim. Geri kalanları da en kısa sürede tamamlamayı düşünüyorum. Videoların birbirini andıran bir stili oldu. Genellikle katılımcıları en iyi tanımlayacak mekanlar ve nesnelerin ışığında bir röportaj gerçekleştirildi. Bundan sonraki dönemde videoların kurgusuyla ilgilenmek gerekecek. Bütün videoları baştan sona birkaç kez izlemek ve ardından hangi kısımların hangi bölümler için uygun olabileceğine karar vermek gerekiyor. Videolar fazlaca bir kurguya ihtiyaç duymayacaklar. Bütün röportajlar tek bir açıdan çekildi ve color correction dışında pek fazlaca bir efekte ihtiyaç duyulmayacak. Bir sorun olarak, video-mic dışında başka bir harici mikrofon ne yazık ki okuldan edinemedim ve bu durumda video-mic ile çekimleri yapmaya devam ettim. Bu sebeple videonun seslerini düzeltmek için de biraz uğraşmak gerekiyor.
Tüm bunların dışında da artık flash ile çalışmaya başlayıp, yavaş yavaş photoshop dosyalarını flasha atıp, aynı zamanda programı öğrenip web sitesini oluşturmaa başlıyorum. Lynda’nın flash tutorialları bu süreçte yardımcı oluyor. Önümüzdeki günlerde en çok bu işe ağırlık vereceğim kesin.
Şimdi yukarıda bahsettiğim arayüz tasarımlarının henüz yapım aşamasındaki hallerini ve videolardan birkaç görseli paylaşıyorum. Tekrar görüşmek üzere! =)
ls
Here is my poster for my final project.
