Macro Media Flash

Tutorial Macromedia Flash- 1 -

ADI WAHANA INFORMATIKA

Membuat Presentasi Dengan Macromedia Flash1.1 Pengenalan Komponen Macromedia Flash

Gambar 1.1 Tampilan Panel Tools





Gambar 1.2 Menu Bars

Gambar 1.3 Tampilan Muka Macromedia Flash MX

Gambar 1.4 Tampilan Time Lines



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 yangcocok 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 homedi tekan akan keluar suara.

Gambar 1.144 insert sound pada button.

· Lakukan hal yang sama pada button text, sound, movie dan linkseperti halnya pada button home.

· Untuk melihat hasil akhir buka index.swf.



Gambar 1.5 Tampilan Stage

· Selection Tool (V)Selection Tool digunakan untuk menyeleksi objek menyeleksi garisdiluar objek.

Gambar 1.6 Bintik-bintik pada gambar merupakan objek yangdiseleksi.

· Subselection Tool (A)Subselection tool digunakan bukan hanya untuk menyeleksi tetapijuga untuk mengubah bentuk objek yang diseleksi.



· Pada layer button tekan F5 sepanjang frame yang ada pada layermovie.

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 padaproperties 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);

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” padastage > klik kanan > convert to symbol > behaviour button > berinama exit_btn.

· Klik button “exit” pada stage > F9 > tambahkan action script:



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

· Line Tool (N)Line tool digunakan untuk membuat garis dengan ketebalan

tertentu. Bila ingin membuat garis lurus, tekan shift kemudian mousedigerakkan untuk membuat garis.

Gambar 1.8 Pilihan ketebalan dalam membuat garis.

· Lasso Tool (L)Lasso tool digunakan untuk menyeleksi objek dengan bebas. Kitadapat membentuk pola tersendiri dalam menyeleksi objek.



· Klik Film pada stage > klik kanan > Convert to symbol > behaviormovie 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, buttonrewind, dan button stop ke atas stage.

Gambar 1.140 penambahan butoon play, stop dan rewind.

· Klik gambar film pada stage > isi instance name pada propertiesmovie 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.9 hasil seleksi menggunakan lasso tool.

· Pen Tool (P)Pen tool digunakan untuk membuat garis lurus maupun garismelengkung.

Gambar1.10 garis melengkung yang dibentuk oleh pen tool.

· Text Tool (T)Text tool digunakan untuk menuliskan huruf, kata, kalimat. Terdapattiga tipe teks yaitu static text, dynamic text dan input text. Static textmerupakan teks yang tidak dapat diubah-ubah. Dynamic textdigunakan untuk nilai yang dapat berubah-ubah, misalnya waktu,skor, dan lain-lain. Sedangkan input text digunakan untuk mengambilnilai yang dimasukan, misalnya digunakan pada form seperti username, password, dan sebagainya.

· Oval Tool (O)Oval tool digunakan untuk membuat gambar yang bulat ataulingkaran. Tekan shift jika ingin membuat lingkaran yang bulat penuh.



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 downloadfrom 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.· File > Import > Import to Library >pilih video yang mau dimasukkan

ke dalam library >open > select video > next > Embed Video in SWFand Play in Time >next> Pilih Flash 8-Medium Quality (400kbps)>next >Finish

· Klik Layer Movie > Window > Library > drag film yg kita import padalibrary misalnya “sleeky shampoo” ke atas stage. Untukmemperbesar atau memperkecil gambar movie bias denganmenggunakan Free transform tool (Q) dengan koensekuensigambar yg diperbesar bisa tidak jelas.

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



· Rectangle Tool (R)Rectangle Tool digunakan untuk membuat gambar persegi panjangatau bujur sangkar. Tekan shift untuk membuat gambar persegidengan 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 ToolSesuai dengan namanya, tool ini digunakan untuk memperbesar,memperkecil ukuran, serta mentransformasi bentuk. Ada beberapabentuk transformasi yang disediakan antara lain: skew, scale, distort,dan envelope.Skew digunakan untuk membuat objek menjadi miring baik secarahorizontal maupun vertikal. Scale digunakan untuk mengubah skalaobjek. distort digunakan untuk mengubah titik-titik yang ada padasudut objek. Envelope berfungsi sama seperti dengan distort hanyatitik-titiknya yang akan diubah lebih banyak.

· Fill Transform Tool (F)Fill transform tool digunakan untuk mengubah warna yang ada didalam, khususnya warna gradasi.

