Minggu ke : 1 (pertama) - aknelt.ac.idaknelt.ac.id/po-content/uploads/Modul_Desain_Grafis_(Swishmax_1-8).pdfMengaktifkan SwishMax Cara mengaktifkan SwishMax: Klik menu Start Programs

Minggu ke : 1 (pertama)

Menginstal Swishmax SwishMax merupakan aplikasi untuk membuat animasi flash seperti halnya Macromedia Flash MX. 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

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 Control

Toolbar

Standard

Toolbar Timeline

Script Outline

Panel Toolbox Layout Panel

Movie Panel

Tool Options

View Optons

Main Menu merupakan menu pilihan utama dalam mengoperasikan SwishMax diantaranya menu file, edit, view, insert, modify, control, tools, panels dan help. Toolbar digunakan untuk mengakses menu-menu utama secara cepat yang terdiri dari: 1. Standar Toolbar untuk pengoperasian file seperti new, open, save. 2. Insert Toolbar untuk memasukkan objek seperti scene, text, image. 3. Control Toolbar untuk mengontrol scene seperti play, stop, play scene. 4. Grouping Toolbar untuk menggabungkan objek seperti Group as Group. 5. Export Toolbar untuk mengekspor scene seperti Export to Swf.

Tools merupakan perintah (command) yang akan menentukan apa yang akan

dilakukan Swish saat proses click atau drag pada workspace. Perintah itu antara lain select, line, pencil dan lain-lain.

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

Lakukan langkah-langkah seperti berikut ini;

o Klik kiri pada Start > Program > SWiSHmax > SWiSHmax.

Seperti pada gambar;

Menjalankan SWiSHmax dari Menu Start

o Jika sudah ada pada Desktop, tinggal klik kiri dua kali atau klik kanan kemudian Open.


o Jika dari Explorer, masuk pada C drive > Program Files > SWiSHmax > Cari

SWiSHmax yang berektensi aplikasi kemudian klik kiri dua kali.


Menjalankan SWiSHmax Windows Explorer

Layout Panel

Layout Panel memiliki tiga komponen utama, yaitu;

Bidang kerja

Bidang kerja adalah layar utama untuk menggambar dan memainkan movie yang telah

dibuat. Bagian putih adalah bidang kerja dari SWiSHmax.

Toolbox

Toolbox digunakan untuk menggambarkan di bidang kerja.

Jendela Toolbox

Fungsi dari icon-icon tersebut antara lain sebagai berikut:

Select/ scale

Memilih, memindahkan, dan

Mengubah ukuran obyek

Motion Path membuat animasi pergerakan

pada suatu obyek

Reshape Memilih, memindahkan, dan

Mengubah bentuk obyek

Berbentuk image

Line Menggambar garis lurus

Fill Transform

Mengubah isi dari suatu

obyek tanpa mengubah

obyek itu sendiri.

Bezier Menggambar dengan

menghubungkan titik-titik.

Pencil Menggambar bebas

Ellipse Menggambar ellips atau

lingkaran

Rectangle Menggambar persegi

panjang Atau bujur sangkar.

Auto Shape

Menggambar beberapa bentuk

tertentu yang sudah disediakan

Pan Memindahkan bidang kerja

Text Membuat tulisan/ text.

Zoom Memperbesar bidang kerja

4. Bahan dan Alat : Komputer

5. Prosedur Kerja : Mengikuti intruksi materi

6. Tugas dan Pertanyaan : Catatlah menu dan sub menu yang ada pada swishmax

7. Hasil Praktikum : Hasil karya mahasiswa sesuai dg materi

8. Pustaka :

1. Syarif, Arry Maulana. “Cara Cepat Membuat Animasi Flash Menggunakan Swishmax”.

Andi.Yogyakarta, 2006

2. Chandra. “Animasi Teks Profesional dengan SWiSHmax” Maxikom. Pelembang. 2005

http://andipublisher.com/produk-0701002004-cara-cepat-membuat-animasi-flash-menggun.html

Minggu ke : 2 (dua)

Membuat animasi – animasi

1. Membuat Animasi Tulisan

