Thursday, June 30, 2016

Tugas 4 Bahasa Indonesia 2 Jurnal

ABSTRAK


Esa Saputra Yunus, 12112559
Pengembangan Konten Kombinatorik Untuk Buku Elektronik Kombinasi Dan Permutasi Berformat HTML
Penulisan Ilmiah, Jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi, Universitas Gunadarma, 2015.
Kata Kunci: E-book, Kombinasi dan Permutasi, Kombinatorik
( xv + 71 + Lampiran )

Buku merupakan media pembelajaran yang sangat populer dan paling sering digunakan oleh manusia, dari buku inilah kita banyak mendapatkan ilmu pengetahuan yang bermanfaat. Jika buku pada umumnya terdiri dari kumpulan kertas yang hanya dapat berisikan teks atau gambar, dengan menggunakan e-book buku dapat disimpan dalam format digital yang dapat berisikan teks, gambar, suara dan animasi sehingga memudahkan pengguna mempelajari materi e-book.
      
Salah satu mata kuliah yang dianggap sulit di jurusan Ilmu Komputer (Sistem Informasi dan Sistem Komputer) adalah mata kuliah matematika Diskrit, materi yang dipelajari  salah satunya kombinatorik. Dengan menggunakan E-book Pengembangan Konten Kombinatorik Kombinasi dan Permutasi diharapkan dapat membantu  mahasiswa dalam mempelajari matematika diskrit menjadi lebih mudah. Aplikasi e-book ini menggunakan perangkat lunak Kvisoft Flibook Marker, Adobe Photoshop Cs3, Adobe flash Cs3, Mirosoft Word 2010 dan Internet Browser.

Daftar Pustaka (2011-2015)







KATA PENGANTAR

            Segala puji dan syukur saya panjatkan kepada Tuhan yang Maha Esa yang mana telah memberikan anugerah dan karunia yang melimpah, sehingga penulis dapat menyelesaikan Penulisan Ilmiah ini.
Penulisan Ilmiah ini disusun guna melengkapi sebagian syarat dalam mencapat gelar Setara Sarjana Muda pada jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Gunadarma. Adapun judul Penulisan Ilmiah ini adalah “Pengembangan Konten Kombinatorik Untuk Buku Elektronik Kombinasi Dan Permutasi Berformat Html”. 
Penulisan ilmiah ini dimaksudkan untuk melengkapi salah satu syarat untuk mencapai jenjang setara sarjana muda Universitas Gunadarma. Penulis menyadari bahwa tulisan ilmiah ini masih jauh dari kesempurnaan, untuk itu diharapkan dengan segala kerendahan hati kiranya dapat diberikan saran dan kritik yang bersifat membangun kepada penulis guna tercapainya karya yang lebih baik di masa depan nanti.
            Di dalam menyusun laporan tulisan ilmiah ini, banyak sekali pihak-pihak yang membantu baik secara materil ataupun imateril serta saran-saran dari berbagai macam pihak, dan juga yang telah  memberikan pengarahan serta koreksi yang sangat bermanfaat dalam membimbing penulis sampai dengan terselesainya tulisan ilmiah ini.
Pada kesempatan ini juga, penulis tidak lupa untuk mengucapkan terima kasih kepada :
1.         Prof. Dr. E. S. Margianti, SE., MM., selaku Rektor Universitas Gunadarma.
2.            Prof. Dr.rer.nat. Achmad Benny Mutiara Q. N., S.Si, S.Kom, selaku Dekan Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Gunadarma.
3.         Dr. Setia Wirawan, S.kom., MMSI., selaku Ketua Jurusan Sistem Informasi Universitas Gunadarma.
4.         Dr. Sri  Nawangsari, SE., MM. selaku koordinator Tulisan Ilmiah.
5.         Dr. Sulistyo Puspitodjati, Ssi., SKom., MSc(Cs) selaku dosen pembimbing yang telah meluangkan waktu dan pikirannya dalam bentuk bimbingan kepada penulis.
6.         Kedua Orang tua dan keluarga tercinta (Inu Wahyudhy Yunus dan Dwi Anggrayani) yang telah memberikan dorongan dan semangat serta doa dari awal tulisan hingga akhir penyusunan tulisan ilmiah ini.  
7.         Teman-teman Kosan Ridho yang selalu memberikan dukungan dan hiburan dikala penat saat pengerjaan penulisan ini.
8.         Teman sekelompok penulisan ilmiah (Destra Triandika, M. Wildan Rizki, Ridwan Fiatmoko dan Ridho Hanal)  yang telah bersedia menuangkan ide bersama ke dalam penulisan ilmiah ini.
9.            Keluaga besar kelas 3KA19 angkatan 2012 yang saling mendukung dan memberi saran maupun masukkan serta ilmunya dalam penyelesaian penulisan ini.
10.        Semua pihak yang telah membantu dan memberikan dukungan hingga terselesaikannya penulisan ini yang tidak dapat disebutkan satu-persatu.

Penulis juga ingin menyampaikan, bahwa penulisan ini masih jauh dari sempurna. Oleh karena itu, kritik, saran, dan masukan sangat penulis harapkan untuk perbaikan pada penulisan selanjutnya.
Pada akhirnya penulis berharap semoga penulisan ini bermanfaat bagi pembaca pada umumnya dan pecinta ilmu pengetahuan pada khususnya.

                                                                                Jakarta, 10 Juli 2015


                                                                                 (Esa Saputra Yunus)






BAB 1  
PENDAHULUAN

1.1   Latar Belakang

      Buku merupakan media pembelajaran yang sangat popular dan paling banyak digunakan oleh manusia, dengan adanya buku manusia akan mendapatkan ilmu pengetahuan yang luas, karena buku adalah sumber ilmu.
      Saat ini Perkembangan teknologi informasi semakin hari semakin pesat dalam berbagai aspek kehidupan. Hal ini memicu untuk mengembangkan dan membuat teknologi serta aplikasi-aplikasi yang berguna agar menarik minat pemakai. Dari kemajuan tekhnologi yang semakin pesat ini, buku kini tersdia bukan hanya dalam media cetak melainkan tersedia juga dalam media elektronik yang disebut e-book (buku elektronik).
       
      E-book salah satu media pembelajaran yang saat ini sedang berkembang, media e-book sangat mudah di operasikan, karena media e-book memiliki banyak sekali format untuk pengoperasiannya. Belajar menggunakan e-book lebih diminati karena disamping penggunannya yang mudah dan efisien, e-book juga tidak membutuhkan biaya operasional yang tinggi karena media penyimpanan e-book berupa digital bukan berupa lembaran kertas. Selain itu e-book dapat disimpan dalam media digital seperti komputer, notebook, laptop dan gadget lainnya.

      Salah satu mata kuliah di universitas yang dianggap sulit adalah mata kuliah matematika,  khususnya untuk mahasiswa fakultas Ilmu Komputer yang sulit akan mempelajari seputar perhitungan matematika. Salah satu diantaranya adalah matematika Kombinasi Permutasi materi yang dipelajari khususnya Kombinatorik, fungsi pembangkit, relasi rekursif, grup dan ring dan pembangkitan objek kombinatorik.       
       Di tingkat kedua perkuliahan pada umumnya, mahasiswa akan mempelajari hal tersebut melalui media buku teks biasa yang tentu akan sangat membosankan mengingat banyaknya persoalan yang harus dipecahkan menggunakan rumus. Untuk mengatasi hal hal tersebut, dibutuhkan sebuah media yang interaktif untuk mahasiswa agar mempermudah proses pembelajaran.
Dengan penggunaan E-book sebagai media pembelajaran interaktif diharapkan agar mahasiswa dapat lebih mudah mempelajari mata kuliah matematika kombinasi permutasi.

1.2   Batasan Masalah
Dalam penulisan ini penulis mengangkat materi dari matematika Kombinatorik untuk dibuatkan e-book. E-book diambil dari draff buku kombinasi dan permutasi oleh Dr Sulistyo Puspitodjati, SSi., SKom.,MSc(CS), Dra. Henny Widowati Farida, MM  dan Dr. D. Lucia Crispina Pardede, DEA. [1] membuat sebuah media pembelajaran interaktif tentang matematika diskrit melalui E-book yang dikhususkan untuk mahasiswa tingkat kedua dengan  animasi berbasis flash. Materi yang dikembangkan adalah bab kombinatorik permutasi dan kombinasi dari [1]. Objek animasi akan menjelaskan bagaimana memecahkan persoalan dengan bantuan gambar bergerak. E-book kombinasi dan permutasi di operasikan pada internet browser. Software E-book yang dipakai adalah Kvisoft Flipbook Maker.

1.3   Tujuan Penulisan
Tujuan penulisan ilmiah ini adalah menghasilkan e-book kombinasi dan permutasi khusus konten kombinatorik dengan visualisasi penjelasan menggunakan media animasi.

1.4   Metode Penelitian
Pembuatan penulisan ilmiah ini terbagi menjadi beberapa tahap pengerjaan yaitu sebagai berikut:
1).  Pengumpulan Data
Penulis mengumpulkan teori yang mengacu pada pembahasan. Pengumpulan teori ini sebagai acuan dalam pembuatan Electronik Book dan animasi. Proses pengumpulan teori ini meliputi pencarian dari buku serta artikel-artikel dari internet.
2).  Analisis dan Perancangan
Kemudian dilanjutkan dengan pembuatan desain tampilan e-book beserta animasi pemecahan masalah menggunakan software Adobe flash. Setelah itu diproses menjadi E-book dengan menggunakan Kvisoft Flipbook Maker.

3).  Implementasi
Dalam pembuatan aplikasi ini software dan hardware yang digunakan adalah:
1)                  Sistem Operasi Windows 8.1 64bit
2)                  Memori RAM 4Gb
3)                  Processor Intel Core i5-4217U CPU @ 1.70 GHz
4)                  Kvisoft Flipbook Maker
5)                  Adobe Photoshop
6)                  Adobe Flash
7)                  Microsoft Word

4).  Pengujian
Akan dilakukan uji coba pada aplikasi, apakah aplikasi berjalan baik dan sesuai dengan tujuan yang ada.
1.5  Sistematika Penulisan
Memberikan sedikit gambaran mengenai penulisan ilmiah ini. Penulis menguaraikan isi setiap bab secara garis besar dalam sistematika penulisan sebagai berikut :

1).  BAB 1 PENDAHULUAN
Bab ini menjelaskan latar belakang masalah, batasan masalah, tujuan penulisan, metode penelitian dan sistematika penulisan.
2). BAB 2 LANDASAN TEORI
Pada bab ini membahas secara teori tentang konsep dasar sistem, serta teori-teori yang mendasari penulisan ini yang dilakukan oleh penulis.
3). BAB 3 ANALISA DAN PEMBAHASAN 
Pada bab ini membahas tentang analisa kebutuhan program, struktur navigasi, rancangan menu tampilan, langkah-langkah pembuatan aplikasi e-book, dan  membahas tentang pengujian aplikasi. 
4). BAB 4 PENUTUP
Pada bab ini berisi tentang kesimpulan penulis mengenai penulisan ini serta harapan pengembangan selanjutnya. 


