MODUL 1 PENGENALAN SWISHMAX

Transkripsi

1 MODUL 1 PENGENALAN SWISHMAX SwishMax merupakan aplikasi untuk membuat animasi flash seperti halnya Macromedia Flash MX yang dapat dipakai untuk menambahkan gambar, animasi, suara dan hal-hal yang interakstif (interactivity) ke dalam Web. Selain itu juga dapat digunakan untuk membuat game dan aplikasi interakif. Namun perbedaannya, SwishMax lebih mudah dalam penerapannya dibandingkan dengan Flash MX. Tentu saja kemudahan itu akan mengurangi keluwesan para pengguna yang ingin berkreasi lebih dengan menggunakan flash. Akan tetapi untuk para pemula, program SwishMax sudah lebih dari cukup untuk membuat berbagai animasi flash apalagi kelengkapan fitur pada SwishMax semakin ditambah. Kelebihan lainnya, bila sudah mahir menggunakan SwishMax, dalam berkreasi lebih banyak pada Macromedia Flash MX akan lebih mudah karena sudah memiliki dasar pada SwishMax. Instalasi SwishMax 1. Jalankan file SetupSwishmax.exe dengan cara klik 2 kali file tersebut, sehingga muncul gambar berikut: 2. Klik tombol Next, sehingga keluar form License Agreement, klik pilihan Yes, sehingga muncul tampilan pilihan tempat untuk menginstall program ini seperti pada gambar berikut: 3. Bila ingin menginstall ditempat lain tekan tombol Browse dan tentukan lokasi menginstall. Bila ingin menginstall secara default pada direktori yang ada, tekan tombol Next langsung, sehingga proses instalasi akan dilakukan. Bila proses instalasi selesai akan keluar tampilan sebagai berikut: 4. Hilangkan centang pada Launch. kemudian tekan tombol Close. Selesai Modul 1 1.1

2 Mengaktifkan SwishMax Cara mengaktifkan SwishMax: Klik menu Start Programs SwishMax SwishMax, sehingga akan muncul tampilan awal dari SwishMax seperti di bawah ini. Pilih pilihan Start a new empty movie untuk memulai dengan tampilan awal yang kosong. Standard Toolbar Main Menu Insert Toolbar Control Toolbar Timeline Outline Panel Toolbox Script 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 1.2

3 Main Menu merupakan menu pilihan utama dalam mengoperasikan SwishMax diantaranya menu File, Edit, View, Insert, Modify, Control, Tools, Panels dan Help. New (Ctrl+N) : digunakan untuk membuat movie baru Open (Ctrl+O) : digunakan untuk membuka file.swi (movie Swishmax) atau file-file format lain tapi masih didukung oleh SwishMax. Save (Ctrl+S) : digunakan untuk menyimpan movie yang sedang aktif Save As : digunakan untuk menyimpan movie yang aktif dengan nama baru New from template : membuat file baru dari template Save as template : menyimpan proyek 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 1.3

