Download - MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

Transcript
Page 1: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

1

MODUL MACROMEDIA FLASH 8

OLEH:

MUGI HARTANTI.S.T.

SMA NEGERI 1 SALATIGA

2014/2015

Jila ingin menggunakan modul ini sebagai refernsi silahkan mencantumkan sumber aslinya

Page 2: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

2

SK : Membuat Program Multimedia menggunakan Action Script (Flash)

KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash

A. Mengenal Jendela Kerja

1. Mengenal Menu Dasar Berikut merupakan tampilan standar jendela kerja Flash 8, saat Anda memulai membuat file baru.

Jendela kerja Flash 8 terdiri atas :

Menubar

Berisi kumpulan menu atau perintah-perintah yang digunakan dalam Flash 8. Toolbar

Toolbar merupakan panel berisi berbagai macam tool. Tool-tool tersebut dikelompokkan menjadi empat kelompok: Tools; berisi tombol-tombol untuk membuat dan mengedit gambar, View; untuk mengatur tampilan lembar kerja, Colors; menentukan warna yang dipakai saat mengedit, Option; alat bantu lain untuk mengedit gambar.

Page 3: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

3

Timeline

Timeline atau garis waktu merupakan komponen yang digunakan untuk mengatur atau

mengontrol jalannya animasi. Timeline terdiri dari beberapa layer. Layer digunakan untuk

menempatkan satu atau beberapa objek dalam stage agar dapat diolah dengan objek lain. Setiap layer terdiri dari frame-frame yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam layer, maka semakin lama animasi akan berjalan.

Stage

Stage disebut juga layar atau panggung. Stage digunakan untuk memainkan objek-objek yang akan diberi animasi. Dalam stage kita dapat membuat gambar, teks, memberi warna dan lain-lain.

Panel Beberapa panel penting dalam Macromedia Flash 8 diantaranya panel: Properties, Filters & Parameters, Actions, Library, Color dan Align & Info & Transform.

Tampilan Panel Action Script Properties

Panel Properties akan berubah tampilan dan fungsinya mengikuti bagian mana yang

Page 4: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

4

sedang diaktifkan. Misalnya Anda sedang mengaktifkan Line tool, maka yang muncul pada jendela properties adalah fungsi-fungsi untuk mengatur line/garis seperti besarnya garis, bentuk garis, dan warna garis.

Library

Panel Library mempunyai fungsi sebagai perpustakaan simbol/media yang digunakan dalam animasi yang sedang dibuat. Simbol merupakan kumpulan gambar baik movie, tombol (button), sound, dan gambar statis (graphic).

2. Document Properties

Fungsi Document Properties adalah untuk melakukan pengaturan ukuran layar, warna background, framerate, dan dimensi dari animasi yang akan dibuat.

Untuk memanggil kotak dialog Document Properties, pilih jendela Properties di bawah layar, kemudian pilih tombol Size.

Menggambar Bentuk-bentuk Dasar

1. Membuat garis dengan Line Tool

Flash menyediakan pilihan untuk membuat beragam bentuk garis. Pilih

ikon Line Tool ( ) pada toolbar di sisi kiri layar, kemudian lihat

Page 5: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

5

pilihannya di panel Properties di sebelah kiri bawah layar, Masukkan angka ketebalannya. Dan untuk memulai garis klik pada stage dan drag sepanjang yang anda inginkan.

2. Membuat garis dengan Pencil Tool

Untuk membuat garis bebas, Pilih ikon

Pencil Tool ( ) pada toolbar sisi kiri dan pilih warnanya pada panel Colors di bawahnya. Untuk membuat garis lurus, pada panel Options di bawah toolbar pilihlah opsi Straighten, untuk garis lengkung yang halus pilih Smooth, dan untuk membuat garis sesuai dengan gerakan mouse pilih Ink.

3. Menggambar lingkaran atau elips

Pilih Oval Tool ( ) untuk meng-gambar bentuk lingkaran atau elips. Untuk memulai menggambar, klik pada stage dan drag sebesar lingkaran atau oval yang Anda inginkan. Adapun jenis dan warna garis serta warna isi bentuk itu dapat dipilih pada panel Colors.

4. Menggambar kotak

