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 DOCUMENTS\DATA\SATU.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>

http://www.plasa.com/



<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

Software

Transcript of MODUL TIK HTTP DREAM WEAVER KELAS 2 SMA