4 Zoom In : digunakan untuk memperbesar tampilan pada panel layout Zoom Out : digunakan untuk mempekecil tampilan pada panel layout Fit Scene In Window : digunakan untuk menampilkan supaya scene tampak semuanya/mencukupi pada panel layout Scene : untuk menambahkan scene baru kedalam movie Text : digunakan untuk menyisipkan teks kedalam scene/sprite/group. Button : digunakan ntuk menambahkan button/tombol kedalam scene/sprite/group. Sprite : digunakan untuk menyisipkan sprite kedalam scene/sprite/group. Image : digunakan untuk menyisipkan image/gambar kedalam scene/sprite/group. Content : untuk menyisipkan file eksternal kedalam movie. Perintah ini sama dengan perintah File Import Effect : digunakan untuk menambahkan efek pada objek yang dipilih. Efek yang tersedia cukup banyak pada SwishMax, dan dapat langsung dilihat. Script : digunakan untuk menambahkan script/ perintah pada suatu objek atau pada frame yang dipilih. Script disini dapat berupa Event, Action atau Difine Functions. Script yang telah dibuat dapat diedit pada Panel Script (berbentuk tab berdampingan dengan Layout Modul 1 1.4

5 Grouping : Group as Group : digunakan untuk menjadikan sekelompok objek menjadi satu group. Efek komplek dapat diaplikasikan ke group Group as Button : untuk menjadikan sekelompok objek yang dipilih menjadi suatu Button/tombol. Group as Sprite : untuk menjadikan sekelompok objek yang dipilih menjadi suatu sprite. Group As Shape : untuk menjadikan sekelompok objek yang dipilih menjadi sebuah shape. Ungroup : untuk memecah group atau sprite menjadi objek terpisah. Convert : Convert to button : untuk mengkonversi suatu objek menadi sebuah button Convert to Sprite : untuk mengkonversi suatu objek mendjadi sebuah sprite Play Movie : Memainkan movie secara keseluruhan Play Timeline : untuk memainkan Scene atau Sprite yang sedang aktif Play Effect : untuk memainkan bagan dari Scene yang mengandung efek yang dipilih Stop : untuk menghentikan movie, scene, atau efek yang sedang dimainkan. Modul 1 1.5

6 Select : untuk memilih, memindahkan atau menskala objek dengan cara mengklik dan men-drag objek yang dipilih. Reshape : untuk membentuk ulang grafik cara mengklik dan men-drag objek yang dipilih. Fill transporm : untuk mentrasformasi gradient atau image fill tanpa merubah objek Motion Path : untuk memplot jalur gerak dari suatu objek dengan cara mengklik dan men-drag objek yang dipilih. Line : untuk menggambar garis Pencil : untuk menggambar bebas Bezier : untuk menggambar set dari kurva bazier atau segmen garis Text : untuk menambahkan teks pada movie Elipse/Circle : untuk menggambar elips atau lingkaran Rectangle/Square : untuk menggambar kotak/kurva Auto Shape : untuk menggambar objek dengan bentuk-bentuk tertentu seperti gambar berikut : (untuk mendapatkan gambar tersebut tekan tombol Auto Shape agak lama sampai muncul gambar yang dimaksud) Timeline Seperti halnya sebuah film biasa, Scene terdiri atas beberapa buah frame yang akan berjalan berurutan ataupun tidak yang dapat dikontrol melalui perintah pada panel Script. Sedangkan Timeline merupakan kumpulan dari frame-frame, yang dimulai dari frame sebelah kiri dan berakhir pada frame sebelah kanan. Untuk lebih jelasnya perhatikan gambar berikut : Tekan tombol akan diperoleh tampilan berikut Baris teratas merupakan frame events yang berhubungan dengan action-action pada scene Contoh di atas adalah Scene_1. Sebuah action akan dijalankan bila movie telah sampai pada frame-frame tertentu. Dalam satu frame biasanya terdapat satu atau lebih action. Sedangkan baris-baris dibawahnya merupakan frame yang berhubungan dengan objek-objek yang ada pada Scene. Baris-baris tersebut ditampilkan dalam urutan tertentu, dimana object yang lebih di atas akan tampil lebih di atas dalam tampilan pada layout. Seperti contoh di atas, object hello akan tampil diatas object Shape, begitu seterusnya jika ada object-object di bawahnya. Untuk menghapus object Modul 1 1.6

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

8 Mengatur Scene MODUL 2 ANIMASI TEKS 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 2.1

9 Membuat Animasi Teks 1. Klik menu Insert Text, dan ganti tulisan/teks tersebut menjadi Selamat Datang di 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 2.2

10 5. Berikut ini gambar panel timeline dengan efek transform pada text Selamat Datagng di 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 2.3

11 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 2.4

12 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 2.5

13 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 3.1

14 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 3.2

15 5. Untuk melihat preview animasi, aktifkan Preview Frame dengan cara pilih menu Control Preview Frame 6. Pastikan posisi timeline berada pada frame ke 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 3.3

16 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 Object hitam-kuning II move dari Frame ke-22 sampai dengan ke Object hitam-kuning I move dari Frame ke-32 sampai dengan ke Object merah II move dari Frame ke-40 sampai dengan ke 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 3.4

17 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 4.1

18 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 4.2

19 Mengaktifkan Xara Webstyle Cara mengaktifkan Xara Web Style: Klik menu Start Programs Xara Webstyle 3.0 Xara Webstyle 3.0, hingga akan keluar tampilan awal sebagai berikut: Menu Utama Menu tipe desain Menu utama terdiri dari Start untuk kembali ke menu utama, menu Load maupun Import untuk memasukkan image yang telah dibuat tetapi dengan cara yang berbeda, Load memasukkan file sesuai dengan default project sedangkan Import dari berbagai tempat. Menu Browse untuk melihat berbagai template image yang sudah ada. Sedangkan menu Tutorial berisi penjelasan tentang penggunaan Xara WebStyle ini. Penjelasan penggunaan Xara WebStyle yang lebih rinci bisa dibaca pada tutorial tersebut Deskripsi singkat fitur - Headings Untuk membuat heading - 3Dheadings Untuk membuat heading 3 dimensi - Dividers Untuk membuat garis pembatas (divider) - Logos Untuk membuat logo - BannerAdds Untuk membuat banner promosi - Navbars & Menus Untuk membuat bar navigasi atau menu - ThemeSets Untuk membuat image berdasarkan themeset - Buttons Untuk membuat tombol (button) - Photos Untuk mengedit foto - Backgrounds Untuk membuat background - Bullets Untuk membuat bullets Modul 4 4.3

20 Desain Menu Window Image Template Navigate Button 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 4.4

21 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 4.5

22 1. Klik menu Start 2. Klik menu: Photos 3. Pilih gambar yang akan dimanipuasi. Catatan: Jika ukuran gambar melebihi screen, maka akan timbul pilihan apakah gambar tersebut diresize atau tetap. Jika diresize, maka ukuran gambar akan diperkecil menjadi sesuai screen pada Xara Webstyle. 4. Pada menu Enhance, atur efek gambar seperti brightness, saturation, Transparancy, Contrast, Blur/Sharpen dan Tint 5. Pada menu Rotate untuk melakukan rotasi pada gambar. 6. Pada menu Size & Crop untuk mengubah ukuran dan untuk pemotongan terhadap gambar 7. Pada menu Thumbnail untuk memberikan gambar thumbnail. Modul

23 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

24 7. Klik tombol: Save 8. Klik tombol: Save Graphic dan pilih folder tempat menyimpan data 9. Isi bagian File name, misal: hd_2, kemudian klik tombol Save Membuat Dividers 1. Klik menu Start 2. Klik menu: Dividers 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, 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 4.8

25 Membuat Logos 1. Klik menu Start 2. Klik menu: Logos 3. Klik desain yang diinginkan dengan menekan tombol Next atau Forward 4. 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 4.9

26 Membuat BannerAdds 1. Klik menu Start 2. Klik menu: BannerAds 3. Klik desain yang diinginkan dengan menekan tombol Next atau Forward 4. 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

27 Membuat Navbars & Menus 1. Klik menu Start 2. Klik menu: Navbars & Menu 3. Klik desain yang diinginkan dengan menekan tombol Next atau Forward 4. 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 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. Klik menu Start 2. Klik menu: Buttons 3. Klik desain yang diinginkan dengan menekan tombol Next atau Forward 4. Klik dan pilih salah satu desain Modul

28 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. Klik menu Start 2. Klik menu: Backgrounds 3. Klik desain yang diinginkan dengan menekan tombol Next atau Forward 4. Klik dan pilih salah satu desain Modul

29 5. Pilihan untuk mengubah desain lainnya, antara lain Color untuk mengubah warna, dan Size untuk mengubah ukuran desain. 6. Klik tombol: Save Graphic dan pilih folder tempat menyimpan data 7. Isi bagian File name, misal: background1, kemudian klik tombol Save Membuat Bullets 1. Klik menu Start 2. Klik menu: Bullets 3. Klik desain yang diinginkan dengan menekan tombol Next atau Forward 4. Klik dan pilih salah satu desain Modul

30 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

31 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 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 5.1

32 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 5.2

33 Memberhentikan Efek Suara Berikut ini adalah tahapan dalam memberhentikan efek suara pada posisi frame 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 5.3

34 A. Bekerja dengan Button MODUL 6 BUTTON DAN MENU 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 6.1

35 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 6.2

36 Memberikan Efek Suara pada Button 1. Tetap bekerja pada file kubus bentuk pecah.swi 2. Melalui Outline Panel, klik pada button Play, bukan pada masing-masing state karena Swish akan mengabaikannya. Kemudian Klik Kanan dan pilih menu Script Events Button on (Rollover), hingga muncul panel Script sebagai berikut: 3. Tambahkan Efek Suara dengan cara pilih menu Add Script Sound PlaySound(), dan pilih suara yang diinginkan. Jika belum ada dapat diimport dahulu hingga panel script menjadi seperti berikut: 4. Untuk menambahkan efek pada even On Press pada mouse, dapat dilakukan dengan cara pilih menu Add Script Events Button on (Press). Kemudian dengan cara yang sama seperti di atas, berikan efek suara lainnya, sehingga tampilan panel script menjadi sebagai berikut: 5. Dengan menggunakan prosedur yang sama, berikan pula efek suara pada button Stop. Mengontrol Movie Menggunakan Button Pada percobaan kali ini, kita akan mengatur jalannya movie menggunakan button yaitu button Play untuk memulai dan Stop untuk menghentikan movie. Pada contoh kali ini ditambahkan pula suara background yang menyertai jalannya movie. Memulai Movie 1. Pada button Play, klik kanan dan pilih menu Script Events Button on(release) 2. Tambahkan script untuk mulai menjalankan movie dengan cara pilih menu Add Scripts Movie Control gotoandplay gotoandplay(frame) hingga tampilan Script Panel menjadi sebagai berikut: Modul 6 6.3

37 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 6.4

38 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 6.5

39 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 6.6

40 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 6.7

41 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 6.8

42 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 6.9

43 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 Klik kanan pada frame 41 di bagian Hal_Utama, kemudian pilih Movie Control Stop(). Sehingga konten Home akan mulai dihentikan pada frame 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 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

44 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