Materi IlmuKomputer.Comilmukomputer.org/wp-content/uploads/2008/02/pen-membuat... · Web viewScale...

Tips dan TrikTips dan Trik

Persentasi Multimedia MenggunakanPersentasi Multimedia Menggunakan Flash MX 2004Flash MX 2004

[email protected]

Membuat Presentasi menarik dengan Adobe Flash

Tips dan TrikTips dan Trik

Persentasi Multimedia MenggunakanPersentasi Multimedia Menggunakan Adobe FlashAdobe Flash

[email protected]

]

Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

1

Lisensi Dokumen:Copyright © 2003-2007 IlmuKomputer.ComSeluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

Membuat Presentasi Dengan Macromedia Flash

1.1 Pengenalan Komponen Macromedia Flash

Gambar 1.1 Tampilan Panel Tools

Gambar 1.2 Menu Bars


2

Gambar 1.3 Tampilan Muka Macromedia Flash MX

Gambar 1.4 Tampilan Time Lines

Gambar 1.5 Tampilan Stage

Selection Tool (V)

Selection Tool digunakan untuk menyeleksi objek menyeleksi garis diluar objek.


3

Gambar 1.6 Bintik-bintik pada gambar merupakan objek yang diseleksi.

Subselection Tool (A)

Subselection tool digunakan bukan hanya untuk menyeleksi tetapi juga untuk mengubah bentuk objek yang diseleksi.

Gambar1.7 Node pada lingkaran dapat ditarik sehingga lingkaran akan berubah bentuk.

Line Tool (N)

Line tool digunakan untuk membuat garis dengan ketebalan tertentu. Bila ingin membuat garis lurus, tekan shift kemudian mouse digerakkan untuk membuat garis.

Gambar 1.8 Pilihan ketebalan dalam membuat garis.

Lasso Tool (L)

Lasso tool digunakan untuk menyeleksi objek dengan bebas. Kita dapat membentuk pola tersendiri dalam menyeleksi objek.

Gambar 1.9 hasil seleksi menggunakan lasso tool.

Pen Tool (P)

Pen tool digunakan untuk membuat garis lurus maupun garis melengkung.


4

Gambar1.10 garis melengkung yang dibentuk oleh pen tool.

Text Tool (T)

Text tool digunakan untuk menuliskan huruf, kata, kalimat. Terdapat tiga tipe teks yaitu static text, dynamic text dan input text. Static text merupakan teks yang tidak dapat diubah-ubah. Dynamic text digunakan untuk nilai yang dapat berubah-ubah, misalnya waktu, skor, dan lain-lain. Sedangkan input text digunakan untuk mengambil nilai yang dimasukan, misalnya digunakan pada form seperti user name, password, dan sebagainya.

Oval Tool (O)

Oval tool digunakan untuk membuat gambar yang bulat atau lingkaran. Tekan shift jika ingin membuat lingkaran yang bulat penuh.

Rectangle Tool (R)

Rectangle Tool digunakan untuk membuat gambar persegi panjang atau bujur sangkar. Tekan shift untuk membuat gambar persegi dengan sisi sama panjang.

Pencil Tool (Y)

Pencil tool digunakan untuk menggambar seperti halnya pencil.

Brush Tool (B)

Brush tool digunakan untuk melukis seperti halnya dengan kuas.

Free Transform Tool

Sesuai dengan namanya, tool ini digunakan untuk memperbesar, memperkecil ukuran, serta mentransformasi bentuk. Ada beberapa bentuk transformasi yang disediakan antara lain: skew, scale, distort, dan envelope. Skew digunakan untuk membuat objek menjadi miring baik secara horizontal maupun vertikal. Scale digunakan untuk mengubah skala objek. distort digunakan untuk mengubah titik-titik yang ada pada sudut objek. Envelope berfungsi sama seperti dengan distort hanya titik-titiknya yang akan diubah lebih banyak.Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

5

Fill Transform Tool (F)

Fill transform tool digunakan untuk mengubah warna yang ada di dalam, khususnya warna gradasi.

Ink Bottle Tool (S)

Ink Bottle Tool digunakan untuk mengubah warna outline pada objek.

Paint Bucket Tool (K)

Paint Bucket Tool Digunakan untuk warna bagian dalam objek.

Eye Dropper Tool (I)

Eye Dropper Tool digunakan untuk mengambil warna. Jika kita mengambil warna pada outline maka ink bottle tool akan aktif. Jika kita mengambil warna bagian dalam objek maka pain bucket tool akan aktif.

Eraser Tool (E)

Eraser Tool digunakan untuk menghapus baik outline maupun warna bagian dalam objek.

Hand Tool (H)

Hand tool digunakan untuk menggeser stage.

Zoom Tool (M,Z)

Zoom Tool digunakan untuk memperbesar atau memperkecil tampilan stage.

1.2 Langkah-Langkah Membuat Presentasi Flash.

Macromedia Flash merupakan software berbasis vektor yang sangat baik untuk digunakan dalam membuat slide presentasi. Kita akan memcoba membuat suatu slide presentasi selangkah demi selangkah.


6

Membuka Program Macromedia Flash MXKlik Start pada pojok kiri bawah > All Program > Macromedia > Macromedia Flash MX

Gambar 1.11 Tampilan awal Macromedia Flash

Membuat Menu Utama

Klik Create New > Flash Document.

Secara otomatis Macromedia Flash akan menyediakan ukuran kanvas seluas 550 x 400 pixels. Untuk memperoleh tampilan yang lebih maksimal ubah size kanvas dengan cara sebagai berikut.Mengubah Size Stage / Kanvas Klik size pada properties, kemudian ubah ukuran stage menjadi 800 X 600 pixels >

