MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA

TIK-Kurikulum Tingkat Satuan Pendidikan
KELAS XII- SMAN 2 SURABAYA Halaman 1
HYPERTEXT
MARKUP Language
(HTML)

HYPER TEXT MARKUP LANGUAGE
Sebuah dokumen HTML pada dasarnya berstruktur seperti gambar 2.1. Dokumen dibagi
menjadi dua bagian besar, yaitu HEADER (bagian atas) dan bagian BODY (tubuh
dokumen). Masing-masing ditandai oleh pasangan tag <HEAD> dan <BODY>. Bagian HEAD
berisikan judul dokumen dan informasi-informasi dasar lain, sedangkan bagian BODY
adalah data dokumennya. Untuk mengetikkan dokumen, kita menggunakan Notepad atau
text editor yang lain.
/*///56 4jg
Gambar 2.1. Struktur HTML
Kedua instruksi yang pertama kali harus dituliskan adalah :
<HTML>
….
</HTML>
Instruksi ini yang akan memberi tanda awal dan akhir suatu dokumen HTML. Kemudian
kita buat bagian HEAD dokumen denga perintah <HEAD> dan </HEAD>. Didalam tag ini
kita akan meletakkan judul dokumen , dengan perintah <TITLE> dan </TITLE>.
<HTML>
<HEAD>
<TITLE>The Title of the Document</TITLE></HEAD>
<BODY>My first HTML Document</BODY>
</HTML>
Contoh kecil dokumen HTML sekarang telah lengkap, berisi semua tag dokumen HTML
yang harus ada. Simpan file tersebut dengan nama- misalnya “first.html/first.htm” dan
selanjutnya dapat ditampilkan dalam browser web. Untuk melihat dokumen HTML secara
lokal melalui browser Web (misalkan Internet Explorer) kita buka file tersebut dengan
memilih menu FILE dan OPEN FILE.
File HTML
Bagian
HEAD
Bagian
BODY

Gambar 2.2. Contoh dokumen HTML
HEADLINE
Dokumen yang kita buat dapat diperbaiki tampilannya dengan menggunakan tag headline.
HTML mendukung enam tingkat headline <H1> sampai dengan <H6>. Untuk headline
dengan ukuran kecil, digunakan nomor yang lebih besar misalnya <H2> atau <H5>. Headline
secara otomatis akan melakukan pergantian baris dalam dokumen. Untuk menengahkan
headline, gunakan kode berikut :
<H1><ALIGN=”CENTER”>Level One Headline</H1>
FORMAT TEKS
Dokumen yang kita buat sejauh ini belum mengenal pemisah baris dan paragraf. Instruksi
<P> merupakan tag yang dipakai untuk mencegah berkumpulnya seluruh teks dokumen
menjadi satu paragraf besar juga memberikan jarak antar paragraf. Untuk pergantian
baris kita pergunakan instruksi <BR>. Hanya saja instruksi <P> dan <BR> ini bisa sangat
melelahkan untuk dokumen yang panjang. Tag <PRE> akan mempermudahnya dengan
membuat browser menampilkan teks dalam format aslinya, termasuk spasi dan carriage
return. Perintah <PRE> akan sangat bermanfaat untuk membuat dokumen –dokumen yang
membutuhkan banyak kolom, seperti tabel.
BLOCKQUOTE
Tag <BLOCKQUOTE> memungkinkan untuk meletakkan suatu blok terindentasi sehingga
memisahkannya dari tubuh teks. Tidak seperti <PRE>, <BLOCKQUOTE> tidak
mempertahankan carriage return atau spasi kosong yang Anda buat, namun hanya
membuat blok teks yang didalamnya sedikit tergeser ke dalam.
FONT
Seperti program pengolah kata, HTML mengenal kemampuan untuk membuat teks tebal
dengan tag <B>, teks miring dengan <I> dan teks bergaris bawah dengan tag <U>. Untuk
memanipulasi ukuran font dengan menggunakan tag <FONT> yang diikuti sebuah atribut
SIZE. Misalkan <FONT SIZE =+4> berarti teks yang akan ditampilkan dalam ukuran 4.
Ukuran berada diantara angka 1 sampai dengan 7. Tanda + didepan angka jika
menginginkan ukuran font yang lebih besar daripada normal. Demikian juga tanda – untuk
sebaliknya. Untuk warna dengan menggunakan tag<FONT COLOR=”…”>, misalnya text
berwarna biru <FONT COLOR=”BLUE”>. Sedangan untuk merubah jenis huruf dengan

menggunakan tag <FONT FACE=”…”>, misalnya text dengan jenis huruf Arial <FONT
FACE=”ARIAL”>.
HORISONTAL RULE
Tag ini digunakan untuk membuat garis pembatas/ biasanya untuk mengakhiri dari text
di web. TAG <HR>, bila merubah tampilan bisa menambahkan ukuran/ketebalan garis
serta warna. Misalanya ukuran=75% , ketebalan=10, warna=merah maka <HR SIZE=10
WIDTH=75 % COLOR=”RED”>
SUP(SUPERSCRIPT) DAN SUB(SUBSCRIPT)
Tag ini digunakan untuk menurunkan ½ garis kebawah <SUB> dan menaikan ½ garis ke atas
<SUP>
IMAGE
Agar tidak membosankan, ada baiknya bila kita juga menempatkan image (gambar) dalam
homepage yang dibuat.
FORMAT IMAGE
Format yang paling terkenal adalah GIF dan JPG. Keduanya banyak sekali dipergunakan
dalam dokumen-dokumen HTML sehingga sering disebut sebagai format standar untuk
grafik. Secara umum, sebaiknya gunakan GIF bila Anda berencana menaruh terlalu
banyak gambar di dalam dokumen. JPG baik dipergunakan jika Anda berkeinginan untuk
meletakkan gambar berupa foto yang memiliki lebih dari 256 warna.
MENEMPATKAN IMAGE
HTML menyediakan suatu mekanisme sederhana untuk memadukan file gambar dengan
dokumen web Anda. Instruksi <IMG> adalah sebuah open tag, yang artinya tidak
memerlukan tanda penutup. Adapun cara penulisan perintah<IMG> adalah sebagai berikut
:
<IMG SRC=”/URL/nama_file”>
Tag <IMG> selalu diikuti dengan atribut SRC yang menunjukkan lokasi dan nama file
grafik yang ingin kita tampilkan. URL (universal Resources Locator) adalah alamat
absolut dari file grafik tersebut. Atribut tambahan untuk instruksi <IMG> adalah
ALIGN. Atribut ini mengendalikan letak (alignment) teks yang berada di baris yang sama
dengan grafik terhadap sisi vertikal gambar. Atribut ALIGN ditulis dengan cara sebagai
berikut :
<IMG SRC=”MyImage.gif” ALIGN=TOP>
ATRIBUT IMAGE
 WIDTH dan HEIGHT memberikan informasi mengenai ukuran gambar kepada
browser sebelum file grafiknya sendiri dikirimkan.
 VSPACE dan HSPACE yang menentukan jarak diatas dan dibawah (VSPACE) atau di
kiri dan di kanan (HSPACE) dari sebuah gambar.

 BORDER menentukan garis pinggir di sekitar gambar. Bila BORDER diset sama
dengan 0, garis pinggir akan dihilangkan dari dokumen .
BULLET & NUMBERING
<OL> atau order list(numbring) digunakan untuk membuat daftar dimana tiap bagian
memiliki nomor secara berurut. Tag ini menggunakan tag <OL> dan diakhiri dengan </OL>.
Sedangkan untuk tiap bagiannya digunakan tag <LI>. Ketika menggunkan OL ini maka
penomoran dimulai 1,2,3,… , namun hal ini dapat diubah dengan menggunakan atribut
TYPE pada tag <OL> :
 TYPE=1; daftar berurut dengan 1, 2, 3,
 TYPE=I; daftar berurut dengan I, II, III,
 TYPE=a; daftar berurut dengan a, b, c,
 TYPE=A; daftar berurut dengan A, B, C,
Unordered List <UL> digunakan sebagai bullet pada web. Ada 3 macam type bullet pada
HTML, yaitu :
 Type =”DISC”
o Type=”CIRCLE”
 Type =”SQUARE”
HYPERTEXT LINK
Hypertext atau sering disebut teks interaktif, memungkinkan kita untuk membuat link
(sambungan) antara dokumen-dokumen sehingga user dapat memperoleh dokumen-
dokumen lain di luar dokumen yang sedang diakses. Suatu link hypertext, dalam suatu
dokumen Web, dapat berupa gambar atau teks. Bila Anda mengklikkan mouse pada link-
link tersebut, browser akan membawa Anda menuju ke dokumen lain yang ditunjukkan
oleh link tersebut.
Ada 4 macam link pada HTML yaitu ;
 Link biasa : link antar web
Misal : KLIK < A HREF=”SATU.HTM”>NEXT</A>
 Link Relative : link antar web dalam folder yang lain
Misal : KLIK < A HREF=”C:MY DOCUMENTSDATASATU.HTM”>NEXT</A>
 Link Absolute: link yang terhubung dengan web lain di internet
Misal : KLIK<A HREF=WWW.PLASA.COM>PLASA</A>
 Link Achor : link yang terdapat dalam satu web (fungsinya sama dengan scroll)
Ada 2 tag yaitu untuk menghubungkan<A HREF=”#...”> dan membuat link <A
NAME=”# …”>
MEMBUAT LINK
Buatlah contoh file berikut :
<HTML>
<HEAD>
<TITLE>The Title of the Document</TITLE></HEAD>

<BODY><A HREF =”MyLink.htm”>Click Here</A></BODY>
</HTML>
Tag <A HREF =”MyLink.htm”> menyatakan bahwa bagian dokumen yang berada didalam
tag ini adalah suatu link yang menuju ke sebuah dokumen HTML lain, yang dalam contoh
diatas, bernama ”MyLink.htm”. Sembarang teks atau gambar yang berada diantara tag <A
HREF=> dan </A> akan ditampilkan browser dalam bentuk yang berbeda dari bagian
dokumen lain. Biasanya browser akan menandai link ini dengan garis bawah pada teks atau
garis pinggir berwarna pada gambar. User dapat mengklikkan mousenya pada link ini
untuk menuju ke dokumen “MyLink.htm”.
Anda dapat mengkaitkan suatu dokumen atau lokasi di Internet yang berada di luar
sistem dimana dokumen sekarang berada. Anda dapat menerapkan link dari dokumen
Anda ke suatu dokumen yang berada di Web site lain, FTP site, Gopher site atau ke
sembarang sumber daya yang ada di Internet. Cobalah macam link berikut :
<A HREF =”http://www.microsoft.com”> Web Microsoft</A>
<A HREF =”ftp://ftp.netscape.com”>FTP Server Netscape</A>
TABEL
Tabel bermanfaat untuk menyajikan informasi yang memerlukan banyak kolom dan baris.
Namun lebih daripada itu, tabel dapat menjadi alat utama dalam HTML untuk
mengendalikan tataletak dokumen Web kita.
DASAR-DASAR TABEL
Tabel dibuat dari tag<TABLE> dan </TABLE>. Didalam tag ini dapat dibuat baris-baris
tabel dengan perintah <TR> dan </TR>. Didalam <TR> ini kemudian kita dapat menenpatkan
perintah <TD> dan </TD>. Sebuah contoh sederhana untuk membuat tabel dengan dua
baris dan tiga kolom :
<TABLE BORDER=1>
<TR>
<TD>one</TD>
<TD>two</TD>
<TD>three</TD>
</TR>
<TR>
<TD>four</TD>
<TD>five</TD>
<TD>six</TD>
</TR>
</TABLE>
Perintah BORDER menentukan besarnya garis pinggir dalam tabel. Bila BORDER dipasang
sama dengan nol, maka garis pinggir akan hilang. Atribut CELLSPACING digunakan untuk
menentukan jumlah spasi yang terdapat diantara dua buah cell. CELLPADDING digunakan

untuk mengatur jumlah spasi yang terdapat antar batas/ border dengan isi atau teks di
dalam cell tersebut.
Gambar 2.4. Halaman dengan tabel

MACROMEDIA D.WEAVER

MENGENAL LINGKUNGAN KERJA DREAMWEAVER MX
Lihat Gambar 1. Dreamweaver MX menawarkan dua layout view untuk dijadikan sebagai
tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver MX
akan memberikan opsi: Macromedia Dreamweaver MX Workspace atau Macromedia
Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu
preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah
Anda, pada tutorial ini saya akan menggunakan Dreamweaver MX Workspace.
Gb1. Lingkungan kerja Dreamweaver MX
Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada
gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web
secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan
image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan menu Insert
pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2.
Property Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document
Window. Document Toolbar berguna untuk mengubah tampilan dari disign/visual view,
code view, atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen,
melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel
Dreamweaver MX.
Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar
pada teks, link, anchor, dan Page Properties.
BEKERJA DENGAN TEKS
Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam
memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan
HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property
Inspector. Lihat Gambar 2.

Gb2. Property Inspector
HEADING
Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul
berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk
subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel,
pada Insert Panel, klik Tab Text.
Gb 3. Heading
PARAGRAF DAN LINE BREAK
Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru.
Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (<p>) secara default
menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris
tidak ada jarak, maka kita membutuhkan <br> di HTML. Untuk berpindah baris dan bukan
paragraf kita menggunakan Shift-Enter, atau Insert > Line Breaks. Lihat Gambar 4.
Gb 4. Paragraf dan Line Breaks
MEMFORMAT TEKS DENGAN PROPERTY INSPECTOR
Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan
pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini

untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan
Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3.
Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font
yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki
jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk
mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah,
kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down
Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma.
Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila
font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua,
kemudian ketiga, dan seterusnya. Font default adalah Times New Roman. Lihat Gambar
5.
Gb 5. Mengubah format huruf
Membuat Link, Anchor, dan Target
Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link—
juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di
atas saya simpan dengan nama file index.htm. Halaman ini yang akan menjadi link sumber
kita. Mari kita buat halaman baru untuk dilink:
Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori
Dynamic Page, dan Basic Page HTML. Lihat Gambar 6. Setelah selesai membuat file baru,
kemudian simpanlah file tersebut dengan nama file tentangsaya.htm. Pada contoh, saya
memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari
halaman tersebut. Kemudian simpan di folder yang sama dengan index.htm.
Gb 6. Membuat dokumen baru
Pada index.htm, pilihlah teks “Tentang Saya”, kemudian pada Property Inspector ketikan
tentangsaya.htm pada kotak link. Atau gunakan Browse For File untuk memilih file
tentangsaya.htm lewat kotak dialog. Lihat Gambar 7. Cek dengan menggunakan browser,
bukalah file index.htm (Gambar 8).

Gb 7. Memasukkan Link
Untuk membuat link ke situs lain, setelah teks dipilih, ketik langsung pada kotak link
alamat yang dituju, misalnya http://www.mwmag.com (Jangan lupakan http://).
TARGET
Target (Gambar 9) adalah perintah atau opsi pada link yang memberitahukan di window
mana link tersebut akan dibuka. Setiap window atau frame di HTML dapat kita beri nama
dan browser akan memuat halaman ke window/frame sesuai yang ditunjukkan oleh link.
Sesuai aturan di HTML, terdapat nama-nama target khusus yang berarti spesial. _Self
adalah pilihan default, bila Anda tidak menentukan target, link akan dibuka pada window
browser atau frame yang sama. _top memuat ke window terluar (di luar semua frame
yang ada). _Blank membuka link pada browser window baru. _Parent membuka link pada
frame induk (kita akan membahas tentang hal ini pada bagian Frame nanti).
Gb 8. Target pada Property Inspector
NAMED ANCHORS
Bila halaman web Anda memungkinkan pengunjung menscroll window browser karena isi
dari halaman tersebut panjang dan terdiri dari beberapa halaman, Anda dapat
menggunakan Named Anchors ini untuk menentukan titik-titik tertentu pada halaman
dengan tujuan memudahkan navigasi pengunjung mencari sesuatu dalam halaman dengan
cepat. Pada halaman yang saya buat tentangsaya.htm terdapat beberapa menu yang
langsung menuju ke topic tertentu pada halaman tersebut, setelah itu pengunjung dapat
kembali ke atas halaman. Untuk membuat Named Anchor, pertama kita tandai bagian
khusus dari halaman: klik Insert > Named Anchors, atau tekan Ctrl-Alt-A. Setelah kotak
dialog muncul masukan nama anchor. Pada file ini saya memberi nama kesukaan. Setelah
itu klik OK. Pada bagian yang ditandai akan tampak tanda/icon buku terbuka. Lihat
Gambar 9.
Gb 9. Named anchor
Setelah itu kembali ke halaman atas pilih teks yang akan di buat link pada bagian atas
dokumen yang akan dihubungkan dengan Anchor tersebut, pada kotak link di Property
Inspector ketikkan #kesukaan. Untuk mengembalikan ke atas halaman buat link baru

pada bagian tersebut misal: kembali ke atas. Lihat Gambar 11. Kemudian masukkan di
kotak link tanda # dan pilih _top untuk target dari link tersebut. Lihat di browser
dengan menekan F12.
Gb10. Membuat link ke bagian atas dokumen
Page Properties
Page Properties adalah fasilitas untuk mengubah properti dasar sebuah dokumen Web,
seperti judul halaman, warna-warna link, dsb. Untuk membuka Page Properties klik
Modify > Page Properties. Lihat Gambar 12. Title untuk menentukan judul dokumen.
Background Image tempat memasukkan gambar sebagai latar belakang. Background
menentukan warna latar. Text untuk menentukan warna teks. Links mengubah warna link.
Visited Link mengubah warna link yang telah dikunjungi. Active Link mengubah warna link
yang sedang diklik. Margin menentukan margin halaman. Semua elemen ini memiliki
padanannya di dalam kode HTML, yaitu dalam atribut elemen <body>. Selain mengubah
format tampilan melalui Page Properties, kita juga dapat melakukannya dengan CSS
(Cascading Style Sheet) yang akan kita bahas pada tutorial bagian lain. Setelah selesai,
Anda dapat melihat tampilannya di browser (Gambar 11).
Gb 11. Page Properties

MACROMEDIA FLASH

PENDAHULUAN
Macromedia flash mx adalah program grafis animasi standart profesional yang
digunakan untuk mendesain halaman web menjadi lebih menarik
Flash mx terdiri atas grafik, teks, animasi dan aplikasi untuk animasi yang
kesemuannya menggunakan grafik berbasis vektir. Macromedia flash mx
mempunyai kemampuan untuk mngimport video, gambar, dan suara dari aplikasi di
luarnya.
Flash mx juga bisa memasukan unsur-unsur interaktif dalam movienya dengan
menggunakan Action Script (suatu bahasa pemograman yang berorientasi kepada
objek), yang nantinya user bisa berinteraksi dengan movie menggunakan keyboard
atau mouse untuk berpindah ke bagian-bagian yang berbeda dari sebuah movie,
mengontrol movie, memindahkan objek-objek, memasukan informasi melalui form
dan operasi-operasi lainnya.
Beberapa kegunaan flash mx adalah membuat portofolio, animasi lembaran
presentasi,
membuat halaman web, pembuatan animasi form dan logo, pembuatan games, dan
lain-lain.
TOOL-TOOL GAMBAR DAN WARNA
Area gambar di flash mx terdiri dari 6 bagian, yaitu :
1. menu  berisi kumpulan intruksi atau perintah-perintah yang
diguanakan dalam flash
2. stage  adalah dokumen atau layar yang akan digunakan untuk
meletakan objek-objek dalam flash
3. timeline  tempat frame-frame yang berfungsi untuk mengontrol objek
yang akan digunakan
4. toolbox  berisi tool-tool yang dapat digunakan dalam flash mx,toolbox
dibagi empat bagian, yaitu tools, view, colors and options
5. panels  berisi kontrol fungsi yang dipakai dalam flash
6. properties  berisi property-property dari komponen-komponen flash

area kerja pada flash mx
Bagian tool di dalam toolbox berfungi untuk menggambar, memberi warna, memilih dan
memodifikasi objek.
tools pada flash mx

KETERANGAN
1. Arrow tool untuk memilih dan memindahkan objek
2. Subselect tool untuk memilih titik-titik pada suatu objek atau garis
3. Line tool untuk membuat garis
4. Lasso tool untuk memilih sebagian dari objek atau bagian tertentu dari objek
5. Pen tool untuk menggambar garis-garis lurus maupun garis kurva
6. Text tool untuk menulis text
7. Oval text untuk membuat lingkaran atau elips
8. Rectangle tool untuk menggambar garis-garis bebas dan bentuk seperti yang
dilakukan oleh pensil biasa
9. Brush tool berfungsi seperti kuas untuk mencat suatu objek
10. Free Transform tool untuk mengubah dan memodifikasi suatu bentuk objek
11. Fill Transform tool untuk mengatur ukuran, dan arah warna gradasi atau bidang
12. Ink Bottle tool untuk menambah, memberi, dan mengubah warna pada garis di
pinggir objek (stroke)
13. Paint Bucket tool untuk menambah, memberi, dan mengubah warna pada suatu
bidang (fill)
14. Eyedropper tool untuk mengidentifikasi warna atau garis dalam sebuah objek
15. Eraser tool untuk menghapus area yang tidak diinginkan
Animasi Dasar
Animasi yang paling dasar dan paling sering digunakan dalam membuat animasi
adalah animasi Tween, Tween adalah animasi gambar gerak dan berubah bentuk.
Animasi Tween ada 2, yaitu :
1. Animasi Motion Tween: animasi yang fungsi utamanya untuk menggerakan objek
(oval) dari satu titik ke titik lainnya. Contoh : menggerakkan objek dari kiri layar ke
kanan layar, caranya :
a. klik oval tool, lalu gambarlah lingkaran di bagian kiri stage, lihat gambar
b. klik kanan pada frame tempat gambar objek, lalu beri perintah : create motion
tween
c. klik kanan pada layer ke-30, lalu klik insert keyframe
d. pindahkan gambar ke sisi kanan stage
e. klik pada menu, control > test movie atau ctrl+enter

2. Animasi Shape Tween : animasi yang digunakan untuk mengubah bentuk atau
mengganti suatu bentuk dengan bentuk yang lainnya. Pengubahan bentuk bisa berupa
perubahan dari bentuk objek menjadi teks, objek kotak menjadi objek lingkaran, dan
lain-lain. Contoh : perubahan sebuah bentuk kotak menjadi teks , caranya :
a. Klik rectangle tool, lalu gambarlah kotak di layar
b. klik kanan pada frame ke-30, lalu pilih insert blank keyframe
c.masih di frame ke-30, klik teks tool, lalu tuliskan nama anda,contoh : LABKOM TF
2005
d. pada tulisan, klik menu modify > Break Apart atau ctrl+B sebanyak dua kali
e. klik pada frame ke-1, lalu pililah bagian Tween : Shape
f. klik pada menu, control > test movie atau ctrl+enter untuk menjalankan
movie
Animasi Jalur
Animasi jalur atau Motion Guide Tween adalah objek yang bergerak mengikuti suatu
jalur tertentu yang telah ditentukan pada layer guide. Contoh : animasi lingkaran yang
bergerak mengikuti garis orbit, caranya :
a. Klik oval tool, lalu gambar lingkaran kecil di layar
b. klik kanan pada layar, lalu pilih add motion guide
c. pindahkan ke layar Guide : layer 1, lalu gambarlah lingkaran besar tanpa warna,
Properties
untuk Shape Tween

jadi hanya pinggirannya saja
d. klik Eraser tool untuk memotong bagian bawah lingkaran
e. masih pada layer add motion guide, klik kanan pada frame ke 30 lalu pilih
insert frame
f. pindahkan ke layer 1 tempat gambar lingkaran kecil, lalu pindahkan lingkaran
kecil ke awal garis. Ketepatan letak lingkaran pada awal garis ditandai dengan
cincin saat proses pemindahan
g. masih di layer lingkaran kecil, klik kanan pada frame 1 lalu pilih Create Motion Tween
h. masih di layer lingkaran kecil, klik kanan pada frame ke 30 lalu pilih Insert
Keyframe. Kemudian pindahkan lingkaran kecil ke ujung satunya.
i. klik pada menu, control > test movie atau ctrl+enter untuk menjalankan
movie

Animasi Masking
Animasi Masking adalah animasi objek yang menutupi objek lain, sehingga objek yang
menutupi terlihat transparan. Contoh : membuat animasi tulisan seperti pada akhir
tayang di film, caranya :
a. Klik Text tool, lalu tuliskan biodata anda
b. klik kanan pada layer, lalu pilih Insert Layer. Kemudian klik kanan pilih
Mask pada layer 2.
c. hilangkan icon gembok agar dapat digunakan
d. gambarlah kotak pada layer 2 
e. layer 2, klik kanan pada frame ke 30 lalu pilih Insert Keyframe
f. layer 1, klik kanan pada frame ke 1 lalu pilih Create Motion Tween
g. layer 1, klik kanan pada frame ke 30 lalu pilih Insert Keyframe
h. layer 1, pada frame ke 30 pindahkan tulisan sampai ke atas kotak

i. klik pada menu, control > test movie atau ctrl+enter untuk menjalankan
movie
Symbol – Symbol
Symbol adalah ojek flash, didalam inilah objek animasi dibuat. Ada tiga jenis symbol,
yaitu :
1. Movie Clip
Membuat rangkaian objek didalamnya (membuat movie dalam movie), biasanya
disebut dengan level-level.
2. Button
Untuk membuat tombol interaktif (biasanya connect dengan ActionScript)
3. Graphic
Untuk membuat animasi diam yang siap untuk dianimasikan ke dalam layer
(biasanya digunakan untuk Background)
Action Script (basic)
Action script adalah bahasa pemograman yang digunakan untuk mengontrol jalannya
animasi yang diinginkan. Action script yang paling dasar adalah stop dan play. Action
Script ada 2 jenis, yaitu Action Script pada layer dan Action Script pada symbol.
Action Script yang sering digunakan adalah action script pada Global Function.
Contoh action script pada Global Function :
 Timeline Control (basic)
Action script pada Timeline Control digunakan untuk mengendalikan jalannya
animasi pada timeline.
Contoh :
- gotoAndPlay  perintah agar animasi jalan pada layer yang telah
ditentukan dan terus berjalan
- gotoAndStop  perintah agar animasi jalan pada layer yang telah
ditentukan dan animasi berhenti di layer tersebut
- nextFrame  perintah agar animasi jalan pada layer selanjutnya
- nextScene  perintah agar animasi jalan pada Scene selanjutnya
- Play  perintah untuk menjalankan animasi
- prevFrame  perintah agar animasi jalan pada layer sebelumnya
- prevScene  perintah agar animasi jalan pada Scene sebelumnya
- Stop  perintah untuk menghentikan animasi
Componen-componen Dasar
Pada flash mx terdapat beberapa komponen-komponen yang digunakan dalam animasi.
Komponen-komponen tersebut membantu user dalam membuat animasi.
Ada dua komponen yang sering digunakan, yaitu :
1. ScrollPane  digunakan untuk dapat mempermudah penyampaian teks
a. Drag komponen ScrollPane ke dalam stage

b. klik Teks tool, lalu tulislah biodata anda
c. klik teks, lalu klik menu Modify > Convert to Symbol pilih Movie Clip
dengan nama : biodata , klik advanced dan Linkage pilih Eksport for
ActionScript
d. delete teks, klik icon ScrollPane lalu cek parameternya. Tuliskan biodata
pada contentPath

f. klik pada menu, control > test movie atau ctrl+enter untuk
menjalankan movie
2. MediaPlayback  digunakan untuk menampilkan video, caranya:
a. Drag komponen MediaPlayback ke dalam stage
b. import video, menu File > Import > Import to Stage
c. pilih Embed Video…. > Import the entire Video
d. klik video, lalu klik menu Modify > Convert to Symbol pilih Movie Clip
dengan nama : film , klik advanced dan Linkage pilih Eksport
for ActionScript
e. delete video
f. cek video di library, klik kanan pada video lalu pilih properties

g. pilih eksport dan simpan file dengan nama film.flv
h. kemudian cek component Inspector, lalu ketik film.flv pada
URL. Save data di tempat anda menyimpan film.flv.

i. klik pada menu, control > test movie atau ctrl+enter untuk
menjalankan movie

MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Andere mochten auch

Andere mochten auch (14)

Ähnlich wie MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA

Ähnlich wie MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA (20)

Mehr von Mirza Afrizal

Mehr von Mirza Afrizal (8)

MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA