Kamis, 17 Mei 2012

Mengubah Logo 2D menjadi 3D (Bag.1)

Pada tutorial ini anda akan belajar mengubah logo 2 dimensi menjadi 3 dimensi. Selama
praktek dalam tahap ini anda akan memepelajari cara menggambar garis dalam 3ds max dan
menggunakan Bevel modifier untuk mengubah garis 2D menjadi objek 3D. Anda juga akan
menambahkan beberapa material dan menganimasikan logo tersebut sehingga dapat berputar
secara kontinyu.
Dalam tutorial ini anda akan belajar mengenai:
- Menampilkan background pada viewport
- Menggambar splines
- Vertex fillet
- Extrude objek shape
- Detach elemen menjadi objek
- Align pivot points.
- Menambahkan material pada objek.
- Meng-Animasikan objek.
- Render animasi menjadi format movie
File pendukung
Seluruh file pendukung yang dibutuhkan terdapat dalam source disc 3dsmax 6 atau download di
ilmukomputer.com
Langkah-langkah pada tutorial:
- Memulai dengan scan gambar
- Menampilkan gambar hasil scan sebagai background viewport
- Menggambar lingkaran pada gambar background
- Cloning lingkaran kedua
- Menggambar garis objek logo
- Menggunakan modifier untuk membuat objek 3D
- Persiapan animasi logo
- Meng-animasi-kan logo
- Menambahkan material pada logo
- Rendering animasi logo

1. Menampilkan gambar hasil scan sebagai background viewport Langkah berikut akan menampilkan image 2D pada “Front viewport” sebagai background.
Ubah viewports:
Jalankan 3ds max. Jika sudah berjalan, simpan pekerjaan anda dan pilih menu File > Reset.
Langkah ini akan me-reset program pada settingan default.
Interface 3ds max menampilkan empat viewport, main menu, toolbar, status line dan command
panels.
Default 3ds max user interface.
Klik Front viewport untuk mengaktifkan viewport. Viewport yang aktif akan ditandai dengan
dengan garis pinggir berwarna kuning.
Klik Min/Max Toggle, terletak pada viewport controls section di bagian bawah kanan
pada user interface.
Dengan menekan Min/Max Toggle maka hanya viewport yang aktif yang akan ditampilkan.
Tip: Anda dapat menggunakan shortcut keyboard untuk mengubah viewport yang aktif.
Berdasarkan gambar di atas, dengan menekan F pada keyboard akan mengubah viewport yang
aktif, dari viewport Perspective menjadi Front viewport.
Menampilkan background pada viewport:
Pada menu Views, pilih Viewport Background.
Jendela dialog Viewport Background tampil.
Tip: Anda juga dapat membuka jendela dialog Viewport Background dengan menggunakan
shortcut keyboard, ALT+B.
Pada jendela dialog Viewport Background, di bawah grup Background Source, klik Files.
Arahkan ke folder Modul_I dan dobel klik file timegrey.jpg. Langkah ini memilih image
timegrey.jpg sebagai background viewport.
Pada jendela dialog Viewport Background, pada grup Aspect Ratio, tandai Match Bitmap.
Hal ini untuk menghindari distorsi pada image yang dipilih.
Tandai Lock Zoom/Pan.
Setting ini akan membuat anda mampu untuk melakukan zoom out dan zoom in pada viewport.
Klik OK untuk menutup jendela Viewport Background

Lock Zoom/Pan membuat anda bisa melakukan zoom out pada the background image.
Pada viewport controls, klik Zoom button.
Klik pada viewport. Tahan klik kiri pada mouse lalu drag mouse ke arah bawah hingga seluruh
image tampil pada viewport.
Tip: Jika anda memiliki mouse dengan tombol tengah (scroll), tekan tombol tengah atau scroll
seperti halnya anda melakukan drag ke arah bawah.
Tekan G pada keyboard untuk menyembunyikan grid sehingga anda memiliki pandangan yang
lebih baik pada image background tersebut.
The entire image in the viewport.
Note:
Klik Pan button jika anda akan menggeser image pada kondisi zoomed out


Jumat, 20 April 2012

Cara Memasang Musik di Blog | Blogger atau Blogspot

1. Buka mixpod.com

2. Daftar pakai email kamu

3. Klik ‘Create Playlist’


4. Cari di kotak pencarian lagu yang akan dipasang. Misalnya, Dear God Avenged Sevenfold. Lantas klik tanda + di sebelah kanan lagu. Jika ingin menambahkan lagu, ulangi proses ini. Saya ambil contoh lagu kedua Tears X Japan.


5. Jika ingin mengatur tampilan, warna, dll, klik ‘Customize’ (di kiri atas).


6. Klik ‘Save Playlist’. Isi judul dan deskripsi. Misalnya musik dan deskripsinya my music. Lalu klik ‘SAVE (get code). 

