Laporan Praktikum IVAnimasi Dasar dan Action ScriptPraktikum Multimedia

Ristania Fitri Wulandari120533430917PTI E 2012

S1 PENDIDIKAN TEKNIK INFORMATIKAJURUSAN TEKNIK ELEKTROFAKULTAS TEKNIKUNIVERSITAS NEGERI MALANGApril, 2014I. ANIMASI DASARA. Dasar Animasi1. Motion TweenBerikut adalah cara untuk membuat animasi pergrakan/ perubahan koordinat suatu objeka. Membuat sebuah objek persegi pada layer 1 di frame satu dengan cara memilih ractangle tool seperti pada Gambar 1.0

Gambar 1.0 objek yang dibuat dengan ractangle toolb. Kemudian klik kanan pada frame 15 di layer satu pilih Insert Key Frame. Maka akan muncul titik hitam pada frame 15 yang menandakan bahwa objek akan tetap ada sampai keadaan frame 15 seperti pada Gambar 1.1

Gamnar 1.1 Key Frame pada layer 1 frame 15.c. Klik key frame 15 (yang baru dibuat tadi ) kemudia Geser kedudukan objek persegi. Seperti pada Gambar 1.2ba

Gambar 1.2 Perpindahan objek dari tempat a ke tempat bd. Klik kanan pada jarak antara frame 1 dan frame 15 pada layer 1, pilih Create Classic Tween. Seperti pada Gambar 1.3

Gambar 1.3 Menu Create Classic Tweene. Jalankan Animasi dengan menekan short cut [ctrl+enter] atau menu kemudian test movie

Gambar 1.4 Hasil animasi objek dari titik pertama ke titik terakhir.

2. Motion shapeBerikut adalah cara transforasi objek dari persegi ke lingkaran bersamaan dengan proses berjalannya objek dari titik a ke titik ba. Membuat sebuah objek persegi pada layer 1 frame 1 seperti pada Gambar 1.5Gambar 1.5 Gambar objek persegi pada titik pertama.b. Kemudian tambahkan blank keyframe pada frame 15 di layer yang sama dengan cara klik kanan lalu Insert Blank Frame (Gambar 1.6), sehingga seperti pada Gambar 1.7. Hal ini pula menyebabkan objek yang tadi tidak tampak.

Gambar 1.6 Menu Insert Blank Keyframe.

Gambar 1.7. Hasil pada layer 1 setelah ditambahkan Blank Keyframe, c. Membuat objek lingkaran pada layer 1 frame 15 ditempat yang berbeda dari objek sebelumnya. Seperti pada Gambar 1.8Gambar 1.8 Objek lingkaran pada frame 15d. Untuk mentransformasi objek sekaligus memindahakan posisinya, klik kanan pada jarak antara frame 1 dan frame 15, kemudian pilik Create Shape Tween, seperti pada Gambar 1.9

Gambar 1.9 Menu Create Shape Tween

e. Lihat dan jalankan hasilnya dengan short cut [ctrl+enter] atauControl Test Movie

Gambar 2.0 proses transformasi objek dari persegi ke lingkaran.

3. Motion GuideBerikut adalah cara untuk membuat suatu objek bergerak mengikuti garis :a. Membuat layer bola.

Gambar 2.1 Memberi nama layer 1 menjadi layer bolab. Membuat objek bola (lingkaran) pada layer bola

Gambar 2.2 Gambar bola pada layer bolac. Kemudian insert pada frame 15 layer bola

Gambar 2.3. Gambar keyframe pada frame 15 layer bolad. Klik kanan pada layer bola lalu pilih add classic motion guide, sehingga layer bola menjadi seperti pada Gambar 2.5

Gambar 2.4. Pilih Add Classic Motion Guide

Gambar 2.5. Layer Bola e. Kemudian gambar sebuah garis menggunakan pen tool seperti pada Gambar 2.5

Gambar 2.5. Gambar Garis pada Guide Layer Bolaf. Kemudian klik kana ruang diantara frame 1 dan 15 pada layer bola kemudian pilih create classic tween

Gambar 2.6. Pilihan Create Classic Tweeng. Pilih keyframe pada frame 15 di layer bola lalu gerakkan bola menurut garis yang telah dibuat tadi menuju ke ujung garis

