modul flash 8

kata pengantar

3

Untuk Kalangan Sendiri

kata pengantar

5

KATA PENGANTAR

P

enggunaan komputer sebagai media interaktif ternyata mampu menutupi kelemahan teknik presentasi konvensional, keterbatasan visualisasi, animasi dan aplikasi web interaktif.dengan kemampuan yang mendekati sempurna, komputer sebagai media interaktif sangat membantu para pengguna komunikasi visual, web master dan animator dalam menggambarkan dan menghasilkan animasi yang professional. Salah satu aplikasi yang banyak dimanfaatkan para animator untuk membuat animasi dan media interaktif adalah macromedia Flash. Di antara program-program animasi, program macromedia Flash merupakan program yang paling fleksibel dalam pembuatan animasi, seperti Animasi Interaktif, Presentasi, Company Profile, Game, Web Site, E-Card, Aplikasi Multimedia hingga Aplikasi Ponsel. Semoga buku ini memiliki arti bagi pengembangan ilmu.

Belik, April 2009

Khaerul Nurchiyan

BAB IMENGENAL MACROMEDIA FLASH PRO 8MEMBUAT DOKUMEN FLASHUntuk membuat dokumen baru ikuti langkah-langkah sebagai berikut: 1. Pilih Start > All Programs> Macromedia> Maromedia Flash 8 maka akan muncul jendela new document sebagai berikut.

2. Pilih Flash Document maka akan ditampilkan area kerja flash sebagai berikut.

mengenal macromedia flash pro 8

7

3. Selanjutnya aturlah docement flash melalui panel properties.

Mengatur ukuran stage

Mengatur warna background

Mengatur kecepatan animasi

4. Untuk menampilkan ruler klik menu View > Rulers atau tekan tombol ctrl+alt+shift+R pada keyboard. Skala pada ruler sesuai dengan pengaturan ukuran stage yang Anda lakukan. 5. Untuk menampilkan grid klik menu View > Grid > Show Grid. Maka akan ditampilkan tanda cek pada show grid dan jika Anda ingin membuang atau tidak menampilkan grid, hilangkan tanda cek pada pilihan show grid.

TOOLBOX DALAM MACROMEDIA FLASH PRO 8Toolbox menampilkan beberapa piranti yang digunakan untuk membuat objek seni, mewarnai, mengedit dan masih banyak lagi. Berikut beberapa fungsi dan macam tool di macromedia FlashTool Nama Selection Subselectio Shortcut V A Fungsi Untuk menyeleksi objek Untuk menyeleksi tepi objek dan

Tool

Nama n Free Transform Lasso Pen Text Line Rectangle Oval Polystar Pencil Brush Paint Bucket Ink Bottle Eyedropper Eraser Hand Zoom Stoke Color Fill Color Swap Color Panel Warna

Shortcut memodifikasinya Q L P T N R O Y B K S I E H M Shift+F9

Fungsi

Untuk mengubah ukuran dan memutar objek dengan bebas Untuk menyeleksi bagian yang diinginkan Untuk menggambar objek path Untuk menulis teks Untuk menggambar garis lurus Untuk menggambar objek kotak Untuk menggambar objek oval Untuk menggambar objek polygon dan bintang Untuk menggambar dengan bentuk coretan pensil Untuk menggambar dan mewarnai Untuk mewarnai bidang objek tertutup Untuk mewarnai garis Untuk mengkopi warna, baik warna garis maupun warna bidang Untuk menghapus objek Untuk memindah posisi stage Untuk mengubah ukuran stage Untuk menentukan warna garis pada objek Untuk menentukan warna dasar pada objek Untuk menukar warna bidang dengan warna garis Untuk membuat warna

mengenal macromedia flash pro 8

9

TIMELINETimeline adalah panel untuk mengatur dan mengontrol jalannya animasi. Dalam jendela Timeline terdapat pilihan pengaturan kecepatan jalannya animasi. Masukkan nilai pada frame rate. Semakin besar nilai yang Anda masukkan maka akan semakin lambat animasi yang berjalan. Jendela Timeline berisi Layer, Frame, Blank Keyframe dan Keyframe. Berikut adalah contoh timeline sebuah animasi yang telah jadi.Timeline header Layer masking Layer guide Empty keyframe Frame Playhead Frame View pop-up menu

Menghapus layer Add folder Add layer

Animasi frame by frame Animasi tween

Emplased time indicator Frame rate indicator

MENGIMPORT FILE GAMBARMacromedia flash pro 8 mendukung berbagai macam format gambar seperti bmp, jpg, gif, tif, png, wmf, ai, fh, Untuk mengimport gambar Anda tinggal menekan tombol Ctrl + R atau klik File > Import > Import to Stage atau Import to Library. Kemudian muncul kotak dialog Import, dan beberapa pilihan menu diantaranya adalah: Import to Stage : jika Anda menggunakan perintah ini maka gambar yang Anda import akan muncul pada stage dan masuk dalam panel library. Import to Library : jika Anda menggunakan perintah ini maka gambar yang Anda import hanya akan masuk dalam library tetapi tidak muncul dalam stage.

