BAB II LANDASAN TEORI 2.1. Konsep Dasar · Dalam pembahasan tugas akhir ini penulis menggunakan...
Transcript of BAB II LANDASAN TEORI 2.1. Konsep Dasar · Dalam pembahasan tugas akhir ini penulis menggunakan...
6
BAB II
LANDASAN TEORI
2.1. Konsep Dasar
Menurut (Kholis & Herlawati, 2015) “Ide Cerita adalah salah satu bentuk
realisasi dari sebuah konsep dalam bentuk alur cerita. Sebuah ide cerita biasanya
memperlihatkan tentang suasana, karakter, dan kejadian yang berlangsung didalam
sebuah cerita”.
Dalam pembahasan tugas akhir ini penulis menggunakan Adobe Flash CS6 dan
Adobe Photoshop CC sebagai alat bantu pembuatan desain. Pada konsep dasar
program yang penulis buat ini berlandaskan teori dari sumber refrensi yang telah teruji
kebenaranya sesuai dengan ketentuan yang ada yaitu:
2.1.1. Animasi Interaktif
Menurut (Faris & Lestari, 2016) “Animasi adalah media. Media untuk
mengubah sesuatu, dari sebuah imajinasi, ide, konsep, visual sampai akhirnya
memberi pengaruh kepada dunia tidak hanya pembatas dalam dunia animasi”.
Menurut (Faris & Lestari, 2016) "Media interaktif merupakan sistem media
penyampaian yang menyajikan materi video rekaman dengan pengendalian komputer
kepada penonton yang tidak hanya mendengar dan melihat video dan suara, tetapi juga
memberikan respon yang aktif dan respon itu yang menentukan kecepatan dan
sekuensi penyajian".
7
2.1.2. Multimedia
Menurut (Rosmaidah & Destiana, 2017) “Multimedia adalah interaksi antara
teks, suara, gambar statis, animasi dan video”.
Menurut (Nadiroh & Hidayat, 2017) “multimedia merupakan suatu sistem
komunikasi interaktif berbasis komputer yang mampu menciptakan, menyimpan,
menyajikan, dan mengakses kembali informasi berupa teks, grafik, suara”.
Menurut Darma, Jarot S, dalam jurnal (Yudhistira & Widiarina, 2019)
menyimpulkan bahwa: “Multimedia ditinjau dari bahasanya, terdiri dari 2 kata yaitu
multi dan media. Multi memilii arti banyak atau lebih dari satu. Sedangkan media
merupakan bentuk jamak dari medium, juga diartikan sebagai saran, wadah, atau alat.
Istilah multimedia sendiri dapat diartikan sebagai transmisi data dan manipulasi semua
bentuk informasi, baik berbentuk kata-kata, gambar, video, musik, angka, atau tulisan
tangan dimana dalam dunia komputer, bentuk informasi tersebut diolah dari dan dalam
bentuk data digital”.
Dari beberapa pendapat tersebut dapat disimpulkan bahwa multimedia adalah
suatu sistem hubungan komunikasi interaktif melalui komponen yang mampu
menyajikan dan menggabungkan data dalam bentuk gambar, video, dan animasi
dengan suaru dan teks.
8
2.2. Peralatan Pendukung
2.2.1 Tools Animasi
Tools dapat diartikan sebagai benda atau alat yang digunakan untuk
mengerjakan atau membuat sesuatu. Tools animasi adalah kumpulan berbagai macam
alat yang terdapat di dalam program aplikasi. Alat-alat tersebut digunakan dalam
proses pembuatan animasi.
2.2.2. Adobe Flash Professional CS6
Menurut (Yudhistira & Widiarina, 2019) Adobe Flash sudah dipakai sejak
puluhan tahun lalu. Sebagai kalangan menggunakannya untuk membuat animasi
untuk halaman website, profil perusahaan, game, dan lain-lain. Sekarang mulai
berkembang pengguna flash untuk pembuatan game di moblie device seperti
handphone, PDA, dll.
Menurut (Ma’ruf, 2016) Action Script memliki kemampuan untuk
mendukung perancangan suatu animasi atau aplikasi sederhana sampai yang kompleks
sekalipun. Dengan Action Script kita tidak perlu bersusah payah untuk membuat
motion-motion animasi yang banyak memakan frame dan layer sehingga ukuran file
pun membengkak, cukup dengan menuliskan beberapa kode yang nantinya akan
digunakan untuk mengatur animasi dan sekaligus dapat untuk membuat obyek dengan
sangat menarik.
Berikut merupakan pengenalan dan penjelasan program aplikasi Adobe
Flash:
9
Sumber : (Madcoms, 2015)
Gambar II.1
Tampilan jendela kerja Adobe Flash CS6
Tampilan area kerja flash dapat di ubah disesuaikan dengan penggunaan
melalui pilihan menu workspace. Tool yang terdapat di dalam flash memiliki fungsi
yang berbeda. Berikut penjelasanya:
1. ActionScript
Berfungsi menampilkan tabulasi atau lembar kerja dari penulisan kode.
Sumber : (Madcoms, 2015)
Gambar II.2
Tampilan jendela ActionScript Adobe Flash CS6
10
2. Tabulasi Dokumen
Berfungsi menampilkan tabulasi dari lembar kerja atau stage yang sedang
dikerjakan. Sering juga disebut Documet Tab.
Sumber : (Madcoms, 2015)
Gambar II.3
Tampilan jendela Tabulasi Dokumen Adobe Flash CS6
3. Batang Menu
Batang ini berisi deretan menu perintah, yang di dalamnya berisi sub-sub
perintah sesuai dengan kegunaan masing-masing.
Sumber : (Madcoms, 2015)
Gambar II.4
Tampilan jendela Batang Menu Adobe Flash CS6
4. Scale View
Berfungsi mengatur presentase besarnya tampilan stage atau lembar kerja.
Sumber : (Madcoms, 2015)
Gambar II.5
Tampilan jendela Scale View Adobe Flash CS6
11
5. Motion Presets
Berfungsi menampilkan kumpulan dan pergerakan animasi yang telah
disediakan secara default dan dapat diaplikasikan secara langsung pada image yang
berada di dalam layer.
Sumber : (Madcoms, 2015)
Gambar II.6
Tampilan jendela Motion Presets Adobe Flash CS6
6. Info
Berfungsi menampilkan informasi tentang panjang, lebar, posisi dan kode
warna dari sebuah objek gambar yang dibuat di dalam layer.
Sumber : (Madcoms, 2015)
Gambar II.7
Tampilan jendela Info Adobe Flash CS6
12
7. Swathes
Berfungsi menampilkan kumpulan warna yamg digunakan untuk mewarnai
pembuatan gambar animasi.
Sumber : (Madcoms, 2015)
Gambar II.8
Tampilan jendela Swatches Adobe Flash CS6
8. Color
Berfungsi menampilkan jenis warna yang berasal dari kumpulan warna dasar
dan atribute pengkodean dari sebuah warna.
Sumber : (Madcoms, 2015)
Gambar II.9
Tampilan jendela Clor Adobe Flash CS6
13
9. Workspace
Berisi deretan menu perintah yang digunakan untuk merubah tampilan area
kerja pada program adobe flash.
Sumber : (Madcoms, 2015)
Gambar II.10
Tampilan jendela Workpaces Adobe Flash CS6
10. Propertis
Berisi tentang pengaturan-pengaturan yang digunakan untuk pengenalan
dengan memberikan sebuah penamaan dari setiap objek gambar. Penamaan dari
objek dari setiap gambar harus bersifat unik (tidak sama) untuk mencegah terjadinya
error pada animasi yang akan dibuat.
Sumber : (Madcoms, 2015)
Gambar II.11
Tampilan jendela Propertis Adobe Flash CS6
14
11. Timeline
Berfungsi menampilkan bagian yang digunakan untuk mengatur dan
mengontrol dokumen dalam layer dan frame.
Sumber : (Madcoms, 2015)
Gambar II.12
Tampilan jendela Timeline Adobe Flash CS6
12. Compiler Erorrs
Berfungsi menampilkan pesan kesalahan dari penulisan ActionScript
Sumber : (Madcoms, 2015)
Gambar II.13
Tampilan jendela Compiler Errors Adobe Flash CS6
13. Motion Editor
Berfungsi menampilkan bagian yang gunakan untuk mengatur dan
mengontrol pergerakan image yang berada di dalam frame.
Sumber : (Madcoms, 2015)
Gambar II.14
Tampilan jendela Motion Editor Adobe Flash CS6
15
14. Code Snipets
Berisi kumpulan ActionScript yang telah disediakan secara default untuk
memudahkan penulisan kode di dalam pembuatan animasi.
Sumber : (Madcoms, 2015)
Gambar II.15
Tampilan jendela Code Snippets Adobe Flash CS6
15. Transform
Berisi kumpulan alat yang di gunakan untuk merubah ukuran dan rotasi sebuah
objek gambar yang dibuat di dalam layer.
Sumber : (Madcoms, 2015)
Gambar II.16
Tampilan jendela Transform Adobe Flash CS6
16
16. Components
Berisi kumpulan objek-objek otomatis yang telah disediakan secara default
oleh flash dan dapat digunakan secara langsung untuk pembuatan animasi.
Sumber : (Madcoms, 2015)
Gambar II.17
Tampilan jendela Components Adobe Flash CS6
17. Align
Berfungsi menampilkan deretan menu perintah secara otomatis yang
digunakan untuk memindahkan dan mengatur letak dari posisi objek gambar yang
terdapat di dalam layer.
Sumber : (Madcoms, 2015)
Gambar II.18
Tampilan jendela Align Adobe Flash CS6
17
18. Library
Adalah suatu tempat untuk menampung semua symbol, baik graphic, button,
mocie clip ataupun objek hasil impor, seperti gambar, sound dan objek yang berasal
dari aplikasi lain yang pernah dibuat di dalam stage.
Sumber : (Madcoms, 2015)
Gambar II.19
Tampilan jendela Library Adobe Flash CS6
19. Panel Tools
Merupakan sebuah panel yang terdiri dari kumpulan peranti-peranti kerja yang
sering digunakan untuk membuat animasi, membuat objek, dan manipulasi objek.
Sumber : (Madcoms, 2015)
Gambar II.20
Tampilan jendela Panel Tools Adobe Flash CS6
2.2.3. Adobe Photoshop
18
Menurut (Mu’aishim, 2014) Adobe Photoshop adalah perangkat lunak editor
citra buatan Adobe System yang dikhususkan untuk pengeditan foto/gambar dan
pembuatan efek.
Program aplikasi Adobe Photoshop CC digunakan untuk memudahkan
mendesain grafis dan terdapat pilihan fitur-fitur khusus untuk memaksimalkan
pengerjaan desain.
Gambar II.21
Tampilan jendela kerja Adobe Photoshop CC
Menurut (Enterprise, 2017) Di bawah ini akan dibahas tool-tool penting yang
ada di dalam Photoshop yang kerap digunakan baik untuk membuat objek baru,
mengedit objek yang sudah ada, maupun mendukung proses desain. Berikut toolbox
Photoshop dan penjelsannya :
19
1. Move Tool
Move Tool berfungsi untuk memindahkan posisi atau letak suatu objek di dalam
kanvas. Untuk mengaktifkan tool ini, klik icon Move Tool yang ada pada toolbox.
Sumber : (Enterprise, 2017)
Gambar II.22
Tampilan jendela Move Tools Adobe Photoshop CC
2. Marquee Tool
1. Rectangular Marquee Tool digunakan untuk membuat bidang seleksi objek
yang berbentuk segiempat atau kotak.
2. Elliptical Marquee Tool digunakan untuk membuat bidang seleksi objek yang
berbentuk elips atau lingkaran.
3. Single Row Marquee Tool digunakan untuk membuat bidang seleksi objek
dengan orientasi horizontal dan hanya sebesar satu piksel.
4. Single Column Marquee Tool penggunaanya sama dengan single row marquee
tool, perbedaannya hanya terletak pada bidang yang terseleksi. Dengan tool ini,
anda dapat menyeleksi objek dengan pola vertikal (kolom).
Sumber : (Enterprise, 2017)
Gambar II.23
Tampilan jendela Marquee Tool Adobe Photoshop CC
20
3. Lasso Tool
1. Lasso Tool digunakan untuk menyeleksi objek dengan bentuk bebeas sesuai
dengan gerakan mouse yang anda lakukan.
2. Polygonal Lasso Tool digunakan untuk menyeleksi objek dengan bentuk bebas
yang memiliki banyak sudut tajam.
3. Magnetic Lasso Tool anda dapat membuat seleksi objek dengan mendekatkan
atau mengarahkan tool ke bagian tepi objek.
Sumber : (Enterprise, 2017)
Gambar II.24
Tampilan jendela Lasso Tool Adobe Photoshop CC
4. Quick Selection & Magic Wand Tool
1. Quick Selection Tool berfungsi untuk membuat seleksi objek dengan cepat
menggunkan cara kerja menyerupai kuas (klik-drag).
2. Magic Wand Tool digunakan untuk menyeleksi objek berdasarkan kesamaan
warna.
Sumber : (Enterprise, 2017)
Gambar II.25
Tampilan jendela Quick Selection & Magic Wand Tool Adobe Photoshop CC
21
5. Crop & Slice Tool
Sumber : (Enterprise, 2017)
Gambar II.26
Tampilan jendela Crop & Slice Tool Adobe Photoshop CC
1. Crop Tool berfungsi untuk memotong kanvas, sehiingga ukuran kanvas akan
berubah.
2. Perspective Crop Tool berfungsi untuk memotong suatu objek dan
memperbaiki distorsi umum dan dalam masalah perspektif dalam objek yang
akan dipotong.
3. Slice Tool digunakan untuk memotong gambar menjadi beberapa bagian
dengan ukuran yang lebih kecil.
4. Slice Select Tool setelah anda memotong gambar menjadi beberapa bagian
gambar kecil menggunakan slice tool, anda dapat menyeleksi setiap bagian
yang ada dengan slice select tool..
6. Eyedropper Tool, 3D Material Eyedropper, Color Sample, Ruler Tool, Note Tool
dan Count Tool
1. Eyedropper Tool digunakan untuk mengambil contoh warna pada bagian
gambar dan selanjutnya warna tersebut menjadi warna latar depan.
22
2. 3D Material Eyedropper Tool berfungsi untuk mengmbil sampel warna pada
suatu gambar atau objek untuk pembentukan 3 Dimensi.
3. Color Sampler Tool berfungsi untuk mengambil sampel warna dari suatu
gambar yang berbeda.
4. Ruler Tool berfungsi untuk mengukur jarak dari 2 titik yang telah dipilih pada
gambar.
5. Note Tool berfungsi untuk membuat suatu catatan pada gambar atau objek.
6. Count Tool berfungsi untuk menghitung suatu objek pada sebuah gambar.
Sumber : (Enterprise, 2017)
Gambar II.27
Tampilan jendela Eyedropper, 3D Material eyedropper, Color Sample, Ruler
Tool, Note Tool dan Count Tool Adobe Photoshop CC
7. Healing Brush & Patch Tool
1. Spot Healing Brush Tool berfungsi untuk menghilangkan atau mengubah
bagian suatu gambar atau objek.
2. Healing Brush Tool berfungsi untuk menghilangkan atau mengubah bagian
suatu gambar atau objek berdasarkan area sampel yang telah dipilih.
3. Patch Tool berfungsi untuk mengubah bagian suatu gambar atau objek
berdasarkan area sampel yang dipilih.
23
4. Content-Aware Move Tool berfungsi untuk memilih suatu piksel dan
memindahkan atau memperpanjang ke daerah lain tanpa menggunakan layer
dan maks.
5. Red Eye Tool berfungsi untuk menghilangkan warna merah pada suatu gambar
atau objek.
Sumber : (Enterprise, 2017)
Gambar II.28
Tampilan jendela Healing Brush & Patch Tool Adobe Photoshop CC
8. Brush & Pencil Tool
Sumber : (Enterprise, 2017)
Gambar II.29
Tampilan jendela Brush & Pencil Tool Adobe Photoshop CC
1. Brush Tool berfungsi untuk mewarnai objek atau gambar seperti memakai
kuas.
2. Pencil Tool berfungsi untuk mewarnai objek atau gambar seperti goresan
pensil.
24
3. Color Replacement Tool berfungsi untuk mewarnai objek atau gambar dengan
cara mengambil warna tertentu dari gambar atau objek.
4. Mixer Brush berfungsi untuk mencampur warna dalam sikat stroke tunggal.
9. Stamp Tool
Sumber : (Enterprise, 2017)
Gambar II.30
Tampilan jendela Stamp Tool Adobe Photoshop CC
1. Clone Stamp Tool berfungsi untuk membuat salinan gambar atau objek sesuai
dengan pola gambar yang telah dipilih.
2. Pattern Stamp Tool berfungsi untuk membuat suatu goresan atau pattern pada
objek atau gambar.
10. History Brush Tool
Sumber : (Enterprise, 2017)
Gambar II.31
Tampilan jendela History Brush Tool Adobe Photoshop CC
1. History Brush Tool berfungsi untuk menampilkan rekaman perintah brush tool.
2. Art History Brush Tool berfungsi untuk menghilamgkan goresan dari brush
tool.
11. Eraser Tool
25
Sumber : (Enterprise, 2017)
Gambar II.32
Tampilan jendela Eraser Tool Adobe Photoshop CC
1. Eraser Tool berfungsi untuk menghapus objek yang salah atau tidak
dibutuhkan.
2. Background Eraser Tool berfungsi untuk menghapus di area dari objek hingga
tembus ke dalam background layer.
3. Magic Eraser Tool berfungsi untuk menghapus area dari gambar atau objek
yang memiliki kesamaan pada warna.
12. Gradient & Paint Bucket Tool
Sumber : (Enterprise, 2017)
Gambar II.33
Tampilan jendela Gradient & Paint Bucket Tool Adobe Photoshop CC
1. Gradient Tool digunakan untuk mewarnai objek, bidang seleksi, maupun
kanvas dengan warna gradasi.
2. Paint Bucket Tool anda dapat mewarnai objek, bidang seleksi, atau kanvas
dengan warna foreground yang sedang aktif atau dengan pola warna tertentu.
26
3. 3D Material Drop Tool untuk memberi 3D warna pada gambar atau layer.
13. Blur, Sharpen and Smudge Tool
Sumber : (Enterprise, 2017)
Gambar II.34
Tampilan jendela Blur, Sharpen dan Smudge Tool Adobe Photoshop CC
1. Blur Tool digunakan untuk menciptakan efek kabur pada gambar.
2. Sharpen Tool digunakan untuk mempertajam warna dan cahaya pada warna.
3. Smudge Tool digunakan untuk memberikan efek ‘tarikan jari’ pada gambar.
14. Dodge, Burn and Sponge Tool
Sumber : (Enterprise, 2017)
Gambar II.35
Tampilan jendela Dodge, Burn and Sponge Tool Adobe Photoshop CC
1. Dodge Tool digunakan untuk memperterang warna dan cahaya pada gambar.
2. Burn Tool digunakan untuk mempergelap warna pada gambar.
3. Sponge Tool mempunyai dua fungsi, yaitu untuk meningkatkan dan/atau
menurunkan saturasi warna.
15. Pen &Point Tool
27
1. Pen Tool digunakan untuk membuat garis path pada gambar dimana garis path
tersebut selanjutnya dapat anda manfaatkan untuk membuat bidang seleksi.
2. Freeform Pen Tool digunakan untuk membuat garis path yang lebih fleksibel
pada gambar dan anda juga dapat memanfaatkan bidang path tersebut untuk
membuat bidang seleksi.
3. Add Anchor Point Tool digunakan untuk menambahkan titik anchor pada garis
path yang telah dibuat.
4. Delet Anchor Point Tool fungsi dari tool ini kebalikan dari fungsi Add Anchor
Point Tool, yaitu untuk menghpus titik anchor pada garis path yang telah
dibuat.
5. Convert Point Tool berfungsi untuk membuat lekukan pada garis path dan
melebarkan atau mempersempit bidang path yang telah dibuat.
Sumber : (Enterprise, 2017)
Gambar II.36
Tampilan jendela Pen, Freeform Pen, Add Anchor, Point, Delete Anchor Point
dan Convert Point Tool Adobe Photoshop CC
28
16. Type/Text Tool
Sumber : (Enterprise, 2017)
Gambar II.37
Tampilan jendela Type/Text Tool Adobe Photoshop CC
1. Horizontal Type Tool digunakan untuk membuat teks yang tersusun horizontal
pada gambar.
2. Vertical Type Tool digunakan untuk membuat teks yang tersusun vertikal pada
kanvas.
3. Horizontal Type Mask Tool digunakan untuk membuat bidang seleksi berupa
teks yang tersusun horizontal.
4. Vertical Type Mask Tool digunakan untuk membuat bidang seleksi berupa teks
yang tersusun bertikal.
17. Path & Direct Selection Tool
Sumber : (Enterprise, 2017)
Gambar II.38
Tampilan jendela Path & Direct Selection Tool Adobe Photoshop CC
1. Path Selection Tool berfungsi untuk menyeleksi dan memindahkan bidang path
yang sudah anda buat.
2. Direct Selection Tool berfungsi untuk memindahkan titik anchor yang ada di
path.
29
18. Shape Tool
Sumber : (Enterprise, 2017)
Gambar II.39
Tampilan jendela Shape Tool Adobe Photoshop CC
1. Rectangle Tool digunakan untuk membuat objek berbentuk persegi empat atau
kotak.
2. Rounded Rectangle Tool digunakan uuntuk membuat objek berbentuk persegi
empat atau kotak dengan sudut yang tumpul.
3. Ellips Tool digunakan untuk membuat objek berbentuk lingkran atau elips.
4. Polygon Tool digunakan untuk membuat objek berbentuk segi banyak.
5. Line Tool digunakan untuk membuat objek berbentuk garis.
6. Custome Shape Tool digunakan untuk membuat objek dengan berbagai macam
bentuk shape sesuai keinginan anda.
30
19. Hand & Rotate Tool
Sumber : (Enterprise, 2017)
Gambar II.40
Tampilan jendela Hand Tool & Rotate Tool Adobe Photoshop CC
1. Hand Tool berfungsi untuk menggeser gambar setelah tampilan-tampilannya
diperbesar.
2. Rotate View Tool dapat anda gunakan untuk memutar kanvas.
20. Zoom Tool
Zoom Tool berfungsi untuk memperbesar atau memperkecil tampilan gambar.
Sumber : (Enterprise, 2017)
Gambar II.41
Tampilan jendela Zoom Tool Adobe Photoshop CC