Animasi macromedia Flash anggit.pdf

14
TUGAS AKHIR MID SEMESTER TUTORIAL MATERI MACROMEDIA Oleh : Nama : Anggit Restu Pinuntun NPM : 110451290006 Kelas : SKS 12.1 SEKOLAH TINGGI ILMU ELEKTRONIKA DAN KOMPUTER (STEKOM) 2013

Transcript of Animasi macromedia Flash anggit.pdf

Page 1: Animasi macromedia Flash anggit.pdf

TUGAS AKHIR MID SEMESTER

TUTORIAL MATERI MACROMEDIA

Oleh :

Nama : Anggit Restu Pinuntun

NPM : 110451290006

Kelas : SKS 12.1

SEKOLAH TINGGI ILMU ELEKTRONIKA DAN KOMPUTER (STEKOM)

2013

Page 2: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 1

I. Teknik membuat Burung terbang

1. Buka Macro media Flash lalu pilih Flash Document

2. Buat kepala dan badan burung

a) Buat kepala dari lingkaran (Oval Tool) dan badan,mulut dan kuncung dari garis (Line Tool)

b) Untuk mendesign badan, gunakan Selection tool arahkan pointer ke tepi garis hingga pointer

membentuk lengkungan dan Drag

c) Berikan warna dengan memilih warna fill Color terlebih dahulu lalu tungkan warna tersebut dengan

Paint Bucket Tool

Oval Tool

Line Tool

Page 3: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 2

d) Hapus garis tepi dengan menggunakan section tool lagi lalu klik bagian yang ingin dihilanggkan

garisnya kemudian tekan Delete pada Keyboard

e) Ganti nama layer 1 dengan nama Badan,dengan klik dua kali pada layer 1 dan ketik “badan”

f) KLik kanan insert Frame pada Frame ke 20

g) Pada frame 1 berikan kaki burung

3. Jadikan gambar badan burung menjadi Moving Clip

a) Blok semua frame dan semua layer klik kanan pada gambar burung yang terblok lalu pilih convert

to Syimbol

b) Pada tampilan Convert to Syimbol, Ganti namanya dengan burung dan type Movie Clip

c) Sekarang rangkaian gambar badan burung tersimpan pada library menjadi Movie Clip yang siap di

edit dan di tambahi animasi

Fill Color

Paint Bucket Tool

Page 4: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 3

4. Edit movie clip burung pada library, untuk memberikan mata dan sayap, klik kanan pada movie clip

burung dan pilih edit

5. Buat layer baru dengan nama Mata, dan berikan animasi berkedip-kedip saat terbang

a) Buat lingkaran dengan Oval tool besar dan kecil

b) Tempatkan mata pada tempatnya

c) Duplikatkan gambar mata ke frame 2 sampai 20 dengan menekan tombol F6 pada keyboard

d) Pada frame 5,10,15 dan 20 ganti gambar mata dengan setengah lingkaran agar terlihat

terpejam

6. Buat layer baru dan beri nama Sayap, dan berikan animasi sayap bergerak ke atas kebawah

a) Buat sayapnya menggunakan line tool dan berikan warna, teknik design sayap seperti langkah 2b

dan hapus garis tepi bagian bawah pada gambar sayap

b) Duplikatkan gambar sayap frame 1 ke frame 2 dengan tombol F6 pada keyboard dan pipihkan

gambar sayap menggunakan free Transform Tool,pastikan bagian bawah sayap tidak bergerak dan

hanya bagian atas sayap saja, lakukan hal tersebuat sampai frame ke 10

c) Lanjutkan langkah 4b namun kali ini drag dari atas kebawah, lakukan sampai frane 20 hingga

bentuk frame 1 dan frame 20 sama

Page 5: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 4

7. Buat layer baru dan beri nama layer Sayap kanan dan buat efek sama seperti layer sayap

a) Pindah layer sayap kanan ke bawah layer badan

b) Blok frame 1 sampai 20 pada layer sayap dan klik kanan Copy frame, pilih frame 1 layer sayap

kanan dan klik kanan paste Frame

c) Pada setiap frame 1 sampai 20 pada layer sayap kanan putar sedikit dan geser maju jika sayap

sedang diatas (frame 1-5,dan 15-20) dan geser mundur jika sayap sedan dibawah (frame 6-14)

agar tidak tertutup oleh layer sayap karena letaknya di belakang layer sayap

8. Sekarang masuk ke scene1 dan kecilkan sesuai seera, maka terdapat Movie clip pada layer burung frame1

9. Tambahka layer Motion guide, dan berikan coretan sebagai jalur burung menggunakan pencil tool

10. Pada layer motion Guide frame 25 klik kanan Insert Frame

11. Pada layer burung frame 25 klik kanan insert key frame dan diantara frame 1 sampai 25 klik kanan create

Motion tween

Scene1 (halaman Utama)

Movie Clip (active edit)

Add Motion Gade

Page 6: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 5