Bekerja dengan gambar dan teks

11

BAB IIBEKERJA DENGAN GAMBAR DAN TEKSMENGGUNAKAN RECTANGLE TOOL1. Klik Rectangle Tool 2. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari objek yang akan Anda buat. 3. Drag pointer mouse di dalam stage untuk membuat bentuk kotak. Tekan shift jika Anda ingin membuat kotak bujur sangkar atau kotak dengan sisi yang sama panjang. Hasilnya akan tampak seperti pada Gambar berikut.

MENGGUNAKAN OVAL TOOL1. Klik Oval Tool 2. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari objek yang akan Anda buat. 3. Drag pointer mouse di dalam stage untuk membuat bentuk kotak. Tekan shift jika Anda ingin membuat lingkaran dengan bentuk yang proporsional. Hasilnya akan tampak seperti pada Gambar berikut.

MENGGUNAKAN POLYSTAR TOOL1. Klik Polystar Tool . 2. Tentukan warna garis (Stroke Color) dan warna dasar (Fill Color) dari objek yang akan Anda buat. 3. Klik tombol Option pada Properties sehingga akan muncul kotak dialog Tool Settings seperti pada Gambar 3.7.

Pada kotak dialog Tool Settings akan tampil option , yaitu: Style menyediakan dua bentuk objek yaitu polygon dan Star. Anda dapat memilihnya untuk membuat objek yang Anda inginkan. Number of sides digunakan untuk mengatur jumlah sisi dari objek yang akan Anda buat. Star point size digunakan untuk mengatur ketajaman sudut pada objek bintang. Senakin kecil nilai yang nda masukkan maka akan semakin tajam sudut yang dikasilkan. 4. Jika Anda langsung membuat objek tapa melakukan setting terlebih dahulu maka objek yang dihasilkan akan sesuai setingan secara default yaitu setingan dengan bentuk polygon bersisi 5. 5. Drag pointer mouse di dalam stage untuk membuat objek sesuai setting yang sudah Anda lakukan.

MENGGUNAKAN LINE TOOL1. Klik Line Tool . 2. Tentukan warna garis (Stroke Color) dari objek yang akan Anda buat. 3. Drag pointer mouse di dalam stage untuk membuat garis. Hasilnya akan tampak seperti pada Gambar berikut.


13

4. Untuk membuat garis lengkung, klik Selection Tool dan arahkan pointer mouse tepat pada garis hingga pointer mouse berubah bentuk seperti terlihat pada Gambar berikut.

5. Klik dan geser ke arah yang Anda inginkan sehingga garis lurus tersebut berubah menjadi garis lengkung. Perhatikan Gambar beriukut.

MENGGUNAKAN PENCIL TOOL1. Klik Pencil Tool 2. Tentukan Pencil Mode seperti Straghten untuk membentuk garis lurus, Smooth untuk membentuk garis halus, Ink untuk membentuk garis sesuai yang kita buat. 3. Buat garis sesui keinginan Anda. Hasilnya akan tampak seperti pada Gambar berikut.

sraighten

Smooth

Ink

MENGOLAH OBJEK MENGGUNAKAN OBJEK DRAWINGObjek drawing mode digunakan untuk membuat objek tanpa mempengaruhi objek yang lain. Objek yang dibuat menggunakan objek drawing tidak dapt langsung diedit karena objek bukan berupa objek vektor sehingga untuk mengeditnya Anda harus mengklik dua kali objek tersebut sehingga Anda akan masuk dalam stage objek drawing. Berikut adalah contoh penggunaan objek drawing mode. 1. Pilih salah satu Tool untuk menggambar pada Tools. Misalnya adalah Polystar Tool. 2. Aktifkan Object Drawing pada Tools atau Anda dapat menggunakan shortcut yaitu dengan menekan tombol J pada keyboard. 3. Buat dua objek yang saling bersinggungan pada stage. 4. Non aktifkan Objek Drawing Tools kemudian buat dua objek yang saling bersinggungan pada stage. Perhatikan

Objek dengan mengaktifkan objek drawing

Objek tanpa mengaktifkan objek drawing

5. Klik objek yang berada di atas kemudian pindahkan sehingga hasilnya akan terlihat seperti pada Gambar berikut.

Objek dengan mengaktifkan objek drawing

Objek tanpa mengaktifkan objek drawing

6. Perhatikan hasilnya dan amati perbedaan antara objek dengan mengaktifkan objek drawing dengan objek yang tidak mengaktifkan objek drawing.


15

