laporan hasil praktikum bab vi.docx
TRANSCRIPT
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
1/25
LAPORAN AKHIR PRAKTIKUM
MULTIMEDIA
NAMA : HANNA DARMAWAN
NIM : DBC 110 025
KELAS : Kamis, 15.00 WIB
MODUL : VI (Tombol dan Animasi Flash)
JURUSAN/PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS PALANGKA RAYA
2013
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
2/25
BAB I
TUJUAN DAN LANDASAN TEORI
A.Tujuan
Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu membuat
tombol dan menggunakannya untuk interaksi.
B.Landasan Teori
Flash merupakan alat bantu untuk desain dan animasi. Tetapi penggunaan
aplikasi ini belum dapat maksimal jika belum menyertakan elemen interaksi. Pada
modul sebelumnya script telah dibuat untuk mencegah terjadinya perulangan
animasi. Pada modul ini akan dibuat buttons dan ActionScript sehingga pengguna
dapat mengontrol aplikasinya.
Cara yang paling gampang untuk menambahkan interaksi pada Flash
adalah dengan menggunakan tombol untuk menjalankan ActionScript. Pada
modul ini akan lebih dikhususkan pada penggunaan tombol. Berikut ini
merupakan hal-hal yang perlu diketahui dalam mengerjakan tombol danActionScript.
1. Tombol sebagai Symbol
Tombol merupakan bentuk representasi dari banyak, tetapi ada dua hal
penting yang membedakannya. Perbedaannya adalah secara default tombol tidak
memiliki timeline yang penuh pada grafik atau klip movie. Malahan, tombol
memiliki empat frame terpisah yang akan menempatkan pada keadanan/statesberbagai macam tombol (penampilan default dari tombol, pada saat mouse
melewati tombol dan di klik).
Perbedaan kedua adalah tombol secara otomatis mengubah penampilannya
pada saat berinteraksi dengan pengguna sehingga state-nya berubah juga.
Walaupun tombol harus deprogram dengan ActionScript untuk memberikan effect
pada movie,statetombol dan cursor feedback di atur untuk pengguna.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
3/25
Ketika melihat didalam symbol tombol, timeline muncul secara unik
karena terdiri dari empat frame yang telah ditentukan. Ketiga frame yang pertama
adalahstatetombol. State Up merepresentasikan penampilan tombol ketika cursor
mouse tidak melewati tombol, state Over ditampilkan ketika mouse berada pada
tombol, dan state Down ditampilkan ketika pengguna mengklik pada tombol.
State keempat merupakan state pada saat ditekan.
Mengenal Simbol dan Library
Simbol adalah objek flashSetiap symbol yang kita buat akan masuk ke
dalam library. Untuk mengubah sebuah objek menjadi symbol dapat kita lakukan
dengan menyeleksi objek tersebut menggunakan Selection toolkemudian masuk
menu Insert pilih Convert to Symbol atau dengan menekan tombol F8 pada
Keyboard, maka akan muncul tampilan dengan pilihan sebagai berikut :
1. Name untuk member nama symbol tersebut yang nantinya akan dicantumkan
dalam Library.
2. Typeadalah sifat atau fungsi dari symbol
3. Movie Clip adalah jenis symbol yang diperlukan untuk membuat objek
animasi yang memiliki multiframe sendiri sebagai Timelinenya. Jadi symbol
yang dihasilkannya bias dimainkan secara terpisah dari movie utama
4. Grafik adalah jenis symbol yang digunakan untuk membuat objek statis.
5. Button adalah jenis symbol yang untuk membuat tombol interaktif yang
berfungsi untuk merespon mouse ketika diklik, melewati objek atau yang
lainnya.
6. Registrationberfungsi untuk menentukan pusat atau titik putar objek.
Library digunakan untuk menampilkan objek-objek yang kita import dari
luar lingkungan Flash 8 maupun objek-objek bawaan dari Flash 8 itupun sendiri.
Untuk menggunakannya Anda dapat menekan tombol F11 pada keyboard atau
dari menu Window pilih Library. Selain library terdapat juga common library
yang merupakan library bawaan flash yang di dalamnya terdapat beberapa tombol,
movie maupun suara yang dapat kita gunakan.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
4/25
2. Navigasi dan Script
Setelah dapat membuat tombol maka langkah berikutnya adalah
memberikan script pada tombol yang telah dibuat. Flash akan menangani visual
feedback, termasuk cursor dan perubahan state, tetapi tombol belum operasional.
Untuk membuatnya menjadi operasional maka dapat dibuat dengan menggunakan
bantuan script.
Navigasi dilakukan dengan menggunakan script. Kemampuan dasar untuk
menghubungkan satu halaman lain dilakukan dengan menggunakan script. Pada
aplikasi Flash, kemampuan user untuk menavigasikan sekumpulan frame
sangatlah mendasar dan penting. Tanpa kemampuan untuk pergi ke frame tertentu
pembuatan aplikasi hanyalah menjadi satu alur saja. Dengan adanya navigasi
maka dapat menuju ke bagian pada suatu movie sehingga dapat menampilkan
berbagai macam objek yang berbeda pada tiap navigasi. Tabel dibawah ini
merupakan script-script dasar yang diperlukan untuk mengerjakan modul ini.
Action ActionScript notation Ar guments
gotoAndStop gotoAndStop(arguments); Scene Name (Frame Label,
Number, or Expression)
gotoAndPlay gotoAndPlay(arguments); Scene Name (Frame Label,
Number, or Expression)
nextFrame nextFrame(); None
prevFrame prevFrame(); None
nextScene nextScene(); None
prevScene prevScene(); None
paly play(); None
stop stop(); None
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
5/25
stopAllSounds stopAllSounds(); None
getURL getURL(arguments); url, target frame or window,
method for from submission
ActionScript pada frame
ActionScript pada frame adalah Actionscript yang diletakan pada frame, atau juga
sering disebut FrameScript. FrameScript ini hanya bisa dilakukan pada keyframe
atau blankkeyframe.untuk melihat frame yang telah diberikan script terdapat tanda
berupahurup a kecil yang menandakan keberadaan sebuah Script.
ActionScript pada MovieClip
ActionScript yang diletakan pada MovieClip sering disebut MovieScript. yang
harus diingat adalah untuk membuat movieScript tentunya harus ada MovieClip
tempat kita meletakan ActionScript tersebut. MovieClip memiliki bahasa (syntax)
sebagai berikut.
onClipEvent (event) {perintah
}
Arti syntax movieScript diatas adalah :
- Kata onClipEvent menunjukan bahwa perintah ini ditujukan untuk
MovieCliptempat diletakannya Script.
- kata event menunjukan event yang terjadi pada movieClip
tersebut.sebenarnya Event di MovieClip ada 9 diantaranya :load,
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
6/25
enterFrame, unload, Mouse up, Mouse Down,Key down, Key up, dan
data.Namun diantara semua itu yang sering digunakan yaitu load dan enter
Frame.
-
Kata perintah menunjukan perintah yang dapat diberikan pada
MovieClip.
ActionScript pada Button
Hal yang perlu diingat yaitu ActionScript pada button tentunya harus ada Button
tempat meletakanActionScript tersebut.Secara umum syntax yang digunakan
dalam penulisan ActionScript pada Button hampir sama dengan penulisan
MovieScript.Perhatikan syntax berikut ini ;
on (event) {
perintah
}
Arti syntax movieScript diatas adalah :
-
Kata on menunjukan bahwa perintah ini ditujukan untuk MovieClip
tempat diletakannya scriptdan ini merupakan syarat utama untuk Script
yang digunakan pada Button.
-
Kata event menunjukan event yang terjadi pada Button tersebut. ada 7
event yang terdapat pada buttonyaitu press, release, rollOver, rollOut,
dragOver, dragOut, dan keypress. Meski demikian hanya dua event yang
sering digunakan yaitu pressdan release.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
7/25
BAB II
LANGKAH KERJA
I.
Langkah Kerja
1. Membuka flash dan memuat dokumen dlash baru yang digunakan untuk
animasi yang akan dibuat
2. Membuat animasi sesuai yang ada di modul VI tentang Tombol dan Interaksi
Flash, mengikuti tahap dari awal sampe akhir.
3. Setelah melakukan pembuatan Interaksi mengikuti langkah kerja, maka kita
akan mengerjakan tugas sesuai yang diminta pada modul VI.
4. Assiten praktikum akan memeriksa flash dan menilai hasil praktikum.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
8/25
BAB III
PEMBAHASAN
Pada modul VI (Tombol dan Animasi) ini akan dibuat 4 tombol, yaitu
tombol Profil, Galeri Foto, Replay, dan Exit. Animasi ini memiliki dua halaman
yaitu halaman profil dan galeri foto dimana tiap halaman akan di inputkan foto
dan keterangan di tiap halamannya. Adapun pembahasan dari tugas ini adalah
sebagai berikut :
1.
PembuatanProjectBaru
Gambar 3.1ProjectBaru
Setelah kita memilih dokumen flash, kemudian kita akan melakukan
pengaturan padaframeratemenjadi 8 fbs. Seperti gambar dibawah ini:
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
9/25
Penjelasan :
Gambar diatas merupakan persiapan dalam pembuatan animasi dengan
pengaturanframe rate menjadi 8 fbs.
2. Membuat Tulisan Pembuka
Berikut merupakan pembuatan tulisan pembukaan, yaitu Selamat Datang
yang kemudian diberikan effectmasking.
Penjelasan :
Gambar diatas merupakan tulisan yang buat dengan menggunakan Text Tools,
dengan nama pada layer adalah selamat datang.
Selamat atang
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
10/25
3. Pemberian Effect Pada Tulisan/Text
EffectAlpha
Penjelasan :
Gambar diatas merupakan langkah dalam memberikan effectpada tulisan Selamat
Datang, yaitu effect Alpha kemudian nilainya di atur menjadi 8%.
EffectMasking
Selamat atang
Selamat atang
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
11/25
Penjelasan :
Gambar diatas merupakan langkah pemberian effect maskingpada tulisan dengan
cara membuat layerbaru > klik kanan > pilih mask, kemudian masukan 1 buah
lingkaran di letakkan didepan dan diakhir tulisan.
Pada langkah pemberian effect masking diatas, maka proses pembuatan tulisan
pembuka dengan kalimat Selamat Datang telah selesai, dan dilteruskan pada
langkah selajutnya.
4.
Membuat Tombol
TombolProfile
Penjelasan :
Gambar diatas merupakan langkah pertama membuat tombol profiledengan cara
insert > new Symbol atau dengan menekan tombol keyboard, yaitu CTRL+F8,
kemudian muncul 3 pilihan untuk tipesymbol, yaitu button, movieclipdangrapic,
dan dari ketiga pilihan tersebut maka pilih button.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
12/25
Penjelasan :
Gambar diatas merupakan langkah keduadalam membuat tombol profile. Dapat
dilihat pada bagian atas projek terdapat pilihan UP dan Over yang digunakan
untuk mengubah warna kotak ketika akan ditekan. Kemudian masukan text
dengan kalimat Profile pada Kotak untuk menandakan bahwa kotak tersebut
adalah tombolprofile.
Profile
Profile
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
13/25
Penjelasan :
Gambar diatas adalah hasil akhir dari pembuatan tombol profile dengan
menggunakan scene, sehingga tombol akan muncul pada library, kemudian didragke layerseperti gambar diatas. Fungsi dari tombol profiledigunakan untuk
menampilkan data diri seperti nama, nim dan lain-lain.
Tombol Galeri
Penjelasan :
Gambar diatas merupakan langkah pertama dalam membuat tombol Galeri dimana
langkah-langkahnya sama seperti membuat tombolprofile.
Galeri
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
14/25
Penjelasan :
Gambar diatas merupakan langkah kedua dalam pembuatan tombol Galeri yang
diberikan effect untuk mengubah warna kotak ketika akan ditekan denganbeberapa pilihan, yaitu UP dan Over. Kemudian masukan text dengan kalimat
Galeri pada Kotak dengan menggunakan Text Tools untuk menandakan bahwa
tombol tersebut adalah tombol Galeri.
Penjelasan :
Gambar diatas adalah hasil akhir dari pembuatan tombol Galeri dengan
menggunakan scene, sehingga tombol akan muncul pada library, kemudian di
drag ke layer seperti gambar diatas. Fungsi dari tombol Galeri untuk
menampilkan sekumpulan gambar-gambar atau foto-foto.
TombolReplay
ProfileGaleri
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
15/25
Penjelasan :
Gambar diatas merupakan langkah pertama dalam membuat tombol Replay
dimana langkah-langkahnya sama seperti membuat tombolprofile dan Galeri.
Penjelasan :
Gambar diatas merupakan langkah keduadalam pembuatan tombol Replayyang
diberikan effect untuk mengubah warna kotak ketika akan ditekan dengan
beberapa pilihan, yaitu UP dan Over. Kemudian masukan text dengan kalimat
Replay pada Kotak dengan menggunakan Text Tools untuk menandakan bahwa
tombol tersebut adalah tombolReplay.
Replay
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
16/25
Penjelasan :
Gambar diatas adalah hasil akhir dari pembuatan tombol Replay dengan
menggunakan scene, sehingga tombol akan muncul pada library, kemudian di
drag ke layer seperti gambar diatas. Fungsi dari tombol Replay untuk
mengembalikan animasi tampilan awal pembuka.
TombolExit
Penjelasan :
Gambar diatas merupakan langkah pertama dalam membuat tombol Exit dimana
langkah-langkahnya sama seperti membuat beberapa tombol sebelumnya.
ProfileGaleri
Replay
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
17/25
Penjelasan :
Gambar diatas merupakan langkah kedua dalam pembuatan tombol Exit yang
diberikan effect untuk mengubah warna kotak ketika akan ditekan dengan
beberapa pilihan, yaitu UP dan Over. Kemudian masukan text dengan kalimat
Exit pada Kotak dengan menggunakan Text Tools untuk menandakan bahwa
tombol tersebut adalah tombolExit.
Penjelasan :
Gambar diatas adalah hasil akhir dari pembuatan tombol Exit dengan
menggunakan scene, sehingga tombol akan muncul pada library, kemudian di
dragke layerseperti gambar diatas. Fungsi dari tombol Exituntuk menampilkan
tampilan akhir dari animasi.
Replay
ProfileGaleri
ReplayExit
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
18/25
5. Membuat Tampilan
Setelah selesai membuat tombol-tombol pada langkah diatas, maka langkah
selanjutnya adalah membuat tampilan dalam masing-masing tombol.
Background Profile dan Galeri
Penjelasan :
Gambar diatas merupakan tampilan background dari tampilan tombolprofile, dan
Galeri yang telah dibuat tadi.
Isi Dari TampilanProfile, Galeri, danExit
Penjelasan :
Gambar diatas merupakan tampilan dari Profile dengan meng-insert-kan
keyframe, kemudian memberikan keterangan data diri dan foto.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
19/25
Penjelasan :
Gambar diatas merupakan tampilan dari Profile dengan meng-insert-kan
keyframe, kemudian memberikan beberapa foto untuk mengisi tampilan dari
Galeri.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
20/25
Penjelasan :
Gambar diatas merupakan tampilan dari Exit dengan meng-insert-kan keyframe,
kemudian memberikan text dengan kalimat Sekian Dan Terima Kasih untuk
menandakan akhir dari animasi.
6.
MemberiAction Script
Setelah selesai membuat tampilan pada langkah diatas, maka langkah
selanjutnya adalah actionscript untuk merelasikan atau melakukanpage linkantar
tombol 1 dengan tombol yang lainnya. Pada actionscriptyang digunakan adalah
on(release),gotoplay,and gotostop. Berikut pemberian script pada setiap tombol :
Profile
Untuk memasukkan actionscript bisa dilakukan dengan menekan tombol pada
keyboard, yaitu F9. Untuk memasukkan actionscript maka tombol harus aktif
terlebih dahulu dengan cara memilih tombol. Setelah tombol aktif, maka
dilakukan penulisanscript, yaitu :
scripton(Release) {
_root.gotoAndStop(36)} on
Penjelasan :
Script diatas digunakan untuk mengaktifkan tombol ketika diklik, lalu
gotoAndStop digunakan untuk pergi ke frame selanjutnya dan berhenti,
sedangkan (36) adalah urutan frame ke sekian pada profile, berikut penulisan
script-nya:
.
Galeri
Untuk memasukkan actionscript bisa dilakukan dengan menekan tombol pada
keyboard, yaitu F9. Untuk memasukkan actionscript maka tombol harus aktif
terlebih dahulu dengan cara memilih tombol. Setelah tombol aktif, maka
dilakukan penulisanscript, yaitu :
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
21/25
scripton(Release) {
_root.gotoAndStop(36)} on
Penjelasan:
Script diatas digunakan untuk mengaktifkan tombol ketika diklik, lalu
gotoAndStop digunakan untuk pergi ke frame selanjutnya dan berhenti,
sedangkan (37) adalah urutan frame ke sekian pada Galeri, berikut penulisan
script-nya:
Replay
Untuk memasukkan actionscript bisa dilakukan dengan menekan tombol pada
keyboard, yaitu F9. Untuk memasukkan actionscript maka tombol harus aktif
terlebih dahulu dengan cara memilih tombol. Setelah tombol aktif, maka
dilakukan penulisanscript, yaitu :
scripton(Release) {
_root.gotoAndPlay(1)} on
Penjelasan:
Script diatas digunakan untuk mengaktifkan tombol ketika diklik, lalu
gotoAndPlaydigunakan untuk pergi ke frame selanjutnya dan memulai kembali
dari awal, sedangkan (1) adalah urutan frame ke sekian pada Replay, berikutpenulisanscript-nya:
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
22/25
Exit
Untuk memasukkan actionscript bisa dilakukan dengan menekan tombol pada
keyboard, yaitu F9. Untuk memasukkan actionscript maka tombol harus aktif
terlebih dahulu dengan cara memilih tombol. Setelah tombol aktif, maka
dilakukan penulisanscript, yaitu :
scripton(Release) {
_root.gotoAndStop(38)} on
Penjelasan:
Script diatas digunakan untuk mengaktifkan tombol ketika diklik, lalu
gotoAndStop digunakan untuk pergi ke frame selanjutnya dan berhenti,
sedangkan (38)adalah urutanframeke sekian padaExit, berikut penulisanscript-
nya:
Setelah pemberian Action Script yang dilakukan diatas, maka dilakukan testing
dengan menekan Ctrl + Enterapakahsripct yang dituliskan tadi berjalan dengan
benar.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
23/25
BAB IV
KESIMPULAN
Dari hasil pembuatan projek praktikum modul VI diatas, maka dapat disimpulkan
sebagai berikut :
Flash dimulai sebagai alat bantu untuk desain dan animasi, tetapi penggunaan
aplikasi ini belum dapat maksimal jika belum menyertakan elemen interaksi.
Cara yang paling gampang untuk menambahkan interaksi pada Flash adalah
dengan menggunakan tombol untuk menjalankan ActionScript.
Brightnessuntuk mengubah kecerahan warna Tintmengubah warna
Alphamembuat transparan
Advancedkombinasi dari ketiga pilihan.
Shared library adalah library yang dapat digunakan bersama-sama oleh movie.
Common Libraries adalah Library yang sudah ada dan disediakan oleh flash
untuk diguanakan, sehingga tidak perlu membuatnya lagi
Movie Clipsymbol yang menggambarkan animasi objek Buttonsymbol yang menggambarkan button yang digunakan untuk interaksi
dengan sesuatu.
Graphicsymbol yang menggambarkan object lain.
-
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
24/25
BAB V
DAFTAR PUSTAKA
Tim Dosen Multimedia, Modul Praktikum Multimedia, Teknik Informatika
Universitas Palangka Raya, 2013.
cbs-bogor.net/ebooklain/.../Tutorial_adobe_flashcs5_bag-1.pdf (diakses tgl 24
Mei 2013)
http://sakhsondotcom.files.wordpress.com/2012/05/materi-5-dasar-action-
script2.pdf (diakses tgl 24 Mei 2013)
http://belajar-flash.blogspot.com/
http://sakhsondotcom.files.wordpress.com/2012/05/materi-5-dasar-action-script2.pdfhttp://sakhsondotcom.files.wordpress.com/2012/05/materi-5-dasar-action-script2.pdfhttp://sakhsondotcom.files.wordpress.com/2012/05/materi-5-dasar-action-script2.pdfhttp://sakhsondotcom.files.wordpress.com/2012/05/materi-5-dasar-action-script2.pdfhttp://belajar-flash.blogspot.com/http://belajar-flash.blogspot.com/http://sakhsondotcom.files.wordpress.com/2012/05/materi-5-dasar-action-script2.pdfhttp://sakhsondotcom.files.wordpress.com/2012/05/materi-5-dasar-action-script2.pdf -
8/11/2019 LAPORAN HASIL PRAKTIKUM BAB VI.docx
25/25
BAB VI
LAMPIRAN
Tugas 1 :
Tugas 2 :