Contoh Cover by linzhengnd

VIEWS: 211 PAGES: 25

									                            JUDUL PROYEK AKHIR

  Visualisasi Pembelajaran J2ME Menggunakan Adobe Flash Lite

                                           BAB 1
                                     PENDAHULUAN


1.1   Latar Belakang
      Komunikasi adalah salah satu hal yang penting dalam pendidikan. Seorang
pendidik, guru atau dosen, sedang melakukan komunikasi dengan para siswa ketika
proses belajar mengajar. Dengan komunikasi yang efektif, maka transfer ilmu dan
dan nilai bisa berjalan efektif pula. Begitu juga sebaliknya, jika komunikasi tidak
efektif, maka transfer ilmu dan nilaipun tidak akan optimal.
      Manusia dapat menyerap suatu materi sebanyak 70 % dari apa yang dikerjakan,
50 % dari apa yang didengar dan dilihat (audio visual), sedangkan dari apa yang dili-
hatnya hanya 30 %, dari yang didengarnya hanya 20 %, dan dari yang dibaca hanya
10 %. Namun ada kalanya kegiatan belajar mengajar di hadapkan pada materi yang
tidak dapat dilakukan dengan bereksperimen. Pada saat seperti inilah diperlukan alat
bantu pengajaran, salah satunya adalah visualisasi pembelajaran menggunakan ani-
masi interaktif.
      Pada tugas akhir ini saya akan membuat modul ajar untuk mempelajari
“J2ME” dengan menggunakan adobe flash -Lite. Selain berisi seluruh hal yang me-
nyangkut pembelajaran J2ME, di dalam pembelajaran multimedia ini terdapat kuis
yang dapat mengukur kemampuan mahasiswa dalam memahami pembelajaran ini.


1.2   RUMUSAN MASALAH
Tugas akhir yang saya buat ini, akan mengkaji tentang sebuah pembangunan aplikasi
yang akan memberikan visualisasi dimana sebuah animasi flash yang bisa beroperasi
dalam sebuah mobile, mulai dari penjelasan tentang dasar-dasar pembelajaran J2ME,
contoh-contohnya. Serta kuis yang telah kami olah didalam sebuah penyimpanan da-
ta. sehingga user akan tertarik untuk mempelajarinya




                                          1
1.3 Tujuan
Tujuan pengerjaan Tugas Akhir adalah:
Membangun sebuah perangkat lunak yang bisa membuat user tertarik untuk
mengopersikannya. Serta memudahkan user untuk mempelajari dasar-dasar J2ME
dengan mudah.


1.4 Batasan Masalah
    Dalam Tugas Akhir ini, batasan masalah meliputi hal-hal di bawah ini:
    1. Membahas dasar-dasar pembelajaran J2ME
    2. Menggunakan sebuah penyimpanan data (database) yang static
    3. Tidak berbasis web service


1.5 Masalah Yang Akan Dikaji
    1. Mengoperasikan flash dalam mobile.
    2. Menggunakan sebuah database didalam mobile, tentunya pemilihan tipe pe-
      nyimpanan data yang suport dengan mobile dan juga dengan flashnya
    3. Membuat sebuah animasi yang terlihat sederhana dan tampak elegan.
      Sehingga bisa membuat user tertarik.




                      Nokia S40         Nokia 6131, Nokia 6136, Nokia 6233,
                                        Nokia 6234, Nokia 6151, Nokia 8800
                      Symbian           Nokia 5500, Nokia 3230, Nokia 6682
                                        Nokia E50, Nokia E62, Nokia E70-1
                                        Nokia N70-1, Nokia N70, Nokia N90
      Flashlite 1.1                     Nokia N71-1, Nokia N75, Nokia N91-1
                                        Nokia N93i
                      SE                SE-V600i, SE-W550c, SE-W600c,
                                        SE-W600i, SE-W710i, SE-W830a,
                                        SE-W830c, SE-W830i, SE-W850i,
                                        SE-Z712a, SE-Z800i




                                         2
                       MOTOROLA Motorola L7
       Flashlite 2.0   S40              Nokia 5200, Nokia 5300, Nokia 6085,
                                        Nokia 6300, Nokia 7390