BAB 2
 LANDASAN TEORI


E-book sering disebut buku elektronik atau buku digital. Jika buku pada umumnya terdiri dari kumpulan kertas yang dapat berisikan teks atau gambar, maka buku elektronik berisikan informasi digital yang juga dapat berwujud teks atau gambar.
2.1.  Format E-book
1).  Doc dan Rich Text Format (RTF)
Doc dan RTF adalah standar word prosesor yang banyak digunakan di seluruh dunia, karena sangat kompetibel dengan sistem operasi windows.
2). Hypertext Mark-up Language (HTML)
HTML merupakan format yang bisa digunakan untuk menampilkan halaman web. Untuk membacanya dbutuhkan aplikasi browser seperti Internet Explorer, Mozilla Firerox, Opera, Google Chrome dan lain sebagainya.
3). Compiled HTML Help File (CHM)
Format ini merupakan pengembangan dari format HTML, terkenal sebagai format CHM sebagai pengembangan HTML, fromat CHM mampu menyimpan banyak halaman beserta link-nya termasuk juga mampu menyimpan banyak halaman beserta link-nya termasuk juga gambar dalam satu file saja (kompile). Fromat ini mampu mengatur halaman layaknya seperti sebuah buku. Fitur navigasinya juga sangat nyaman dalam penempatan bab, daftar isi, pencarian dan favorit.


4). Device Independent (DVI)
Format dvi adalah keluaran dari Tex dan Latex document prosesor. Format ini telah dikembangkaan oleh Donald E Knuth dari Stanford University tahun 1997. File yang dihasilkan relatif kecil sehingga sangat cocok digunakan untuk distribusi jurnal, makalah, tesis dan laporan teknik karena laporan ini memiliki fasilitas grafik yang sangat terbatas.
5). Portable Document Format (PDF)
Pdf merupakan sebuah format file yang dibuat oleh Adobe System pada tahun 1993. Pdf memiliki unsur content yang lengkap dikarenakan melibatkan teks, huruf, citra dan grafik. File Pdf hanya bisa dibaca menggunakan tool khusus yaitu Adobe Reader, Foxit Reader dan lain-lain. Format jenis ini sangat nyaman digunakan karena terdapat fasilitas navigasi halaman, thumbnail, zoom teks, fasilitas pencarian, dan masih banyak lagi.
6). Format EXE
Fromat EXE biasanya merupakan gabungan atau kompilasi dari file pdf dan juga html. Format jenis ini biasanya akan membantu dalam proses membaca file, misalnya jika komputer tidak terinstal adobe reader.
2.2  Definisi Multimedia
            Dari segi bahasa muliedia tersusun atas dua buah kata, yaitu muli dan media. Multi yang berarti lebih dari satu, banyak atau beraneka ragam, sedangkan media adalah wadah atau tempat atau sarana yang dapat dimanfaatkan untuk keperluan tertentu. Sehingga penjabaran multimedia secara umum adalah suatu aplikasi yang terusun atas beberapa elemen pembentuk yang diproses dan disajikan dalam wadah aplikasi secara linier ataupun interaktif.
2.2.1  Elemen-elemen Multimedia
Multimedia merupakan gabungan beberapa media yang kemudian didefinisikan sebagai elemen-elemen dalam bentuk multimedia. Elemen-elemen dalam pembentukan aplikasi multimedia yaitu :
2.2.1.1  Teks
Teks merupakan elemen multimedia yang menjadi dasar untuk menyampaikan informasi, karena teks adalah jenis data yang paling sederhana dan membutuhkan tempat penyimpanan yang paling kecil. Teks
merupakan cara yang paling efektif dalam mengemukakan ide-ide kepada pengguna, sehingga penyampaian informasi akan lebih mudah dimengerti oleh masyarakat. Jenis-jenis teks seperti Printed Text, yaitu teks yang dihasilkan oleh word processor atau word editor dengan cara diketik yang nantinya dapat dicetak. Scanned Text yaitu teks yang dihasilkan melalui proses scanning tanpa pengetikan. Dan Hypertext yaitu jenis teks yang memberikan link ke suatu tempat atau meloncat ke topik tertentu.
2.2.1.2  Grafik (Gambar)
Sangat bermanfaat untuk mengilustrasi informasi yang akan disampaikan terutama informasi yang tidak dapat dijelaskan dengan kata-kata. Jenis-jenis grafik seperti bitmap yaitu gambar yang disimpan dalam bentuk kumpulan pixel, yang berkaitan dengan titik-titik pada layar monitor. Digitized picture adalah gambar hasil rekaman video atau kamera yang dipindahkan ke komputer dan diubah ke dalam bentuk bitmaps. Hyperpictures, sama seperti hypertext hanya saja dalam bentuk gambar.
2.2.1.3  Animasi
Animasi adalah simulasi gerakan yang dihasilkan dengan menayangkan rentetan frame ke layer. Frame adalah satu gambar tunggal pada rentetan gambar yang membentuk animasi. Menurut Foley, Van Dam, Feiner dan Hughes (1997, p1057) Animate adalah untuk membuat sesuatu hidup, sebagian orang mengira bahwa animasi itu sama dengan motion (gerakan), tetapianimasi mencakup semua yang mengandung efek visual sehingga animasi mencakup perubahan posisi terhadap waktu, bentuk, warna, struktur, tekstur dari sebuah objek, posisi kamera, pencahayaan, orientasi dan focus dan perubahan dalam teknik rendering.


2.3  HTML
        HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser. Ada dua cara untuk membuat web page, dengan HTML editor atau editor text biasa (misal : notepad).

2.3.1     Penamaan Dokumen
Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi
”.htm” atau ”.html”

2.3.2        Definisi Elemen
       Dokumen HTML disusun elemen-elemen  atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list.

2.3.3        Definisi Tag
       Tag digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar. Tag umumnya berpasangan, sebagai contoh

Dengan

. Secara umum suatu elemen dalam dokumen HTML yangdinyatakan dengan tagnya, dituliskan : - .

2.3.4        Elemen HTML
        Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan
dengan tag <html>,<head>, dan <body>.Setiap dokumen terdiri atas tag head dan body. Elemen Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser. Secara umum dokumen web dibagi menjadi dua section, yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :
   -- Informasi tentang dokumen HTML

  -- Informasi yang akan ditampilkan dalam web browser



       Setiap dokumen html harus diwali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html. Section atau elemen head ditandai dengan tag <head> diawal dan tag </head> diakhir. Section ini beiris informasi tentang dokumen HTML, misalnya informasi judul html yang ditandai dengan tag <title>  dan diakhiri dengan tag </title>. Section body ditandai dengan tag <body> dan diakhiri dengan tag </body> diakhir. Section body merupakan isi dokumen yang akan ditampilakn pada browser.
Gambar 2.1. Contoh hasil di browser firefox

2.3.5        Penggunaan Tag
       Didalam penulisan dan penggunaan tag HTML perlu di perhatikan tata cara yang sudah di tetapkan , diantaranya adalah sebagai berikut :

1)      Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.
2)      Tag HTML secara normal selalu berpasangan seperti dengan

3)      Tag HTML tidak ‘case sensitive’, berarti

dama dengan


2.3.6        Atribut Tag
       Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih.  Tag berikut mempunyai atribut : <body bgcolor=”red”>. Tag <body> ini mempunyai atribut bgcolor dengan nilai “red’. Sehingga background akan menampilkan warna merah.

2.3.6.1 Tag Paragraf
       Setiap paragraf harus dimulai dengan memberi tag <p>. Diakhir paragraf tidak diharuskan menuliskan
sebagai akhir paragraf, karena tag <p> tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan <p> kembali. Setiap pergantian paragraf ditandai dengan tag <p>. Contoh listing tag paragraf:
Tag Paragraf

berikut ini adalah paragraf 1
berikut ini adalah paragraf 2
berikut ini adalah paragraf 3



2.3.6.2  Line Break
       Fungsi tag ini dapat memaksa ganti baris pada dokumen web dengan tag <br>. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Contoh line break adalah sebagai berikut :
Ganti Baris
ini adalah baris ke 1
ini adalah baris ke 2
ini adalah baris ke 3
ini adalah baris ke 4
ini adalah baris ke 5



2.3.6.3  Heading
       Tag heading akan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topik atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar. Contoh heading adalah sebagai berikut :
Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6



Gambar 2.2 Contoh Heading

2.3.6.4   Garis Pembatas
       Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag

. Contoh garis pembatas adalah sebagai berikut.
Horizontal Rule

Paragraf pertama

2.3.6.5  Komentar
       Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag sebagai akhir komentar. Contoh listing komentar :
                                                                                               

                                                                                   

Horizontal Rule

Tulisan ini akan ditampilkan di browser
2.4  Microsoft Word 2010
       Microsoft Office adalah suatu kumpulan software produktifitas perkantoran  yang pertama kali diluncurkan tanggal 30 Agustus 1992 sebagai office 3.0 yang menyertakan word untuk pengolahan kata, Microsoft Excel sebagai pengolah angka, Microsoft PowerPoint digunakan sebagai aplikasi presentasi dan Mail digunakan untuk menerima dan mengirim email. Sejak masa itu dan di awal tahun 2000-an Microsoft sudah merilis banyak versi office, setiap versinya mengalami pembaharuan demi pembaharuan dan menjadi semakin mutakhir baik dari segi pemakaian, fasilitas-fasilitas baru yang disertakan, serta penambahan program baru dalam kelompok office.
Microsoft Word 2010 merupakan salah satu program aplikasi pengolah kata atau dokumen versi terbaru yang termasuk ke dalam Microsoft Office 2010. Aplikasi ini pengembangan dari versi sebelumnya yaitu Microsoft Word 2007 yang sukses di rilis ke pasaran. Microsoft Word 2010 mempunyai tampilan user interface (UI) baru yang mengganti menu, toolbars, dan sebagian besar task panes yang ada di Microsoft Word versi sebelumnya dengan mekanisasi tunggal yang lebih simpel dan efisien. Fasilitas andalannya ini dinamakan Ribbon yang merupakan cara baru untuk mengelompokkan menu pada toolbar. User interface (UI) baru ini dirancang untuk membantu Anda bekerja lebih produktif serta mudah dalam menggunakan seluruh fasilitas dan fungsi yang ada.
Berikut ini adalah beberapa istilah yang akan dipakai dalam mengoperasikan Microsoft Word 2010:
2.4.1  Hotkey / shortcut
Berupa kombinasi beberapa tombol tertentu  pada keyboard yang menyebabkan
program aplikasi yang sedang berjalan untuk melakukan suatu proses tertentu