· Ink Bottle Tool (S)Ink Bottle Tool digunakan untuk mengubah warna outline pada objek.



· File > Import > Import to Library >pilih video yang mau dimasukkanke dalam library >open > select video > next .

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

· Progressive download from web a server : Menggunakan Flashplayer 7 ke atas, Progressive download menampilkan flash denganmenggunakan video streaming HTTP, Video kita akan diubah kebentuk Flash Video File.

· Stream from flash Video Streaming Service: Flash Video StreamingService (FVSS) memungkinkan kita untuk meng-upload video kedalam communication server yang telah kita sewa melalui jasaservirce provider dimana kita telah terdaftar. Video kita juga akandiubah ke dalam bentuk Flash Video File.

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

· Embed Video in swf and play in time: Embed Video in swf dianjurkanuntuk video clip yang berdurasi pendek atau video clip yang tidakmemiliki audio track. Embed Video in swf tidak mengubah videoke dalam bentuk Flash Video File.

· Tidak ada perbedaan yang begitu mencolok antara Progressivedownload from web a server dengan Stream from flash VideoStreaming Service dan Stream from Flash Communication Server.Oleh karena itu kita akan mencoba salah satunya saja yaituProgressive download from a web server.

Gambar 1.134 tampilan import to library

Gambar 1.135 tampilan Select Video



· 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 kitamengambil warna pada outline maka ink bottle tool akan aktif. Jikakita mengambil warna bagian dalam objek maka pain bucket toolakan aktif.

· Eraser Tool (E)Eraser Tool digunakan untuk menghapus baik outline maupun warnabagian dalam objek.

· Hand Tool (H)Hand tool digunakan untuk menggeser stage.

· Zoom Tool (M,Z)Zoom Tool digunakan untuk memperbesar atau memperkeciltampilan stage.

1.2 Langkah-Langkah Membuat Presentasi Flash.

Macromedia Flash merupakan software berbasis vektor yangsangat baik untuk digunakan dalam membuat slide presentasi. Kitaakan memcoba membuat suatu slide presentasi selangkah demiselangkah.



· Kembali ke scene1> klik gambar speaker > tekan F9 > ketikancoding: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 hinggamuncul properties movie clip pada bagian bawah monitor > isiinstance 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.



Membuka Program Macromedia Flash MX

Klik 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 ukurankanvas seluas 550 x 400 pixels. Untuk memperoleh tampilan yanglebih maksimal ubah size kanvas dengan cara sebagai berikut.



· Pada frame ke-5 layer 2 > tekan F6 > isi frame label padaproperties: 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;

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) > KetikON/OFF tepat di bawah gambar speaker. Kegunaan over adalah:pada saat mouse didekatkan ke button, maka akan muncul tulisanatau gambar yang kita buat.

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



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 Layer· Klik 2X layer 1, ubah nama layer 1 pada pojok kiri timeline menjadi

bars.



· Pada layer sound > Drag sound_mc dari library ke stage > klik duakali pada bulatan sound_mc yang berada di stage sehinggamuncul 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(); padaaction frame.

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.



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 terlalubanyak layer yang muncul pada timeline utama. Hal ini akanmempermudah kita dalam dalam mengatur dan megedit hasilpekerjaan 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.



· Tambah Layer pada speaker_mc > Pilih Warna gradasi hitam putihpada Fill Color > buat lingkaran pada layer 2 yang ukurannya lebihkecil dari pada lingkaran pertama > tekan Ctrl + G pada lingkaranke-2 untuk membuat group.

Gambar 1.117 membuat lingkaran kedua yg diletakan di ataslingkaran pertama.

· Tambah Layer pada speaker_mc > Pilih warna gradient pada fillcolor > buat lingkaran pada layer 3 yang ukurannya lebih kecildari pada lingkaran kedua.

Gambar 1.118 membuat lingkaran kedua yg diletakan di ataslingkaran 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 denganmenggunakan 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.



Gambar 1.15 kembali ke scene1

· Klik menu Window > Library maka akan muncul bars_mc padakanan bawah layar monitor.

Gambar 1.16 movie clip “bars_mc” pada libraryTime 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 muncultime line baru pada movie clip bars_mc.

Gambar 1.17 bulatan movie clip “bars_mc”



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



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 diubahnamanya. Beri nama bar atas dan bar bawah pada layer tersebut

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



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.



Membuang Garis Out Line· Pada frame 1 bar atas, Klik Rectangle tool > buat garis seperti

gambar di bawah ini