MENDUPLIKAT OBJEKNamun jika Anda ingin menduplikat sebagian objek saja, Adobe Flash CS4 Profesional menyediakan berbagai cara untuk menduplikat suatu objek. Perhatikan langkah-langkah berikut ini untuk menguasai teknik-teknik menduplikat objek. 1. Aktifkan Selection Tool lalu pilih objek yang ingin diduplikat.

2. Untuk menduplikat objek tekan tombol Ctrl+D. Hasilnya terlihat pada Gambar 2.29.

Duplikat objek Objek asli

3. Anda juga dapat melakukan duplikat dengan cara memilih objek sambil menahan tombol Ctrl kemudian drag objek ke posisi yang Anda inginkan.

4. Lepaskan tombol mouse. Hasil duplikat objek akan terlihat seperti gambar berikut.

Objek asli

Duplikat objek

MEMBUAT OBJEK TEKSAdobe Flash CS4 Profesinal menyediakan fitur untuk membuat dan mengolah objek teks. Sebelum membuat objek teks Anda perlu mengatur dulu tipe teks yang akan Anda gunakan. Caranya mudah Anda hanya perlu memilih tipe teks pada properties. Perhatikan langkah-langkah berikut untuk membuat suatu objek teks. 1. Klik Teks Tool pada Tools atau tekan tombol T untuk mengaktifkan teks tool. 2. Atur tipe teks yang ingin Anda buat melalui panel properties. Perhatikan Gambar berikut.

Static Teks adalah tipe teks yang bersifat statis dan tidak dapat melalui Action Script tetapi dapat dianimasikan. y Dynamic Teks adalah tipe teks yang dapat berubah secara dinamis atau dapat dikomunikasikan dengan script terntu. y Input Teks adalah tipe teks yang dapat digunakan untuk memasukkan data pada saat dijalankan menggunakan perintah tertentu. Dengan input teks Anda dapat membuat password untuk program yang Anda buat. 3. Setelah Anda memilih tipe teks misalnya adalah static teks kemudian klik sekali pada stage. Setalah kursor berubah Anda dapat menuliskan teks yang Anda inginkan. Perhatikan Gambar berikut. y


17

MEMBUAT TEKS PARAGRAFPerhatikan Langkah-langkah berikut untuk membuat teks paragraf. 1. Klik Teks Tool pada Tools. 2. Klik pada stage dan drag pointer susuai lebar paragraf yang akan Anda buat. Perhatikan Gambar berikut. 3. Ketikkan teks atau Anda bisa mengkopi teks dari file word. Perhatikan Gambar berikut.

MENGATUR PROPERTIES TEKS

1.

Blok teks yang akan Anda atur arah pengetikanya. Perhatikan Gambar berikut.

2.

3.

klik menu Orientation pada panel properties dan pilih pengaturan arah yang Anda inginkan diantaranya Horizontal, Vertical left to right atau Vertical right to left. Maka hasil pengaturannya seperti pada gambar berikut.

orientasi horisontal (kiri), Orientasi Vertical, Left to Right (kanan)

Untuk mengatur jarak antarkarakter Anda dapat menggunakan fasilitas : pada keadaan default jarak antar spasi adalah 0.0 akan tetapi Anda bisa merubahnya sesuai keinginan. Semakin besar nilai yang dimasukkan maka akan semakin lebar jarak antar karakternya. Perhatikan Gambar berikut.

Jarak antar karakter 0.0

Jarak antar karakter 3.0

: Jarak Antarkarakter

Anda juga dapat merubah teks menjadi sebuah obyek vektor dengan langkah sebagai berikut:. 1. Klik Teks Tool pada Tools, kemudian ketikkan sebuah teks pada objek. Perhatikan Gambar berikut.

Menuliskan Teks

2.

Tekan Ctrl + B satu kali untuk memecah teks. Hasilnya akan tampak seperti Gambar berikut.


19

Memecah Teks

3.

Tekan Ctrl + B sebanyak dua kali untuk merubah objek teks menjadi objek vektor. Hasilnya akan terlihat seperti Gambar berikut.

Teks menjadi Objek Vektor

4.

Aktifkan Selection Tool. Kemudian klik di area stage lalu tarik bagian bawah dari huruf W. Perhatikan Gambar berikut.

Memodifikasi Teks

5.

Gunakan teknik mengolah garis yang sudah Anda pelajari sehingga hasilnya akan tampak seperti Gambar berikut.

Hasil Memodifikasi Teks

6. Modifikasi bagian huruf yang lain sesuai keinginan dan kreatifitas Anda. Agar lebih terlihat menarik rubah juga warnaya sesuai keinginan Anda

Menambahkan Sound dan Video

21

BAB IIIMENAMBAHKAN SOUND DAN VIDEOMENAMBAHKAN SOUNDMacromedia Flash Pro 8mendukung file suara seperti *.wav, *.asnd, *.aif, *.au, *.mp3. sound yang Anda import akan masuk di panel library dan Anda dapat menggunakan sound tersebut pada tombol ataupun movie. Untuk mempelajari cara untuk menambahkan sound pada animasi perhatikan langkah-langkah berikut. 1. Buat dua layer yang masing-masing diberi nama gambar dan musik . Perhatikan Gambar berikut.

