BAB I PENDAHULUAN. PT. Waterway Advertising adalah sebuah perusahaan advertising. yang bergerak dalam bidang pembuatan situs ( web design ), desain

BAB I PENDAHULUAN

1.1.

Latar Belakang Masalah PT. Waterway Advertising adalah sebuah perusahaan advertising

yang bergerak dalam bidang pembuatan situs ( web design ), desain grafis, periklanan dan multimedia. Sebagai salah satu perusahaan yang berkembang, PT. Waterway Advertising

telah

melakukan

kegiatan

-

kegiatan

promosi

untuk

mendapatkan klien atau konsumen, baik itu dengan cara promosi langsung, iklan media massa, brosur, maupun melalui internet. Yang menjadi kendala dalam promosi - promosi diatas adalah konsumen atau masyarakat tidak mengetahui dengan jelas atau lengkap produk - produk apa saja yang telah dihasilkan dan ditawarkan oleh PT. Waterway

Advertising.

Kendala

tersebut

disebabkan

oleh

karena

terbatasnya kapasitas atau daya tampung media yang digunakan untuk kegiatan promosi selama ini. Menyimak dari keterangan diatas, maka dalam Penulisan Ilmiah ini penulis mencoba membuat sebuah media promosi yang mengikuti perkembangan jaman dalam bentuk sebuah CD Profile, dimana kapasitas media suatu CD memungkinkan file - file suara, video, animasi, data dan lainnya dapat dimasukkan ke dalamnya. Sehingga konsumen khususnya

1

dan masyarakat pada umumnya mendapatkan informasi tentang usaha dari PT. Waterway Advertising lebih jelas lagi.

1.2.

Tujuan penulisan Tujuan yang ingin dicapai dalam Penulisan Ilmiah ini adalah untuk

membuat suatu media promosi menggunakan media CD yang dapat memperkenalkan dan memberikan informasi kepada masyarakat maupun konsumen mengenai kegiatan usaha PT. Waterway Advertising secara jelas dan menarik.

1.3. Masalah dan Pembatasan Masalah A. Masalah Masih kurangnya efektifitas dari media - media promosi yang ada dalam penyediaan informasi secara lengkap dari suatu perusahaan, dalam hal ini PT. Waterway Advertising yang dibutuhkan oleh masyarakat dan konsumen.

B. Batasan Masalah Dalam

penulisan

Penulisan

ilmiah

ini

penulis

membatasi

permasalahan pada dasar dan langkah - langkah dalam pembuatan CD Profile dengan menggunakan Macromedia Flash MX.

2

1.4.

Metode Penelitian Metode Penelitian yang digunakan oleh penulis dalam Penulisan

Ilmiah ini adalah :

A. Metode Wawancara Penulis melakukan wawancara dengan pihak - pihak yang terkait dalam Penulisan Ilmiah ini untuk mendapatkan informasi yang dibutuhkan penulis.

B. Metode Pustaka Dalam Penulisan Ilmiah ini penulis mengambil teori - teori pendukung yang sesuai dengan judul penulisan.

1.5.

Sistematika Penulisan Untuk memudahkan dalam Penulisan Ilmiah ini, penulis menyusun

dengan susunan sistematika sebagai berikut :

BAB I. PENDAHULUAN Pada bab ini penulis membahas tentang latar belakang masalah, tujuan penulisan, masalah dan pembatasan masalah, metode penelitian, serta sistematika penulisan.

3

BAB II. LANDASAN TEORI Pada bab ini penulis membahas tentang teori - teori yang menunjang Penulisan Ilmiah ini, serta sekilas tentang Macromedia Flash MX.

BAB III. PEMBAHASAN MASALAH Pada bab ini merupakan Analisa dan Pembahasan masalah

yang

berisikan

langkah

-

langkah

dalam

pembuatan CD Profile PT. Waterway Advertising.

BAB IV.PENUTUP Pada Bab ini penulis akan membuat kesimpulan dan saran yang kiranya dapat menjadi pertimbangan untuk PT. Waterway Advertising.

4

BAB II LANDASAN TEORI

2.1.

CD Profile CD ( Compact Disk ) Profile adalah salah satu media promosi

dalam hal menerangkan suatu riwayat dalam bentuk atau media sebuah piringan optik ( CD ) dengan memanfaatkan teknologi multimedia, dimana pengertian dari multimedia itu sendiri adalah teknologi komputer yang menampilkan informasi menggunakan kombinasi dari gerak video, animasi, suara, grafis, dan teks dengan tingkat interaksi pengguna ( user interaction ) yang tinggi ( Sybex Inc, 2000 : 81 ).

2.2.

Movie Clip Sebuah file video yang merupakan bagian atau potongan dari satu

atau beberapa file video lain yang ukurannya lebih besar ( Stan Gibilisco, 2001 : 217 )

2.3.

Picture Element ( Pixel ) Pixel adalah bit terkecil dari sebuah data pada video image. Makin

kecil ukuran pixel, makin besar resolusi yang dapat dicapai sebuah image ( Stan Gibilisco 2001 : 536 ).

5

2.4.

Frame Frame adalah satu potong tampilan informasi atau gambar dari

sebuah film yang termasuk grafis dan teks ( Stan Gibilisco, 2001 : 298 ). Selain itu juga dikenal istilah Frame per Second ( fps ), yaitu jumlah atau banyaknya frame yang tampil dari sebuah video setiap detik ( Sybex Inc, 2000 : 152 ). Biasanya nilai 24 fps dianggap sebagai frame rate terendah untuk menampilkan gerak yang meyakinkan bagi mata manusia, kecuali pada halaman website biasanya mempunyai frame rate yang rendah untuk memperkecil ukuran file.

2.5.

Gradient Gradien dalam pengertian grafis adalah tingkat nilai baik itu

meningkat atau menurun dari perbandingan beberapa warna atau tingkat pencahayaan dalam satu bidang yang sama ( Stan Gibilisco, 2001 : 316).

2.6.

File Exe ( Executable file ) File exe adalah file yang dapat dijalankan oleh sistem operasi,

dimana file exe memiliki instruksi penterjemah binar ( binary compiler ) dan teks yang mengandung perintah atau command script ( Sybex Inc, 2000 : 135 ).

6

2.7.

Link Link adalah sebuah hubungan antara satu elemen dengan elemen

lain nya pada sebuah dokumen yang sama maupun yang berbeda ( Sybex Inc, 2000 : 216 ).

2.8.

Auto Play Auto play atau sering disebut auto run adalah sebuah fitur dari

Microsoft Windows yang fungsinya mengeksekusi secara otomatis sebuah aplikasi dari sebuah CD ROM ketika sebuah CD dimasukkan ke dalam CD ROM drive ( Sybex Inc, 2000 : 33 ).

2.9.

Sekilas Mengenai Macromedia Flash MX Macromedia Flash awalnya merupakan standar profesional yang

digunakan untuk membuat animasi di web . Jika pada versi - versi awal Flash hanya digunakan untuk membuat animasi dan motion ( efek gerak ) grafik, maka mulai dari versi 4.0

Flash mendukung adanya fungsi

scripting yang memberikan kemungkinan yang luar biasa luasnya seperti fungsi action scripting menggunakan syntax JavaScript. Khusus untuk versi terakhir dari Flash ini, Flash MX tidak hanya membatasi pembuatan animasi hanya pada media web saja, tetapi juga dapat berbentuk media lain seperti CD-ROM atau video, karena Flash mampu melakukan ekspor ke berbagai bentuk format, seperti QuickTime, AVI, atau kumpulan format gambar. Keistimewaan lainnya yaitu Flash MX 7

dapat menghasilkan file yang berdiri sendiri (stand-alone projectors) tanpa harus menggunakan plug-ins ( program atau file tambahan ).

2.10

Lingkungan Pada Macromedia Flash MX Berikut adalah gambar jendela utama Macromedia Flash MX :

Didalam lingkungan Macromedia Flash MX terdapat beberapa menu sebagai berikut :

1.

Menu Bar ( Baris Menu ) Menu Bar berisi perintah - perintah umum yang digunakan untuk

mengoperasikan Macromedia Flash MX. Untuk mengakses Menu Bar ini, dapat mengklik langsung pada item Menu Bar yang bersangkutan atau menekan tombol yang telah ditentukan. 8