Pilih Rectangle Tool ( ) untuk menggambar bentuk kotak pada layar. Untuk memulai menggambar, klik pada stage dan drag sebesar kotak yang Anda inginkan. Adapun jenis dan warna garis serta warna isi (fill) bentuk itu dapat dipilih pada panel Colors.

Apabila Anda ingin bentuk sudut kotak tidak berbentuk lancip tetapi berupa sudut yang

halus (lengkung), Anda dapat mengubahnya dengan cara pilih Rectangle ( ) dan pilih Set Corner Radius yang berada di bagian bawah panel. Masukkan nilai 5 dalam kotak dialog Rectangle Setting dan pilih OK. Mulailah menggambar kotak dan hasilnya akan terlihat.

Page 6: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

6

5. Menggambar bentuk bersegi banyak

Untuk menggambar bentuk bersegi banyak, Klik dan tahan pada

Rectangle tool ( ), kemudian

pilih Poligon tool ( ).

Untuk memilih bentuk bersegi banyak atau bintang, Pilih Options pada panel Properties, Kemudian pada jendela dialog Tool Settings yang muncul Anda dapat memilih bentuk

yang diinginkan serta dapat mengisikan angka berapa segi banyak yang akan dibuat.

Untuk menggambarnya, Klik mouse pada stage kemudian

drag sesuai besarnya objek yang diperlukan. 6. Menggambar bentuk bebas atau

unik

Untuk membuat bentuk bebas atau unik Anda dapat

menggunakan Pen Tool ( ). Klik mouse pada stage, drag dan lepas, maka garis akan terbentuk. Gerakkan kembali mouse ke arah yang diinginkan dan klik untuk membuat sudut atau anchor point. Bila bentuknya merupakan kurva tertutup maka dapat diberi warna.

7. Mengubah Ukuran Objek Pilih

Selection Tool ( ) double klik pada gambar/ objek yang akan diubah ukurannya. Pilih Free

Transform Tool ( ), maka pada ujung bentuk akan muncul kotak kecil atau handle. Pada panel Option

pilih opsi Scale ( ). Klik pada salah satu titik kemudian Drag kotak kecil tersebut ke arah luar, ukuran akan membesar dan drag ke arah dalam maka ukuran akan mengecil.

Page 7: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

7

8. Memutar Objek

Pilih Selection Tool ( ) double klik pada gambar/objek yang akan diputar. Pilih Free

Transform Tool ( ), maka pada ujung bentuk akan muncul kotak kecil atau handle. Pada panel Option pilih opsi

Rotate and Skew ( ) pada

panel Option kemudian arahkan mouse mendekati salah satu handle yang ada di sudut hingga cursor membentuk panah melingkar. Klik dan drag ke arah putaran yang diinginkan.

B. Menggunakan Warna

1. Mengganti Warna

Untuk mengganti warna isi atau garis dari bentuk yang telah dibuat dapat dilakukan dengan menyeleksi/memilih bentuk yang akan diganti dengan menggunakan Selection Tool

( ). Double-klik gambar yang ingin diganti warnanya, kemudian pada panel

Colors pilih opsi Stroke Color ( ) Klik dan pilih warna untuk mengubah warna

garis atau pilih Fill Color ( ) Klik dan pilih warna untuk mengubah warna isi bentuk.

2. Gradasi

Untuk memberi warna gradasi bada suatu gambar/objek, pilih menu Window > Color Mixer, jendela Color Mixer akan muncul di sebelah kanan layar. Pilih gambar/objek

yang akan diberi warna gradasi dengan Selection Tool ( ), pada pull-down menu di panel Color Mixer, pilih Type Radial. Pilih warna yang lebih terang untuk bagian sebelah kiri, sedangkan bagian kanan yang lebih gelap.

Untuk mengedit gradasi pilih Gradient Transform Tool ( ). Klik dan drag handle yang muncul sesuai dengan arah yang diinginkan.

Page 8: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

8

C. Mengimpor Gambar dan Mengolahnya

1. Mengimpor Gambar

Untuk memasukkan gambar dalam format bitmap, seperti misalnya foto, ke dalam movie dapat dilakukan dengan cara mengimpor gambar/foto tersebut. Pilih menu File > Import > Import to Stage, lalu cari letaknya direktori gambar yang akan di impor.