- yang pertama buatlah terlebih dahulu TEXT / TULISAN yang anda ingin buat, dengan

cara klik Insert dan pilih Text yang berada di paling atas Form / Scane, contoh seperti

gambar 2.1 di bawah ini

- dan akan muncul tulisan seprti di bawah ini

- jika ingin mengetik sebuah tulisan, edit terlebih dahulu tulisan yang anda ingin buat

dengan cara mengganti tulisan Text yang berada sebelah kanan Form / Scane

- contoh :

Mengganti Tulisan Text menjadi AKU,dan disana juga anda dapat mengganti besar

Huruf Tulisan, Warna Tulisan DLL. Contoh di Bawah ini

- Setelah terbuat, anda dapat memberikan animasi pada tulisan ini dengan cara : Klik Add

Effeck kemudian pilih animasi yang anda inginkan

- Contoh : Klik Add Effeck > Explode contohnya seperti di bawah ini

- Setelah Anda memilih animasi yang telah anda pilih, anda dapat mencoba

menjalankannya, dengan cara Klik Play contohny seperti dibawa ini :

Membuat Animasi Teks

1. Klik menu Insert Text, dan ganti tulisan/teks tersebut menjadi Praktikum Multimedia

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 Sistem Informasi Unair. Hingga di Layout Panel terdapat dua kalimat yang tertata sebagai berikut.

Praktikum Manajeman

Informatika Aknelt

4. Untuk memberikan efek animasi, klik teks yang pertama. Kemudian klik kanan, klik

menu Effect Core Effect Transform.

5. Berikut ini gambar panel timeline dengan efek transform pada text Praktikum

Multimedia

6. Durasi efeks transform secara default selama 20 frame, untuk mengubahnya bisa diatur

pada properties dengan cara pada panel timeline klik kanan text efek Praktikum Multimedia tersebut.

7. Ubah durasi efek transform menjadi 30 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. Catatan: Pastikan posisi frame pada timeline berada di frame ke-31, agar efek sqeeze

dimainkan saat efek transform sudah selesai.

9. Untuk melihat hasilnya, klik menu Control Test Movie 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: animasiA Save

Catatan: Pada satu text dapat ditambahkan beberapa effect



6. Tugas dan Pertanyaan : Buatlah animasi teks masking dengan swishmax


8. Pustaka :

Syarif, Arry Maulana. “Cara Cepat Membuat Animasi Flash Menggunakan Swishmax”.


Chandra. “Animasi Teks Profesional dengan SWiSHmax” Maxikom. Pelembang. 2005


Minggu ke : 3 (tiga)

Menampilkan Gambar dan Memberikan animasinya 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

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

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

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



6. Tugas dan Pertanyaan : Sesuai dengan materi


8. Pustaka :





Minggu ke : 4 (empat)

Unit Kompetensi : KUIS 2

Waktu : 160 menit

Tempat : Laboratorium Pusat Komputer

1. Elemen Kompetens :

2. Indikator Kinerja : Mampu mengerjakan soal

3. Teori : Pertemuan 1-3


5. Organisasi : Mandiri (1 orang)

6. Prosedur Kerja : Mengikuti intruksi soal

7. Tugas dan Pertanyaan : Sesuai dengan soal

8. Hasil Praktikum : Hasil kerja mahasiswa sesuai dg soal

Anda bisa memakai gambar contoh ini (File D: Bahan Desain Grafis)

1. Setelah memilih gambar atau foto, maka tampilannya akan seperti dibawah ini. Jika

ukurannya terlalu besar, tarik sisi-sisinya dan atur sedemikian rupa agar pas dengan area kerja

2. Buat objek lingkaran menggunakan toolbox “ellipse”. Drag di area kerja

3. Sekarang ada 2 objek yaitu objek gambar dan objek lingkaran. Seleksi 2 objek tersebut lalu

klik kanan pilih grouping – group as sprite

http://www.ilmugrafis.org/cdn/swishmax/sw3/contohsw3.jpg

4. Seleksi objek gambar, lalu pada timelinenya klik kanan pada frame 1 pilih move.

5. Setelah muncul tanda move pada timeline, sekarang kita gerakkan gambar pada area kerja