Ok.

Gambar1.12 mengubah ukuran stage. Save as > beri nama > Index.fla

Mengubah Nama LayerKomunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

7

Klik 2X layer 1, ubah nama layer 1 pada pojok kiri timeline menjadi bars.

Gambar1.13 Mengubah nama layer 1 menjadi “bars”.

Membuat Symbol Movie ClipTujuan dibuatnya symbol movie clip adalah untuk menciptakan timeline baru di luar

time line utama. Dengan demikian tidak terlalu banyak layer yang muncul pada timeline utama. Hal ini akan mempermudah kita dalam dalam mengatur dan megedit hasil pekerjaan kita. Klik menu insert > new symbol > Behavior-nya movie clip, beri namanya bars_mc.

Gambar 1.14 membuat movie clip “bars_mc”Kembali ke Scene 1 Klik Scene 1 untuk kembali ke Scene 1.

Gambar 1.15 kembali ke scene1

Klik menu Window > Library maka akan muncul bars_mc pada kanan bawah layar monitor.

Gambar 1.16 movie clip “bars_mc” pada libraryTime Line Baru Dalam Movie Clip


8

Klik dan Drag bars_mc yang berada pada library ke stage > klik 2X bulatan movie clip yang ada pada stage. Kemudian akan muncul time line baru pada movie clip bars_mc.

Gambar 1.17 bulatan movie clip “bars_mc”

Gambar 1.18 timeline baru

Menambah Layer Klik gambar yang berada dibawah timeline, untuk menambah layer.

Tambahkan 2 layer baru > ubah nama layer-layer tersebut dengan meng-klik 2x pada layer yang akan diubah namanya. Beri nama bar atas dan bar bawah pada layer tersebut

Gambar 1.19 penambahan layer “bar atas” dan” bar bawah”.

Membuang Garis Out Line Pada frame 1 bar atas, Klik Rectangle tool > buat garis seperti gambar di bawah ini


9

Gambar 1.20 Frame 1 bar atas

Gambar 1.21 Membuat garis dengan menggunakan rectangle tool. Klik Selection tool > Klik garis tepi pada persegi panjang yang terdapat pada

kanvas > tekan delete pada keyboard sehingga garis tepi pada persegi panjang tersebut tidak ada lagi.

Gambar 1.22 Membuang garis out line pada layer “bar atas”.Mengandakan Gambar Klik garis biru pada stage > copy (Ctrl + C), kemudian paste (Ctrl + V) pada Frame

1 bar bawah.

Gambar 1.23 Frame 1 layer bar bawah

Gambar 1.24 Membuat garis pada layer “bar bawah”.Memotong dan Mengabungkan Garis Pada Layer bar atas, Buat lagi garis dengan rectangle tool, kemudian dengan

menggunakan line tool, kita memotong garis tersebut.

Gambar 1.25 Memotongt garis dengan line tool.


10

Dengan menggunakan selection tool (V) > kita hapus garis biru pada bagian kiri berserta garis pemotongnya. Setelah itu tempelkan garis biru bagian kanan ke garis bagian atas.

Gambar 1.26 menempelkan hasil potongan garis ke garis bagian atas.Membuat Garis Menggunakan Line Tool Pada layer bar atas, Buatlah garis dengan line tool mengikuti garis biru bagian atas

dengan ketebalan 4. Pertama buat garis horintal, kemudian buat garis vertikal yg sedikit dimiringkan dan yang terakhir buat garis horizontal lagi, sehingga mengikuti garis biru bagian atas.

Gambar 1.27 membuat garis mengikuti garis biru bagian atas.

Menggabungkan Gambar Klik pada frame 1 bar atas > tekan (Ctrl + G) pada Keyboad untuk membuat group.

Begitu juga dengan frame 1 bar bawah > tekan (Ctrl+G) untuk Membuat Group.


11

Gambar 1.28 Membuat Group.Mengubah Gambar Menjadi Movie Clip Klik gambar pada stage bagian layer bar atas, kemudian Klik Kanan > Convert to

Symbol > Behaviour Movie Clip, NameBarAtas_mc.

Gambar 1.29 Gambar pada stage bagian layer bar atas yang akan diubah ke symbol movie clip.

Gambar 1.30 tampilan convert to symbol movie clip barAtas_mc. Begitu juga dengan bar bawah > klik kanan > Convert to symbol > behaviour

Movie Clip, Name BarBawah_mc.

Gambar 1.31 Gambar pada stage bagian layer bar bawah yang akan diubah ke symbol movie clip.

Gambar 1.32 tampilan convert to symbol movie clip BarBawah_mc.

Menambah Keyframe Klik Frame 30 pada BarAtas > tekan F6 untuk menambah keyframe. Begitu juga

dengan BarBawah, pada frame 30 > tekan F6.


12

Gambar 1.33 menambah keyframe pada layer bar atas.Mengubah Ukuran dan Bentuk Gambar Pada frame 1 Bar Atas > Klik gambar BarAtas_mc pada stage > Free Transform

tool (Q) untuk memperpendek gambar hingga seperti gambar di bawah ini. Letakan persis di sebelah kanan atas stage.

Gambar 1.34 Frame 1.

Gambar 1.35 memperpendek garis bagian atas dengan free transform tools.

Pada Frame 1 Bar Bawah > klik gambar BarBawah_mc pada stage > Free Transform Tool (Q) untuk membuat garis menjadi pendek seperti gambar di bawah ini. Letakan persis sebelah kiri bawah stage.


13

