Anda di halaman 1dari 44

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

1.1

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.
Main Menu

Insert Toolbar

Standard
Toolbar

Outline
Panel

Control
Toolbar
Timeline

Script
Toolbox

Layout
Panel
Movie Panel

Tool Options

View Optons

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

1.2

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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 sebagai template
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:
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
pada

dan

dan

Modul 1
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

1.3

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

1.4

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

1.5

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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

Modul 1
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

1.6

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

Outline
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

Modul 1
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

1.7

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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

Modul 2
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

2.1

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 2
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

2.2

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 2
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

2.3

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 2
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

2.4

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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:
Pada satu text dapat ditambahkan beberapa effect

Modul 2
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

2.5

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

5. Untuk melihat hasilnya, klik menu Control Test Movie

Modul 3
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

3.1

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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

4. Berikan efek move dengan cara klik gambar kotak klik kanan Effect Move

Modul 3
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

3.2

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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

di Frame ke-3 Add Effect Place untuk Object biru I

Modul 3
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

3.3

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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-turut untuk :
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.

Modul 3
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

3.4

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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
Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.1

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.2

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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 tipe
desain

Menu Utama

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
- 3Dheadings
- Dividers
- Logos
- BannerAdds
- Navbars & Menus
- ThemeSets
- Buttons
- Photos
- Backgrounds
- Bullets

Untuk membuat heading


Untuk membuat heading 3 dimensi
Untuk membuat garis pembatas (divider)
Untuk membuat logo
Untuk membuat banner promosi
Untuk membuat bar navigasi atau menu
Untuk membuat image berdasarkan themeset
Untuk membuat tombol (button)
Untuk mengedit foto
Untuk membuat background
Untuk membuat bullets

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.3

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

Window

Desain Menu

Navigate Button
Image Template

Search Template

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
1. Klik menu Headings, sehingga akan muncul tampilan sebagai berikut:

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.4

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.5

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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


Transparancy, Contrast, Blur/Sharpen dan Tint

seperti

brightness,

saturation,

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.

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.6

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.7

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.
2.
3.
4.

Klik menu Start


Klik menu: Dividers
Klik desain yang diinginkan dengan menekan tombol Next atau Forward
Klik dan pilih salah satu desain

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.
6. Klik tombol: Save
7. Klik tombol: Save Graphic dan pilih folder tempat menyimpan data
8. Isi bagian File name, misal: div_1, kemudian klik tombol Save
Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.8

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

Membuat Logos
1.
2.
3.
4.

Klik menu Start


Klik menu: Logos
Klik desain yang diinginkan dengan menekan tombol Next atau Forward
Klik dan pilih salah satu desain

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.
7. Klik tombol: Save
8. Klik tombol: Save Graphic dan pilih folder tempat menyimpan data
9. Isi bagian File name, misal: logo, kemudian klik tombol Save
Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.9

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

Membuat BannerAdds
1.
2.
3.
4.

Klik menu Start


Klik menu: BannerAds
Klik desain yang diinginkan dengan menekan tombol Next atau Forward
Klik dan pilih salah satu desain

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, dan Size untuk mengubah ukuran
desain.
7. Klik tombol: Save
8. Klik tombol: Save Graphic dan pilih folder tempat menyimpan data
9. Isi bagian File name, misal: Banner1, kemudian klik tombol Save

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.10

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

Membuat Navbars & Menus


1.
2.
3.
4.
5.

Klik menu Start


Klik menu: Navbars & Menu
Klik desain yang diinginkan dengan menekan tombol Next atau Forward
Klik dan pilih salah satu desain
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 judul, dan Size untuk mengubah
ukuran desain, NavBars untuk menambah menu dan sub menu.
7. Klik tombol: Save
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.
2.
3.
4.

Klik menu Start


Klik menu: Buttons
Klik desain yang diinginkan dengan menekan tombol Next atau Forward
Klik dan pilih salah satu desain

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.11

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.
7. Klik tombol: Save
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.
2.
3.
4.

Klik menu Start


Klik menu: Backgrounds
Klik desain yang diinginkan dengan menekan tombol Next atau Forward
Klik dan pilih salah satu desain

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.12

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.
2.
3.
4.

Klik menu Start


Klik menu: Bullets
Klik desain yang diinginkan dengan menekan tombol Next atau Forward
Klik dan pilih salah satu desain

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.13

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.
6. Klik tombol: Save
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
Button
Heading
Background
Bullet
Banner

Penamaan File
bt_nomorurut, misal bt_1, bt_2
hd_nomorurut, misal hd_1, hd_2
bg_nomorurut, misal bg_1, bg_2
bt_nomorurut, misal bt_1, bt_2
bn_nomorurut, misal bn_1, bn_2

Modul 4
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

4.14

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 5
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

5.1

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 5
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

5.2

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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

Modul 5
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

5.3

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.1

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.2

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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 Playuntuk 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:
Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.3

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

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.

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.4

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