Gambar 1.20 Frame 1 bar atas

Gambar 1.21 Membuat garis dengan menggunakanrectangle tool.

· Klik Selection tool > Klik garis tepi pada persegi panjang yangterdapat pada kanvas > tekan delete pada keyboard sehinggagaris 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.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, variableyang akan kita panggil akan mengirimkan datanya ke parameterfunction yang kita beri nama dataArtikel.// artikel.htmlText = this.artikel hal ini menunjukkan bahwa dataartikel akan ditampilkan pada dynamic text artikel.// judul.htmlText = menunjukkan bahwa data judul akan padadynamic text judul.



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

Gambar 1.25 Memotongt garis dengan line tool.

· Dengan menggunakan selection tool (V) > kita hapus garis birupada bagian kiri berserta garis pemotongnya. Setelah itutempelkan garis biru bagian kanan ke garis bagian atas.



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 showborder around the text pada properties.

Gambar 1.109 Dynamic text dan single line.

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

Gambar 1.110 membuat judul dengan dynamic text.

· Pada layer scrollbar > Klik Text tool > properties Dynamic text > linetype diubah menjadi multiline > instance name pada propertiesdiubah menjadi artikel > klik show border around the text padaproperties.



Gambar 1.26 menempelkan hasil potongan garis ke garis bagianatas.

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 yangterakhir buat garis horizontal lagi, sehingga mengikuti garis birubagian atas.



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



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 padatext.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 padatext.txt akan naik 1 baris.



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

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

Gambar 1.30 tampilan convert to symbol movie clipbarAtas_mc.

· Begitu juga dengan bar bawah > klik kanan > Convert tosymbol > behaviour Movie Clip, Name BarBawah_mc.

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



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



Gambar 1.32 tampilan convert to symbol movie clipBarBawah_mc.

Menambah Keyframe· Klik Frame 30 pada BarAtas > tekan F6 untuk menambah

keyframe. Begitu juga dengan BarBawah, pada frame 30 > tekanF6.

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



Gambar 1.103 garis yang dipersiapkan untuk membuatscrollbar.

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

Gambar 1.104 Bagian atas dan bagian bawah

· Klik 2X pada atas_btn > tekan F6 pada timeline> over > klik 2Xpada segitiga ubah warnanya agar pada saat mouse didekatkanmaka warna segitiga akan berubah. Ubah juga warna segitigabawah_btn dengan cara yang sama.



seperti gambar di bawah ini. Letakan persis di sebelah kanan atasstage.

Gambar 1.34 Frame 1.

Gambar 1.35 memperpendek garis bagian atas dengan freetransform tools.

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



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

Gambar 1.102 gambar garis yang dibuat dengan rectangle tool.

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



Gambar 1.36 memperpendek garis bagian bawah dengan freetransform 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 “barbawah”.

Mengubah Color Properties Alpha· Pada barAtas frame1 > klik objek gambar pada stage > Ubah

Properties Color Menjadi Alpha 0%.



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 kekiri, dengan demikian posisi Home.swf yg kita panggil dapat kitaatur 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 berinama 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



Gambar 1.38 mengubah properties alpha menjadi 0%.

· Pada barAtas frame 30 > klik objek gambar pada stage > UbahProperties 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 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.



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 padastage > ketik coding action script:

on (release) {gotoAndPlay(61);

}Klik button kanan pada stage > ketik coding action script:


}

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


}Delete button kanan pada stage.



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 denganmenggunakan line tool. Untuk membuat potongan menu samabesar dan posisi gambar menjadi lebih baik, Klik View > Grid >Show Grid.



}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:


}



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. Ubahproperties Dibawah menjadi Shape.

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

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



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

Gambar 1.98 insert button kanan.

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

gotoAndPlay(61);



· Pada layer Bar menu, tambahkan key frame (F6) pada frame ke-61.tambahkan juga blank frame (F5) untuk layer bar atas dan barbawah 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 posisitulisan > 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-abudibelakangnya > klik kanan >convert to symbol > Pilih BehaviourButton > beri nama Home_btn.



Gambar 1.95 Penambahan coding action scriptpada pendahuluan_btn

Coding di atas menunjukkan bahwa pada saat tombol ditekanmaka 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.96 Penambahan coding action script stop pada frameke-19 dan frame ke-50

· Lakukan hal yang sama seperti layer pendahuluan, tetapi padalayer pembahasan objek dibuat pada frame ke-62 dan pada layeruntuk layer kesimpulan dan saran, objek dibuat pada frame ke-63. Untuk menambah objek, cukup menekan F6 pada frame yangdiinginkan.