Gambar 1.36 memperpendek garis bagian bawah dengan free transform tools.Membuat Animasi Motion Tween Arahkan cursor mouse diantara frame 1 sampai 30 > Klik Kanan >Create Motion

Tween baik pada bar atas maupun bar bawah.

Gambar 1.37 membuat motion tween pada” bar atas” dan “bar bawah”.Mengubah Color Properties Alpha Pada barAtas frame1 > klik objek gambar pada stage > Ubah Properties Color

Menjadi Alpha 0%.

Gambar 1.38 mengubah properties alpha menjadi 0%. Pada barAtas frame 30 > klik objek gambar pada stage > Ubah Properties Color

Menjadi Alpha 100%.

Gambar 1.39 mengubah properties alpha menjadi 100%. Begitu juga dengan BarBawah pada frame pertama, alpha = 0% dan pada frame 30,

alpha = 100%.

Melihat Hasil SementaraKomunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

14

Untuk melihat hasil sementara tekan Ctrl + Enter.

Membuat Bar Menu Tambah layer baru beri nama Bar Menu. Pada frame 31 tambahkan key frame

dengan menekan F6 pada keyboard.

Gambar 1.40 menambah layer baru “bar menu”.

Menambahkan Blank Frame Pada layer Bar atas dan Bar Bawah, tambahkan blank frame pada frame ke-60

dengan menekan F5 pada keyboard.

Gambar 1.41 menambah blank frame pada layer “bar atas” dan “bar bawah”.

Mengatur Posisi atau Letak Gambar Dengan Grid Pada layer Bar Menu (frame ke-31), buat garis dengan menggunakan regtangle tool

kemudian potong garis dengan menggunakan line tool. Untuk membuat potongan menu sama besar dan posisi gambar menjadi lebih baik, Klik View > Grid > Show Grid.

Gambar 1.42 membuat bar menu.

Pada layer Bar Menu, tambahkan key frame (F6) pada key frame 60. arahkan cursor mouse diantara keyframe ke-31 dan ke-60. Ubah properties Dibawah menjadi Shape.

Gambar 1.43 frame antara keyframe ke-31 dan ke-60.


15

Gambar 1.44 mengubah properties menjadi shape. Pada key frame ke-31 layer Bar Menu, klik Free Transform tool, perkecil ukuran

garis. Ubah warnah kalau perlu.

Gambar 1.45 memperkecil ukuran dengan menggunakan free transform tool.

Pada layer Bar menu, tambahkan key frame (F6) pada frame ke-61. tambahkan juga blank frame (F5) untuk layer bar atas dan bar bawah pada frame ke-61.

Gambar 1.46 frame ke-61.

Klik Text Tool (T) > Ketik satu-persatu Home, Text, Sound, Movie, Link seperti pada gambar dibawah ini. Untuk mengatur posisi tulisan > klik Selection Tool > klik Text yang ingin dipindahkan.

Gambar 1.47 membuat menu.Membuat Button Pada key frame ke-61 layer Bar menu, Klik pada stage > klik tulisan Home > tekan

Shift > Klik Background Berwarna abu-abu dibelakangnya > klik kanan >convert to symbol > Pilih Behaviour Button > beri nama Home_btn.


16

Gambar 1.48 Text Home dan back ground dibelakangnya.

Gambar 1.49 mengubah text dan background menjadi Button. Begitu juga dengan tulisan Text, Sound, Movie, Link. Masing-masing diubah

menjadi button dengan nama: Text_btn, Sound_btn, Movie_btn, Link_btn. Tambahkan layer baru, beri nama ActionScript1.

Gambar 1.50 menambah layer baru “action script”.

Pada frame ke-61 layer ActionScript1 tambahkan keyframe dengan menekan F6 pada Keyboard. Kemudian tekan F9 maka akan muncul action frame. Ketik Stop();Dengan menggunakan action script stop(); pada frame ke-61 maka frame akan berhenti pada frame ke-61.

Gambar 1.51 Frame ke-61 pada layer ActionScript.

Gambar 1.52 tampilan dari action frame.

Tambahkan layer kemudian beri nama target.


17

Gambar 1.53 menambah layer “target”.

Klik Insert > New Symbol > Behaviour Movie Clip > beri nama Target_mc.

Gambar 1.54 insert movie clip “target_mc”.

Kembali ke scene1 > Klik layer bars > klik 2x bulatan movie clip yang ada pada stage.

Gambar 1.55 movie clip bars_mc pada stage.

Klik layer target > klik main Menu Window > Library > Klik dan Drag Target_mc ke stage.

Gambar 1.56 movie clip “target_mc” pada stage.

Klik bulatan movie clip target_mc pada stage > Instance name pada properties diberi nama: target.


18

Gambar 1.57 instance name movie clip “target”.

Membuat Coding Action Script Untuk Memanggil File Lain Di Luar File Induk. Klik Keyframe ke-61, Klik Button Home > F9 pada keyboard > ketikan coding

action script: on (release) {

loadMovie("Home.swf", "target"); }

Gambar 1.58 button Home.

Kegunaan on (release) adalah untuk menyatakan pada saat button ditekan maka perinta berikutnya akan dijalankan. loadMovie adalah perintah untuk memangil movie lain yang berada diluar stage.Target_mc yang instance name kita beri nama target merupakan alamat atau parameter dimana movie yang dipanggil akan diletakkan. Dalam hal ini target_mc pada stage dapat kita ubah posisinya sehingga mempengaruhi letak movie yang akan muncul di stage.

Klik Button Text > F9 > ketikan coding action Script:on (release) {

loadMovie("Text.swf", "target"); }

Gambar 1.59 button Text. Klik Button Sound > F9 > ketikan coding action Script:

on (release) {loadMovie("Sound.swf", "target");

}

Gambar 1.60 button Sound. Klik Button Movie > F9 > ketikan coding action Script:

on (release) {loadMovie("Movie.swf", "target");

}

Gambar 1.61 button Movie. Klik Button Link > F9 > ketikan coding action Script:

on (release) {


19

loadMovie("Link.swf", "target"); }

Gambar 1.62 button Link.

Membuat Halaman Home Klik Menu File > New >Flash Document > OK. Klik Menu File> Save as dengan nama Home.flaMenghilangkan Warna Fill Klik Rectangle Tool > Buat Kotak. Kemudian dengan menggunakan Selection Tool

(V), Klik fill yang ada di tengah kotak. Kemudian tekan Delete pada keyboard. Klik Pada Layer 1 > Tekan Ctrl+G untuk membuat group.

Gambar 1.63 Membuat garis dengan rectagle tool..

Gambar 1.64 Hasil akhir setelah warna fill dihilangkan.

Klik Layer 1 > Tambahkan Keyframe pada frame ke-30. kemudian Perbesar gambar persegi panjang dengan menggunakan Free Transform Tool (Q pada frame ke-30.

Gambar 1.65 Menambahkan keyframe pada frame ke-30

Gambar 1.66 Memperbesar garis dengan free transform tool.Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

20

Diantara keyframe Ke-1 dan Keyframe ke-30 > Klik Kanan > Create Motion Tween.

Gambar 1.67 Frame ke-1 sampai ke-30 Tambahkan layer ganti nama layer dengan nama “selamat datang”.

Gambar 1.68 Layer selamat datang kemudian letakkan cursor mouse pada frame ke-31 pada layer selamat datang >

tekan F6 untuk menambahkan objek.

Gambar 1.69 Menambahkan Keyframe pada Frame ke-31 layer selamat datang.Menuliskan Text pada Stage Click text tool (T), pilih font huruf yang diinginkan dan pilih besar ukuran huruf

yang akan ditulis, kemudian ketik “Selamat Datang Di Dunia Flash MX” pada stage. Tekan F5 pada frame ke-60 pada layer 1.


21

Gambar 1.70 Text “Selamat Datang Di Dunia Flash MX” Arahkan Cursor Mouse ke Tulisan “Selamat Datang di Dunia Flash MX” > Klik

kanan > pilih convert to symbol, kemudian pilih behaviour movie clip. Beri nama selamat_mc.

Gambar 1.71 Convert to movie clip “selamat_mc”.

Tekan F6 pada frame ke-60 pada layer selamat datang, kemudian letakkan cursor mouse di antara frame ke-31 dan ke-60, klik kanan pilih motion tween.

Gambar 1.72 Membuat motion tween.

Klik frame ke-31 pada layer selamat datang pilih modify pada menu bars > transform > flip horizontal.


22

Gambar 1.73 Membuat tulisan menjadi terbalik.

Pilih free transform tools (Q), kecilkan ukurannya dan putar sedikit objek text untuk mempercantik animasi.

Gambar 1.74 Membuat tulisan menjadi sedikit miring. Tambahkan 5 layer di atas layer selamat datang, masing-masing diberi nama

pendahuluan, pembahasan, kesimpulan, button dan action script.

Gambar 1.75 penambahan layer pendahuluan, pembahasan, kesimpulan, button dan action script.

Pada layer pendahuluan frame ke-61 tekan F6 untuk menambah keyframe > , klik insert > new symbol > behaviour movie clip, beri nama Pendahuluan_mc. Terus tekan Ok. Kembali ke scene 1 di atas time line.

Gambar 1.76 Penambahan Keyframe pada frame ke-61 layer pendahuluan.


23

Gambar 1.77 Insert Movie Clip Pendahuluan_mc

Gambar 1.78 kembali ke scene 1 Klik layer Pendahuluan frame ke-31 > klik menu window > library pada menu bars,

drag pendahuluan_mc ke stage.

Gambar 1.79 Bulatan movie clip pendahuan_mc pada stage. Klik dua kali pada bulatan pendahuluan_mc yang berada di stage sehingga terlihat

ada time line yang baru.

Gambar 1.80 time line “ pendahuluan_mc”. Ganti nama layer 1 menjadi Pendahuluan, tambahkan 5 layer lagi dan masing-

masing diberi nama Latar belakang, Tujuan, manfaat, label dan action script.


24

Gambar 1.81 layer-layer pada movie clip “pendahuluan_mc”.

Pada layer pendahuluan, klik Text tool (T), kemudian Ketik “Pendahuluan” di atas stage.

Gambar 1.82 Text “Pendahuluan” pada stage.

Mengubah Text Menjadi Button Pada tulisan pendahuluan yang berada di atas stage. Klik kanan, covert to symbol,

pilih behaviour button dan beri nama pendahuluan_btn.

Gambar 1.83 mengubah text “Pendahuluan” menjadi Button.

Tekan F5 pada frame ke-50 layer pendahuluan.

Gambar 1.84 menambah blank frame pada frame ke-50.


25

Pada layer latar belakang, frame ke-20 tekan F6. ketik tulisan Latar Belakang di atas stage dengan menggunakan text tool (T). Click kanan, covert to symbol, pilih behaviour button dan beri nama Latarbelakang_btn.

Pada layer tujuan, frame ke-20 tekan F6. ketik tulisan Tujuan di atas stage dengan menggunakan text tool (T). Klik kanan, covert to symbol, pilih behaviour button dan beri nama “Tujuan_btn”.

Pada layer manfaat, frame ke-20 tekan F6. ketik tulisan Manfaat di atas stage dengan menggunakan text tool (T). Klik kanan, covert to symbol, pilih behaviour button dan beri nama “Manfaat_btn”.

Gambar 1.85 Tampilan dari Button Pendahuluan, Latar Belakang, Tujuan, dan Manfaat

Pada layer latar belakang, tekan F6 pada frame ke-50. Klik tulisan Latar Belakang yang berada di stage, ubah properties color menjadi Alpha 100%.

Pada layer Tujuan, tekan F6 pada frame ke-50 > Klik tulisan Tujuan yang berada di stage, ubah properties color menjadi Alpha 100%.

Pada layer manfaat, tekan F6 pada frame ke-50. Klik tulisan Manfaat yang berada di stage, ubah properties color menjadi Alpha 100%.

Gambar 1.86 penambahan keyframe pada frame ke-50

Gambar 1.87 mengubah properties color alpha menjadi 100%.

Pada layer latar belakang, frame ke-20. Klik tulisan Latar Belakang yang berada di stage, ubah properties color menjadi Alpha 0%, drag tulisan yang tidak kelihatan tersebut tepat di atas tulisan pendahuluan.


26

Pada layer tujuan, frame ke-20. Klik tulisan Tujuan yang berada di stage, ubah propertiesy color menjadi Alpha 0%, drag tulisan yang tidak kelihatan tersebut tepat di atas tulisan pendahuluan.

Pada layer manfaat, frame ke-20. Klik tulisan Manfaat yang berada di stage, ubah properties color menjadi Alpha 0%, drag tulisan yang tidak kelihatan tersebut tepat di atas tulisan pendahuluan.

Gambar 1.88 Frame ke-20

Gambar 1.89 mengubah properties color alpha menjadi 0%

Gambar 1.90 Menempatkan Latar belakang_btn, Tujuan_btn, Manfaat_btn yang properties color alpha 0% di atas Pendahuluan_btn

Di antara frame ke-20 dan ke-50 pada layer latar belakang, click kanan > create motion tween.

Di antara frame ke-20 dan ke-50 pada layer tujuan, click kanan > create motion tween.

Di antara frame ke-20 dan ke-50 pada layer manfaat, click kanan > create motion tween.

Gambar 1.91 menambahkan animasi motion tweenMemberi nama Label Pada layer label, frame ke-1. ketik frame label “menutup” pada properties.


27

Gambar 1.92 memberikan nama lebel “menutup”

Gambar 1.93 Frame ke-1 Pada layer label, frame ke-20 > tekan F6 untuk menambah keyframe > ketik frame

label “membuka” pada properties. Tekan F5 pada frame ke-50 pada layer label.

Gambar 1.94 Frame ke-20 Klik tulisan pendahuluan pada stage, tekan F9. ketik coding action script:

on (press) {gotoAndPlay("Membuka");}

Gambar 1.95 Penambahan coding action script pada pendahuluan_btn

Coding di atas menunjukkan bahwa pada saat tombol ditekan maka flash akan menuju ke label membuka yaitu frame ke-20.

Pada layer “action script”, tekan F6 pada frame ke-19 dan ke-50. tekan F9, ketik stop();


28

Gambar 1.96 Penambahan coding action script stop pada frame ke-19 dan frame ke-50 Lakukan hal yang sama seperti layer pendahuluan, tetapi pada layer pembahasan

objek dibuat pada frame ke-62 dan pada layer untuk layer kesimpulan dan saran, objek dibuat pada frame ke-63. Untuk menambah objek, cukup menekan F6 pada frame yang diinginkan.

Usahakan koordinat X dan Y pada properties layer pendahuluan, pembahasan dan layer kesimpulan mempunyai koordinat yang sama.

Kembali ke scene1 > layer layer action script, frame ke-60, ke-61, ke-62 dan ke-63. beri coding action script: Stop ();

Gambar 1.97 Frame ke-60, 61 dan 62Menambahakan Button Dari Common Libraries Pada layer button, frame ke-1. pilih window > other panels > common libraries >

buttons pada menu bars. Pilih button yang sesuai.

Gambar 1.98 insert button kanan.

Klik button yang ada pada stage, ketik coding berikut ini:on (release) {


29

gotoAndPlay(61);}

Pada saat button di tekan, maka frame ke-61 yang akan dijalankan (pendahuluan_mc).

Pada layer “button ”, frame ke-61 tekan F6 > tambahkan button (button kiri) untuk kembali ke menu sebelumnya. Ketik coding:

on (release) {gotoAndPlay(1);

}

Gambar1.99 Insert button kiriUntuk button kanan, ketik coding:on (release) {gotoAndPlay(62);}

Pada Layer buton tekan F6 pada frame ke-62. Klik button kiri pada stage > ketik coding action script:

on (release) {gotoAndPlay(61);}

Klik button kanan pada stage > ketik coding action script:on (release) {gotoAndPlay(63);}

Pada layer button tekan F6 pada frame ke-63 > klik button kiri pada stage > ketik coding action script :

on (release) {gotoAndPlay(62);}

Delete button kanan pada stage.


30

Gambar 1.100 Delete button kanan pada stage Klik Button Home untuk melihat hasil dari Link. Jika tampilannya terlalu pinggir

kanan, kita tinggal Menarik Target_mc sedikit ke kiri, dengan demikian posisi Home.swf yg kita panggil dapat kita atur posisi tampilnya di stage.

Membuat Halaman Text

Klik File > New > Flash Document > save as beri nama Text.fla.

Ubah nama layer 1 menjadi scroolbar dan tambah layer lagi beri nama actionscript.

Gambar 1.101 layer scrolbar dan layer actionscript.Membuat Scrollbar Buat 3 garis dengan Rectangle tool pada layer scrollbar sepeti gambar di bawah ini.

Garis ke-1 lebih panjang dari pada garis ke-2 dan ke-3. Garis ke-3 diberi warna yang berbeda dan potong garis ke-3 dengan menggunakan Line tool. Garis ke-1 dan garis ke-2 di blok dengan menggunakan mouse satu-persatu (tidak digabung) > tekan Ctrl + G untuk membuat group pada garis ke-1 dan garis ke-2.

Gambar 1.102 gambar garis yang dibuat dengan rectangle tool.


31

Copy dan paste garis ke-2 > keluarkan fill segitiga pada garis ke-3 dan buat garis outline yang tidak diperlukan > dengan menggunakan Free transform tool buat segitiga menghadap ke atas dan ke bawah > tekan Ctrl + G untuk membuat group pada garis ke-3.

Gambar 1.103 garis yang dipersiapkan untuk membuat scrollbar.

Klik shift pada garis ke-2 bagian atas dan segitiga yang menghadap ke atas > klik kanan > convert to symbol >behaviour: button > name atas_btn. Begitu juga dengan garis ke-2 bagian atas dan segitiga yang menghadap ke bawah beri nama bawah_btn.

Gambar 1.104 Bagian atas dan bagian bawah

Klik 2X pada atas_btn > tekan F6 pada timeline> over > klik 2X pada segitiga ubah warnanya agar pada saat mouse didekatkan maka warna segitiga akan berubah. Ubah juga warna segitiga bawah_btn dengan cara yang sama.


32

Gambar 1.105 menambah keyframe pada button Gabungkan garis-garis tersebut seperti gambar di bawah ini.

Gambar 1.106 garis yang sudah digabungkan. Klik atas_btn > tekan F9 > ketik coding:

on (release, keyPress "<Up>") {_parent.artikel.scroll--;

}Pada saat atas_btn ditekan maka artikel yang terdapat pada text.txt akan turun 1 baris.

Klik bawah_btn > tekan F9 > ketik coding:on (release, keyPress "<Up>") {

_parent.artikel.scrol++;Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

33

}Pada saat bawah_btn ditekan maka artikel yang terdapat pada text.txt akan naik 1 baris.

Klik layer scrollbar > klik kanan pada tepat pada garis di stage > convert to symbol > behaviour: movie clip > name: scrollbar_mc > pada instance name pada properties diberi nama scrollbar.

Gambar 1.107 mengubah scrollbar menjadi movie clip

Gambar 1.108 instance name “scrollbar” Masih pada layer scrollbar > Klik Text tool ubah properties menjadi Dynamic text >

dan line type diubah menjadi single line> klik show border around the text pada properties.


34

Gambar 1.109 Dynamic text dan single line.

Buat garis dengan Text tool seperti gambar di bawah ini > instance name pada properties diberi nama sjudul.

Gambar 1.110 membuat judul dengan dynamic text.

Pada layer scrollbar > Klik Text tool > properties Dynamic text > line type diubah menjadi multiline > instance name pada properties diubah menjadi artikel > klik show border around the text pada properties.

Gambar 1.111 membuat artikel dengan dynamic text. Klik layer actionscript > tekan F9 > ketik coding actionscript:

dataArtikel = new LoadVars();dataArtikel.onLoad = function() {

artikel.htmlText = this.artikel;judul.htmlText = this.judul;

};dataArtikel.load("text.txt");// dataArtikel merupakan nama function yang kita buat, variable yang akan kita panggil akan mengirimkan datanya ke parameter function yang kita beri nama dataArtikel.// artikel.htmlText = this.artikel hal ini menunjukkan bahwa data artikel akan ditampilkan pada dynamic text artikel.// judul.htmlText = menunjukkan bahwa data judul akan pada dynamic text judul.


35

Membuat Text.txt Start > run > Notepad > Ok

Gambar 1.112 Tampilan menu run Ketik pada notepad tulisan sebagai berikut ini:start=&judul=Macromedia flash&artikel= Trip dan Trik Presentasi1) Materi Presentasi2) Waktu3) Tempat4) Audience (pendengar)5) Penampilan6) Suara7) Body Language (bahasa tubuh)8) Eye contact (tatapan mata)9) Cara Penyampaian10) Penggunaan Multimedia sebagai Alat Bantu Penyampaian.