Gambar 2.1. Menu Bar

2.

Drawing Tool Bar ( Tombol Gambar ) Drawing Tool Bar digunakan sebagai sarana pembentukan objek

animasi pada Stage ( kanvas ).

Gambar 2.2. Drawing Tool Bar

3.

Stage ( Kanvas ) Stage digunakan sebagai objek pembuatan animasi. Semua ide

dasar pembentukan animasi maupun dynamic content web dibuat pada bidang ini. Ukuran stage dapat diubah - ubah sesuai dengan keperluan pemakai. 9

Gambar 2.3. Stage

4.

Time Line ( Baris Waktu ) Time Line digunakan sebagai pengatur waktu dan pembentukan

frame - frame animasi. Time Line terdiri dari pecahan - pecahan frame yang membentuk suatu animasi. Time Line adalah komponen yang bertugas membuat lapisan ( layering ) animasi maupun pengaturan waktu animasi.

Gambar 2.4. Time Line

10

5.

Dockable ( Panel Buka Tutup ) Panel Dockable umumnya digunakan untuk mengkustomisasi

elemen animasi yang sudah ada pada Stage. Panel Dockable di kelompokan menjadi 9 bagian yaitu : 1. Panel Color Mixer 2. Panel Transform 3. Panel Color Swatches 4. Panel Components 5. Panel Answer 6. Panel Scene 7. Panel Align 8. Panel Accessibility 9. Panel Component Parameters

Gambar 2.5. Dockable

11

6.

Movie Explorer Fitur Movie Explorer digunakan sebagai jendela pengatur animasi.

Kustomisasi dapat dilakukan dengan cara mengubah nama elemen animasi atau menambahkan fitur pemrograman pada elemen animasi.

Gambar 2.6. Movie Explorer

7.

Debugger Fitur

Debugger

digunakan

untuk

melihat

dan

melakukan

pemeriksaan kode pemrograman yang sedang berjalan apabila pemakai menggunakan Action Script.

Gambar 2.7. Debugger

12

8.

Library Library digunakan sebagai pustaka atau kumpulan elemen animasi

seperti objek grafis, suara, movie, dan teks siap pakai. Pemakai dapat mengambil objek siap pakai atau menyimpan animasi yang telah dibuat kedalam Library ini. Library sangat membantu untuk pembuatan animasi yang berulang - ulang.

Gambar 2.8. Library

9.

Action Action adalah fitur untuk memberikan perintah atau command script

pada frame atau objek yang telah ditentukan dengan cara menuuliskan nya pada menu Action.

13

Gambar 2.9. Action

10.

Output Output mempunyai fungsi hampir sama dengan Debugger. Namun

fitur ini digunakan untuk melihat hasil keluaran animasi yang sedang berjalan dan menyimpan file tersebut kedalanm file yang diinginkan.

Gambar 2.10. Output

14

2.11. Format File Salah satu kelebihan Macromedia Flash MX adalah kemampuan untuk memasukan file maupun menghasilkan file dalam banyak bentuk atau format file. Berikut beberapa contoh extension nya : 

fh, ft ( Freehand )



png ( PNG file )



eps, ai ( Adobe Ilustrator )



tbp ( Toon Boom Studio )



dxf ( AutoCAD )



bmp ( Bitmap )



emf ( Enhanced Metafile )



swf, spl, fla, spa, ssk ( Flash )



gif ( GIF Image )



jpg (JPEG Image )



wmf, avi, asf, wmv ( Windows )



wav, mp3 ,OGG ( Sound )



mov ( Quicktime )



mpg, mpeg ( MPEG Movie )



dv, dvi ( Digital Video )

Selain file - file tersebut, masih banyak jenis file lainnya yang dapat dibuka oleh Macromedia Flash MX.

15

BAB III PEMBAHASAN MASALAH

3.1.

Tinjauan Umum PT. Waterway Advertising PT. Waterway Advertising didirikan pada tahun 1999 oleh Bpk.

Hendra Kusuma untuk meraih kesempatan bisnis yang potensial dibidang periklanan. Melihat perkembangan dan kebutuhan akan informasi berbasis teknologi, pada tahun 2001 PT. Waterway Advertising melebarkan usahanya di bidang multimedia. Hari ini dengan menempati sebuah kantor yang tetap di bilangan Pluit Raya, PT. Waterway Advertising memiliki 15 orang tenaga professional dengan keahlian pada bidangnya masing - masing.

3.2.

Struktur Organisasi PT. Waterway Advertising Berikut adalah Bagan struktur organisasi PT. Waterway Advertising DIREKTUR Hendra Kusuma Richard Chu MANAGER UMUM Ludi Mulyadi

MG R. KEUANGAN Andre Wijaya ASS. MNG. KEUANGAN

Wati. K

WEB & DATA BASE Martin Ferry Yoel

PROMO SI & K ON SUL

PRO MOSI

CON SU ME R SE RVIC E

Dian. V Alex. A

Rinni. TA

Hasan Sung

SEKRETARIS Yusi Jaya DESAIN GRAFIS Zulfri Astra Yohanes. S KO NSULTAN Andreas Lim Roy Andika

Gambar 3.1. Struktur Organisasi

16

MULTIMEDIA Ronald. P Budhi. W

3.3.

Menu Navigasi CD Profile PT. Waterway Advertising Sebelumnya, penulis ingin menjelaskan perihal pemilihan media

CD sebagai sarana promosi. Pemilihan CD didasari akan kebutuhan suatu media untuk menampung informasi - informasi atau profile suatu perusahaan yang berbentuk suatu kombinasi antaa video, animasi, suara, grafis, dan tentunya teks dengan tingkat interaksi pengguna ( user interaction ) yang tinggi. Menjawab permasalahan diatas, penulis menggunakan software Macromedia Flash MX untuk membuat CD Profile PT. Waterway Advertising. Tetapi sebelum proses pembuatan berlangsung sebaiknya dibuat suatu sketsa rencana pembuatan CD Profile. Sebagai contoh : tema animasi apa yang menjadi dasar dari keseluruhan CD, informasi atau keterangan dan data apa saja yang akan ditampilkan , susunan halaman awal sampai akhir yang cocok, keharmonisan dan sinkronisasi antara animasi video, suara, dan data dalam suatu halaman dan hal - hal lainnya.

17

Berikut adalah bagan menu navigasi hubungan antar scene dalam CD Profile PT. Waterway Indonesia : SCENE1 INTRO

SCENE2

SCENE3

SCENE4

SCENE5

SCENE6

SCENE7

PROFILE

PHILOSOPHY

BUSINESS

DESIGN

CONSULTANT

CONTACT

Gambar 3.2. Menu Navigasi

3.4.

Rancangan Menu ( Scene ) 3.4.1.

Menu Utama ( Scene 1 : Intro )

Logo PT. Waterway

Nama PT. Waterway

Animasi Air

Gambar 3.3. Menu Utama

18

3.4.2.

Menu Kedua ( Scene 2 : Profile )

Logo PT. Waterway

PT. Waterway

Line Animate

Footer Text

Teks Profile

Button profile Animasi Waterdrop

Gambar 3.4. Menu Profile

3.4.3.

Menu Ketiga (Scene 3 : Philosophy )

Logo PT. Waterway Line Animate Teks Philosophy

PT. Waterway

Footer Text Button Philosophy

Gambar 3.5. Menu Philosophy

19

Arrow Animate

Animasi Waterdrop

3.4.4.

Menu Keempat ( Scene 4 : Dimension )

Logo PT. Waterway Line Animate Teks Dimension

PT. Waterway

Footer Text Button Dimension

Arrow Animate

Animasi Waterdrop

Gambar 3.6. Menu Dimension

3.4.5.

Menu Kelima ( Scene 5 : Design )

Logo PT. Waterway Line Animate

PT. Waterway

Footer Text

Teks Design

Button Design

Gambar 3.7. Menu Design

20

Arrow Animate

Animasi Waterdrop

3.4.6.

Menu Keenam ( Scene 6 : Consultant )


PT. Waterway

Teks Consultant

Footer Text Button Consultant

Arrow Animate

Animasi Waterdrop

Gambar 3.8. Menu Consultant

3.4.6.

