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.


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.


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.


Gambar II.4

Tampilan jendela Batang Menu Adobe Flash CS6

4. Scale View

Berfungsi mengatur presentase besarnya tampilan stage atau lembar kerja.


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.


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.


Gambar II.7

Tampilan jendela Info Adobe Flash CS6

12

7. Swathes

Berfungsi menampilkan kumpulan warna yamg digunakan untuk mewarnai

pembuatan gambar animasi.


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.


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.


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.


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.


Gambar II.12

Tampilan jendela Timeline Adobe Flash CS6

12. Compiler Erorrs

Berfungsi menampilkan pesan kesalahan dari penulisan ActionScript


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.


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.


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.


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.


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.


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.


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.


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).


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.


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.


Gambar II.25

Tampilan jendela Quick Selection & Magic Wand Tool Adobe Photoshop CC

21

5. Crop & Slice Tool


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.


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.


Gambar II.28

Tampilan jendela Healing Brush & Patch Tool Adobe Photoshop CC

8. Brush & Pencil Tool


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


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


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


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


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


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


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.


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


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


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


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


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.


Gambar II.41

Tampilan jendela Zoom Tool Adobe Photoshop CC

bab ii landasan teori 2.1. konsep dasar · dalam pembahasan tugas akhir ini penulis menggunakan...

Documents