flash nota pdf upload by abdul murad

5/10/2018 Flash Nota PDF upload by abdul murad - slidepdf.com

http://slidepdf.com/reader/full/flash-nota-pdf-upload-by-abdul-murad 1/161

Hadi Sutopo

MACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASH

MACROMEDIAMACROMEDIAMACROMEDIAMACROMEDIAMACROMEDIAFLASHFLASHFLASHFLASHFLASH

Ariesto Hadi Ariesto Hadi Ariesto Hadi Ariesto Hadi Ariesto Hadi

BAGIAN 1BAGIAN 1BAGIAN 1BAGIAN 1BAGIAN 1



Hadi Sutopo


PENGANTPENGANTPENGANTPENGANTPENGANT AR AR AR AR AR

Perkembangan teknologi yang pesat dewasa ini menuntut siapa saja untuk dapat

berperan aktif dalam dunia informasi, terutama pengembangan web. Penguasaan

teknologi menjadi syarat untuk memenangkan persaingan, serta tetap bertahan di bidang

masing-masing. Macromedia Flash adalah perangkat lunak untuk pembuatan animasi

yang digunakan untuk web.

Buku ini merupakan panduan untuk pelatihan tingkat lanjut yang ingin me-

ngembangkan diri di bidang animasi menggunakan Macromedia Flash. Perintah-

perintah yang digunakan dalam panduan pelatihan ini sengaja dipilih supaya mudah

dipahami. Dengan menguasai materi Actions Script ini diharapkan Anda sudah dapat

menyelesaikan pekerjaan-pekerjaan tingkat lanjut yang berkaitan dengan animasi web.

Untuk dapat menguasai materi buku ini beberapa peryaratan diperlukan, yaitu

pemahaman serta keterampilan menggunakan:

- Komputer Grafik

- Algoritma dan Pemrograman

Bila Anda sudah menguasai materi ini, tidak sulit untuk mengembangkan

kreatifitas yang Anda miliki untuk pembuatan desain web. Semoga buku ini dapat

membantu Anda menguasai tingkat dasar pembuatan animasi web menggunakan

Macromedia Flash dengan baik. Karir di bidang Flash terbuka lebar baik dari sisi artistikmasupun pemrograman. Setiap situs yang kompleks akan selalu membutuhkan keduanya.

Pemrograman dengan Flash dapat menciptakan animasi yang intaraktif untuk digunakan

di web. Pemahaman grafik dan pemrograman sangat diperlukan untuk mengembangkan

diri di bidang web multimedia.

Kami menyadari banyak kekurangan pada buku ini. Sangat kami harapkan kritik,

saran dan gagasan dari rekan-rekan pemerhati serta pelaku komputer grafis dan desain.

Kritik dan saran dapat disampaikan melalui e-mail dengan alamat:

l [email protected]

Jakarta, 1 Desember 2000

Penulis



Hadi Sutopo


DDDDD AFT AFT AFT AFT AFT AR ISI AR ISI AR ISI AR ISI AR ISI

PENGANTAR ................................................................................................................... 2

1. Pendahuluan .................................................................................................................. 4

1. Sekilas tentang Macromedia Flash 5................................................................ 4

2. Gambaran animasi pada Timeline ................................................................... 5

2. Drawing ........................................................................................................................... 5

3. Animation ......................................................................................................................... 5

1. Frame by frame .................................................................................................. 5

2. Shape tweening ................................................................................................. 6

3. Shape hint .......................................................................................................... 6

3. Motion tweening .............................................................................................. 6

4. Tweening motion along path .......................................................................... 7

5. Onion skin ........................................................................................................ 8

6. Membuat movie clip ........................................................................................ 9

7. Membuat animasi teks dengan path ............................................................. 108. Membuat animasi karakter dengan path ....................................................... 11

9. Mask ................................................................................................................ 12

4. Sound .............................................................................................................................. 15



Hadi Sutopo


1.1.1.1.1.

PENDAHULUANPENDAHULUANPENDAHULUANPENDAHULUANPENDAHULUAN

1. Sekilas tentang Macromedia Flash 51. Sekilas tentang Macromedia Flash 51. Sekilas tentang Macromedia Flash 51. Sekilas tentang Macromedia Flash 51. Sekilas tentang Macromedia Flash 5

Pada awal abad ke-21 ini, komputer grafis telah menunjukkan kemajuan yang

pesat, mampu menghasilkan animasi menjadi lebih komunikatif. Macromedia Flash