Gambar 2.7. Objek bola berada pada ujung garish. Kemudian lihat hasilnya dengan short cut ctrl + enter maka bola akan bergerak dari kiri ke kanan menurut pola garis yang dibua.

4. MaskingBerikut adalah cara untuk membuat efek kilap pada suatu tulisan dengan menggunakan teknik masking.a. Buat 3 layer, yaitu mask, kilap dan text

Gambar 2.8. Layer mask, kilap dan textb. Pilih layer text kemudian tulis kataMULTIMEDIA dengan menggunakan text tool seberti pada Gambar 2.9

Gambar 2.9. Tulisan yang dibuat dengan text toolc. Copy tulisan tersebut kemudian paste in place (Ctrl + Shift +V) pada frame 1 layer maskd. Buat objek segi empat pada frame 1, layer kilap

Gambar 3.0. Gambar objek persebi pada layer kilape. Insert keyframe pada frame 40 di layer kilap, dan insert frame di layer text dan layer mask

Gambar 3.1. Gambar layer mask kilap dan textf. Geser objek kilap ke akhir text multimedia, seperti pada gamba r 3.2

Gambar 3.2. Objek kilap yang digeser diakir tulisan multimediag. Klik kanan pada frame layer kilap kemudian pilih Create Shape Tween, untuk memberi animasi bergerak pada objek kilaph. Klik kanan pada layer mask dan pilih Mask seperti pada Gambar 3.3. supaya objek kilap mengikuti bentuk tulisan text

Gambar 3.3. Gambar layer maski. Lihat hasilnya dengan short cut ctrl + enter

Gambar 3.4 Hasil dari efek mask

B. Latihan1. Gambar PendidikanBerikut adalah cara membuat gambar bertema pendidikan dengan menggunkan tool tool yang ada pada adobe flash. Disini objek yang akan dibuat adalah globea. Buat sebuah lingkaran dengan mengguanakan oval tool seperti pada Gambar 3.6

Gambar 3.5. Menu oval tool

Gambar 3.6. Objek lingkaranb. Warnai objek lingkaran tadi menggunakan fill tool sehingga seperti pada Gambar 3.8

Gambar 3.7. Properti untuk mengganti warna

Gambar 3.8. Gambar objek lingkaran setelah diwarna biruc. Kemudian membuat layer baru dan menggambar penyangga globe menggunakan pen tool seperti pada Gambar 3.9

Gambar 3.9. Gambar penyangga globe menggunakan pen toold. Kemudian warnai penyangga menggunakan fill tool seperti pada Gambar 4.0

Gambar 4.0. Penyangga globe yang sudah diwarnaie. Membuat layer baru dan memberi gambar peta pada globe menggunakan pen tool seperti pada gambar 4.1

Gambar 4.1 Gambar peta pada globef. Warnai peta tersebut menggunakan fill tool sehingga seperti pada Gambar 4.2

Gambar 4.3. Gambar peta pada globe yang sudah diwarnaig. Beri efek gelap terang dengan menyeleksi bagian yang diperlukan menggunakan pen tool kemudian warnai dengan fill tool , selain itu gunakan brush tool juga sehingga seperti pada Gambar 4.5

Gambar 4.5 Globe yang sudah diwarnai

2. Animasi Text Kilap PLANET MULTIMEDIAa. Buat 6 layer, yaitu mask, kilap, text, lintasan dan penutup

Gambar 4.6. Gambar Layer yang akan dipakaib. Pilih layer text kemudian tulis kataPlanet Multimedia dengan menggunakan text tool seberti pada Gambar 4.7

Gambar 4.7. Tulisan yang dibuat dengan text toolc. Copy tulisan tersebut kemudian paste in place (Ctrl + Shift +V) pada frame 1 layer maskd. Buat objek lingkaran pada frame 1, layer kilap

Gambar 4.8. Gambar objek persebi pada layer kilape. Insert keyframe pada frame 40 di layer kilap, dan insert frame di layer text dan layer maskf. Geser objek kilap ke akhir text planet multimedia, seperti pada gamba r 3.2

