PERTEMUAN 2

Computer Graphic 2Computer Graphic 2

NOMOR KODE/SKSNOMOR KODE/SKS: VCD0029 / 3 SKS / Semester III - Agustus 2010 / 13 Week: VCD0029 / 3 SKS / Semester III - Agustus 2010 / 13 Week

DOSEN PEMBINADOSEN PEMBINA: Andre Oentoro: Andre Oentoro: Rudi Margono: Rudi Margono

TUTORTUTOR: Agus Susanto: Agus Susanto: David Junaedi: David Junaedi

PERTEMUAN 2

PERTEMUAN 5

TUJUAN INSTRUKSIONAL KHUSUS

Mahasiswa mampu membuat animasi preloader dan menggunakan actionscript lanjutan

PERTEMUAN 2

PEMBAHASAN PROJECT

• SILAHKAN PRESENTASIKAN TUGAS INTRO DIDEPAN BERSAMA DENGAN KELOMPOK

PERTEMUAN 2

FUNCTION DAN VARIABLE

Variable dalam actionscript adalah wadah yang berisi data.

Function dalam actionscript adalah kumpulan perintah yang dilakukan bersamaan

Jadi, variable digunakan untuk menyimpan data, dan function digunakan untuk menjalankan sejumlah perintah.

PERTEMUAN 2

FUNCTION()

Selain menggunakan perintah on(press) dan on(release) yang telah kita pelajari minggu lalu, kita juga dapat menggunakan perintah onPress dan onRelease

namainstance.onPress = function() {action}

namainstance.onRollOver = function() {action}

PERTEMUAN 2

FUNCTION()

contoh:

btn.onRollOver = function() {this._x = this._x+10;}

btn.onRollOver = function() {_root.btn._x = _root.btn._x+10;}

btn.onRollOver = function() {_root.btn._x += 10;}

PERTEMUAN 2

FUNCTION()

Selain itu, perintah function() juga dapat digunakan untuk mendefinisikan beberapa set perintah yang akan dilakukan bersamaan.

function namafunction() {actionactionaction

}

contoh:function mulai() {

trace("saya mulai");btn._x = btn._x + 100;if (btn._x >= 100) {

trace("saya pindah 100 pixel kedepan");}

}

PERTEMUAN 2

VARIABLE

Variable dapat didefinisikan dengan menggunakan perintah var

Kegunaan pendefinisian variable adalah untuk menyimpan isi atau nilai tertentu yang akan digunakan dalam actionscript selanjutnya

Ada banyak macam variable, sebagai dasarnya akan kita pelajari dua macam variable yang paling sering digunakan:

Number

String

Format penulisan:

var namavariable:jenis = isivariable;

PERTEMUAN 2

VARIABLE

contoh:

var kembali:Number = btn._x;

var hitung:Number = 0;

var halaman = 0;

var nama:String = "Andre";

var nama = "Isabella";

PERTEMUAN 2

VARIABLE

Perhatikan:

• Untuk nama variable, usahakan agar tidak menggunakan kata yang di-reserve oleh actionscript

• Kata yang direserve oleh actionscript, biasanya berwarna biru ketika kita ketikkan pada Action Window

• Biasakan agar kita menuliskan isi variable dengan jelas, sehingga kita dapat mengingatnya dengan mudah

• Semua nama variable, sama dengan nama instance, adalah CASE SENSITIVE

PERTEMUAN 2

DYNAMIC TEXT

• Dynamic text digunakan untuk menuliskan isi variable pada layar.• Dynamic text dapat diletakkan dalam movieclip, dan memiliki nama

instance sendiri. Lebih lanjut mengenai dynamic text akan dibahas pada pertemuan setelah UTS.

Untuk menggunakan dynamic text:• Lakukan setting dan format font, paragraph, alignment, dsb pada obyek

tersebut• Berikan nama instance pada obyek tersebut• Masukkan actionscript:

namatext.text = "isi text";

contoh:buku.text = "isi text";

var isibuku = "halaman 1 halaman 2 halaman 3";buku.text = isibuku;

PERTEMUAN 2

MOUSE DRAG AND DROP

• Minggu lalu kita telah mempelajari bahwa mouse dapat digunakan untuk menggeser sebuah obyek.

• Sekarang kita akan mempelajari bagaimana dengan perintah actionscript yang sederhana, kita dapat membuat sebuah mini-game dalam waktu yang singkat.

• dragball -- menggunakan sistem dimana setelah bola diletakkan, maka perintah if akan melakukan cek terhadap posisi bola

• exploding -- menggunakan sistem dimana bola akan dicek pada saat mouse digerakkan

PERTEMUAN 2

PRELOADER

Ketika kita melihat website yang menggunakan flash, kadang kita harus menunggu proses loading selesai, dimana proses loading ini membutuhkan waktu yang bervariasi tergantung pada kecepatan koneksi internet masing-masing.

Kita akan mempelajari bagaimana caranya membuat sebuah preloader dengan actionscript.

Actionscript yang digunakan dalam pembuatan preloader:• getBytesTotal()• getBytesLoaded()• int()

PERTEMUAN 2

PRELOADER

Setelah file selesai di-load, dapat digunakan perintah lain untuk memulai animasi.

Sebagai contoh:• nextScene();

• _root.gotoAndPlay(2);

PERTEMUAN 2

PRELOADER

• Bagaimana membuat tampilan loading screen yang bisa menarik?

• Salah satu cara adalah memberikan pengunjung sesuatu untuk dilakukan, baik itu berupa bacaan, mini-game, atau hal lain yang berukuran kecil sehingga bisa di-load pada saat pertama kali animasi flash tersebut dimulai.

• Pada contoh berikut, bola yang bergerak naik turun tidak berpengaruh pada jalannya animasi preloader, karena bola tersebut hanya merupakan beberapa baris actionscript ditambah dengan bentuk bulat saja.

• Apabila menggunakan gambar bitmap, maka gambar bitmap tersebut belum tentu bisa di-load pada saat pertama kali preloader dimulai, akibatnya, nilai persentase loading belum tentu mulai dari awal.

PERTEMUAN 2

PENJELASAN MENGENAI PROJECT

• Siapkan sebuah sistem navigasi yang akan dipergunakan dalam project akhir masing-masing kelompok

• Boleh berupa sekumpulan button, gambar, kalimat, foto, atau imajinasi lainnya

• Apabila sudah memiliki ide, silahkan tanya cara eksekusinya.

PERTEMUAN 2

PENJELASAN MENGENAI PROJECT

• Jumlah item navigasi minimum 5 item• Project akan dikumpulkan pada saat UTS• Selama project belum dikumpulkan, masing-

masing kelompok dipersilahkan untuk melakukan revisi dan perbaikan seiring dengan bertambahnya kemampuan menggunakan Adobe Flash

PERTEMUAN 2

PENJELASAN MENGENAI PROJECT

Penilaian:Ide, konsep, tema

40%Tingkat kehalusan dan detail animasi

30%Originalitas

20%Tingkat kesulitan pengerjaan

10%