Menu Ketujuh ( Scene 7 : Contact )


PT. Waterway

Footer Text

Teks Contact

Button Contact

Gambar 3.9. Menu Contact

21

Arrow Animate

Animasi Waterdrop

3.5.

Pembuatan CD Profile 3.5.1.

Scene 1 ( Intro ) 1.

Buka file baru.

2.

Ubah ukuran scene pada pada menu document properties dengan ukuran 800 x 600 pixel.

Gambar 3.10. Document Properties

3.

Ganti nama Layer1 dengan nama “ air “. 

Import file image dengan nama air1 dengan membuka



menu file, import,

lalu arahkan pada directory dimana file image tersebut disimpan.



Pilih file air1 klik open, lalu akan muncul pemberitahuan bahwa

file

air1

merupakan

kesatuan dari file air yang lainnya. 

Klik yes untuk mengimport semua file air kedalam layer air. Kita akan melihat bahwa layer air telah terisi dengan 61 frame. 22

5.

Pada frame1, klik gambar air1 lalu pada konfigurasi propertiesnya rubah ukuran lebarnya menjadi 800 pixel dan tingginya menjadi 300 pixel.

6.

Demikian juga dengan sumbu x beri nilai 0, dan sumbu y 300. maka kita akan melihat file air1 tersebut sama rata dengan scenenya.

7.

Ulangi langkah nomor 5 untuk frame-frame berikutnya sampai 61 frame mempunyai ukuran yang sama.

8.

Lakukan test movie dengan menekan tombol Ctrl+Enter untuk

memeriksa apakah gerakan air

sesuai dengan yang diinginkan.

Gambar 3.11. Animasi Air

9.

Untuk meringkas layer air yang terisi oleh 61 buah frame, kita akan merubah format layer air menjadi movie clip dengan cara sebagai berikut: 

masukkan layer baru.

23

klik frame 1 pada layer air, copy



frame 1 dengan menekan tombol Ctrl+C. kembali ke layer baru, klik



frame 1 lalu tekan Ctrl+V untuk menpaste frame air1. klik



nama

layer

air

untuk

memblok seluruh frame pada layer tersebut, klik kanan diantara ke 61 frame layer air dan pilih copy. kembali ke layer baru, klik



duplikat dari image air1 lalu tekan F8 untuk membuka dialog convert to symbol. pada kotak dialog convert to

 symbol,

beri

nama

symbol

dengan

nama

gelombang. Pastikan menu Behaviournya pada pilihan movie clip, lalu klik Oke. klik ganda air1 pada layer baru

 tadi,

maka

kita

akan

masuk

pada

scene

gelombang. Klik layer 1 untuk memblok frame, klik kanan frame1 lalu pilih paste, maka frame 1 dalam scene gelombang telah terisi oleh 61 file air yang membentuk movie clip.

24

masih pada layer 1 pada scene



gelombang, atur properties ke 61 file air pada masing - masing frame dengan lebar 800 pixel, tinggi 300 pixel, sumbu x pada posisi -400, dan sumbu Y pada posisi -150. klik tanda panah biru dikiri



bawah menu timeline untuk kembali ke scene1, karena sekarang ada dua buah layer yang bernama air, maka buang layer air yang pertama yang sudah digantikan oleh movie clip. 10. Lakukan Ctrl+Enter

test

movie

pada

dengan

keyboard

menekan untuk

tombol

memeriksa

kelancaran gerakan movie clip.

Setelah Layer air terbentuk, kita akan menambahkan efek horizon atau batas air dengan langit yang dibuat dengan efek gradasi. untuk lebih jelasnya, berikut langkah - langkahnya : 1.

Masukkan layer baru, beri nama layer baru itu cahaya.

2.

Pada layer cahaya kita akan membuat sebuah kotak dengan ukuran sembarang lewat bantuan Rectangle Tool.

25

3.

Ubah ukuran kotak pada menu propertiesnya dengan ukuran 800 x 600 pixel dan kedua sumbunya pada posisi 0.

4.

Untuk membuat efek gradasi pada kotak, gunakan menu Color Mixer dengan menekan tombol Shift+F9.

5.

Klik kotak, pada menu color mixer klik menu pulldownnya lalu pilih option linear.

6.

Klik kembali kotak, gunakan tool Fill Transform Tool pada ToolBox

untuk

merubah

posisi

garadien

vertikal menjadi gradien horizontal. 7.

Klik ganda kotak, arahkan kursor kearah kanan atas kotak sampai muncul lingkaran kecil, klik lingkatan tersebut lalu geser kekiri untuk memperoleh gradien horizontal.

8.

Untuk memperoleh efek cahaya horizon, kita akan bermain di area Color Mixer dengan langkah sebagai berikut : 

Dibawah combo box linear kita akan melihat 2 buah kotak yang mengatur warna layer cahaya. Klik layer cahaya.



Posisikan kotak disebelah kiri kearah tengah kira kira 45 persen dari kiri dan atur alpha nya menjadi 0. Kemudian posisikan juga kotak disebelah kanan

26

kira kira 45 persen dari kanan, beri warna putih, dan setting alphanya menjadi 100. 

Atur gradien dengan menggeser kedua posisi kotak sampai

dicapai letak dan tampilkan yang

diinginkan. 9.

Lakukan tes movie untuk memeriksa hasilnya.

Gambar 3.12. Efek Horizon

Untuk layer ke tiga, kita akan membuat dua buah layer teks animasi ( animated text ). Berikut langkah -langkahnya : 1.

Masukkan layer baru, beri nama just_like.

2.

Pada frame 1 pilih menu Text Tool pada ToolBox, klik scene dan ketik dengan font Arial warna hitam ukuran 12 menggunakan efek bold ( tebal ) tiga baris kata berikut : 27

baris ketiga



baris pertama

= Just like



baris kedua

= a drop of water

= for those who thrist 3.

Klik Arrow Tool pada ToolBox untuk mengembalikan pointer. Ubah letak dari teks tersebut pada menu propertiesnya dengan ukuran berikut :

tinggi = 117 lebar = 49,1 sumbu X = 281 sumbu Y = 225.6 4.

Rubah teks tersebut menjadi sebuah grafik dengan cara Convert to Symbol dengan menekan tombol F8. Beri nama “ just_like”. Klik Oke.

5.

Turunkan setting alpha pada properties grafik just_like tadi menjadi 0.

6.

Untuk teks animasi ke dua, masukkan layer baru, beri nama “that’s_how. Geser layer ini dibawah layer just_like.

7.

Pada frame 1 pilih menu Text Tool pada ToolBox, klik scene dan ketik dengan font Arial warna putih ukuran 12 menggunakan efek bold ( tebal ) tiga baris kata berikut : 

baris pertama

28

= That’s how



baris kedua

= we value

baris ketiga

=

all 

our

costumer 8.

Klik Arrow Tool pada ToolBox untuk mengembalikan pointer. Ubah letak dari teks tersebut pada menu properties nya dengan ukuran berikut :



tinggi = 80.8 lebar

= 49,1

sumbu X = 281 sumbu Y = 324.9 9.

Rubah teks tersebut menjadi sebuah grafik dengan cara Convert to Symbol dengan menekan tombol F8. Beri nama “ that’s_how”. Klik Oke.

10. Turunkan

setting

alpha

pada

properties

grafik

that’s_how tadi menjadi 0. 11. Untuk mendapatkan efek tweening pada kedua layer teks tersebut, penulis melakukan langkah - langkah sebagai berikut : 

pada layer just_like, copy frame 1, klik frame 30 pada layer yang sama, lalu paste pada frame tersebut.

29



rubah posisi grafik pada frame 30 dengan mengedit sumbu X = 21, sumbu Y = 225.6

naikkan setting alphanya menjadi 100 persen. 

klik kanan diantara frame1 sampai frame 30 kemudian pilih create motion tween.



masih dilayer just_like, copy frame 30 dan pastekan di frame 85 dan frame 110, ubah posisi grafik pada frame 110 dengan sumbu X = 21 dan sumbu Y = 20.6. Turunkan setting alphanya menjadi 0 persen.



kembali klik kanan diantara frame 85 sampai frame110, lalu pilih create motion tween untuk menciptakan efek gerak keatas.