Menu
Pada modul kali ini akan dijelaskan mengenai pemanfaatan menu untuk mengontrol jalannya
suatu aplikasi.
Membuat Scene

Halaman Utama

Berikut ini adalah langkah-langkah untuk membuat halaman utama.


1. Buat movie baru
2. Pada panel properties dan tab Scene, atur konfigurasi scene yaitu ubah nama scene
menjadi Hal_Utama.

3. Masukkan file gambar menu yang sudah Anda buat menggunakan Xara Webstyle ke
dalam scene dengan memilih menu Insert Image

4. Kemudian cari dan pilih file image yang akan Anda ambil. Gunakan tombol ctrl untuk
mengambil lebih dari satu file. Kemudian klik Open

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.5

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

5. Sehingga pada outline panel akan ditampilkan sebagai berikut:

6. Atur objek gambar menjadi sehingga menjadi tampilan seperti berikut. Kemudian ubah
objek gambar pada menu Bangun Datar, Bangun Ruang, dan Jaring-Jaring tersebut
menjadi button.
Catatan: Gambar yang dibelakangnya mengandung nama over nantinya digunakan
dalam efek Roll Over, sehingga untuk sementara tidak perlu diatur.

7. Berikan efek roll over pada button-button tersebut dengan cara seperti yang telah
dijelaskan pada latihan sebelumnya. Sehingga tampilan pada Outline Panel menjadi:

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.6

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

8. Untuk melihat hasilnya, jalankan movie tersebut.


9. Simpan projek Anda dengan nama Animasi_Math.swi
Menyisipkan Content
Selanjutnya kita akan menyisipkan beberapa konten ke dalam scene Hal_Utama sebagai isi
dari tiap-tiap menu yang telah dibuat. Konten yang kita ambil adalah dari movie-movie yang
pernah dibuat sebelumnya.
1. Pilih menu Insert Content

2. Pilih file animasi(swf) yang akan diambil. Misal kita pilih file Home.swf. Kemudian klik
Open.

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.7

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

Ketika Anda menyisipkan konten, impor pula script di dalamnya, dengan cara centang
pada pilihan Include decompiled script.

Catatan:
Untuk memanipulasi sprite, pastikan posisi highlight pada outline berada pada posisi
nama sprite dan tidak terinci.

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.8

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

Berikut ini pada posisi yang salah:

3. Klik sprite Home.swf pada Outline Panel, kemudian atur tampilan sprite tersebut hingga
tampak rapi pada layout panel.
4. Berikut ini tampilan pada Layout Panel

Menyisipkan Konten Berikutnya


Pada bagian ini kita akan menyisipkan sebuah konten lagi untuk mengisi menu Bangun
Ruang.
1. Ambil file kubus bentuk pecah2.swf dengan cara memilih menu Insert Content.
2. Atur tampilannya, sehingga menumpuki teks Selamat Datang di... Pelajaran Matematika
SMP.

3. Perhatikan durasi/waktu dari konten Home yang sebelumnya sudah Anda masukkan.
Home berdurasi 40 frame. Selanjutnya kita akan mengatur bagian timeline.

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.9

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

4. Time line konten Home kita atur agar dijalankan pada frame 1 sampai 40. Klik kanan
pada frame 1 di bagian Home, kemudian pilih Place. Sehingga konten Home akan mulai
dijalankan pada frame 1.

5. Klik kanan pada frame 41 di bagian Hal_Utama, kemudian pilih Movie Control Stop().
Sehingga konten Home akan mulai dihentikan pada frame 41.

6. Kemudian time line konten kubus bentuk pecah2 kita atur agar dijalankan pada frame
42. Klik kanan pada frame 42 di bagian kubus bentuk pecah2, kemudian pilih Place.
Sehingga konten kubus bentuk pecah2 akan mulai dijalankan pada frame 41.

7. Agar konten Home tidak ikut muncul pada frame ke 42, maka hapus konten tersebut
dengan cara klik kanan pada frame 42 di bagian Home, kemudian pilih Remove.

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.10

Pengabdian Kepada Masyarakat

Program Studi Sistem Informasi - Unair

8. Konten kubus bentuk pecah2 akan dijalankan hanya ketika button pada menu Bangun
Ruang di-klik. Sehingga tambahkan script pada button Bangun Ruang dengan cara:
A.
Klik kanan pada button, pilih menu Scripts Movie Control gotoAndPlay
gotoAndPlay(FRAME). Ubah Target scene menjadi <next scene>, dan frame
menjadi 42

hingga tampilan pada script menjadi seperti berikut:


on (release) {
gotoSceneAndPlay("<current scene>",42);
}

9. Untuk melihat hasilnya, jalankan movie tersebut.


10. Simpan hasil kerja Anda.
Sebagai latihan, isi menu-menu yang lain dengan cara mengambil konten movie yang telah
Anda buat.

Modul 6
Pembuatan Media Pembelajaran dengan Menggunakan Aplikasi Swishwax

6.11