Tutorial Basic Swishmax3.0
Transcript of Tutorial Basic Swishmax3.0
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 1/24
PERTEMUAN KE 1 SESI PERTAMA : DESAIN USER INTERFACE
Desain interface adalah hal yang perlu dipikirkan dalam pembuatan sebuah media pembelajaran. Ada
bebarapa tahapan sebelum kita merancang sebuah desain interface yang baik.
Tahapan-tahapan tersebut adalah :
1. Sketsa
Sketsa adalah rancangan desain yang dibuat manual pada kertas dalam bentuk coretan-
coretan yang mengambarkan bentuk rencana tampilan yang akan dibuat. Gambar 1.1
memperlihatkan bentuk manual sebuah desain interface. Sketsa ini meliputi :
a. Ukuran stage dari interface yang akan dibuat, disesuaikan dengan rencana implementasi
dari aplikasi yang anda buat. Jika untuk desktop application biasanya mengikuti ukuran
layar monitor 1024 x 768 dengan satuan pixel. Jika untuk web maka disesuaikan dengan
lebar isi dari web dimana desain ini akan diletakkan dan biasanya sama menggunakan
satuan pixel.
b. Ukuran-ukuran gambar dalam ukuran pixel. Bisa dibuat dalam bentuk kotak2 kosong
dengan mencamtumkan ukuran pixelnya.
c. Membuat semua tampilan halaman dalam bentuk sketsa sebagai dasar dalam
merancang desain di dalam software.
2. Struktur Navigasi
Menggambarkan bentuk dan pola dari perpindahan antar halaman yang akan dibuat. Ada
beberapa pilihan struktur navigasi yang bisa dijadikan acuan. Saran saya gunakanlah pola
yang sudah ada jangan membuat suatu struktur navigasi tanpa memutuskan dulu pola apa
yang akan dipilih.
Macam-macam pola struktur navigasi :
Struktur Linier
Struktur Menu
Struktur Hierarki
Struktur Jaringan
Struktur Kombinasi
(NB: Bisa di lihat dari sumber Buku: Analisis & Desain Aplikasi Multimedia Untuk Pemasaran
karangan M.Suyanto )
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 2/24
3. Layout
Memberikan penjelasan tentang isi dari desain tampilan yang telah dirancang yang
didalamnya antara lain :
a. Pemilihan warna yang akan di tampilkan dalam desain
b. Isi dari teks yang akan digunakan meliputi : Jenis teks, Warna Teks, Ukuran Teks dll.
c. Ukuran-ukuran gambar yang direncanakan dalam mengisi desain tampilan.
Proses ini saya anjurkan dilaksanakan pada semua desain yang akan dibuat dengan baik,
agar dalam pengisian desain tampilan yang telah dibuat tidak terlalu membingungkan.
Sedangkan pada saat proses desain berlangsung kalau ada perubahan bisa dibetulkan
kemudian.
MEMULAI MERANCANG DENGAN SOFTWARE
Software aplikasi yang akan digunakan adalah SWSIH MAX 3.0 . Sebagai contoh praktek disini saya akan
menampilkan bentuk tampilan yang akan saya jelaskan langkah2nya dan sketsa tampilannya:
1. Halaman terdiri dari : Home, Gallery, dan About
2. Struktur navigasi yang digunakan : Struktur menu
3. Sketsa dan Layout :
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 3/24
Untuk memulai langkah awal dalam pembuatan Desain interface setelah sketsa, struktur navigasi dan
Layout dibuat adalah :
1. Pilih File > New
2. Pengaturan ukuran stage bisa diatur melalui movie properties yang ditunjuk oleh tanda panah
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 4/24
1
2
3. Akan Tampil pilihan seperti dibawah ini :
Untuk ukuran Dekstop diatur ukuran width= 1024 dan height = 768,
Disini anda juga bisa mengatur :
- Warna Background yang ditunjuk pada tanda panah no. 1
- Frame rate (mengatur kecepatan animasi) yang ditunjuk pada panah no. 2
- Stop playing at end movie di beri centang apabila anda menginginkan saat di play pada
ending frame berhenti. Disarankan dibiarkan kosong agar bisa selalu looping.
- Export setting for movie : digunakan untuk mensetting hasil akhir dari movie yang
diinginkan.
4. Setelah mengatur ukuran stage klik ok. Biasanya stage akan berubah ukuran dan area batasan
dari stage tidak terlihat.
5. Untuk menampilkan kembali batasan dari stage Klik icon pada view
6. Selanjutnya kita akan membuat halaman. Metode pembuatan halaman ada 2 yaitu :
a. Frame to Frame
b. Scene to scene
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 5/24
1
2
3
Yang akan kita gunakan adalah metode scene to scene. Scene adalah kertas kerja yang
digunakan sebagai tempat peletakkan objek. Dapat dilihat pada gambar dibawah yang diberi
petunjuk tanda panah no. 1.
Perhatikan pada tanda panah yang di beri no. 2 disebut dengan Outline. Digunakan sebagai
tempat untuk menyusun scene dan objek2 yang digunakan. Pada tahap berikutnya kita akan
menuyusun Scene sesuai kebutuhan.
Langkah –
Langkah :
1. Pada properties terdapat tulisan Scene_1 ubah menjadi Home (seperti yang ditunjuk oleh
tanda panah no.3) Tekan Enter.
2. Klik Menu Insert pada menu bar pilih Scene seperti pada gambar di bawah ini :
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 6/24
3. Pada Outline akan ditambahkan Scene_2, seperti hasil dibawah ini:
4. Dengan cara yang sama seperti di no. 1 ubah nama properties dari Scene_2 menjadi Gallery
5. Lakukan langkah sama dari no 2 – 4 untuk membuat About, dengan hasil Outline menjadi:
6. Perhatikan bahwa di masing-masing Scene yang ada pada Outline tertulis kalimat empty
artinya bahwa masing-masing Scene masih dalam keadaan kosong. Untuk tahap selanjutnya
kita akan mengisi masing-masing Scene.
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 7/24
MEMBUAT BACKGROUND
Langkah-Langkah :
1. Pada Outline pilihlah Home.
2. Pada Tools pilih rectangle
3. Buat kotak di stage, dengan cara mengklik dan drag mouse seperti tanda panah didalam stage,
seperti contoh dibawah :
4. Atur properties rectangle untuk menentukan warna dan line
Untuk
mengatur
pilihan
solid atau
gradient
Untuk
mengatur
outline
Mengaturwarna
Rectangle
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 8/24
5. Untuk mengatur warna Background seukuran dengan stage pilih bagian Transform. Untuk
ukuran 1024 x 768 px , atur transform ukurannya seperti dibawah ini, mulailah dari pengaturan
koordinat _x dan _y baru kemudian ukuran _width dan _height.
6. Lanjutkan dengan membuat header menggunakan Pen Tools
7. Membuat pola didalam stage dengan membuat titik-titik penghubung dengan cara klik, pola
boleh bebas, tapi untuk awal ikuti pola serperti dibawah :
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 9/24
8. Untuk mengubah warna pilih tools Selection
9. Atur Warna rectangle, posisinya bisa di lihat seperti di no. 4
10. Untuk mengatur pola desain yang dibuat digunakan tool Sub selection
11. Cara mengaturnya dengan mengklik titik-titik dari pola objek dan geser menggunakan mouse
atau tanda panah di keyboard.
12. Hasil pada outline Home teradapat 2 Shape, yang bawah adalah shape Background diatasnya
adalah shape pola. Agar terlihat perbedaan ubahlah nama Shape sesuai dengan fungsinya di
properties dengan cara pilih tulisan shape.
Hasil
Tulis disini untuk
membuat nama shape
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 10/24
13. Lakukan hal yang sama untuk shape yang lain dengan nama yang sesuai. Lock kedua shape agar
tidak mudah bergeser.
PERTEMUAN KE 1 SESI KEDUA : TATA LETAK TEXT DAN GAMBAR
Penataan dan Penulisan Text
Langakah – Langkah :
1. Aktifkan tool Text, Kemudian klik di stage dan tulis judul sesuai keinginan anda.
2. Atur Text di properties dengan posisi text terpilih.
Klik titik ini
untuk melock
shape
Klik tools
Text
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 11/24
3. Kita juga bisa mengcopy paste text dari word dengan cara di blok teks word dan pastekan ke
swish.
4. Buat area dengan text tool klik kanan didalam kotak area pilih paste.
5. Atur penataan text dan besaran kotak area dengan tools selection dan juga atur size text dengan
hasil menjadi seperti dibawah ini:
Pengaturan
Size Text
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 12/24
Menempatkan Image
Langkah – Langkah :
1. Pilih Menu Insert > Import Image
2. Tampil browser untuk mencari File image yang akan di pilih dengan mengarahkan ke folder
tempat menyimpan image > pilih imagenya > klik open
Catatan :
Untuk mengatur ukuran logo agar dapat menyesuaikan ukuran yang dinginkan bisa
menggunakan software Photoshop, dan untuk logo yang backgroundnya transparant terlebih
dahulu diedit di photoshop agar background menjadi trasnparant kemudian save dengan format
file yang bertipe .PNG
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 13/24
PERTEMUAN KE 2 SESI PERTAMA : TOMBOL
Langkah – Langkah :
1. Dengan photoshop dibuat terlebih dahulu tombol yang disesuaikan dengan ukuran apabila ingin
background transparant save dengan format .PNG
2. Disini saya siapkan tiga buah tombol yang saya beri nama HomeUp.png, HomeOver.png,
HomeDown.png
3. Cara mengambil image tombol sama seperti mengimport image klik menu insert > Insert Image
> arahkan ke folder tempat menyimpan image tombol > Pilih Tombol HomeUp.png > klik open
4.
Atur tata letak tombol HomeUp.png menggunakan tools Selection
Mengubah image tombol menjadi Tombol
1. Pilih Tombol HomeUp.png kemudian klik
kanan diatas tombol > pilih convert >
convert to Button
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 14/24
2. Masih dalam image HomeUp.png terpilih beri centang pada properties yang diberi tanda panah :
3. Pada Outline simbol image HomeUp_png berubah menjadi bentuk tanda tersebut
menunjukkan bahwa image home telah diconvert menjadi Button.
4. Klik tanda + disebelah symbol button HomeUp.png akan terlihat seperti dibawah ini :
5. Pilih HomeUp.png pada Over State seperti yang ditunjuk tanda panah diatas, pada properties :
Klik icon ini untuk menampilkan
browser
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 15/24
6. Akan ditampilkan browser untuk memilih image, pilih image yang HomeOver.png
7. Hasilnya pada stage image HomeUp.png akan digantikan dengan HomeOver.png
8. Klik tombol Play Timeline untuk mempreview hasil tombol, Dekatkan mouse ke area tombol di
stage. Jika proses anda benar maka akan terjadi perubahan warna tombol.
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 16/24
PERTEMUAN KE 2 SESI KEDUA : SOUND
Suara / sound bisa diletakkan :
1. Langsung pada frame
2. Dipanggil menggunakan Script
Langsung Pada Frame
Langkah-langkah :
1. Klik pada frame 1 di timeline yang ditunjuk oleh tanda panah apabila ingin memunculkan
backsound mulai dari frame awal.
2. Klik menu insert > import Sound
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 17/24
3. Arahkan ke tempat folder menyimpan Sound > pilih sound > Klik Open
4. Hasilnya seperti dibawah ini :
Catatan :
Karena sound langsung di tempatkan pada frame maka sound terletak di Scene, hal ini bisa
dilihat pada Outline.
5. Kalau dilihat di Timeline sound memiliki panjang frame sepanjang lamanya sound. Untuk
membuat Sound hanya satu frame pada properties sound beri centang pada kotak Target.
Sound pada
frame terletak
di Scene Home
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 18/24
Memberi Sound Pada Tombol
Langkah-langkah :
1. Pada Outline pilih Over State
2. Klik menu insert > import Sound . pilih sound tombol yang akan digunakan > klik open
3. Pada Outline Over state ditambahkan file sound yang tadi diimport. Agar suara tombol
bisa digunakan saat di play beri centang kotak Target di properties sound tombol.
Hasil import
sound pada
Over State
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 19/24
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 20/24
Untuk membuat sound bisa dimainkan harus di export terlebih dahulu ke HTML , SWF atau EXE.
Langkahnya :
1. klik menu File > Export > HTML + SWF Atau shorcutnya Ctrl + P
2. Jalankan File movie1.swf maka sound akan dimunculkan, jika tidak muncul kemungkinankesalahan nama file sound yang dipanggil.
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 21/24
PERTEMUAN KE 3 : MENU DAN SPRITE
Pada SwishMax 3.0 sprite disebut juga Movie Clip. Berfungsi untuk membuat animasi
yang dapat berjalan secara looping dimana animasi yang lain berhenti.
Untuk contoh akan dibuat Movie Clip untuk tombol pada bagian Over
Langkah-langkah :
1. Pilih Over State di Outline
2. Buat tulisan di stage dekat
tombol atur ukuran dan
letaknya.
3. Klik kanan di teksnya pilih
Convert > Convert to Movie Clip
Hasil pada outline
text diubah menjadi
Movie Clip
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 22/24
4. Klik 2x text
5. Klik kanan di
frame 1 Layer text
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 23/24
6. Pilih Appear into position > disini saya pilih Fade – Wide in
7. Klik kanan pada frame diatas frame ending text. pilih > Movie Control > stop () agar animasi
text dapat berhenti di akhir frame.
7/31/2019 Tutorial Basic Swishmax3.0
http://slidepdf.com/reader/full/tutorial-basic-swishmax30 24/24
8. Klik pada stage untuk keluar dari Movie Clip, kemudian klik tombol play
9. Publish ulang hasil dengan klik File > Export > HTML + SWF atau shortcut Ctrl + P
- THE END -
Klik di stage
keluar dari
movie Clip