2. Memperbesar/memperkecil

Untuk memperbesar atau memperkecil ukuran gambar dapat dilakukan dengan

menggunakan Scale Tool ( ) pada toolbar disebelah kiri. Agar ukuran gambar tidak distorsi, tekan Shift pada keyboard pada saat memperbesar/memperkecil gambar.

Mengubah Bitmap menjadi Vektor (Trace Bitmap)

Dalam Flash terdapat fasilitas untuk mengubah gambar dalam format bitmap menjadi vektor, yaitu menu Trace Bitmap. Fasilitas ini berguna untuk mengurangi besarnya file karena penggunaan gambar bitmap dalam animasi. Namun tentunya kualitas gambar bitmap itu sendiri akan mengalami penurunan.

Untuk mengaplikasi Trace Bitmap pada gambar/foto yang telah kita impor, sebelumnya

pilih/seleksi terlebih dulu gambarnya menggunakan Selection Tool ( ) pada toolbar. Kemudian pilih menu Modify > Bitmap > Trace Bitmap

Page 9: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

9

Setelah muncul kotak dialog

Trace Bitmap, masukkan angka pada kolom Color Threshold dan Minimum Area. Semakin besar angka yang dimasukkan semakin besar pula file yang dikompres. Namun sebaiknya

tidak memasukkan angka lebih kecil dari 10 (sepuluh) karena pengaruhnya pada pengurangan besarnya file sebagai tujuan utama Trace Bitmap akan sangat kecil. Bahkan pada beberapa komputer (dengan spesifikasi rendah) akan mengakibatkan hang, karena komputer dipaksa bekerja terlalu keras untuk menguraikan gambar tersebut.

Setelah proses Tracing Bitmap selesai, pilih menu Modify > Group, agar gambar yang sudah di-trace tersebut terkumpul sebagai satu image.

4. Pengolahan Gambar lebih lanjut

Untuk mendapatkan gambar dengan hasil olahan lebih lanjut, disarankan untuk menggunakan software lain yang memang dikhususkan untuk mengolah gambar/foto, seperti; Macromedia Fireworks, Adobe Photoshop atau Corel Photopaint. Flash digunakan pada saat gambar tersebut telah siap untuk dianimasikan.

Page 10: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

10

BAB 2 MEMBUAT ANIMASI

DENGAN MASKING DAN PATH

SK: Membuat Program Multimedia menggunakan Action Script (Flash)

KD: 10.2 Dasar-dasar animasi

TUJUAN Setelah mengikuti kegiatan belajar ini, Anda diharapkan dapat: Membuat animasi dengan masking Membuat animasi mengikuti alur/guideline URAIAN MATERI A. Animasi frame by frame

Pengertian : pembuatan animasi dimana perubahan yang dilakukan dilakukan disetiap frame

Langkah-langkah :

a. Buka lembar kerja baru ctrl + n b. Sorot frame dimana kita akan membuat animasi frame by frame c. Buat objek pada frame 1 misal lingkaran dengan cara : pada toolbox klik rectangle tool,

kemudian pada frame 2 buat lingkaran dengan warna yang berbeda. Dan seterusnya sampai frame 5.untuk lebih jelasnya lihat gambar dibawah ini :

A. Animasi Masking

Buat sebuah file baru.

Ketikkan teks Pustekkom pada stage. Font: Arial, size: 48, Color: Biru. Atur agar letaknya di tengah stage.

Page 11: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

11

Klik di frame 40 pada timeline, klik kanan mouse pilih Insert Frame. Insert layer pada jendela Timeline, beri nama lingkaran.

Buat sebuah lingkaran pada stage, ukuran lebih besar dari tinggi teks, warna bebas. Klik mouse di frame 1 pada Timeline. Pilih Modify > Convert to Symbol. Beri nama lingkaran masking, pilih Graphic, pilih OK.

Dengan menggunakan Selection tool ( ) atur gambar lingkaran kesamping kiri teks.

Klik di frame 40 pada layer lingkaran, klik kanan mouse pilih Insert keyframe.

Dengan menggunakan Selection tool ( ) atur gambar lingkaran kesamping kanan teks.