dengan cara di drag ke arah sesuka kita. Sebaiknya jangan sampai melewati objek lingkaran

6. Klik kanan pada frame 20 lalu pilih move. Hal ini berguna untuk mendapatkan gerak

gambar lebih dari satu gerakan.

7. Maka akan muncul tanda move lagi seperti di bawah ini, kemudian geser atau gerakkan

objek gambar ke arah lain sesuai yang diinginkan

8. Untuk menambah gerakan gambar lagi, lakukan langkah nomor 7 pada frame 30

9. Sekarang kita menuju efek maskingnya. Klik tanda panah pada outline panel. Ini

bertujuan untuk menempatkan objek gambar di bawah objek lingkaran agar bisa di masking

Mainkan hasilnya lewat tombol play movie.

Minggu ke : 5 (lima)

Membuat Next & Back pada Scane

Yang Pertama Membuat Next Pada Scane 1

- sebelum membuat Next & Back, terlebih dahulu anda buat Scane baru atau bias juga

anda mengambil Scane yang telah terisi, sebagai contoh, anda ambil Scane yang telah

terisi lalu Buat tulisan kembali dengan tulisan Next contoh :

- setelah membuat tulisan Next, kemudian klik pada Next kemudian klik Action yang

berada di sebelah kanan form / Scane dan klik Add Effend kemudian pilih On

Release lihat contoh dibawah ini

- setelah muncul Gambar seperti diatas, dan setelah memilih On Release akan muncul

seperti yang ada dibawah ini :

- kemudian klik Add Action lalu pilih Go To Frame, contoh dibawah ini :

- kemudian klik Scane lalu pilih Scane yang selanjutnya contoh Scane 2, contoh

dibawah ini :

- setelah itu sebelum mencoba menjalankanya, terlebih dahulu pada Scane 1 di buat

Stop Agar tidak terjadi tumburan antara Scane yang lain, dengan cara Klik Scane

kemudian klik kanan pada garis yang telah tersedia dan pilih Stop , contoh ada

dibawah ini :

- seteleh selesai itu akan Muncul titik merah pada garis tersebut,

Yang Kedua Membuat Back Pada Scane 2

- membuat Tulisan Back pada Scane 2, langkah – langkahnya hampir sama seperti

membuat Tulisan Next, mari kita buat kembali

- buatlah tulisan Back pada Scane 2 dan akan muncul di bawah ini

- setelah membuat tulisan Back, kemudian klik pada Back kemudian klik Action yang

berada di sebelah kanan form / Scane dan klik Add Effend kemudian pilih On

Release lihat contoh dibawah ini

- setelah muncul Gambar seperti diatas, dan setelah memilih On Release akan muncul

seperti yang ada dibawah ini :

- kemudian klik Add Action lalu pilih Go To Frame, contoh ada dibawah ini :

- kemudian klik Scane lalu pilih Scane yang sebelumnya contoh Scane 1, ada pada

contoh dibawah ini :

- setelah itu sebelum mencoba menjalankanya, terlebih dahulu pada Scane 2, hamper

sama dengan membuat pada Scane 1,

di buat Stop Agar tidak terjadi tumburan antara Scane yang lain, dengan cara Klik Scane

kemudian klik kanan pada garis yang telah tersedia dan pilih Stop , contoh ada dibawa ini

:

- seteleh selesai itu akan Muncul titik merah pada garis tersebut, contoh dibawah ini :

- setelah semuanya selesai, anda dapat menjalankannya dan apa hasilnya

A. Menu

Jika pada praktikum sebelumnya hanya menggunakan satu scene dalam movie, pada modul kali ini akan dimanfaatkan beberapa scene yang dikontrol menggunakan button. Pada praktikum kali ini menu digunakan sebagai kontrol movie untuk menuju dari satu scene ke scene lainnya.

Membuat Scene

H alaman pembuka (intro) Berikut ini adalah langkah-langkah untuk membuat scene intro. 1. Buat movie baru 2. Pada panel properties dan tab Scene, atur konfigurasi scene yaitu ubah

nama scene menjadi “intro”. Sedangkan pada tab Movie, ubah background

