2017

Modul Praktikum Bengkel

Jaringan dan Multimedia

LABORATORIUM A&S
KELOMPOK KEAHLIAN MULTIMEDIA
FAKULTAS ILMU TERAPAN

Hanya dipergunakan di lingkungan Fakultas Ilmu Terapan UNIVERSITAS TELKOM

Modul Praktikum Bengkel Jaringan dan Multimedia 1
DAFTAR PENYUSUN
Asisten Laboratorium Application & Security

Diperbaiki Oleh

Modul Praktikum Bengkel Jaringan dan Multimedia 2

LEMBAR REVISI

No Keterangan Revisi Tanggal Revisi

Terakhir

Modul Praktikum Bengkel Jaringan dan Multimedia 3

LEMBAR PERNYATAAN

Saya yang bertanggung jawab di bawah ini:

Nama : Suci Aulia, ST., MT.
NIP : 113860100-1
Dosen PJMP : Bengkel Jaringan dan Multimedia
Kelompok Keahlian : Multimedia

Menerangkan dengan sesungguhnya bahwa modul ini telah direview dan akan digunakan untuk
pelaksanaan praktikum di Semester Genap Tahun Ajaran 2017/2018 di Laboratorium A&S Fakultas
Ilmu Terapan Universitas Telkom

Bandung, 10 Agustus 2016

Mengetahui,
Ketua Kelompok Keahlian Dosen PJMP

Atik Novianti S, ST., MT. Suci Aulia, ST., MT.

NIP 15890073 NIP 113860100-1

Modul Praktikum Bengkel Jaringan dan Multimedia 4

 DAFTAR ISI
DAFTAR PENYUSUN ........................................................................................................................ 2
LEMBAR REVISI ................................................................................................................................ 3
LEMBAR PERNYATAAN .................................................................................................................. 4
DAFTAR ISI ........................................................................................................................................ 5
DAFTAR GAMBAR ............................................................................................................................ 6
Modul 4 : BUMPER VIDEO MOTION GRAPH .............................................................................. 7
1.1 Tujuan ................................................................................................................................... 7
1.2 Alat & Bahan ........................................................................................................................ 7
1.3 Dasar Teori ........................................................................................................................... 7
1.3.1 Tampilan Utama ............................................................................................................ 8
1.3.2 Pengenalan Panel ........................................................................................................ 10
1.3.3 HotKey ........................................................................................................................ 12
1.3.4 Project Bumper dan Motion Graph ............................................................................. 16
DAFTAR PUSTAKA .......................................................................... Error! Bookmark not defined.

Modul Praktikum Bengkel Jaringan dan Multimedia 5

 DAFTAR GAMBAR
Gambar 1 .............................................................................................................................................. 8
Gambar 2 .............................................................................................................................................. 9
Gambar 3 .............................................................................................................................................. 9
Gambar 4 ............................................................................................................................................ 10
Gambar 5 ............................................................................................................................................ 10
Gambar 6 ............................................................................................................................................ 11
Gambar 7 ............................................................................................................................................ 11
Gambar 8 ............................................................................................................................................ 13
Gambar 9 ............................................................................................................................................ 14
Gambar 10 .......................................................................................................................................... 14
Gambar 11 .......................................................................................................................................... 15
Gambar 12 .......................................................................................................................................... 16
Gambar 13 .......................................................................................................................................... 17
Gambar 14 .......................................................................................................................................... 17
Gambar 15 .......................................................................................................................................... 18
Gambar 16 .......................................................................................................................................... 18
Gambar 17 .......................................................................................................................................... 19
Gambar 18 .......................................................................................................................................... 20
Gambar 19 .......................................................................................................................................... 20
Gambar 20 .......................................................................................................................................... 21
Gambar 21 .......................................................................................................................................... 22
Gambar 22 .......................................................................................................................................... 23

Modul Praktikum Bengkel Jaringan dan Multimedia 6

 Modul 4 : BUMPER VIDEO MOTION GRAPH
1. Tujuan
a. Mengetahui tool-tool dan workarea yang terdapat dalam adobe after effect
b. Mengetahui teknik dasar dan cara pemakaian tools yang terdapat dalam adobe
After Effect
c. Dapat membuat bumper video dengan teknik motion graphic menggunakan
tool-tool yang ada pada adobe after effect
d. Dapat mengembangkan teknik yang digunakan pada adobe after effect