Blok dari frame 1 hingga 40 pada layer lingkaran, klik kanan mouse pilih Create Motion Tween.

Page 12: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

12

Pilih kotak kecil pada layer lingkaran, Klik kanan mouse pilih Mask.

Jalankan animasi. B. Animasi Gerak dengan Mengikuti alur (Guideline)

Untuk membuat animasi sebuah objek yang dapat bergerak mengikuti sebuah alur atau guide, langkah-langkahnya sebagai berikut. Buat File baru

Ubah nama layer 1 menjadi Bumi

Buat sebuah lingkaran yang cukup besar di tengah-tengah stage. (Apabila mempunyai gambar globe/bumi dapat digunakan dengan cara Import)

Page 13: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

13

Tambahkan layer baru pada Timeline, dengan cara mengklik mouse pada ikon Insert layer beri nama Bulan. Buat lingkaran yang lebih kecil dari lingkaran bumi.

Klik kanan mouse pada lingkaran bulan pilih Convert to Symbol, beri nama Bulan pilih Graphic, pilih OK

Page 14: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

14

Pilih ikon Add Motion Guide pada jendela Timeline Buat sebuah lingkaran kosong (tanpa Fill) dan atur posisinya seperti di bawah ini.

Dengan bantuan Eraser Tool ( ) hapus sebagian lingkaran tadi hingga terputus.

Page 15: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

15

Klik kanan mouse di frame 60 pilih Insert Keyframe (untuk ketiga layer)

Pilih frame 1 pada layer Bulan, dengan menggunakan Selection tool ( ) atur lingkaran bulan hingga titik tengahnya pada posisi awal lingkaran guide bulan.

Pilih frame 60 pada layer Bulan, dengan menggunakan Selection tool ( ) atur lingkaran bulan hingga titik tengahnya pada posisi akhir lingkaran guide bulan.

Page 16: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

16

Blok frame 1 hingga 60 pada layer bulan, klik kanan mouse pilih Create Motion Tween.

Jalankan animasi. Untuk menghilangkan garis guideline, klik ikon mata pada layer Guideline bulan.

Jalankan animasi

Continuous Actions

KD:9. 3. Button dan navigasi Tujuan :

Setelah pembelajaran siswa dapat Menampilkan konsep dynamic textfield Memodifikasi button dan menambah navigasi

MATERI Text pada flash terdiri dari 3 jenis yaitu :

Static text/Read Only, digunakan untuk jenis teks yang tidak dapat dirubah atau

dihapus pada saat movie dijalankan. Biasanya digunakan sebagai label tombol, judul, deskripsi dan sebagainya.

Dynamic Text/Selectable, teks ini bisa dirubah dan dihapus pada saat movie berjalan.

Biasanya digunakan untuk menampilkan variable. Contoh: menampilkan highscore, Timer dan sebagainya.

Input Text/Editable, dengan tipe teks ini kita di ijinkan menginput karakter yang biasa

digunakan pada program input.

Membuat tombol link antar frame dan antar stage

Button digunakan untuk membuat navigasi/ link antar scene, antar frame, antar media dll

Button bisa membuat objek sendiri atau menggunakan button yang sudah ada. Adapun langkah langkah membuat tombol navigasi adalah:

1. Siapkan objek yang akan dibuat tombol misal :SMANSSA BUTTON kemudian klik kanan convert to symbol seperti contoh dibawah ini:

Page 17: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

17

Name digunakan untuk memberi nama button

Type terdiri dari tiga pilihan yaitu :

Movie clip: digunakan untuk membuat objek animasi

Button :digunakan untuk membuat objek tombol sehingga bisa diklik

Graphic :digunakan untuk membuat objek mati / tanpa animasi

Pada sub menu button terdapat tiga bagian frame yaitu: up, over, down dan hit

Sumber : http://rharaflash.blogspot.com

Frame yang pertama adalah Up, untuk memainkan tombol bilamana pointer(kursor) tidak di atas button atau saat pertama/awal tampilan(animasi) tombol. Frame kedua adalah Over, untuk memainkan tombol saat pointer berada di atasnya. Frame ketiga adalah Down, untuk memainkan tombol saat diklik. Frame keempat adalah Hit, untuk memastikan area yang akan merespons perintah klik mouse. Area ini tidak kelihatan dalam movie Graphic :digunakan untuk membuat objek mati / tanpa animasi