Untuk layer that’s_how, klik kanan frame 1 dan pilih cut, pastekan pada frame 30, klik kanan

frame 2 dan pilih delete. Sekarang teks that’s_how ada pada frame 30. 

klik kanan frame 60 pilih paste, rubah posisi teks pada sumbu X =22 sumbu Y = 324.9.

naikkan tingkat alpha menjadi 100 persen. 

klik kanan area diantara frame 30 sampai frame 60, pilih create motion tween untuk mendapatkan efek gerak.

30

copy frame 60 ke frame 85 dan frame 110. 

pada frame 110 rubah posisi sumbu X = 22 dan sumbu Y = 530.9



turunkan setting alphanya menjadi 0 persen.



klik kanan diantara frame 85 sampai frame 110, pilih create motion tween untuk mendapat efek gerak

Gambar 3.13. Layer just_like & that’s_how

12. Kembali ke layer air, panjangkan frame sampai frame 600 dengan menekan tombol F5 diantara frame sampai mendapat panjang frame yang diinginkan. 13. Lakukan hal yang sama untuk layer cahaya dengan panjang 606 frame.

Selanjutnya penulis membuat 2 buah frame garis yang akan dianimasikan diantara layer teks. Berikut langkah - langkahnya :

31

1.

Masukkan 2 frame baru dengan nama masing masing frame garis_1 dan frame garis_2.

2.

Untuk frame garis_1 : 

klik kanan frame 60 dan pilih insert blank keyframe.

pilih Line Tool pada menu Tools dan buat garis horizontal pada scene dengan sembarang ukuran. 

rubah ukuran garis pada menu propertiesnya dengan panjang = 1, tinggi = 0, posisi sumbu X = 21 dan Y = 299.6.



copy frame 60 ke frame 110, pada frame 110 rubah ukuran panjangnya menjadi 760.



klik frame 1, lalu pada menu propertiesnya ganti option pada Tween nya dari none menjadi shape.

Gambar 3.14. Properties Layer garis1



copy frame 110 ke frame 135, ganti posisi kedua sumbu dari garis tersebut menjadi X = 21 da Y = 315.6. 32

klik frame 110, pilih option shape dari menu



properties. 

copy frame 135 ke frame 254 dan frame 280.



pada frame 280, ganti kedua sumbu dengan X = 21 dan Y = 299.6. setting alpha pada menu Color Mixer menjadi 0



persen. 3.

Untuk frame garis_2 : copy frame 110 dari layer garis_1 ke frame 110



dan 135 layer garis_2. pada frame 135, ganti posisi sumbu X = 21, dan Y



= 285.6. 

klik kanan pada frame 136, pilih remove tween.



copy frame 135 ke frame 254.



copy frame 280 layer garis_1 ke frame 280 layer garis_2. klik frame 254 dan pilih shape pada option tween



di menu properties.

Layer concepts_teks diletakkan pada saat layer garis_1

dan

garis_2

langkahnya :

33

dimainkan.

Berikut

langkah

-

1.

Masukkan 2 layer baru dengan nama masing masing layer teks dan layer concept_teks.

2.

Klik kanan frame 135 pada frame concept_teks, pilih insert blank keyframe.

3.

Pada menu Tools, pilih Text Tool, klik scene dan ketik kalimat “ Concept Designs Timeless Creative Elegant Innovative

Original

Meaningful

Ideas

Simple

Proffesional Effective Quality “ dengan font Arial ukuran 12 dan efek Bold.

Gambar 3.15. Layer Concept_Teks

4.

Geser posisi teks pada sumbu X = 46 Y= 289.9.

5.

Copy frame ke frame 135 sampai frame 165 pada layer teks.

6.

Mulai dari frame 164 sampai frame 134 potong teks pada bagian kiri dan kanan nya mulai dari huruf “C’ dikiri dan “y” dikanan masing masing ( spasi dihitung ) sebagai berikut : 

frame 164 = 2 karakter ( kiri 1 karakter)



frame 163 = 4 karakter






frame 161 = 8 karakter 34






































































35

7.









frame 135 = hapus karakter “g”

Kembali ke frame 135 pada layer concept_teks, klik kanan teks, pilih convert to symbol.

8.

Beri nama symbol baru itu concept_teks dan pilih movie clip pada Behaviornya.

9.

Klik OK.

10. Blok layer teks, klik kanan frame 1, pilih copy frame. 11. Klik ganda teks pada layer concept_teks. 12. Pada bagian movie clip, klik kanan frame 1 di layer 1 lalu pilih paste frames. 13. Blok frame 1 sampai frame 134, klik kanan mouse, lalu pilih remove frames. 14. Copy frame 31 ke frame 32. 15. Blok frame 1 sampai frame 30, copy ke frame 90. 15. Blok frame 90 sampai frame 119, klik kanan dan pilih reverse frames. 16. Blok frame 91 sampai frame 169, klik kanan lalu pilih remove frames. 17. Copy frame 119 ke frame 120, turunkan setting alpha menjadi 0 persen.

36

18. Buka menu Actions, klik frame 120, ketik command stop(); pada baris ke satu. 19. Kembali ke scene 1, buang layer teks. 20. Jalankan test movie untuk melihat hasilnya.

Pada bagian ini penulis membuat suatu animasi menggunakan 10 buah layer baru yang berisi masing masing satu kotak ( box ). Berikut langkah - langkahnya : 1.

Masukkan 10 buah layer baru.

2.

Beri nama dari layer paling bawah sampai layer paling atas dengan nama box_1a, box1_b, box_2a, box_2b, box_3a, box_3b, box_4a, box_4b, box_5a, dan box_5b.

Gambar 3.16. Folder Layer box

37

3.

Di layer box_1, klik kanan frame 290, pilih insert blank keyframe.

4.

Pilih Rectangle Tool pada menu Tools,

5.

Bentuk segi empat dengan ukuran tinggi dan lebar = 30.9

6.

Posisikan pada sumbu X = 362.0 dan Y = 284.0.

7.

Klik kanan kotak pada frame 290 tersebut dan pilih convert to symbol.

8.

Convert menjadi graphic dengan nama box. ( box otomatis langsung tersimpan di library ).

9.

Untuk layer lainnya, masukkan ( insert ) blank keyframe pada frame - frame berikut ini : 

layer 1b = frame 290



layer 2a dan 2b = frame 300










10. Buka menu library dengan memilih menu windows dan mencentang pilihan library. 11. Drag box masing masing satu ke setiap blank frame yang telah dibuat. 12. Klik frame 290 pada layer box_2b, posisikan graphic pada sumbu X = 401.9 dan Y = 284.9.

38

13. Posisikan setiap box yang berada pada layer yang diakhiri oleh huruf

“ a “ mulai dari frame box_2a

dibawah box layer box_1a dengan sumbu

posisi

sumbu X yang sama dan diselingi ruang kosong kira kira 1 pixel, sehingga seluruh box dari layer-layer tersebut membentuk arah vertikal. 14. Sama halnya dengan layer - layer yang berakhiran “a“, posisikan box dari layer-layer yang berakhiran “b“ mulai dari layer box_2b diatas box layer box _1b dengan sumbu X yang sama dengan layer box_1b. 15. Setting box dari semua frame box pada menu properties dengan nilai 0 persen. 16. Langkah berikutnya penulis membuat tween motion untuk setiap layer tersebut. Berikut langkahnya : 

copy frame dimana box berada ke frame ke 10 dari frame yang dicopy ( contoh : frame 290 dari layer box_1a dicopy kan ke frame 300 dari layer yang sama ).



setting alpha setiap box yang ada pada setiap frame hasil copian dengan nilai 75 persen.



lakukan perintah diatas untuk setiap layer box.

39



Untuk semua layer box, klik kanan frame yang berada diantara frame graphic dengan frame copiannya, pilih insert motion tween.

Jika pada nomor sebelumnya penulis membuat pembukaan animasi box, maka pada langkah berikutnya penulis membuat box animasi penutup. Berikut langkah langkahnya : 1.

Copy frame - frame berikut yang berada pada layer layer yang disebutkan berikut : 

layer box_1 : frame 300 ke frame 470













Ke10 frame baru tersebut akan dinamakan “ frame depan ”. 2.