2.4.2        Toolbar (pada Mic. Word 2010 disebut ribbon)
     Ribbon adalah sekumpulan menu dalam setiap Tab. Sedangkan Group adalah sekumpulan atau kelompok menu dalam tiap Ribbon yang memiliki kesamaan fungsi. Sedangkan, Tab menyediakan Ribbon, Ribbon terdiri dari beberapa Group, dan Group terdiri dari sekumpulan menu yang memiliki kesamaan fungsi. Berikut adalah coontoh gambar ribbon dan group yang ditunjukan pada Gambar 2.3.
ribbon
Gambar 2.3 Menu dan Ribbon pada Tampilan Awal

2.4.3         Ruler  Margin (Indent)
       Fungsi dari ruler margin adalah untuk mengatur batas kiri dan kanan dari suatu halaman
 



First Line Indent
 
                                                                         

Right Indent
 

Hanging Indent
 
                                                           

Left Indent
 
                                                              
 


Gambar 2.4 Pengaturan Ruller (Garis)
      Didalam ruler margin, terdapat istilah- istilah yang dapat membatu dalam mengatur batas kiri dan kanan dari suatu halaman. Pengaturan ini dapat di sesuaikan oleh keinginan setiap pengguna , istilah pada ruler margin adalah sebagai berikut :
1). First Line Indent   
  Digunakan untuk mengatur posisi huruf pertama pada setiap awal paragraf
2). Hanging Indent
Digunakan untuk mengatur posisi huruf setelah baris pertama pada suatu paragraf
3). Left Indent
Digunakan untuk mengatur batas kiri untuk semua teks
4). Right Indent
Digunakan untuk mengatur batas kanan untuk semua teks
2.4.4  Clipboard
Group Clipboard terdiri dari sekumpulan menu yaitu:
 1). Paste  untuk menempelkan hasil copy atau cut.
 2). Cut untuk memotong teks/objek terpilih.
 3). Copy  untuk menggandakan teks/objek terpilih.
 4). Format Painter digunakan untuk meniru format halaman dokumen ke dalam dokumen lainnya.

clipboard
Gambar 2.5  Tampilan Clipboard
2.4.5  Font (huruf)
Menu-menu di Group Font secara khusus berfungsi untuk pemformatan seputar huruf. Terdiri dari :
1). Font  untuk memilih jenis huruf
2). Font Size  untuk mengatur ukuran huruf
3). Grow Font  untuk memperbesar ukuran huruf secara instan
4). Shrink Font untuk memperkecil ukuran huruf secara instan
5). Change Case  untuk mengubah status huruf kapital/huruf kecil
6). Clear Formatting  untuk menghapus pemformatan teks terpilih
7). Bold untuk menebalkan teks terpilih
8). Italic  untuk memiringkan Teks terpilih
9). Underline  untuk memberikan garis bawah pada teks terpilih
10). Strikethrough  memberikan tanda coret padateks terpilih
11). Subscript  untuk mengetik karakter pemangkatan
12). Superscript  untuk mengetik karakter pemangkatan
13). Text Effect  untuk memberikan efek artistik pada teks terpilih
14). Text Highlight Color  untuk memberikan warna stabilo di belakang teks terpilih
15). Font Color  untuk mengatur warna teks terpilih.
font
Gambar 2.6 Tampilan Font (Huruf) 
2.4.6  Paragraph (Paragraf)
Group Paragraph terdiri dari sekumpulan menu yang memiliki kesamaan fungsi untuk mengatur paragraf teks. perintah-perintah di Group Paragraph yaitu:
1). Bullets  untuk memberikan tanda bullet di tiap paragraf terpilih
2). Numbering  untuk memberikan format penomoran di tiap paragraf terpilih
3). Decrease Indent  untuk menggeser baris kedua paragraf ke kiri
4). Increase Indent  untuk menggeser baris kedua paragraf ke kanan
5). Left-to-Right  untuk menjadikan arah teks berjalan dari kiri ke kanan (format Latin)
6). Right-to-Left  untuk menjadikan arah teks berjalan dari kanan ke kiri (format Arab)
7).  Sort  untuk menyortir data
  8). Show Paragraph Marks  untuk menampilkan / menyembunyikan tanda koreksi paragraf
9).   Align Text Left  untuk mengatur teks rata kiri
10).  Center  untuk mengatur teks rata tengah
11).  Align Text Right  untuk mengatur teks rata kanan
12).  Justify  untuk mengatur teks rata kanan-kiri
13). Line Spacing untuk mengatur jarak antar baris teks
14). Shading  untuk mengatur warna latar teks terpilih
15). Border  untuk memberikan garis tepi pada teks terpilih.
paragraph
Gambar 2.7  Tampilan Paragraph (Paragraf)
2.4.7  Tampilan dan Fasilitas Microsoft Word 2010
         Microsoft word 2010 memiliki tampilan yang tidak banyak berubah dari Microsoft word 2007 , tampilan awal terdiri dari banyak fasilitas menu bar dan tools bar yang dapat membantu membuat dokumen menjadi lebih mudah. Tampilan awal dari Microsoft Word 2010 seperti gambar 2.8 berikut :
Gambar 2.8  Tampilan Microsoft Word 2010
2.5  Adobe Flash Professional CS3
Adobe Flash Cs3 Professional merupakan salah satu software bagian dari keluarga Adobe, yang sekarang menjadi salah satu standar untuk industri animasi dan web yang banyak digunakan. Perangkat lunak Adobe Flash yang selanjutnya disebut Flash dulunya bernama Macromedia Flash adalah software multimedia unggulan yang dulunya dikembangkan oleh Macromedia, tetapi sekarang dikembangkan dan didistribusikan oleh Adobe System. Sejak tahun 1996, Flash menjadi metode populer untuk menambahkan animasi dan interaktif web site. Flash biasanya digunakan untuk membuat animasi, hiburan dan berbagai komponen web, di integrasikan dengan video dalam halaman web sehingga dapat menjadi aplikasi multimedia yang kaya (Rich Internet Application). Flash tidak hanya digunakan untuk aplikasi Web, tetapi dapat juga dikembangkan untuk membangun aplikasi desktop karena aplikasi Flash selain dikompilasi menjadi format swf, Flash juga dapat dikompilasi menjadi format exe. Flash dapat digunakan untuk memanipulasi vektor dan citra raster, dan mendukung bidirectional streaming audio dan video. Flash juga berisi bahasa skrip yang diberinama Action Script. Flash dijalankan dengan Adobe Flash Player yang dapat ditanam pada browser, telephone celuler, atau software lain. Format file Flash adalah SWF, biasanya disebut ShockWave Flash movie. Berikut adalah tampilan start page pertama kali membuka Adobe Flash Professional CS3 pada gambar 2.9
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPxkzl7N2DhkRfqU9SMptKb2gIZYoa4MEmCjKG5qix3YGkYMMq4VxkKSZD0jwGjNeV_6ksDqQzTsoB_weht7OSl7ANjZJELNsyNte8k2QEFm9Wg43zBCOiw6EVDNXi73RW_U_NZJN16YI/s320/flash.jpg
Gambar 2.9 Tampilan Awal Adobe Flash Cs3

  2.5.1   Dasar-dasar Penggunaan Adobe Flash Professional CS3
       Penggunaan Adobe Flash Professional CS3 memang tidak sulit bagi yang sudah sering melakukan berbagai desain grafis, karena tools dan fasilitas yang terdapat pada Adobe Flash Professional CS3 cukup lengkap dan sederhana. Berikut penjelasan dasar-dasar penggunaannya.
 2.5.1.1  Halaman Awal  
       Halaman awal adalah tampilan pertama kali yang tampil ketika mengakses program Adobe Flash Professional CS3. Cara mengakses Adobe Flash Professional CS3 pertama kali adalah double klik pada icon Adobe Flash Professional CS3 yang ada di desktop atau lihat dari daftar program yang ada di Start Menu. Berikut adalah tampilan start page pertama kali membuka Adobe Flash Professional CS3. 
Gambar 2.10  Tampilan awal Page Adobe Flash Professional CS3
2.5.1.2  Jendela Utama 
      Jendela utama merupakan awal dari pembuatan program, pembuatannya dilakukan dalam kotak movie dan stage yang didukung oleh tools yang ada. Jendela kerja flash terdiri dari panggung (stage) dan panel-panel. Panggung merupakan tempat dimana objek diletakkan, tempat menggambar dan tempat menganimasikan gambar. Sedangkan panel disediakan sebagai tempat untuk membuat gambar, mengedit, dan menganimasikan gambar juga. Berikut ini adalah tampilan jendela utama Adobe Flash Professional CS3 yang dtunjukan pada gambar 2.11.
Gambar 2.11  Jendela Utama Adobe Flash Professional CS3
   Setiap menu dan tools dalam Adobe Flash Professional CS3 memiliki keterangan sebagai berikut  :
1). Menu Bar, adalah baris menu yang terdiri 11 elemen yang utama dan masing-
     masing memiliki submenu perintah lagi.
2). Timeline, adalah panel untuk mengatur dan mengkontrol jalannya animasi Flash yang meliputi kecepatan animasi dan penempatan objek yang  akan dibuat.
3). Color Panel, digunakan untuk memberi warna pada objek dan mengatur komposisi warna pada objek yang akan dibuat.
4). Stage, adalah area untuk menempatkan materi animasi, seperti objek gambar,
     video, teks, maupun tombol.
5). Property Inspector, berguna untuk mengatur setting stage, atribut objek, penggunaan filter, hingga mempublikasikan movie flash. Selain itu  properties panel juga akan menampilkan informasi ukuran dan posisi objek yang sedang dipilih.
6). Toolbox, adalah beragam piranti untuk menyeleksi, menggambar, memberi warna, memodifikasi objek hingga mengatur ukuran tampilan stage.

2.5.1.3  Toolbox
       Fasilitas Toolbox seperti yang telah dijelaskan sekilas diawal adalah beragam
piranti atau alat yang mempunyai fungsi tersendiri untuk keperluan desain. Berikut penjelasan setiap tool yang terdapat pada Toolbox.

Tabel 2.1  Tools Yang Terdapat Pada Toolbox
Gambar
Nama
Penjelasan
Selection
Tool
Digunakan untuk memilih atau menyeleksi suatu Objek
Subselection
Tool
Digunakan untuk menyeleksi bagian objek lebih detail daripada selection tool.
Free
Transform
Tool
Digunakan untuk mentransformasikan objek
Terseleksi
3D Rotation
Tool
Digunakan untuk melakukan 3D pada objek
berdasarkan sumbu X, Y dan Z.
3D Rotation
Tool
Digunakan untuk melakukan 3D pada objek
berdasarkan sumbu X, Y dan Z.
Pen Tool
Digunakan untuk menggambar garis dengan bantuan titik-titik bantu seperti dalam pembuatan garis, kurva ataupun gambar.
Text Tool
Digunakan untuk membuat objek teks ataupun paragraf.
Line Tool