movie menjadi “red”.

3. Insert Text. Ubah “Text” menjadi “THIS IS INTRO TEXT” dan ukuran text menjadi “36”, serta warna huruf menjadi “yellow” pada panel properties.

4. Buat Rounded Button dengan cara pilih tool AutoShape pada Tools, kemudian isi dengan text “enter” dan atur alignment dan warnanya hingga tampak seperti berikut:

5. Atur button hingga mempunyai Over State dan Down State. Efek pada Over State adalah text “enter” menjadi warna hijau, sedangkan pada Down State, bayangan button berubah.

Over State Down State

6. Hasil akhir dari Outline Panel pada Scene intro sebagai berikut

Halaman 1

Berikut ini adalah langkah-langkah untuk membuat scene halaman 1.

1. Insert Scene, dengan cara pilih menu Insert Scene

2. Pada panel properties dan tab Scene, atur konfigurasi scene yaitu ubah nama

scene menjadi “halaman1”

3. Insert Text. Pada panel properties, ubah “Text” menjadi “INI HALAMAN SATU”, ukuran text menjadi “36”, warna huruf menjadi “yellow”, serta ubah font menjadi “Verdana”.

4. Buat Arrow Button dengan cara pilih tool AutoShape pada Tools, kemudian

ubah nama button tersebut menjadi “back”. Dengan cara yang sama buat arrow button dan ubah nama button menjadi “next”.

5. Untuk memberikan efek dinamis pada kedua button tersebut, berikanlah efek

over state, yakni dengan mengubah warna arrow menjadi yellow.

6. Hasil akhir dari Outline Panel pada Scene halaman1 sebagai berikut

7. Sedangkan tampilan pada Layout Panel pada scene halaman1 sebagai berikut

Halaman 2 dan 3

1. Dengan prosedur yang sama, buatlah scene untuk halaman 2 dan halaman 3. Ubahlah nama scene dan text sesuai dengan halaman yang bersangkutan. Misalnya pada scene halaman 2 maka nama scene menjadi “halaman2”, serta isi text menjadi “INI HALAMAN 2”, begitupun pada scene “halaman3”. Khusus pada halaman 3, button next ditiadakan dan diganti dengan tombol home yang digunakan untuk menuju ke halaman awal.

2. Hasil akhir dari Outline Panel pada scene halaman2 dan halaman3

sebagai berikut

3. Sedangkan tampilan pada Layout Panel pada scene halaman3 sebagai

berikut

Membuat Navigasi antar scene

Berikut ini adalah langkah-langkah untuk membuat navigasi antar scene.

1. Pilih Scene intro

2. Pilih button, kemudian tambahkan script menuju ke scene halaman1 dengan cara klik kanan pilih menu Scripts Movie Control gotoAndPlay

gotoAndPlay(FRAME). Ubah Target scene menjadi <next scene>, hingga

tampilan script menjadi seperti berikut

on (release) {

nextSceneAndPlay(); }

3.

4.

Pilih scene halaman1

Pilih button back, tambahkan script sebagai berikut

on (release) {

prevSceneAndPlay();

}

5. Pada button next, tambahkan script sebagai berikut

on (release) {

nextSceneAndPlay(); }

6. Dengan prosedur yang sama, berikan pula script yang serupa untuk button next dan back pada scene halaman2

7. Pada scene halaman3, berikan script yang sama untuk button back, sedangkan untuk button home diisi script menuju ke scene intro (awal) sebagai berikut

on (release) { gotoSceneAndPlay("<first scene>",1);

}

Simpan projek dengan nama Praktikum5.swi dan Praktikum5.swf

Contoh berbagai macam menu

2. Sprite

Secara sederhana, sprite adalah adanya movie di dalam movie. Keuntungan dengan menggunakan sprite antara lain movie tersebut dapat berjalan secara independen yang mempunyai timeline sendiri dan dapat digunakan secara berulang pada movie-movie yang lain sehingga dapat menghemat waktu dalam menciptakan suatu movie. Berikut ini contoh penggunaan sprite yaitu pemanfaatan sprite pada button dan movie yang disisipkan movie lainnya.