Untuk membentuk tween motion, dibutuhkan frame penutup yang akan dicopy dari layer - layer berikut : 

frame 330 layer box_4a dan b ke frame 425 layer box_5a dan b

40













Ke 10 frame baru itu akan dinamakan “ frame belakang “. 3.

Untuk frame 475 layer box_1a dan b posisinya dirubah dengan sumbu X = 381.9 dan sumbu Y = 284.0.

4.

Masing - masing box dalam “ frame belakang “ tersebut disetting dengan cara berikut : 

membuka menu setting Transform, dengan jalan menekan tombol CTRL+T pada keyboard.

 memilih menu skew pada menu Transform dan mengisikan field

sebelah kiri dengan nilai 90.0

dan –90.0 untuk field sebelah kanan. 

turunkan tingkat alpha menjadi 0 persen untuk setiap box

41

5.

Diakhiri

dengan

test

movie

untuk

memeriksa

kebenaran.

Gambar 3.17. Hasil Box Animate

Setelah layer layer box terbentuk dan berjalan dengan baik, maka layer berikut yang penulis buat adalah layer text_on_box. Dimana layer ini adalah pasangan dari layer box, dan yang terutama layer text_on_box ini berfungsi sebagai penjelasan kegiatan-kegiatan atau jasajasa apa saja yang ditawarkan oleh PT. Waterway kepada konsumennya. Berikut adalah langkah pembuatan layer text_on_box : 1.

Masukkan layer baru dan beri nama text_on_box.

2.

Buat keyframe baru pada frame ke 345.

42

3.

Gunakan Text Tool pada Toolbar Tools untuk membuat suatu teks.

4.

Klik text tool pada posisi box paling atas dan ketikkan kata Web & Multimedia. Lalu kembali gunakan Arrow Tool.

5.

Klik kanan teks Web & Multimedia, pilih convert to symbol.

6.

Pada box convert to symbol beri nama symbol baru yaitu Layer1. Rubah pilihan Behaviornya ke Graphic, lalu klik OK.

7.

Setelah symbol Layer1 terbentuk, klik 2 kali symbol tersebut untuk mengedit isi symbol Layer1.

8.

Buat 9 teks baru dibawah teks Web & Multimedia berurutan sesuai dengan jumlah box mulai dari box paling atas setelah teks Web & Multimedia dengan urutan sebagai berikut : 

Creative Concepts



Company Profile



Direct Mail



Trademarks & Logo



Bar & Restaurant Needs



Corporate Identity



Business Cards

43



Packaging



Postal & Stationery.

Untuk 4 teks terakhir, penulis memberi warna font dengan warna putih. 9.

Penulis meletakkan teks Web & multimedia pada posisi X = 238.2 dan Y = 134.2.

10. Kembali pada Scene Intro, copy keyframe teks_on _box ke frame 370, frame 390, dan frame 410. 11. Setting level alpha keyframe 345 dan frame 410 pada level 0. 12. Buat motion tween diantara frame 345 sampai frame 370 dan frame 390 sampai frame 410. 13. lakukan test movie untuk melihat hasilnya.

Gambar 3.18. Layer text_on_box

44

Animasi tween yang penulis buat berikutnya adalah meletakkan layer text_combine diantara animasi box menutup. Berikut langkah - langkahnya : 1.

Masukkan

layer

baru,

dan

beri

nama

layer

text_combine. 2.

Beri keyframe baru pada frame ke 410.

3.

Gunakan Text Tool untuk membuat 3 baris teks sebagai berikut : Combined Into One Solution Gunakan font century gothic hitam berukuran 28 dan efek tebal.

4.

Klik kanan teks yang sudah dibuat, dan lakukan Convert to Symbol.

5.

Pilih symbol graphic dengan nama text_combine.

6.

Kembali

ke

scene

intro,

penulis

menggeser

teks_combine pada posisi sumbu X = 295.3 dan sumbu Y = 244.1 7.

Copy frame 410 ke frame 425, 460 dan frame 485 gunakan motion tween diantara frame - frame tersebut..

45

8.

Setting level Alpha frame 410 dan 485 menjadi 0%.

9.

Pada frame ke 485, klik teks combine tersebut dan ubah ukuran teks pada table properties dengan ukuran berikut : w = 501.8

X = 151.1

H = 265.8

Y = 175.7

Untuk layer selanjutnya, penulis membuat layer white_transform, yaitu sebuah layer yang berisi frame yang memainkan level alpha dari 0 sampai 100%. Berikut cara cara nya : 1.

Pada layer white_transform, isi frame ke 580 dengan blank keyframe.

2.

Pilih Rectangle tool pada toolbar dan buat sebuah kotak pada stage dengan ukuran 800 x 600 pixel, posisikan pada posisi 0 untuk kedua sumbunya.

3.

Beri warna putih pada kotak tersebut.

4.

Copy frame ke frame 600.

5.

klik frame 480, ubah tween pada properties menjadi shape.

6.

Geser tingkat alpha pada toolbar color mixer menjadi 0 %.

46

Pengaturan frame Penulis

membuat

4

buah

folder

baru

untuk

meringkaskan layer-layer yang telah dibuat sekaligus menata layer agar terlihat rapi sesuai dengan jenis - jenis layer yang telah dibuat. Berikut adalah nama ke empat folder tersebut berikut nama layer didalamnya : 1.

2.

3.

Folder garis : 

layer garis1



layer garis2

Folder text : 

layer concept_teks



layer that’s_how



layer just_like



layer text_combine



layer text_on_box

Folder box : 

layer box_1a



layer box_1b



layer box_2a



layer box_2b



layer box_3a



layer box_3b

47

4.



layer box_4a



layer box_4b



layer box_5a



layer box_5b

Folder background : 

layer cahaya



layer air.

Gambar 3.19. Pengaturan Frame

Setelah

semua

frame

terselesaikan,

penulis

melakukan test movie untuk memastikan semua frame dan animasi yang telah dibuat dapat beralan dengan baik seperti contoh gambar bagian akhir dari scene 1 berikut :

48

Gambar 3.20. Scene 1 Intro

49

3.5.2.

Scene 2 ( Profile ) A.

Layer Pertama : background

1.

Pada frame1 penulis meletakkan graphic dengan nama bg_mask yang sudah dibuat dengan Fireworks dan meletakkannya dengan posisi rata kanan dan merubah nama layer1 menjadi layer bg_mask.

2.

Untuk menjadikan sub mask, dilakukan dengan mengklik kanan layer bg_mask dan pilih “mask”.

3.

Kemudian dilanjutkan dengan membuat layer baru yang diberi nama layer bg untuk background, layer bg ini

diletakkan

dibawah

layer

mask_bg

untuk

melengkapi efek masking. 4.

Penulis mengimport graphic bg dan meletakkannya pada posisi yang sama dengan graphic mask_bg dengan

terlebih

dahulu

menonvisiblekan

mask_bg.

Gambar 3.21. Masking

50

layer

B.

Layer kedua : button_profile

1.

Pada layer button profile ini, penulis terlebih dahulu memasukkan graphic - graphic button yang sudah dibuat

ke

dalam

library

Flash

MX

untuk

mempermudah penyelesaian layer ini. 2.

Kemudian graphic - graphic tersebut diletakkan pada posisi ditengah - tengah graphic layer bg dengan urutan dari atas kebawah sebagai berikut : 1. b-profile-on 2. b-philosophy 3. b-business 4. b-design 5. b-consultant 6. b-contact

3.

Pengeditan dimulai dengan cara merubah masing masing graphic menjadi symbol button dengan cara convert to symbol.

4.

Setelah semua graphic menjadi symbol, penulis mengklik

dua

kali

graphic

untuk

masuk

dan

mengeditnya. 5.

Sebagai contoh untuk graphic philosophy, pada layer1 terdapat 4 buah menu yaitu Up, Over, Down,

51

dan Hit. Untuk Up, frame telah terbentuk sendiri sejak graphic b-philosophy dimasukkan ke frame button. Untuk Over, yaitu kondisi button ketika dilewati oleh pointer mouse. Klik kanan pada menu Over dan pilih Insert Keyframe lalu masukkan graphic b-philosophyblue dari library dan posisikan rapi sejajar graphic pada menu Up. Menu down juga diberi graphic yang sama dengan menu Over, kecuali menu Hit, penulis cukup mengcopy frame Up. 6.