Membuat Halaman Sound Klik File > New > Flash Document > Save As > beri nama Sound.Fla.Membuat Gambar Speaker Ubah nama layer 1 menjadi Speaker.

Gambar 1.113 mengubah nama layer 1 menjadi “speaker” Klik Insert > New Symbol >Behaviour Movie clip > beri nama speaker_mc.


36

Klik Scene 1 untuk kembali ke Scene 1 > Klik Window > Library untuk melihat library > Klik dan drag speaker_mc ke atas Stage.

Gambar 1.114 “speaker_mc” pada windows library.

Klik 2 kali pada bulatan movie clip sehingga keluar timeline baru.

Gambar 1.115 “speaker_mc” pada pada stage.

Pada layer 1, Pilih Warna Hitam pada Fill Color > buat lingkaran dengan menggunakan Oval Tool (O) .

Klik Pada frame 1 pada layer 1 > tekan Ctrl +G untuk membuat Group.

Gambar 1.116 membuat lingkaran pertama dengan oval tool.

Tambah Layer pada speaker_mc > Pilih Warna gradasi hitam putih pada Fill Color > buat lingkaran pada layer 2 yang ukurannya lebih kecil dari pada lingkaran pertama > tekan Ctrl + G pada lingkaran ke-2 untuk membuat group.