Digunakan untuk menggambar objek garis lurus.
Rectangle
Tool
Digunakan untuk menggambar bentuk persegi.
Pencil Tool

Digunakan untuk menggambar dengan bentuk goresan pensil.
Brush Tool

Digunakan untuk menggambar dengan bentuk polesan kuas.
Deco Tool

Digunakan untuk menggambar corak dekorasi dengan menggunakan symbol grafik.
Bone Tool
Digunakan untuk membuat animasi pertulangan dengan menambahkan titik sendi pada objek.
Paint Bucket
Tool

Digunakan untuk member warna bidang objek.
Eyedropper
Tool
Digunakan untuk mengambil sampel warna dari sebuah objek.
Eraser Tool

Digunakan untuk menghapus bidang objek.
Hand Tool
Digunakan untuk menggeser area lembar kerja atau stage tanpa mengubah pembesaran.
Zoom Tool
Digunakan untuk memperbesar atau memperkecil tampilan lembar kerja atau stage.
Stroke Color
Digunakan untuk memilih atau member warna pada suatu garis
Fill Color
Digunakan untuk memilih atau member warna suatu objek.
Black And
White
Digunakan untuk mengubah warna garis dan bidang menjadi hitam putih.
Swap Colors

Digunakan untuk membalikkan warna antara warna garis dan warna bidang objek.

2.6   Kvisoft Flipbook Maker
       Kvisoft Flipbook maker adalah perangkat lunak untuk mengkonversikan file PDF ke bentuk menyerupai buku, perangkat lunak ini banyak digunakan oleh  penulis buku atau majalah yang hasil karyanya ingin di publikasikan baik online maupun offline, tetapi masih dalam bentuk digital.

2.6.1  Halaman Awal dari Kvisoft Flipbook Maker
      kvisoft flipbook maker memiliki tampilan yang sangat sederhana, tetapi fasilitas yang tersedia di dalam aplikasi ini cukup lengkap. Tampilan awal dari kvisoft flipbook maker terdiri dari menu dan tools yang akan di jelaskan pada gambar 2.8 berikut ini:
Gambar 2.12 halaman awal Kvisoft Flipbook Maker
       Setiap tools dan fasilitas dalam halaman utama dalam Kvisoft Flipbook Maker memiliki keterangan sebagai berikut :
1). Add File, berfungsi untuk menginput file berekstensi .pdf ataupun .fb  ke   dalam lembar kerja .
2). Page Edit, Berfungsi sebagai media peng editan halaman proyek ebook.
3). design, sebagai media pemilihan tempelate dan layout pada ebook
4). publish, proses perubahan ekstensi yang tadinya adalah file .pdf menjadi file dalam ekstensi lain, misalnya html, exe dan wallpaper.
5). Import, hamper sama fungsinya seperti add file , yaitu memasukan halaman dile ke lembar kerja.
6). Delete, berfungsi sebagai penghapus halaman dan juga file yang sudah di import.

2.7  Adobe Photoshop CS3
Adobe photoshop merupakan salah satu program pengolah gambar standar professional. Tutorial adobe photoshop merupakan perangkat lunak editor citra buatan adobe system yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak pengolah gambar atau foto dianggap sebagai produk terbaik yang pernah diproduksi oleh adobe system. Adobe Photoshop CS3 juga memiliki keunggulan untuk melakukan proses desain berbasis vektor. Dimana penggunaan vektor dalam Adobe Photoshop CS3 ini adalah object oriented.
Gambar 2.13  Tampilan Adobe Photoshop CS3
Shape sangat mudah untuk melakukan proses desain seperti seleksi, resize, drag dan beberapa proses desain lainnya terkait dengan pewarnaan. Selain itu, vektor atau shape dalam Adobe Photoshop CS3 memiliki resolusi independen, artinya ia mampu memberi batasan warna yang jelas pada setiap objek. Berikut ini adalah beberapa istilah yang akan dipakai dalam mengoperasikan Adobe Photoshop CS3 :
2.7.1  Crop Tool  
Crop Tool digunakan untuk memotong gambar, foto ataupun canvas (kertas kerja). Pemotongan dengan alat ini dilakukan secara permanen mengubah bentuk dimensi lebar dan tinggi foto. Pemotongan dilakukan dengan menentukan area potong berbentuk kotak dari sebuah foto.
Crop & Slice Tool
Gambar 2.14  Crop Tool 

2.7.2. Slice Tool 
Slice Tool  digunakan untuk kebutuhan website dengan cara memotong hasil desain yang telah dibuat di Photoshop menjadi potongan yang lebih kecil.
Crop & Slice Tool
Gambar 2.15 Slice Tool

2.7.3  Slice Select Tool 
Slice Select Tool digunakan untuk memilih potongan pada sebuah desain yang telah dipotong sebelumnya dengan menggunakan slice tool.
Crop & Slice Tool
Gambar 2.16  Slice Select Tool

2.7.4  Eyedropper Tool 
Eyedropper Tool digunakan untuk mengambil sample warna dari sebuah gambar ataupun foto, sample warna diambil dengan cara mengklik warna target yang kemudian secara otomatis akan mengubah warna depan (foreground color) pada toolbox.
Annotation, Measuring & Navigation Tool
Gambar 2.17  Eyedropper Tool
2.7.5  Ruler Tool 
Ruler Tool  digunakan untuk mengukur dimensi lebar dan tinggi.  alat ini biasanya digunakan untuk kebutuhan website seperti mengukur dan memperkirakan interface tinggi & lebar tombol, header ataupun area website lainnya. Satuan yang digunakan biasanya pixels.
Annotation, Measuring & Navigation Tool
Gambar 2.18  Ruler Tool 
2.7.6  Note Tool
Note Tool digunakan untuk memberikan catatan pada hasil desain yang telah di buat. Catatan ini berguna sebagai pengingat dalam proses pembuatan desain ataupun dapat berguna sebagai media untuk penyampaian sebuah pesan ketika bekerja secara team.
Annotation, Measuring & Navigation Tool
Gambar 2.19  Note Tool
2.7.7  Hand Tool
Hand Tool digunakan untuk menggeser atau memindah bidang pandang foto atau gambar di dalam window view area atau dalam kondisi gambar sedang di perbesar (zoom in). Cukup tekan dan tahan tombol spasi untuk meminjam alat ini.
Annotation, Measuring & Navigation Tool
Gambar 2.20 Hand Tool
2.7.8  Zoom Tool
Zoom Tool digunakan untuk memperbesar (+) ataupun memperkecil (-) tampilan foto atau gambar. Pengaturan zoom in atau zoom out dapat dilakukan melalui option bar.
Annotation, Measuring & Navigation Tool
Gambar 2.21  Zoom Tool
2.7.9  Move Tool
Move Tool digunakan untuk memindahkan posisi layer dalam satu foto ataupun memindahkan sebuah foto atau layer dalam sebuah foto ke foto yang lain / foto yang berbeda.
Selection Tool
Gambar 2.22 Move Tool
2.7.10  Rectangular Marquee Tool
 Rectangular Marquee Tool digunakan untuk menyeleksi objek yang berbentuk kotak. Klik kanan diatas alat ini maka akan muncul alat lain dari kelompok marquee tool seperti Eliptical Marquee Tool, Single Row Marquee tool dan Single Column Marquee Tool.
Selection Tool
Gambar 2.23  Rectangular Marquee Tool

2.7.11  Eliptical Marquee Tool 
Eliptical Marquee Tool digunakan untuk menyeleksi objek yang berbentuk lingkaran seperti menyeleksi lingkaran mata, ban mobil dan objek lain. Alat ini masih satu kelompok dengan Rectangular Marquee Tool.
Selection Tool
Gambar 2.24  Eliptical Marquee Tool
2.7.12  Lasso Tool 
Lasso Tool digunakan untuk menyeleksi objek dengan bentuk bebas, alat ini akan membentuk seleksi sesuai dengan gerakan mouse, penggunaan alat ini sangat bergantung dengan gerakan mouse sehingga cukup sulit mengendalikan dan mencapai hasil yang maksimal.
Selection Tool
Gambar 2.25 Lasso Tool

2.7.13  Polygonal Lasso Tool 
Polygonal Lasso Tool digunakan untuk menyeleksi objek dengan bentuk bebas bersudut, alat ini membentuk seleksi melalui titik-titik point yang dibuat dengan menggunakan klik kiri mouse. Alat ini juga dapat digunakan untuk memotong dan mengubah background foto.
Selection Tool
Gambar 2.26  Polygonal Lasso Tool

2.7.14  Magnetic Lasso Tool
Magnetic Lasso Tool digunakan untuk menyeleksi objek dengan bentuk bebas, cara kerja alat ini adalah menempel pada tepi objek yang akan dipotong ketika mouse bergerak mengelilingi tepian objek, selama proses seleksi alat ini membentuk titik-titik penghubung seleksi.
Selection Tool
Gambar 2.27  Magnetic Lasso Tool
2.7.15  Magic Wand Tool 
Magic Wand Tool digunakan untuk  menyeleksi satu jenis warna (warna solid) pada foto. Alat ini dapat menyeleksi dengan pengaturan nilai tolerance atau nilai cakupan warna, semakin besar nilai tersebut maka semakin luas cakupan warna yang di seleksi.
Selection Tool
Gambar 2.28  Magic Wand Tool
 2.7.16  Spot Healing Brush 
Spot Healing Brush digunakan untuk menghapus noda pada sebuah foto ataupun gambar, alat ini juga biasanya digunakan untuk menghilangkan noda di wajah ataupun menghilangkan jerawat diwajah.
Retouching Tool
Gambar 2.29  Spot Healing Brush
2.7.17  Patch Tool 
 Patch Tool digunakan untuk memperbaiki foto dengan cara memanfaatkan pola yang terdapat pada foto tersebut. Perbaikan dilakukan dengan menyeleksi kerusakan area kemudian menarik seleksi tersebut diatas pola target untuk menutupi area kerusakan.
Retouching Tool
Gambar 2.30  Patch Tool
2.7.18  Red Eye Tool
Red Eye Tool digunakan untuk menghilangkan efek mata merah yang timbul pada foto akibat pengambilan foto dalam kondisi gelap menyebabkan flash kamera memantulkan warna merah pembuluh darah dibalik mata.
Retouching Tool
Gambar 2.31  Red Eye Tool
2.7.19  Clone Stamp Tool 
Clone Stamp Tool digunakan untuk mengambil sample dari sebuah area gambar kemudian mengkloning atau menerapkan sample tersebut untuk dilukiskan diatas
area foto lain berdasarkan sample foto yang diambil.
Retouching Tool
Gambar 2.32  Clone Stamp Tool