Menyiapkan 2 Buah Frame

2.

3.

Pada layer gambar isi dengan gambar sesuai yang Anda inginkan dengan cara Import Bitmap yang sudah dipelajari pada bab sebelumnya. Klik kanan pada frame 10 dan pilih Insert Keyframe. Kemudian hapus isi pada frame 10 sehingga Time Line akan tampak sebagai berikut.

Mengisi Layer gambar

4.

Setelah itu isi frame 10 dengan gambar lain. Kemudian klik kanan pada frame 20 lalu pilih Insert Frame. Perhatikan Gambar berikut.

Mengisi Layer gambar

5.

Pilih layer suara kemudian lakukan Insert Frame pada frame 20 untuk memperpanjang hingga frame 20. untuk memperpanjang frame hi. Maka Timeline akan tampak seperti berikut.

Insert Frame pada Leyer Musik

Kemudian lanjutkan dengan memilih menu File > Import > Import to Library. Importto library dipilih karena kita menginginkan sound yang kita import masuk dalam library saja tidak langsung masuk dalam stage sehingga kita dapat menentukan frame mana yanga akan kita tambahkan sound. 7. Setelah muncul kotak dialog Import to Library pilih file yang ingin Anda import diakhiri dengan mengklik tombol Open..6.

8.

Pilih frame pertama pada layer musik. Kemudian pada panel Properties > Sound > pilih file musik yang Anda inginkan.

Menambahkan Sound dan Video

23

Anda juga dapat memassukan file suara dengan cara memilih file suara pada panel Library lalu drag ke area stage. Jika Anda sudah menambahkan sound maka Timeline akan terlihat seperti pada Gambar berikut

Gelombang suara Gelombang Suara pada Layer Suara

MENAMBAHKAN VIDEOPerhatikan langkah-langkah berikut untuk mengimport video pada lembar kerja. 1. Klik menu File > Import > Import Video maka akan muncul kotak dialog Import Video.

2.

3.

Klik Browse kemudian pilih file video diakhiri dengan mengklik Open. Jika Anda mengimport file *.flv maka file dapat langsung Anda tambahkan ke lembar kerja tapi jika Anda mengimport file dengan tipe lain maka Anda direkomendasikan untuk mengubah tipe file video tersebut menggunakan Adobe Media Encoder yang telah disedikan oleh Flash. Pilih Load external video with playback component untuk menampilkan video lengkap dengan playback-nya namun jika Anda menginginkan video yang Anda import menjadi movie clip

dan masuk dalam timeline pilih Embed FLV in SWF and play in timeline. Kemudian klik Next. Pilih jenis skin yang Anda inginkan.

Kotak Dialog Import Video

4.

Selanjutnya klik Next Kemudian Finish. Setelah selesai instance FLV Playback aan muncul dalam stage.

Playback

4. Jika Anda mengingikan movie yang Anda import menjadi sebuah movie clip dengan memilih opsi Embed FLV in SWF and play in timeline. Maka akan muncul pengatutan movie seperti pada Gambar berikut.

Pengaturan embedding

5. Pada opsi Symbol type pilih movie clip. Perhatikan Gambar berikut.

Menambahkan Sound dan Video Memilih Type Movie Clip

25

6. Selanjutnya klik tombol Next dan akan muncul kotak dialog seperti Gambar berikut.

Kotak Dialog Finish Video Import

7. Perhatikan dalam stage tidak dimunculkan video namun pada panel library terdapat movie clip dari video yang Anda tambahkan.

Movie Clip Video pada Panel Library

8. Kemudian tambahkan video dalam stage dengan cara mengdrag movie clip dalam panel library. Perhatikan hasilnya pada video tidak dimunculkan Instance FLV Playback seperti terlihat pada Gambar berikut.

Membuat Animasi Dasar

27

BAB IVMEMBUAT ANIMASI DASARANIMASI SHAPE TWEENAnimasi shape tween merupakan animasi perubahan bentuk dari bentuk satu ke bentuk yang lain. Anda dapat dengan mudah merubah dari bentuk kotak menjadi lingkaran. Akan tetapi Anda juga dapat membuat animasi shape dari kotak menjadi teks. Hal yang paling penting disini adalah bahwa animasi shape tween hanya dapat digunakan pada objek vektor saja itu artinya jika Anda ingin membuat animasi shape tween dengan objek teks atau bitmap Anda harus mengubahnya menjadi objek vektor dahulu. Untuk lebih jelasnya berikut ini kita akan membuat animasi shape tween yang paling dasar.Perhatikan langkah-langkah berikut.1.

Klik Rectangle Tool pada Tools. Kemudian buat objek kotak pada stage. Perhatikan Gambar berikut.

Membuat Objek Kotak

2.