Gambar 1.117 membuat lingkaran kedua yg diletakan di atas lingkaran pertama.

Tambah Layer pada speaker_mc > Pilih warna gradient pada fill color > buat lingkaran pada layer 3 yang ukurannya lebih kecil dari pada lingkaran kedua.


37

Gambar 1.118 membuat lingkaran kedua yg diletakan di atas lingkaran pertama dan kedua.

Tekan F6 frame ke-2 pada layer 2 dan layer 3 > tekan F5 frame ke-2 pada layer 1.

Gambar 1.119 menambah keyframe. Pada frame ke-2 layer 3, Perbesar Lingkaran sedikit saja dengan menggunakan

Free Transform Tool (Q).

Pada frame ke-2 layer 2, Perkecil Lingkaran sedikit saja dengan menggunakan Free Transform Tool (Q).

Memasukan Sound ke Dalam Flash Kembali ke scene 1 > Insert > New Symbol > Behavior Movie clip > beri nama

sound_mc. Kembali ke scene 1 > tambah layer baru, beri nama sound.

Gambar 1.120 menambah layer “sound” pada scene 1.

Pada layer sound > Drag sound_mc dari library ke stage > klik dua kali pada bulatan sound_mc yang berada di stage sehingga muncul time line yang baru.


38

Gambar 1.121 time line baru pada “sound_mc”.

