Tutorial Basic Swishmax3.0

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 interf ace 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. J ika 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 ben tuk 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 h alaman yang akan dibuat. Ada beberapa pilihan struktur navigasi yang bisa dijadikan acuan. Saran s aya 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 )

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