adalah perangkat lunak aplikasi untuk animasi yang digunakan untuk Web. Dengan

Macromedia Flash, Anda dapat melengkapi web site Anda dengan beberapa macam

animasi, sound, intaraktif animasi dan lain-lain. Gambar hasil dari Macromedia Flash

dapat diubah ke dalam format lain untuk digunakan pada pembuatan desain web yang

tidak langsung mengadaptasi Flash.

Saat Flash pertama kali muncul, semua orang terekjut dengan ukuran sangat

kecil dapat menampilkan animasi yang sangat bagus. Pada saat itu orang

membandingkannya dengan file video sehingga menjadikan Flash sesuatu yang sangat luar biasa.

Kini situs-situs web telah banyak menampilkan animasi yang menarik dengan

Flash. Dan lama kelamaan web yng dibuat dengan Flash menjadi suatu hal yang biasa,

namun orang tetap kagum bila suatu situs web menampilkan animasi yang betul-betul

unik dan menarik. Kreativitaslah yang paling utama untuk membuat suatu situs menjadi

tetap menarik di mata pengunjung.



Hadi Sutopo


2. Gambaran animasi pada Timeline2. Gambaran animasi pada Timeline2. Gambaran animasi pada Timeline2. Gambaran animasi pada Timeline2. Gambaran animasi pada Timeline

Gambaran keyframe pada area Timeline dapat dilihat dalam bentuk titik hitam.

Macam ganbaran pada area Timeline pada saat pembuatan animasi:

Gambaran motion-tweened animation. Frame-frame yang membentuk tweened

animation digambarkan dengan garis berikut tanda panah hitam dengan back-

ground biru terang.

Shape-tweened tweened animation. Frame-frame yang membentuk tweened

animation digambarkan sebagai garis beriukut tanda panah hitam dengan

background hijau terang.

Garis putus menunjukkan bahwa keyframe akhir tidak ada.

Gambaran menunjukkan bahwa frame-frame sama dengan framme awal.

Huruf "a" kecil menunjukkan bahwa frame berhubungan dengan action yang

dapat dilihat pada Action Panel.

Gambar bendera merah menunjukkan bahwa pada frame tersebut terdapat

label atau komentar.



Hadi Sutopo


22222.....

DRAWINGDRAWINGDRAWINGDRAWINGDRAWING

Gradient FillsGradient FillsGradient FillsGradient FillsGradient Fills Flash 4 Bible - 144

Langkah-langkah membuat sphere:

1. Select Oval tool

2. Select Window −−−> Panel, klik Fill, maka keluar Fill dialog box

3. Tentukan Radial Gradient, kemudian menentukan warna gradasi

4. Pada stage gambar sphere.

5. Simpan file tersebut dengan nama Latihan101.fla

3.3.3.3.3.

ANIMA ANIMA ANIMA ANIMA ANIMA TIONTIONTIONTIONTION

FFFFFrame by framerame by framerame by framerame by framerame by frame

Flash 4 Bible - 168

Frame by frame animation seperti pekerjaan manual pada pembuatan film

animasi, yaitu dengan membuat gambar satu persatu setiap frame. Contoh berikut

menempatkan 5 buah gambar yang dibuat dengan Adobe Photoshop. Pada setiap frame

posisi maupun skala fgamber diatur, sehingga animasi seperti terdiri dari banyak gambar.

Langkah-langkah frame by frame animation:

1. Select frame di mana akan dibuat animasi, dan buat keyframe

dengan cara Select Insert −−−> Keyframe



Hadi Sutopo


2. Pada menu File −−−> Import

3. Import gambar bird1.jpg

4. Buat keyframe baru setelah frame tersebut dengan cara

Insert −−−> Keyframe

5. Import gambar bird2.jpg

6 Ulangi untuk menegimport bird3.jpg, bird4.jpg dan bird5.jpg.

7. Pada library akan muncul simbol dari kelima gambar tersebut.

6. Teruskan langkah tersebut beberapa kali


7. Select Control −−−> Play

8. Bila menghendaki looping, maka Select Control −−−> Loop Playback



Hadi Sutopo


Shape TShape TShape TShape TShape Tweeningweeningweeningweeningweening

Flash 5 Help

Shape tweened animation adalah animasi perubahan bentuk atau shape. Shape

tweened animation mirip dengan morphing, yaitu perubahan bentuk dari satu ke bentuk

