Adobe Edge ile HTML5 Animasyon Örneği

adobe edge html5 animasyonu

Bir önceki yazımı okuduysanız Adobe‘nin çıkarmış olduğu Adobe Edge adlı programından bahsetmiştim. Biraz inceledikten ve fırsat bulduktan sonra, yapılması kolay basit bir HTML5 Animasyon örneği yaptım.

Adobe Edge ile yaptığım HTML5 Animasyonunu izlemek için tıklayın.

Izleyince göreceğiniz gibi grafikler mevcut. Bu grafikleri Illustrator’da çizip, Adobe Edge programında Import ettim. ( Adobe Edge hakkındaki yazımda da bundan bahsetmiştim. )

Adobe Edge nedir?

Adobe Edge hakkında yazdığım yazı için tıklayın.

Animasyon biraz basit olabilir ama Adobe Edge geliştikçe ve bizler de uğraştıkça daha güzel animasyonlar çıkacaktır.

Yapmış olduğunuz örnekler varsa yorum olarak ekleyebilirsiniz, onları yazıya dahil edebilirim.

Teşekkürler

Illustrator notları

Bu dönem Digital Image Making and Manipulation (ilginç isim evet) dersinde vizede teslim edilmek üzere yaptığım birkaç çalışmayı aşağıda sunuyorum. Vize geride kaldığı için 🙂

Hepsi varolan görseller üzerinden çizildi.

Büyütmek için tıklayabilirsiniz.

Finalden Notlar

Finallerin çoğu geride kaldı. 2 finalden birine yarın (salı) diğerine ise perşembe günü gireceğiz.

Perşembe günkü final normal yazılı bir final olacak. Ancak yarınki finalde sadece yaptığımız ödevi teslim edeceğiz bu da finalin yerine geçmiş olacak.

Ödev uğraştırdı yazılı sınavları arar oldum diyeceğim ama yalan olur. Hiç bir zaman yazılı sınavları sevmedim sevmeyeceğim Uygulama/Proje sınavlarını tercih ederim.

Aşağıda yarın teslim edip bir daha hiç görmeyeceğim, muhtemelen hocanın da çöpe atacağı çalışmamı adım adım fotoğraflarla anlatacağım.

1. aşama 1. çizim ( malzemeler guaj boya ;kırmızı, mavi , sarı. Fırça, 50×35 kağıt, duralit ve bir bardak su )

İlk resmin sırasıyla çizim anındaki fotoğrafları aşağıda (büyütmek için tıklayın);

2. Aşama 2. çizim (malzemeler aynı)

İkinci resmin sırasıyla çizim anındaki fotoğrafları aşağıda (büyütmek için tıklayın);

3. Aşama . Boş bir kağıda 2 cmlik aralıklarla çizgi çizme

4.Aşama çizgilerden kağıdı katlama ve ardından 50×35 lik fotoblok’a yapıştırma;

5.Çizimleri 2 cm aralıklarla maket bıçağı ile kesme

  

6. Aşama ( kesilen ilk çizimin 2 cmlik parçaları katlanılan boş kağıdın bir tarafına yapıştırma, diğer çizimin parçalarını ise katlı boş kağıdın diğer tarafına yapıştırma)

Sonuç;

Sağdan

Soldan

Üstten

Kullanılan yapıştırıcının son hali 🙂

İşte bir finalin ve yazının sonuna geldik 🙂 Yazıyı yazarken sabah oldu. Birazdan gidip ödevi teslim edeceğim.

Sonraki finalden sonraki yazıda görüşürüz 🙂