2.7.20  Pattern Stamp Tool 
Pattern Stamp Tool digunakan untuk melukis image dengan menggunakan pola tertentu sesuai dengan pola yang dipilih pada option bar.
Retouching Tool
Gambar 2.33  Pattern Stamp Tool 

2.7.21  Eraser Tool 
Eraser Tool digunakan untuk menghapus foto atau gambar dalam sebuah layer eraser.
Retouching Tool
Gambar 2.34  Eraser Tool
2.7.22  Background Eraser Tool 
Background Eraser Tool  digunakan untuk menghapus foto atau gambar sehingga menghasilkan layer transparant pada bagian foto atau pada area yang dihapus.
Retouching Tool
Gambar 2.35  Background Eraser Tool
2.7.23  Magic Eraser Tool 
Magic Eraser Tool digunakan untuk menghapus area tertentu dari sebuah foto atau gambar yang memiliki warna yang serupa (satu warna solid) menjadi transparan dengan satu kali klik pada area warna tersebut. Bisa dimanfaatkan untukmenghapus background satu warna.
Retouching Tool  
Gambar 2.36  Magic Eraser Tool
2.7.24  Blur Tool 
Blur Tool digunakan untuk menghaluskan atau mengaburkan area tertentu dari sebuah foto atau gambar. Dengan mengaburkan gambar akan memberikan kesan halus, blur juga dapat menyamarkan pixels gambar.

Retouching Tool
Gambar 2.37  Blur Tool
2.7.25  Sharpen Tool
Sharpen Tool digunakan untuk menajamkan area tertentu dari sebuah foto atau gambar.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh39pS3Ir04WO5XkvrNdSf9RT4kQuCAc2BFheAJW70AygBohwRQ5uTbfjJ_Tz5xhtlrw-hEEtlTY40PhlBeETyfhSYoutlTIgN_V8vW1pHvEDAfBBTwoI8mFPB-hhAxC0mbDn-08jT85cSV/s1600/tools-photoshop-sharp.jpg
Gambar 2.38  Sharpen Tool
2.7.26  Smudge Tool 
Smudge Tool  digunakan untuk menggosok atau mencoreng area tertentu dari sebuah foto atau gambar seolah-olah di pengaruhi oleh sapuan jari telunjuk diatas sebuah lukisan.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNlr_lJtNU5vOBEnhi_clJQCuHP4YZZobjPunZ9aPGPjxkKfPeYJkmiXIM4sejCxnKwkDUkP5c6ABkVjOnpowZ9b2IgfNR3lEE0NYETlarVVNP_j1yQup_2bAEvVEJ9ng8WUiTji9X_68f/s1600/tools-photoshop-smudge.jpg
Gambar 2.39  Smudge Tool
2.7.27 Dodge Tool 
Dodge Tool digunakan untuk menerangkan warna di area tertentu pada gambar atau foto dengan memberikan highlights pada area tertentu hingga area tersebut tampak lebih cerah atau terang.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdZyKkPTxzXBIdfLaTYWFH7ytN55jB8ITW7OvJkVmKp4sYqVgc1SxpysYwdRh-i-qr7s7J4o7znmFfGWUYTFZOiRBO3169DxK3M-VnKirfo3HFCxk0kdvblAsy0i0JBsDaFj57-SLzppeJ/s1600/tools-photoshop-dodge.jpg
Gambar 2.40  Dodge Tool
2.7.28  Burn Tool 
Burn Tool digunakan untuk menggelapkan warna di area tertentu pada gambar atau foto dengan memberikan shadow / bayangan pada area tertentu hingga tampak lebih gelap.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtM6N4HRcNTguK3gEASKpiXCR54Aynp_tUFNm6WhJUU62_IkTfBZ-DGt6QknXejn6N0Yoo77FW5h6MriXUlNAbEPyGqG-bb9N0BOPfefPKkEvXP2Ojo9VcpDIbvcYuUKLh3FU-2IK7hQVu/s1600/tools-photoshop-burn.jpg
Gambar 2.41  Burn Tool
2.7.29  Sponge Tool 
Sponge Tool digunakan untuk mengubah saturation di area tertentu pada area gambar atau foto.  
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihIRo1EjHOwA0yOUKikCB8IwOcd0MO4A-vFuhUwclTT9xTclAkFwzSYM3R5j3PehcuQf72o8Jp8YPZlagcjFx6SsC0TA81q_crEubill_6QZC529BpEsXRsfHIat8zxcGiKOcXE4CCwMOl/s1600/tools-photoshop-sponge.jpg
Gambar 2.42  Sponge Tool
2.7.30  Brush Tool 
Brush Tool digunakan untuk melukis foto atau gambar dengan goresan kuas berdasarkan warna depan (foreground color) yang telah dipilih.
Painting Tool
Gambar 2.43  Brush Tool
2.7.31  History Brush Tool 
History Brush Tool  digunakan untuk melukis image (gambar) menggunakan snapshot atau state history dari Image
.Painting Tool
Gambar 2.44  History Brush Tool

2.7.32  Art History Brush Tool 
Art History Brush Tool  digunakan untuk melukis image menggunakan snapshot atau state history dari image, dengan model artistik tertentu.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaJDjtaFg3SYM0GBYKL22cTl6HSgSn75h0S1t0T7nlnM7Y9KGqiHz0oQbt9-TTDCS9aQ8tg2dX2Imb3N0O5YOqgkcLxczaQOp556-ukxRbRRkyEnAdCsoiKtX9vEgh6g7OdMJ7gBC8hioy/s1600/tools-photoshop-art-history.jpg
Gambar 2.45  Art History Brush Tool

 2.7.33  Pencil Tool 
Pencil Tool digunakan untuk melukis dengan efek goresan pensil.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLEwlnIJlvUpwI0Uc5zP5VWlxoZXnsnDUqhhHBMdDzEx1LLUDNiP1JPsiQSojYsv4WqsuyHEjBj_70YwN4kcHu3ST1ohK5u2LgvhDyTt8ZdIix4fWC9yYzLCg-z_i9e1HXhECpgdyFkaZd/s1600/tools-photoshop-pencil.jpg
Gambar 2.46  Pencil Tool

2.7.34  Gradient Tool 
Gradient Tool digunakan untuk mengecat area yang dipilih (selected area) dengan perpaduan dua warna atau lebih. Gradient ini juga memiliki beberapa pengaturan dan tipe untuk menghasilkan efek perpaduan warna yang sesuai dengan keinginan.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbYhnVhHEmcxx2ha31lGzPA8xtKeWO6fJKf9nfp8EjHd0nx7ICXNIphktQNw1qP33iEFmOEBZHZzfzm9vaZ48mAMmi_cwS-fiwKTGlVqJDIcBj0vdt2kbkkEp33_-I9A0vYTqZxgtN1Dq/s1600/tools-photoshop-gradient.jpg
Gambar 2.47  Gradient Tool
 2.7.36  Path Selection Tool 
Path Selection Tool  digunakan untuk menyeleksi path yang telah dibuat dengan menggunakan pen tool.
Drawing and Type Tool
Gambar 2.48  Path Selection Tool 

2.7.37  Horizontal Type Tool 
Horizontal Type Tool digunakan untuk membuat teks secara horizontal. Selain alat ini ada juga Vertical Type Tool untuk membuat teks secara vertical dan type mask untuk membuat teks dalam bentuk seleksi.
Drawing and Type Tool
Gambar 2.49  Horizontal Type Tool

2.7.38  Pen Tool 
Pen Tool digunakan untuk menggambar path sudut ataupun lengkung. Alat ini biasa juga digunakan untuk menyeleksi objek. Selain alat ini ada kumpulan alat lain untuk menambah titik point, mengurangi dan memodifikasi path yang telah dibuat.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjawKWnp3Z7t6M3gg4h0w5U3bEq2Tqx_oATII7mPFprbQodjXS_C4mwDGKg7ZptdD7jev1G09mZkm04QAsBeADzh1K-yJySpn44dGTHZw1QWal2ZhsH5xdKOEfbGCdS1E_28W-2oqknHnj9/s1600/tools-photoshop-pen.jpg
Gambar 2.50  Pen Tool

2.7.35  Paint Bucket Tool 
Paint Bucket Tool  digunakan untuk mengecat atau mewarnai area tertentu atau
layer tertentu berdasarkan warna depan (foreground color) yang telah dipilih.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5F89QjUGKeHRyfXsbfV4wSqNKY-sWcmUEns8DdrtMUmat75ih5MjwpVJZTBOJUEAXMyJ1kbVI1yGKYKP0-FFR0IW7YK8MQMthHK5vYxcapa3PWeidTiQyBiwytPzQElFxVenBAnYnY6wQ/s1600/tools-photoshop-paint-bucket.jpg
Gambar 2.51  Paint Bucket Tool 



BAB 3
 ANALISA DAN PEMBAHASAN

       Pada bab ini penulis akan menjelaskan tentang pembahasan dan perancangan yang digunakan dalam membuat e-book bab pertama dan sub babnya. Tahapan-tahapan yang telah dilakukan untuk mendukung pembuatan aplikasi ini dimulai  dari membuat struktur navigasi, mendesain tampilan cover, menulis materi, merancang interface, pembuatan interface, implementasi dan uji coba.
3.1 Struktur Navigasi
  
 

Menu Utama
 







Gambar 3.1 Struktur Navigasi E-book Kombinasi Permutasi

Struktur navigasi campuran (Composite) merupakan struktur yang dipakai pada penulisan ini. Dalam ebook ini terdiri dari tiga menu utama, yaitu menu bab, bantuan, dan informasi. Menu Bab di hubungkan secara hirarki dengan sub bab yang terkandung dalam materi kombinasi permutasi.
3.2  Rancangan Tampilan E-book Kombinasi Permutasi
Rancangan tampilan aplikasi merupakan hal yang sangat penting untuk menarik pengguna saat berinteraksi dengan E-book kemudahan mendapatkan informasi yang dibutuhkan dengan praktis dan efisien. 
        Dengan memberikan desain ini, diharapkan agar sebelum sampai pada tahap penjelasan proses pembuatan, aplikasi ini sudah dapat dilihat secara menyeluruh sehingga dapat dipahami dengan jelas apa yang akan dibahas pada proses pembuatan ebook ini.
3.2.1 Rancangan Halaman  Utama
Halaman menu merupakan halaman yang ditampilkan saat pertama kali muncul di browser, dimana halaman ini terdapat delapan buah tombol yaitu language, music, zoom out, zoom in, play, first page, next page, previous page dan last page, ditambah dua label yaitu label judul dan text. ( pada gambar 3.2 )
Gambar 3.2 Rancangan Halaman Utama
       Pada halaman utama yang ditampilkan pertama kali pada browser, terdapat berbagai macam button dan label. Berikut ini akan dijelaskan fungsi dari berbagai tools dari gambar 3.2 berikut :