Efek suara diberikan pada saat poiter mouse melewati tombol dan pada saat tombol diklik. Efek ini dapat di buat melalui menu properties dari frame Over dan frame Down. Penulis memakai sound Nature MenupopUp untuk frame Over dan Aquarium Asteriks untuk frame Down.

7.

Langkah nomor 5 dan 6 pada button lainnya.

Gambar 3.22. Button Profile

52

C.

Layer Ketiga : waterdrop Layer waterdrop ini merupakan layer dimana dimasukkannya unsur video kedalam suatu layer untuk memberi efek tetesan air pada scene profile ini. Berikut langkah - langkahnya :

1.

Penulis melakukan import file graphic dengan nama waterdrop_bg pada frame 1, dan meletakkannya sejajar dengan layer bg.

2.

File graphic tadi dirubah menjadi suatu symbol movie clip dengan nama water&mask.

3.

Setelah mengklik dua kali symbol water&mask tersebut, maka timeline baru telah muncul untuk mengedit layer waterdrop.

4.

Penulis membuat layer 2 dan mengisinya dengan sebuah graphic berbentuk persegi empat yang ukurannya cukup untuk menutupi seluruh area graphic pada layer 1.

5.

Dilanjutkan dengan memberi efek transparan linear vertical pada menu color mixer dengan warna dasar berkode #0F0F67.

6.

Agar efek dari movie water droplet dapat menyatu dengan

warna

background

dari

scene, penulis

merubah kedua layer tersebut menjadi layer yang

53

sudah “ mask “ dengan cara mengklik kanan layer 1 dan memilih menu “ mask “. 7.

Langkah berikutnya adalah merubah bentuk graphic pada layer 2 menjadi suatu movie clip. Penulis memberi nama movie clip ini “ water_droplet “ yang mempunyai arti sebagai tetesan air.

8.

Pada bagian ini penulis memasukkan 3 layer baru ke dalam timeline masing - masing bernama : 

layer water_droplet ( diletakkan dibawah layer 1 )



layer mask_gradient ( diletakkan diatas layer 1 )



layer action ( paling atas ).

Gambar 3.23. Masking

9.

Untuk layer water_drop, pemasukan file movie dimulai dengan cara memilih menu file dan pilih import dan mengarahkannya menuju folder dimana file movie water_droplet berada. Ketika movie clip water_drop diimport, Macromedia Flash MX secara otomatis mengekstrak ( memecah ) file tersebut menjadi 54

sejumlah frame sesuai dengan panjangnya file movie clip tersebut berputar. Pada file water_drop ini file terpecah menjadi 144 buah frame. File ini kemudian diatur dengan berpatok pada graphic pada layer 1 yang bertindak sebagai masking. 10. Setelah itu dilanjutkan dengan menset layer 1 menjadi masking bagi layer water_drop. 11. Untuk

layer

action,

penulis

memberi

sebuah

command ( perintah ) dengan terlebih dahulu memberi label frame 1 pada menu properties dengan nama label “ start_again “. Setelah itu pada frame ke 144 dari layer action itu, Penulis memasukkan keyframe kosong dan memberinya action dengan memasuki menu action lalu mengklik tanda plus dilanjutkan dengan Action dan Movie Control dan pilihan Go to. Tidak lupa juga dengan pilihan menu type frame label dan memilih frame yang bernama start_again.

Gambar 3.24. Action Waterdrop

55

Perintah tersebut menyatakan bahwa ketika scene profile telah berjalan sampai frame ke 144 maka dengan otomatis frame beralih kembali menuju frame pertama dari scene profile ini.

Gambar 3.25. Animasi Waterdrop

D.

Layer Keempat : line Layer ini merupakan kumpulan sebanyak 8 layer yang disatukan dalam sebuah folder dimana masing - masing layer berisikan sebuah efek motion tweening dari 1 buah garis bergradien. Dibawah ini merupakan

langkah

demi

langkah

proses

pembuatannya. 1

Dimulai dengan membuat 8 buah layer didalam 1 folder bernama folder line.

56

2.

Penulis memberi nama ke 8 layer tersebut berurutan dari layer 1 sampai dengan layer 8.

3.

Terlebih

dahulu

penulis

memasukkan

graphic

blue_line ke dalam library. 4.

Untuk layer 1, graphic blue_line diletakkan pada posisi x = 30, dan y = 0.

5.

Graphic mengalami perubahan fungsi menjadi suatu symbol movie clip dengan nama blue_line dan menurunkan tingkat alphanya menjadi 20 %.

6.

Pada bagian dalam symbol blue_line, penulis kembali merubah bentuk graphic menjadi symbol graphic dengan nama blue_line_animate.

7.

Dibagian symbol inilah blue_line akan memainkan efek tweening nya. Berikut adalah cara - caranya : 

penulis menggandakan frame 1 untuk frame 30 dan frame 60.



setting alpha pada frame 30 menurun menjadi 0 % dan frame 60 menjadi 5 %.



untuk frame 30, posisi sumbu X dari graphic diganti pada posisi 0.3.



untuk

frame

60

penulis

tidak

melakukan

penggeseran, hanya memberi suatu command

57

action yaitu “gotoAndPlay(1) untuk melakukan suatu pengulangan efek tweening. 

dan sebagai penyelesaian, di antara setiap frame, penulis menyeting efek motion tween.

8.

Untuk layer-layer selanjutnya sampai dengan layer ke 8, penulis cukup mengcopy frame dari layer 1 diikuti dengan beberapa pengeditan pada masing-masing layer dengan data - data perubahan untuk masing -masing layer sebagai berikut : 1). Layer 2 :



frame 1 : Alpha 8 % 

frame 30 : X = -116.9 dan Alpha 0 %



frame 60 : Alpha 8 %

2). Layer 3 : 

frame 1 : W = 4.7, X = -2.4, Alpha 0 %



frame 30 : W = 4.7, X = 23.9, Alpha 15 %



frame 60 : W = 4.7, X = 55.2, Alpha 0 %

3). Layer 4 : 

frame 1 : W = 1.2, X = -0.6, color none







4). Layer 5 : 


58



frame 30 : W = 1.2, X = 21.8, color none







5). Layer 6 : 

frame 1 : W = 9.2, X = -4.6, Alpha 25 %



frame 15 : W = 9.2, X = -158.3, Alpha 25 %



frame 30 : W = 9.2, X = -4.6, Alpha 25 %

6). Layer 7 : 




frame 60 : W = 1.2, X = 82.8, color none

9). Layer 8 : 

frame 1 : W = 121.6, X = -60.8, Alpha 15 %



frame 30 : W = 42.8, X = 36.9, Alpha 15 %



frame 60 : W = 15.5, X = 43.5, Alpha 0 %

Gambar 3.26. Animasi Line ( garis )

59

E.

Layer Kelima : profile_footer_text Penulis membuat text disudut kiri ini selain untuk

mempercantik penampilan scene, terlebih sebagai suatu penunjuk bahwa user telah memasuki scene profile dari PT. Waterway. Footer

text

terdiri

dari

4

buah

kata

“profile”

menggunakan font century gothic dengan ukuran dan level Alpha yang berbeda menggunakan menu TextTool dari Macromedia Flash MX. Setelah text pertama dibuat, penulis melakukan convert to symbol text pertama menjadi movie clip. Dibawah ini adalah langkah - langkahnya : 1.

Untuk text profile pertama : W = 27.8

H = 12.6

X = -29.5

Y = -4.9

Alpha 100 % 2.

Text profile kedua : W = 45.5

H = 20.5

X = -31.3

Y = -9.3

Alpha 75 % 3.

Text profile ketiga :

60

W = 58.6

H = 26.4

X = -29.8

Y = -15.2

Alpha 50 %

4.

Text profile keempat : W = 91.8

H = 41.5

X = -34.0

Y = -26.6

Alpha 25 %

Gambar 3.27. Profile _footer_text

F.

Layer Keenam : logo Untuk layer baru ini, penulis cukup mempergunakan

menu library yang ada dimana file movi clip dari logo waterway tersimpan. Berikut langkah - langkahnya : 1.