D. TINJAUAN PUSTAKA
1.1 Adobe Flash

     Adobe Flash merupakan salah satu program yang digunakan untuk mendesain
tampilan web seperti yang banyak digunakan saat ini. Saat membuka situs atau ha-
laman internet tertentu, biasanya terdapat animasi objek grafis yang bergerak dari
besar menjadi kecil, dari terang menjadi tampak lebih redup, dari bentuk satu menja-
di bentuk yang lain, dan masih banyak lagi yang lain. Adapun animasi-animasi objek
grafis tersebut dapat dikerjakan dengan menggunakan Adobe Flash . Flash juga
mengenalkan bagaimana membuat movie clip, animasi frame, animasi tween motion,
serta perintah action-nya. Flash mempunyai banyak fasilitas yang sangat berdaya gu-
na, tetapi mudah digunakan seperti membuat interface / form menggunakan kompo-
nen dengan drag and drop saja, efekefek spesial animasi timeline yang sudah built-in,
behavior yang juga sudah siap pakai untuk menambahkan interaktifitas pada animasi
tanpa perlu menuliskan kode pemrograman, dan masih banyak lagi yang lainnya.
     Flash adalah program yang fleksibel untuk membuat animasi, sehingga banyak
para Desainer yang memakainya. Para Desainer tersebut sering menggabungkan
Adobe Flash dengan Macromedia Dreamwever, Frontpage, Adobe Photoshop, Co-
relDraw, dan lain-lain, untuk mendapatkan desain yang menarik. Movie Flash terdiri
dari grafik, teks, animasi dan aplikasi untuk situs web. Pada Movie Flash juga bisa
memasukkan unsur interaktif dalam movienya dengan bahasa pemr graman ActionS-
cript, untuk memudahkan user berinteraksi dengan mouse dan keyboard, engontrol
movie, memindahkan objek-objek, memasukkan informasi melalui form, dan begitu
juga dengan operasi-operasi yang lainnya. Adapun beberapa kemampuan Flash lain-
nya adalah sebagai berikut:
      Dapat membuat tombol interaktif dengan sebuah movie atau objek yang lain
      Dapat membuat perubahan transparansi warna dalam movie
      Dapat membuat perubahan animasi dari satu bentuk ke bentuk yang lain



                                         3
      Dapat membuat gerakan animasi dengan mengikuti alur yang telah ditetap-
        kan
      Dapat membuat animasi logo, animasi form, presentasi multimedia, game,
      kuis interaktif, simulasi / visualisasi
      Dapat membuat situs web, aplikasi web, pengaturan halaman web
      Dapat dikonversi dan di-publish ke dalam beberapa tipe seperti .swf, .html,
        .gif, .jpg, .png, .exe, .mov

1.1.1 Istilah-Istilah Umum Dalam Program Flash

     a. Properties
        Kumpulan setting dan informasi mengenai objek tertentu dalam Flash.
     b. Animasi
        Sebuah gerakan objek maupun teks yang diatur sedemikian rupa sehingga
        kelihatan menarik.
     c. ActionScript
        Suatu perintah yang diletakkan pada suatu frame atau objek sehingga frame
      atau objek tersebut akan menjadi interaktif.
     d. Movie Clip
        Suatu animasi yang dapat digabungkan dengan animasi atau objek yang
        lain.
     e. Frame
        Suatu bagian dari layer yang digunakan untuk mengatur pembuatan animasi.
     f. Timeline
      Bagian dari program Adobe Flash 8 yang digunakan untuk menampung layer.
     Berikut ini adalah tampilan dari timeline.
     g. Masking
      Suatu perintah yang digunakan untuk menghilangkan sebuah isi dari suatu
     layer dan isi layer tersebut akan tampak saat movie dijalankan.
     h. Layer
      Sebuah nama tempat yang digunakan untuk menampung satu gerakan objek
     sehingga jika ingin membuat gerakan lebih dari satu objek sebaiknya diletak-
     kan pada layer tersendiri.


                                           4
      i. Keyframe
       Suatu tanda yang digunakan untuk membatasi suatu gerakan animasi.




1.1.2 Animasi Dalam Flash

      Adapun beberapa animasi yang dipakai dalam pembuatan proyek akhir ini,