Masukan Suara Pada Timeline Pada sound_mc > File > Import > Import to library > pilih sound yang berada pada

harddisc Komputer anda. Klik dan drag sound yg kita import dari library ke stage.

Gambar 1.122 sound pada window library. Tekan F6 pada frame ke-5 layer 1 > tekan F5 pada frame ke-10.

Gambar 1.123 sound yang sudah dimasukan ke stage pada layer 1. Tambahkan layer di atas layer 1> pada frame pertama layer 2 > tekan F9 sehingga

muncul action-frame > ketikan stop(); pada action frame.

Gambar 1.124 Frame ke-1 pada layer 2


39

Gambar 1.125 tampilan dari action frame pada frame 1 layer2.

Pada frame ke-2 layer 2 isi frame label pada properties: play.

Gambar 1.126 memberikan label “play” pada frame 2 pada layer1.

Pada frame ke-5 layer 2 > tekan F6 > isi frame label pada properties: stop.

Gambar 1.127 memberikan label “stop” pada frame 5 pada layer2.

Kembali ke scene1 > tambahkan layer > beri nama action script.

Gambar 1.128 menambah layer “acton script” pada scene 1.

Tekan F9 pada layer action script > ketik coding: bunyi = 1;


40

Gambar 1.129 memberikan coding pada layer “action script”.

Mengubah Gambar Speaker Menjadi Button Klik gambar speaker pada stage > klik kanan > convert to symbol > behaviour

button > beri nama speaker_btn. Klik dua kali pada speaker_btn hingga muncul time line seperti gambar berikut ini.

Gambar 1.130 tampilan pada time line button setelah diklik dua kali.

Pada layer satu bagian Over > tekan F6 > Pilih Text tool (T) > Ketik ON/OFF tepat di bawah gambar speaker. Kegunaan over adalah: pada saat mouse didekatkan ke button, maka akan muncul tulisan atau gambar yang kita buat.

Gambar 1.131 tulisanON/OFF akan muncul pada saat mouse diarahkan ke gambar speaker.

Kembali ke scene1> klik gambar speaker > tekan F9 > ketikan coding:on (release) {

if (bunyi == 1) {stopAllSounds();sound.gotoAndStop("Stop");bunyi = 0;

} else {Sound.gotoAndPlay("Play");bunyi = 1;

}Komunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

41

}

Pada layer sound > klik bulatan movie clip pada stage hingga muncul properties movie clip pada bagian bawah monitor > isi instance name dengan nama sound.

Gambar 1.132 instance name pada movie clip “sound_mc”

Coba jalankan dengan menekan Ctrl+enter.Membuat Halaman Movie File > New > Flash Document > Ok. File > Save as > beri nama Movie1.fla > save.

Mengubah Warna Background Ubah nama layer 1 menjadi Movie > Klik pada stage ubah background pada

properties menjadi warna abu-abu.

Gambar 1.133 mengubah warna pada background.

File > Import > Import to Library >pilih video yang mau dimasukkan ke dalam library >open > select video > next .

Akan banyak pilihan pada import video deployment, antara lain: Progressive download from web a server, Stream from flash Video Streaming Service, Stream from Flash Communication Server, Embed Video in swf and play in time.

Progressive download from web a server : Menggunakan Flash player 7 ke atas, Progressive download menampilkan flash dengan menggunakan video streaming HTTP, Video kita akan diubah ke bentuk Flash Video File.

Stream from flash Video Streaming Service: Flash Video Streaming Service (FVSS) memungkinkan kita untuk meng-upload video ke dalam communication server yang telah kita sewa melalui jasa servirce provider dimana kita telah terdaftar. Video kita juga akan diubah ke dalam bentuk Flash Video File.


42

Stream from Flash Communication Server: Flash Communication Server memungkinkan kita untuk meng-upload video ke dalam flash commucation server yang telah kita sewa, Video kita juga akan diubah ke dalam bentuk Flash Video File beserta konfigurasinya.

Embed Video in swf and play in time: Embed Video in swf dianjurkan untuk video clip yang berdurasi pendek atau video clip yang tidak memiliki audio track. Embed Video in swf tidak mengubah video ke dalam bentuk Flash Video File.

