MODUL 1 PENGENALAN SWISHMAX

(1)

MODUL 1

PENGENALAN SWISHMAX

SwishMax merupakan aplikasi untuk membuat animasi flash seperti halnya Macromedia Flash MX yang dapat dipakai untuk menambahkan gambar, animasi, suara dan hal-hal yang interakstif (interactivity) ke dalam Web. Selain itu juga dapat digunakan untuk membuat game dan aplikasi interakif. Namun perbedaannya, SwishMax lebih mudah dalam penerapannya dibandingkan dengan Flash MX. Tentu saja kemudahan itu akan mengurangi ‘keluwesan’ para pengguna yang ingin berkreasi lebih dengan menggunakan flash. Akan tetapi untuk para pemula, program SwishMax sudah lebih dari cukup untuk membuat berbagai animasi flash apalagi kelengkapan fitur pada SwishMax semakin ditambah.

Kelebihan lainnya, bila sudah mahir menggunakan SwishMax, dalam berkreasi lebih banyak pada Macromedia Flash MX akan lebih mudah karena sudah memiliki dasar pada SwishMax.

Instalasi SwishMax

1. Jalankan file SetupSwishmax.exe dengan cara klik 2 kali file tersebut, sehingga muncul gambar berikut:

2. Klik tombol Next, sehingga keluar form License Agreement, klik pilihan Yes, sehingga muncul tampilan pilihan tempat untuk menginstall program ini seperti pada gambar berikut:

3. Bila ingin menginstall ditempat lain tekan tombol Browse dan tentukan lokasi menginstall. Bila ingin menginstall secara default pada direktori yang ada, tekan tombol Next langsung, sehingga proses instalasi akan dilakukan. Bila proses instalasi selesai akan keluar tampilan sebagai berikut:

4. Hilangkan centang pada Launch. kemudian tekan tombol Close. Selesai

Modul 1 1.1

(2)

Mengaktifkan SwishMax

Cara mengaktifkan SwishMax:

Klik menu Start Æ Programs Æ SwishMax Æ SwishMax, sehingga akan muncul tampilan awal dari SwishMax seperti di bawah ini.

Pilih pilihan Start a new empty movie untuk memulai dengan tampilan awal yang kosong.

Tool Options View Optons Main Menu Standard Toolbar Control Toolbar Toolbox Layout Panel Script Timeline Movie Panel Outline Panel Insert Toolbar

Elemen Dasar dalam SwishMax Animation

Animasi yang dibuat disebut Movie. Movie merupakan barisan dari Scene.

Sebuah Movie memuat : Scene, Object, Effect, Event dan Action.

Di dalam tiap movie terdapat kumpulan Scene. Setiap Scene mempunyai Timeline yang terdiri dari beberapa Frame.

Scene adalah kumpulan Object yang dianimasi di sejumlah Frame. Ketika suatu Scene selesai, semua Object dihapus dari tampilan dan secara otomatis Movie akan dilanjutkan ke Scene berikutnya (jika dalam satu Movie terdiri dari lebih dari 1 Scene).

Sepanjang Timeline dari tiap Scene, kita dapat menempatkan Object (text, gambar, dll) yang boleh diberikan Effect. Dan Effect-effect ini dimulai dan dihentikan di suatu Frame tertentu dan bisa dikontrol dengan memasukkan Action dan Event.

Sprite adalah Object yang paling kompleks di SwishMax atau bisa disebut sebagai Movie kecil. Sprite biasanya memuat beberapa object yang berbeda dan masing-masing mempunyai Effect yang berbeda pula.

Modul 1

Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

(3)

Main Menu merupakan menu pilihan utama dalam mengoperasikan SwishMax diantaranya menu File, Edit, View, Insert, Modify, Control, Tools, Panels dan Help.

New (Ctrl+N) : digunakan untuk membuat movie baru

Open (Ctrl+O) : digunakan untuk membuka file .swi (movie Swishmax) atau file-file format lain tapi masih didukung oleh SwishMax.

Save (Ctrl+S) : digunakan untuk menyimpan movie yang sedang aktif

Save As : digunakan untuk menyimpan movie yang aktif dengan nama baru

New from template : membuat file baru dari template Save as template : menyimpan proyek sebagaitemplate New window : membuka window SwishMax baru

Samples : membuka file contoh yang ada di dalam SwishMax Import :Import file yang dapat digunakan dalam suatu project Export : digunakan untuk mengexpor movie SwishMax menjadi file .swf, movie(.avi), file .html dan file execute (.exe).Test : menguji file ke dalam flash player atau browser:

Nama-nama file yang terakhir dibuat dan siap untuk dibuka kembali

Close : menutup file yang sedang dikerjakan Exit : keluar dari SwishMax:

Modul 1 1.3

Undo & Redo : dipakai untuk mengulang kembali tindakan terakhir yang dilakukan dan redo jika undo yang dilakukan tidak diinginkan. Sebagai shortcut keys untuk undo adalah Ctrl +Z.

Cut : untuk memotong dan memindahkan suatu object

Copy : digunakan untuk meng-copy object atau efek yang dipilih ke clipboard

Paste : digunakan untuk men-paste object atau efek dari Clipboard ke movie SwishMax yang sedang aktif

Delete : digunakan untuk menghapus object atau efek yang sedang dipilih

Find : memungkinkan pengguna untuk mencari text tertentu dalam SwishMax

Show/Hide/Lock : untuk menampilkan atau menyembunyikan atau mengunci suatu object yang diinginkan (sedang di-klik) Open, Expand dan Close object berkaitan dengan tanda dan

pada dan

(4)

Zoom In : digunakan untuk memperbesar tampilan pada panel layout

Zoom Out : digunakan untuk mempekecil tampilan pada panel layout

Fit Scene In Window : digunakan untuk menampilkan supaya scene tampak semuanya/mencukupi pada panel layout

Scene : untuk menambahkan scene baru kedalam movie

Text : digunakan untuk menyisipkan teks kedalam scene/sprite/group.

Button : digunakan ntuk menambahkan button/tombol kedalam scene/sprite/group.

Sprite : digunakan untuk menyisipkan sprite kedalam scene/sprite/group.

Image : digunakan untuk menyisipkan image/gambar kedalam scene/sprite/group.

Content : untuk menyisipkan file eksternal kedalam movie. Perintah ini sama dengan perintah File Import

Effect : digunakan untuk menambahkan efek pada objek yang dipilih. Efek yang tersedia cukup banyak pada SwishMax, dan dapat langsung dilihat.