· Usahakan koordinat X dan Y pada properties layer pendahuluan,pembahasan dan layer kesimpulan mempunyai koordinat yangsama.



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



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 F5pada 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”);}



· Pada frame ke-61 layer ActionScript1 tambahkan keyframe denganmenekan F6 pada Keyboard. Kemudian tekan F9 maka akanmuncul action frame. Ketik Stop();Dengan menggunakan action script stop(); pada frame ke-61 makaframe 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.

Gambar 1.53 menambah layer “target”.



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, clickkanan > 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 tween

Memberi nama Label· Pada layer label, frame ke-1. ketik frame label “menutup” pada

properties.



· Klik Insert > New Symbol > Behaviour Movie Clip > beri namaTarget_mc.

Gambar 1.54 insert movie clip “target_mc”.

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

Gambar 1.55 movie clip bars_mc pada stage.

· Klik layer target > klik main Menu Window > Library > Klik dan DragTarget_mc ke stage.

Gambar 1.56 movie clip “target_mc” pada stage.

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



Gambar 1.87 mengubah properties color alpha menjadi 100%.

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

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

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

Gambar 1.88 Frame ke-20

Gambar 1.89 mengubah properties color alpha menjadi 0%



Gambar 1.57 instance name movie clip “target”.

Membuat Coding Action Script Untuk Memanggil File Lain DiLuar 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 buttonditekan maka perinta berikutnya akan dijalankan.loadMovie adalah perintah untuk memangil movie lain yangberada diluar stage.Target_mc yang instance name kita beri nama target merupakanalamat atau parameter dimana movie yang dipanggil akandiletakkan. Dalam hal ini target_mc pada stage dapat kita ubahposisinya sehingga mempengaruhi letak movie yang akanmuncul di stage.



Gambar 1.85 Tampilan dari Button Pendahuluan, LatarBelakang, Tujuan, dan Manfaat

· Pada layer latar belakang, tekan F6 pada frame ke-50. Klik tulisanLatar Belakang yang berada di stage, ubah properties color menjadiAlpha 100%.

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

· Pada layer manfaat, tekan F6 pada frame ke-50. Klik tulisanManfaat yang berada di stage, ubah properties color menjadiAlpha 100%.

Gambar 1.86 penambahan keyframe pada frame ke-50



· 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) {loadMovie(“Link.swf”, “target”);

}

Gambar 1.62 button Link.



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.

· Pada layer latar belakang, frame ke-20 tekan F6. ketik tulisan LatarBelakang di atas stage dengan menggunakan text tool (T). Clickkanan, covert to symbol, pilih behaviour button dan beri namaLatarbelakang_btn.

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

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



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 > TekanCtrl+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. kemudianPerbesar gambar persegi panjang dengan menggunakan FreeTransform Tool (Q pada frame ke-30.

Gambar 1.65 Menambahkan keyframe pada frame ke-30



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



Gambar 1.66 Memperbesar garis dengan free transform tool.

· Diantara keyframe Ke-1 dan Keyframe ke-30 > Klik Kanan > CreateMotion 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.



· Klik dua kali pada bulatan pendahuluan_mc yang berada di stagesehingga 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.



Gambar 1.69 Menambahkan Keyframe pada Frame ke-31layer 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 DatangDi Dunia Flash MX” pada stage. Tekan F5 pada frame ke-60 padalayer 1.

Gambar 1.70 Text “Selamat Datang Di Dunia Flash MX”



nama Pendahuluan_mc. Terus tekan Ok. Kembali ke scene 1 di atastime line.

Gambar 1.76 Penambahan Keyframe pada frame ke-61 layerpendahuluan.

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.



· Arahkan Cursor Mouse ke Tulisan “Selamat Datang di Dunia FlashMX” > Klik kanan > pilih convert to symbol, kemudian pilihbehaviour 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, kemudianletakkan cursor mouse di antara frame ke-31 dan ke-60, klik kananpilih motion tween.

Gambar 1.72 Membuat motion tween.

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

Gambar 1.73 Membuat tulisan menjadi terbalik.



· Pilih free transform tools (Q), kecilkan ukurannya dan putar sedikitobjek 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 danaction script.

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

· Pada layer pendahuluan frame ke-61 tekan F6 untuk menambahkeyframe > , klik insert > new symbol > behaviour movie clip, beri

Macro Media Flash

Documents

Transcript of Macro Media Flash