File logo didrag ( digeser menggunakan mouse ) dari menu library ke area layer baru dari scene profile.

2.

File logo_waterway tersebut diletakkan pada posisi berikut : W = 211.0

X = -9.8

H = 198.0

Y = 201.0

61

Gambar 3.28. Logo PT. Waterway

G.

Layer Ketujuh : background Penulis mengimport file freehand yang bernama

profile_bg ke layer ini dan meletakkannya pada posisi : W = 800

X = 0.0

H = 600

Y = 0.0

Dan tidak lupa untuk meletakkan layer ini pada barisan layer yang paling bawah.

H.

Layer Kedelapan : glow_text Karena file movie clip ini sudah dibuat pada scene

intro, penulis cukup memasukkannya pada scene ini dengan cara mendrag file tersebut dari library dan meletakkannya pada posisi berikut : W = 128.6 H = 27.3

X = 1.3 Y = 347.6

Gambar 3.29. Glow Text

62

I.

Layer Kesembilan : teks_profile Layer kesembilan ini adalah layer dimana PT.

Waterway

mengemukakan

profile

perusahaannya

( lampiran …). Penulis membagi isi dari profile yang diberikan oleh PT. Waterway menjadi 4 paragraf, dan masing-masing paragraf di buat menjadi satu layer. Dengan demikian dalam layer teks_profile ini terdapat 4 buah symbol graphic atau layer. Berikut pembahasannya : 1.

Pada frame 1, penulis mengisikan paragraf pertama menggunakan font eurostill ukuran 16 dan efek tebal dengan posisi berikut :

2.

W = 390.2

X = 230.4

H = 38.7

Y = 141.4

Teks yang telah dibuat dirubah menjadi movie clip dengan nama teks_profile.

3.

Frame ke 20 merupakan hasil pengkopian dari frame 1, dimana diantara kedua frame ini akan diberi efek motion dengan tingkat level alpha 0% pada frame 1 dan 100% pada frame ke20. Demikianlah penulis membuat efek untuk paragraf

pertama. Untuk paragraf ke2, 3, dan 4 dilakukan langkah -langkah seperti paragraf pertama.

63

Gambar 3.30. Profile Text

Setelah

semua

frame

terselesaikan,

penulis

melakukan test movie untuk memastikan semua frame dan animasi yang telah dibuat dapat beralan dengan baik seperti contoh gambar bagian akhir dari scene 2 dibawah ini :

Gambar 3.31. Scene 2 Profile

64

3.5.3.

Scene 3 ( Philosophy ) Pada scene ke tiga ini, penulis cukup membuat duplikasi scene 2 untuk dijadikan scene 3 dikarenakan secara garis besar bentuk dan isi animasinya sama, hanya ada beberapa perubahan dan penambahan beberapa layer baru. Berikut adalah langkah - langkahnya : 1.

Penulis menghapus frame1 pada layer Background dan mengisinya dengan frame baru yang berisi background dengan nama philosophy_bg.

2.

Perubahan pada layer button_profile dikarenakan kondisi berada pada scene philosophy, maka letak button atau tombol biru harus berada pada button philosophy.

3.

Perubahan pada layer profile_footer_text menjadi layer philosophy_footer_text berikut isinya dimana sebelumnya diisikan dengan kata “ profile “ maka penulis merubahnya menjadi kata “ philosophy “.

4.

Perubahan selanjutnya adalah merubah nama layer profile_text menjadi layer philosophy_text dimana isi dan efeknya mengalami perubahan juga .

65

Setelah

semua

frame

terselesaikan,

penulis


Gambar 3.32. Scene 3 Philosophy

66

3.5.4.

Scene 4 ( Dimension ) Seperti pada scene ke 3, penulis melakukan duplikasi dari scene sebelumnya dalam hal ini scene Philosophy dan melakukan pengeditan sesuai dengan isi dan tujuan scene Dimension ini dibuat. Berikut ini adalah langkah - langkahnya : 1.

Penulis menghapus frame1 pada layer Background dan mengisinya dengan frame baru yang berisi background dengan nama dimension_bg.

2.

Perubahan pada layer button_philosophy dikarenakan kondisi berada pada scene dimension, maka letak button atau tombol biru harus berada pada button dimension

3.

( business ).

Perubahan pada layer philosophy_footer_text menjadi layer dimension_footer_text berikut isinya dimana sebelumnya diisikan dengan kata “ philosophy “ maka penulis

merubahnya

menjadi

kata

“

business

dimension “. 4.