diantaranya adalah :

      a. Animasi per frame
       Animasi frame adalah animasi yang dibuat dengan menggunakan frame.
Frame adalah suatu bagian dari Layer yang digunakan untuk mengatur pembuatan
animasi. Metode yang dipakai adalah secara manual, dimana kita diharuskan mem-
buat setiap objek yang berbeda pada setiap frame untuk menghasilkan animasi. Mes-
kipun animasi yang dihasilkan terlihat lebih bagus dan halus daripada animasi me-
tode tween, akan tetapi jarang digunakan karena pembuatan animasinya memerlukan
ketelitian dan ukuran file animasi pun lebih besar.


      b. Animasi Create Motion Tween
       Animasi Create Motion Tween adalah animasi yang digunakan untuk meng-
gerakkan objek berdasarkan batas suatu keyframe tertentu. Metode ini paling sering
digunakan karena paling mudah dan cepat. Kita hanya perlu membuat atau menentu-
kan objek di frame awal dan objek di frame akhir, kemudian secara otomatis Flash
akan membuat frame diantara frame awal dan frame akhir, sehingga terbentuklah
animasi.

      c. Animasi Shape Tween
       Animasi Shape Tween adalah animasi yang digunakan untuk mengubah satu
bentuk ke bentuk yang lain. Shape Tween juga disebut dengan efek morph.

      d. Properti Mask




                                          5
       Properti Mask digunakan untuk menyembunyikan atau menutupi suatu objek
dengan objek lain. Objek yang menutupi terlihat transparan dan menyatu dengan ob-
jek yang ditutupi sehingga hanya objek yang ditutupi yang dapat dilihat.



1.1.3 Aplikasi ActionScript di Flash

     ActionScript adalah bahasa pemrograman untuk Adobe Flash Player run-time
environment. ActionScript memungkinkan interaktivitas, penanganan data, dan
banyak lagi di dalam konten dan aplikasi Flash.
     a. Script di Frame
       Script yang diletakkan di frame disebut frame-script. Untuk meletakkan script
di frame caranya yaitu :
       1. Tentukan frame berapa yang ingin diberi script. Posisi harus di keyframe.
           Kalau di frame tersebut belum ada keyframe, Anda harus membuatnya
           dulu dengan menekan tombol F6 (Insert Keyframe).
       2. Setelah itu baru tekan tombol F9 untuk menampilkan Panel Action.

       Pastikan informasi lokasi di Panel Action menunjukkan tulisan “Frame” un-
tuk menghindari kesalahan lebih lanjut. Setelah selesai mengetik script, tutup Panel
Action, Anda akan menemukan tanda “a” di frame (keyframe) yang telah diletakkan
script. Suatu waktu jika ingin mengubah script tersebut, klik tanda “a” di frame (key-
frame) dan tekan tombol, (titik hitam). Layer tidak ada hubungannya dengan script.

     b. Script di Button
       Script yang diletakkan di button disebut button-script. Untuk meletakkan
       script di tombol caranya :
           1. Pastikan tombol yang dimaksud sudah terpilih (di-klik). Perhatikan ju-
           ga informasi yang terdapat pada gambar dibawah, di Property Inspector
           apakah benar tombol tersebut yang dimaksud.
           2. Setelah semuanya dipastikan, tekan F9 untuk menampilkan Panel Ac-
           tion.




                                          6
1.2 Simple Sample Of Visual Midlet
J2ME sendiri adalah teknologi dari Java programming language yang di khususkan
untuk perangkat mobile seperti mobile, dan Pocket PC. J2ME sebenarnya sama den-
gan pemrograman yang menggunakan bahasa java programming, hanya saja dalam
J2ME ada beberapa fungsionalitas yang ditambah dan dikurangi dan di sesuaikan
untuk pemrograman perangkat mobile. Tentunya untuk bisa membuat game di HP
kita harus sudah biasa dulu menggunakan pemrograman dengan java, disini saya ti-
dak akan mengulas bahasa pemrograman java -mungkin lain kali dalam kesempatan
lainnya, saya mengharapkan anda sudah memiliki pengetahuan java sebelumnya.
Disini saya hanya akan memberikan pengetahuan mengenai alat yang digunakan da-
lam membuat program java di HP dan konsepnya.