Gambar 4.9. Objek kilap yang digeser diakir tulisan planet multimediag. Klik kanan pada frame layer kilap kemudian pilih Create Shape Tween, untuk memberi animasi bergerak pada objek kilaph. Klik kanan pada layer mask dan pilih Mask seperti pada Gambar 3.3. supaya objek kilap mengikuti bentuk tulisan text seperti pada Gambar 5.0

Gambar 5.1 Maskin planet multimediai. Buat objek lingkaran pada layer planet, satelit dan lintasannya menggunakan oval tool seperti pada Gambar 5.3

Gambar 5.4. Gambar objek planet, satelit dan lintasannyaj. Klik kanan pada layer satelit kemudian add classic motion guidek. Setelah itu buat jalur berupa lingkaran menggunakan oval tool pada layer guidel. Hapus sedikit bagian jalur tadi agar lingkaran tidak tersambungseperti pada Gambar 5.2

Gambar 5.2. Perpotongan lingkaranm. Kemudian klik kanan pada layer satelit satelit kemudian create classic tween dan pindahkan objek satelit diperpotongan garis yang lainn. Gambar sebuah jalur pada layer baru di bawah layer satelit, kemudian hapus bagian garis yang tidak diperlukan.

Gambar 5.3. Layer - layero. Lihat hasilnya dengan shortcut ctrl + enter

Gambar 5.4. Hasil animasi Planet Multimedia.

C. Tugas Rumah1. Avatar a. Buat layer layer seperti pada Gambar 5.5

Gambar 5.5 Layer yang diperlukan

b. Buat objek menggunakan pen tool

Gambar 5.6. Gambar wajah dengan pen toolc. Warnai objek dengan fill tool dan hapus strokenya. Sperti pada gambar 5.7

Gambar 5.7. Hasil avatar stelah diwanai dan di hapus strokenyad. Inset frame pada frame 15 di semua layer

Gambar 5.8. Gambar Layer

e. Ubah emoticon dengan menggunakan create shape tween pada layer mata, mulut dan text

Gambar 5.9 Gambar setelah diberi animasif. Lihat hasilnya dengan short cut ctrl + enter

2. Animasi Tata Suryaa. Buat layer sebanyak objek dan lingkaran, kemudian susun seperti sistem tata surya, seperti pada Gambar 6.0

