Pages

2011/02/23

Komponen dasar grafis dari animasi Java

Hampir semua komponen grafis 2 dimensi Java terletak dalam package java.awt dan javax.swing. Bahkan untuk event dari mouse dan keyboard pun terletak dalam package java.awt.event. Sedangkan untuk threading, terletak pada package java lang yang otomatis digunakan oleh seluruh program Java.

1.Sebelum memulai membuat program, Anda harus mendeklerasikan library apa saja yang dipakai dalm program Anda, melalui, statement import yang ditulis di luar deklarasi class public. Berikut ini beberapa library yang dibutuhkan dalam dasar pembuatan animasi Java.

.
import Java.awt.Dimensions;
import Java.awt.Graphics;
import Java.awt.Graphics2D;
import Java.awt.event.MouseAdapter;
import Java.awt.event.MouseEvent;
import Java.awt.event.BufferedImage;

import Java.awt.io.IOException;
import Java.imageio.ImageIO;
import Java.swig.JPanel;


2.Dalam animasi, hal paling penting adalah Container dari animasi tersebut. Container bisa diasumsikan sebagai kanvas tempat animasi tersebut ditampilkan. Ada banyak cara menampilkan gambar dengan Java, antara lain dengan class java. Awt.Panel, javax.swing.Jpanel, java.awt.Canvas, dan beberapa class lainnya. Namun, pada umumnya, konsep pemakaiannya sama saja. Untuk membuat bidang gambar sendiri, Anda cukup membuat class baru turunan dari salah satu class di atas. Simpan dengna nama file PanelClickable.java.

 

.public class PanelClickable extends JPanel {

public PanelClickable() {
//mengatur ukuran
setPreferredSize(new Dimension(400, 300));
}

@Override
protected voide paintComponent (Graphics g) {
super.paintComponent(g);
// tempat penggambaran
}
}


3.Karena tujuan utamanya adalah membuat media penggambaran sendiri, maka method paintComponent (Graphics g) harus di-override. Maksudnya adalah agar class tersebut melakukan penggambaran sesuai dengan program tersebut, Anda bisa membuat main program sederhana dengan menggunakan Jframe. Jika tidak muncul error dan jendela tampil tepat di tengah layar, langkah berikutnya siap dikerjakan.


import javax.swing.JFrame;