lain. Serlain bentuk, lokasi, ukuran dan warna juga dapat dibuat tween. Shape tweening

hanya digunakan untuk tween shape saja, dan tidak dapat digunakan untuk symbol,

gambar bitmap atau text block.

Langkah-langkah membuat shape tweening:

1. Select frame di mana akan dimulai animasi, dan buat keyframe2. Gambar image awal, angka 1 dengan warna biru

3. Select keyframe kedua dan buat angka 2 dengan warna orange.

4. Klik angka "1" pada keyframe awal dan dijadikan shape.

Pilih Modify −−−> Break Apart

5. Klik huruf "2" pada keyframe akhir dan dijadikan shape. Pada angkja "2" akan

muncul shape hint.

6. Tempatkan ketiga shape hint pada angka "2".

Select Modify −−−> Frame, maka keluar dialog box frame properties.

7. Pada box tweening pilih Shape

8. Select Control −−−> Play, maka animasi tweening akan ditampilkan di layar




Hadi Sutopo


Shape HintShape HintShape HintShape HintShape Hint

Flash 5 Help

Bila shape terlalu rumit, shape tweening tidak akan menghasilkan morphing yang

diinginkan. Untuk mendefinisikan titik titik tertentu digunakan shape hint.

Langkah-langkah membuat

shape hint:

1. Buka file Latihan103.fla

2. Klik pada frame ke-1

Pilih Modify −−−> Transform −−−> Add Shape Hint

3. Pilih View −−−> Snap to Object

4. Klik pada shape hint. Klik tombol mouse sebelah kanan dan pilih Add Hint

Ulangi lagi sehingga shape terdapat empat shape hint.

5. Klik pada frame ke-2

Tempatkan keempat shape hint pada angka "2" di titik yang menentukan

bentuk dari angka 2 tersebut

6. Pilih Control −−−> Play, maka animasi tweening akan ditampilkan di layar

7. Simpan file tersebut dengan nama Latihan103a.fla

Gambar tanpa dan dengan shape hint



Hadi Sutopo


Motion TMotion TMotion TMotion TMotion Tweeningweeningweeningweeningweening

Flash 4 Bible - 169

Pada animtion ini, property dari instance, group dan text block dapat diubah.

Flash dapat men-tween warna dari instance dengan gradasi, fade in dan fade out. Untuk

men-tween warna dari group dan tulisan harus dijadikan symbol terlebih dulu.


1. Select frame di mana akan dimulai animasi, dan buat keyframe

2. Buat image awal atau drag symbol dari library.

3. Pastikan frame awal yang aktif, select Insert −−−> Create Motion Tween

4. Tentukan frame akhir

5. Select Insert −−−> Keyframe

6. Pastikan frame akhir yang aktif

7. Gerakkan gambar pada posisi yang dikehendaki



Motion tweening dapat digunakan untuk membuat animasi dari image yang

sudah. Contoh berikut adalah image dengan format file .gif.


1. Select frame di mana akan dimulai animasi, dan buat keyframe

2. Import file bee.gif . Pilih Insert −−−> Convert to Symbol

3 - 7. Sama dengan di atas

8. Untuk mengatur perubahan warna pada frame akhir, pada Panel Effect,

pilih perubahan warna yang dikehendaki.





Hadi Sutopo


TTTTTweening motion along pathweening motion along pathweening motion along pathweening motion along pathweening motion along path

Motion tweening dapat digunakan dengan path tertentu, sehingga animasi

mengikuti jalur tertentu.


1. Gambar kupu-kupu dengan Macromedia Freehand

2. Select File −−−> Import, format file FH dapat langsung diimport

3. Buat motion tweening seperti telah dibicarakan sebelumnya

4. Pada layer klik tombol kanan mouse, select Add Motion Guide

5. Gambar dengan Pen, Pencil, Line, Circle, Rectangle tool path yang

diinginkan.

6. Snap center dari kupu-kupu awal path, kemudian pada akhir path

7. Select Control −−−> Play, maka animasi tweening akan ditampilkan

mengikuti path.


Bila menghendaki jalan kupu-kupu kelihatan wajar (selalu menghadap ke depan)

1. Klik frame antara awal dan akhir keyframe pada layer kupu-kupu

2. Select Modify −−−> Frame, maka keluar dialog box frame properties.

3. Pilih Orient to path



Hadi Sutopo



mengikuti path dan gambar kupu-kupu selalu menghadap ke depan


Bila menghendaki path tidak kelihatan, klik hide pada Guide layer.

