ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA

Membuat Presentasi Dengan Macromedia Flash
1.1 Pengenalan Komponen Macromedia Flash

Gambar 1.1 Tampilan Panel Tools -1Tutorial Macromedia Flash - 66 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA on (release) { fscommand(“quit”, true); } Untuk melihat hasil tekan Ctrl+enter.

ADI WAHANA INFORMATIKA

·

Gambar 1.2 Menu Bars

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.

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.

Gambar 1.3 Tampilan Muka Macromedia Flash MX

Gambar 1.4 Tampilan Time Lines

- 65 Tutorial Macromedia Flash

-2Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA ·

ADI WAHANA INFORMATIKA 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. Gambar 1.5 Tampilan Stage · Selection Tool (V) Selection Tool digunakan untuk menyeleksi objek menyeleksi garis diluar objek.

·

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.

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); 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. 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: - 64 Tutorial Macromedia Flash

· -3Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA · 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.

ADI WAHANA INFORMATIKA

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.140 penambahan butoon play, stop dan rewind. · Klik gambar film pada stage > isi instance name pada properties movie clip dengan nama “movie”.

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); } 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.

·

·

- 63 Tutorial Macromedia Flash

-4Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA Gambar 1.136 tampilan Import Video Deployment 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 server Sumber: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. 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 - 62 Tutorial Macromedia Flash

Gambar 1.9 hasil seleksi menggunakan lasso tool. · Pen Tool (P) Pen tool digunakan untuk membuat garis lurus maupun garis melengkung.

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. -5Tutorial Macromedia Flash

·

·

ADI WAHANA INFORMATIKA · · 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. 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 Gambar 1.135 tampilan Select Video

ADI WAHANA INFORMATIKA · 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. · 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.

·

·

·

·

·

- 61 Tutorial Macromedia Flash

-6Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA · · 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.

ADI WAHANA INFORMATIKA 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; } } 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.

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.

Gambar 1.133 mengubah warna pada background.

-7Tutorial Macromedia Flash

- 60 Tutorial Macromedia Flash

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

ADI WAHANA INFORMATIKA

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

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;

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.11 Tampilan awal Macromedia Flash 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. 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.

- 59 Tutorial Macromedia Flash

-8Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA · Mengubah Size Stage / Kanvas · Klik size pada properties, kemudian ubah ukuran stage menjadi 800 X 600 pixels > Ok.

ADI WAHANA INFORMATIKA 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.

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.

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

Mengubah Nama Layer · Klik 2X layer 1, ubah nama layer 1 pada pojok kiri timeline menjadi bars. ·

Gambar 1.124 Frame ke-1 pada layer 2

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.

-9Tutorial Macromedia Flash

- 58 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA · 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. 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 ke2 pada layer 1. Gambar 1.119 menambah keyframe. Pada frame ke-2 layer 3, Perbesar Lingkaran sedikit saja dengan menggunakan Free Transform Tool (Q).

ADI WAHANA INFORMATIKA

Gambar1.13 Mengubah nama layer 1 menjadi “bars”. Membuat Symbol Movie Clip Tujuan 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.

·

·

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.14 membuat movie clip “bars_mc” Kembali ke Scene 1 · Klik Scene 1 untuk kembali ke Scene 1.

Gambar 1.120 menambah layer “sound” pada scene 1.

- 57 Tutorial Macromedia Flash

- 10 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA 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.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 library Time Line Baru Dalam Movie Clip · 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.113 mengubah nama layer 1 menjadi “speaker” Klik Insert > New Symbol >Behaviour Movie clip > beri nama speaker_mc. Klik Scene 1 untuk kembali ke Scene 1 > Klik Window > Library untuk melihat library > Klik dan drag speaker_mc ke atas Stage.

Gambar 1.17 bulatan movie clip “bars_mc” Gambar 1.114 “speaker_mc” pada windows library. · · · Klik 2 kali pada bulatan movie clip sehingga keluar timeline baru. 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.

- 11 Tutorial Macromedia Flash

- 56 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA Membuat Text.txt · Start > run > Notepad > Ok

ADI WAHANA INFORMATIKA