Klik kanan frame 25 dan pilih Insert Blank Keyframe. Sehingga tampilan Timeline akan Nampak sebagai berikut.

Blank Keyframe

3.

Klik frame 25 dan buat objek bintang di sebelah kanan objek kotak perhatikan Gambar berikut.

Objek Bintang pada Frame 25

5. Klik kanan diantara frame 1 dan frame 25 kemudian pilih Shape pada properties

6. Jika langkah yang Anda lakukan benar maka timeline akan berwarna hijau dengan tanda panah dari frame 1 sampai frame 25.

Timeline Shape Tween

7. Tekan Ctrl + Enter untuk menjalankan animasinya. CATATANAnimasi shape tween berupa garis panah lurus dengan background berwarna hijau. Jika garis yang terbentuk putusputus maka ada kesalahan, priksa apakah objek yang anda gunakan merupakan objek vektor atau bukan.

ANIMASI MOTION TWEENPerhatikan langkah berikut untuk mempelajari teknik animasi motion tween. 1. Buat objek sesuai keinginan Anda. Sebagai contoh adalah objek bintang.


29

Membuat Objek Bintang

2. Lakukan Insert Keyframe pada frame ke 25. Perhatikan Gambar berikut. 3. Selanjutnya klik kanan diantara frame 1 dan frame 25 kemudian pilih Create Motion Tween. Timeline yang dihasilkan memiliki dua titik objek tidak seperti animasi tween yang hanya memiliki satu titik objek yaitu pada frame pertama saja.

Timeline Animasi Classic Motion Tween.

4. Pindahkan objek yang berada pada frame 25. Perhatikan Gambar berikut.

Memindahkan Objek

5. Tekan Ctrl + Enter untuk melihat hasilnya.

ANIMASI MOTION CLASSIC GUIDEAnimasi motion classic guide adalah animasi perpindahan dari satu tempat yang lain menggunakan lintasan tertentu. Untuk itu, kita akan membuat animasi elektron yang mengitari inti dengan menggunakan teknik motion classic guide.

1. Siapkan sebuah lembar kerja baru dengan membuat dua buah layer. 2. Klik kanan pada Layer 2 kemudian pilih Add Motion Classic Guide. Perhatikan Gambar berikut. 3. Perhatikan tampilan layer motion classic guide sebagai berikut.

Timeline dengan layer guide

4. Buat objek lingkaran pada frame 1 dalam layer 1. Perhatikan Gambar berikut.

Gambar 4.55 : Membuat Objek Lingkaran

5. Buat garis berbentuk oval pada frame 1 dalam Guide: Layer 2. Perhatikan Gambar berikut.

Membuat Lintasan

6. Aktifkan Erase Tool kemudian hapus ujung objek garis oval. Perhatikan Gambar berikut.


31

Menghapus

Objek

7. Panjangkan Frame pada Layer Guide: Layer 2 dengan melakukan Insert Frame hingga frame 25. Perhatikan Gambar berikut.

Memperpnjang Frame Lintasan

8. Pada Frame 1 dalam Layer 2, buatlah objek lingkaran dengan mengaktifka Object Drawing tepat pada ujung garis oval. Perhatikan Gambar berikut.

Membuat Lingkaran

9. Klik pada frame 25 dalam Layer 2 kemudian pilih Insert Keyframe. Perhatikan tampilan Timeline yang dihasilkan.

Insert Keyframe

10. Klik kanan di antara frame 1 dan frame 25 dalam layer 2 kemudian pilih Create Motion Tween. Perhatikan tampilan Timeline.

Create Classic Tween

11. Klik frame 25 dalam layer 2 kemudian pindahkan objek lingkaran ke ujung garis oval. Perhatikan Gambar berikut.

Gambar 4.62 : Memindahkan Objek

12. Panjangkan Frame pada layer 1 hingga layer 25. Perhatikan hasilnya.

Timeline animasi


33

ANIMASI MASKINGAnimasi masking adalah animasi yang berguna untuk menampilkan bidang yang tertutup dan menyembunyikan bidang yang terbuka. Jika Anda menggunakan teknik masking maka objek yang dibuat dalam stage akan tersembunyi dan akan ditampilkan oleh objek yang lain. Animasi masking biasanya dibuat untuk membuat animasi teropong, animasi opening screen dan masih banyak animasi-animasi yang kreatif lainnya menggunakan teknik animasi masking. Untuk membuat animasi masking sangat mudah dan sangat sederhana namun harus Anda perhatikan teknik dasarnya secara benar karena salah sedikit saja hasilnya bisa tidak sesuai dengan yang kita inginkanoleh sebab itu , perhatikan langkahlangkah berikut untuk mempelajari mengenai animasi masking. 1. Buat lembar kerja dengan pengaturan stage secara default yang berisikan dua Layer. 2. Ganti nama layer untuk memudahkan Anda membuat animasi masking. Dengan ketentuan objek yang akan Anda sembunyikan berada pada bagian bawah sedangkan objek yang digunakan untuk menampilkan objek yang disembunyikan berada pada layer bagian atas. Perhatikan Gambar berikut.