1.2.1 Skenario untuk alur midlet
Alkisah midlet yang dibuat akan dimulai dari sebuah form isian untuk mengisi nama,
kemudian saat tombol next ditekan, akan ada pilihan jenis kelamin. kemudian pilihan
disubmit lalu sapaan serta nama yang diisikan akan ditampilkan melalui alert. Untuk
MIDP.


1.2.2 Komponen-komponen dari scenario
saat aplikasi mulai dijalankan ada form dengan textfield, tombol next(untuk melan-
jutkan ke pilihan gender) serta tombol exit (untuk keluat dari midlet) lalu tampilan
untuk memilih gender yang berupa list dengan tombol submit(untuk lanjut ke alert)
dan back(kembali ke pengisian nama) dan yang terkhir alert yang menampilkan na-
ma serta sapaan degan tombol ok (kembali ke tampilan pengisian nama).




1.2.3 Design sudah didapatkan n komponen2 sudah ditemukan, Lanjutkan ke
        pembuatan


                                         7
      buat project baru, klik kanan di source package, pilih visualMidlet. isi dengan
      Nama SampleVisMIDlet klik finish. akan muncul tampilan visual midlet de-
      fault dengan flow view yang aktif.




                              Gambar 1.1

1.2.4 menuju ke Pallete di sisi kanan layar di bagian Displayables
      Drag komponen list, alert dan form untuk tampilan lalu drop ke flow view be-
      rikut hasilnya seperti ini.




                                    Gambar 1.2



1.2.5 komponen2 untuk tampilan sudah siap, Mari Isi degan komponen2 pe-
      lengkap dengan berpindah ke Screen view.




                                            8
komponen2 untuk tampilan sudah siap, Mari Isi degan komponen2 pelengkap
dengan berpindah ke Screen view.
   a. mulai dari form, aktifkan form yang akan diisi dengan memilih com-
      bo box di samping analyzer




                             Gambar 1.3

   b. form aktif lalu tambahkan komponen textfield (sebagai kotak isian
      nama),tombol Ok dan exit. selain dengan drag komponen dari pallete,
      untuk menambahkan komponen bisa langsung dengan klik kanan pa-
      da tampilan yang aktif seperti berikut:




                          Gambar 1.4




   c. Aktifkan tab properties untuk mengganti label yang akan tampil.




                                   9
                      Gambar 1.5

d. Ganti label pada textfield dengan "Your name :". pilih dulu komponen
   yang akan dirubah lalu pada bagian label ganti sehingga tampil seperti
   gambar berikut :




                       Gambar 1.6




                             10
e. Rubah nama komponen dengan rename. komponen textfield dan tom-
   bol ok akan diakses saat coding, dan nama baru akan memudahkan
   untuk mengakses komponen tersebut. merubah nama komponen de-
   gan pilih komponen klik kanan dan pilih rename, muncul kotak isian
   dan isikan nama baru untuk komponen.rubah nama textfield menjadi
   txtNama dan tombol ok menjadi cmdNext.




                   Gambar 1.7
f. perubahan nama komponen dapat dilihat melalui navigator.




                  Gambar 1.8
g. Dengan step yang ada pi poin 2, langkah2 berikut dapat dilaksanakan.
   pindah ke tampilan list tambahkan komponen 2 ListElement dan 2
   tombol(tombol back dan tombol ok)




                        Gambar 1.9




                             11
h. rubah judul list(title pada properties) menjadi OPsi gender: ganti la-
   bel listElement1 menjadi Male, ganti label listElement2 menjadi Fe-
   male, ganti label tombol ok menjadi submit, rubah nama tombol ok
   menjadi cmdSubmit.
   Lalu pindah ke tampilan alert




                     Gambar 2.0

i. Lalu pindah ke tampilan alert




                        Gambar 2.1




                               12
j. cek navigator untuk memastikan perubahan komponen




            Gambar 2.2

k. Dengan adanya tombol di tampilan maka alur dan arah perpindahan
   tampilan dapat dibuat. Pembuatan alur dilakukan dengan memilih
   tombol dan mengarahkan ke tampilan tujuan. Setelah tampilan di-
   lengkapi dengan komponen2, berikut hasil yang terlihat pada flow
   view :




                         Gambar 2.3




                            13