Gambar 1.18 timeline baru Gambar 1.112 Tampilan menu run · Ketik pada notepad tulisan sebagai berikut ini: start= &judul=Macromedia flash &artikel= Trip dan Trik Presentasi 1) Materi Presentasi 2) Waktu 3) Tempat 4) Audience (pendengar) 5) Penampilan 6) Suara 7) Body Language (bahasa tubuh) 8) Eye contact (tatapan mata) 9) Cara Penyampaian 10) Penggunaan Multimedia sebagai Alat Bantu Penyampaian. Menambah Layer · Klik gambar yang berada dibawah timeline, untuk menambah layer. Tambahkan 2 layer baru > ubah nama layerlayer 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”. - 55 Tutorial Macromedia Flash - 12 Tutorial Macromedia Flash

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

ADI WAHANA INFORMATIKA

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.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.

Gambar 1.23 Frame 1 layer bar bawah

- 13 Tutorial Macromedia Flash

- 54 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA

·

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.

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.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.25 Memotongt garis dengan line tool. 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. - 53 Tutorial Macromedia Flash · 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.

- 14 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA ·

ADI WAHANA INFORMATIKA 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.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.107 mengubah scrollbar menjadi movie clip

- 15 Tutorial Macromedia Flash

- 52 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA

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.

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++; } Pada saat bawah_btn ditekan maka artikel yang terdapat pada text.txt akan naik 1 baris.

·

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,

- 51 Tutorial Macromedia Flash

- 16 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA N a m e B a r A t a s _ m c .

ADI WAHANA INFORMATIKA

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.105 menambah keyframe pada button Gabungkan garis-garis tersebut seperti gambar di bawah ini.

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

- 17 Tutorial Macromedia Flash

- 50 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA

Gambar 1.32 tampilan convert to symbol movie clip BarBawah_mc. 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. Menambah Keyframe · Klik Frame 30 pada BarAtas > tekan F6 untuk menambah keyframe. Begitu juga dengan BarBawah, pada frame 30 > tekan F6.

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. - 49 Tutorial Macromedia Flash

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

- 18 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA seperti gambar di bawah ini. Letakan persis di sebelah kanan atas stage.

ADI WAHANA INFORMATIKA 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.34 Frame 1.

Gambar 1.102 gambar garis yang dibuat dengan rectangle tool. · Copy dan paste garis ke-2 > keluarkan fill segitiga pada garis ke3 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.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.

- 19 Tutorial Macromedia Flash

- 48 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA

·

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.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.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 - 47 Tutorial Macromedia Flash

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%. - 20 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA

Gambar 1.38 mengubah properties alpha menjadi 0%. · Pada barAtas frame 30 > klik objek gambar pada stage > Ubah Properties Color Menjadi Alpha 100%. Gambar1.99 Insert button kiri Untuk 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.

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 Sementara · 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.

·

- 21 Tutorial Macromedia Flash

- 46 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA } 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); }

ADI WAHANA INFORMATIKA

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.

- 45 Tutorial Macromedia Flash

- 22 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA ·

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

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.