Script : digunakan untuk menambahkan script/ perintah pada suatu objek atau pada frame yang dipilih. Script disini dapat berupa Event, Action atau Difine Functions. Script yang telah dibuat dapat diedit pada Panel Script (berbentuk “tab” berdampingan dengan Layout”

Modul 1 1.4

(5)

Grouping

:

Group as Group : digunakan untuk menjadikan sekelompok objek menjadi satu group. Efek komplek dapat diaplikasikan ke group

Group as Button : untuk menjadikan sekelompok objek yang dipilih menjadi suatu Button/tombol.

Group as Sprite : untuk menjadikan sekelompok objek yang dipilih menjadi suatu sprite.

Group As Shape : untuk menjadikan sekelompok objek yang dipilih menjadi sebuah shape.

Ungroup : untuk memecah group atau sprite menjadi objek terpisah.

Convert :

Convert to button : untuk mengkonversi suatu objek menadi sebuah button

Convert to Sprite : untuk mengkonversi suatu objek mendjadi sebuah sprite

Play Movie : Memainkan movie secara keseluruhan

Play Timeline : untuk memainkan Scene atau Sprite yang sedang aktif

Play Effect : untuk memainkan bagan dari Scene yang mengandung efek yang dipilih

Stop : untuk menghentikan movie, scene, atau efek yang sedang dimainkan.

Modul 1

(6)

Modul 1 1.6 Select : untuk memilih, memindahkan atau menskala objek dengan cara mengklik dan men-drag objek yang dipilih.

Reshape : untuk membentuk ulang grafik cara mengklik dan men-drag objek yang dipilih.

Fill transporm : untuk mentrasformasi gradient atau image fill tanpa merubah objek Motion Path : untuk memplot jalur gerak dari suatu objek dengan cara mengklik dan men-drag objek yang dipilih.

Line : untuk menggambar garis Pencil : untuk menggambar bebas

Bezier : untuk menggambar set dari kurva bazier atau segmen garis Text : untuk menambahkan teks pada movie

Elipse/Circle : untuk menggambar elips atau lingkaran Rectangle/Square : untuk menggambar kotak/kurva

Auto Shape : untuk menggambar objek dengan bentuk-bentuk tertentu seperti gambar berikut : (untuk mendapatkan gambar tersebut tekan tombol Auto Shape agak lama sampai muncul

gambar yang dimaksud)

Timeline

Seperti halnya sebuah film biasa, Scene terdiri atas beberapa buah frame yang akan berjalan berurutan ataupun tidak yang dapat dikontrol melalui perintah pada panel Script. Sedangkan Timeline merupakan kumpulan dari frame-frame, yang dimulai dari frame sebelah kiri dan berakhir pada frame sebelah kanan. Untuk lebih jelasnya perhatikan gambar berikut :

Tekan tombol akan diperoleh tampilan berikut

Baris teratas merupakan frame events yang berhubungan dengan action-action pada scene Contoh di atas adalah Scene_1. Sebuah action akan dijalankan bila movie telah sampai pada frame-frame tertentu. Dalam satu frame biasanya terdapat satu atau lebih action.

Sedangkan baris-baris dibawahnya merupakan frame yang berhubungan dengan objek-objek yang ada pada Scene. Baris-baris tersebut ditampilkan dalam urutan tertentu, dimana object yang lebih di atas akan tampil lebih di atas dalam tampilan pada layout. Seperti contoh di atas, object “hello” akan tampil diatas object “Shape”, begitu seterusnya jika ada object-object di bawahnya.

Untuk menghapus object

(7)

Outline

Modul 1 1.7

Di dalam outline dapat diketahui berapa banyak scene, object, dan posisinya saat ini di movie. Dengan menekan Insert kita dapat menyisipkan object baru, tombol kita dapat menghapus object di scene.

Tombol dipakai untuk mengubah posisi object tertentu ke atas atau ke bawah relatif terhadap object yang lain.

Toolbars and layout

Klik tombol Script jika ingin menambahkan atau menulis perintah (script) dari SwishScript dan tampilan yang muncul adalah

Properties

Memuat karakteristik (sifat) dari semua item yang digunakan dalam movie.

Mengatur Scene

Saat pertama kali membuat project, sebaiknya atur dahulu scene-nya dan disesuaikan dengan scene yang kita harapkan. Diantara beberapa hal yang harus diatur antara lain:

1. Mengatur ukuran scene

Untuk mengatur scene dapat dilakukan dengan cara mengubah nilai dari Width dan Height dalam satuan pixels

2. Mengubah background scene

Untuk mengubah background color scene dengan cara mengubah warna default background (putih) menjadi sesuai pilihan.

3. Mengubah Frame Rate

Untuk mengubah frame rate dapat dilakukan dengan cara mengubah nilai frame rate dalam satuan fps.

4. Untuk memberhentikan animasi saat sampai diakhir, dapat dilakukan dengan cara mencentang pilihan Stop Playing at the end of movie

(8)

Modul 2

2.1

MODUL 2

ANIMASI TEKS

Mengatur Scene

Saat pertama kali membuat project, sebaiknya atur dahulu scene-nya dan disesuaikan dengan scene yang kita harapkan. Diantara beberapa hal yang harus diatur antara lain:

1. Mengatur ukuran scene

Untuk mengatur scene dapat dilakukan dengan cara mengubah nilai dari Width dan Height dalam satuan pixels

2. Mengubah background scene

Untuk mengubah background color scene dengan cara mengubah warna default background (putih) menjadi sesuai pilihan.

3. Mengubah Frame Rate

Untuk mengubah frame rate dapat dilakukan dengan cara mengubah nilai frame rate dalam satuan fps.

4. Untuk memberhentikan animasi saat sampai diakhir, dapat dilakukan dengan cara mencentang pilihan Stop Playing at the end of movie

(9)

Modul 2

2.2 Membuat Animasi Teks

1. Klik menu Insert Æ Text, dan ganti tulisan/teks tersebut menjadi Selamat Datang di...

2. Atur model font, ukuran font, dan warna font di jendela propertis yang ada.

3. Klik kembali menu: Insert Æ Text, dan buat tulisan/teks yang kedua yaitu Pelajaran Matematika SMP. Hingga di Layout Panel terdapat dua kalimat yang tertata sebagai berikut.

4. Untuk memberikan efek animasi, klik teks yang pertama. Kemudian klik kanan, klik menu Effect Æ Core Effect Æ 3D Spin.

(10)

Modul 2

2.3 5. Berikut ini gambar panel timeline dengan efek transform pada text Selamat Datagng di...

6. Durasi efeks transform secara default selama 20 frame, untuk mengubahnya bisa diatur pada properties dengan cara pada panel timeline klik kanan text efek Selamat Datang di... tersebut.

(11)

Modul 2

2.4 7. Ubah durasi efek transform menjadi 15 frame.

8. Dengan prosedur yang sama, teks yang kedua diberi efeks squeeze, dengan cara klik teks yang kedua. Kemudian klik kanan, pilih menu: Effect Æ Core Effect Æ Squeeze. Ubah durasi efek squeeze menjadi 25.

(12)

Modul 2

2.5 Catatan: Pastikan posisi frame pada timeline berada di frame ke-16, agar efek sqeeze dimainkan saat efek transform sudah selesai.

9. Untuk melihat hasilnya, klik menu Control Æ Play Movie

10. Agar file yang dibuat dapat digunakan untuk keperluan lainnya seperti untuk keperluan pembuatan media pembelajaran maupun website, maka file tersebut harus di eksport terlebih dahulu, dengan cara klik menu File Æ Export Æ SWF … Æ File Name: HomeÆ Save

Catatan:

(13)

Modul 3

3.1

MODUL 3

ANIMASI GAMBAR

A. Membuat Animasi Gambar Menggunakan Tool Motion Path 1. Klik menu: File Æ New

2. Dengan menggunakan tools ellipse, buatlah gambar lingkaran. Untuk mengubah atribut lingkaran seperti warna isi maupun folder bisa diatur pada properties.

3. Langkah selanjutnya membuat animasi pada gambar lingkaran tersebut dengan cara klik objek lingkaran, kemudian klik tools Motion Path dan Gerakkan mouse dengan cara tekan dan jalankan kemudian klik pada setiap pergerakan yang diinginkan. Berikut ini contoh pergerakan (motion path) dari objek bola tersebut.

4. Bila motion path-nya sudah dibuat, maka timeline akan terlihat seperti pada gambar berikut. Jumlah perpindahan tergantung banyaknya proses ‘klik’ saat melakukan motion path sebelumnya.

(14)

Modul 3

3.2 6. Agar file yang dibuat dapat digunakan untuk keperluan lainnya seperti, maka file

tersebut harus di ekspor terlebih dahulu, dengan cara klik menu File Æ Export Æ SWF … Æ File Name: AnimasiBÆ Save

B. Membuat Animasi Gambar Menggunakan Efek Move dan Diperbesar 1. Klik menu: File Æ New

2. Dengan menggunakan tools Rectangel, buatlah gambar kotak.

3. Gambar kotak tersebut akan diberi efek Move sehingga berpindah tempat dari pojok kiri atas menuju pojok kanan bawah dan membesar seperti gambar berikut

(15)

Modul 3

3.3 5. Untuk melihat preview animasi, aktifkan Preview Frame dengan cara pilih menu Control

Æ Preview Frame

6. Pastikan posisi timeline berada pada frame ke-10

7. Pindahkan gambar kotak ke pojok kanan bawah dan diperbesar, sehingga menjadi seperti berikut

7. Untuk melihat hasilnya, klik menu Control Æ Test Movie

8. Agar file yang dibuat dapat digunakan untuk keperluan lainnya seperti, maka file tersebut harus di ekspor terlebih dahulu, dengan cara klik menu File Æ Export Æ SWF … Æ File Name: animasiCÆ Save

C. Membuat kubus dengan Effect bidang sisi-sisinya di Frame ke-1Æ Add Effect Æ Place untuk Object merah I

(16)

Modul 3

3.4 di Frame ke-5Æ Add Effect Æ Place untuk Object hitam-kuning I

di Frame ke-7Æ Add Effect Æ Place untuk Object merah II di Frame ke-9Æ Add Effect Æ Place untuk Object biru II

di Frame ke-11Æ Add Effect Æ Place untuk Object hitam-kuning II

di Frame ke-15Æ Add Effect Æ Move untuk Object merah I sampai di Frame ke-17.

Dengan cara yang sama lakukan Add Effect Æ Move berturut-turutuntuk : 1.Object biru I Æ move dari Frame ke-18 sampai dengan ke-21

2. Object hitam-kuning II Æ move dari Frame ke-22 sampai dengan ke-31 3.Object hitam-kuning I Æ move dari Frame ke-32 sampai dengan ke-38 4. Object merah II Æ move dari Frame ke-40 sampai dengan ke-43 5.Object biru II Æ move dari Frame ke-44 sampai dengan ke-47

Simpan projek Anda dengan nama kubus bentuk pecah.swi. Ekspor juga hasil kerja Anda dalam format aplikasi flash dengan nama yang sama: kubus bentuk pecah.swf.

(17)

Modul 4

4.1

MODUL 4

XARA WEBSTYLE 3.0

Xara Webstyle merupakan program untuk membuat komponen-komponen image (gambar) yang dibutuhkan dalam mendesain suatu website seperti tombol (button), latar belakang (background), foto, theme, menu navigator, banner, dan lain-lain. Namun demikian, pemanfaatannya bisa lebih luas tidak hanya digunakan pada desain web saja, karena komponen-komponen gambar (image) yang terdapat didalamnya dapat digunakan untuk keperluan lainnya, seperti media pembelajaran atau media presentasi.

Instalasi Xara Webstyle

1. Jalankan file Setup.exe dengan cara klik 2 kali file tersebut, sehingga muncul gambar berikut:

2. Klik tombol Next, sehingga keluar form License Agreement, klik pilihan Yes, sehingga muncul tampilan pilihan tempat untuk menginstall program ini seperti pada gambar berikut:

3. Bila ingin menginstall ditempat lain tekan tombol Browse dan tentukan lokasi menginstall. Bila ingin menginstall secara default pada direktori yang ada, tekan

(18)

Modul 4

4.2 tombol Next langsung, sehingga akan keluar form untuk menginstall jenis instalasii seperti pada tampilan berikut:

4. Tekan tombol Next 2 kali, sehingga akan keluar tampilan proses instalasi Xara Webstyle seperti gambar di bawah. Tunggu proses instalasi hingga selesai.

5. Bila proses instalasi selesai, tekan Finish. Program Xara Webstyle telah terinstall dan siap untuk dipakai.

(19)

Modul 4

4.3 Mengaktifkan Xara Webstyle

Cara mengaktifkan Xara Web Style:

Klik menu Start Æ Programs Æ Xara Webstyle 3.0 Æ Xara Webstyle 3.0, hingga akan keluar tampilan awal sebagai berikut:

Menu Utama

Menu tipe desain

Menu utama terdiri dari Start untuk kembali ke menu utama, menu Load maupun Import untuk memasukkan image yang telah dibuat tetapi dengan cara yang berbeda, Load memasukkan file sesuai dengan default project sedangkan Import dari berbagai tempat. Menu Browse untuk melihat berbagai template image yang sudah ada. Sedangkan menu Tutorial berisi penjelasan tentang penggunaan Xara WebStyle ini. Penjelasan penggunaan Xara WebStyle yang lebih rinci bisa dibaca pada tutorial tersebut

Deskripsi singkat fitur

- Headings Æ Untuk membuat heading

- 3Dheadings Æ Untuk membuat heading 3 dimensi - Dividers Æ Untuk membuat garis pembatas (divider) - Logos Æ Untuk membuat logo

- BannerAdds Æ Untuk membuat banner promosi

- Navbars & Menus Æ Untuk membuat bar navigasi atau menu - ThemeSets Æ Untuk membuat image berdasarkan themeset - Buttons Æ Untuk membuat tombol (button)

- Photos Æ Untuk mengedit foto

- Backgrounds Æ Untuk membuat background - Bullets Æ Untuk membuat bullets

(20)

Modul 4

4.4 Navigate Button Search Template Desain Menu Image Template Window Keterangan gambar: - Desain Menu

Æ untuk menentukan/mengubah desain template - Search Template

Æ untuk mencari image berdasarkan kriteria-kriteria tertentu - Image Template

Æ untuk memilih template image yang sesuai dengan pilihan - Navigate Button

Æ untuk navigasi ke berbagai halaman dari image template - Window Preview

Æ untuk melihat preview dari image template

Membuat Headings

(21)

Modul 4

4.5 2. Klik desain yang diinginkan dengan menekan tombol Next atau forward 3. Pilih salah satu desain yang diinginkan dengan cara Klik desain tersebut.

4. Klik tombol Text untuk mengganti tulisan/teks pada desain tersebut.

5. Terdapat pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna, Texture untuk mengubah dasar dari desain judul, Shadow untuk memberikan efek bayangan, serta Size untuk mengubah ukuran desain judul.

6. Klik tombol Save untuk menyimpan hasil desain.

7. Pada pilihan File Size pilih yang High Quality kemudian klik tombol Save Graphic…Æ dan pilih folder tempat menyimpan data

8. Isi bagian File name, misal: hd_1, Æ kemudian klik tombol Save Manipulasi Foto

Xara WebStyle juga menyediakan fitur untuk melakukan manipulasi foto,

misalnya efek brightness, saturation dan lain-lain. Berikut ini langkah-langkah

untuk melakukan manipulasi terhadap foto.

(22)

Modul 4

4. 1. Klik menu Start

2. Klik menu: Photos

3. Pilih gambar yang akan dimanipuasi. Catatan: Jika ukuran gambar melebihi screen, maka akan timbul pilihan apakah gambar tersebut diresize atau tetap. Jika diresize, maka ukuran gambar akan diperkecil menjadi sesuai screen pada Xara Webstyle.

4. Pada menu Enhance, atur efek gambar seperti brightness, saturation, Transparancy, Contrast, Blur/Sharpen dan Tint

5. Pada menu Rotate untuk melakukan rotasi pada gambar.

6. Pada menu Size & Crop untuk mengubah ukuran dan untuk pemotongan terhadap gambar

7. Pada menu Thumbnail untuk memberikan gambar thumbnail.

(23)

Modul 4

4. 8. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah

background dari gambar dan Texture untuk mengubah dasar dari desain menggunakan teksture.

9. Klik tombol: Save

10. Klik tombol: Save Graphic… Æ dan pilih folder tempat menyimpan data Membuat 3DHeadings

1. Klik menu Start

2. Klik menu: 3DHeadings

3. Klik desain yang diinginkan dengan menekan tombol Next atau Forward 4. Klik dan pilih salah satu desain

5. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna, Texture untuk mengubah dasar dari desain judul, Bevel untuk memberikan efek 3 dimensi, Shadow untuk memberikan efek bayangan, serta Size untuk mengubah ukuran desain judul.

6. Klik tombol: Text dan ganti teks/tulisan tersebut

(24)

Modul 4

4.8 7. Klik tombol: Save

8. Klik tombol: Save Graphic… Æ dan pilih folder tempat menyimpan data 9. Isi bagian File name, misal: hd_2, Æ kemudian klik tombol Save

Membuat Dividers 1. Klik menu Start 2. Klik menu: Dividers

5. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna, Texture untuk mengubah dasar dari desain, Shadow untuk memberikan efek bayangan dan Size untuk mengubah ukuran desain.

7. Klik tombol: Save Graphic… Æ dan pilih folder tempat menyimpan data 8. Isi bagian File name, misal: div_1, Æ kemudian klik tombol Save

(25)

Modul 4

4.9 Membuat Logos

1. Klik menu Start 2. Klik menu: Logos

5. Klik tombol Text untuk mengganti tulisan/teks pada desain tersebut.

6. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna, Texture untuk mengubah dasar dari desain, Shadow untuk memberikan efek bayangan dan Size untuk mengubah ukuran desain.

8. Klik tombol: Save Graphic…Æ dan pilih folder tempat menyimpan data 9. Isi bagian File name, misal: logo, Æ kemudian klik tombol Save

(26)

Modul 4

4.10 Membuat BannerAdds

1. Klik menu Start 2. Klik menu: BannerAds

6. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna, Texture untuk mengubah dasar dari desain, dan Size untuk mengubah ukuran desain.

8. Klik tombol: Save Graphic…Æ dan pilih folder tempat menyimpan data 9. Isi bagian File name, misal: Banner1, Æ kemudian klik tombol Save

(27)

Modul 4

4.11 Membuat Navbars & Menus

1. Klik menu Start

2. Klik menu: Navbars & Menu

6. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna, Texture untuk mengubah dasar dari desain judul, dan Size untuk mengubah ukuran desain, NavBars untuk menambah menu dan sub menu.

8. Klik tombol: Save Graphic…Æ dan pilih folder tempat menyimpan data 9. Isi bagian File name, misal: mn_1, Æ kemudian klik tombol Save

Membuat Buttons 1. Klik menu Start 2. Klik menu: Buttons

(28)

Modul 4

4.12 5. Klik tombol: Text dan ganti teks/tulisan tersebut

6. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna, Texture untuk mengubah dasar dari desain, Bevel untuk memberikan efek 3 dimensi, Shadow untuk memberikan efek bayangan, serta Size untuk mengubah ukuran desain.

8. Klik tombol: Save Graphic…Æ dan pilih folder tempat menyimpan data 9. Isi bagian File name, misal: bt_1, Æ kemudian klik tombol Save

Membuat Backgrounds 1. Klik menu Start

2. Klik menu: Backgrounds

(29)

Modul 4

4.13 5. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna,

dan Size untuk mengubah ukuran desain.

6. Klik tombol: Save Graphic…Æ dan pilih folder tempat menyimpan data 7. Isi bagian File name, misal: background1, Æ kemudian klik tombol Save Membuat Bullets

1. Klik menu Start 2. Klik menu: Bullets

(30)

Modul 4

4.14 5. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna,

Texture untuk mengubah dasar dari desain, Shadow untuk memberikan efek bayangan dan Size untuk mengubah ukuran desain.

7. Klik tombol: Save Graphic… Æ dan pilih folder tempat menyimpan data 8. Isi bagian File name, misal: bt_1, Æ kemudian klik tombol Save

Catatan:

- Sebaiknya dalam penamaan file digunakan huruf kecil (lower case)

- Untuk memudahkan dalam identifikasi suatu image sebaiknya gunakan aturan dalam penamaan file tersebut. Berikut ini contoh aturan dalam penamaan image

Tipe Image Penamaan File Button bt_nomorurut, misal bt_1, bt_2 Heading hd_nomorurut, misal hd_1, hd_2 Background bg_nomorurut, misal bg_1, bg_2 Bullet bt_nomorurut, misal bt_1, bt_2 Banner bn_nomorurut, misal bn_1, bn_2

(31)

Modul 5

5.1

MODUL 5

SUARA

File audio yang didukung oleh Swish antara lain *.mp3 dan *.wav. Efek suara dapat diberikan saat berada pada frame tertentu atau pada saat ada kejadian mouse (mouse event). Ingat !! dengan tambahan efek suara, hal ini berarti akan memperbesar ukuran file movie.

Menambahkan Efek Suara

Berikut ini adalah tahapan dalam memberikan efek suara pada posisi frame ke-1. 1. Klik kanan Frame ke-1 pada Panel Scene dan pilih menu Sound Æ playSound()

2. Pada Action Panel terlihat highlight berwarna merah yang berarti penulisan script tidak lengkap karena tidak ada file yang dijalankan.

3. Pilih tombol Import , dan pilih file suara yang akan dimasukkan dalam hal ini file “romance.mp3”. Selanjutnya pilih (klik) file “romance.mp3” tersebut, sehingga tampilan Panel Script menjadi seperti berikut.

(32)

Modul 5

5.2 4. Pilih tab Layout Panel dan jalankan movie. Efek suara “romance.mp3” akan dijalankan

pada frame ke-1 Catatan:

• Untuk mengubah properties dari file suara tersebut dapat dilakukan dengan cara memilih Properties pada Panel Script. Berikut adalah properties file suara

• Untuk mengubah Efek Suara (Sound Effects) dapat dilakukan dengan cara memilih Sound Effect pada Panel Script . Berikut adalah beberapa efek sound yang dimungkinkan.

(33)

Modul 5

5.3 Memberhentikan Efek Suara

Berikut ini adalah tahapan dalam memberhentikan efek suara pada posisi frame 25. 1. Klik kanan Frame 25 pada Panel Scene dan pilih menu Sound Æ stopSound()

2. Pilih file suara yang akan diberhentikan (dalam hal ini romance.mp3), sehingga tampilan panel script menjadi seperti berikut:

3. Pilih tab Layout Panel dan jalankan movie. Efek suara “romance.mp3” akan dijalankan pada frame ke-1 dan diberhentikan pada frame ke-25

(34)

Modul 6

6.1

MODUL 6

BUTTON DAN MENU

A. Bekerja dengan Button

Dengan menggunakan objek Button dapat ditambahkan efek-efek yang terkait dengan mouse misalnya mouseover, release, press dan lain-lain. Pada button juga dapat dipilih 4 state yang berbeda, yaitu:

• Up State (default), ditampilkan saat Movie dijalankan dan mouse di luar button

• Over State, ditampilkan saat mouse digerakkan di atas button, dapat digunakan untuk memberikan efek roll over

• Down State, ditampilkan saat di klik pada button

• Hit State, untuk menentukan area yang aktif. State ini invisible dan tidak pernah ditampilkan

Untuk membuat button dapat melalui 2 cara, yaitu tekan tombol Insert Button ( )pada Insert Toolbar atau melalui sebuah objek yang sudah dikonversikan ke button dengan cara pilih menu Modify Æ Convert Æ Convert to Button, atau dengan tekan tombol Convert to Button pada Grouping Toolbar.

Bentuk button yang beraneka ragam dan menarik dapat Anda dapatkan dengan menggunakan aplikasi Xara WebStyle

Membuat Button

1. Buka file kubus bentuk pecah.swi.

2. Agar animasi tidak langsung dijalankan, sebaiknya animasi dihentikan dahulu pada frame ke-1, dengan cara klik kanan pada frame ke-1 pilih menu Movie Control Æ stop()

3. Ambil gambar/image button “Play” dari aplikasi Xara Webstyle yang telah Anda simpan, atau buat button yang baru.

4. Cara mengambil gambar/image dari file: pilih menu Insert Æ Image kemudian pilih gambar yang akan Anda tambahkan

5. Konversi gambar tersebut menjadi sebuah tombol dengan cara klik kanan pada pada lingkaran tersebut, pilih menu Convert Æ Convert to Button atau pilih menu ModifyÆ Convert Æ Convert to Button.

6. Untuk menambahkan efek yang lebih dinamis (roll over) dapat ditambahkan efek pada Over State dengan menambahkan objek gambar Button dengan warna yang berbeda. Berikut ini adalah kondisi awal ketika button “Play” belum ditambahkan Over State

(35)

Modul 6

6.2 7. Memberikan Over State dengan cara klik kanan pada Button pilih menu Has Over State.

8. Lihat di Outline Panel, klik pada bagian Over State, kemudian insert image/gambar “Play” dengan warna yang berbeda.

9. Sehingga tampilan Outline panel menjadi seperti berikut:

10. Dengan cara yang sama buatlah tombol yang kedua sebagai berikut dengan nama “Stop”. Sertakan pula efek roll over.

(36)

Modul 6

6.3 Memberikan Efek Suara pada Button

1. Tetap bekerja pada file kubus bentuk pecah.swi

2. Melalui Outline Panel, klik pada button “Play”, bukan pada masing-masing state karena Swish akan mengabaikannya. Kemudian Klik Kanan dan pilih menu Script Æ Events Æ Button Æ on (Rollover), hingga muncul panel Script sebagai berikut:

3. Tambahkan Efek Suara dengan cara pilih menu Add Script Æ Sound Æ PlaySound(), dan pilih suara yang diinginkan. Jika belum ada dapat diimport dahulu hingga panel script menjadi seperti berikut:

4. Untuk menambahkan efek pada even On Press pada mouse, dapat dilakukan dengan cara pilih menu Add Script Æ Events Æ Button Æ on (Press). Kemudian dengan cara yang sama seperti di atas, berikan efek suara lainnya, sehingga tampilan panel script menjadi sebagai berikut:

5. Dengan menggunakan prosedur yang sama, berikan pula efek suara pada button Stop. Mengontrol Movie Menggunakan Button

Pada percobaan kali ini, kita akan mengatur jalannya movie menggunakan button yaitu button “Play”untuk memulai dan “Stop” untuk menghentikan movie. Pada contoh kali ini ditambahkan pula suara background yang menyertai jalannya movie.

• Memulai Movie

1. Pada button Play, klik kanan dan pilih menu Script Æ Events Æ Button Æ on(release) 2. Tambahkan script untuk mulai menjalankan movie dengan cara pilih menu Add Scripts

Æ Movie Control Æ gotoAndPlay Æ gotoAndPlay(FRAME) hingga tampilan Script Panel menjadi sebagai berikut:

(37)

Modul 6

6.4 3. Untuk menambah background suara, bisa ditambahkan script untuk memutar lagu

“romance.mp3”, sehinga Script Panel menjadi sebagai berikut:

4. Untuk melihat hasilnya, jalankan movie tersebut. • Menghentikan Movie

1. Pada button Stop, klik kanan dan pilih menu Script Æ Events Æ Button Æ on(release) 2. Tambahkan script untuk menghentikan movie dan menuju ke frame 1 agar mulai ke state

awal, dengan cara pilih menu Add Scripts Æ Movie Control Æ gotoAndStop Æ gotoAndStop(FRAME). Untuk menghentikan background musik sertakan pula script untuk menghentikan sound “romance.mp3”, hingga tampilan Script Panel menjadi sebagai berikut:

3. Simpan hasil kerja Anda dengan nama kubus bentuk pecah2.swi. 4. Untuk melihat hasilnya, jalankan movie tersebut.

(38)

Modul 6

6.5