Sprite pada Button

Berikut ini langkah-langkah pemanfaatan sprite pada button. 1. Buat movie baru 2. Buat AutoShape dan text seperti berikut:

3. Konvert gabungan objek tersebut menjadi button dengan cara select objek AutoShape dan text Next, klik kanan pilih menu Grouping Group as Button

4. Tambahkan Over State pada button tersebut 5. Pada Over State ubah warna text menjadi biru 6. Tambahkan Sprite pada Over State dengan cara, klik Over State

kemudian 7. pilih menu Insert Sprite, sehingga tampilan Outline Panel dan Layout

Panel menjadi seperti berikut

Layout Panel Outline Panel

8. Cut objek Text, dan di paste ke dalam sprite dengan cara klik text NEXT pada outline panel kemudian tekan tombol Ctrl+X atau klik kanan Cut

9. Objek, kemudian klik Sprite dan tekan tombol Ctrl+V atau klik kanan Paste Objek

10. Berikan efek move pada text NEXT, dengan cara klik kanan objek text NEXT pada timeline kemudian pilih Move, hingga tampilan Layout Panel dan Timeline sebagai berikut

Layout Panel Timeline

11. Pilih Frame ke-10 pada Timeline kemudian pindah posisi text NEXT pada layout panel hingga menjadi seperti berikut:

12. Lihat hasil movie. Jika sesuai dengan instruksi, maka efek yang akan ditampilkan adalah adanya pergerakan text NEXT ketika mouse berada di atas button.

Sprite pada Movie Berikut ini langkah-langkah pemanfaatan sprite pada movie.

1. Buka file movie Praktikum5.swi 2. Klik Scene halaman1 pada Outline Panel

3. Insert objek praktikum sebelumnya dengan cara pilih menu Insert Contentdan pilih praktikum2C.swf Catatan: Untuk memanipulasi sprite, pastikan posisi highlight pada outline berada pada posisi nama sprite dan tidak terinci.

Berikut ini pada posisi yang salah.

4. Klik sprite praktikum5.swf pada Outline Panel, kemudian atur tampilan sprite tersebut hingga tampak rapi pada layout panel.

5. Berikut ini tampilan pada Layout Panel

6. Berikut ini tampilan pada Outline Panel

7. Play Movie untuk melihat hasilnya.

TUGAS PRAKTIKUM

Petunjuk: Tugas dikumpulkan melalui upload di server dengan ketentuan sebagai berikut:

1. Dipaket dalam bentuk rar atau zip 2. Paket berisi file swish (swi) dan flash (swf) 3. Format penamaan file paket Tugas5 NIM

Dengan memanfaatkan informasi pada modul ini (menu & sprite), buatlah sebuah movie yang setidaknya berisi: 1. Judul yang berisi nama perusahaan 2. Banner yang berisi motto perusahaan 3. Daftar menu yang terdiri dari home, sejarah, visi dan misi, dan

download. 4. Pada setiap menu berikan keterangan singkat mengenai isi dari menu

tersebut atau dengan movie (sprite). 5. Untuk memudahkan penelusuran gunakan navigasi menggunakan

button.



6. Tugas dan Pertanyaan : sesuai materi


8. Pustaka :





Minggu ke : 6 (enam)

Membuat animasi tombol

Animasi pada tombol digunakan untuk memperindah halaman web yang akan dibuat.

Dengan menggunakan efek-efek yang telah dibahas dapat dikombinasi untuk membuat

tombol yang menarik.

Berikut ini langkah-langkah untuk membuat animasi tombol, sebagai berikut;

a) Buat Rounded Button warna merah dari Auto Shape pada Toolbar.

b) Buat teks “Next” pada bidang kerja menggunakan Text yang ada di Toolbox.

c) Masukkan teks “Next” ke dalam Rounded Button, kemudian Drag keduanya buat menjadi

group untuk tombol, dengan cara Klik kanan mouse pilih Gouping > Goup as Button.

d) Buka Outline Panel, sampai nampak seperti gambar.

Jendela Outline Panel dan Button

