7/23/2019 Multimedia Rev
1/107
MULTIMEDIA
(PENGOLAH GRAFIS, ANIMASI, PRESENTASI&DESAIN WEB)
Tim Penulis
Dr. Ir. Syaad Patmanthara
Muhammad Ashar, ST,MT
KEMENTERIAN PENDIDIKAN NASIONAL
UNIVERSITAS NEGERI MALANG
PANITIA SERTIFIKASI GURU RAYON 15
April, 2012
7/23/2019 Multimedia Rev
2/107
Kata Pengantar
Puji syukur kami panjatkan kehadirat Allah SWT, atas segala berkah danrahmatnya sehingga penyusunan modul multimedia ini dapat diselesaikan sesuai
dengan harapan dan tujuan untuk pengembangan keilmuaan dan keahlian bagi
yang menggunakan modul ini (para pendidik dan siswa).
Semoga dalam melaksanakan kegiatan pelatihan guru dengan panduan
modul multimedia ini dapat memberikan pengetahuan untuk kebutuhan life skill
pengguna multimedia dimasa depan.
Atas perbaikan modul ini kami sangat mengharapkan melalui kritik dan
saran yang kami tunggu setiap saat.
Malang, 23 April 2012
Hormat Kami,
Tim Penyusun
7/23/2019 Multimedia Rev
3/107
DAFTAR ISI
Kata Pengantar
DAFTAR ISI
Pendahuluan
Kegiatan Belajar 1.1
1.1.Pengoperasian Periferal Pegolah Grafis
1.2.Materi dan Contoh
1.3.Rangkuman
1.4.Tugas1.5.Referensi
Kegiatan Belajar 2.20
1.1.Penggunaan Image Scanner untuk Input Data Grafis
1.2.Materi dan contoh
1.3.Rangkuman
1.4.Tugas
1.5.Referensi
Kegiatan Belajar 3.30
1.1.Pemrosesan Gambar Vektor (Digital Ilustration)1.2.Materi dan Contoh
1.3.Rangkuman
1.4.Tugas
1.5.Referensi
Kegiatan Belajar 4.40
1.1. Pemrosesan Gambar Raster (Digital Imaging)
1.2.Materi dan contoh
1.3.Rangkuman
1.4.Tugas
1.5.Referensi
Kegiatan Belajar 5.50
1.1.Pembuatan animasi 2D dengan Flash
.2.Materi dan Contoh
1.3.Rangkuman
1.4.Tugas
1.5.Referensi
Kegiatan Belajar 660
1.1.Pengoperasian Software untuk merancang WEB (WEB Design)
7/23/2019 Multimedia Rev
4/107
.2.Materi dan Contoh
1.3.Rangkuman
1.4.Tugas
1.5.Referensi
Kegiatan Belajar 770
1.1. Pengoperasian Software Presentasi dengan Ilustrasi Multimedia
.2.Materi dan contoh
1.3.Rangkuman
1.4.Tugas
1.5.Referensi
7/23/2019 Multimedia Rev
5/107
Kode Modul :
MULTIMEDIA
(PENGOLAH GRAFIS, ANIMASI, PRESENTASI& DESAIN WEB )
1.Pengantar
Multimedia merupakan pembelajaran yang menggabungkan antara text,
gambar, audio dan video serta animasi yang dapat digunakan untuk memanipulasi
obyek tertentu dengan bantuan tool perangkat multimedia yang terdiri atas
peripheral input, pemrosesan dan output.
Modul multimedia ini menyajikan materi yang secara praktis dapat
digunakan untuk mengolah input data multimedia. Pengembangan modul
multimedia ini terdiri atas 7 sub judul kegiatan pembelajaran dengan peningkatan
kompetensi difokuskan pada praktek pengelolaan dan pemrosesan gambar (grafis)
yang diolah oleh perangkat peripheral dan software multimedia yang terdiri atas
pengolah grafis,pembuatan animasi, visualisasai dalam bentuk presentasi dan
implementasi pada disain WEB
Cara penggunan modul ini bersifat praktis bagi pengguna (Userpractical)
dengan memandu pengguna melakukan aktivitas pembelajaran melalui langkah-
langkah percobaan atau kegiatan pembelajaran praktik secara sistimatis, diakhiri
kegiatan diberikan rangkuman akselerasi pemahaman setiap kegiatan dan
diberikan tugas yang hamper menyerupai percobaan agar pengguna dapatmenganalisa dan mereview tingkat pemahaman materi yang dipelajari.Tugas ini
dibuat secara mini lab dalam bentuk proyek kecil yang harus dilakukan oleh
peserta praktikum multimedia. Asumsi bahwa setiap pengguna modul telah
mengetahui instalasi software dan hardware multimedia yang juga dapat dipelajari
pada website yang terdapat referensi.
7/23/2019 Multimedia Rev
6/107
2.Kompetensi
Kompetensi Modul Multimedia yang ingin dicapai terdiri atas 2 kompetensi yaitu
standar kompetensi dan kompetensi dasar serta indikator esensial dari materi
modul multimedia sebagai berikut :
SK-1 : Mengoperasikan Periferal pembuatan grafis
KD : Menyiapkan penggunaan peripheral grafis
Mengoperasikan Perifertal Grafis
IE : Menjelaskan bagian-bagian pada peripheral grafis
Menjelaskan tahapan instalasi kesiapan peripheral grafis
Menjelaskan fungsi software tools
Memilih konfigrasi properties secara tepat
SK-2 : Mengentri Data grafis dengan Menggunakan Image Scanner
KD : Memahami prosedur pengoperasian image scanner
Mempersiapkan aplikasi image scanner
Melakukan image scanning objek pada masukan aplikasi grafis
Mencetak dan menyimpan hasil entry image scanner
IE : Menjelaskan bagian-bagian image scannerMenjelaskan tahapan pengoperasian image scanner
Mengoperasikan image scanner
Memerikasi hasil scanner
Menjelaskan langkah-langkah menyimpan hasil scanner
SK-3 : Mengoperasikan Software Pengolah Gambar Vektor
KD : Mempersiapkan software pengolah gambar vektor
Mengenali menu membuat,membuka dan menyimpan file gambar
Melakukan Editing Sederhana untuk gambar vektorMencetak file gambar vektor
IE : Menjelaskan fungsi fitur editing gambar
Menjelaskan dan mengaplikasikan fitur editing gambar vektor
Menjelaskan fungsi fitur pencetakan file gambar vektor
SK-4 : Mengoperasikan Software Pengolah Gambar Raster
KD : Mempersiapkan software pengolah gambar raster
Membuat objek baru dengan menggunakan teknik free hand
Menerapkan efek visual pada gambar raster
7/23/2019 Multimedia Rev
7/107
IE : Menjelaskan fungsi-fungsi software gambar raster
Menjalankan software gambar raster secara prosedur
Menjelaskan capture objek dan tools gambar raster
Membuat objek baru dengan free hand
Menjelaskan fungsi efek visual dalam pemrosesan gambar raster
Menjelaskan proses manipulasi objek dengan editing objek photo
SK-5 : Mengoperasikan Software Animasi 2D
KD : Mempersiapkan software animasi 2D
Mengenali menu membuat,membuka dan menyimpan file hasil2D
Melakukan pembuatan animasi 2D
Menerapkan animasi pada visual presentasi object
IE : Menjelaskan fungsi software animasi 2D
Menjalankan interfacing software animasi 2D
Membuat Animasi sederhana untuk circle & square shape
Membedakan model animasi by frame dan tweening
Membuat animasi 2D pada materi media pembelajaran
SK-6 : Mengoperasikan Software Disain WEB
KD : Mempersiapkan software Disain WEB berbasis HTML
Mengenali Tag-Tag HTML dan operasi HTML
Melakukan pembuatan halaman WEB sederhanaMembuat insert image ke halaman WEB
IE : Menjelaskan fungsi-fungsi software Disain WEB
Menjelaskan Fungsi Tag_Tag HTML pembuatan Halaman WEB
Menjelaskan cara pembuatan Object melalui interface HTML
Membuat cara insert iamge pada sisi halaman WEB
Menjelaskan interfacing WEB dan Proses pembuatan Header
halaman WEB
SK-7 : Mengoperasikan Software Presentasi
KD : Mempersiapkan software presentasi (PPT)Mengaplikasikan fitur textedit, ilustrasi gambar, animasi, dan
backgraundStyle pada powerpoint
IE : Menjelaskan fungsi-fungsi software Presentasi
Menjalankan software Ms.Powerpoint secara prosedur
Membuat presentasi media pembelajaran interactive dengan
menggunakan pemrosesan data multimedia pada powerpoint
7/23/2019 Multimedia Rev
8/107
3.Tujuan Pembelajaran
Tujuan Pembelajaran secara umum adalah mengembangkan modul
multimedia yang dapat digunakan sebagai bahan ajar atau modul praktikum
multimedia. Bagian- bagian modul multimedia ini adalah:
1. Pengoperasian Periferal Pegolah Grafis dengan tujuan mengenalkan
dan mengetahui area kerja pengolah grafis yang digunakan diberbagai
perangkat lunak multimedia dan mampu mengoperasikan peripheral
tersebut.
2. Penggunaan Image Scanner untuk Input Data Grafis dengan tujuan
mengenal dan mengetahui proses image scanning melalui peripheral alat
scanner terintegrasi dengan pengolah output scanner pada computer serta
melakukan editing image pada obyek scanner
3.
Pemrosesan Gambar Vektor (Digital Ilustration) dengan tujuan
memahami proses pembentukan gambar vector melalui perangkat lunak
adobe illustrator dengan pembuatan objek LOGO
4. Pemrosesan Gambar Raster (Digital Imaging) dengan tujuan mengenal
dan mengetahui perangkat lunak pemrosesan gambar raster menggunakan
adobe photoshopserta mampu menggabungkan berbagai gambar dalam
frame atau layer dengan format gambar yang berbeda
5. Pembuatan animasi 2D dengan Flash dengan tujuan memahami tools
yang digunakan untuk membuat obyek gambar dalam bentuk animasi 2D
menggunakan Macromedia Flash materi media pembelajaran
6. Pengoperasian Software untuk merancang WEB (WEB Design)
dengan tujuan mampu membuat aplikasi WEB pada salah satu browser
dan melakukan proses disain web secara terstruktural menggunakan tag-
tag HTML dan melakukan insert gambar ke dalam halaman WEB
7. Pengoperasian Software Presentasi dengan Ilustrasi Multimedia
dengan tujuan memahami secara procedural teknik pembuatan presentasi
berbasis multimedia interactive serta membuat visualisasi dalam bentuk
ilustrasi text,gambar,animasi
7/23/2019 Multimedia Rev
9/107
Kegiatan Belajar 1
Pengoperasian Periferal Pengolah Grafis
1.1 Mengenal Area Kerja Operasi Pengolah Grafis
1.1.1.Pengolah Grafis Adobe Premier
Project Window
Tempat untuk menyimpan klip/footage berupa file image, audio, title dan
video
Terdiri dua bagian yaitu :
- Tab Project berisi daftar klip
- Tab Effects berisi daftar efek audio, transisi audio, efek video dan transisi
video
Monitor Window
- Source Monitor Window digunakan dalam proses trimming video dan audio
sertamengatur Effect Control
-Sequence Monitor Window digunakan untuk melihat prieview hasil editing
pada Timeline
7/23/2019 Multimedia Rev
10/107
Timeline
Tempat untuk menyusun dan menempatkan klip/footage kemudian diedit.
Tools Window
Tools Window berisikan tombol Selection Tool, Track Selection Tool, Ripple
Edit Tool, Rolling Edit Tool, Rate Scratch Tool, Razor Tool, Slip Tool, Slide
Tool, Pen Tool, Hand Tool, Zoom Tool yang nantinya banyak digunakan
dalam proses editing video.
1.1.2.Pengolah Grafis Macromedia Flash
Area Kerja Macromedia Flash :
Create New pilih Flash Document
1.
Menu Bar terdiri dari beberapa menu utama, seperti menu File,
Edit,Commands, Control, Window dan Help.
2. Toolbox adalah tempat sekumpulan tool atau perintah yang paling sering
digunakan untuk membuat, memilih dan mengedit objek
3. Timeline terdiri dari banyak frame yang berfungsi untuk pengolahan
animasi
4. Document Window atau kanvas adalah area untuk mengolah dan
memanipulasi objek
7/23/2019 Multimedia Rev
11/107
1.1.3.Pengolah grafis AdobePhotoshop CS (Creative Suite)
Area Kerja Photoshop
Aplikasi control menu box. Berisi perintah-perintah untuk mengontrol
jendela aplikasi, seperti Restore, Move, Size, Minimize, dan Maximize.
Menu Bar. Terdiri atas menu File, Edit, Image, Layer, Select, Filter,
View, Window, dan Help. Apabila salah satu di klik akan muncul salah
satu menu bar, daftar perintah akan muncul.
Aplikasi close box. Digunakan untuk menutup sekaligus mengakhiri
aplikasi Photoshop.
Aplikasi maximize button. Untuk memperbesar ukuran jendela aplikasi
hingga memenuhi ukuran monitor
Aplikasi minimize button. Untuk memperkecil ukuran jendela aplikasi.
Document control menu box. Digunakan untuk mengontrol jendela
dokumen
Title bar. Keterangan judul dokumen, ukuran tampilan, layer, dan image
mode.
Document minimize, maximize button. Untuk memperkecil dan
memperbesar ukuran dokumen
7/23/2019 Multimedia Rev
12/107
Document close button. Untuk menutup jendela dokumen
Options bar. Untuk memilih setting yang akan berubah sesuai dengan tool
yang akan diaktifkan melalui Toolbox.
Ruler. Digunakan untuk menentukan posisi serta ukuran dari suatu gambar
atau foto yang ada pada image window.
Image window. Area yang akan digunakan untuk menyunting dan mengolah
gambar atau foto.
Minimized window showing, restore button. Untuk memperkecil dan
memperbesar ukuran jendela dokumen.
Scroll bar. Untuk mengatur dan menggulung layer dokumen
Status bar. Menampilkan informasi mengenai ukuran tampilan dokumen,
ukuran gambar, waktu, dan keterangan mengenai tool yang sedang aktif.
1.1.4. Operasional Photoshop
Membuka Gambar Baru
- klik File >New. Kotak dialog neIsi nama file yang dikehendaki pada
- Pilih satuan ukuran yang diinginkan dan angka ukuran pada tombol pilihan Width
(lebar) dan Height (tinggi)
- Masukkan nilai resolusi hasil cetakan gambar
- Pilih modus gambar yang dikehendaki pada pilihan Mode.
7/23/2019 Multimedia Rev
13/107
- Kemudian klik tombol OK
Pengolahan Gambar dengan Palletes
8. Penyuntingan dan pengolahan gambar atau foto akan menggunakan palet.
Palet dapat digunakan untuk memilih dan mengatur berbagai parameter
penyuntingan dan pengolahan gambar atau foto. Untuk membuka palet,
klik Window kemudian pilih palet yang diinginkan.
7/23/2019 Multimedia Rev
14/107
Mempersiapkan bidang kerja dan membuka gambar
9. Gunakan menu File > Open sehingga terbuka kotak dialog Open. Pilih folder
tempat file tersimpan, yakinkan pada kotak Files Of Types terpilihAll Formats.
Setelah nama file yang akan dibuka ketemu, pilihlah dan klik tombol
10.
Siapkan kanvas yang akan menampung image menggunakan menu File >New. Bukalah image yang ukurannya besar yang akan dimasukkan
kedalam kanvas. Klik tombol dipojok kanan jendela kerja pada masing-
masing agar keduanya dapat ditampilkan berdampingan. Gunakan
selection tools untuk menyeret image ke dalam kanvas kosong .
7/23/2019 Multimedia Rev
15/107
1.2
Rangkuman
Pengoperasian peripheral pengolah grafis dapat menggunakan adobe
premier, adobe photoshop dan macromedia flas.
Pada area kerja adobe premier memiliki konsep windowing yang terdiri
atas project windows, monitor windows, tool windows dan timeline
windows
Sementara pada Macromedia Flash lebih simple dengan menggunakan
Menu Bar, Toolbox, Timeline dan kanvas
Untuk adobe photoshop lebih kompleks dengan menggunakan Menu Bar,
aplikasi control menu box, Document Control Box, Windows, Rules, dan
Palletes
1.3 Tugas
1. Buka area kerja masing peripheral pembuatan grafis
2. Masukan sebuah objek dan satu kata tulisan
3. Gunakan tool untuk mengubah objek dan tulisan tersebut
4. Catat perubahan dan fungsi tool yang digunakan
7/23/2019 Multimedia Rev
16/107
Referensi
Modul Penggunaan Adobe Photoshop CS2 Universitas Guna Darma
Manual Book Softawre Adobe Photoshop
Manual Book Software Adobe Premier Pro
Manual Book Macromedia Flash
7/23/2019 Multimedia Rev
17/107
Kegiatan Belajar 2
Penggunaan Image Scanner untuk Input Data Grafis
2.1Peralatan Image Scanner
- Peripheral Scanner merupakan salah satu peralatan yang digunakan untuk
melakukan entry data grafis ke dalam sistem komputer. Image scanner
melakukan pemindaian (scan) suatu obyek gambar atau dokumen danmengkonversinya ke dalam bentuk digital.
- Scanner dapat dijalankan dengan 1-bit (binary digit / angka biner), 8-bit
(256 warna), dan 24 bit (lebih dari 16 juta warna), menggunakan scanner
dengan bit yang besar, maka akan diperoleh kwalitas yang lebih baik.
- Scanner dapat bekerja dengan dilengkapi peralatan tambahan yaitu :
o Kabel data . Digunakan untuk menghubungkan antara scanner
dengan komputer. Dua jenis kabel data yang sering digunakan
dalam scanner yaitu : USB (Universal Serial Bus) atau Parallel.
o Power Supply . Menghubungkan scanner dengan sumber listrik.
Terdiri dari adaptor dan kabel penghubung tegangan ke scanner.
7/23/2019 Multimedia Rev
18/107
2.1.1. Instalasi Scanner dan ProsesCapture Image
Langkah-langkah pemasangan scanner adalah:
Sambungkan ujung kabel data yang sesuai dengan kabel data pada scanner
Sambungkan ujung yang lain ke port yang sesuai pada computer
Sambungkan ujung kabel power supply ke power pada scanner
Sambungkan adaptor pada power supply ke sumber listrik.
Hidupkan komputer, tunggu sampai komputer selesai melakukan proses
booting.
Hidupkanimage scannerdengan menekan saklar ke keadaan on.
- Untuk mempersiapkan penggunaan scanner pelajarilah langkah-langkah
berikut ini.
Siapkan CD Driver, Buku manual dan buku petunjuk instalasi dan bacalah
untuk informasi awal.
Siapkan kabel yang dibutuhkan scanner yaitu kabel data dan kabel catu
daya.
7/23/2019 Multimedia Rev
19/107
Pastikan komputer dalam kondisi mati.
Pastikan juga scanner dalam kondisi mati atau catu daya belum
tersambung.
Carilah port USB di komputer dan masukkan konektor USB untuk
menghubungkan scanner dengan komputer.
Sambungkan catu daya scanner, bila tombol ada tombol powernya maka
scanner sudah nyala bila ada tombol powernya maka nyalakan scanner
dengan menekan tombol power.
Kemudian nyalakan komputer. Untuk Proses Instalasi hardware ikuti
petunjuk instalasi di buku petunjuk instalasi
- Contoh yang diambil adalah scanner Umax Astra 4100
1. Masukan CD driver Umax Astra 4100, maka akan tampil window pilihan
bahasa yang akan di gunakan di sini kita gunakan bahasa Inggris sebagai
bahasa pengantarnya, lalu klik OK.
2. Maka di layar monitor anda akan tampil setuppenginstalan driver, lalu
klik tombol next untuk lanjut ke tahapan selanjutnya
7/23/2019 Multimedia Rev
20/107
3.
Maka di layar monitor anda akan tampil setuppenginstalan driver, laluklik tombol next untuk lanjut ke tahapan selanjutnya
4. Maka proses penginstalan driver anda akan berlangsung, tunggu sampai
proses penginstalan selesai, dan mucul hasil seperti gambar di bawah ini,setelah itu pilih pada pilhan Yes, I want to restart my computer now
lalu klik finish dan komputer anda akan restart
2.1.2 Proses Software Scanner
Membuka jendela scanner
Scanner dengan Canon Soft
- Masukkan file yang akan di scan, pastikan kertas dalam area scan -
7/23/2019 Multimedia Rev
21/107
- Klik tombol scan yang ada pada printer, jika muncul seperti dibawah ini
berarti proses scan sedang berjalan
- Setelah proses scan selesai, maka akan keluar seperti dibawah ini
- Bila sudah tersimpan dalam file .PDF maka untuk membuka klik Open
Pdf File
7/23/2019 Multimedia Rev
22/107
Scanner dengan Adobe Photoshop:
- Buka Adobe Photoshop
- Klik File-Import-Canon,
-
- Maka akan keluar kotak dialog seperti gambar dibawah, selanjutnya klik
scan
7/23/2019 Multimedia Rev
23/107
-
- File telah terscan dan selesai
Melakukan aktifitas scanning
- Pada bagian Select Source, pilih Photo(Color) karena kita akan mencoba
menscan gambar atau foto. Selanjutnya buka penutup scanner anda,
masukkan foto atau gambar yang ingin anda scan dan akhiri dengan
menutupinya kembali.
- Tekan Preview dan tunggu sebentar untuk melihat hasil scan sementara.
7/23/2019 Multimedia Rev
24/107
- Seleksi bagian yang ingin discan, selanjutnya tekan scan sehingga gambar
akan diload ke komputer anda dan siap di edit dengan program desain
photoshop, gimp dan lain sebagainya.
- Gambar hasil Scan di copy ke komputer
- Untuk mengedit gambar gunakan perintah Image -Adjustment-Desaturate
- setelah itu image-Adjustment-Level dan perintah berikutnya Select-Color
range
- Hasil akhir seperti gambar berikut ini
7/23/2019 Multimedia Rev
25/107
2.2 Rangkuman
Salah satu alat atau perangkat peripheral digital yang dapat memindahkan
gambar asli atau dokumen kedalam sebuah komputer atau laptop adalah Scanner.
Scanner teridiri atas piranti digital yang dapat melakukan duplikasi dokumen
secara bentuk menyerupai mesin photocopy. Instalasi alat ini terdiri atas Image
Scanner, Kabel Data(USB), Kabel Power dan Terminal Komputer yang berisisoftware instalasi Scanner dan aplikasi bias berupa photoshop.
2.3 Tugas
1.Buatlah scan gambar tangan karakter lalu lakukan pengeditan gambar
menjadi gambar berwarna
2.Lakukan proses yang sama tetapi gambar yang di scan adalah photo anda , lalu
buat hasil scanner foto menjadi berbagai ukuran (2x3, 4x6 dan photo panorama )
3. Ubah hasil editan sebuah text dan gambar dari hasil scanner menjadi file PDF
dan File Document. Perhatikan hasil yang diperoleh
7/23/2019 Multimedia Rev
26/107
Referensi
www.e-edukasi.net
scan-dengan-canon-pixma-mp258 , http://jauharoh.wordpress.com/2011/08/07/
7/23/2019 Multimedia Rev
27/107
Kegiatan Belajar 3
Pemrosesan Gambar Vektor (Digital Ilustration)
2.1Ilustrasi Gambar Vektor ( Vector Graphics)
Membuat gambar vector melalui Adobe Illustrator berdasarkan garis dan kurva
yang diturunkan dari objek. Vector menggambarkan grafis sesuai karakteristik
matematika geometri.
Gambar vector dapat dibentuk secara resolusi yang terikat (resolution
independent) yang dapat diskala menjadi berbagai ukuran dan dicetak
dibermacam perangkat(peripheral) untuk berbagai resolusi tanpa mengurangi
kejelasan dari informasi gambar.
Ilustrasi pembuatan gambar vector logo
Windows Palletes
Sebagai floating set pada tools yang berfungsi untuk menemukan struktur menu
bagi pallete yang overlapping.
7/23/2019 Multimedia Rev
28/107
Dari menu bar :
- Klik windows lalu pilih pallete untuk memunculkan screen
-
klik tab yang berbeda pada pallete untuk melakukan akses fungsi dari
features yang berbeda.
7/23/2019 Multimedia Rev
29/107
Illustrator Tool bar terdiri atas selection tools, editing tools,
drawing and painting tools,viewing tools, dan lain-lain
- Klik Tool Bar untuk menyelksi tool.
- Klik dan pegang kebawa tombol mouse pada toolbox dengan sudut pada
bagian tengah bawah sebelah kanan untuk menemukan tool tambahan
7/23/2019 Multimedia Rev
30/107
-
2.1.1 Pemaham Path dan Anchor Points
Adobe Illustrator memiliki cara baru pada tools, effects, dan teknik untuk
manipulasi kurva dan fills. Tools illustrator penting untuk manipulasi path, anchor
points dan fill. Path adalah garis yang membentuk garis lurus atau kurva,
7/23/2019 Multimedia Rev
31/107
sedangkan closed path adalah objek misalnya lingkaran atau bintang (ujung dari
path berupa titik).
Membuat Jalur Kurva (Curved Path)
- Pilih File->New untuk menciptakan ukuran dokumen ilustrasi baru
dengan ukuran 800*600 px
Gunakan Control palette:
- lalu klik pada Fill box dan pilih None swatch.
- Kemudian klik pada Stroke box dan seleksi Black swatch.
- Selanjutnya klik pada menu Stroke Weight drop-down didalam Control
palette dang anti stroke weight sekitar 1 pt.
7/23/2019 Multimedia Rev
32/107
- Klik pada Pen Tool pertama lalu, tekan mouse opada area mana saja di
halaman untuk membuat inisial anchor point.
- Selanjutnya klik pada lokasi lainnya, lalu drag dan buat path (jalur)
- Seperti pada perubahan sudut dan panjang yang searah dengan tangan
(pen) , bentuk dan ukuran pada kurva berubah secara langsung .
- Klik Select->Deselect.
- Pilih DirectSelection Tool dan pilih sebuah segmen pada bagian kurva
yang didisplay
7/23/2019 Multimedia Rev
33/107
Membuat Tulisan di Sekitar Gambar
Meletakkan text di sekitar gambar atau membentuk pola text dari berbagai macam
grafis.
-
Buka file dari folder yang anda ingin letakkan text di sekitar gambar
- Klik , File->Open,lalu pilih directory dan buka gambar
- Klik pada Open dan file akan show up pada Adobe Illustrator
7/23/2019 Multimedia Rev
34/107
- Klik pada Pen Tool didalam Tool bar pertama , dan kemudian tentukan
seleksi yang tepat pada Fill dan Stroke dimana keduanya Kosong atau
None.
7/23/2019 Multimedia Rev
35/107
- Klik poin A, dan kemudian klik poin B. Buat sebuah kurva AB
- Selanjutnya klik point C dan buat kurva BC. Saat menyelesaikan kurva ,
klik poin C lagi
- Sekarang, menuju Tool bar dan klik Type Tool dan tahan sampai dapat
menyeleksi path Tool.
- Klik pada blue curve. Saat kursor kondisi blinking, maka siap mengetik
kata atau kalimat (text).
7/23/2019 Multimedia Rev
36/107
- Sebelum mengetik kata , seleksi jenis hruf yang anda sukai
- Saat selesai mengetik, klik Selection Tool dan Direct Selection untuk
mengatur kata yang sesuai dengan grafis yang diinginkan
Sekarang, Lakukan berikut ini !
7/23/2019 Multimedia Rev
37/107
-
Juga dapat menggambar berbagai kurva yang anda suka , lalu buat text
sesuai kurva yang terbentuk
-
- Selanjutnya cara untuk menyimpan pekerjaan (proyek) yaitu :
- Pilih File->Save.
7/23/2019 Multimedia Rev
38/107
Simpan file sebagai ekstensi .ai dan dapat melanjutkan proyek berikutnya
dimasa mendatang
Ketika selesai mengerjakan proyek , klik pada File-
>Export.
7/23/2019 Multimedia Rev
39/107
Kemudian berinama file dan seleksi format yang sesuai contoh simpan dalam
bentuk formatJPEG
Lalu, klik OK. Sekarang boleh liat hasil pekerjaannya.
7/23/2019 Multimedia Rev
40/107
2.2Rangkuman
Sebagai periferal pengolah gambar vector, Adobe Ilustrator memiliki
fasilitas windows tool bar dan palletes serta editing tools. Keungulan software ini
adalah fungsinya yang dapat memanipulasi kurva dan fill.Sehingga proses
pembuatan gambar yang memiliki sifat perubahan efek pada gambar vector lebih
mudah misalnya pembuatan Logo atau Lambang yang terdiri atas gambar dan
tulisan. Perubahan gambar dengan melakukan manipulasi pada path dan anchor
point merupakan salah satu teknik yang digunakan pada pemrosesan gambar
vector ini. Hasil dari perubahan gambar dapat disimpan dalam bentuk berbagai
format gambar. Salah satunya adalah JPEG.
7/23/2019 Multimedia Rev
41/107
2.3Tugas
1.Buatlah Gambar vector dengan bentuk Logo Sekolah
2. Modifikasi logo dengan tulisan :
TUTWURI HANDAYANI dan HABIS GELAP TERBITLAH TERANG
3.Simpan Logo dalam bentuk JPEG dan Bitmap
Referensi
http://www.adobe.com/products/illustrator/
How to Do Everything with Illustrator CS David Karlins MaGraw-Hill/Osborne
2003Classroom in a book The official training workbook from Adobe SystemsAdobe
Press 2005
7/23/2019 Multimedia Rev
42/107
Kegiatan Belajar 4
Pemrosesan Gambar Raster (Digital Imaging)
4.1.Pengolahan Gambar Raster( Raster Graphic)
Image raster terbentuk dalam suatu pola gridyang terdiri atas pixel.Photoshop
sebagai pemroses gambar raster memiliki non-square pixel yang berisi satu
warna, dan satu sama lain mungkin akan memiliki warna yang berbeda sehingga
membentuk gambar. Setiap pixel dalam suatu image selalu mempunyai ukuran
yang sama. Setiap pixel bersifat independent, oleh karena itulah tidak ada istilah
objek dalam image raster.
Menggambar dengan Tool
-
Untuk membuat gambar raster pada photoshop dapat digunakan drawing
Tool
-
Gunakan bantuan Tool Option
7/23/2019 Multimedia Rev
43/107
- Lalu gunakan painting tools sesuai dengan kebutuhan pemrosesan editinggambar raster
- Atau menggunakan tool alat bantu untuk mengatur gambar raster
Menggambar Raster dengan Pencil Tools (Free Hand)
- Klik pencil tool.
- Tetapkan warna foreground.
7/23/2019 Multimedia Rev
44/107
- Pada option pencil tool, klik brush sehingga muncul pilihan untuk jenis
brush untuk menentukan ketebalan garis.
- Arahkan pointer pada layar kerja (canvas), buatlah gambar yang anda
inginkan.
Mewarnai dengan paintbrush
- Seleksi image dengan selection tool
- Klik Paintbrush tool, tetapkan warna foreground
- Pada option paintbrush klik brush sehingga muncul pilihan type brush
- Klik type brush yang anda inginkan
-
Arahkan pointer pada image yang terseleksi, warnailah image yangdiseleksi, dengan klik mouse anda pada arah yang anda inginkan.
7/23/2019 Multimedia Rev
45/107
Membuat Garis dengan Pen Tool
- Klik Pen tool.
- Pada pen tool bar, klik dan tahan sehingga muncul pilihan untuk tipe
Pen untuk menentukan jenis dari pen
FreeForm Pen untuk membuat kurva yang tidak beraturan
dengan mendrag pointer mouse.
Add Anchor Point Tool untuk menambah titik pada garis
Delete Anchor Point Tool untuk untuk mengurangi titik pada
garis
Convert Point Tool untuk membuat kelengkungan titik
- Arahkan pointer pada layar kerja (canvas), buatlah gambar yang anda
inginkan.
- Klik pada satu posisi dikanvas kemudian klik pada posisi yang lain.
- Akan muncul gambar garis lurus.
7/23/2019 Multimedia Rev
46/107
Membuat Kotak Dengan Shape Tool
- Klik rectangle tool
- Pilih warna foreground
- Drag mouse pada canvas, maka akan tampil gambar kotak
- klik tanda cheklist sebelah kanan atas untuk mengakhiri
- Dengan cara yang sama dapat dibuat bentuk-bentuk yang lain.
- Pilih beberapa bentuk yang lain dengan klik shape pada option bar.
7/23/2019 Multimedia Rev
47/107
Mengatur Gambar Raster dengan Bantuan Tool
a.
Mengubah Ukuran Gambar
- Buka gambar yang akan diubah ukuran gambarnya
- Kemudian pilih Image > Image Size
- Ubah ukuran lebar (Width), tinggi (Height), dan resolusi gambar lalu klik
ok
7/23/2019 Multimedia Rev
48/107
b.
Memotong Gambar dengan Tool Crop
- Buka gambar yang akan di crop
- Klik Crop Tool dan geser mouse untuk membentuk area seleksi pada
bagian
gambar yang akan dipotong
- Kemudian tekan enter
7/23/2019 Multimedia Rev
49/107
c.
Membuat Layer dan Mengganti Nama Layer
Dalam sebuah gambar atau foto dimungkinkan terdapat banyak layer,
Layer adalah lapisan tembus pandang. Bagian yang tidak bergambar pada
sebuah layer bersifat transparan. Layer dapat ditumpuk dan diatur susunannya.
Dengan menggunakan layer, efek-efek akan berlaku dalam layer tertentu saja,
tanpa mengganggu layer yang lain.
-
Buka gambar pada layer yang diinginkan
- Untuk membuat layer, pilih layer> new> layer
7/23/2019 Multimedia Rev
50/107
- Kemudian akan muncul kotak dialog seperti dibawah ini :
- Ubah nama layer dengan nama contoh dan pilih OK.
-
Layer tertentu bisa di sembunyikan atau di hidden, biasanya digunakan
untuk mempermudah pengguna untuk melakukan kerja dengan layer-layer
lain.
- Klik tanda mata pada layer dan untuk mengembalikannya klik lagi pada
posisi gambar mata tersebut.
7/23/2019 Multimedia Rev
51/107
d. Membuat Teks Diatas Gambar
- Buka gambar kemudian pilih type tool
- Kemudian arahkan mouse ke gambar yang akan diberi teks
7/23/2019 Multimedia Rev
52/107
e.
Melakukan Seleksi pada Gambar atau Foto
- Melakukan Seleksi dengan Magic Wand Tool
- Buka gambar yang akan diseleksi
- Pada kotak layer ubah background menjadi layer dengan cara double klik
background dan isikan nama layer dengan nama magic wand, tujuannya
adalah membuat objek yang diseleksi menjadi transparan.
- Pilih tool magic wand pada selection tool
7/23/2019 Multimedia Rev
53/107
- Mulai seleksi gambar dengan cara meng-klik pada area gambar yang
diinginkan
- Garis putus-putus diatas menunjukkan objek yang diseleksi.
- Kemudian tekan del pada keyboard sehingga gambar menjadi seperti
berikut ini
- Perhatikan objek yang di delete menjadi transparan. Kemudian lakukan
seleksi lagi sampai menjadi objek yang diinginkan.
7/23/2019 Multimedia Rev
54/107
-
Untuk menyimpan background gambar agar tetap telihat transparan, pilih
format gambar .PNG
4.2Rangkuman
Pembuatan obyek dengan freehand berhubungan dengan DrawingToolbox.
Drawing ToolBox berisi tool seperti Pen Tool, Pencil Tool, EraseTool, Paint
Tool, Airbrush Tool, Paint Bucket Tool dll. Untuk menggambarsuatu Obyek Tool
tersebut dapat dikombinasikan satu dengan yanglainnya.Selain Obyek yang dapat
kita buat sendiri Photoshop juga menyediakanobyek-obyek yang sudah tersedia
dalam berbagai bentuk (shape). Kitatinggal menggunakan bentuk tersebut untuk
digunakan dalam prosesmenggambar.Penggabungan berbagai bentuk dapat
menggunakan teknik seleksi.Teknik ini mengijinkan kita mewarnai suatu obyekyang telah diseleksi,menggabungkan, mengurangi, dan mencari irisan dari dua
buah obyek.
4.3 Tugas
1. Buatlah gambar Sekolah dengan menggunkan free hand pada layer 1
2. Beri pewarnaan pada gambar layer 1
7/23/2019 Multimedia Rev
55/107
3. Seleksi gambar pemandangan dari wallpaper atau dari folder kemudian
muncullkan pada layer 2 ,lakukan crop untuk menghilangkan bagian
gambar yang tidak diinginkan
4.
Insert gambar layer 1 ke dalam layer 2 sehingga membentuk suatu
kesatuan gambar sekolah yang memiliki background pemandangan
5. Beri Tulisan nama sekolah dan lokasinya.
Referensi
Adobe Photoshop CS2 dan CS3
Modul : Mengoperasikan Software Pengolah Gambar Raster , Ditjen Pendidikan
Dasar & Menengah 2004Modul : Multimedia, Pendidikan Teknik Informatika Universitas Negeri Malang
2010
7/23/2019 Multimedia Rev
56/107
Kegiatan Belajar 5
Pembuatan Animasi 2D dengan Flash
5.1.PengolahAnimasi 2D (Flash)
Flash menyediakan IDE (Integrated Development Environment) atau
lingkungan pengembangan terintegrasi yang cukup lengkap. Di
lingkungan inilah para developer Flash bekerja untuk menghasilkan beragam
aplikasi. Disini pula nantinya kita akan bekerja untuk menghasilkan
objek-objek dan menambahkan animasi yang variatif.Secara default, Flash
akan menampilkan Start Page setiap kali ia mulai dijalankan. Tampilan
Start Page berisi item yang baru dibuka dan menu untuk menciptakan projek
baru.
Untuk memulai masuk ke IDE utama, menu yang dipilih adalah
Flash flash document di bagian Create New. Pilihan ini akan
memunculkan tampilan IDE Flash beserta komponen-komponen
pendukungnya.
7/23/2019 Multimedia Rev
57/107
Tools panel
Bagian yang normalnya terletak di sebelah kiri ini menyediakan sejumlah
kakas (tool) yang dikelompokkan sesuai kegunaannya.
Stage
Stage (atau biasa disebut area kerja) merupakan bidang luas berwarna putih
yang terletak di bagian tengah IDE. Bagian ini nantinya akan digunakan untuk
meletakkan komponen-komponen animasi, misalnya button. Dalam konteks
animasi, bagian ini merepresentasikan layar film.
Timeline
7/23/2019 Multimedia Rev
58/107
7/23/2019 Multimedia Rev
59/107
- Drag frame1 sampai frame10 lalu klik kanan,kemudian
pilih Create Motion Tween
- Geser posisi Objek Lingkaran
Kemudian klik kanan frame15 pilihInsert Keyfram
7/23/2019 Multimedia Rev
60/107
- Pindahkan posisi Objek Lingkaran ke bawah
Lalu tekan Enter untuk menjalankan animasi
Export format SWF ke AVI
- Pilih File pada Menu Bar, lalu pilihExport, Export Movie
- Pada kotak dialogExport Movie ganti lokasi Save In, isikan File Namedan
ganti Save as type ke format AVI.
Keying Effect
- Import animasi yang sudah dibuat dengan format AVI ke dalam
ProjectWindow
- Masukkan klip animasi ke dalam Timeline Window
- Buka tabEffect pada Project Window
-
Video Effects pilih Keying lalu pilih efekRGB Difference Key
Kemudian sisipkan pada klip animasi
- Aktifkan tabEffects Control pada Source Monitor Window atur efekRGB
Diiference Key
Pada pilihan Color pilih warna yang ingin dihapus, misalnya putih
- Geser tombol pilihan Similarity sampai warna putih hilang
5.1.2. Membuat objek dan Memberi Efek Tween
7/23/2019 Multimedia Rev
61/107
- Atur frame rate sebesar 24 fps atau sesuaikan dengan kebutuhan (frame
rate digunakan untuk mengatur kecepatan animasi per detiknya) dan atur size
nya (jika menginginkan tampilannya full screen, sesuaikan dengan ukuran
windows pada laptop /PC)
- Buatlah objek rectangle tool pada timeline ke 1, atur fill color berwarna
merah dan stroke color berwarna hitam, jangan lupa beri nama layer
rectangle tool yang kita buat dengan nama ktkmerah (untuk mengganti
nama layer, double klik pada layer 1 dan ketikan namanya)
7/23/2019 Multimedia Rev
62/107
- Klik frame ke- 50 kemudian pilih F5 (F5 adalah shortcut yang digunakan
untuk menyisipkan frame)
-
Klik frame 25 kemudian pilih F6 (F6 adalah shortcut yang digunakanuntuk menyisipkan keyframe) dan pindahkan lagi objeknya
7/23/2019 Multimedia Rev
63/107
- Klik Frame ke- 40 kemudian pilih F6 dan pindahkan lagi objek
- Pada menu insert pilih timeline create motion tween (motion tween
digunakan untuk memberikan efek animasi agar terlihat lebih halus). Efek
motion tween diberikan pada frame ke 1 dan ke 25
7/23/2019 Multimedia Rev
64/107
- Setelah itu hentikan pergerakan objek dengan memberikan action script
pada frame ke 40 (gunakan shortcut F9 untuk membuka halaman action
script) dengan script
stop ();kemudian tes hasilnya dengan menekan CTRL+ENTER padakeyboard
- Simpan dengan nama demo flash
Menyisipkan teks dan gambar
- Buatlah layer baru, pilih insert layer dan beri nama judul
1.
- Sisipkan teks berwarna biru pada frame ke 40, jangan lupa menekan F6
terlebih dahulu untuk memberikan keyframe pada frame ke-40 pada layer
judul
-
7/23/2019 Multimedia Rev
65/107
- Beri efek perubahan warna pada judul dengan cara Klik frame ke- 45
kemudian pilih F6 dan ubah warna tulisan menjadi kuning
- Lakukan seperti langkah diatas pada frame ke 50 dengan perubahan warna
menjadi hitam
- Tekan CTRL+ENTER, terlihat tidak terjadi perubahan warna pada teks,
hal ini dikarenakan ada action script stop (); pada layer ktkmerah. Untuk
menjalankannya, hapus terlebih dahulu action script tersebut dan
pindahkan action script ke layer judul pada frame ke 50.
- Masukan gambar dengan cara pilih file import import to library
(untuk memasukkan gambar ke library macromedia flash)pilih gambar
yang diinginkan
7/23/2019 Multimedia Rev
66/107
- Sebelum memasukkan gambar ke dalam stage, perhatikan letak layer.
Letakkan layer pada layer judul dan pada frame ke 50 kemudian drag
gambar ke stage dan sesuaikan ukuran dengan tool free transform pada
tools panel.
Membuat Button
- Buatlah layer baru bernama start
- Tekan F6 pada frame ke 50
- Buatlah button pada layer start dari oval tool dan beri fill color biru tua
dan stroke color biru muda. Atur ketebalan stroke color menjadi 5
- Klik kanan pada objek oval, kemudian pilih convert to symbolpilih
type button dan beri nama btnstart. Objek akan berubah menjadi button
Catatan :
Movie clip: simbol untuk membuat objek-objek animasi.Button: simbol untuk menciptakan tombol interaktif.
Graphic: simbol untuk menghasilkan objek statis.
7/23/2019 Multimedia Rev
67/107
- Beri teks dengan nama START berwarna putih di dalam button tersebut
seperti dibawah ini
- Berikan interaksi perubahan warna pada button dengan cara double klik
button, akan tampil halaman sebagai berikut :
7/23/2019 Multimedia Rev
68/107
- Untuk melakukan perubahan warna pada saat mouse berada diatas button,
pilih frame over dan tekan F6, lalu klik objek dan ubah warnanya menjadi
merah.
- Misalnya kita ingin menambahkan efek suara ketika button diklik, caranya
mudah. Pilih frame hit dan tekan F6, pada sound pilih suara yang akan
dimasukkan (import terlebih dahulu suaranya pada library).
- Kembali ke stage utama dengan meng-klik scene 1 dan test hasilnya.
Bekerja dengan Link
- Pada kegiatan diatas, kita sudah membuat button, namun button tersebut
belum di-link-kan dengan frame, swf, atau video.
- Me-Link-kan button dengan frame lain
- Sisipkan frame pada layer ktkmerah sampai frame ke 75
7/23/2019 Multimedia Rev
69/107
- Buat layer baru bernama hal2 dan beri nama frame tersebut pada frame
label dengan nama hal2
-
Buat keyframe di frame ke 51
- Kembali ke layer start (layer untuk button), kemudian beri action script
button agar ketika button di klik maka ia akan mengarahkan ke frame hal2.
Lalu test movie
Action script : on (release){
gotoAndStop('hal2');
}
Catatan : pemanggilan pada script gotoAndStop diatas menggunakan nama
frame label, selain menggunakan cara tersebut pemanggilan bisamenggunakan letak frame yang dituju.
Action Script : on (release){
gotoAndStop(letak_timeline); // contoh : gotoAndStop(4);
stop ();
}
Pengenalan Action script dasar :
1.
gotoAndStop('frame'); // pergi ke frame yang dituju lalu berhenti
7/23/2019 Multimedia Rev
70/107
2. gotoAndPlay('frame');// pergi ke frame yang dituju lalu mainkan frame
tersebut.
3. nextFrame(); // menuju ke frame selanjutnya
4.
prevFrame(); // menuju ke frame sebelumnya
5. stop (); // berhenti pada frame itu.
Me-Link-kan button dengan swf lain
Me-Link-kan file demo flash.swf ke file submain.swf
- Button next yang telah dibuat sebelumnya digunakan untuk me-link-kan
ke file submain.swf
- Beri keyframe pada frame ke 76 dan beri nama frame label-nya dengan
nama lempar2
-
Sebelum kita me-link-kan swf-nya, kita harus melompatkan button next
dari frame ke 51 frame ke 76, baru pada frame ke 76 dilakukan link ke
file submain.swf.
- Berikut ini adalah action script yang digunakan untuk melompatkan button
back (letakkan action script di buttonbukan di frame
perhatikan pada action):
on (release){
gotoAndStop('lempar2');
7/23/2019 Multimedia Rev
71/107
}
- Setelah button telah dilompatkan ke frame 76, selanjutnya pada frame 76
ini baru dilakukan link ke file demo flash.swfAction script :
loadMovie('submain.swf',1);
stop();
Catatan :
Sintax loadMovie :
loadMovie (url, target, method);
Me-Link-kan file submain.swf ke file demo flash.swf
- Buat file baru dengan nama submain
- Tambahkan button dengan nama back pada frame ke 1 dan tambahkan
frame sampai frame 9
- Berikan efek seperti pada contoh sebelumnya dan beri nama pada convert
to symbol dengan nama btnback
- Beri keyframe pada frame ke 10 dan beri nama frame label-nya dengan
nama lempar
- Sebelum kita me-link-kan swf-nya, kita harus melompatkan button back
dari frame 1 ke frame 10, baru pada frame 10 dilakukan link ke file demo
flash.swf.
Berikut ini adalah action script yang digunakan untuk melompatkan
button back (letakkan action script di buttonbukan di frame
perhatikan pada action):
on (release){
gotoAndStop('lempar');
}
- Setelah button telah dilompatkan ke frame 10, selanjutnya pada frame 10
ini baru dilakukan link ke file demo flash.swf
Action script :
loadMovie('demo flash.swf',1);
stop();
7/23/2019 Multimedia Rev
72/107
- Tes movie. Perhatikan yang terjadi. Lakukan troubleshooting untuk
memperbaiki hasil tersebut.
Menyisipkan Audio
Sebelum memulai langkah penyisipan audio, pastikan bahwa file yang
akan
digunakan sudah dipersiapkan.
- Bukalah file swf demo flash.swf
-
Untuk mengimpor file ke library, pilih menu File > Import > Import to
Library.
- Cari nama file yang akan digunakan, kemudian klik Open.
Selanjutnya akan terlihat ikon sound di window Library.
- Sampai di sini, sound belum akan dimainkan secara otomatis
sehingga diperlukan langkah lanjutan. Misalkan kita ingin memainkan
sound dari awal, drag sound dan letakkan di lembar kerja (stage).
-
Tekan Ctrl+Enter untuk melihat hasilnya.
Memainkan Sound di Frame Tertentu
Adakalanya pemutaran audio atau sound tidak selalu dari awal, misalkan
pada frame tertentu. Untuk melakukan hal ini, ikuti langkah-langkah
berikut:
- Buka dokumen flash demo flash.swf
- Import file sound ke library.
- Letakkan kursor di frame tertentu, misal frame ke 51 pada layer hal2 ,
kemudian tekan F6 untuk menyisipkan keyframe.
- Pada posisi kursor masih di frame 51, drag file sound ke lembar kerja.
- Tekan Ctrl+Enter untuk melihat hasilnya.
7/23/2019 Multimedia Rev
73/107
Memotong Sound
Adakalanya pula kita ingin memutar sound tidak sampai selesai dan
tetap melanjutkan ke frame berikutnya. Untuk melakukan hal ini, maka kita
perlu memotong keyframe aktif dan menghentikan pemutaran sound.
Langkah-langkah implementasinya sebagai berikut:
- Buat dokumen flash baru.
- Import file sound ke library.
- Buat layer baru dengan nama sound, lalu letakkan kursor di frame
tertentu, misal 40, kemudian tekan F6 untuk menyisipkan keyframe.
- Pada posisi kursor masih di frame 40, drag file sound ke lembar kerja.
- Misal kita ingin menghentikan di keyframe 50, letakkan kursor di posisi
tersebut kemudian tekan F6.
- Letakkan kursor di frame 51, kemudian klik F6.
- Pada window Properties, pilih sound yang sama dan atur konfigurasi
sinkronisasi.
Mengontrol Sound
7/23/2019 Multimedia Rev
74/107
Terkait dengan penyisipan suara, terkadang diperlukan kontrol
pendukung guna memainkan, menghentikan, dan melanjutkan pemutaran
suara. Langkah ini dimaksudkan untuk menyediakan pilihan bagi
pengguna. Berikut ini langkah-langkah pembuatan kontrol suara:
- Buat dokumen Flash demo flash.swf
- Impor file mp3 dengan pilihan Import to Library.
- Klik kanan file mp3 di panel Library, kemudian pilih Linkage.
- Pada kotak dialog Linkage Properties, contreng pilihan Export for
ActionScript, kemudian isikan identifier. Setelah selesai, klik OK.
- Klik frame 51 pada layer sound kemudian tekan F9 untuk
memunculkan window Action dan isikan kode berikut:
- Gunakan Tool Text (T) untuk menciptakan tombol Play.
- Seleksi teks, kemudian tekan F8 dan konversi ke Button.
- Klik kanan button, kemudian pilih menu Actions dan isikan kode berikut:
(
(""
(
(""
(
7/23/2019 Multimedia Rev
75/107
- Tambahkan juga tombol Stop dan isikan kode program berikut:
- Test movie
Menginputkan video
Untuk melakukan input video, terlebih dahulu kita harus memastikan
bahwa extensi file video harus .flv. Pada prinsipnya untuk melakukan
input video sama dengan melakukan link dari swf satu ke swf lain.
- Buat button video pada frame ke-85 (frame yang dipih adalah frame
kosong yang tidak terdapat objek apapun) layer sound, beri nama label vid
- Masukkan video ke library dengan cara pilih File > Import > Import Video
-
Akan muncul halaman dialog sebagai berikut dan browse file video yang
akan dimasukkan ke flash:
(
(""
7/23/2019 Multimedia Rev
76/107
- Pilih next, akan muncul halaman dialog sbb :
1.
Pilih next, dan pilih skin yang diinginkan
7/23/2019 Multimedia Rev
77/107
2. Pilih Next, dan pilih finish
3. Link-kan button video ke video dengan action script :
on (release){
gotoAndStop('vid');
}
5.2 Rangkuman
Animasi merupakan manipulasi gambar diam menjadi gambar bergerak
yang diolah pada Flash dengan fungsionalitas yang cukup handal melalui IDE
(Integrated Development Environment) menghasilkan beragam aplikasi.Untuk
menjalankan aplikasi flash maka area kerjanya adalah stage, timeline dan
properties.Sementara, untuk membuat dan menjalankan gambar 2D dibutuhkan
teknik Frame ( yang dinotasikan menggunakan kotak), Keyframe (setiap frame
merupakan keyframe). Di Flash, animasi dapat diciptakan melalui tiga
pendekatan: frame-by-frame, tweening, dan timeline effect. Penggunaan
Action Script dibutuhkan pada flash untuk melakukan manipulasi objek transisi
ditambah dengan pemakaian format swf sebagai format animasi video bergerak
sedangkan untuk animasi gambar terformat juga bias dilakukan dalam bentuk
PNG
5.3 Tugas
1. Buat animasi yang menarik menggunakan Macromedia Flash
2. Susun video ke dalam Timeline Window
3. Sisipkan animasi yang telah dibuat pada video pada waktu bersamaan
4. Durasi minimal 1 menit, maksimal 2 menit
7/23/2019 Multimedia Rev
78/107
Referensi
Modul : Praktikum Multimedia materi pembuatan animasi 2D dengan
Macromedia Flash , Pendidikan Teknik Informatika Universitas Negeri Malang
2010Modul : Praktikum Multimedia materi animasi flash , Infokom ITN Malang 2008
Manual Book Software Macromedia Flash
7/23/2019 Multimedia Rev
79/107
Kegiatan Belajar 6
Pengoperasian Software untuk merancang Web (Web design)
6.1.Pengenalan Hypertext Markup Language (HTML)
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk
menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:- Mengontrol tampilan dari web page dan contentnya.
- Mempublikasikan document secara online sehingga bisa di akses dari
seluruh dunia.
- Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
- Menambahkan object-object seperti image, audi, video dan juga java applet
dalam document HTML.
6.1.1. Browser dan Editor
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di
gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Firefox dan
masih banyak yang lainya.
7/23/2019 Multimedia Rev
80/107
- Program yang di gunakan untuk membuat dokumen HTML, ada banyak
HTML editor yang bisa digunakan diantaranya: Ms FrontPage,
Dreamweaver, Notepad.
7/23/2019 Multimedia Rev
81/107
6.1.2. Tag-tag HTML
- CommandHTML atau yang biasanya disebut TAG, TAG digunakan untuk
menentukan tampilan dari dokumenHTML.
Contoh:
Setiap dokumen HTML di awali dan di akhiri dengan tag HTML.
. . .
Tag tidak case sensitive, jadi bisa digunakan atau keduanya
menghasilkan output yang sama. Bentuk dari tagHTML sebagai berikut:
Element = nama tag
Attribute = atribut dari tag
Value = nilai dari atribut.
Contoh:
BODY merupakan element, BGCOLOR (Background) merupakan atribut yang
memiliki nilai lavender. Untuk memulai bekerja denganHTML kita bisa gunakan
editor Notepad atau editor lainya. Caranya:
- Ketikkan tag-tag berikut di notepad.
Belajar Web
LATIHAN WEBSITE
- Simpan dengan nama file perdana.htm atau perdana.html
- Buka dengan browser internet explorer file perdana.htm atau
perdana.html
maka outputnya akan di tampilkan seperti gambar di bawah ini.
7/23/2019 Multimedia Rev
82/107
Struktur HTML Document.
DokumenHTML bisa di bagi mejadi tiga bagian utama:
HTML
Setiap dokumen HTML harus di awali dan di tutup dengan tag HTML
tag HTML memberi tahu browser bahawa yang di dalam
kedua tag tersebut adalah dokument HTML.
HEAD
Bagian header dari document HTML di apit oleh tag di
dalam bagian ini biasanya dimuat tag yang menampilkan judul dari
halaman pada titlenya browser.
Header juga memuat tag META yang biasanya di gunakan untuk menentukan
informasi tertentu mengenai document HTML, anda bisa menentukan author
name, keywords, dan lainyan pada tag .
7/23/2019 Multimedia Rev
83/107
Contoh :
Author dari document tersebut adalah arek lamongan Atribut http-equiv dapat
di gunkan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP
header.
Contoh :
yang akan menciptakan HTTP header :
Expires: Wed, 7 May 2003 20:30:40 GMT
Sehingga jika documents di cached, HTTP akan megetahui kapan untuk
mengapdate document tersebut pada cache.
BODY
Dokumen body di gunakan untuk menampilkan text, image link dan semua yang
akan di tampilkan pada web page.
Basic HTML Element
1. List Item(LI)
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list)
maupun yang tidak berurutan (unordered list).
Ada tiga macam list yang bisa anda tambahkan ke dokumentHTML:
Unordered List (Bullet)
Ketikkan tag Unordered List (Bullet) di dalam tag seperti pada
contoh dibawah ini.
Contoh :
7/23/2019 Multimedia Rev
84/107
html
php
Ordered List (Numbering)
Ketikkan tag Ordered List (Numbering) di dalam tag seperti pada
contoh dibawah ini.
Contoh:
Hari Pertama
Introduction to HTML
Hari ke Dua
Creating table
7/23/2019 Multimedia Rev
85/107
Definition List
Definition List dinyatakan oleh tag dan tag menentukan
definition term serta tag menentukan definition itu sendiri.
Contoh:
HTMLHyperText Markup Langguage
HTTP
HyperText Transfer Protocol
7/23/2019 Multimedia Rev
86/107
Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam
dokumenHTML. Ketikkan tag di dalam tag seperti pada
contoh dibawah ini.
Contoh:
Horizontal Rule tag digunakan untuk menggambar garis
horizontal dalam document HTML
2. Pemformatan Page
Paragraf (P)
Tag perintah untuk ganti paragraph pada bahasaHTML dinyatakan oleh tag
.
Contoh:
7/23/2019 Multimedia Rev
87/107
Horizontal Rule tag digunakan untuk menggambar garis horizontal
Break
Tag
di gunakan untuk memulai baris baru pada dokumenHTML, tag ini
fungsinya mirip dengan carriage return.
Contoh:
Horizontal Rule tag digunakan untuk menggambar garis horizontal
dalamdokument HTML
Dokument body di gunakan untuk menampilkan text, image link dan semua yang
akan di tampilkan pada web page
3.Font
Dengan tag anda bisa menentukan format tampilan font dalam dokumen
HTML seperti color, size, style dan lainya.
Contoh:
Menentukan Format Tampilan Font
4.Color
Color merupakan attribute yang kita anda tambahkan pada beberapa element
seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer
yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit
hexadecimal number.
7/23/2019 Multimedia Rev
88/107
#RRGGBB
5.Alignment
Align attribute digunakan untuk menentukan perataan object dalam dokumen
HTML baik berupa text, object, image, paragraph, division dan lain-lain.
6.Format text
Physical Formatting
Logical Formatting
7/23/2019 Multimedia Rev
89/107
Quotes / Indenatasi
Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE,
untuk indentasi pendek anda bisa gunakan element Q.
Contoh:
BLOCKQUOTE untuk indentasi pendek anda bisa gunakan element Q
Color merupakan attribute yang kita anda tambahkan pada
beberapa element seperti body, font, link dan lainya
Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Contoh:
Internet merupkan jaringan global yang menghubungkan suatu network dengan
network lainya di seluruh dunia melalui TCP/IP menjadi protocol penghubung
antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat
berkomunikasi tanpa batas Negara dan Benua.
Grouping element
Tag DIV dan SPAN di gunakan untuk mengelompokkan element-elementHTML.
Span digunakan untuk mendefinisikan inline content sementara digunakan
untuk block-level content.
Contoh:
Tag PRE di gunakan untuk menampilkan
7/23/2019 Multimedia Rev
90/107
Divisi 1
Div tag digunakan untuk mengelompokkan group element biasanya untuk block-
level element
Divisi 2
Ini didalam devisi kedua. di tulis dengan alignment kanan
6.1.3 Image
Format Image
Ada banyak format image, tapi ada tiga jenis format yang paling sering di
gunakan :
GIF (Graphical Interchange Format) (.GIF)
JPEG (Joint Photographic Expert Image) (.JPG)
PNG (Portable Network Graphics)
Insert Image ke Dokumen
Tag IMG di gunakan untuk menginsertkan image ke dokumen HTML. Syntax
nya:
Penjelasan tentang URL yang dimaksud diatas dapat kita lihat pada gambar di
bawah ini tepatnya pada lingkaran merah :
7/23/2019 Multimedia Rev
91/107
Contoh :
Contoh untuk menentukan posisi image dan text di dokumen :
Default alignment at the
bottom
Aligned at Top
7/23/2019 Multimedia Rev
92/107
height="100" width="100" align="middle" />Aligned at
Middle
6.2 Rangkuman
HTML atau HiperText Markup Language dipakai untuk membuat aplikasi
pada web browser secara sederhana.HTML dapat berjalan pada platform internet
explorer, Firefox, Mozilla, Operasi, safari dan lainnya.Penggunaan dalam
merancang aplikasi web tentunya dibutuhkan proses merancang halaman web
yang dimulai dengan body, head dan colour. Pengaturan peletakan text pada
halaman web sangat penting dengan mengatur
font,pharagraph,list,numbering,color dan aligment.Untuk memformat data
tampilan bias menggunakan physical dan logical formatting,Quates,group
element. Format Image dengan cara memasukan gambar kedalam text (Insert
image to Text) dan menampilkan dalam halaman website.
6.3.Tugas
1. Buatlah halaman wen dengan membagi body menjadi 3 bagian
yaitu Head,Right end Left .
2. Pada tampilan header dibuat Nama Sekolah, Logo Sekolah serta
Tagline Belajar Adalah Ibadah dan Tuntutlah Ilmu walaupun
ke negeri Cina
3. Bagian Right meliputi proses pembuatan document list untuk
materi Fisika sedangkan bagian left digunakan untuk menampilkan
insert image, insert animasi atau video mengenai Fisika
7/23/2019 Multimedia Rev
93/107
Referensi
Buku : Muh. Ashar Pakkawaru, Web Programming, penerbit ITS press dan
PNM Malang, 2010
7/23/2019 Multimedia Rev
94/107
Kegiatan Belajar 7
Pengoperasian Software Presentasidengan Ilustrasi Multimedia
7.1 .Instalasi dan pengoperasian Ms. Power Point
Untuk penginstalan Microsoft Powerpoint biasanya prosespenginstalannya
bersamaan dengan aplikasi-aplikasi MicrosoftOffice lainnya seperti Microsoft
Word, Microsoft Excel. Danproses penginstalannya pada dasarnya semuanya
sama. Yaitu
dengan memasukkan CD drivernya ke dalam CD Room, ikutiinstruksi yang
diberikan masukkan serial numbernya ikutiinstruksi berikutnya dan akhiri dengan
finish. Kemudian kitatelah dapat mengoperasikan microsoft office powerpoint
yang
telah terinstal.
Pengoperasian Windows Xp Professional Office 2007 dengan langkah-langkahsebagai berikut :
Klik Start, pilih All Programs, Pilih Microsoft Office, Klik
Microsoft Office Powerpoint 2007
7/23/2019 Multimedia Rev
95/107
Pembuatan background Power Point
- Setelah bidang kerja power point terbuka secara default terdapat lembaran
putih dengan tempat menulis tittle dan sub-title
- Pilih Tool bar design dan arahkan kursus pada thema yang diinginkan, lalu
klik double untuk memindahkan thema background (template) ke bidang
kerja presentasi
- Terdapat seleksi font yang dapat digunakan pada background dengan
menggunakan tool bar font secara scroll
7/23/2019 Multimedia Rev
96/107
- Penggunaan background style juga dibutuhkan untuk membuat latar lebih
menarik dan klik show format background untuk mengedit style dari
background seperti fill, texture, insert object, dan tiling option
Text Editing
- Proses untuk memilih jenis tulisan (font) dengan membuka menu Home
dan menyeleksi theme font, tentunya untuk melihat perubahan font dapat
diatur dengan terlebih dahulu menulis kata atau kalimat pada title serta
zise dari font yang diinginkan
7/23/2019 Multimedia Rev
97/107
- Untuk pengeditan text pada style format dengan menggunakan drawing
tools dapat digunakan untuk menampilkan tulisan dalam bentuk 3D pada
tulisan (sub-title)
- Selanjutnya pilih shape fill untuk memblok font dengan warna yang
diinginkan
7/23/2019 Multimedia Rev
98/107
7/23/2019 Multimedia Rev
99/107
Ilustrasi Gambar
- Terdapat 3 cara melakukan input gambar dengan menggunakan ilustrasi
yaitu pilih insert pada tool bar dan seleksi picture, clip art dan photos
album
- Pada insert picture mengizinkan pemunculan ilustrasi gambar dalam
bentuk object yang dipilih dari folder kumpulan picture bila kosong maka
dapat dicari pada folder lain yang terdapat picture
- Ilustrasi picture melalui perubahan picture style dan effect dapat dilakukan
melalui klik format picture (Thick Matte black)
7/23/2019 Multimedia Rev
100/107
- Selanjutnya hasil ilustrasi gambar dapat diedit dengan mengklik picture
shape akan membentuk ilustrasi gambar mengikuti bentuk objeknya.
-
View ilustrasi picture
7/23/2019 Multimedia Rev
101/107
- Selanjutnya ilustrasi gambar dengan menggunakan clip art selection
- Insert photo album merupakan cara ilustrasi photo yang berasal dari folder
photo dan dapat dimunculkan pada lembar presentasi berbentuk dialog
7/23/2019 Multimedia Rev
102/107
- pilih New Foto Albuminsert picture from file or disk
-
seleksi foto yang diperlukan untuk ilustrasi dan tekan tombol create
7/23/2019 Multimedia Rev
103/107
- Lakukan rotate bila foto yang diperoleh terbalik 900derajat atau 180
0agar
diperoleh foto sesuai dengan arah dan sudut polarisasi
Pembuatan Animation Slide dan Objek
- Pilih gambar yang akan dianimasi pada lembar presentasi
- Pilih animation pada menu bar, lalu tekan custom animation.
- Seleksi bentuk animasi untuk entrance, emphasis, exit dan motion path
7/23/2019 Multimedia Rev
104/107
- Hasil pembuatan animasi slide berikut ini :
Entrance CheckerboardEmphasis Spin
Exit WhellMotion Pathstair
7/23/2019 Multimedia Rev
105/107
-Untuk memperoleh efek animasi lainnya bias dengan memilih tools bar more
effectadd entrance/emphasis/exit effect
7.2 Rangkuman
Power Point merupakan software yang dapat membuat presentasi dari
suatu materi untuk disampaikan secara tervisualisasi pada output LCD proyektor.
Pada materi ini fungsi power point 2007 digunakan untuk ilustrasi paparan dalambentuk multimedia interactive. Proses pembuatan power point meliputi cara
menghasilkan background PPT yang menarik melalui design pada tool bar. Selain
itu proses editing text, ilustrasi gambar yang terdiri atas 3 cara yaitu ilustrasi
picture, from clip art dan ilustrasi album photo.Selanjutnya proses Animation
Create digunakan untuk membuat hasil tampilan objek yang akan dijelaskan
memiliki penguatan pada proses pergerakan objek. Proses ini dapat dibuat dalam
bentuk slide dengan menampilkan masukan objek (entrance), Penguatan karakter
objek(emphasis), dan cara objek keluar dari lembar kerja powerpoint (Exit) serta
proses pemilihan path motion melengkapi cara objek diam mampu bergerak
sesuai dengan pola yang diberikan.
7/23/2019 Multimedia Rev
106/107
7.3 Tugas
Buat presentasi dengan model sebagai berikut :
7/23/2019 Multimedia Rev
107/107
Referensi
Modul : Materi Mengoperasikan Perangkat Lunak Presentasi, Ditjen Pendidikan
Dasar dan Menengah 2005
Software Power Point 2007 instalasi dan aplikasi perangkat lunak PPT
Top Related