Gambar 6.0. Susunan ojek tata suryab. Ubah properti setiap layer menjadi guide (klik kanan > guide>.c. Hapus sedikit jalur yang akan dilewati oleh planet (letak perpotongan berbeda setiap planetnya.)d. Pada frame ke 15 ubah posisi planet menjadi di ujung garis perpotongan yang tadi kemudian inset key frame dan create classic tween.

Gambar 6.1. Gambar frame setelah ditraslasikane. lihat hasilnya dengan menggunakan short cut ctrl + enter.

Gambar 6.2 Gambar animasi sistem tata surya

3. Animasi Indonesiaa. Buat tiga pokok, yaitu layer text, layer background dan layer suku_indo

Gambar 6.3 Layer pokokb. Import gambar pulau Indonesia pada layer background kemudian sesuaikan ukurannya seperti pada gambar

Gambar 6.4. Gambar background pada layer backgroundc. Atur frame layer baground menjadi 600 frame dan 20 frame per second seperti pada Gambar 6.5

Gambar 6.5 Frame pada layer backgroundd. Buat tulisan Indonesia pada keyframe 1 di layer text kemudian berikan classic motion tween sampai pada frame ke 60

Gambar 6.6 Text Indonesia dan pengaturan keyframenya.e. Import gambar dengan insert keyframe terlebih dahulu di layer suku indo

Gambar 6.7 Gambar suku indo yang telah diimport f. Atur frame dan keyframe sesuai dengan keinginan kita dan translasikan dengan menggunakan classic motion tween.

Gambar 6.8. Gambar Keyframeg. Ulangi langkah tersebut sampai frame ke 600

Gambar 6.9 Tampilan dari beberapa frameh. Lihat hasil dengan shortcut ctrl + enter

Gambar 7.0 Hasil tampilan

II. ACTION SCRIPTA. Menggunakan Action Script 2.01. Membuat Link dengan Buttona. Membuat tiga layer baru, yaitu layer action, button, text button dan text

Gambar 7.1 layer yang harus dibuatb. Membuat 2 objek persegi panjangan baru pada layer button

Gambar 7.2 Dua objek persegi panjan baruc. Kemudian convert kedua persegi tersebut dengan cara, klik kanan pada persegi kemudian pilih convert to symbol.

Gambar 7.3 Pillihan menu convert to symbold. Ubah type-nya menjadi button

Gambar 7.4 Pilih Pilihan typee. Pada layer text button buat tulisan satu dan dua kemudian berikan diatas objek persegi seperti pada Gambar 7.5

Gambar 7.5 Tampilan button setelah diberi tulisanf. Buat tulisan text satu pada layer text frame 1 dan text dua pada layer text frame 2, seperti pada Gambar 7.6

Gambar 7.6 Tampilan setelah diberi textg. Klik text satu, klik kanan pada frame 1 kemudian action atau tekan F9h. Masukkan scrip seperti pada Gambar 7.7

Gambar 7.8 Action scrip pada button 1i. Klik text dua, klik kanan pada frame 1 kemudian action atau tekan F9j. Masukkan scrip seperti pada Gambar 7.8

Gambar 7.9 Action scrip pada button 2k. Beri stop pada keyframe 1 di layer button atau tekan F9, supaya ketika di run pertama kali text nya tidak berubah ubah

Gambar 8.0 Scrip pada layer buttonl. Lihat hasilnya dengan shortcut ctrl+enter Gambar 8.1 Hasil dari latihan Action Script2. Membuat link dengan Action-Framea. Mebuat tiga layer yang dibutuhkan yaitu layer AS (action Script), button dan text seperti pada Gambar 8.2

Gambar 8.2 Layer yang dibutuhkan b. Buat button dari ractangle tool kemudian convert menjadi symbol dengan type button

Gambar 8.3 Objek persegi dan conversi ke symbolc. Berikan text pada kedua button seperti pada Gambar 8.4

Gambar 8.4 Button 1 dan 2d. Kemudian import 2 gambar berbeda pada layer text dan beri text juga. Taruh pada keyframe yang satu dan 2

Gambar 8.5 Tampilan pada layer text frame 1 dan 2e. Kemudian klik keyframe 1 pada layer AS dan berikan action-frame atau dengan menggunakan shortcut F9f. Masukkan script seperti pada Gambar 8.6

Gambar 8.6 Script pada layer ASg. Lihat hasilnya dengan menggunakan shortcut Ctrl + enter.

(a)

(b)Gambar 8.7 Hasil dari klik button 1 (a) dan klik button 2 (b)B. TugasMembuat Flash-KTPa. Buat terlebih dahulu interface Flash KTP dan layer layernya seperti pada Gambar 8.8 dan Gambar 8.9

Gambar 8.8 Interface Utama Flash KTP

Gambar 8.9 Layer dan Frame untuk Flash KTPb. Kemudian beri script untuk menanpilkan frame yang diinginkan pada saat button tersebut diklik. Script yang dipakai sama dengan scrip-scrip seperti pada lathian diatas. button-buttonnya seperti pada Gambar 9.0

Gambar 9.0 Interface Action Script c. Untuk melihat hasil adalah dengan shortcut Ctrl + Enter sehingga seperti pada Gambar 9.1

Gambar 9.1 Hasil dari Flash KTP

III. KESIMPULANFlash merupakan program grafis multimedia dan animasi yang dapat di pergunakan untuk membuat aplikasi web interaktif yang menarik. Selain digunakan sebagai media pembuat web interaktif. Flash dapat dimanfaatkan sebagai program pembuat game dan pembuatan untuk presentasi.Flash ini juga sebagai media untuk pembuatan kartun kartun karena pembuatan animasi ini pergerakan nya sangat halus namun dalam pembuatanya di butuhkan kesabaran dan ketelitiaan.Symbol adalah objek yang ada pada dokumen Flash dan dapat didufikasi sebanyak-banyaknya ke movie tanpa menambah pada ukuran movie tersebut.Dengan menggunakan Flash sebuah content animasi dapat dibuat dengan mudah karena Flash telah menyediakan feature-feature yang mendukung untuk membuatnya. IV. DAFTAR RUJUKANWirawan, I Made. 2013. Modul Ajar Praktikum Multimedia. Pendidikan Teknik Informatika Teknik Elektro Universitas Negeri Malang