public class Demo {
public static coid main(String[] args) {
JFrame frame = new JFrame ("Demo animasi");
frame.add(new PanelClickable());
frame.pack();
frame.setDefaultCloseOperation(JFrame.
EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}


4.Siapkan class untuk objek yang akan digambar. Contoh sederhananya adalah membuat class Ball yang merepresentasikan sebuah bola. Pada pembuatan sebenarnya, property dan method harus dibuat sedemikian rupa, agar dapat benar-benar merepresentasikan perilaku objek yang sesungguhnya.


class Ball {
public BufferedImage image;
public int x, y;
public int nextX, nextY;

public Ball(int x, int y) {
this.x = x;
this.y = y;
nextX = x;
nextY = y;
try {
image =ImageIO.read (getClass ().
getResource ("ball.png"))'
} catch (IOException ex) {}
}

public void drawBall (Graphics2D gd) {
gd.drawImage(image, x, y, null);
}
public void update() {
if (x != nextX) {
x = x> nextX ? x - 1 : x + 1;
}
if (y != nextY) {
y = y> nextX ? y - 1 : y + 1;
}
}
}



Pembuatannya dapat dilakukan sebagai class tersendiri, atau inner class yang ada di dalam class public. Terdapat 2 pasang variabel yang merepresentasikan koordinat. Pasanan pertama adlaah koordinat asli dari bola, sedangkan pasangan kedua adlaah koordinat tujuan pergerakan bola.

Constructor akan mendefinisikan letak awal bola,s erta mengambil gambar dari file “ball.png” menggunakan class ImageIO. Class ImageIO merupakan class bantu yang berfungsu untuk melakukan input/output file bertipe image. Karena merupakan class input output, maka ImageIO akan “throws” IOException jika terjadi suatu error.

Metode drawBall adalah method yang diguanka untuk menggambar bola tersebut. Perhatikan bahwa parameter yang digunakan adalah Graphics2D, yaitu class yang berfungsi untuk melakukan penggambaran pada kanvas (lihat kembali methode painComponent pada Jpanel). Method update () nantinya akan dipanggil pada loop animasi, yang akan menggerakkan bola menuju koordinat tujuan.

5.Tahap berikutnya adalah membuat inner class yang akan mendeteksi event dari mouse. Class tersebut cukup extend class MouseAdapter yang mengimplementasikan interface MouseListener. Sebagai langkah awal yang sederhana, Anda cukup meng-override methode mouseClicked saja. Event tersebut akan mengubah nilai koordinat tujuan bola.


class ClickDetector extends MouseAdapter {
PanelClickable parent;
publick ClickDetector(PanelClickable
parent) (
this.parent = parent;
}

@Overriede
public void mouseClicked(MouseEvent e) {
super.mouseClicked(e);
parent.ball.nextX = e.getX();
parent.ball.nextY = e.getY();
}
}



6.Tambahkan kedua inner clas yang telah dibuat sebelumnya ke dalam class PanelClickable. Cara paling mudah adalah mendeklarasikannya dalam constructor.


public class PanelClickable extends JPanel {

Ball ball;
public panelClickable() {
setPrefferedSize(new Dimension (400, 300);
addMouseListener(new ClickDetector (this));
ball = new Ball (0, 0);
}
// kode lainnya




7.Tahap terakhir adalah membuat naimasi untuk kanvas tersebut. Konsep dari animasi adalam membuat thread yang berbeda. Maksud dari thread yang berbeda adlaah membuat suatu garis proses baru sehingga proses animasi akan berbeda dari proses thread untuk program utama. Konsep ini dikenal dengan nama multithreading. Dalam Java, multithreading dapat dilakukan dengan cara membuat object thread baru. Anda bisa membuatnya secara sederhana dalam constructor PanelClickable.













Thread t = new Thread(new Runnabe() {
public void run() {
while(true) {
ball.update();
repaint();
try {
Thread.sleep(15);
} catch (InterruptedException ex) {}while(true) {
}
}
});
t.start();







Perhatikan bahwa terdapat endless loop atau loop yang akan selalu berputar dengan cara membuat while (true). Pada baris awal akan melakukan pemanggilan pada method update () milik object ball. Setelah lokasi berubah, maka harus dilakukan pemanggilan methode repain () yang akan menggmbar ulang kanvas dengan nilai property yang baru tadi. Setelah itu, thread diberhentikan sementara selama 15 mildetik untuk memperlihatkan animasi secara cepat. Jika dihitung secara kasar, maka akan ada 1000/15 frame per detik, atau 66,6 penggambaran ulang setiap detiknya.

8.Program telah selesai, Anda bisa mencobanya dengan mengklik suatu area pada kanvas. Jika berjalan lancar, maka bola akan bergerak menutu titik yang Anda klik.

Perihal HTML 5 yang perlu anda ketahui

Berikut ini adalah beberapa hal tentang HTML5 yang wajib Anda ketahui jika Anda ingin menjadi developer web yang handal.

1.Deklarasi doctype baru. Sebelum membuat sebuah halaman dengan HTML 5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.



2.Struktur semantik. Pada XHTML, programmer HTML bisa saja menjadi pembuat stres programmer CSS karena struktur halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing, seperti pada gambar.

Struktur tersebut tidak terlihat semantik, sulit dibaca dan dideskripsikan, serta bagi programmer HTML yang iser, bisa saja ID header diubah sesukanya. HTML5 menawarkan elemen-elemen yang umum diguankan dalam sebuah struktur halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantik dan mudah dibaca, seperti pada gambar

Dalam penulisan kode, dapat ditulis sebagai berikut:



Banyak manfaat jika menggunakan struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section. Elemen “footer” juga merepresentasikan footer dari suatu section. Elemennya “nav” cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section” merepresentasikan suatu bagian generik dari dokumen.

3.Content editable. Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Contoh sederhananya:



Hasil tampilan dari kode di atas adalah memungkinkan untuk penambahan list dalam tag “ul” yang telah diberikan atribut tersebut. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.

4.Validasi email. Dengan validasi langsung di tampilan, Anda dapat mencegah seorang user untuk memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request yang tidak valid terhadap script program Anda. HTML5 menawarkan fitur validasi email secara langsung dengan mengubah type dari elemen input menjadi “email”. Sayangnya, masih belum semua browser memberikan support untuk fitur ini. Dari percobaan penulis, salah satu browser yang memiliki fitur ini adalah Opera:



5.Attribute required. Satu lagi input pada HTML5, memungkin validasi pada sisi client terhadap input yang harus diisi. Dengan demikian, Anda tidak perlu membuat fungsi Javascript untuk melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error.



6.Internet Explorer Hack. Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browser tersebut. Pada IE, secara default semua elemen yang kaan ditampilkan secara “inline”. Untuk itu, Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya, seperti berikut ini.



Meskipun demikian IE tetap tidak menghiraukan style tersebut. Anda harus membuat Javascript di bawah ini ke dalam “head” dari setiap halaman.



Untuk kemudahan, seseoang bernama Remy Sharp telah membuat library Javascript untuk mengatasi error yang dibuat oleh IE tersebut. Script ini biasa disebut dengan HTML5 shim. Anda bisa memasukkan kode di bawah ini ke dalam head halaman website Anda, atau men-download script tersebut secara lokal.



7.Masih banyak elemen HTML5 lainny seperti canvas, video, audio, mark, dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standar resminya belum dikeluarkan oleh W3C. Untuk melihat kompatibiltias browser terhadap HTML5 dan CSS3, Anda bisa mengunjungi halaman www.findmebyip.com/litmus.


- - - - - - - - - - - - - - - - - -- - - - -


Doctype. Singkatan dari Document Type Declaration, diguankan untuks ecra cepat mengenali tipe dokumen halaman website. Dengan pendefinisian doctype, browser dapat dengan mudah me-render tampilan sesuai dengan standar dokumen yang telah ditetapkan. Doctype tidak akand itampilkan pada layar, karena bersifat sama seperti sebuah comment.

Silverlight. Framework aplikasi untuk membuat rich Internet application, yang mengedepankan multimedia, animasi, grafis, dan sebagainya seperti yang terjadi pada Adobe Flash.

CSS3. Versi terbaru CSS (Cascading Style Sheet). CSS3 telah di develop oleh W3C sejak Desember 2005. Salah satu kelebihan CSS3 adalah dapat menampilkan animasi dan gradasi warna. Meski masih belum resmi diumumkan, sebagian besar browser modern telah mensupport CSS3 ini, selain Intenet Explorer.

Linkwithin

Related Posts Plugin for WordPress, Blogger...