.1 Alat & Bahan

Alat & Bahan Yang digunakan adalah Komputer beserta Kelengkapannya berjumlah 1 Pc
serta buku tulis.

.2 Dasar Teori

Adobe After Effect adalah sebuah produk piranti lunak yang di kembangkan oleh
Adobe. Awalnya merupakan software produk dari Macromedia yang sekarang telah
menjadi salah satu produk dari adobe.
Adobe After Effect adalah software yang menunjang para profesional dibidang
Broadcast Televisi, perfilman dan produksi video. Adobe after effects secara
komprehensif menyediakan pengolahan visual 2D dan 3D untuk pengolahan
komposisi, animasi , efek visual, konten website dan pengolahan film dan video
professional. Dapat dikatakan bahwa Adobe After Effect ini merupakan perpaduan
dari beberapa macam software design yang telah ada.
Adobe after Effect memiliki fitur-fitur penting , seperti alat untuk membuat Shape
(seperti yang terdapat pada Adobe Photoshop). Pada Adobe After Effect terdapat
Keyfreme seperti yang terdapa pada Adobe Flash (alat untuk menganimasikanya
suatu object) dan juga Expresion yaitu Action Script pada Flash, dan masih banyak
lagi. Sehingga Adobe After Effect sangat handal dalam pembuatan Motion Graphics
/efek visual /animasi.

Adapun Keunggulan Adobe After Effect adalah :

1. Software Editing video paling populer dikalangan professional
2. Memiliki banyak control kreatif yang kita butuhkan
3. Dukungan 64-bit yang berarti mendapatkan semua kapasitas RAM pada system
4. Animasi cepat dengan adanya fiture keyframes secara otomatis
5. Ditingkatkanya warna siasat,control lebih halus dari warna- kewarna yang lain.
6. Menerapkan pelacak tepi cerdas, dechattering dan gerak memblurkan untuk setiap

Modul Praktikum Bengkel Jaringan dan Multimedia 7

 layer pada workspace.

Kekurangannya adalah :
1. Membutuhkan Spesifikasi komputer yang cukup tinggi untuk menjalankan
aplikasi ini.
2. Dibutuhkan keteletian ekstra dalam menggunakan fitur-fitur yang terseda.
3. Tergolong sulit untuk digunakan dikarnakan terdapat banyak fitur.

Berikut beberapa penggunaan umum untuk After Effect :

1. Bumper Video
2. 2D cartoon Animation
3. Motion Graphics
4. Video Effects
5. TV Commercial
6. Opening title
7. Company Profile Video
8. Particle Effects

Sebelum melangkah lebih jauh ada baiknya berkenalan dengan dasar-dasar Adobe
After Effect. Apa saja yang terdapat pada workarea Adobe After Effects,yang pada
dasarnya terdiri atas beberapa macam komponen .

.2.1 Tampilan Utama

Saat software dijalankan tidak ada pengaturan seperti pada adobe premiere
dan akan menampilakan jendela dengan beberapa panel dasar seperti berikut :

Gambar 1

A : jendela aplikasi /menu bar B. panel tools C. panel project D. panel

Modul Praktikum Bengkel Jaringan dan Multimedia 8

 komposisi E. panel timeline F.timegraph ( keyframe ) G. Panel Grup
(audio/video) H. panel preview
I.panel efek dan preset

Ketika memulai sebuah project , dapat di

mulai dengan langkah :
1. Choose file > import >file
2. Atau dengan double klik di bagian bar
kosong project panel dan
3. untuk mengedit project dapat mendrag file
atau bagian project ke timeline panel.
4. Lalu kita dapat memilih untuk membuat
beberapa komposisi dari file projectnya.
Gambar 2

Tampilan akan menjadi seperti ini jika sudah ada file dan project yang
siap untuk di edit:

Gambar 3

Modul Praktikum Bengkel Jaringan dan Multimedia 9

 Untuk mengolah komposisi
dapat dengan memilih
1. Choose composition > composition
setting atau dapat double klik pada
komposisi yang dipilih atau klik
logo pita film pada panel projeck
jika membuat komposisi yang
masih baru.

2. Atur settingan frame , resolusi dan

format keluaran pada dialog box
ini.
Gambar 4

.2.2 Pengenalan Panel

Gambar 5

a. Selection : untuk menyeleksi object , memindah, memperbesar ukuran, dsb.