Tidak ada perbedaan yang begitu mencolok antara Progressive download from web a server dengan Stream from flash Video Streaming Service dan Stream from Flash Communication Server. Oleh karena itu kita akan mencoba salah satunya saja yaitu Progressive download from a web server.

Gambar 1.134 tampilan import to library


43

Gambar 1.135 tampilan Select Video

Gambar 1.136 tampilan Import Video DeploymentKomunitas eLearning IlmuKomputer.ComCopyright © 2003-2007 IlmuKomputer.Com

44

Import Video ke bentuk Flash Video File File > Import > Import to Library >pilih video yang mau dimasukkan ke dalam

library >open > select video > next > Progressive download from a web server > Pilih Flash 8-Medium Quality (400kbps)> next > pilih skin yang sesuai dengan selera kita misalnya: ClearExternalAll.Swf>Next>Finish

Control + Enter untuk melihat hasilnya.

Gambar 1.137 hasil movie Progressive download from a web serverSumber:www.funnyplace.org

Embed Video in SWF and Play in time File > New > Flash Document > Ok. File > Save as > beri nama Movie.fla > save. Ubah nama layer 1 menjadi Movie > Klik pada stage ubah background pada

properties menjadi warna abu-abu. Tambahkan layer pada timeline beri nama Button.

Gambar 1.138 menambar layer “button” pada time line.


45

File > Import > Import to Library >pilih video yang mau dimasukkan ke dalam library >open > select video > next > Embed Video in SWF and Play in Time >next> Pilih Flash 8-Medium Quality (400kbps)> next >Finish

Klik Layer Movie > Window > Library > drag film yg kita import pada library misalnya “sleeky shampoo” ke atas stage. Untuk memperbesar atau memperkecil gambar movie bias dengan menggunakan Free transform tool (Q) dengan koensekuensi gambar yg diperbesar bisa tidak jelas.

Gambar 1.139 hasil movie yang dimasukan pada stage.Sumber:www.funnyplace.org

Klik Film pada stage > klik kanan > Convert to symbol > behavior movie clip > beri nama movie_mc.

Menambahkan Button Common Libraries pada Stage. Klik pada layer button > Window > others panel >common libraries > Buttons >

pilih folder circle button > drag button play, button rewind, dan button stop ke atas stage.

Gambar 1.140 penambahan butoon play, stop dan rewind.

Klik gambar film pada stage > isi instance name pada properties movie clip dengan nama “movie”.


46

Gambar 1.141 mengubah film menjadi movie clip.

Klik tombol play pada stage > tekan F9 > ketik coding:on (release) {

movie.play();}

Klik tombol stop pada stage > tekan F9 > ketik coding:on (release) {

movie.stop();}

Klik tombol rewind pada stage > tekan F9 > ketik coding:on (release) {

movie.gotoAndPlay(1);}

Pada layer button tekan F5 sepanjang frame yang ada pada layer movie.

Gambar 1.142 menambahkan blank frame dengan menekan F5. Tekan Ctrl +enter untuk melihat hasilnya.

Membuat Halaman Link File > New > Flash Document > OK > File > Save as > Link.fla > Save. Ubah nama layer dengan nama ilmukomputer.

Klik Text Tool (T) > ketikkan www.ilmukomputercom pada stage > blok tulisan www.MediaKita.com pada stage > isi URL Link pada properties dengan nama www.mediakita.com.


47

http://www.mediakita.com/

http://www.MediaKita.com/

http://www.ilmukomputercom/

Membuat Full Screen. Buka index.fla > tambah layer beri nama “full screen”. Klik frame pertama pada layer “fullscreen” > F9 > tambahkan action script:

fscommand("fullscreen",true);

Membuat Button Exit Buka index.fla > tambah layer beri nama “exit”. Klik rectangle tool > buat kotak kecil di pojok kanan atas. Beri tanda silang “X” dengan menggunakan text tool.

Gambar 1.143 Button exit

Klik frame 1 layer exit > arahkan cursor mouse ke button “exit” pada stage > klik kanan > convert to symbol > behaviour button > beri nama exit_btn.

Klik button “exit” pada stage > F9 > tambahkan action script:on (release) {

fscommand("quit", true);}

Untuk melihat hasil tekan Ctrl+enter.

Memasukan Suara Pada Button Buka index.fla > File > Import > Import to Library > cari suara yang cocok untuk

button.

Klik layer bars >klik 2x pada bulatan movie clip yang ada pada stage > Klik layer

bar menu frame ke-61 > klik ke atas stage.

Klik 2x button home yang ada pada stage > pada timeline Hit > tekan F6 > klik

window library > Drag suara yang bergambar speaker pada library ke atas stage.

Maka setiap kali tombol home di tekan akan keluar suara.


48

Gambar 1.144 insert sound pada button.

Lakukan hal yang sama pada button text, sound, movie dan link seperti halnya pada button home.

Untuk melihat hasil akhir buka index.swf.


49

Biografi Penulis

Efendy. Lahir di Jambi, 28 April 1981. Menamatkan SMU di SMU Methodist 2, Palembang pada tahun 1998. Menyelesaikan program D3 Jurusan Bahasa Inggris di STBA Methodist pada tahun 2001, S1 pada jurusan Teknik informatika dan Matematika di Universitas Bina Nusantara Jakarta pada tahun 2006.

Informasi lebih lanjut tentang penulis ini bisa didapat melalui:Email: [email protected] : efendyc


50

Materi IlmuKomputer.Comilmukomputer.org/wp-content/uploads/2008/02/pen-membuat... · Web viewScale...

Documents

Transcript of Materi IlmuKomputer.Comilmukomputer.org/wp-content/uploads/2008/02/pen-membuat... · Web viewScale...