You are on page 1of 66

POKOK BAHASAN FLASH MX
Pernakah anda melihat sebuah gambar bergerak di sebuah halama web site, atau filem
kartun dan animasi di televisi. Mungkin anda akan bertanya tanya bagaimana cara

-

Spesifikasi Minimum

-

Instalasi Aplikasi Flash MX

Dalam buku Membuat Web design dengan cepat ini penulis akan menjelaskan step by

-

Pengenalan Komponen Flash MX

step mulai dari aplikasi aplikasi apa saja yang dibutuhkan untuk membuat sebuah

-

Dasar Dasar Menggambar Objek pada Flash MX

website kreasi anda sendiri. Aplikasi yang digunakan adalah Flash MX, Dreamweafer

-

Dasar Dasar pewarnaan Objek pada Flash MX

MX, Photoshop, dan Image Ready. Flash MX dan Dreamweafer MX merupakan

-

Metode pembuatan Animasi

keluarga dari Macromedia. Sedangkan Photoshop dan Image Ready keluarga dari

-

Membuat Animasi

membuat animasi tersebut.

Adobe.
Pada bab awal ini penulis akan menjelaskan tetang Flash MX, dengan menggunakan
aplikasi Flash kita bisa mengengmbangkan imajinasi kita tetang dunia animasi
sederhana.

1.

2.

SPESIFIKASI MINIMUM

-

Next

-

Yes

Spesifikasi minimum Hardware dan Software yang dibutuhkan untuk menginstal
Flash MX adalah sebagai berikut
Hardware/Perangkat Keras
1. Intel Pentium III 800 MHz
2. 128 Mb Ram (256 dianjurkan)
3. 500 Mb Disk Space
4. CD Room / DVD Room Drive
5. Monitor dengan warna 16 bit dan mampu resolusi sebesar 1024x768
Software (OS)

-

Windows ME, Windows 2000, Windows XP, Windows Vista,
Windows Seven

INSTALLASI FLASH MX

-

3.

Cari letak file Installler Flash MX , dobel klik pada setup

4.

- Next - Biarkan Proses Instalasi hingga 100% .- - 5. Next Next 6.

. Di bawah ini merupakan Layar utama dari Flash MX. masukan serial number : WSW600-59791-91721-99978CD Di bawah ini merupakan keterangan dari kegunaan masing-masing komponen Flash MX secara detail: 7. 8. - Catatan jika saat proses instalasi meminta memasukan serial number.- Finish PENGENALAN KOMPONEN FLASH MX Sebelum memulai membuat animasi anda harus mengenal dulu komponen apa saja yang digunakan dalam proses pembuatan animasi. anda harus mengetahui semua komponen dari flash mx unutk mempermudah dalam pembuatan animasi di flash MX.

Penjelasan dari Tools Box Arrow Tool Tool ini digunakan untuk memilih suatu objek atau untuk memindahkannya. . C. Pen Tool Tool yang digunakan untuk menggambar dan merubah bentuk suatu objek dengan menggunakan edit points (lebih teliti & akurat). Text Tool Tool ini digunakan untuk menuliskan kalimat atau kata-kata. Line Tool Tool ini digunakan untuk membuat suatu garis di stage.A. Lasso Tool Tool ini digunakan untuk memilih daerah di objek yang akan diedit. Timeline. 10. Tools Box. Stage. 9. Subselection Tool Tool ini digunakan untuk merubah suatu objek dengan edit points. merupakan tempat dimana Anda bekerja dalam membuat sebuah animasi. berisi alat-alat yang digunakan untuk menggambar objek pada stage. digunakan untuk mengatur dan mengontrol isi keseluruhan movie Anda B.

Penjelasan dari Color Box 1 Pencil Tool Tool ini digunakan untuk menggambar sebuah objek sesuai dengan yang Anda sukai. Fill Transform Tool Tools ini digunakan untuk memutar suatu objek yang diimport dari luar lingkungan Flash MX. digunakan untuk menggerakkan suatu tampilan objek pada stage tanpa merubah posisi objek tersebut pada stage. Rectangle Tool Tool yang digunakan untuk menggambar sebuah segiempat. Eraser Tool Tool ini digunakan untuk menghapus objek yang Anda bentuk. digunakan untuk menukar warna objek(FillColor) dengan warna border / garis(StrokeColor). 12. 11. Fill Color. . digunakan untuk memberi warna objek dan warna border / Ink Bottle Tool Tool ini digunakan untuk mengisi warna pada objek yang bordernya telah hilang (tidakada). Swap Colors. digunakan untuk memberi warna objek. 2 Brush Tool Tool ini sering digunakan untuk memberi warna pada objek bebas. 1. 2. Penjelasan dari View Box: Paint Bucket Tool Tool ini digunakan untuk mengisi warna pada objek yang dipilih.Oval Tool Tool yang digunakan untuk menggambar sebuah lingkaran. garis dengan warna hitamputih. 3. Zoom Tool. digunakan untuk memperbesar tampilan objek pada stage. digunakan untuk memberi warna pada garis /border objek.Tetapi setiap bentuk yang Anda buat akan diformat oleh Flash MX menjadi bentuk sempurna. serta untuk mengatur efek warna. 4 3 Penjelasan : Free Transform Tool Tool ini digunakan untuk memutar (rotate) objek yang Anda buat atau mengubah bentuk objek menjadi bentuk lain. 4. Black & White. Hand Tool. Stroke Color.

D. digunakan untuk memberi warna pada objek yang Anda objek yang Anda buat. Radial. Color Mixer. Properties. Color Window E. buat sesuai dengan yang warna pada window. Linear. 13. Solid. Color Swatches. 14. Actions – Frame. Ada 5 pilihan tipe warna. Biasanya Action Script digunakan untuk mengendalikan objek yang Anda buat sesuai dengan keinginan Anda Color Window terdiri dari: a. F. Bitmap. Merupakan window yang digunakan untuk mengatur warna pada objekyang Merupakan window yang digunakan untuk menuliskan Action Script untuk Anda buat Flash MX. yaitu: None. . digunakan untuk mengatur warna pada objek sesuai dengan keinginan Anda. merupakan window yang digunakan untuk mengatur property dari b.

