LAPORAN HASIL PRAKTIKUM MULTIMEDIA
NAMA
: RUBEN SUCIONO
NIM
: DBC 109 020
KELAS
:M-2
MODUL KE
: VI (Tombol d! I!"#$%&'
)URUSAN*PRO+RAM STUDI TEKNIK IN,ORMATIKA ,AKULTAS TEKNIK UNIVERSITAS PALAN+KA RAA 2012
Jurusan Teknik Teknik Informatika Universitas Palangka Raya 2012
I. TU)UAN DAN LANDASAN TEORI I. T//! P$%"'%/m
Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu tombol dang menggunakannya untuk interaksi.
II. L!d&! T#o$'
Flash merupakan merupakan alat bantu untuk desain dan animasi, animasi, tetapi penggunaan penggunaan aplikasi ini belum dapat maksimal jika belum menyertakan elemen interaksi. Pada Pada modul modul sebelu sebelumny mnyaa script script telah telah dibuat dibuat untuk untuk menceg mencegah ah terjadi terjadinya nya perulangan animasi. Pada modul ini akan dibuat buttons dan ActionScript sehingga pengguna dapat mengontrol aplikasinya. Cara Cara yang yang paling paling gampan gampang g untuk untuk menamb menambahk ahkan an intera interaksi ksi pada pada flash flash adalah dengan menggunakan menggunakan tombol untuk untuk menjalankan menjalankan ActionScript. ActionScript. Pada modul modul ini akan akan lebih lebih dikhus dikhususk uskan an pada pada penggu penggunaa naan n tombol tombol.. Beriku Berikutt ini meru merupa paka kan n halh halhal al yang yang perl perlu u dike diketa tahu huii dalam dalam meng mengerj erjak akan an tomb tombol ol ActionScript. !.
"ombol mbol seb sebag agai ai symb symbol ol "ombol merupakan sebagai bentuk representasi dari banyak, tetapi ada dua hal pentin penting g yang yang membed membedaka akanny nnya. a. Perbed Perbedaan aanny nyaa adalah adalah secara default tobol tidak memiliki timeline yang penuh seperti pada grafik grafik atau atau klip klip mo#ie. mo#ie. $alahan $alahan,, tombol tombol memili memiliki ki empat empat frame frame terpi terpisah sah yang yang akan akan menem menempa patk tkan an pada pada kead keadaa aan%s n%sta tates tes berb berbag agai ai macam tombol &penampilan default dari tombol, pada saat mouse melewati tombol dan di klik' Perb Perbed edaan aan kedu keduaa adal adalah ah tomb tombol ol secar secaraa otom otomati atiss meng mengub ubah ah penampilannya pada saat berinteraksi dengan pengguna sehingga statenya berubah juga. (alaupun tombol harus deprogram dengan ActionScript untuk memberikan efek pada mo#ie, state tombol dan cursor feedback di atur untuk pengguna. Jurusan Teknik Teknik Informatika Universitas Palangka Raya 2012
)etika melihat didalam symbol tombol, timeline muncul secara unik karena terdiri dari empat frames yang telah ditentukan. )etiga frame yang pertama adalah state tomnol. State *p mempresentasikan penampilan tombol ketika kursor mouse tidak melewati tombol, state +#er ditampilkan ketika mouse berada pda tombol, dan state. own ditampilkan ketika pengguna mengklik pada tombol. State keempat merupakan state pada saat ditekan.
-. a#igasi dan Script Setelah dapat membuat tombol maka langkah berikutnya adalah memberikan script pada tombol yang telah dibuat. Flash akan menangani #isual feedback, termasuk kursor dan perubahan state, tetapi tombol belum operasional. *ntuk membuatnya menjadi operasional maka dapat dibuat dengan menggunakan bantuan script. a#igasi dilakukan menggunakan script. )emampuan dasar untuk menghubungkan asatu halaman dengan halaman lain dilakukan dengan menggunakan script. Pada aplikasi Flash, kemampuan unser untuk mena#igasikan sekumpulan frame sangatlah mendasar dan penting. "anpa kemampuan untuk pergi ke frame tertentu pembuatan aplikasi hanya menjadi satu jalur saja. engan adanya na#igasi maka dapat menuju ke bagian pada suatu mo#ie sehingga dapat menampilkan berbagai macam objek yang berbeda pada tipa na#igasi. "able dibawah ini merupakan scriptscript dasar yang diperlukan untuk mengerjakan modul ini.
Action
ActionScript notation
Arfuments
gotoAndStop
gotoAndStop&arguments'
Scene
ame&Frame
/abel,
umber, or 01pression'
Jurusan Teknik Informatika Universitas Palangka Raya 2012
gotoAndPlay
gotoAndPlay&arguments'
Scene
ame&Frame
/abel,
umber, or 01pression' ne1tFrame
ne1tFrame&'2
one
pre#Frame
pre#Frame&'2
one
ne1tScene
ne1tScene&'2
one
pre#Scene
pre#Scene&'2
one
play
play&'2
one
Stop
stop&'2
one
stopAllSound
stopAllSounds&'2
one
get*3/
get*3/&arguments'2
url, target frame or window, method for from submission
Jurusan Teknik Informatika Universitas Palangka Raya 2012
BAB II LAN+KAH KER)A Berikut ini merupakan langkah kerja praktikum $ultimedia modul 45 6
1. 2.
Buatlah dokumen flash baru untuk membuat tombol. Buatlah kotak untuk membuat tombol dengan menggunakan shape dan resi7e menjadi !88 1 98. /alu buat teks dengan kata "ombol dan letakkan pada bagian dalam kotak, lalu pilih semua objek yang ada pada stage dan pilih menu Mod' lalu o!3#$" "o &mbol dan pilih tipe button. "es mo#ie yang
3.
sudah ada. Berikan nama '!&"!# !m#nya dengan Tombol Pilihlah tombol kemudian framenya di tiap state dengan mengubah warna teks dan huruf. :alankan mo#ie dengan menekan C"$l 4 E!"#$.
4.
"ambahkan satu layer untuk menampilkan objek pda saat tombol ditekan buatlah objek persegi panjang pada layer tersebut pada frame pertama objek masih tidak ada. Frame kedua memuat objek tersebut. Pada bagian layer tombol, frame pertama di isi perintah 6 Tombol.onRelease = Function { gotoAndStop(2); }; stop();
Frame kedua diisi perintah 6 Tombol.onRelease = Function { gotoAndStop(1); }; 5. :alankan mo#ie dengan menekan C"$l 4 E!"#$ dan cobalah menekan
tombol. T/6& : 1. Buatlah ; tombol yang masingmasing digunakan untuk menampilkan
objek yaitu lingkaran, segi empat, dan segi tiga. Beri Animasi pada tiga objek tersebut pada saat akan ditampilkan dan berikan keterangan Jurusan Teknik Informatika Universitas Palangka Raya 2012
mengenai objek tersebut& misalnya6 nama objek, deskripsi objek, rumus mencari keliling dan luas'. 2. Buatlah profil diri anda yang terdiri dari halaman pembuka, profil, galeri foto, dan halaman penutup. "ombol minimal yang harus ada adalah tombol profil, galeri, dan replay. Berikan animasi pada semua halaman dengan kriteria minimal seperti yang ada pada modul sebelumnya. Berikut ini merupakan contoh informasi minimal yang harus dibuat tetapi untuk objek yang dibuat&misalnya tombol' tidak harus seperti layout ini.
Jurusan Teknik Informatika Universitas Palangka Raya 2012
BAB III PEMBAHASAN PRAKTIKUM P0$BA
dan resi7e menjadi & ( ' !88 1 & < ' 98. /alu buat teks dengan kata "ombol dan letakkan pada bagian dalam kotak, lalu pilih semua objek
yang ada pada stage dan pilih menu Mod' lalu o!3#$" "o &mbol dan pilih tipe button. "es mo#ie yang sudah ada. Berikan nama '!&"!# !m#nya dengan Tombol 7. Selanjutnya saya pilih tombol setelah itu klik framenya di tiap state
dengan mengubah warna teks dan huruf. Setelah di edit lalu dijalankan mo#ie dengan menekan C"$l 4 E!"#$.
8. Setelah itu saya tambahkan satu layer untuk menampilkan objek pda saat
tombol ditekan buatlah objek persegi panjang pada layer tersebut pada frame pertama objek masih tidak ada. Frame kedua memuat objek tersebut. Pada bagian layer tombol, frame pertama di isi perintah 6 on (release) { gotoAndStop(2); } Jurusan Teknik Informatika Universitas Palangka Raya 2012
Frame kedua diisi perintah 6 on (release) { gotoAndStop(1); }
Pada kedua koding diatas merupakan koding yang dapat dijalankan, tapi koding yang ada pada langkah kerja saya ganti seperti koding di atas. 5. Selanjutnya saya jalankan mo#ie atau objek yang sudah saya buat dengan
menekan C"$l 4 E!"#$ dan cobalah menekan tombol maka tampilannya akan muncul seperti ini 6
"ugas Praktikum6 1. setelah itu saya buat ; tombol yang masingmasing digunakan untuk
menampilkan objek yaitu lingkaran, segi empat, dan segi tiga. Beri Animasi pada tiga objek tersebut pada saat akan ditampilkan dan berikan keterangan mengenai objek tersebut& misalnya6 nama objek, deskripsi objek, rumus mencari keliling dan luas'. Pertama saya buat 9 layer yaitu untuk action,objek,tombol dan te1t berikut gambarnya6 6
Jurusan Teknik Informatika Universitas Palangka Raya 2012
setelah itu
gunakan te1t tool
lalu tuliskan =Animasi menampilkan
objek dan teks menggunakan tombol dan interaksi buat objek lingkaran menggunakan rectangle dengan memilih objek o#al setelah itu gambarkan objek yang sudah kita pilih tadi pada lembar kerja. )emudian buat lagi objek segi empat menggunakan rectangle dengan memilih lalu gambarkan pada lembar kerja kita, setelah itu buat objek segitiga menggunakan line
tool
kemudian kita gambarkan lagi di lembar kerja kita, setelah itu
pada layer kita pilih frame pertama klik kanan insert keyframes pada objek lingkaran setelah itu klik kanan. Pada objek lingkaran yang s udah kita buat pilih con#ert to symbol lalu tuliskan nama "ombol ! pilih button setelah itu klik +).
Selanjutnya masih pada layer pilih frame kedua klik kanan insert keyframes. pada objek persegi pilih con#ert to symbol lalu tuliskan nama "ombol - pilih button setelah itu klik +), kemudian pada layer tadi pilih frame ke tiga klik kanan insert keyframes lalu klik kanan pada objek segitiga yang sudah kita buat tadi pilih con#ert to symbol tuliskan "ombol ; pilih button lalu klik +). Setelah semua tombol kita buat selanjutnya yaitu kita buat sebuah objek lagi dimna itu nanti akan berfungsi sebagai menampilkan pada saat button kita klik nantinya, langkahnya yaitu sebagai berikut buat layer baru selanjutnya pilh pada frame kedua klik kanan insert keyframes Pada gambar diatas pertama kita delete dulu objek lalu kita buat "ombol 9 dan > dengan memiliki nama teks Persegi dan Segiempat dengan menggunakan con#ert to symbol untuk membuat button kemudian akan muncul gambar seperti ini
Setelah itu kita lanjutkan lagi pembuatan tombol pada frame yang ketiga pada layer - dimana frame pada layer dua ini memiliki dua tombol yaitu Jurusan Teknik Informatika Universitas Palangka Raya 2012
tombol ? dan @ dengan memiliki nama teks /ingkaran dan Segitiga dengan menggunakan con#ert to symbol untuk membuat button kemudian akan muncul gambar seperti ini
Setelah itu kita lanjutkan lagi pembuatan tombol pada frame yang ketiga pada layer - dimana frame pada layer dua ini memiliki dua tombol yaitu tombol dan dengan memiliki nama teks /ingkaran dan Persegi dengan menggunakan con#ert to symbol untuk membuat button kemudian akan muncul gambar seperti ini
Setelah semua button kita buat pada objek selanjutnya pada setiap button kita berikan action script pertama pada button lingkaran "ombol ! kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Setelah itu berikan action script kedua pada button Persegi. "ombol - kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Setelah itu berikan action script ketiga pada button Segitiga. "ombol ; kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Setelah itu berikan action script ke empat pada button Persegi. "ombol 9 kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Jurusan Teknik Informatika Universitas Palangka Raya 2012
Setelah itu berikan action script ke lima pada button Segiempat. "ombol > kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Setelah itu berikan action script ke enam pada button /ingkaran. "ombol ? kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Setelah itu berikan action script ke tujuh pada button Segitiga. "ombol @ kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Setelah itu berikan action script ke delapan pada button /ingkaran. "ombol kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Setelah itu berikan action script ke sembilan pada button Persegi. "ombol kita berikan action script dengan menekan F maka akan tampil seperti gambar dibawah ini
Setelah semua button kita berikan action setelah itu kita masukan te1t pada setiap button yang kita buat yaitu te1t %#l'l'!6: ' ; d d! L/& ' ; ( $ 2 dan objek untuk lingkaran berikut tampilannya
Jurusan Teknik Informatika Universitas Palangka Raya 2012
setelah itu kita masukan te1t %#l'l'!6: 8 ; & d! l/& & ; & pada setiap button yang kita buat pertama yaitu te1t dan objek untuk persegi berikut tampilannya
setelah itu kita masukan te1t %#l'l'!6 : & 4 & 4 & d! l/& < (l& ; "'!66' pada setiap button yang kita buat pertama yaitu te1t dan objek untuk segitiga berikut tampilannya
Setelah itu kita buat layer baru lagi untuk untuk membatasi action setiap button yang kita buat berikut gambarnya.
Pada layer yang kita buat klik pada frame pertama lalu tekan F maka akan muncul action frame dimana action frame saya isikan perintah stop&'2 berikut tampilan gambarnya
Selanjutnya yaitu saya jalankan dengan menekan Ctrl 0nter maka tampilan sebagai berikut 6
Selanjutnya klik pada tombol lingkaran maka akan muncul seperti gambar dibawah ini Jurusan Teknik Informatika Universitas Palangka Raya 2012
Selanjutnya klik pada tombol persegi maka akan muncul seperti gambar dibawah ini
Selanjutnya klik pada tombol segitiga maka akan muncul seperti gambar dibawah ini
Pada semua button yang saya buat semua dapat berfungsi yang saya tampilkan hanya ; button dimana dalam ! button bisa menampilkan objek yang saya buat tadi. 2. Buatlah profil diri anda yang terdiri dari halaman pembuka, profil, galeri
foto, dan halaman penutup. "ombol minimal yang harus ada adalah tombol profil, galeri, dan replay. Berikan animasi pada semua halaman dengan kriteria minimal seperti yang ada pada modul sebelumnya. Berikut ini merupakan contoh informasi minimal yang harus dibuat tetapi untuk objek yang dibuat&misalnya tombol' tidak harus seperti layout ini. Pada tugas dua ini yaitu membuat profil diri saya sendiri dengan menggunakan tombol dan te1t, pertama saya akan buat dua layer dulu dimana layer pertama itu kita buat dulu - buah persegi dimana satu persegi berfungsi sebagai button, cara membuatnya yaitu klik kanan pada layer pertama setelah itu klik kanan pilih insert keyframes lalu buat satu persegi dengan memilih rectangle gambarkan pada lembar kerja kita lalu pilih te1t tool tuliskan kata masuk pada persegi yang kita buat, setelah itu klik Jurusan Teknik Informatika Universitas Palangka Raya 2012
kanan pada persegi yang kita buat tadi lalu pilih con#ert to symbol ketik dengan nama $asuk pilih button lalu +). Setelah itu gambarkan persegi, selanjutnya pilih te1t tool tuliskan pada persegi yang kita buat dengan nama selamat datang.
)emudian pilih frame kedua insert keyframe buat 9 persegi dengan nama Profil, Dalery, 3eplay, dan )eluar setelah itu semua persegi yang kita buat tadi kita buat kan tombol button dimana pada setiap persegi saya berikan nama tombol ! pada profil, tombol - pada gallery, tombol ; pada replay dan terak tombol 9 pada keluar. )emudia setelah semua tombol saya buat lalu saya berikan te1t tool dimana saya menggunakan te1t tool ini untuk menulis data diri saya. Berikut tampilannya6
Setelah itu saya akan membuat 9 tombol lagi yaitu & E, , G, GE ' dimana cara pembuatannya sama seperti yang saya bahas diatas tadi dimana pada setiap tombol saya berikan nama yaitu tombol > pada & E ', tombol ? pada & ', tombol @ pada & G ', dan terakhir tombol pada & GE '. Selanjutnya yaitu supaya semua tombol bisa berfungsi saya berikan action script pada tombol ! sampai dimana fungsi dari action script ini tombol dapat
Jurusan Teknik Informatika Universitas Palangka Raya 2012
memiliki fungsi masingmasing berikut gambar dari masingmasing tombol dan action scriptnya 6 "ombol ! 6
"ombol - 6
"ombol ; 6
"ombol 9 6
"ombol > 6
Jurusan Teknik Informatika Universitas Palangka Raya 2012
"ombol ? 6
"ombol @ 6
"ombol
"ombol $asuk
Setelah semua tombol saya berikan action script, selanjutnya saya akan membuat layer kedua untuk action script supaya semua tombol yang saya buat bisa tampil secara berurutan berikut tampilannya dan action scriptnya Jurusan Teknik Informatika Universitas Palangka Raya 2012
)emudian saya buat lagi layer baru untuk menampilkan foto yang ada pada gallery dimana foto yang saya masukan sebanyak ? buah termasuk foto profil saya, caranya yaitu klik pada layer yang baru dibuat tadi setelah itu klik kanan pilih insert keyframes, kemudian klik pada file pilih import G import library lalu pilih gambar yang kita mau masukan pada flash setelah itu tekan open maka akan muncul pada from library berikut tampilannya6
Jurusan Teknik Informatika Universitas Palangka Raya 2012
Setelah semua tombol, teks, dan gambar saya masukan%buat kembali lagi pada tombol keluar dimana tombol keluar ini tidak bisa dijalankan apabila kita menekan Ctrl enter cara nya supaya bisa dijalankan yaitu klik kanan pada file pilih publish setting lalu pilih window project e1e lalu tekan ok, selanjutnya yaitu klik kanan lagi pada file pilih publish lalu buka file yang baru kita publish tadi, tempat kita menyimpan file flash yang sudah dibuat dan format file yang baru dipublish tadi menjadi .e1e berikut tampilannya6
Jurusan Teknik Informatika Universitas Palangka Raya 2012
an hasil dari file yang sudah menjadi format .e1e 6
Jurusan Teknik Informatika Universitas Palangka Raya 2012
IV. KESIMPULAN
ari praktikum modul 45 ini dapat disimpulkan 6 !. apat mengenal area kerja tombol dan interaksi menggunakan Adobe flash CS ;. -. apat membuat sebuah button, action script. ;. apat menerapkan penggunaan action script 9. apat menerapkan tool dan iconicon pada adobe flash CS ; dalam pembuatan button dan lainlain.
Jurusan Teknik Informatika Universitas Palangka Raya 2012
V. DA,TAR PUSTAKA
Moul praktikum! Multimeia "uku Multimeia #cara mua$ %ela&ar Ao%e 'las$ (S)* +oogle,com #cara mua$ mem%uat %utton i Ao%e 'las$ (S)* -ikipeia,com
Jurusan Teknik Informatika Universitas Palangka Raya 2012
BAB VI LAMPIRAN
Sudah dijalankan Pada program flash CS; berikut tampilannya 6
Pada saat kita klik pada tombol= maka akan melanjutkan kefoto berikutnya. an tampilannya 6
Jurusan Teknik Informatika Universitas Palangka Raya 2012
Pada saat kita menekan tombol replay maka akan kembali ke halaman awal lagi berikut tampilannya 6
Pada saat kita klik pada tombol > maka akan kembali kehalaman profil berikut tampilannya6
Jurusan Teknik Informatika Universitas Palangka Raya 2012
Pada saat kita klik pada tombol =? maka akan melanjutkan langsung ke foto yang paling terakhir berikut tampilannya 6
Jurusan Teknik Informatika Universitas Palangka Raya 2012
Selanjutnya saya akan menampilkan fungsi dari tombol keluar pertama buka file .e1e yang sudah kita buat tadi dan disimpan di local disk setelah itu saya jalankan berikut tampilannya 6
"ampilan setelah tombol keluar di tekan
Jurusan Teknik Informatika Universitas Palangka Raya 2012