b. Hand : Untuk menggeser area panel yang tersembunyi pada saat diperbesar
melebihi ukuran panel.

c. Zoom : Berufungsi untuk memperbesar atau memperkecil tampilan dokumen

pada lembar kerja anda.

d. Rotation : Sebagai pemutar untuk merubah rotasi objek.

e. Camera tool : Tools ini hanya dapat digunakan pada layer camera saja.
Berfungsi untuk merotasikan kamera secara bebas.

f. Pan Behind (anchor point) : berfungsi untuk memindahkan titik tumpuan dari
sebuah objek.

g. Mask and Shape tool : Digunakan untuk membuat shape

(persegi,lingkaran,bintang,dll)serta untuk membuat masking degan cara double
klik pada shape yang di inginkan.

h. Pen tools : Tool yang dapat digunakan untuk membuat dan menggambar objek
secara bebas

Modul Praktikum Bengkel Jaringan dan Multimedia 10

 i. Type tool : Untuk menuliskan huruf sesuai keinginan.

j. Brush : Digunakan untuk menggoreskan sebuah warna pada layer yang anda
inginkan.

k. Clone Stamp : Berfungsi untuk menyalin sebuah gambar dari layer satu ke
layer yang lain.

l. Eraser tool : Digunakan untuk menghapus isi dari sebuah layer.

m. Roto Brush Tool : Digunakan untuk menhapus isi dari sebuah layer.

n. Puppets tool : Untuk membuat titik tumpuan pada sebuah gambar yang akan di
animasikan.

Panel Time :

Gambar 6

Panel Keyframe / Timegraph

Gambar 7

Modul Praktikum Bengkel Jaringan dan Multimedia 11

 .2.3 HotKey

Modul Praktikum Bengkel Jaringan dan Multimedia 12

 Gambar 8

Modul Praktikum Bengkel Jaringan dan Multimedia 13

 Gambar 9

Gambar 10

Modul Praktikum Bengkel Jaringan dan Multimedia 14

 Gambar 11

Modul Praktikum Bengkel Jaringan dan Multimedia 15

 .2.4 Project Bumper dan Motion Graph

.2.4.1 Pendahuluan :
Pada tutorial kali ini praktikan akan mengetahui cara mengatur
posisi,memutar,merubah ukuran dan transparansi object. Tidak ada efek
khusus pada tutorial ini, namun dengan mengetahui prinsip dasar pembuatan
animasi di After Effect diharapkan para praktikan dapat mengembangkan
kecakapanya dalam menggunakan Software ini.

.2.4.1 Persiapan :
Membuat bidang Kerja
1. Jalankan Adobe After Effect

2. Kita kini sudah memiliki bidang kerja / Project kosong dengan nama
untitled project.aep. Anda tidak pelu lagi klik menu FILE -> New untuk
membuat project. Catatan : aep = After Effect Project.

Gambar 12

3. Namun pada project tersebut belum ada adegan/composition. Oleh

karena itu klik menu Composition -> New Composition. Untuk
membentuk composition baru

- Lebar layar / Width : 1920 px

- Tinggi layar / Height : 1080 px

- Frame Rate : 25 frames per Second (gambar per detik)

- Duration 0:00:10:00 artinya: 0 jam , 0 menit , 10 detik, 0 frame

Modul Praktikum Bengkel Jaringan dan Multimedia 16

 Gambar 13

4. Lalu buat background untuk composition yang tadi telah kita buat.
Dengan menambahkan solid layer. Layer -> New -> Solid Layer (ctrl +
y) Klik Make comp sizer button agar solid layer memenuhi layar
composition. Lalu isi color selection dengan warna biru

Gambar 14

Modul Praktikum Bengkel Jaringan dan Multimedia 17

 5. Klik OK. Kini bidang kerja After Effect telah terdapat background
berwana biru seperti berikut :

Gambar 15

Mengimport gambar
After effect adalah software animasi bukan image editor. Hampir semua
format multimedia dapat di import Ke After Effects seperti jpg , tga, psd,
avi,mov,mpg, mp3,wav,ai,dll. Untuk data berupa gambar harus disiapkan
dahulu pada photoshop illustrator. Kali ini kita akan mengimport data
pada adobe after effect.
- Download logo vector CATV http://goo.gl/hwxQlM