7. Muncul embed-nya, copy dan pasang di blog kamu. Caranya: Login ke blog kamu, masuk dashboard-design-add gadget-pilih HTML/javasript, pastekan embde kode tadi, lalu simpan. 


Hasilnya seperti ini:


MusicPlaylistView Profile
Create a MySpace Playlist at MixPod.com

Membuat Animasi Kumbang Mengikuti Mouse

Kali ini saya akan membuat sebuah objek yang bergerak seakan-akan mengikuti mouse. Yang ini beda sama yang mengganti kursor lho. Kalo bingung, langsung aja deh lanjut….. 8)
  • Seperti biasa, kita buat sebuah dokumen baru:wink:
  • Sekarang yang mengikuti kursor adalah kepik, atau kumbang, gambar yang bagus ya.. :p
    kumbang
    kumbang
  • Setelah kita gambar kumbang yang bagus, kemudian seleksi kumbang tersebut atau tekan Ctrl + A (Seleksi semua).
  • Kemudian kita klik kanan pada kumbang tersebut dan pilih Convert To Symbol, lalu pilih MovieClip (Setting seperti di gambar ya :wink: ).
    convert to symbol
    convert to symbol
  • Oke, sekarang Kumbang kita jadi sebuah MovieClip. :)
  • Terlebih dahulu kita klik kumbangnya dulu terus kita pergi ke panel properties (caranya tekan Ctrl + F3) dan ubah instance name-nya menjadi kumbang_mc.
    properties kumbang
    properties kumbang
  • Sekarang kita beralih ke Actionscript nih, siap2 ya..  :lol:
  • Buka Panel Actions dengan menekan F9 pada keyboard, jika yang muncul adalah Panel Actions – MovieClip, berarti kita harus meng-klik Layer 1 frame 1 agar Panelnya menjadi Actions – Frame.
    actions - frame
    actions - frame
  • Kemudian ketikkan script berikut :
    01_root.onEnterFrame=function(){
    02//mencari selisih dari koordinat
    03var deltaX = _xmouse - kumbang_mc._x;
    04var deltaY = _ymouse - kumbang_mc._y;
    05//menggerakkan kumbang ke kursor sebesar 1/10 dari jarak ke kursor
    06kumbang_mc._x += deltaX / 10;
    07kumbang_mc._y += deltaY / 10;
    08//kumbang menghadap ke mouse
    09kumbang_mc._rotation = -Math.atan2(-deltaX,-deltaY)*180/Math.PI;
    10}

Selasa, 17 April 2012

Membuat Informasi Posisi Mouse

Pada animasi ini, anda akan membuat sebuah tampilan yang memberikan informasi koordinat dari posisi mursor mouse. langkah-langkah pembuatannya adalah sebagai berikut:
  1. Buatlah sebuah dokumen baru dengan memilih File -> New.
  2. Pada kotak dialog New Document, pilih Flash File (ActionScript 2.0), lalu klik OK.
  3. Import sebuah tampilan foto sebagai background dengan memilih menu File -> Import -> Import to Stage.
  4. Dengan menggunakan Free Transform Tool, atur tampilan foto agar sesuai dengan ukuran stage.
  5. Lakukan penguncian trhaddap layar bacjground.
  6. Buatlah layer baru dengan klik New Layer pada Timeline.
  7. pilih Text Tool pada toolbox.
  8. Pada panel Properties, pilih Dynamic Text.
  9. Dengan menggunakan tool tersebut, buatlah kotak teks pada stage.
  10. Buatlah dua kotak dengan ukuran yang sama dan atur posisinya.
  11. Klik kotak teks tersebut dengan enggunakan text Tool.
  12. pada panel Properties, ketikkan “xmouse_txt”.
  13. Lakukan pengaturan terhadap tampilan teks pada tab Character.
  14. Lakukan pada kotak teks kedua, kemudian ketikkan “xmouse_txt” pada panel Properties.
  15. Atur tampilan teks dengan pengaturan yang sama seperti pada pengaturan teks sebelumnya.
  16. Klik Text Tool di luar stage.
  17. Selanjutnya pilih Static Text pada panel properties.
  18. Dengan menggunakan tool tersebut, buatlah teks seperti pada gambar berikut sebagai keterangan bagian kotak terks.
  19. Sekarang buatlah layar baru dengan New Layer pada Timeline.
  20. Klik frame pertama pada layer tersebut,
  21. Tampilkan panel Actions, kemudian ketikkan ActionScript berikut:
onMouseMove=function(){
xmouse_txt.text=_root._xmouse;
ymouse_txt.text=_root._ymoouse;
updateAfterEvent();
}
22.  Tampilkan hasilnya dengan tekan Ctrl+Enter.
23.  Gerakkan mouse maka akan tampak angka-angka koordinat.