praktek 1

Membuat tombol: pada saat kita membuat tombol ada dua cara yaitu :

Cara Pertama 1. Cara yang pertama adalah dengan membuat/menggambar sendiri tombol. Untuk

membuat tombol gambar harus diubah menjadi symbol dengan behavior Button. Khusus untuk symbol dengan behavior Button di dalam area edit symbol pada timeline terdapat 4 frame yakni Up, Over, Down, dan Hit seperti yang dijelaskan diatas.

2. Buatlah sebuah tombol pada area tengah stage, misalkan kita buat sebuah persegi panjang (atau boleh diganti objek yang lain ukuran bebas)

3. Konversi objek menjadi symbol dengan menyorot semua objek (gambar), klik kanan dan

pilih Conver to Symbol…atau langsung dengan menekan F8 pada keyboard. Beri nama tombol dan pilih behavior Buttondibagian Type kemudian klik ok.

Page 18: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

18

4. Pilih instance tombol di area stage lalu tekan Ctrl+E untuk mengedit symbol, atau

dengan cara klik kanan objek pilih edit atau langsung dengan melakukan double klik pada objek.

5. Maka akan tampil timeline tombol yang terdiri atas 4 buah frame yakni Up, Over, Down, dan Hit. Dengan masing-masing fungsi yang berbeda.

6. Frame yang pertama adalah Up, kita biarkan apa adanya. 7. Kita buat keyframe pada frame Over, klik kanan di frame Over pilihInsert Keyframe. Kita

ganti objek yang tadinya berwarna biru menjadi merah. Perhatikan gambar.

8. Kita buat lagi keyframe pada frame Down, klik kanan frame Down pilihInsert Keyframe.

Sekarang kita ganti warna objek menjadi warna hijau.

9. Lakukan hal yang sama pada frame Hit seperti langkah 7 dan 8 jika memang diperlukan. 10. Kita beri nama, dengan membuat layer baru diatas layer sebelumnya. Klik

frame Up, pilih Text tool (T) buat teks dengan nama “TOMBOL” tanpa tanda petik, letakkan di atas gambar/objek tombol. Lalu klik frame Hit klik kanan dan pilih Insert Frame.

11. Klik icon panah berwarna biru, tekan Ctrl+Enter pada keyboard untuk menjalankan

program.

Page 19: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

19

Cara Kedua 1. Cara yang ini sangatlah mudah,, agan-agan tidak perlu membuat tombol dari awal, jadi

kita hanya menggunakan tombol yang sudah siap pakai. 2. Klik Window pada menu bar, pilih Common Libraries > Buttons. Maka akan tampil kotak

dialog Library-Buttons.

3. Untuk melihat seluruh macam-macam tombol klik kanan salah satu folder lalu

pilih Expand All Folders. 4. Ada berbagai macam jenis tombol, agan-agan tidak pilih ingin yang mana, sebagai

contoh kita pilih tombol yang paling atas dengan nama bar blue, kita klik gambar tombolnya lalu drag (klik dan tahan mouse lalu geser) menuju stage.

5. Sebuah tombol telah tersedia. Untuk mengeditnya tinggal lakukan cara yang sama seperti langkah yang telah diuraikan sebelumnya.

6. Tekan Ctrl+Enter pada keyboard untuk menjalankan program. Praktek 2 Membuat menu drop down:

A. MEMBUAT MEDIA PEMBELAJARAN Membuat background 1. Buka lembar kerja macromedia flash 8 dengan cara klik star -> all program ->

macromedia -> macromedia flash 8 ->create new ->flash document 2. Maka akan muncul jendela baru flash 8. Kemudian pada properties rubah size

menjadi 800 x 600 pixels

Page 20: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

20

3. Ganti layer1 dengan nama background dengan cara klik dua kali pada tulisan layer 1.

4. Untuk membuat desain background kita bisa mengimport gambar /atau menggunakan gradasi warna yang sesuai. Jika ingin menggunakan gambar sebagai background pilih file ->import ->import to stage sehingga muncul jendela import kemudian pilih gambar yang kita inginkan ->open

Gambar jendela import

5. Tempatkan posisi gambar sesuai dengan ukuran stage.