Menyiapkan dua Layer

3. Pada Layer teks tuliskan teks Selamat Datang. Seperti pada Gambar berikut.

Menuliskan Teks

4. Lakukan Insert Frame sampai Frame 30 sehingga Timeline akan tampak sebagai berikut.

Memperpanjang Layer Teks

5. Buat objek yang digunakan untuk menampilkan objek yang akan disembunyikan, miaslkan objek bintang. Letakkan objek bintang pada Frame 1 dalam layer masking dan letakkan objek lingkaran di sisi kiri tulisan yang sudah Anda buat.

6. Selanjutnya buat animasi tween pada objek bintang agar objek yang tersembunyi nanti akan muncul seiring berjalannya animasi pada objek yang menutupinya. Klik kanan pada Frame 30 dalam Layer masking kemudian pilih Insert Keyframe. 7. Klik kanan di antara frame 1 dan frame 30 kemudian pilih Create Motion Tween.


35

8. Klik Frame 30 kemudian geser objek ke sisi sebelah kanan teks. Perhatikan Gambar berikut.

Objek Bintang Berada di Sebelah Kanan Teks

9. Klik kanan pada Layer masking kemudian pilih Mask. perhatikan perubahan layer yang dihasilkan. Jika layer tampak seperti pada berikut berarti cara yang Anda lakukan sudah benar.

Layer Untuk Animasi Masking

10. Tekan Ctrl + Enter untuk menjalankan animasi dan perhatikan hasilnya.

ANIMASI FRAME PER FRAMEAnimasi Frame per Frame merupakan teknik animasi yang sederhana, teknik ini sama seperti teknik animasi dengan menggunakan buku yanga berisi gambar-gambar yang saling berhubungan dan digerakkan secara serentak dan cepat. Teknik animasi ini menuntut ketelitian dan kekreatifan Animator karena animasi frame per frame bisa juga dikatan sebagai animasi konvensional yaitu tiap gerakan dihasilkan dari tiap gambar atau objek yang dibuat. Semakin banyak frame yang digunakan atau semakin detail objek yang dibuat maka hasil animasinya semakin halus. Sebaliknya semakin sedikit detail dari objek yang digunakan maka

animasi akan terlihat putus-putus. Akan tetapi walaupun animasi ini merupakan animasi yang sederhana teknik ini juga dapat digunakan untuk membuat animasi untuk film-film kartun. Berikut ini kita akan membuat animasi perhitungan mundur. Perhatikan langkah-langkah berikut. 1. Siapkan lembar kerja baru yang berisi 2 Layer.

Dua Buah Layer Kosong

2. Pada Frame 1 dalam Layer 1buat objek kotak degan sedikit variasi. Kemudian ketikkan angka 5 tepat di tengah objek kotak. Sehingga hasil tampak sebagai berikut.

Membuat Objek Kotak (kiri), Menuliskan Angka pada Objek Kotak (kanan)

3. Lakukan Insert Keyframe pada frame ke 3. Selanjutnya ubah objek frame 3 menjadi seperti Gambar 4.86 kanan.

Memodifikasi Objek Kotak

4. Klik Frame 1 kemudian tekan Ctrl + C untuk mengkopi seluruh objek pada frame 1. 5. Lakukan Insert Blank Keyframe pada frame ke-5 kemudian tekan Ctrl + Shift + V. untuk memaste objek pada tempat objek itu dikopi sehingga posisi objek tidak berubah. 6. Ganti angka 5 dengan angka 4. Perhatika Gambar beikut.


37

Mengganti Angka dalam Objek Kotak

7. Klik frame kedua dan tekan Ctrl + C untuk mengkopi seluruh objek pada frame 2. 8. Lakukan Insert Blank Keyframe pada frame ke-7 kemudian tekan Ctrl + Shift + V. untuk memaste objek pada tempat objek itu dikopi sehingga posisi objek tidak berubah. 9. Lakukan cara 6 sampai 10 hingga angka dalam kotak berisi angka 1 dan timeline akan Nampak sebagai berikut.

BAB VMENGGUNAKAN SIMBOLimbol adalah sebuah objek yang ada dalam Library. Setiap objek seni yang Anda buat baik itu gambar, teks, sound, button movie semua akan tersimpan dalam panel Library dan objek-objek yang ada dalam library tersebut kita namakan sebagai simbol

s

Tipe Simbol Movie Clip : merupakan simbol yang berisi animasi maupun objek seni. Movie Clip dapat dijalankan dengan handle Action Script. Button : merupakan simbol yang berfungsi sebagai tombol untuk mengatur jalannya animasi atau sebagai navigasi dalam flash. Graphic : merupakan simbol yang berisi objek seni. Graphic tidak dapat di handle dengan Action Script.