Perubahan selanjutnya adalah merubah nama layer philosophy_text menjadi layer dimension_text dimana isi dan efeknya mengalami perubahan juga (

67

Setelah

semua

frame

terselesaikan,

penulis


Gambar 3.33. Scene 4 Dimension

3.5.5.

Scene 5 ( Design ) Pada

scene

ini

penulis

menjelaskan

kepada

konsumen tentang produk-produk dan jasa apa saja yang PT. Waterway tawarkan kepada konsumen. Untuk itu selain melakukan pengeditan yang sama seperti scene -scene sebelumnya, penulis menambahkan beberapa point seperti layer penjelasan dan image - image atau gambargambar

produk

didalam

68

layer

teks_design

untuk

memperjelas isi scene ini. Berikut adalah langkah - langkah penambahan layer pada isi teks : 1.

Pada

layer

teks_design

yang

telah

diisi

oleh

beberapa paragraf penjelas (lampiran… ), penulis menambahkan sebuah icon preview untuk masing masing paragraf. 2.

Ikon preview tersebut adalah suatu shortcut, dimana jika ikon

tersebut mengalami suatu aksi ( di klik )

maka akan muncul sebuah image dalam format swf.

Gambar 3.34. Icon Preview

3.

Untuk membuat munculnya image tersebut, penulis menambah kan suatu skrip dalam properties action seperti berikut : on (release) { loadMovieNum("n.swf", 1); } dimana n adalah nama file image dalam format swf yang sudah disiapkan. 69

Setelah

semua

frame

terselesaikan,

penulis


Gambar 3.35. Scene 5 Design

70

3.5.6.

Scene 6 ( Consultant ) Seperti pada scene ke 5, penulis melakukan duplikasi dari scene sebelumnya dalam hal ini scene design dan melakukan pengeditan sesuai dengan isi dan tujuan scene Consultant ini dibuat. Berikut ini adalah langkah - langkahnya : 1.

Penulis menghapus frame1 pada layer Background dan mengisinya dengan frame baru yang berisi background dengan nama consultant _bg.

2.

Perubahan pada layer button_design dikarenakan kondisi berada pada scene dimension, maka letak button atau tombol biru harus berada pada button consultant.

3.

Perubahan pada layer design_footer_text menjadi layer consultant _footer_text berikut isinya dimana sebelumnya diisikan dengan kata “ design “ maka penulis merubahnya menjadi kata “consultant “.

4.

Perubahan selanjutnya adalah merubah nama layer design_text menjadi layer consultant _text dimana isi

dan

efeknya

( lampiran… ).

71

mengalami

perubahan

juga

Gambar 3.36. Scene 6 Consultant

3.5.7.

Scene 7 ( Contact ) Pada scene terakhir ini, penulis meletakkan alamat dan keterangan bagi konsumen untuk menghubungi PT. Waterway.

Keterangan

tersebut

diisikan

pada

layer

contact_teks. Langkah - langkah pengeditan pada scene ini sebagian besar sama seperti scene sebelumnya. Untuk lebih jelasnya, berikut langkah - langkahnya : 1.

Penulis menghapus frame1 pada layer Background dan mengisinya dengan frame baru yang berisi background dengan nama contact _bg.

2.

Perubahan pada layer button_consultant dikarenakan kondisi berada pada scene dimension, maka letak

72

button atau tombol biru harus berada pada button contact. 3.

Perubahan pada layer consltant_footer_text menjadi layer

contact_footer_text

berikut

isinya

dimana

sebelumnya diisikan dengan kata “ consultant “ maka penulis merubahnya menjadi kata “ contact “. 4.

Perubahan selanjutnya adalah merubah nama layer consultant_text menjadi layer contact_text dimana isi dan efeknya mengalami perubahan juga

Gambar 3.37. Scene 7 Contact

73

3.5.8.

Pemberian Unsur Suara Pada bagian ini penulis memasukkan unsur - unsur suara pada tiap - tiap scene dengan tujuan untuk bemberi efek lebih hidup dari setiap animasi, grafik, maupun video yang telah dibuat. Berikut adalah langkah penambahan suara untuk masing - masing scene :

A.

Scene 1 ( intro )

1.

membuat layer baru dengan nama layer “ sound “. pada bagian properties layer tersebut, option sound dipilih dengan pilihan intro, dan pilihan sync dengan Start berikut loop sebanyak 25 kali untuk efek pengulangan suara selama scene masih berjalan.

Gambar 3.38. Dialog Sound

2.

Untuk layer box, masing-masing layer box_1b, box_2b,

box_3b,

penulis memberi sound

box_4b

dan

layer

box_5b

bernama “ switch small

plastic “. Frame - frame terebut

merupakan

bagian depan, sedangkan untuk frame bagian

74

frame

belakang penulis memberi sound dengan nama “Space Restore Down “. 3.

Untuk layer garis1, pada frame ke 110 dan 254 penulis memberikan sound dengan nama “Space Restore Down “. Dan pada frame ke 135 diberikan efek sound bernama “SpaceCritStop “.

B.

Scene 2 ( profile ) Untuk layer button, penulis memberikan efek sound “NatureMenuPopUp “ jika kursor dalam posisi over dan sound dengan nama “Aquarium Asterisk “ jika kursor dalam posisi hit ( ditekan ). Penulis membuat efek suara pada layer button ini untuk semua scene yang menggunakan layer button, seperti scene profile, philosophy, dimension, design, consultant, dan scene contact.

3.5.9.

Pemberian Action Script Penulis memberikan script-script action pada setiap scene dan layer - layer tertentu dalam suatu scene untuk memberikan

suatu

perintah

atau

command

yang

digunakan sebagai panduan supaya setiap efek, grafik,

75

suara, ataupun movie dapat berjalan membentuk suatu kesatuan seperti yang diinginkan. Berikut langkah - langkah penulis memberikan action script pada layer atau sebuah frame :

A.

Scene 1 ( intro ) 1. Membuat layer baru dengan nama script 2. Pada layer script, frame-frame yang diberi action adalah : 

frame 1 dengan action :

fscommand("fullscreen", "true"); fscommand("allowscale", "false"); 

frame 604 dengan action :

stopAllSounds(); 

gotoAndPlay("profile", 1);

Gambar 3.39. Pemberian Action

76

B.

Scene 2 ( profile ) 1. Membuat layer baru dengan nama script 2. Pada frame 2 di layer script diberi action : stop(); loadMovieNum("profile-s.swf", 2); 3. Pada layer button, klik masing-masing button dan beri masing-masing button action seperti berikut : on (release) { gotoAndPlay("n", 1); { on (release) { stopAllSounds(); } dimana “ n “ adalah nama caption button tersebut. 4. Pada movie clip teks_profile yang terletak didalam layer teks_profile diberi action di salah satu layer pada frame yang terakhir dengan script : stop();

C.

Scene 3 ( philosophy ) 1. Membuat layer baru dengan nama script 2. Pada frame 2 di layer script diberi action : stop();

77

loadMovieNum("philosophy-s.swf", 2); 3. Pada layer button, klik masing-masing button dan beri masing-masing button action seperti berikut : on (release) { gotoAndPlay("n", 1); { on (release) { stopAllSounds(); } dimana “ n “ adalah nama caption button tersebut. 4. Pada movie clip teks_ philosophy yang terletak didalam layer teks_ philosophy diberi action di salah satu layer pada frame yang terakhir dengan script : stop(); Setelah itu penulis melakukan penambahan script terhadap scene-scene yang lain dengan pengaturan dan langkah yang sama seperti yang telah dilakukan sesuai dengan nama scene tersebut.

3.5.10. Pembuatan Aplikasi Setelah penulis selesai membuat semua scene dan melakukan pemeriksaan kesalahan atau error, maka file

78

siap untuk dibentuk menjadi sebuah aplikasi atau file exe ( executable file ) dimana file ini akan dapat berjalan atau dijalankan sendiri tanpa bantuan suatu program. Langkah pembuatan file executable yang penulis telah lakukan adalah sebagai berikut : 

Buka file waterway terakhir yang sudah disimpan 

Masuk ke pilihan File dan Publish setting, pastikan option atau pilihan Windows Projector ( .exe ) telah dipilih.



Setelah selesai dengan Publish setting, dilanjutkan dengan memilih option Publish pada properties File.



File Macromedia Flash MX secara otomatis telah dikonversi menjadi file Windows Projector.

Gambar 3.40. Publish Setting

79

Dengan demikian selesailah proses pembuatan file waterway. exe, dan siap untuk dipindahkan dan dipakai dalam media yang diinginkan.

3.5.11. Pembuatan CD ( Compact Disk ) Setelah file terbentuk, maka langkah yang diambil oleh penulis selanjutnya adalah memindahkan file dan seluruh data yang jika diperlukan atau diinginkan kedalam suatu media CD ( Compact Disk ). Dalam proses ini penulis menggunakan Hardware atau perangkat keras berupa CR-ReWriter Lite-On dengan kecepatan tulis maksimal 52X, sebuah CD-R ( kosong ) SONY kapasitas 700 Megabyte dan sebuah MiniDisk kapasitas 50 Megabyte. Perangkat lunak atau software yang digunakan ialah Nero Burning Rom versi 6.0 didalam system operasi Windows XP Professional SP1. Berikut langkah penjelasannya : 

Penulis membuat sebuah folder untuk menampung semua data yang akan dipindahkan ke CD.



Agar sebuah CD secara otomatis menjalankan file aplikasi yang diinginkan setelah dimasukkan kedalam CD ROM, maka perlu dibuat suatu script dalam file notepad dengan nama AutoRun. Berikut script nya :

80

[autorun] open=waterway.exe Dalam hal ini nama file yang akan dijalankan secara otomatis ketika sebuah CD dimasukkan adalah file Waterway. Setelah CD-R masuk didalam CD-



ReWriter dan program Nero dijalankan, maka secara otomatis Nero akan mendeteksi ada nya sebuah CD kosong dan

meminta konfirmasi tindakan yang akan

dilakukan.  suatu  dalam hal

Pilihan yang penulis ambil adalah membuat data CD. Nama CD dapat dirubah sesuai keinginan, ini

penulis

memberi

nama

Waterway

Presentation. 

Hal yang paling utama adalah memindahkan

seluruh

data ( tidak berikut folder nya ) kedalam CD

dengan

cara drag and drop ( geser dan letakkan ).

Maka CD presentasi PT.Waterway Advertising telah terbuat setelah semua langkah diatas selesai.

81

BAB IV PENUTUP

4.1.

Kesimpulan Dalam penulisan ilmiah ini, penulis berpendapat bahwa memasuki

era informasi digital pada saat ini, penggunaan media CD sebagai suatu media promosi berbentuk CD Profile dapat diandalkan. Sejauh media tersebut diatas berisikan materi - materi yang mudah dimengerti dan menarik konsumen untuk melihat, terlebih menimbulkan keinginan akan produk - produk yang disampaikan, media CD akan menjadi salah satu andalan untuk berpromosi. Oleh karena itu penggunaan animasi - dan efek yang dapat menarik perhatian konsumen sangat berperan dalam hal penyampaian pesan promosi perusahaan, dalam hal ini suatu software seperti Macromedia Flash MX yang mana penulis gunakan dalam Penulisan Ilmiah ini adalah salah satu software yang dapat mewujudkan hal tersebut.

4.2.

Saran Keberhasilan Penggunaan CD Profile sebagai suatu media

berpromosi sangat ditentukan oleh isi dan terlebih cara pemakaian efek animasi yang ada. 82

Oleh sebab itu animasi yang digunakan hendaknya disesuaikan dengan model yang sedang menjadi tren terkini ataupun sesuatu yang berbeda dari model - model animasi yang ada, supaya CD Profile yang dibuat tidak ketinggalan jaman dan membosankan.

83

84

85

BAB I PENDAHULUAN. PT. Waterway Advertising adalah sebuah perusahaan advertising. yang bergerak dalam bidang pembuatan situs ( web design ), desain

Recommend Documents