12. Pilih gambar burung di belakangnya ada bundaran kecil, tempatkan lingkaran kecil tersebut ke ujung

kanan coretan pencil motion guide dan pastikan yang sedang aktif adalah frame 1

13. Pilih frame 25 dan tempatkan lingkaran kecil pada gambar burung ke ujung coretan pensil motion guide

yang satunya (ujung kiri)

14. Berikan Background burung melalui parameter

15. Berikan awan dengan animasi berjalan dan efek awan hitam saat di akhirnya

a) Buat layer awan dari Oval tool tanpa garis tepi,berwarna putih dan letakkan di bagian kiri dan edit

menggunakan selection Tool

b) pada frame 25 Klik kanan insert keyframe

c) Properties pada frame 1 pilih tween: shape, maka layer awan dari frame 1 sampai frame25

berwarna hijau

Parameters

Page 7: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 6

d) Aktifkan frame 25, geser gambar awan kearah kanan dan ganti warna awan menjadi warna gelap

dari fill color

16. Animasi burung terbang sudah jadi, untung mencobany dapat menekan tombol Ctrl+Enter

II. Teknik membuat coretan dengan 2 gambar

17. Buka Macromedia Flash lalu pilih Flash Document

Page 8: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 7

1. Masukkan gambar/Foto dengan cara drag dari windows explorer ke lembar kerja flash, maka gambar akan

tampil di lembar kerja dan di library , serta ganti nama layer 1 menjagi gambar 1

2. Buat layer baru dengan nama coretan, selanjutnya layer ini akan menutupi layer gambar1 sedikit demi

sedikit pada tiap frame nya

a) Pada frame 1 coret bagian tepi kiri atas dengan brush tool

b) Tekan F6 pada keyboard dan tambahkan coretan.

c) Lakukan langkah b sampai semua gambar tertutup rapat (usahakan tidak ada yang ter lewat

Page 9: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 8

d) Tekan F6 lagi kali ini hapus dari bagian kanan bawah ke atas menggunakan Eraser Tool sampai

semua gambar terlihat secara utuh

3. Pada layer gambar berikan insert key frame pada frame terakhir, (sejajar dengan Frame terakhirnya layer

coretan)

4. Masukkan kembali gambar/ foto yang kedua dengan cara drag (seperti langkah 1), pastikan gambar ini

menutup gambar yang pertama

5. Pada layer coretan blok/pilih dari frame 1 sampai frame terakhir, klik kanan copy frame dan paste frame

pada layer coretan setelah frame terakhir

Page 10: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 9

6. Berikan Insert Frame pada layer gambar frame terakhir (sejajar frame terakhirnya layer coretan )

7. Buat 1 layer lagi dengan nama layer pencil

a) Buat symbol graphic melalui Insert -> new Syimbol, pilih Opsi Graphic, beri nama Pencil,lalu OK

b) Pada lembar kerja pencil, buat gambar pencil dengan 3 buah kotak

Page 11: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 10

c) Pada kotak kanan atas dan kiri atas tarik keatas dengan mengaktifkan free transform tool dan pilih

distort drag keatas, Hapus garis tepi pada tiap-tiap kotak

d) Untuk membuat ujung pensil, ubah rectangle tool menjadi polystar tool dengan klik segitiga kecil,

pada properties klik options dan ganti nilai number of sides : 3,kemudian Ok (tanpa garis tepi),

sehingga menjadi sebuah segitiga, sesuaikan ukurannya dengan batang pensil

e) Copy ujung pensil (segitiga) tersebut dan beri ukuran lenih kecil dan ganti warnanya menjadi

warna Hitam

Free Transform Tool

distort

Page 12: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 11

f) Berikan 1 buah lingkaran pada atas pensil dengan dua warna menggunakan type Radial, sesuaikan

ukurannya selebar pensil

g) Kini gambar pensil sudah jadi dan masuk ke scene 1

8. Pada layer pencil frame 1, drag Syimbol pensil dari Library ke area kerja dan kecilkan ukurannya

9. Buat animasi perframe dengan gerakan (atas bawah atau bawah ke atas) sejalan dengan frame-frame

layer coretan

a) Tempatkan pensil di ujung coretan 1

Page 13: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 12

b) Tekan tombol F6 dan letakkan di ujung yang satunya lagi

c) Ulangi langkah B dan ikuti pergerakan coretan sampai coretan yang menutupi gambar 1 pada

layer gambar kembali terbuka

d) Copy frame dari frame 1 sampai frame terakhir dan paste frame pada frame terakhir layer pensil

Page 14: Animasi macromedia Flash anggit.pdf

Animasi dengan Macromedia Flash Page 13

10. Pada layer coretan klik kanan pilih mask, maka layer gambar dan layer coretan akan berubah menjadi

mask

11. Animasi membuat coretan 2 gambar selesai, untuk mengujinya dapat menekan Ctrl+Enter

2 layer menjaberubah