1).  label 1, berisi tulisan dari judul ebook yaitu “ Kombinasi Permutasi”
2). b1, berarti button 1, yaitu button yang berfungsi mengaktifkan dan
     menonaktifkan suara pada ebook.
3).  b2, berarti button 2, yaitu button yang berfungsi memperbesar tampilan ebook
4).  b3, berarti button 3, yaitu button yang berfungsi memperkecil tampilan ebook
5).  b4, berarti button 3, yaitu button yang berfungsi mengatur bahasa pada ebook
6).  b5, berarti button 5, yaitu button yang berfungsi membuat ebook membuka
      halaman ecara otomatis, dengan efek flip dan bersuara.
7).  b6, berarti button 6, yaitu button yang berfungsi membuat ebook menampilkan
      halaman awal, dengan efek flip dan bersuara.
8).  b7, berarti button 8, yaitu button yang berfungsi membuat ebook menampilkan
       halaman sebelumnya,.
9). b8, berarti button 8, yaitu button yang berfungsi membuat ebook menampilkan
       halaman selanjutnya, dengan efek flip dan bersuara.
10). b9, berarti button 9, yaitu button yang berfungsi membuat ebook menampilkan
       halaman paling akhir, dengan efek flip dan bersuara.
11). b10, berarti button 10, yaitu button yang berfungsi membuat ebook
       menampilkan halaman Full screen.

3.2.2 Rancangan Halaman Menu Utama dan Menu Bab
       Didalam ebook kombinasi permutasi ini terdapat dua Menu, yang pertama adalah menu utama dan yang kedua adalah menu bab. Menu utama adalah menu yang terdiri dari sub menu yaitu menu bab, informasi dan bantuan. sedangkan menu bab adalah menu yang terdiri dari enam sub menu yang berisi materi kombinasi permutasi.

3.2.2.1 Halaman Menu Utama
       Di dalam rancangan halaman menu utama, pengguna akan disuguhkan tampilan yang menawarkan menu dari ebook kombinasi permutasi. Pada kotak berlabel MENU berisi tulisan dari judul halaman menu utama. Kotak berlabel Menu Bab adalah tombol yang berfungsi  untuk menuju ke halaman dimana Menu Bab berada. Kotak berlabel Informasi adalah tombol yang berfungsi untuk menuju ke halaman dimana halaman informasi berada. Kotak berlabel bantuan adalah tombol yang berfungsi untuk menuju ke halaman dimana halaman bantuan berada. Berikut ini merupakan tampilan rancangan pada halaman menu utama yang ditampilkan dalam gambar 3.3 berikut :
Gambar 3.3  Rancangan Halaman Menu Utama

3.2.2.2   Halaman Menu Bab 
  Di dalam rancangan halaman menu bab, pengguna akan disuguhkan tampilan yang menawarkan menu dari materi yang terkandung dalam buku kombinasi permutasi. Pada kotak berlabel b10 berisi tulisan BAB1, untuk menuju ke halaman dimana Bab 1 berada. Kotak berlabel b11,  berisi tulisan BAB 2 untuk menuju ke halaman dimana Bab 2 berada. Kotak berlabel b12 berisi tulisan BAB 3 untuk menuju ke halaman dimana Bab 3 berada. Kotak berlabel b13 berisi tulisan BAB 4 untuk menuju ke halaman dimana Bab 4 berada. Kotak berlabelb 14 berisi tulisan BAB 5 untuk menuju ke halaman dimana Bab 5 berada. Kotak berlabel button  berisi tulisan MENU untuk menuju ke halaman dimana MENU berada Berikut ini merupakan tampilan rancangan pada halaman menu bab yang ditampilkan dalam gambar 3.4 berikut :
Gambar 3.4  Rancangan Halaman Menu Bab
  3.2.2.3 Rancangan Halaman Judul Bab

       



Gambar 3.5 Rancangan Judul Bab
Pada rancangan halaman judul bab ini, pengguna akan mendapatkan petunjuk untuk menggunakan aplikasi ini. Pada halaman judul bab, kotak berlabel Text berisi tulisan mengenai judul bab yang sedang dibaca.

3.2.2.4  Rancangan Halaman Informasi
       Halaman ini dirancang dengan terdiri dari background sebagai latar belakang halaman, pada kotak berlabel Judul berisi tulisan mengenai judul dari halaman informasi. Pada kotak berlabel Text berisi tulisan mengenai keterangan pembuat e-book dan juga penulis buku. Kotak berlabel Button  berisi tulisan MENU untuk menuju halaman menu utama . Berikut ini adalah rancangan halaman Informasi pada gambar 3.6.





Gambar 3.6 Rancangan Halaman Informasi

3.2.2.5 Rancangan Halaman Bantuan
Gambar 3.7 Rancangan Halaman Bantuan
       Tampilan halaman informasi kotak berlabel G yang berisi gambar yang berhubungan dengan penjelasan organ. Kotak berlabel penjelasan yang berisi tulisan mengenai penjelasan mengenai cara- cara menggunakan ebook. Rancangan tampilan halaman bantuan bisa dilihat seperti gambar 3.7 berikut :
3.3  Langkah-Langkah Pembuatan Aplikasi
      Pada bagian ini penulis akan menjelaskan langkah-langkah pembuatan ebook, setelah melalui tahap perancangan halaman ebook kemudian langkah berikutnya adalah pembuatan ebook sesuai rancangan tampilan yang telah dibuat sebelumnya.
      Tahap pembuatan Ebook dibagi menjadi empat bagian yaitu pembuatan desain cover baik itu cover menu dan judul. Penulisan materi, mengkonversi file .doc ke file .pdf, pembuatan animasi, dan pembuatan e-book pada Kvisoft Maker. Pembuatan cover dibuat menggunakan perangkat lunak Adobe Photoshop Cs3. Penulisan materi dilakukan pada aplikasi Microsoft Word 2010.
3.3.1 Pembuatan Desain Cover
Langkah pertama dalam pembuatan desain cover adalah membuka software Adobe Photoshop Cs3, ukuran yang digunakan dalam pembuatan objek adalah ukuran kertas A4 dengan resolusi 210 dan 297 mm dengan warna dasar putih.
Gambar 3.8 Projek Baru pada Adobe Photoshop Cs3.
        Selanjutnya memasukan background yang sudah di unduh dari [9]. Gambar yang sudah di unduh kemudian di lakukan penambahan text bertuliskan “KOMBINASI PERMUTASI” dengan jenis huruf KG Flavor And Frames Six diberikan efek putih dan pita pada latarnya.
Gambar 3.9 Penambahan Background dan Text
Langkah selanjutnya adalah penambahan tulisan “UNIVERSITAS GUNADARMA“ dan “DILENGKAPI ANIMASI“ pada bawah background projek seperti gambar 3.10 berikut.
Gambar 3.10 Penambahan judul tulisan pada projek.
       Kemudian untuk bagian pelengkap dari cover di tambahkan tulisan rumus-rumus matematika permutasi dan kombinasi. Setelah selesai mendesain, file disimpan dengan format .jpg, dengan cara klik File kemudian  Save as pilih format .JPG lalu Save. Hasil akhir desain cover ebook bisa dilihat seperti gambar 3.11 berikut.
Gambar 3.11 Hasil Desain Cover E-book
    Selanjutnya dilakukan perancangan cover menu. Background menu, diunduh dari  [10]. File yang sudah di unduh kemudian di lakukan penambahan text bertuliskan “MENU” Setelah selesai mendesain, file disimpan dengan format .jpg, dengan cara klik File kemudian Save as, pilih format .JPG dan Save. Hasil akhir desain bisa dilihat seperti gambar 3.12 berikut :
Gambar 3.12 Hasil Desain Cover Menu
        Untuk melengkapi tampilan cover pada menu, beberapa gambar akan di input yang nantinya akan berfungsi sebagai button yang apabila di tekan akan menjalankan perintah sesuai dengan fungsinya. Software Adobe Photoshop masih digunakan untuk mendesain gambar yang nantinya akan dijadikan button. Langkah pertama dalam membuat button adalah membuka projek baru, kemudian masukan icon layar Apple Mac yang sudah di unduh dari [11].

Gambar 3.13  Pembuatan Tombol dengan Gambar Layar
        Setelah gambar di tambahkan kemudian beri warna ungu pada image lalu di beri efekshadow. Hasil dapat dilihat pada gambar 3.14 berikut:
Gambar 3.14 Icon yang diberikan Shadow
      Gambar yang sudah diwarnai kemudian ditambahkan text “Menu Bab” seperti gambar 3.15 berikut :
Gambar 3.15 Penambahan Text pada Shape
       Setelah selesai melakukan pembuatan desain untuk tombol “MENU BAB”, kemudian di buat lagi tombol yang lainya dengan menggunakan cara yang sama seperti cara pada saat pembuatan tombol “MENU BAB”. Desain yang sudah jadi kemudian di simpan dalam format .png.
      Hasil akhir desain keseluruhan button akan nampak pada gambar 3.16 berikut:
Gambar 3.16 Hasil Desain Button pada Menu
       Selanjutnya dilakukan perancangan cover menu bab, Untuk background menu, diunduh dari [10] :
Gambar 3.17 Background yang Digunakan Untuk Halaman Menu Bab
       Gambar yang sudah di unduh kemudian di beri sedikit tambahan text bertuliskan “ MENU BAB “. Hasil akhir desain bisa dilihat pada  gambar 3.18 berikut .
Gambar 3.18 Hasil Desain Cover Menu Bab
        Setelah selesai mendesain, file disimpan dengan format .jpg, dengan cara klik File lalu Save as kemudian pilih format .JPG dan Save.
      Pada bagian halaman menu bab dilengkapi dengan enam tombol, setiap tombol pada ebook ini di desain dengan software Adobe Photoshop. Untuk gambar yang akan dijadikan tombol pada menu bab di unduh dari [12].
Gambar 3.19 Desain Tombol pada Menu Bab
       Gambar yang sudah di unduh kemudian di tambahkan text sesuai dengan judul bab masing masing dan di beri warna yang berbeda- beda. Hasil desain tombol untuk menu bab1 sampai bab 5 dapat dilihat pada gambar 3.20 berikut:
Gambar 3.20 Desain Tombol Bab 1 sampai Bab 5
       Setelah selesai mendesain, file disimpan dengan format .png, dengan cara klik File lalu Save as kemudian pilih format .PNG dan Save. Selanjutnya dilakukan perancangan halaman informasi dan bantuan. Untuk background informasi dan bantuan di unduh dari [10].
Gambar 3.21 Background halaman informasi dan bantuan
       Gambar yang sudah di unduh kemudian di tambahkan text sesuai dengan judul halaman masing. Hasil desain halaman informasi dan bantuan dapat dilihat pada gambar 3.22 berikut:
Gambar 3.22 Desain Halaman Informasi dan Bantuan
       Setelah selesai mendesain, file disimpan dengan format .jpg, dengan cara klik File lalu Save as kemudian pilih format .JPG dan Save. Bagian awal dari sebuah bab akan di buat sederhana , bagian ini dinamakan judul bab. Hasil akhir desain judul bab dari bab 1 sampai bab 5 bisa dilihat pada gambar 3.23 berikut.
Gambar 3.23 Desain Cover Judul Bab 1 sampai Bab 5

3.3.2 Persiapan Materi
      Materi diambil dari draf file yang sudah disediakan [1] tetapi perlu pengeditan di beberapa tempat  pada Microsoft Word 2010, penulis menggunakan pengaturan seperti gambar 3.24 berikut.
Gambar 3.24 Tampilan Pengaturan pada Microsoft Word
      Penulisan materi matematika kombinasi dan permutasi ini dikerjakan sama seperti menulis artikel lainya, tentunya dengan di pandu dengan petunjuk penulisan yang benar. Dalam penulisan materi kombinasi dan permutasi ini banyak dijumpai rumus- rumus matematika, untuk menulis rumus matematika pada Microsoft word 2010 adalah klik Insert  lalu Equation kemudian pilih rumus mana yang akan digunakan. Untuk melihat hasil dari penulisan rumus menggunakan equation dapat dilihat pada gambar 3.25 berikut.
Gambar 3.25 Menulis Rumus Menggunakan Equation
       Agar lebih menarik materi ebook yang masih dalam bentuk .doc perlu di tambahkan dengan cover ebook maupun cover menu yang sebelumnya sudah dibuat pada Adobe Photoshop. Untuk memasukan file .jpg ke Microsoft Word, klik insert kemudian Picture lalu pilih gambar mana yang akan di masukan dan insert. Hasil akhir penambahan gambar pada materi dapat dilihat pada gambar 3.26 berikut :
Gambar 3.26  Insert Gambar pada Microsoft Word
       Setelah semua materi selesai di ketik beserta rumus- rumus dan cover nya. Kemudian materi di save dahulu dalam format .doc, untuk menyimpan file pada Microsoft word 2010, klik window kemudian save lalu beri nama file , pilih folder penyimpanan dan save. Cara yang lebih cepat adalah klik icon disket pada toolbar lalu beri nama file kemudian pilih folder penyimpanan dan save.
Gambar 3.27 Penulisan Materi pada Microsoft Word

3.3.3 Pengkonversian file
       Pada pengkonversian file ini, penulis menggunakan plugin PDF or XPS. Plug in teresebut berfungsi menyimpan file yang sebelumnya berekstensi .doc menjadi Pdf.
Gambar 3.28  PlugIn PDF or XPS pada Microsof Office 2010
Setelah Plug in selesai terpasang, selanjutnya buka file yang akan di simpan ke dalam ekstensi .Pdf. Langkah terakhir dalam proses pengkonversian file adalah klik icon Window lalu Save As kemudian pilih PDF or XPS , beri nama file dan Publish.
3.3.4  Pembuatan Desain Bola dan Kotak Penampung Bola
Dalam membuat desain Pada pembuatan bola dan kotak penampung bola digunakan Software Adobe Photoshop CS3.
1). Langkah pertama dalam pembuatan bola dan kotak penampung bola adalah membuka software Adobe Photoshop Cs3, ukuran kertas yang digunakan dalam pembuatan objek adalah A4 dengan resolusi 8.268 inch x 11.693 inch dengan warna dasar putih transparan.

Gambar 3.29  Tampilan Lembar Kerja Baru pada Photoshop Cs3

2). Langkah selanjutnya adalah membuat tiga bola dengan warna yang berbeda dan caranya adalah pertama mengkilk kiri pada icon Elliptical Marquee Tool dan membuatnya menjadi bulatan, setelah itu diberikan warna merah dan biru dengan efek drop shadow serta gradient yang terdapat pada blending option setelah selesai di simpan dalam format png. Hasil dari pembuatan bola dapat dilihat pada gambar 3.30 berikut.
Gambar 3.30 Hasil Pembuatan Tiga Bola
3). Langkah selanjutnya pembuatan kotak penampung bola, langkah pertama dengan memasukan gambar yang di unduh dari [13] gambar yang sudah di unduh kemudian diberikan Text penomoran pada kotak penampung dengan urutan 1,2,4 dan 4 setelah selesai di simpan dalam format png. Hasil dari pembuatan kotak penampung bola dapat dilihat pada gambar 3.31:

 Gambar 3.31  Pembuatan Kotak Penampung Bola

3.3.5 Pembuatan Animasi       
       Dalam membuat animasi interaktif digunakan aplikasi Adobe Flash Profesional CS3. Animasi ditambahkan supaya pembaca dapat mengerti bagaimana langkah- lankah dalam mengerjakan soal yang sudah disediakan. Berikut ini adalah langkah- lankah pembuatan animasi menggunakan aplikasi Adobe Flash Professional CS3 :
1.)  Aplikasi Adobe Flash Profesional dibuka, kemudian untuk membuat projek baru dipilih menu Create New dan pilih ActionScript 2.0
Gambar 3.32 Tampilan Awal Adobe Flash Profesional CS3
2.) Dalam animasi yang akan dibuat, digunakan gambar sebagai background. Gambar yang digunakan adalah gambar yang di unduh dari [8]. Untuk memasukan gambar ke dalam projek adalah dengan memilih menu File kemudian dipilih menu import to library.           
Gambar 3.33 Memasukan Gambar ke Projek
3.)  Gambar yang sudah di import ke dalam library kemudian di drag ke area projek dan diatur sama rata.
Gambar 3.34  Latar Background
4.) Kemudian ditambahkan teks yang bertuliskan Contoh “1.10: dengan mengkilik kiri pada Text Tool  dan di beri warna hitam tebal.
Gambar 3.35 Scene Cover yang Sudah diberikan Teks “ Contoh 1.10“

5.) Scene isi yang telah diberi background, kemudian di tambahkan tiga buah tombol. Tombol yang di tambahkan adalah tombol play, pause dan stop. Tombol play berfungsi untuk memainkan animasi, tombol pause berfunsi untuk membehentikan sementara animasi yang berjalan, dan tombol stop berfungsi menghentikan animasi.
Gambar 3.36 Scene isi yang telah ditambahkan tombol Play, Pause dan Stop
      Untuk membuat ketiga tombol berfungsi sesuai perintah, maka ketiga tombol harus diberi script action. Untuk menambahkan script action adalah dengan cara klik area tombol yang akan diberi script, kemudian dipilih menu action. Setelah itu diberi perintah atau script action seperti gambar 3.37 berikut.
Gambar 3. 37 Script Action untuk Tombol Play
Gambar 3.38 Script Action untuk Tombol Pause
Gambar 3.39 Script Action untuk Tombol Stop
6.)  Scene yang sudah diberi tombol kemudian dilanjutkan dengan  memasukan gambar bola serta kotak penampung bola dan mengatur munculnya ”Cara :1”  selanjutnya muncul animasi bola, dimana jatuhnya bola  merah pertama ke kotak angka satu, bolah merah kedua jatuh ke kotak nomer dua dan bola biru ke tiga jatuh ke kotak nomor tiga. Efek jatuhnya bola satu- persatu dengan jarak  16  frame sampai dengan 20 frame permunculnya bola. Efek jatuhnya bola sengaja di munculkan satu-persatu supaya pembaca dapat memahami banyaknya cara bola masuk ke dalam kotak, demikian juga dengan “Cara :2” hingga Cara : 12.
Gambar 3.40 Pengaturan Jatuhnya Bola ke Dalam Kotak Penampung
7). Saat animasi berjalan diberi tambahan efek bola jatuh ke dalam kotak . Gambar bola yang sudah di impor ke dalam library kemudian di drag ke area yang akan di pasang. Untuk membuatnya menjadi animasi bergerak adalah dengan cara klik kanan pada layer bola pilih Create Motion Twin sesuaikan dengan panjang durasi jatuhnya bola kemudian klik kanan dan Insert Key Frame, lakukan cara yang sama dengan bola lainnya dengan nomor kotak yang berbeda.

Gambar 3.41 Masuknya Bola ke Dalam Kotak
8).  Supaya bola dapat masuk ke dalam kotak dengan benar dilakukan penyusunan layer yang terdiri dari layer 1 dengan nama kotak bawah, layer 2 dengan nama bola 3, layer 3 dengan nama bola 2, layer 4 dengan nama bola , layer 5 dengan nama kotak atas, layer 6 dengan nama scene 3, layer 7 dengan nama background dan layer 8 dengan nama scene 1.
Gambar 3.42  Susunan Layer Animasi
9). Scene  yang memunculkan “Cara :2”  diberikan  efek bola merah pertama jatuh ke kotak pertama, efek bola merah ke dua jatuh ke kotak nomor dua, efek bola biru ke tiga jatuh ke kotak nomor empat.
Gambar 3.43  Susunan Jatuhnya Bola pada Cara :2.
10).  Scene selanjutnya akan menampilkan jatuhnya bola ke kotak penampung bola dari Cara : 3 sampai dengan Cara :12. Dimana hasil jatuhnya bola ke kotak dapat terlihat pada gambar 3.44 berikut.
Gambar 3.44  Hasil Jatunya Bola dari Cara :1 sampai Cara :12.
3.3.6  Pembuatan Ebook pada Kvisoft Flipbook Maker
      Aplikasi Kvisoft Flipbook maker pada desktop dibuka, selanjutnya dapat dibuat projek baru dengan cara klik Import lalu pilih file ber format .pdf  kemudian  open , atur resolusi, kualitas dan ukuran ebook sesuai keinginan dan Ok.
Gambar 3.45 Pembuatan Projek Baru Kvisoft Flipbook Maker

3.3.7 Pembuatan Halaman Menu
1.)   Untuk membuat dan mengedit halaman dari ebook pada software Kvisoft Flipbook Maker, penulis menggunakan tool Edit Page pada toolbar. Pada pembuatan halaman menu, penulis hanya menambahkan tiga file berformat .png yang nantinya akan dijadikan tombol yang memiliki fungsi jika ditekan. Untuk proses penginputan file .png, Add Image dipilih kemudian  zona gambar diseleksi, resolusi dan fungsi diatur dan ok . Untuk pengaturan resolusi dan fungsi akan di jelaskan pada gambar 3.45 berikut.
Gambar 3.46 Pengaturan Tombol Menu Bab
Gambar 3.47 Pengaturan Tombol Informasi
Gambar 3.48  Pengaturan Tombol Bantuan
2.)   Setelah semua gambar berhasil di input ke dalam halaman menu, dan disesuaikan dengan resolusi dan fungsi nya sebagai button seperti gambar 3.48 diatas. Hasil akhir dari penginputan gambar akan nampak seperti gambar 3.49 berikut :
Gambar 3.49 Page Edit Halaman Menu
3.3.7.1 Pembuatan Halaman Menu Bab
       Pembuatan halaman Menu Bab ini terdapat enam tombol yaitu Bab1 (fungsi kombinatorik), Bab2 (fungsi pembangkit), Bab3 (relasi rekursif), Bab4 (grup & ring), Bab5 (pembangkit objek kombinatorik). Dalam pembuatan halaman Menu Bab ini, langkah yang dilakukan hampir sama seperti saat membuat halaman Menu. yang pertama dipilih dahulu halaman yang akan di edit dalam tool Page Edit.