e) Pilih pada Over State, tekan tombol Ctrl+C untuk meng-copy dan Tekan Ctrl+V untuk

paste untuk membuat duplikat di dalam Over State.

Duplikat Shape

f) Klik kanan pada Rounded Button di Outline Panel, pilih Convert > Convert to Sprite.

g) Klik ganda pada Sprite di Outline Panel, ini akan ditampilkan pada Timeline untuk sprite

objek.

(a) Di Timeline (b) Setelah klik ganda pada Sprite

Membuat Sprite

h) Di Timeline, Klik ganda pada frame 15 pada Rounded Button. Ini akan memasukan

sebuah efek ke tombol.

Membuat Efek

i) Klik ganda pada keyframe pada akhir efek yang tadi dibuat. Akan muncul kotak dialog

“Move Setting”. Dalam kotak dialog tersebut, pilih Scale > Resixe to Scale > 300%.

Kemudian pilih juga Alpha > To Tranparant.

Move Setting

j) Pada Timeline pilih Scane1, kemudian tekan Play. Lihat apakah dalam membuat

animasi tombol berhasil.

Hasil Animasi Tombol saat Play

2) Membuat animasi loading

Animasi Loading biasanya digunakan untuk proses saat akan masuk ke web, dibuat

seindah mungkin untuk halaman web yang akan dibuat.

Berikut ini langkah-langkah untuk membuat animasi Loading, sebagai berikut;

a) Buat Dengan Rectangle sebuah persegi dengan warna abu-abu.

Membuat Persegi

b) Pastikan terpilih Scale pada tool Option.

c) Pilih Motion Part, letakkan krusor pada pegangan di tengah-tengah persegi tarik kekanan

tanpa melepas mouse kemudian lepaskan ditempat yang diinginkan.

. Membuat Efek Gerak

d) Kemudian pilih Select pada Toolbox.

e) Bagian belakang dari pegangan persegi tersebut, tekan tombol mouse dan ditarik menuju

ujung, kemudian lepaskan.

. Membuat Efek Loading

f) Setelah itu tekan tombol Play.

. Hasil Animasi Loading



6. Tugas dan Pertanyaan : Buatlah effect bounch pada tombol


7. Pustaka :





Minggu ke : 7 (tujuh)

Sound Actions Play Sounds

Dalam kaitan dalam pembatasan Flash Player, sounds akan dimainkan saat

merespon Frame Event, atau the Mouse Events Press, Release, Roll Over or Roll

Out. Sounds tidak dapat dimainkan untuk merespon the Mouse Events Drag Over,

Drag Out or Release Outside.

Action yang digunakan sebagai berikut;

Gambar 145. Play sounds

o Import

Digunakan untuk mengimport suatu sound (bunyi) ke dalam movie. Dapat

mengimport Windows .Wav memfile atau .mp3 file sounds.

o Reload

Digunakan untuk menambah kan file sounds yang sebelumnya sudah ada. Ini

bermanfaat jika sounds file di disk drive diubah sejak terakhir dimasukkan.

o Delete

Digunakan untuk menghapus sounds di dalam movie, ini tidak akan

menghapus sounds di disk drive. Hanya memindahkan dari dalam . swi file

tidak bisa dimainkan.

o Propeties

Menyediakan format “Content” untuk memodifikasi propertis dari file sounds

yang dimasukkan dikompres, channel dan sample rate.

o Sounds Effect

Digunakan untuk memodifikasi file sounds yang akan dimainkan.

Stop Sounds

Digunakan untuk menghentikan sound yang telah dipilih. Untuk pilihan dan

batasan sama dengan Play sounds Action. Akan tetapi, sebagai ganti dari sounds

yang dimainkan dihentikan.

Stop All Sounds

Digunakan untuk menghentikan semua sound yang ada di dalam movie atau

sprite.

A. Bekerja dengan Efek 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).

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

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

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

B. 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:

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

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

c. Down State, ditampilkan saat di klik pada button d. 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.

Membuat Button 1. Buka file sebelumnya.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. Dengan menggunakan tools Ellipse buatlah sebuah lingkaran dan beri fill Radial gradient pada properties lingkaran tersebut untuk memperindahnya hingga menjadi sebagai berikut. Atau bisa memanfaatkan program lainnya seperti Xara WebStyle.