l. pertama ketika pertama aplikasi dijalankan yang tampil adalah form.
   maka hubungkan started pada mobile device ke form. Dan agar dapat
   kembali ke menu aplikasi saat tombol exit pada form ditekan maka
   hubungkan tombol exit dengan mobile device.




                           Gambar 2.4


m. tombol next pada form akan menuju ke list dibuat dengan memilih
   tombol next dan mengarahkannya ke list.




                              Gambar 2.5




                            14
n. untuk kembali dari list menuju ke form pilih tombol back arahkan ke
   form. lengkapi alur dari list menuju ke alert saat tombol submit dite-
   kan dan alur dari alert menuju form saat tombol ok ditekan. kurang
   lebih hasilnya akan terlihat sebagi berikut :




                            Gambar 2.6


   setelah membuat alur jalannya midlet selanjutnya midlet di-run untuk
   memastikan alur yang berjalan sudah sesuai dengan alur yang diren-
   canakan. Merupakan bagian terakhir adalah melengkapi kode untuk
   menyempurnakan midlet.
   di bagian ini hal yang perlu ditambahkan adalah
   a) membaca data yang diinputkan ke dalam textfield
   b) membaca pilihan dari list
   c) menampilkan nama dan sapaan yang sesuai dengan gender pada
   alert
   untuk kepentingan tersebut gunakan source view :




                              15
o. poin di atas terjadi sesuai dengan eventnya masing - masing.semua
   event tersebut terjadi pada saat tombol tertentu ditekan. gunakan na-
   vigator dan pilih method(lambangnya lingkaran merah) command Ac-
   tion.




                          Gambar 2.7


p. dan otomatis kode program untuk mengatur event akan muncul even-
   seperti gambar dibawah ini




                            Gambar 2.8




                            16
q. kira2 akan terlihat seperti di atas.
   untuk poin a, tambahkan dulu variabel nama untuk menyimpan nama
   yang diinput. tempatnya saat event untuk cmdSubmit, seperti di gam-
   bar berikut:




                                 Gambar 2.9


r. untuk memperoleh data dari textfield digunakan method getString().
   data kemudian disimpan ke variabel nama.



                               Gambar 3.0

s. setelah alert ditampilkan akan ditentukan kalimat yang tampil berda-
   sarkan gender yang dipilih. untuk mengetahui gender yang dipilih in-
   dex pada list perlu dibaca dengan method getSelectedIndex() dan tu-
   lisan pada alert dapat diatur/dirubah dengan method setString(). jika
   laki - laki/ male(yang berarti index yang terpilih adalah satu) tampil-
   kan "Selamat datang MR. BLa - bLa - bLa (sesuai input nama)" pada
   alert.




                                 Gambar 3.1




                               17
t. kemungkinan lain saat yang dipilih gender wanita/ female tampilkan
   "Selamat datang MRs. BLa - bLa - bLa (sesuai input nama)" pada
   alert




                          Gambar 3.2


u. Kode sudah ditambahkan dan run kembali midletnya, kurang lebih be-
   rikut hasilnya :




                             Gambar 3.3




                            18
E. TUJUAN PROYEK AKHIR
     Tujuan proyek akhir ini adalah untuk memudahkan dalam mempelajari dan
memahami penggunaan J2ME, khususnya dalam Tugas akhir saya ini saya akan
memberikan materi networking Programing. Karena menurut saya materi ini membe-
rika pengetahuan kita tentang bagaiman mengconectsikan jaringan antara kedua mo-
bile. Pasti sangat menyenangkan untuk dipelajari. Dan padaa system ini saya mem-
beri kemudahan dan kenyamanan sehingga pengguna dapat mempelajarinya dengan
mudah.


F. KONTRIBUSI PROYEK AKHIR
     Kontribusi peoyek akhir ini adalah dapat memberikan sarana baru dalam media
pembelajaran interaktif untuk pembelajaran tentang J2ME pada mobile khususnya
untuk mahasiswa.


G. METODE PROYEK AKHIR
         Metodologi penelitian yang digunakan dalam proyek akhir ini meliputi :