Gambar 3.50 Pembuatan Halaman Menu Materi
Input gambar berformat .png dengan tool Add Image, kemudian seleksi zona yang akan di pasang gambar. Untuk pengaturan gambar yang akan menjadi tombol akan di jelaskan pada gambar berikut .
Gambar 3.51 Pengaturan Tombol Bab1 dan Bab2



Gambar 3.52 Pengaturan Tombol Bab3 dan Bab4



Gambar 3.53 Pengaturan Tombol Bab5
       Setelah semua gambar di input dan di sesuaikan pengaturannya seperti gambar diatas, hasil akhir dari pembuatan halaman Menu bab akan terlihat seperti gambar 3.54 berikut.
Gambar 3.54 Tampilan Halaman Menu Bab
3.3.7.2  Pembuatan Halaman Judul Bab
1).  Pilih halaman yang akan di edit pada tool Edit Page, kemudian pilih tool Add Image untuk memasukan gambar ke lembar Edit Page. Resolusi dan fungsi dari tombol yang sudah di input diatur seperti gambar 3.55 berikut.
Gambar 3.55 Pengaturan Tombol Menu
2). Langkah nomor satu diatas dilakukan kepada setiap halaman judul bab, maka hasil akhir dari desain halaman judul bab akan di tampilkan pada gambar 3.56 berikut.
Gambar 3.56 Tampilan Halaman Judul Bab
3.3.8 Memasukan Animasi ke Ebook
       Pada aplikasi Kvisoft Flipbook maker, terdapat fasilitas untuk memasukan file animasi. File animasi yang akan dimasukan dalam ebook Kombinasi Permutasi ini adalah animasi pengerjaan contoh soal yang berformat .swf.
1)  Langkah pertama dalam memasukan animasi adalah memilih menu Page Edit. Kemudian pilih menu add SWF, pada bagian kiri slide. Add SWF berarti memasukan file animasi berformat .swf.
Gambar 3.57 Dialog pada Menu Add SWF
       Setelah muncul dialog Add SWF, maka pada kolom File Name di isi dengan nama file animasi yang sudah disimpan sebelumya.
Gambar 3.58 Ebook yang Sudah di Masukan Animasi
3.3.9  Mendesain Template Ebook
       Tampilan ebook  di desain sedemikian rupa agar terlihat dinamis dan menarik, maka dari itu di lakukan pengaturan pada template yang sudah disediakan oleh software Kvisoft Flipbook Maker, agar lebih sederhana dan juga dinamis.
Langkah pertama dalam melakukan pengaturan template, mengklik Menu Design pada menu bar kemudian dipilih Style , Advance setting dan dipilih main setting kemudian pengaturan diatur seperti gambar 3.59 berikut.
Gambar 3.59 Pengaturan pada Main Setting
Untuk mengatur tombol navigasi supaya lebih sederhana dan sesuai dengan pemakaian maka perlu di lakukan pengaturan pada Button Setting , Menu Design pada menu bar di klik. kemudian menu Style , Advance setting , Button setting diatur seperti gambar 3.60 berikut.
Gambar 3.60 Pengaturan pada Button Setting
      Setelah Langkah- langkah nomor satu dan dua dilakukan, maka tampilan dari template ebook akan terlihat seperti gambar 3.61 berikut.
Gambar 3.61 Template dan Button pada Ebook


3.3.10  Publish Ebook Menjadi File HTML
       Ebook yang sudah di atur sedemikian rupa, mulai dari main setting hingga button setting akan dilanjutkan ke langkah terakhir, yaitu langkah publish. publish yaitu langkah dimana ebook yang masih dalam format file .pb akan di rubah menjadi format yang berbeda, untuk format ebook yang akan penulis buat adalah format file HTML. Format HTML adalah format ebook yang bisa dibuka di berbagai internet browser seperti Mozilla Firefox, Google Chrome, Opera dan Internet Explorer.
Tindakan yang dilakukan pertama kali saat akan mem publish ebook adalah dengan meng klik menu Publish pada menu bar dan pilih HTML, kemudian akan muncul dialog dan setiap kolom di isi seperti gambar 3.62 berikut.
Gambar 3.62  Pengaturan Output pada Ebook
Setelah semua pengaturan selesai, maka tombol start di klik dan proses akan berlangsung hingga selesai.
Gambar 3.63 Tombol Start untuk Memulai Proses Publish



3.4  Implementasi
       Pada bagian ini merupakan tahap pengujian yang akan menampilkan ebook di internet browser laptop. Klik View it pada gambar 3.57 berikut.
Gambar 3.64 Dialog Setelah Proses Publish selesai

Gambar 3.65  Tampilan pada Browser
        Tampilan gambar 3.65 di atas merupakan tampilan utama ebook yang dijalankan pada browser. Di dalam halaman utama tersebut terdapat sepuluh tombol diantaranya language, sound, zoom out, zoom in, full screen,  first page, previous page, play, next page dan last page.

Gambar 3.66  Tampilan Halaman Menu dan Menu Materi
        Tampilan gambar 3.66 diatas merupakan tampilan Menu dan menu bab, didalam tampilan menu terdapat tiga buah tombol diantaranya menu bab, informasi dan bantuan. Pada tampilan menu bab terdapat enam tombol diantaranya bab1, bab2, bab3, bab4, bab5 dan menu yang apabila di klik akan berfungsi sesuai dengan fungsinya masing- masing.
Gambar 3.67  Tampilan Informasi dan Bantuan
       Tampilan gambar 3.67 diatas adalah tampilan informasi berupa teks mengenai ebook yang sedang dibaca.
       Selanjutnya adalah tampilan informasi bantuan dengan mengklik tombol bantuan yang terdapat pada menu. Halaman ini menyediakan informasi untuk pengguna dalam menggunakan ebook kombinasi permutasi.
Gambar 3.68 Tampilan Halaman Judul Bab 2 dan Isi Materi
       Berikutnya adalah tampilan halaman judul bab disertai dengan isi dari materi yang sedang dibaca dalam ebook Kombinasi Permutasi.            
3.5  Spesifikasi Minimum Laptop/Smartphone
        Untuk dapat menjalankan ebook kombinasi permutasi ini membutuhkan spesifikasi minimal yang sangat sederhana yang terdapat pada laptop dan smartphone, spesifikasi  tersebut hampir dimiliki oleh semua perangkat laptop dan smartphone yang memiliki internet browser dan sudah terinstal adobe flash player, dan untuk smartphone harus sudah ter install adobe air .
3.6   Pengujian Aplikasi
       Pengujian aplikasi dilakukan pada dua buah laptop, satu buah smartphone dan internet browser yang berbeda. Pengujian ini dilakukan untuk mengetahui apakah tampilan efek transisi perpindahan halaman, pemutaran animasi, suara efek, dan fungsi tombol berjalan sempurna atau tidak, efek transisi halaman dikatakan sempurna jika efeknya berjalan lancar disertai suara dan tidak sempurna jika efek transisi tersendat sendat dan suara efeknya tidak ada. Animasi dikatakan sempurna jika pergerakan animasi dan tombol nya berjalan sesuai skema. dan dikatakan tidak sempurna apabila pergerakan dan fungsi tombol tidak sesuai dengan skema yang sudah ditentukan. Berikut ini adalah daftar perangkat komputer dan internet browser yang telah digunakan dalam uji coba ebook Kombinasi Permutasi ini.
Tabel 3.1 : Perangkat dan Spesifikasi yang Digunakan
Perangkat
Spesifikasi
OS
CPU
Laptop Acer Aspire 4920
Windows 7
Intel Core Duo, 1,8 GHz. RAM 2 GB
Laptop HP Pav Vtx
Windows 8.1
Intel Core i5, 2,4 GHz. RAM 4GB
Smartphone LG G3 Stylus
Android 5.0
Mediatek 1,2 GHz Quad Core. RAM 1GB
Tabel 3.2 : Jenis Internet Browser yang Digunakan
Internet Browser dan Flash Player
Versi
Mozilla Firefox
22.0
Google Chrome
Oprea Blink
24.0
Internet Explorer
11.0
Flash Player
9.0

3.7 Hasil Pengujian
       Hasil dari pengujian yang dilakukan di dua laptop dan satu smartphone, untuk menguji efek transisi ebook, pemutaran animasi, pemutaran efek suara, dan fungsi tombol navigasi adalah sebagai berikut:
1.) Pengujian Efek Transisi Halaman Ebook
Tabel 3.3 : Hasil Efek Transisi Halaman
Internet Browser / Flash Player
Efek Transisi
Sempurna
Tidak Sempurna
Mozilla Firefox
Ya
Tidak
Google Chrome
Ya
Tidak
Oprea Blink
Ya
Tidak
Internet Explorer
Ya
Tidak
Flash Player
Tidak
Ya

2.)  Pengujian Animasi
Tabel 3.4 : Hasil Pemutaran Animasi
Internet Browser / Flash Player
Efek Transisi
Sempurna
Tidak Sempurna
Mozilla Firefox
Ya
Tidak
Google Chrome
Ya
Tidak
Oprea Blink
Tidak
Ya
Internet Explorer
Ya
Tidak
Flash Player
Tidak
Ya

3.)  Pengujian Efek Suara
Tabel 3.5 : Hasil Pemutaran Efek Suara
Internet Browser / Flash Player
Efek Transisi
Sempurna
Tidak Sempurna
Mozilla Firefox
Ya
Tidak
Google Chrome
Ya
Tidak
Oprea Blink
Ya
Tidak
Internet Explorer
Ya
Tidak
Flash Player
Tidak
Ya

4.)  Pengujian Fungsi Tombol Navigasi
Tabel 3.6 : Hasil Pengujian Fungsi Tombol Navigasi
Internet Browser / Flash Player
Efek Transisi
Sempurna
Tidak Sempurna
Mozilla Firefox
Ya
Tidak
Google Chrome
Ya
Tidak
Oprea Blink
Ya
Tidak
Internet Explorer
Ya
Tidak
Flash Player
Tidak
Ya



No comments:

Post a Comment