- Untuk mengimport logo berformat .ai, klik menu File -> Import ->
File.. atau klik dua kali pada layer panel project lalu pilih file aw.ai, klik
tombol open

- Lalu drag and drop aw.ai dari layer panel menuju timeline panel.
Sehingga logo muncul pada layar utama

Gambar 16

Modul Praktikum Bengkel Jaringan dan Multimedia 18

 - Setelah logo terlihat dilayar tekan V untuk mengubah pointer menjadi
selection tool, lalu klik logo aw.ai pilih Effect -> Generate -> Fill , lalu
pada color selection pilih warna putih untuk mengubah warna pada logo
yang kita miliki.

Gambar 17

6. Langkah selanjutnya adalah memberikan solid layer berupa lingkaran

untuk membuat efek animasi gelombang lingkaran. Layer -> new ->
solid (ctrl + y)

- Lebar layar / Width : 1020 px

- Tinggi layar / Height : 1020 px tekan oke

- Lalu pada shape tool pilih ellipse tool dengan menekan shape tool atau
menekan q pada keyboard . Setelah itu klik 2 kali sehingga terjadi
masking antara solid layer dengan ellipse tool. Lalukan langkah ini 2 kali
namun berikan warna putih pada lingakaran kedua dan berikan nama
Lingkaran putih.

Modul Praktikum Bengkel Jaringan dan Multimedia 19

 Gambar 18

7. Langkah selanjutnya scroll down pada panel lingkaran putih , Lalu

akan muncul mask select mask , Ctrl + D untuk menduplikasi layer
mask.

- Pada mask nomor 2 ganti properties add menjadi Substract

- Scroll down panel mask 2 pada Mask Expansion -> ubah menjadi -40
px sehingga muncul outline berupa lingkaran.

Gambar 19

Modul Praktikum Bengkel Jaringan dan Multimedia 20

 8. Select Lingkaran putih lalu tekan S (shortcut untuk scale properties).
klik icon timer pada posisi timeline 00:00:00 dan ubah scale properties
menjadi 0. Pada posisi timeline 00:00:45 ubah scale propertis
lingkaran menjadi 230 px sehingga lingkaran tidak tampak pada layar.

- Select lingkaran putih lalu tekan Ctrl+D untuk menduplikasi layer.

- Lalu geser timeline layer lingkaran putih duplikasi sehingga memberi

efek gelombang

Gambar 20

9. Selanjutnya tekan f2 untuk mende-select semua layer . Pilih Ellipse tools

(shape tools) -> buat lingkaran pada tengah layar -> Add -> repeater

- Pada repeater 1 properties -> coppies -> 15

- Repeater 1 properties -> position -> naikan repeater diatas titik

tumpu

- Transform repeater properties -> position -> 0

- Transform repeater properties -> rotation -> ubah properties

sehingga mendapatka dotted lingkaran yang sempurna

- Ellipse path 1 properties -> scale -> perkecil sesuai selera

- Fill 1 propertie -> oppacity -> 0%

- Stroke 1 properties -> Stroke width -> 0.5

Modul Praktikum Bengkel Jaringan dan Multimedia 21

 - Tekan S pada time line 00:00:15 -> Klik icon timer -> ubah scale
properties menjadi 0 -> pada time line 0:00:01:08 -> ubah scale
menjadi 568 px atau lebih

Gambar 21

10. Buat dashed stroke lingkaran dengan ellipse tool

- Fill 1 properties -> hide

- Stroke 1 properties -> width -> 5px > stroke -> 10

- Berikan animasi pada keyframe

11. Memberikan efek spike pada animasi. Pilih rectangle tools (shape tools)
-> buat garis pada tengah layar -> Add -> repeater

- Pada repeater 1 properties -> coppies -> 15

- Repeater 1 properties -> position -> naikan repeater diatas titik

tumpu

- Transform repeater properties -> position -> 0

- Transform repeater properties -> rotation -> ubah properties

sehingga mendapatka dotted lingkaran yang sempurna

- Ellipse path 1 properties -> scale -> perkecil sesuai selera

- Fill 1 propertie -> oppacity -> 0%

- Stroke 1 properties -> Stroke width -> 0.5

Modul Praktikum Bengkel Jaringan dan Multimedia 22

 - Lalu buat keyframe dari kemunculan logo hingga selesai spike

Gambar 22

Modul Praktikum Bengkel Jaringan dan Multimedia 23