1. Studi Literatur
         Pada tahap ini akan mencari tahu serta mempelajari segala bentuk literatur
yang berhubungan dengan Proyek Akhir ini, seperti halnya pembuatan animasi dan
pembuatan kuis,karena disini penulis akan memilih output-an yang atraktif, sehingga
dapat menarik minat mahasiswa serta memudahkan dalam mempelajari pemograman
J2ME.


2. Perancangan dan Pembuatan User Interface
         Dalam perancangan ini mendisain user interface untuk menarik ketertarikan
belajar mahasiswa. User Interface dalam proyek akhir ini di buat dengan mengguna-
kan Adobe Flash.




                                         19
Diagram system Visualisasi Pembelajaran J2ME menggunakan adobe flash lite seperti gambar
dibawah ini :




                                                        Gambar 2 Interface tampak dalam
    Gambar 1 Interface tampak depan




                Gambar 1.11 Visualisasi Pembelajaran J2ME menggunakan adobe flash lite




                                             20
Gambar 1.12 Visualisasi Pembelajaran J2ME menggunakan adobe flash lite




                             21
Flowchart Pembuatan Kuis :




                       Gambar 1.12 flowchart pembuatan kuis




                                    22
3. Pengujian dan Perbaikan
       Pengujian dan perbaikan dimaksudkan untuk mengetahui sejauh mana ap-
likasi yang dibuat pada proyek akhir ini dapat berfungsi sesuai dengan proses yang
diharapkan serta memperbaiki jika terjadi suatu kesalahan. Selain itu juga dilakukan
survey untuk mengetahui respon dari user terhadap modul ajar.


4. Analisa
       Melakukan analisa terhadap pembuatan soal kuis yang berisi tentang materi
organ tubuh manusia tiap babnya. Sejauh mana modul ajar ini dapat bermanfaat bagi
para pengguna dengan melihat prosentase hasil jawaban yang telah diperoleh.


5. Pembuatan Laporan
Membuat dokumentasi dari semua tahapan proses diatas berupa laporan yang berisi
tentang dasar teori, hasil proyek akhir, serta hasil analisa.




                                            23
     H. JADWAL PELAKSANAAN

No           Kegiatan                                         Bulan ke-
                                      1   2    3      4   5    6      7     8    9     10     11   12
1. Studi Literatur
2. Pereancanaan User Inter-
     face
3. Pembuatan Sistem
4. Pengujian dan Evaluasi
5. Pembuatan Buku Laporan


     J. PERKIRAAN BIAYA PROYEK AKHIR
            Berikut adalah rincian biaya proyek akhir :
            No.              Uraian            Jumlah     Harga ( Rp. )     Total ( Rp. )
             1.   Tinta                       2                    40.000            80.000
             2.   Kertas A5 HVS 80 gram       1 rim                20.000            20.000
             3    Kertas A4 HVS 80 gram       1 rim                35.000            40.000
             4.   Jilid                       5                    20.000        100.000
             5.   Internet                    6 bln             100.000          600.000
             6.   CD dokumentasi              3                     3.000            10.000
                             TOTAL PENGELUARAN                                   850.000




                                               24
K. DAFTAR PUSTAKA

“Pemanfaatan Teknologi Informasi dalam Pengembangan Media Pembelajaran”
http://ilmukomputer.org/2008/04/29/multimedia-pengajaran/. Last Access :
07/12/2009.

Wirawan Istiona,S.Kom,”Education Game with Flash”, Elex Media Komputin
do,2008.

Priyanto Hidayatullah,M.Amarullah Akbar,Zaky Rahim, “Making Educational Ani-
mation using Flash, Informatika,Bandung,2009.

“Action Script” http://livedocs.adobe.com/flash/9.0/main/ . Last Access : 15/01/2009.

http://bosojovo.blogspot.com/2010/06/seri-2-simple-sample-of-visual-midlet.html

http://stmikbandungbali.ac.id/index.php?option=com_content&view=article&id=192
:tutorial-membuat-program-java-j2me-di-hp-&catid=27:java&Itemid=87

http://www.diskusiweb.com/discussion/25495/flashlite-yuk.../p1

http://www.adobe.com/products/flash/download/device_profiles/




                                         25

								
To top