Animasi dapat dibuat dengan background dari image tertentu. Pada animasi

kupu-kupu di atas dapat ditambahkan backgroud.

Langkah-langkah menambahkan background pada shape tweening:

1. Buat layer untuk menempatkan background

2. Select File −−−> Import, format file Sunset.jpg

3. Skala image Sunset sehingga besarnya sesuai dengan ukuran movie


mengikuti path dan gambar kupu-kupu selalu menghadap ke depan




Hadi Sutopo


Onion SkinOnion SkinOnion SkinOnion SkinOnion Skin

Pada umumnya Flash hanya menampilkan satu frame dari sekian banyak frame

animasi pada stage. Untuk menampilkan dua atau lebih frame dilakukan sebagai berikut:

onion marker onion skin onion skin uotline

1. Select File −−−> Import, file onion_skin.fla

2. Klik tombol Onion Skin.

Untuk mengatur banyaknya frame yang ditampilkan menggeser union marker

Untuk menampilkan onion skin secara outline, dapat dilakukan dengan cara

sebagai berikut:

3. Klik tombol Onion Skin Outline.



Hadi Sutopo


Contoh kasus penggunaan onion skin, yaitu bila suatu saat ingin membuat

animasi pertumbuhan tanaman Motion tweening dapat digunakan dengan path

tertentu, sehingga animasi mengikuti jalur tertentu.

Membuat movie clipMembuat movie clipMembuat movie clipMembuat movie clipMembuat movie clip

Movie clip adalah mini Flash movie yang mempunyai timeline dan property

tersebdiri. Setiap movie clip dapat diambil dari library dan diletakkan pada stage. Untuk

membedakan satu movie clip dengan lainnya, setiap movie clip mempunyai nama in-

stance masing-masing.

Langkah-langkah membuat movie clip

1. Select frame di mana akan dibuat animasi, dan buat keyframe

dengan cara Select Insert −−−> Keyframe

2. Select File −−−> Import, file fan1.fh8

3. Select Insert −−−> Convert to Symbol, fan1

4. Keluar dialog box, pada field Name diisi fan1, pada Behaviour pilih Movie

Clip

5. Buat layer baru untuk

menempatkan fan2

6. Import file fan2.fh87. Buat symbol fan2

8. Pada library terdapar 2 simbol, yaitu fan1 dan fan2

9. Lakukan rotasi 450 pada fan2

10.Simpan file tersebut dengan nama Latihan108.fla



Hadi Sutopo


4.4.4.4.4.

SOUNDSOUNDSOUNDSOUNDSOUND

Menempatkan Sound pada LayerMenempatkan Sound pada LayerMenempatkan Sound pada LayerMenempatkan Sound pada LayerMenempatkan Sound pada Layer

Flash 4 Bible - 203

Langkah-langkah import sound:

1. Select File --> Import

2. Select format file AIFF, WAV, MP3

3. Klik Open

4. Select Window --> Library ,

untuk memeriksa file tersebut sudah masuk ke dalam Flash

5. Select Insert --> Layer, untuk menempatkan sound pada layer

6. Dengan sound layer tersebut, drag sound dari Library ke Stage

Kita dapat menempatkan multiple sound pada layer, atau pada layer yabg beruisi

obyek lain. Disarankan setiap sound ditempatkan pana layer yang terpisah.

7. Select Window --> Panel -> Sound

Pada Sound panel pilih sound dari pop-up menu8. Select Control--> Play

Menempatk Menempatk Menempatk Menempatk Menempatk an Sound pada Fan Sound pada Fan Sound pada Fan Sound pada Fan Sound pada Frameramerameramerame

Flash 4 Bible - 203

Langkah-langkah membuka file:

1. Select File --> Open, maka akan keluar dialog box untuk memilih file.

3. Pilih file tweening_shape.fla

4. Klik Open, maka gambar ditampilkan pada work space.



Hadi Sutopo


5. Select File --> Import

6. Select format file AIFF, WAV, MP3

7. Klik Open

8. Select Window --> Library ,

untuk memeriksa file tersebut sudah masuk ke dalam Flash

9. Select Insert --> Layer, untuk menempatkan sound pada layer

10. Pada layer Sound pilih frame ke-15

11. Select Insert --> Keyframe,

12. Dengan sound layer dan keyframe tersebut, drag sound dari Library ke

Stage

13. Select Control--> Play

flash nota pdf upload by abdul murad

Documents