MOVIE CLIPMovie clip akan sangat berguna sekali jika Anda ingin membuat animasi. Dalam movie clip inilah animasi-animasi yang anda buat ditampung sehingga akan terlihat lebih sederhana daripada Anda membuat animasi dalam scene. Movie clip akan tersimpan di dalam panel library sehingga dapat Anda pakai berulang-ulang Berikut ini kita akan membuat animasi mendidihkan air menggunakan movie. 1. Gunakan teknik yang sudah diajarka pada bab sebelumnya dan buatlah Gambar seperti Gambar di bawah ini.

Menggunakan Simbol

39

Membuat Objek Diam

2. Buatlah objek api di samping gambar pertama seperti pada Gambar berikut.

Membuat Objek Api

3. Seleksi objek api kemudian tekan F8 sehingga akan muncul kotak dialog Convert to Simbol. Lakukam pengaturan seperti Gambar berikut.

Mengubah Objek Menjadi Movie Clip

4. Pindahkan movie api tepat di atas tungku dan sesuaikan ukurannya.

Membuat Animasi Api

5. Kemudian lanjutkan dengan klik ganda objek api atau klik kanan kemudian pilih Edit in Place. 6. Lajutkan dengan Klik kanan pada frame 5 kemudian pilih Insert Keyframe.

7. Selanjutnya modifikasi objek api pada frame 5. Perhatikan Gambar berikut.

Mengubah Bentuk Gambar Api

8. Lakukan Insert Keyframe pada frame 8. Sehingga timeline akan tampak seperti Gambar berikut.

Menambahkan Keyframe

Menggunakan Simbol

41

9. Klik di antara frame 1 dan frame 5 kemudian buat animasi tween. Lakukan hal yang sama da antara frame 5 dan frame 8.

Timeline Shape Tween

10. Tekan Ctrl + Enter untuk melihat hasil animasinya.

SIMBOL BUTTONSimbol button digunakan sebagai tombol navigasi dalam animasi interaktif. Flash 8 menyediakan simbol tombol yang dapat Anda gunakan akan tetapi Anda juga bisa membuat tombol secara manual sesuai kreasi dan kreatifitas Anda. Anda dapat membuat simbol button dari graphic, bitmap maupun movie. Berikut kita akan membuat button yang sederhana dengan tampilan berbeda saat tersentuh pointer mouse ataupn saat button tersebut diklik. Perhatikan langkah-langkah berikut. 1. Gunakan piranti yang terdapat pada Toolbox untuk membuat objek segitiga dan kotak kemudian gabungkan keduanya sehingga hasilnya akan tampak seperti Gambar berikut.

2. Seleksi seluruh bagian objek kemudian tekan F8 atau klik menu Modify > Convert to Simbol. Sehingga akan ditampilkan dialog convert to simbol seperti pada Gambar berikut.

3. Pada kotak Name ketikkan nama dari button yang akan anda buat

dan pada opsi Type Anda pilih Button. Akhiri dengan mengklik OK. 4. Klik ganda pada objek button yang baru Anda buat dan perhatikan hasilnya.

Timeline Tombol Pada stage yang terseleksi bukan lagi simbol button melainkan suatu objek dan pada Timeline terdapat empat frame yaitu Up, Over, Down, Hit. Berikut keterangan dari masing-masing bagian frame tersebut.y y Up : merupakan tampilan awal pada saat tidak tersentuh atau diklik. Over : merupakan tampilan saat pointer mouse berada di atas tombol.

y Down : merupakan tampilan saat tombol diklik. y Hit : merupakan area klik pada tombol 5. Pada frame Up perbesar ukuran garis dan ubah warnanya menjadi hitam kemudian tambahkan tulisan Next. Perhatikan Gambar berikut.

Mengatur Tampilan Button pada Frame Up

Menggunakan Simbol

43

6. Klik kanan pada frame Over kemudian pilih Insert Keyframe. Sehingga dalam frame Over berisi objek yang sama dengan objek yang berada pada frame Up. 7. Ubahlah warna garis menjadi kuning dan warna tulisan menjadi merah. Artinya jika pointer mouse berada di atas tombol akan berubah warna perhatikan Gambar berikut.

Objek pada frame Over

8. Klik kanan pada frame Down kemudian pilih Insert Keyframe. 9. Selanjutnya pada frame Down ubah ukuran objek menjadi lebih kecil sehingga ketika tombol diklik tombol akan mengecil. Ubah juga warna garis menjadi hitam.

Tampilan Objek pada Frame Down

10. Pada frame Hit klik kanan kemudian pilih Insert Key Keyframe.

Tampilan Area klik

11. Klik Scene 1 untuk kembali ke lembar kerja utama. Macromedia Flash 8 juga menyediakan fasilitas tombol yang siap digunakan dan Anda dapat Merubah tombol-tombol tersebut sesuai keinginan Anda jika Anda kurang menyukai pengaturan tombol secara default. Gunakan langkah-langkah berikut untuk menggunakan tombol yang terdapat dalam panel library Button.1. Klik menu Window > Common Libraries > Buttons.

