Multimedia Rev

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


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


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


1.1.Penggunaan Image Scanner untuk Input Data Grafis

1.2.Materi dan contoh

1.3.Rangkuman

1.4.Tugas

1.5.Referensi


1.1.Pemrosesan Gambar Vektor (Digital Ilustration)1.2.Materi dan Contoh

1.3.Rangkuman

1.4.Tugas

1.5.Referensi


1.1. Pemrosesan Gambar Raster (Digital Imaging)

1.2.Materi dan contoh

1.3.Rangkuman

1.4.Tugas

1.5.Referensi


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)


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


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.


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/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


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


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


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


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


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.


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.


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 .


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


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


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.


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.


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


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 -


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


22/107

Scanner dengan Adobe Photoshop:

- Buka Adobe Photoshop

- Klik File-Import-Canon,

-

- Maka akan keluar kotak dialog seperti gambar dibawah, selanjutnya klik

scan


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.


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


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


26/107

Referensi

www.e-edukasi.net

scan-dengan-canon-pixma-mp258 , http://jauharoh.wordpress.com/2011/08/07/


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.


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.


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


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,


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.


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


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


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.


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


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 !


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.


38/107

Simpan file sebagai ekstensi .ai dan dapat melanjutkan proyek berikutnya

dimasa mendatang

Ketika selesai mengerjakan proyek , klik pada File-

>Export.


39/107

Kemudian berinama file dan seleksi format yang sesuai contoh simpan dalam

bentuk formatJPEG

Lalu, klik OK. Sekarang boleh liat hasil pekerjaannya.


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.


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


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


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.


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.


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.


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.


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


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


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


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.


51/107

d. Membuat Teks Diatas Gambar

- Buka gambar kemudian pilih type tool

- Kemudian arahkan mouse ke gambar yang akan diberi teks


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


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.


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


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


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.


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


58/107


59/107

- Drag frame1 sampai frame10 lalu klik kanan,kemudian

pilih Create Motion Tween

- Geser posisi Objek Lingkaran

Kemudian klik kanan frame15 pilihInsert Keyfram


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


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)


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


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


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

-


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


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.


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 :


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


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


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');


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();


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.


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


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:

(

(""

(

(""

(


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:

(

(""


76/107

- Pilih next, akan muncul halaman dialog sbb :

1.

Pilih next, dan pilih skin yang diinginkan


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


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


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.


80/107

- Program yang di gunakan untuk membuat dokumen HTML, ada banyak

HTML editor yang bisa digunakan diantaranya: Ms FrontPage,

Dreamweaver, Notepad.


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.


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 .


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 :


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


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


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:


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.


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


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


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 :


91/107

Contoh :

Contoh untuk menentukan posisi image dan text di dokumen :

Default alignment at the

bottom

Aligned at Top


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


93/107

Referensi

Buku : Muh. Ashar Pakkawaru, Web Programming, penerbit ITS press dan

PNM Malang, 2010


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


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


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


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


98/107


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)


100/107

- Selanjutnya hasil ilustrasi gambar dapat diedit dengan mengklik picture

shape akan membentuk ilustrasi gambar mengikuti bentuk objeknya.

-

View ilustrasi picture


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


102/107

- pilih New Foto Albuminsert picture from file or disk

-

seleksi foto yang diperlukan untuk ilustrasi dan tekan tombol create


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


104/107

- Hasil pembuatan animasi slide berikut ini :

Entrance CheckerboardEmphasis Spin

Exit WhellMotion Pathstair


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.


106/107

7.3 Tugas

Buat presentasi dengan model sebagai berikut :


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

Multimedia Rev

Documents

Transcript of Multimedia Rev