Outlain merupakan bagian terluar / garis tepi sedangkan fill merupakan bagian dalam / background objek yang bisa diberi warna. diantaranya Designer Default Layout. Designer [1024x768]. kemudian di grup menjadi satu dengan perintah grup (CTRL + G). Fill Outtline dan fill dapat disatukan dengan cara dobel klik/ klik dua kali pada objek. Outline dan Fill. Components. Developer [1024x768]. Tetapi kali ini kita akan menggunakan window Default Layout. Developer[1600x1200]. Untuk merubah window layout Anda dapat membukanya melalui menu Window lalu pilih Panel sets. Oval Tool digunkan untuk menggambar objek lingkaran dan Rectangel Tool digunkan untuk menggambar objek kotak. karena semua tools dan window standart yang kita butuhkan untuk membuat sebuah animasi ada disini semua. Kedua Objek tersebut Oval dan rectangel memiliki dua bagian yaitu . bisa juga dengan cara menyeleksi objek. 15.G. Pengetahuan Dasar Objek Pada Flash MX Untuk menggambar di Flash MX banyak cara yang dapat digunakan diantaranya dengan Oval Tool dan Rectangel Tool. . 16. Flash MX memiliki banyak window layout dalam pembuatan animasi. Designer [1280x1024]. digunakan untuk menambahkan objek untuk web application DASAR DASAR MENGGAMBAR OBJEK PADA FLASH MX yang nantinya di publish ke internet. Tool ini merupakan bawaan dari Flash MX. Developer [1280x1024]. Outline Windows diatasmerupakan windows windows yang digunakan dalam pembuatan animasi secara windows default layout. Designer [1600x1200].

Anda tinggal menentukan posisi dari edit points yang Anda inginkan Edit Point 17. bukan outlinenya. perbedaannya pengeditan bentuk objek dilakukan dengan menggeser Edit Point yang ada pada objek.Merubah Bentuk Objek Dengan Arrow Tool Menggambar dengan Pencil Tool Dalam membuat sebuah objek. Untuk mengubah sebuah bentuk di Flash MX dapat dilakukan dengan menggunakan Arrow Tool (V). Untuk menggambar sebuah objek. . yaitu pencil tool. dengan Arrow Tool anda dapat mengubah bentuk dengan menggerakkan Outline / garis tepi objek Outline Merubah Bentuk Objek dengan Subselection Tool Straighten Smooth Ink : Hasil objek dari straighten akan berbetuk bujur sangkar yang rapi : Hasil objek dari smooth akan berbentuk smothing tampak halus tanpa ada sudut lancip : Hasil objek dari ink akan berntuk kasar pada outlinenya/garisnya Subselection fungsi nya hampir sama dengan Arrow Tool. Anda dapat menggunakan tool yang terdapat pada Tools box. 18. Edit Point Menggambar dengan Pen Tool Pen tool biasanya digunakan untuk menggambar objek dengan metode edit points.

None : Tidak memberi Warna Apapun pada fill 2. Memberi warna dengan Color Mixer & Color Swatches Pengaturan Warna Pengaturan Transparan Keberhasilan sebuah animasi tak terlepas dari komposisi warna yang baik. b. sedangkan untuk mengganti warna outline digunakan tool Ink Bottle Tool . jika hanya memberikan warna solid maka animasi yang dibuat terasa kurang menarik Tipe Fill Brightness Warna 5 Macam Type Fill pada Color Mixer: 1. Color Mixer. c. 20. e. Paint Bucket Tools. f. Fill Transform Tools. Solid : Memberikan warna padat pada fill 3. Linier : Memberikan warna gradiasi linier pada fill 4. Color Swatches. Klik objek yang akan diatur warnanya. Radial : Memberikan warna gradiasi radial pada fill 5. Aktifkan Fill Transform Tool dari Tool Box b. diantaranya: a. Bitmap :Memberikan image pada fill 19. pewarnaan dalam Flash Mx dapat dilakukan dengan beberapa Tool. Brush Tools. d. (Untuk mengatur efek warna radial) Untuk memberikan warna pada objek anda harus menggunakan tool Paint Bucket Tool Pain Bucket Tool hanya memberi warna pada fill. . geser edit point sampai letak yang diingnkan tercapai.Dasar – Dasar Pewarnaan Objek Pada Flash MX Pewarnaan sangat penting pada sebuah pembuatan animasi. Ink Bottle Tools. Mengatur Tata Letak Warna Pada Objek Untuk mengatur tata letak warna pada objek menggunakan Fiil Transform Tool Cara menggunakan Fiil Transform Tool yaitu a.

Kemudian dengan menggunakan Eraser Tool. b. Perlu diingat sebelum menghapus objek tambahkan Insert Keyframe terlebih dahulu pada Timeline. dari Rectangle Tool 21. Klik kanan pada Frame ke 2 pilih insert keyframe / F6 pada Keyboard d.Metode Pembuatan Animasi c. Untuk mengexport movie dari file pilih Export Movie Export Movie digunakan untuk mengubah file flash menjadi swf. Lakukan hal serupa untuk menghapus bagian lain dari Rectangle Tool. Buat sebuah objek Rectangle Tool pada Stage/Lembar Kerja. Frame by Frame Animation Frame by Frame Animation merupakan tehnik membuat animasi pada Flash MX berdasarkan peletakan frame pada timeline. 1. . Hapus perlahan lahan hingga Objek habis. dari file pilih save (CTRL + s) f. Untuk menyimpan file . Untuk melihat hasilnya tekan CTRL + Enter e. sehingga bisa dibuka di macromedia hapuslah sebagian 22. - Untuk membuat Animasi dengan tehnik frame by Frame sangat mudah Animasi Frame by Frame 1 a.

Ubah posisi Objek dari kiri ke kanan Frame Metode Tweened Animation adalah metode pembuatan animasi yang memanfaatkan fasilitas motion dari Flash MX. . Buat Sebuah Oval tool pada lembar kerja. Tweened animation berbeda dengan frame by frame. Tweened Animation b. 24. lakukan lagi sehingga posisi objek kembali ke posisi awal Animasi Frame by Frame 2 a. Klik kanan pada Frame ke 10 pilih insert keyframe / F6 pada Keyboard Frame Frame 1 dan 40 10 Ubah Posisi Objek 30 20 2. Klik kanan pada Frame 20 ubah posisi objek dari Atas ke bawah. Ubah Posisi Objek 23. pergerakan di tweened animation akan lebih halus dibandingkan frame by frame. Frame 1 10 Tanda bahwa objek tersebut menggunakan Tweened animation adalah tanda panah pada time line.- c.

ubah nama layer 1 dengan lingkaran bila berhasil warna abu abu akan berubah menjadi garis putus putus e. a. Siapkan Objek Lingkaran pada lembar kerja dengan cara klik icon oval tool pada Tool Box b. c. 26. Klik kanan pada frame 30 pilih insert frame Klik Kanan 25. Klik kanan diantara Frame 1 – 30 . Klik kanan pada frame 30 pilih Insert Key frame.d. dengan cara dobel klik pada tulisan layer 1. . pilih Create Motion Tween Untuk membuat animasi Tweened Animation sangat mudah. Ubah nama layer untuk mempermudah pengerjaan .