Membuat animasi judul

Untuk membuat animasi judul pada media pembelajaran yang anda buat ikuti langkah – langkah berikut :

1. Buat tulisan judul media pembelajaran yang anda buat sesuai dengan bidang anda masing – masing(misal: TEKNOLOGI INFORMASI DAN KOMUNIKASI)

2. Klik kanan pada judul ->convert to symbol ->maka akan muncul dialog convert to symbol kemudian isikan name:judul, type:movie clip seperti gambar dibawah ini:

3. Klik dua kali judul sehingga masuk kehalaman movie clip, ganti layer 1 dengan

nama “judul”, dengan cara klik dua kali kemudian tuliskan “judul” seperti gambar dibawah ini:

4. Pada layer judul klik frame 50 kemudian klik kanan insert keyframe

5. Buat satu layer layer lagi dengan cara klik symbol yang berada dibawah jendela layer kemudian beri nama mask. Letakkan layer mask dibawah layer judul .

Page 21: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

21

6. Pada layer mask buat kotak warna pelangi dengan cara klik rectangle tool

kemudian klik fill color pilih warna pelangi. Letakkan kotak tersebut sedikit kekiri dimana kita menuliskan judul sampai menutupi tulisan.

7. Klik kanan pada frame 1 (layer mask) -> create motion tween

8. Pada layer mask klik frame 50 kemudian klik kanan insert keyframe, pada frame 50 geser kotak kesebelah kanan stage

9. Klik kanan pada layer judul ->pilih mask

10. Klik scene1 untuk kembali ke halaman utama. Untuk melihat hasil klik control -

> test movie

Membuat tombol rollover

Tombol rollover adalah adalah tombol yang paling sering dipakai baik pada web maupun media interaktif. Ada 4 elemen yang sebaiknya anda pahami terlebih dahulu. Yaitu up, over, down dan hit. Up yaitu pada saat posisi tombol dalam keadaan standar/default atau tidak ada aksi pada posisi tersebut. Over, pada saat kursor mouse melewati sekitar tombol yang kita buat. Down, yaitu pada saat mouse melakukan pengeklikan pada tombol. Hit, yaitu area yang dibuat sebagai batasan dari tombol tersebut.

Untuk membuat tombol rollover pastikan lembar kerja anda berada di scene 1. Selanjutnya ikuti langkah –langkah dibawah ini :

1. Pada scene 1 buat layer baru bernama tombol1

2. Pilih rectangle tool,pada option tools klik set corner radius maka akan muncul dialog rectangle settings rubah corner radius menjadi 25 points seperti pada gambar dibawah ini

Page 22: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

22

3. Buat kotak pada layer tombol1, pada kotak yang telah dibuat tuliskan judul tombol (missal:silabus)

11. Seleksi kotak dan tulisan yang sudah dibua kemudian klik kanan - > convert to symbol ->maka akan muncul dialog convert to symbol kemudian isikan name:silabus, type:button seperti gambar dibawah ini:

4. Klik ok 5. Klik dua kali symbol silabus sehingga kita masuk kehalaman silabus seperti

gambar dibawah ini:

6. Aktifkan frame up, dengan cara mengklik frame tersebut kemudian klik kanan -

> insert keyframe pada masing-masing frame up, over,down dan hit.(atau tekan f6 sebanyak 3x berturut – turut)

7. Klik frame over untuk mengaktifkan frame tersebut.

8. Tambahkan satu layer lagi dengan cara klik symbol kemudian pada posisi over insert keyframe.

9. Rubah warna tulisan sesuai denga selera anda. 10. Buat kotak dengan rounded rectangle radius : 25 point. 11. Pilih fill color sesuai dengan selera anda. 12. Letakkan kotak tersebut diatas tombol silabus, kemudian buat garis vertical

menimpa kotak yang telah dibuat, gunakan free transform tool untuk membuat garis sedikit melengkung klik bagian yang lebih besar kemudian tekan delete

Page 23: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

23

13. Masih di frame over buat kotak dan letakkan kotak tersebut ditengah halaman,

pilih fill color yang anda inginkan. Agar terkesan transparansi rubah alpha menjadi 40 % kemudian isikan silabus pelajaran anda. Seperti gambar dibawah ini ;