Gambar 1.97 Frame ke-60, 61 dan 62 Menambahakan 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.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.98 insert button kanan. Gambar 1.45 memperkecil ukuran dengan menggunakan free transform tool. · Klik button yang ada pada stage, ketik coding berikut ini: on (release) { gotoAndPlay(61); - 44 Tutorial Macromedia Flash

- 23 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA ·

ADI WAHANA INFORMATIKA 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.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(); 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.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 ke63. 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.

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.

- 43 Tutorial Macromedia Flash

- 24 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA

Gambar 1.48 Text Home dan back ground dibelakangnya. Gambar 1.92 memberikan nama lebel “menutup”

Gambar 1.49 mengubah text dan background menjadi Button. · Begitu juga dengan tulisan Text, Sound, Movie, Link. Masingmasing diubah menjadi button dengan nama: Text_btn, Sound_btn, Movie_btn, Link_btn. · Tambahkan layer baru, beri nama ActionScript1.

·

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.50 menambah layer baru “action script”.

Gambar 1.94 Frame ke-20 Klik tulisan pendahuluan pada stage, tekan F9. ketik coding action script: on (press) { gotoAndPlay(“Membuka”); } - 42 Tutorial Macromedia Flash

- 25 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA ·

ADI WAHANA INFORMATIKA 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.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.52 tampilan dari action frame. · Tambahkan layer kemudian beri nama target.

Gambar 1.51 Frame ke-61 pada layer ActionScript.

·

·

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

Gambar 1.53 menambah layer “target”. - 41 Tutorial Macromedia Flash - 26 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA · Klik Insert > New Symbol > Behaviour Movie Clip > beri nama Target_mc.

ADI WAHANA INFORMATIKA

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. 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.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.88 Frame ke-20 Gambar 1.56 movie clip “target_mc” pada stage. · Klik bulatan movie clip target_mc pada stage > Instance name pada properties diberi nama: target. Gambar 1.89 mengubah properties color alpha menjadi 0%

- 27 Tutorial Macromedia Flash

- 40 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA

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.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.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.

Gambar 1.86 penambahan keyframe pada frame ke-50

- 39 Tutorial Macromedia Flash

- 28 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA · Klik Button Text > F9 > ketikan coding action Script: on (release) { loadMovie(“Text.swf”, “target”); }

ADI WAHANA INFORMATIKA

·

Gambar 1.59 button Text. Klik Button Sound > F9 > ketikan coding action Script: on (release) { loadMovie(“Sound.swf”, “target”); }

Gambar 1.83 mengubah text “Pendahuluan” menjadi Button. · Tekan F5 pada frame ke-50 layer pendahuluan.

·

Gambar 1.60 button Sound. Klik Button Movie > F9 > ketikan coding action Script: on (release) { loadMovie(“Movie.swf”, “target”); }

Gambar 1.84 menambah blank frame pada frame ke-50. · 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.61 button Movie. Klik Button Link > F9 > ketikan coding action Script: on (release) { loadMovie(“Link.swf”, “target”); }

·

· Gambar 1.62 button Link.

- 29 Tutorial Macromedia Flash

- 38 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA

ADI WAHANA INFORMATIKA Membuat Halaman Home · Klik Menu File > New >Flash Document > OK. · Klik Menu File> Save as dengan nama Home.fla Menghilangkan 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.81 layer-layer pada movie clip “pendahuluan_mc”. · Pada layer pendahuluan, klik Text tool (T), kemudian Ketik “Pendahuluan” di atas stage. ·

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.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.65 Menambahkan keyframe pada frame ke-30

- 37 Tutorial Macromedia Flash

- 30 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA ·

ADI WAHANA INFORMATIKA Klik dua kali pada bulatan pendahuluan_mc yang berada di stage sehingga terlihat ada time line yang baru.

Gambar 1.66 Memperbesar garis dengan free transform tool. · 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.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.

·

·

Gambar 1.68 Layer selamat datang kemudian letakkan cursor mouse pada frame ke-31 pada layer selamat datang > tekan F6 untuk menambahkan objek. - 31 Tutorial Macromedia Flash - 36 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA nama Pendahuluan_mc. Terus tekan Ok. Kembali ke scene 1 di atas time line.

ADI WAHANA INFORMATIKA

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

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.

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.70 Text “Selamat Datang Di Dunia Flash MX” Gambar 1.79 Bulatan movie clip pendahuan_mc pada stage. - 35 Tutorial Macromedia Flash - 32 Tutorial Macromedia Flash

ADI WAHANA INFORMATIKA · 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. ·

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

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.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.72 Membuat motion tween. · Klik frame ke-31 pada layer selamat datang pilih modify pada menu bars > transform > flip horizontal. Gambar 1.75 penambahan layer pendahuluan, pembahasan, kesimpulan, button dan action script. · Gambar 1.73 Membuat tulisan menjadi terbalik. - 33 Tutorial Macromedia Flash Pada layer pendahuluan frame ke-61 tekan F6 untuk menambah keyframe > , klik insert > new symbol > behaviour movie clip, beri - 34 Tutorial Macromedia Flash

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.