4. Konversi lingkaran 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. Berikan nama button ini sebagai “Mulai” melalui panel properties.

5. Untuk menambahkan efek yang lebih dinamis (roll over) dapat ditambahkan efek pada Over State dengan permainan warna pada lingkaran tersebut. Berikut ini adalah kondisi awal ketika button hijau belum ditambahkan Over State

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

Over State, hingga tampilan Outline panel menjadi seperti berikut:

7. Klik Shape, dan ubah warna dari shape tersebut menjadi seperti berikut:

8. Dengan cara yang sama buatlah tombol yang kedua sebagai berikut dengan

nama “Stop”. Sertakan pula efek roll over.

Memberikan Efek Suara pada Button

1. Tetap bekerja pada file LatihanB.swi 2. Melalui Outline Panel, klik pada button Mulai, 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 Hijau untuk memulai dan Merah untuk menghentikan

movie. Pada contoh kali ini ditambahkan pula suara background yang menyertai jalannya movie.

1. Memulai Movie

2. Pada button Mulai, klik kanan dan pilih menu Script Events Button on(release)

3. Tambahkan script untuk mulai menjalankan movie dengan cara pilih menu Add Scripts Movie Control gotoAndPlay gotoAndPlay(FRAME) hingga tampilan Script Panel menjadi sebagai berikut:

4. Untuk menambah background suara, bisa ditambahkan script untuk

memutar lagu “romance.mp3”, sehinga Script Panel menjadi sebagai

berikut:

5. Untuk melihat hasilnya, jalankan movie tersebut.

Menghentikan Movie

a. Pada button Stop, klik kanan dan pilih menu Script Events Button on(release)

b. Tambahkan script untuk menghentikan movie dan menuju ke frame 1 agar mulai ke state awal, dengan cara pilih menu Add Scripts Movie Control gotoAndPlay gotoAndPlay(FRAME). Untuk menghentikan background musik sertakan pula script untuk menghentikan sound “romance.mp3”, hingga tampilan Script Panel menjadi sebagai berikut:

c. Untuk melihat hasilnya, jalankan movie tersebut.

TUGAS PRAKTIKUM

Petunjuk: Tugas dikumpulkan melalui upload di server dengan ketentuan sebagai berikut:

1. Dipaket dalam bentuk rar atau zip 2. Paket berisi file swish (swi) dan flash (swf) 3. Format penamaan file paket Tugas7NIM

Dengan memanfaatkan informasi pada modul ini, buatlah sebuah movie mengenai profil sebuah perusahaan (sejarah/latar belakang

pendirian, visi dan misi perusahaan, struktur organisasi,

kelembagaan, dan sebagainya). Gunakan efek sound untuk memperindah movie serta button untuk mengontrol jalannya movie.



6. Tugas dan Pertanyaan : Sesuai dengan materi


8. Pustaka :

Syarif, Arry Maulana. “Cara Cepat Membuat Animasi Flash Menggunakan

Swishmax”. Andi.Yogyakarta, 2006

Chandra. “Animasi Teks Profesional dengan SWiSHmax” Maxikom. Pelembang.

2005



BUKU PANDUAN PRAKTIKUM

(BPP)

Minggu ke : 8 (Delapan)

Unit Kompetensi : UTS

Waktu : 160 menit

Tempat : Laboratorium Pusat Komputer

1. Elemen Kompetens :

2. Indikator Kinerja :

3. Teori : Pertemuan 1 - 7


5. Organisasi : Mandiri (1 orang)

6. Prosedur Kerja : Mengikuti intruksi soal

7. Tugas dan Pertanyaan : Sesuai dengan soal

8. Pustaka :

9. Hasil Praktikum : Hasil karya mahasiswa sesuai dg soal

Documents

Minggu ke : 1 (pertama) - aknelt.ac.idaknelt.ac.id/po-content/uploads/Modul_Desain_Grafis_(Swishmax_1-8).pdfMengaktifkan SwishMax Cara mengaktifkan SwishMax: Klik menu Start Programs