14. Lakukan hal yang sama untuk membuat tombol rollover yang lain misal refference, aboutme dan help

Membuat scene untuk submenu

Tahap ini adalah tahap dimana anda akan diarahkan untuk membuat persiapan link antar sub menu;

1. Aktifkan kembali project yang telah anda buat, lalu aktifkan panel scene, jika belum ada klik windows -> other panels -> scene. Secara default nama dari scene adalah scene 1

2. Pada scene 1 buat layer baru dengan nama materi.pada frame1 layer materi tuliskan “materi” kemudian klik kanan convert to symbol ->movie klip.

Page 24: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

24

3. Klik dua kali tulisan materi untuk masuk ke movie clip materi. 4. Pada frame1 layer 1 klik kanan create motion tween,klik frame30 insert

keyframe. Rubah letak dan warna tulisan sesuai keinginan anda. 5. Jika anda ingin menambah animasilain tambahkan layer baru 6. Masih discene 1 tambahkan layer baru dengan tombol materi 7. Pada frame1 layer tombol materi buat tombol baru dengan nama sesuai

dengan materi anda misal “hardware”. 8. Tambahkan scene2 dengan cara klik tombol add scene pada jendela scene

9. Kemudian anda telah memasuki scene2, ganti scene2 dengan nama judul

materi anda (misal “hardware”). Pada scene hardware tulis isi dari materi anda 10. Pada scene hardware tambahkan layer baru. Kemudian beri nama stop. Klik

frame1 layer stop kemudian aktifkan action untuk menuliskan action script dengan cara pilih menu window ->actions (f9)

11. Kemudian pilih global functions ->timeline control -> stop. Untuk lebih jelasnya lihat gambar dibawah ini:

12. Tambahkan layer baru kemudian beri nama back. Selain membuat button

sendiri di macromedia flash juga menyediakan fasilitas button. Dengan cara

Page 25: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

25

pilih menu window -> common liberaries -> buttons. Kemudian pilih button yang anda inginkan seperti gambar dibawah ini :

13. Klik dan drag tombol yang akan anda gunakan dan letakkan sesuai dengan keinginan anda.

14. Klik tombol rounded green back yang telah dibuat kemudian tekan f9 untuk masuk ke action frame. Kemudian pilih global functions ->timeline control -> goto. untuk lebih jelasnya lihat gambar dibawah ini :

15. Kemudian isikan action seperti gambar dibawah ini :

16. Sekarang kita kembali kescene 1.buat hal yang sama seperti langkah no 10 dan

11 17. Klik tombol hardware kemudian tekan f9 untuk masuk ke action frame. Aktifkan

script assist untuk mempermudah kerja anda 18. Kemudian pilih global functions ->timeline control -> goto. Untuk lebih jelasnya

lihat gambar dibawah ini:

Page 26: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

26

19. Untuk membuat link kesubmenu lain lakukan cara yang sama(langkah 4- 18)

Menambah Suara

20. Untuk menambahkan suara pada lembar kerja anda pilih file -> import ->import to library.

21. Drag file suara yang ada dilibrary ke stage/ lembar kerja anda. 22. Untuk menjalankan media anda control -> test movie. 23. Untuk merubah hasil kerja kita dalam bentuk .exe klik file ->publish settings ,

kemudian pada format pilih type : flash(.swf) dan windows projector (.exe), klik publish kemudian ok Menambah

24. Klik file -> import ->import to video ->pilih file video (format video yang bisa digunakan adalah yang berekstensi:. Flv )

Sumber :

Diktat pembuatan bahan ajar dengan flash8,Mugi hartanti,2010

Pembuatan animasi dengan flash 8,Bambang Ardiyanto,2010

http://www.bengkelflash.com/2013/03/mengolah-objek-teks-pada-flash/

Page 27: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

SMA NEGERI 1 SALATIGA Modul Flash/Mugi Hartanti

27

Page 28: MODUL MACROMEDIA FLASH 8 : Membuat Program Multimedia menggunakan Action Script (Flash) KD : 10.1Menciptakan dan memanipulasi obyek-obyek Flash A. Mengenal Jendela Kerja 1. Mengenal

Modul Flash/Mugi Hartanti 28