Tekan CTRL + Enter untuk melihat hasil animasi l. frame akan berubah otomatis menjadi panah b. Setelah menambahkan Key Frame. Ubah nama layer1 28. pada lembar kerja. ubah posisi objek. Buat Sebuah Oval tool menjadi lingkaran i. Bila berhasil garis putus putus akan berubah menjadi panah j.f. Aktifkan frame 60. Untuk menyimpan file . . a. ubah posisi objek bergeser kesebelah kanan Frame Frame 1 30 Ubah Posisi Objek h. ulangi langkah langkah tersebut sampai objek berputar Frame 1dan Frame 120 Frame30 Frame 90 Frame 60 g. Untuk mengexport movie dari file pilih Export Movie 3. Klik icon Add Motion Guide diatas layer lingkaran akan keluar sebuah layer baru Guide: lingkaran Add Motion Guide 27. add motion guide akan membuat objek bergerak sesuai dengan lintasan yang kita buat. Klik frame 30 (frame aktif di frame 30). dari file pilih save (CTRL + s) m. Add Motion Guide Add motion guide merupakan fasiltas yang diberikan oleh Flash MX dalam pembuatan animasi. semakin pendek frame semkain cepat pergerakan animasi) k. Klik kanan pada frame 60 pilih Insert Key Frame (semakin Panjang Frame semakin lama pergerakan animasi.

buat sebuah objek kotak. pencil tool. Aktifkan frame 30 Layer Lingkaran. Aktifkan Layer Guide:lingkaran. Tekan CTRL + ENTER untuk melihat hasilnya. brush tool h. 30.Contoh : gambar posisi objek Frame 1 Frame 30 Tampak Layer Guide: lingkaran berada di atas layer lingkaran c. Aktifkan Frame 1 layer lingkaran. setelah di simpan Export Movie 4. klik kanan diantara frame 1 sampai 30 pilih Create Motion Tween e. klik kanan pada frame 20 pilih insert key frame. buat objek lingkaran dan hapus objek kotak. 29. aktifkan frame 30 layer lingkaran ubah posisi objek di ujung satunya lagi. Klik kanan pilih Insert Frame. Aktifkan pada frame 30 layer lingkaran. Aktifkan frame 30 layer Guide:lingkaran. . klik kanan pilih Insert Frame g. buat Pergerakan objek / lintasan objek bisa dengan pen tool. Contoh : i. klik kanan pilih Insert Key Frame f. klik kanan pada frame 30. Motion Shape a. ubah posisi objek kesalah satu ujung lintasan yang tadi sudah kita buat. Simpan File. Buat lembar kerja baru. pilih insert frame Lintasan ini di buat dengan Pen Tool d. line tool.

Properties ubah None pada Tween menjadi Shape Klik kanan pilih Insert keyframe Ubah menjadi Shape Tekan CTRL + Enter untuk melihat hasilnya Objek kotak Telah di hapus 5. ubah layer1 dengan mobil b. . c. Untuk lebih jelasnya lagi kita langsung membuat sebuah animasi mobil yang bannya berputar a. Convert To Symbol (Movie) Dengan fasilitas convert to symbol pada flash mx kita bisa membuat animasi di dalam animasi.Klik diantara frame 1 – frame 20. Insert frame 31. klik kanan pilih Convert To Symbol atau tekan F8 pada keyboard 32. Seleksi lingkaran. Buat lembar kerja baru. Buat sebuah objek lingkaran seperti disamping Klik kanan pada Frame 30.

akan keluar mobil disebelah Scane 1 h. dan pada Name isikan mobil (menyesuaikan dengan objek) . klik kanan pilih Paste Frame. Sebuah menu Convert to Symbol akan keluar. pastikan pada Behavior pilih Movie Clip. Ubah Layer 1 menjadi ban. Tambah kan layer baru. Layer ban Frame 1 . ubah posisi layer body menjadi paling bawah dengan klik tahan geser kebawah) . Setelah itu tekan Enter. f. Geser Objek kesebelah kiri atau kanan Insert Layer (Menambahkan Layer) e. g.d. buat body mobil sesuai dengan kreasi anda. klik kanan pada frame1 layer ban2. (Jika Objek Body menutupi ban. Dobel Klik / Klik 2 Kali pada Objek Lingkaran yang tadi kita buat. Tambahkan satu buah layer lagi ubah menjadi body. Klik kanan pilih Copy Frame. aktifkan Frame 1 layer ban (Titik Hitam pada Frame 1). ubah layer 2 menjadi ban2.

Lakukan Insert Key Frame setiap melakukan perubahan perputaran.Klik kanan di antara Frame 1 – 20 layer ban. Klik kanan pada frame 20 layer mobil. Pada frame 5. pilih Cerate Motion Tween. - Klik kanan pada objek pilih Rotate and Skew - Putar Objek seperti gambar A Layer body Layer ban i. Layer ban2 Selanjutnya kita akan buat pergerakan ban mobilnya. pilih Insert Key Frame. 15 dan 20) . Putar Objek Menggunakan Rotate seperti tampak pada gambar Langkah pergerakan ban . 10. Frame 15 Frame 10 (Gambar A. pilih Insert Frame.Aktifkan Layer ban . lakukan untuk layer ban dan ban2 Frame 5 Frame 1 & 20 j.- Klik kanan pada Frame 5 layer ban.

klik kanan pada frame 30 pilih insert keyframe. buat objek lampu - - Klik kanan pada Frame 20 layer lampu pilih Insert Frame pada layer lampu Insert Key Frame pada frame 5. ubah posisi mobil dari kiri kenan atau sebaliknya contoh: - 6. pilih insert frame. Buat lembar kerja baru. dan Name isi dengan hantu. Klik dua kali pada objek. - Aktifkan frame 30 layer mobil. Seleksi Objek Klik kanan pilih Convert To Symbol Pastikan Behavior aktif pada Movie Clip. Buat pergerakan mobil dari kiri ke kanan . lalu tekan CTRL + Enter untuk melihat hasilnya Layer Lampu k. ubah layer 1 menjadi hantu. b. klik Scane 1 untuk kembali ke lembar kerja - Tambahkan layer ubah layer menjadi lampu. Enter d. Tekan CTRL + ENTER untuk melihat hasil nya. pastikan lembar kerja aktif pada hantu . 10. 15 layer lampu Aktifkan frame 5 ubah warna lampu. klik kanan diantara frame 1 – 30 pilih Create Motion Tween. Jangan lupa untuk menyimpan file Membuat Efek lampu .Pastikan lembar kerja aktif pada mobil a. Latihan Animasi 1 Frame 30 Frame 1 Lembar Kerja l.Klik kanan pada frame 30 layer mobil. Buat objek hantu sesuai kreasi anda c.Klik dua kali pada objek mobil .- Ulangi langkah diatas untuk layer ban2 Save File. lakukan Untuk frame 10 dan 15 Save lembar kerja - Klik scane 1.

aktifkan icon Arrow Tool Dekatkan cursor ke objek tali hingga icon cursor berubah menjadi seperti disamping. ubah posisi hantu lebih kebawah lagi dan pendekan ukuran hantu dengan cara Klik kanan pada objek hantu pilih free transform. Klik tahan tarik hingga posisi tali sesuai dengan yang kita inginkan. Klik kanan pada frame 3 layer tali pilih insert keyframe.e. tambahkan satu layer lagi ubah menjadi layer tali. Untuk melengkungkan tali. Klik kanan pada frame 2 layer tali pilih insert key frame. ubah tali menjadi melengkung mengikuti posisi objek hantu. Objek hantu pada layer hantu Objek Tali pada layer tali i. ubah posisi tali menyesuaikan dengan objek hantu . j. Ubah layer 1 menjadi hantu. Klik kanan pada frame 3 layer hantu pilih insert key frame. buat objek tali menggunakan pen tool di layer tali f. ubah posisi hantu sedikit kebawah Posisi Awal (Frame 1) Layer Tali Posisi baru (Frame 2) Layer Hantu g. h. Klik kanan pada layer hantu pilih insert key frame.

Pada frame 5 klik kanan pilih insert frame (semua layer. klik kanan pilih copy frame. ubah bentuk tali seperti di bawah ini . copy frame 1 layer tali. paste frame pada frame 6 layer tali m. ubah posisi objek keatas Posisi Baru (Frame 7) Posisi Awal (Frame 6) k. Klik kanan pada frame 7 layer hantu pilih insert key frame. Aktifkan frame 1 layer hantu. layer tali dan layer hantu) n.l. Klik kanan pada frame 7 layer hantu pilih insert key frame. klik kanan di frame 6 layer hantu. Pilih paste frame. lakukan untuk layer tali.

Tambahkan 1 buah layer. Tambahkan satu buah layer lagi. 42. Posisikan objek kotak menutupi text f. buat objek dengan menggunakan Rectangle Tool dan Oval Tool.o. Latihan Animasi 2 a. r. Posisikan Objek laser di pinggir objek kotak h. ubah layer 1 menjadi layer text b. ubah posisi objek hantu lebih keatas lagi. Insert Frame Pada Frame 30 Semua Layer . Siapkan lembar kerja. q. Klik kanan di frame 8 layer hantu. ubah menjadi layer kotak d. 7. ubah layer menjadi laser. Klik kanan di frame 8 layer tali. c. seperti gambar di bawah ini. Klik kanan pada frame 11 pilih insert frame (kedua layer) tekan Ctrl + Enter untuk melihat hasilnya. Lakukan hal serupa untuk layer tali. dan beri warna hitam (Ukuran Kotak sebesar ukuran panjang text) 41. Sekarang kita buat pergerakannya. Buat sebuah objek kotak dengan Rectangle Tool. p. . ubah posisi objek hantu lebih keatas lagi. Buat sebuah objek tulisan dengan menggunakan Taxt Tool g. ubah posisi tali tampak seperti gambar di bawah ini e. Klik kanan lagi pada frame 9 layer hantu.

i.

Klik kanan di antara frame 1 – frame 30 Layer Kotak, klik kanan pilih
Create Motion Tween. Klik kanan pada frame 30 layer kotak, pilih Insert
KeyFrame . Ubah posisi objek kotak kesebelah kanan

j.

Klik kanan di antara frame 1 – frame 30 Layer Laser, klik kanan pilih
Create Motion Tween. Klik kanan pada frame 30 Layer Laser, pilih
Insert KeyFrame . Ubah posisi objek Laser kesebelah kanan

l.

Tekan CTRL + Enter untuk melihat hasilnya

8. Latihan Animasi 3
a. Siapkan Lembar Kerja baru, ubah layer 1 menjadi layer Text
b. Buat sebuah objek text dengan menggunakan Text Tool
k. Dari menu Modify, pilih Document (CTRL + J), ubah Background Color
menjadi Hitam.

c. Tambahkan satu buah layer , ubah layer menjadi lingkaran, buat sebuah
lingkaran dan letakan di depan objek text.

f.

Tambahkan layer , ubah menjadi Text1

d. Insert frame pada frame 30 semua Layer.
g. Aktifkan layer text, klik kanan pilih Copy Frame.

e. Klik kanan diantara Frame 1 – Frame 30 Layer Lingkaran, pilih Create
Motion Tween. Klik kanan di Frame 30 Layer Lingkaran pilih Insert
Keyframe, ubah posisi objek lingkaran

h. Aktifkan layer Text1, klik kanan pilih Paste Frame

i.

Aktifkan layer Text1, Edit Objek Text dengan Text Tool, ubah warna dan
textnya menjadi DCC LAMPUNG

k. Klik kanan pada Layer Lingkaran1, pilih Mask

l.

Tekan CTRL + Enter untuk melihat hasilnya

9. Latihan Animasi 4
a. Buka lembar kerja baru, ubah layer1 menjadi Balon, buat objek Balon
tampak seperti gambar dibawah

j.

Tambahkan satu buah layer, ubah menjadi Lingkaran1, aktifkan layer
Lingkaran. Klik kanan pilih Copy Frames. Aktifkan layer Lingkaran1, klik
kanan pilih Paste Frames

Klik kanan pada Frame 2. pilih Insert Key Frame. Pada Name isikan Balon dan pastikan pada Behavior aktif di Movie Clip. Klik kanan pilih Convert Symbol.b. dan geser sehingga tampak seperti gambar di bawah ini Lasso Tool . Seleksi Objek Balon. pastikan aktif pada scane Balon c. Aktifkan Lasso Tool (L) seleksi bagian pada balon kecil kecil. Ok Dobel Klik pada objek balon.

Pilih Insert Blank Key Frame . Tampak seperti gambar di bawah ini Eraser Tool f. pilih Insert key Frame. Gunakan Lasso Tool kembali untuk memindahkan potongan objek balon semakin jauh dan di kurangi dengan cara menghapus dengan Eraser Tool (E).d. Klik kanan pada Frame3. Klik kanan pada Frame4. Tampak seperti gambar di bawah ini e. Gunakan Lasso Tool kembali untuk memindahkan potongan objek balon semakin jauh dan di kurangi dengan cara menghapus dengan Eraser Tool (E). Klik kanan kembali pada frame 5. pilih Insert Key Frame.

Klik kanan lagi pilih Actions. pada tab actions g. Pilih Insert Blank Keyframe. pada tab actions Frame 5 Layer 2 View Options . pilih Actions. Ketikkan stop(). klik kanan pada frame1 layer2. Pada tab Action . pilih View Option Pilih Expert Mode Ketikkan stop(). Klik kanan pada frame 5 layer 2.Tambahkan satu layer baru.

h. pilih actions. pada Properties.hitTest(_root. balon i. Klik Scane 1 Instance Name Layer Baru (Layer duri) Aktifkan objek balon.balon. pada Properties. Klik kanan pada objek duri.duri.balon) { gotoAndPlay(2). Buat objek duri seperti gambar dibawah ini Seleksi objek duri klik kanan pilih convert to symbol. } with (_root) { gotoAndStop(5). Ok Aktifkan objek duri.balon)) { with (_root. Pada Name isikan duri dan pastikan pada Behavior aktif di Movie Clip. tambahkan layer ubah menjadi layer duri. ketikan pada Instance Name. ketikan pada Instance Name. duri. Kembali ke lembar kerja awal. Ketikan onClipEvent (enterFrame) { if (_root. Klik Scane 1. } } } Objek duri } (Rumus ini bersifat case sensitif) ._currentframe==1) { if (_root.

Tambahkan satu buah layer lagi ubah layer menjadi rumus. Klik kanan pada frame 4 layer rumus. Klik kanan pada frame 5 layer tombol. Check Syntax Ketikan rumus seperti di bawah ini pada tab Actions startDrag("duri". ubah menjadi tombol. jika peringatan yang keluar “This script contains no errors”. pilih Insert Key Frame Frame 5 Layer tombol . klik kanan pada frame 1 layer rumus. Mouse. pilih Insert Blank Keyframe.hide(). pilih actions. true). klik kana pilih actions dan ketikkan rumus stop(). k. berarti rumus tersebut sudh benar. Insert frame pada frame 5 semua layer Tambahkan satu buah layer baru .Untuk melakukan pengecekan terhadap rumus klik icon Check Syntax. l. j.

Dari Window pilih Common Libraries pilih Buttons Dobel klik pada Name Tombol. Klik tahan tarik ke lembar kerja Klik tahan tarik ke lembar kerja Dobel Klik . pilih salah satu tombol.

Klik kanan pada objek tombol. Tekan CTRL + Enter untuk melihat hasilnya - Spesifikasi Minimum - Instalasi Aplikasi Dreamweaver MX - Memulai Dreamweaver MX - Tampilan Dreamweaver MX - Pengenalan Toolbar Dreamweaver MX - Membuat Layout Web . pilih actions dan ketikan rumus Dream Weaver MX on (release) { with (_root. } m.balon) { POKOK BAHASAN Dreamweaver MX gotoAndStop(1). } gotoAndPlay(1).

Windows 2000. CD Room / DVD Room Drive 5. anda bisa mengubah tampilan menjadi 3 yaitu: Show Code View. Windows XP. anda tinggal mencari Setup program Dreamweaver MX. Windows Seven INSTALLASI DREAMWEAVER MX Proses penginstalan aplikasi dreamweaver mx tidak jauh berbeda dengan Flash MX. Monitor dengan warna 16 bit dan mampu resolusi sebesar 1024x768 Software (OS) - Windows ME. Show Design View . 256 Mb Ram (512 dianjurkan) 3. 500 Mb Disk Space 4. dan dobel klik pada file Setupnya. Intel Pentium III 800 MHz 2.Spesifikasi minimum Hardware dan Software yang dibutuhkan untuk menginstal MEMULAI DREAMWEAVER MX Dreamweaver MX adalah sebagai berikut Hardware/Perangkat Keras Jika anda baru pertamakali menjalankan aplikasi ini akan keluar sebuah menu Workspace Setup . Aktifkan pada Dreamweaver MX Workspace 1. TAMPILAN DREAMWEAVER MX Pada Dreamweaver MX. Untuk langkah selanjutnya sama dengan langkah pada penginstalan Flash Mx yang telah di bahas sebelumnya. Show Code and Design View. Windows Vista.

atau apa saja. tanpa benarbenar muncul pada halaman web. 12. ketika kursor mouse digerakkan pada gambar maka gambar akan berubah. 16. Ini merupakan pixel kosong yang bisa digunakan untuk berbagai hal. dan ini akan dimasukkan ke halaman. anda akan bisa memasukkannya ke dalam halaman Dreamweaver MX dengan menggunakan tool ini. Tag Chooser: Memasukkan spesifik HTML tag dari daftar. Email Link: Email link mengijinkan pengunjung situs mengirimkan seseorang email dengan mengklik pada special link. Draw Layer: Layer bisa membantu ketika mendesain layout untuk halaman. Fireworks HTML: Jika anda membuat halaman web memakai Macromedia Fireworks. 8. Navigation Bar: Ini merupakan fungsi yang komplek dan akan membuat anda untuk mengendalikan bar situs anda. anda bisa membrowser komputer anda untuk mencari gambar yang ingin dimasukkan ke dalam halaman web. Insert Table: Ketika anda mengklik tool ini. dan anda bisa menarik layer pada halaman. jika anda berencana untuk menempatkan halaman anda dalam internet. akan membawa user ke bagian lain pada halaman yang sama. Image: Anda bisa dengan mudah menempatkan gambar dalam halaman web dengan mengklik tombol ini. gambar.file atau lokasi pada halaman yang sama. Ketika anda melakukannya. Named Anchor: Tanda anchor ini adalah istimewa dalam melakukan link. 13. 4. Layer bukanlah tabel. Klik nama tombol nama anchor untuk mempercepat membuat link untuk anchor. . kursor anda akan berubah menjadi salib. 2. Ingat. Comments: Komentar bisa digunakan dalam halaman web. Biasanya digunakan oleh Web Developer yang sudah mahir.PENGENALAN TOOL BAR 1. tapi mereka sangat penting. Horizontal Rule: suatu garis sederhana yang bisa digunakan untuk beberapa bagian isi halaman web. Mereka akan terlihat sederhana. Ini akan membantu jika anda ingin mengingat sesuatu yang anda desain. Ketika itu selesai. 14. jendela baru akan muncul. Flash: Mengijinkan anda untuk memasukkan elemen flash dalam halaman web. 9. atau membuat garis dan kotak untuk layouts. dan bisa ditempatkan dimana saja dilayar. “image”. Ketika anda mengklik tombol ini. Image Placeholder: Penempatan gambar bisa digunakan secara efektif dalam web desain. Tabular Data: Memasukkan data ke dalam tabular 15. Ini akan diceritakan pada bagian “publishing” 7. Gunakan tool ini untuk mempermudah link. 10. Klik tombol ini. tapi merupakan kotak yang bisa diisi teks. memutuskan panjang garis horizontal. Hyperlink: Klik diatas dan akan membuat anda untuk link ke lokasi lain dari halaman web. akan muncul jendela menanyakan jika anda ingin memasukkan informasi dan membuat tabel. Dari sini. klik pada “OK” dan akan muncul tabel dalam halaman web. 3. dan mengubah gambar untuk link ke halaman lain. seperti membuat ruang antar objek. anda harus menaruh semua gambar yang digunakan dalam web dengan baik. Date: Klik tombol ini untuk memasukkan tanggal ke halaman web. 6. 11. Rollover image: Suatu efek khusus pada gambar. 5.

Buat sebuah Area pada lembar kerja. Aktifkan Layout Tab . klik Draw layer Layer Header / Judul 1. Buat Tampilan Layout seperti tampak di bawah ini dengan menggunkan Draw Layer Menggambar layout a. Siapkan lembar kerja baru. Insert Table Layer Tombol Layer Tombol Layer Tombol Layer Background Tombol 2. Draw Layer b. Ini akan di gunakan sebagai tempat untuk gambar header / judul dari sebuah web Layer Background / Isi Layer Footer .MEMBUAT LAYOUT WEB - c.

pada Properties klik Bg Color dan ubah warnanya f. karena langkah berikutnya berada di adobe photoshop cs 2 e. catat W dan H g. Perhatikan pada Properties. Untuk memberi warna background pada layer yang telah dibuat dengan cara.d. Aktifkan layer . Selanjutnya Aktifkan Layer Header . Selanjutnya kita akan membahas tentang adobe photoshop Cs2.

CD Room / DVD Room Drive - Mengenal Area Kerja Adobe Photoshop Cs2 5. Windows XP. Windows 2000.ADOBE PHOTOSHOP CS2 Spesifikasi minimum Hardware dan Software yang dibutuhkan untuk menginstal Photoshop Cs2 adalah sebagai berikut POKOK BAHASAN Photoshop Cs2 Hardware/Perangkat Keras 1. Windows Vista. Windows Seven Penginstalan Adobe Photoshop CS2 - Cari letak file Installler Adobe Photoshop CS 2 . dobel klik pada setup Pilih Next . 500 Mb Disk Space - Arti Adobe Photoshop Cs2 4. Intel Pentium III 800 MHz - Spesifikasi Minimum 2. 256 Mb Ram (512 dianjurkan) - Instalasi Aplikasi Photoshop Cs2 3. Monitor dengan warna 16 bit dan mampu resolusi sebesar 1024x768 - Mengenal Tool Box - Memulai Adobe Photoshop Cs2 Software (OS) Windows ME.

- - Klik Tombol Accept Masukan User Name dan Organization. Pilih Option „ Install 30-day trial Version. Lalu Next - Klik Next untuk melanjutkan - Klik Next lagi .

Klik Finish untuk mengakhiri proses . untuk memulai proses instalasi - Biarkan Proses instalasi selesai - Proses instalasi sudah selesai .- Klik install.

dan. atau biasa disebut Photoshop. versi 9 ke atas juga dapat digunakan oleh sistem operasi lain seperti Linux dengan bantuan perangkat lunak tertentu seperti CrossOver. Photoshop tersedia untuk Microsoft Windows. bersama Adobe Acrobat. Perangkat lunak ini banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar. C.ARTI ADOBEPHOTOSHOP CS2 1. Misalnya dipilih kuas/brush. mengubah ukuran gambar. Menu Bar. versi sepuluh disebut Adobe Photoshop CS3 . adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Sumber (Wikipedai Indonesia) A. Mac OS X. dan versi yang terakhir (kesebelas) adalah Adobe Photoshop CS4. B. berisi pilihan dari tool yang Anda pilih. Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS (Creative Suite). berisi tool untuk menyeleksi dan memodifikasi gambar. dan Mac OS. dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems. Palette. Option. versi sembilan disebut Photoshop CS2. . save. berisi jendela-jendela kecil yang di dalamnya terdapat perintah dan pilihan untuk dokumen/gambar yang sedang dikerjakan. Toolbox. Pallete Well. maka ukuran/diameter brush ada di sini. Juga dapat digunakan untuk meletakkan palet yang sering digunakan. filter dan lain-lain. menampilkan gambar yang sedang dibuat atau diedit. F. cara cepat untuk mengakses palet brushes. E. MENGENAL AREA KERJA ADOBE PHOTOSHOP CS2 Adobe Photoshop. Gambar. berisi perintah utama untuk membuka file. tool resets dan Layer Comps. D.

2. dan Color Mode RGB Color. Pastikan ukurannya menggunakan pixels. MEMULAI ADOBE PHOTOSHOP CS2 - Dari File pilih New. MENGENAL TOOL BOX 3. OK - Selanjutnya akan keluar lembar kerja baru . masukan Width dan Height sesuai dengan ukuran dari macromedia MX .

- - Tambahkan satu buah layer baru Aktifkan Pain Bucket Tool - Pada tab Styles pilih salah satu warna - Jika Warna dirasa kurang untuk menambahkan warna klik icon segitiga hitam pilih salah satu styles .

Klik pada lembar kerja. ubah pada text properties - Untuk pemberian efek klik kanan pada layer text pilih Blending Options - Silahkan anda berkreasi dengan Blending Options . Ketikkan Judul web anda. Blok judul web. Copy (CTRL + C). Untuk melakukan pengeditan Font. cari file gambar. klik icon pada tool box (Horizontal Type Tool). maka warna background akan berubah. klik open. Klik pada lembar kerja.- Jika keluar tampilan menu seperti dibawah ini pilih Append - Selanjutnya pilih salah satu warna pada tab styles. Seleksi Gambar yang akan di jadikan Background. dari edit pilih Free Transform atau tekan CTRL + T . Untuk pembuatan background dengan gambar. shingga ukuran gambar sesuai dengan lembar kerja - - Untuk memberikan judul . Paste kan pada lembar kerja kita Untuk memperbesar / memperkecil objek . Aktifkan Ractangular Marquee Tool.

- Dari File pilih Save For Web - Pilih Save - Cari folder anda dan buat sebuah folder bernama Image (untuk pengelompokan file) .

OK .- Simpan dengan nama Header. cari file header yang baru saja anda buat di photoshop. aktifkan kursor di dalam layer header - Dari Insert pilih Images . Save - Buka kembali Dreamweaver.

OK . buka lembar kerja baru dan isikan Width dan Height sesuai dengan ukuran dari Macromedia MX (Layer Tombol) . catat ukuran H dan W pada Properties Kembali ke Adobe Photo Shop. dan Color Mode RGB Color.- Aktifkan Layer background Tombol . beri warna - - Aktifkan layer Tombol. Pastikan ukurannya menggunakan pixels.

beri warna background dengan menggunakan Paint Bucket Tool Klik icon pada tool box (Horizontal Type Tool).- Tambahkan Layer. ubah pada text properties . Klik pada lembar kerja. ketikan “Home”. Untuk melakukan pengeditan Font. Blok Text.

setelah proses penyimpaan selesai. kilik Browse cari File “tombol Home2”. pilih Save For Web . dari Insert pilih Interaktif Image pilih Roolover Image Pada Original Image. aktivkan layer tombol. dan pada Rollover Image.- Dari File Pilih Save for Web. - - Dari File. simpan di folder image dengan nama Tombol Home2. ubah warna dari background dan warna dari font. simpan di folder image dengan nama “Tombol Home1”. Kembali ke Dreamweaver. Kemudian OK . Kilik Browse cari File “Tombol Home1”.

Tombol Profile2. aktifkan layer footer. buat file baru masukan Width dan Height sesuai dengan ukuran dari Macromedia MX (Layer Footer). beri warna background dengan menggunakan Pain Bucket Tool atau dengan menggunakan gambar. Contoh Ketiga tombol yang sudah jadi . buka adobe Photoshop. Pastikan ukurannya menggunakan pixels. OK Tambahkan Layer . lihat pada Properties ukuran dari W dan H. langkahnya sama dengan pembuatan isi dari layer header. Save for Wab. Tombol Berita1. simpan dengan nama Footer - Lakukan untuk dua tombol berikutnya (Tombol Profile1. dan Color Mode RGB Color. Tombol Berita2).- Selanjutnya pembuatan isi dari Layer Footer.

ketikkan <Marquee>.- Beri warna dasar pada Layer Background. klik Modify pilih Page Properties . Blok text Selamat Datang Di Website ku. Ok - Selanjutnya pembuatan text berjalan (Marquee). cari text yang terbelok. tambahkan satu buah layer dengan cara klik icon Draw Layer Ketikan text di dalam layer yang baru saja anda buat. Selamat Datang Di Website ku . Pada Background ubah warna sesuai dengan selera anda. Simpan lembar kerja anda. Kemudian aktifkan kursor di awal kalimat. blok </Marquee> kemudian Cut dan Paste kan di akhir kalimat seblum </div> Text Terblok Layer Baru . untuk memberikan warna dasar pada Background lembar kerja dengan cara. dari View pilih Code.

start()">Selamat Datang di Website Ku</Marquee> Text Terblok Pengeditan Font dapat dilakukan dengan cara Blok text yang akan di edit. jika ingin memberikan tambahan efek pada Marquee.stop()" onMouseOut="this.Untuk mengembalikan ke tampilan awal dari View pilih Design - Untuk melihat hasil sementara tekan F12 pada Keyboard. Pada Tab Properties <marquee> </marquee> . tambahkan pada rumus marquee sperti berikut: <Marquee direction="left" onMouseOver="this. disini kita gunakan saja text “Selamat Datang di website Ku”.

dari Insert pilih Media kemudian Shockwave. dan ketikan pada layer baru tersebut File berexstensi Swf/ file berwana silver - Untuk memasukan file Flash kedalam lembar kerja. cari file yang berexstensi *. Tambahkan satu buah layer. dilakukan dengan cara menambahkan satu buah layer lagi.SWF atau yang berwarna silver Layer Baru tempat file Flash .- Memberikan isi Halaman. aktifkan layer yang baru saja anda buat.

Buat file baru dengan memasukan Width dan Height sesuai dengan ukuran dari Macromedia MX (Layer Baru). tekan kembali CTRL + J untuk kembali melakukan penduplikatan objek dan ubah kembali warnanya.Aktifkan layer baru catat kembali ukuran dari layer baru tersebut ( W dan H). OK Tambahkan satu buah layer beri warna dasar file Flash Jangan lupa untuk melakukan penyimpana ulang. buka adobe photoshop. Pastikan ukurannya menggunakan pixels. Klik pada lembar kerja. ubah warna text. dan Color Mode RGB Color. Untuk melakukan pengeditan Font. Blok Text. Klik icon pada tool box (Horizontal Type Tool). ketikan “Selamat Datang”. ubah pada text properties. dan lihat hasil sementara dengan menekan F12 pada keyboard - Pembuatan animasi pun bisa dilakuakn dengan photoshop cs. aktifkan layer text tekan CTRL + J untuk melakukan Duplikat Layer. Layer baru tempat file animasi Layer hasil duplikasi (CTRL + J) . sebelum kita ke photoshop tambahkan terlebih dahulu layer di lembar kerja dreamweaver sebagai tempat meletakan animias.

5 atau sesuai selera Dari Window pilih Animation Klik Duplicates Selected Frames Duplicates Selected Frames .Klik gambar mata siskan hanya satu layer text Tab Animasi Ubah kecepatan animasinya dari 0 sec menjadi 0.

Aktifkan icon mata pada layer text hasil duplicat yang pertama Icon Mata yang telah di aktifkan Icon Mata yang telah di aktifkan Klik Duplicates Selected Frames lagi. aktifkan icon mata pada layer text hasil duplicat yang terakhir Klik Plays Animation untuk melihat hasilnya Plays Animation .

kembali ke dreamweaver.Profile dan Berita) Animasi yang baru di buat di photoshop Aktifkan lembar kerja Home. buka ketiga file tersebut (Home. Klik tombol Home. selanjutnya buat untuk halaman Profil dan Berita !!! Tombol Home Aktif . Setelah semua halaman dibuat. pada Properties cari Link.Klik Save For Web. Ok Simpan lembar kerja .htm. tekan F12 untuk melihat hasilnya Halaman Home telah selesai dibuat. klik pada Browse For File kemudian cari file Home. aktifkan layer baru tempat animasi dari Insert pilih Image cari file yang baru saja kita buat di photoshop - Melakukan Link atau menghubungkan antar halaman. simpan dengan nama animasi1.html / Home.

Setelah semua tombol pada lembar kerja home di beri link. Lakukan hal serupa untuk lembar kerja Profile dan Berita.htm lakukan untuk tombol Profile dan Berita.Link Browse For File Lihat hasilnya dengan menekan F12 File Home. agar mudah dari File pilih Save All . simpan lembar kerja. Jangan lupa untuk menyimpan lembar kerja.

Untuk mengubah font blok tulisan dan pilih font yang anda inginkan pada icon “9” untuk mengubah ukuran font kilk icon “10” atau bisa melalui CTRL + T .. ubah warna background klik Icon “3” dan pilih warnanya 7 8 7. Tempat sampah/untuk menghapus layer 5.. klik pada lembar kerja. Mengenal Icon icon penting pada adobe photoshop. Memindahkan Objek 3. Pemberian Warna Gradiasi/Warna dasar (Klik Tahan) 4. Pembuatan Objek Kotak. Klik icon “4”.Lingkaran dll 6.- PEMBUATAN WEB DENGAN MENGGUNAKAN PHOTOSHOP DAN IMAGE READY 1. Width=800 dan Height=600. Color Mode=RGB Color/CMYK Color. Aktifkan layer 1 dengan mengklik pada tulisan layer 1 . File . 6 1 2 3 Keterangan: 1. Ok 4. Seleksi Objek / Gambar 2. ketikan judul web site. Penambahan Style warna 7. Pembuatan Text 5. New. Setalah mengetahui icon icon yang dibutuhkan pada pembuatan web selanjutanya tambahkan layer dengan mengklik tombol “7” 4 5 6. Pembuatan judul. Buka Adobe Photoshop 2. Background Contents= White 3. Penambahan Layer 8.

Tambahkan Layer baru. klik File. cari gambar yang anda inginkan. klik icon “7”. 9. seperti gambar dibawah ini 13.. Selanjutnya pembuatan text diatas tombol. Selanjutnya pembuatan Tombol. seleksi gambar yang akan anda ambil dengan cara klik icon “1” Klik tahan tarik pada area gambar yang di inginkan kemudian tekan CTRL + C (Copy) . Open. Klik tahan pada lembar kerja.. . tekan CTRL memperbesar/Mengecilkan objek stelah itu enter + T untuk 10. Klik Icon “4”. Pilih open. klik di lembar kerja ketikan “Home” ubah warna kilk icon “3”. Ubah warna tombol klik icon “3” 11.9 10 8. Penambahan Gambar bisa di ambil dari instant artis / dari photo di komputer. pilih icon yang diinginkan dengan klik tahan icon “5”. letakan text di atas tombol dengan icon “2” 12. Lakukan hal diatas sampai semua tombol dan text terbuat . Untuk yang dari poto di komputer. untuk menggagalkan pilihan seleksi tekan CTRL + D. Ubah nama shape 1 menjadi Tombol1 dengan cara dobel kilk pada text shape1 .

1. memutar) tekan CTRL + T 15. Save lembar kerja. Aktifkan kembali lembar kerja yang pertama. disini kita akan membuat efek roolover. 14. open file dari Adobe Photo Shop. Selanjutnya kita akan memotong tombol dengan Slice Tool icon “11” 11 Slice Tool (11) 12 Slice Select Tool (12) .- SELANJUTNYA BUKA ADOBE IMAGE READY Selanjutnya buka Adobe Image Ready.memperkecil. Paste / CTRL + V . dari file . tambahkan layer klik icon “7” . Untuk mengedit gambar (memperbesar. keluar dari aplikasi 2. Setelah Adobe image ready terbuka.

Lakukan untuk semua tombol. contoh: Home. Klik layer Tombol2. Kemudian pada tab Roolover klik icon “13” 6. Selanjutnya pembuatan rool over / efek tombol. Klik icon “13”. 10. Close aplikasi adobe image ready .3. Simpan kembali lembar kerja dengan format HTML.html 11. Klik icon “12” klik pada tombol home pada lembar kerja. akan seperti di bawah ini 4. Klik tahan buat area sebesar text lakukan hal serupa untuk semua tombol 5. simpan dengan SAVE OPTIMIZED. Selanjutnya aktifkan tombol profil pada lembar kerja. Ubah warna tombol dengan warna yang berbeda 7. Cara memotong sama dengan seleksi objek. 9. Setelah klik icon “11”. Klik layer tombol1. Setelah semua tombol diberi efek roolover simpan lembar kerja. ubah warna 13 8.

dari File. New. Setelah membuka file dari Image Ready. Setelah lembar kerja baru terbuka. Pilih PAGE PROPERTIES Kemudian bekerja di MACROMEDIA DREAMWEAFER 1. Pemberian judul dari Insert pilih Layer. Geser posisi layer ke tengah lembar kerja . dari MODIFY. Buka Dreamweaver MX 2. Klik ok 6. Dari open file yang disimpan pada image ready yang bericon internet explorer/ mozila firefox 3. klik Create Background Image : Memberi latar belakang foto Background : Memberi warna latar belakang web Text : Memberi warna text 5. buat lembar kerja baru.- MACROMEDIA DREAMWEAVER MX 4.

dari 9. dari Insert .. atur posisi layer. Untuk pembuatan isi lembar kerja sama dengan pembuatan judul. Interactive Images. Membuat efek berjalan pada judul. kemudian untuk mengubah format text pada Properties Halaman ini berisi tetang profil.aktifkan kursor disebelah icon c 13. aktifkan kursor di seblah icon c. Dari insert pilih layer. Ketikan <marquee> pada awal text profile dan </marquee> pada akhir text profile B C A Tipe tombol B Nama Tombol C Link ke halaman Utama 11. Halaman ini berisi tetang profil 8. Pembuatan tombol Back. Blok “Profile” VIEW pilih CODE . pada button text ketikan “Back”/”Home”/”Kembali” 16. Atur Style. Untuk mengedit Text blok text. Klik View. tambahkan layer. aktifkan kursor di dalam layer. Geser posisi layer ketempat yang diinginkan kemudian ketikan isi dari web page 15. Klik Browse cari file pertama yang anda buat dari image ready . Simpan lembar kerja 12.7. ok . design. Pada Link. Cari text yang terblok 14. Flash Button (Lembar kerja harus sudah di simpan) A 10.

Pada Tab Properties E Browse For File . lakukan hal yang sama seperti langkah diatas. 21. 20.18. Dari File pilih Save All 19. Untuk pembuatan lembar kerja yang lain . Kemudian klik ok. Kembali ke lembar kerja pertama (Home) klik tombol Profile pada lembar kerja 17.

Hoby) 24. Jika muncul text seperti dibawah pada lembar browser.pilih yes . Ok. lembar kerja lainnya harus terlebih dahulu dibuat !!! (Zodiac. Lakukan hal serupa untuk menghubungkan antara layar utama (Home) dengan lembar kerja lainnya. Ingat harus sering malakukan penyimpanan . Simpan Ulang 23. dari file pilih Save ALL 25.22. 26. Klik icon “E” / Browse for File yang bergambar folder. pilih file profile.. pilih Allow Blocked Content. Untuk mencoba tekan F12 pada keyboard. Klik pada text.