2. Klik tanda > disamping folder tombol atau klik ganda pada folder button sehingga akan terlihat seperti Gambar berikut.

Macam-macam Button dalam Folder Button

3. Klik salah satu jenis button yang Anda inginkan kemudian drag ke area stage.

Menggunakan Simbol

45

Menggunakan Library Button

BAB VI ACTION SCRIPTction script adalah bahasa pemrograman untuk menghandle aktifitas pada Flash movie. Action merupakan sebuah perintah yang akan dibaca atau dijalankan saat playhead melewati frame atau keyframe yang diberi perintah Action tersebut. Dalam macromedia flash 8 kita dapat menempatkan script pada frame, button atupun movie.berikut contoh penulisan scriptnya.

A

Script dalam frame, Movie dan Button

Perhatikan langkah2 berikut untuk menggunakan script dalam frame. 1. Buat file animasi sebagai contoh file animasi perubahan bentuk. Seperti gambar berikut.

Jika animasi Anda jalankan maka playhead akan berjalan terus menerus atau akan mengulang lagi dari awal ketika sudah sampai pada frame terakhir animasi. Untuk itu kita perlu memberikan perintah Stop untuk menghentikannya. 2. Klik frame terakhir kemudian tekan F9 atau klik menu Window > Actions untuk menampilkan panel Actions. 3. Klik kemudian pilih Global Function > Timeline Control > Stop().

Action Script

47

4. Perhatikan tampilan frame yang telah diberi script.

5. Takan Ctrl + Enter dan perhatikan hasilnya.

GOTO ANDSTOP DAN GOTO ANDPLAYPerintah gotoAndStop berfungsi untuk menuju ke frame atau scene tertentu dan berhenti pada frame tersebut. Sedangkan perintah gotoAndPlay berfungsi untuk menuju ke frame atau scene tertentu dan menjalankan isi dari frame tersebut. Berikut ini akan dibahas mengenai perintah gotoAndStop dan gotoAndPlay untuk frame. Perhatikan langkah-langkah berikut untuk menggunakan gotoAndStop dan gotoAndPlay. 1. Buat animasi perubahan bentuk kemudian tambahkan 1 layer untuk menempatkan Button. Perhatikan Gambar berikut.

2. Klik frame 1 pada layer 2 kemudian buat 2 buah tombol sebagai berikut.

3. Hentikan animasi pada frame 1. 4. Klik tombol gotoAndStop kemudian tampilkan panel Action. 5. Klik Global Function > Movie Clip Control > On. Maka akan tampak sebagai berikut.

6. Pilih release kemudian tempatkan kursor dibelakang tanda { dan klik Global Function > Timeline Control > gotoAnd Stop( ).

7. Isikan angka pada frame berapa kita akan berpindah dan berhenti. Misalkan pada frmae5 maka ketikkan angka 5. Perhatikan gambar berikut.

8. Klik tombol gotoAndPlay kemudian isikan script sebagai berikut.

Action Script

49

9. Perintah di atas berguna untuk berpindah ke frame ke 2 dan menjalankan animasi dari frame tersebut. Kemudian tekan Ctrl + Enter untuk menjalankan animasi.Penulisan script dalam flash terpengaruh dengan besar kecil huruf yang digunakan.

CATATAN

Sekilas Tentang Penulis Pria Bernama Lengkap Khaerul Nurchiyan lahir pada tanggal 19 November 1987 di sebuah desa yang berada di Kecamatan Belik Kabupaten Pemalang. Lulus dari Sekolah Dasar Negeri 1 Belik pada tahun 1999 kemuadian meneruskan sekolah Menengah di SLTP N 1 Belik. Keinginannya untuk meneruskan di SMK Otomotif akhirnya harus kandas karena orang tua lebih memilih untuk menyekolahkannya di SMA N 1 Randudongkal. Pada tahun 2005 pendidikannya dilanjutkan di Unniversitas Negeri Semarang pada Jurusan Pendidikan Kimia FMIPA dan berhasil menyelesaikan Study dengan meraih gelar SI Pendidikan kimia pada bulan oktober 2009. Semasa Kuliah di Kampus Kimia Penulis juga aktif dalam berbagai macam kegiatan kemahasiswaan salah satunya adalah Triple-C (Computational Chemistry Club) dari situlah penulis mulai mendalami komputer terutama pada komputasi kimia dan animasi sehingga pada November 2009 Penulis langsung bekerja di SMA N 11 Semarang sebagai guru pengganti dan tim pengembangan pembelajaran kimia berbasis IT. Dan Pada Agustus 2010 Bergabung dengan SMK Perintis 29 Ungaran hingga Saat ini.

modul flash 8

Documents