BAB 1 PENGENALAN MACROMEDIA FLASH · PDF filepermainan efek suara dan gerakan menarik agar...

Macromedia Flash 8 – SMA 6 Malang

1

BAB 1 PENGENALAN MACROMEDIA FLASH

MENGENAL MACROMEDIA FLASH

Macromedia flash merupakan standart profesional yang digunakan untuk membuat web lebih

hidup dengan permainan animasi dan sinkronisasi suara yang mengagumkan. Bayangkan pada

halaman web, anda dapat membuat animasi atau promosi suatu produk seperti iklan di layar

televisi. Merancang menu navigasi menjadi seperti menu-menu pada game interaktif agar

pengunjung tidak merasa bosan berada dalam situs kita. Menampilkan informasi dengan

permainan efek suara dan gerakan menarik agar pengunjung dapat lebih fokus pada pesan yang

ingin kita sampaikan. Dan masih banyak lagi yang dapat dilakukan oleh flash untuk membuat

web kita menjadi lebih hidup dan menarik.

Mengapa saya harus menggunakan FLASH 8?

Flash telah dibuat dalam rangka untuk memperbaiki kekurangan besar di internet: yaitu,

Dinamisme. Dinamisme ini tidak berarti hanya animasi tetapi animasi interaktif, yang

memungkinkan pengguna untuk melihat web sebagai sesuatu yang menarik, tidak statis (tidak

seperti sebagian besar halaman yang dibuat dengan menggunakan bahasa HTML). Dengan Flash

kita dapat dengan mudah dan cepat membuat animasi dari semua jenis.

Flash relatif mudah untuk dipelajari, memiliki lingkungan fiture yang menyenangkanuntuk dapat

mengungkapkan imajinasi kita dalam bentuk apapun, hal ini lebih disukai oleh desainer

profesional.

Mari kita analisa ini keuntungan lebih detil:

Dari Flash MX 2004 untuk Flash 8

Flash 8 MX merupakan perbaikan dari flash fersi sebelumnya yaitu Flash MX 2004 .Perbaikan ini akan lebih mendukung dalam: mempermudah penanganan, grafis yang lebih tinggi potensi dan integrasi dengan program gambar edisi, dalam mempunyai kemampuan untuk mengimpor video, kemungkinan untuk mengemulasikan perangkat mobile anda berorientasi video, dan untuk pemula, ActionScript majic telah kembali. Mari kita menganalisis keuntungan tersebut secara lebih rinci:

Attractive Designs / Designs yang Atraktif :Flash 8 memungkinkan penggunaan efek visual yang akan memudahkan pembuatan animasi, presentasi dan bentuk-bentuk yang lebih menarik dan profesional. Selain itu, persediaan satu set alat yang akan membantu Anda melakukan ini dengan mudah dan cepat, seperti kita filter dan perpaduan mode, ditambahkan di versi ini.

Font Optimization/ Optimasi font: berisi beberapa pilihan untuk dibaca font yang berukuran kecil, sehingga membuat teks kita lebih nyaman untuk dibaca. Juga Anda dapat mengedit optimasi ini,


2

memungkinkan Anda untuk memilih konfigurasi preestablished untuk dinamis dan statis teks.

Consolidated Libraries / Konsolidasi Libraries: dapat mencari objek apapun ada dalam film-film dengan lebih cepat, browsing perpustakaan terbuka dari satu panel.

More powerful animation/ Lebih kuat animasi: Flash 8 memungkinkan lebih banyak kontrol terhadap interpolasi menetapkan bentuk modus edisi baru yang akan Anda edit , kecepatan rotasi, bentuk, warna dan gerakan diterapkan.

More powerful graphics / grafis lebih kuat: Hindari representasi yang tidak perlu menetapkan objek vectorial objek sebagai bitmap. Walaupun objek tersebut dikonversi menjadi bitmap, maka data vectorial tetap sama, jadi, di setiap saat, Anda dapat mengkonversi lagi ke vectorial objek.

Improvements in video importing/ Perbaikan dalam mengimpor video: Untuk memudahkan bekerja dengan format video, Flash 8 menyediakan kualitas tinggi codec independen baru, benar-benar skinnable.

Metadata Compatibility / Metadata Kompatibilitas: SWF Sertakan file dalam mesin pencarian mendefinisikan sebuah judul, deskripsi dan / atau kata kunci.

Mobile devices Emulator/ Perangkat mobile Emulator: Preview Flash Lite perangkat selular yang kompatibel film berorientasi dengan emulator baru Flash 8 mencakup.

ActionScript Wizard/ ActionScript Wizard: tlah menggunakan ActionScript Wizard. Dengan

demikian ActionScript sudah pada jangkauan Anda.

Flash 8 Interface (”The working environment” di flash 8)

Pada bab pertama ini kita akan melihat secara sekilas area kerja Macromedia Flash Pro 8 yang akan digunakan dalam pembuatan animasi pada bab-bab berikutnya. Semakin Anda dapat mengenal dan menghafal bagian-bagian dalam area kerja Macromedia Flash Pro 8, maka Anda akan semakin mudah dalam mempraktikkan tutorial yang disajikan dalam modul ini. Mengenal Area Kerja Macromedia Flash Pro 8 Berikut ini tampilan file atau dokumen baru dari area kerja Macromedia Flash Pro 8:

Tampilan Macromedia flash

2 3

4

5

1

6


3

Keterangan :

1. Menu � berisi kumpulan instruksi atau perintah-perintah yang digunakan dalam flash. Menu pada Macromedia Flash Pro 8 terdiri dari: File, Edit, View, Insert, Modify, Text Commands, Control, Window dan Help. Anda dapat melihat submenu yang terdapat pada masing-masing menu dengan mengeklik satu kali pada menu yang ingin Anda pilih.

Contoh menu dan submenu Macromedia Flash Pro 8

2. Stage � Stage dalam kehidupan nyata seperti bioskop, stage pada lingkungan flash terlihat berupa kotak putih besar. Semua object seperti gambar, tulisan dan foto ditempatkan pada stage.di luar area kotak putih tersebut merupakan daerah yang berwarna abu-abu. Di area ini penonton tidak akan dapat melihat object apapun saat film sedang dimainkan. Stage disebut juga layar atau panggung. Stage digunakan untuk memainkan objek-objek yang akan diberi animasi. Dalam stage kita dapat membuat gambar, teks, memberi warna dan lain-lain.

3. Toolbox � Tollbox berisi alat-alat kerja kita. Berbagai simbol, gambar atau icon itu masing-masing mempunyai fungsi tertentu dan paling sering digunakan. Tidak heran jika penempatan toolbox ini terletak berdekatan dengan area kerja kita agar mudah dijangkau.


4

4. Panel � Panel dalam lingkungan flash berfungsi untuk menampilkan dan mengubah

informasi suatu object yang ada di stage. Kita lihat ada berbagai macam papan panel di lingkungan Flash dan setiap panel akan menampilkan informasi tersendiri sesuai dengan objek yang kita pilih. Beberapa panel penting dalam Macromedia Flash Pro 8 diantaranya panel: Properties & Filters & Parameters, Actions, Library, Color dan Align & Info & Transform.

1.4.1 Panel Properties & Filters & Parameters Panel ini terdapat di bawah stage. Untuk mengeluarkan atau menyembunyikan panel ini dapat digunakan shortcut Ctrl+F3. Panel Properties & Filters & Parameters digunakan untuk untuk mengatur ukuran background, warna background, kecepatan animasi dan lain-lain.

Gambar : Panel Properties & Filters & Parameters

Jika Anda pernah menggunakan software-software grafik pasti akan terbiasa dengan tools seperti gambar di atas. Cara kerja tool flash dengan software grafik lainnya hampir sama, bedanya hanya pada penempatannya saja. Pada Gambar semua fungsi dibagi dalam empat kategori, yaitu: Tools, View, Colors, dan Option. Hal ini jelas untuk membantu Anda dalam memberi pengertian terhadap fungsi-fungsi tersebut.

TOOLS berisi fungsi-fungsi untuk menggambar, menyeleksi, membuat tulisan, mewarnai, menghapus, dan membuat path. Pembaca mungkin dapat mengetahui fungsi tools hanya dengan melihat iconnya.

• Untuk menggambar garis atau bentuk seperti Anda menggunakan pensil, gunakan Pencil tool.

• Untuk menggambar path seperti garis lurus atau melengkung, gunakan Pen tool.

• Untuk menggambar garis, lingkaran dan kotak, gunakan line, Oval, dan Rectangle tool.

• Untuk menggambar menggunakan brush, gunakan Brush tool.

VIEW berisi fungsi-fungsi untuk membantu kita dalam melihat atau memandang gambar.

• Hand tool untuk menggeser kanvas gambar. • Zoom tool untuk memperbesar dan mengecilkan gambar.

COLOR berisi fungsi-fungsi untuk mewarnai.

• Stroke Color menentukan warna outline pada objek gambar. • Fill Color berguna untuk mewarnai gambar.

OPTION berisi pilihan yang lain untuk memberi variasi pada fungsi-fungsi tools dan view. Jika kita mengklik icon zoom tool maka option akan menyediakan dua pilihan, yaitu ingin memperbesar atau mengecilkan gambar.

Arrow Sub

Line Lasso

Pen Text

Oval Rectan

Pencil Brush

Free transforFill

TransforInk Bottle Paint

Dropper Eraser

Hand

Zoom

Stroke color

Fill color

Default color No

color Swap color

Option


5

1.4.2 Panel Actions Panel Actions digunakan untuk menuliskan script atau bahasa pemrograman flash (ActionScript). Anda dapat mengetikkan secara langsung pada layar Actions atau menggunakan bantuan yang disediakan oleh Macromedia Flash Pro 8. Untuk memunculkan atau menyembunyikan panel ini dapat digunakan shortcut F9.

Gambar : Panel Actions untuk membuat ActionScript 1.4.3 Panel Library Library merupakan panel yang digunakan untuk menyimpan objek-objek berupa graphic atau gambar, button atau tombol, movie dan suara baik yang dibuat langsung pada stage ataupun hasil proses impor dari luar stage. Untuk memunculkan atau menyembunyikan panel ini dapat digunakan shortcut Ctrl+L.

Gambar : Panel Library 1.4.4 Panel Color Panel Color merupakan panel yang digunakan untuk memilih warna yang digunakan dalam pembuatan objek-objek pada stage. Ada dua jenis subpanel, yaitu: Color Mixer dan Swatches. Shortcut untuk Color Mixer adalah Shift+F9 dan shortcut untuk Color Swatches adalah Ctrl+F9.

Gambar : Bagian dari panel Color

1.4.5 Panel Align & Info & Transform Untuk menampilkan panel ini Anda dapat menekan Ctrl+K pada keyboard. Panel ini digunakan untuk mengatur posisi objek, ingin diletakkan pada tengah stage, sebelah kiri atau kanan dan lain-lain. Dengan panel ini Anda juga dapat memutar objek dengan Transform.


6

Gambar : Bagian dari panel Align & Info & Transform

5. Timeline � semua jalan cerita diatur disini, kapan aktor ini harus muncul dan kapan menghilang, atau kapan efek suara harus ada, atau musik latar mengalun atau kapan munculnya suatu objek.

Gambar Layer dan frame pada Timeline

6. Properties � fungsinya sama dengan panel, hanya saja properties merupakan

penggabungan atau penyederhanaan dari panel, jadi dapat lebih mempercepat dalam mengganti dan memodifikasi berbagai atribut dari objek, animasi, frame dan komponen secara langsung.

Memahami unsur Objek Flash

Ketika menggambar suatu bentuk objek seperti lingkaran atau segiempat, secara otomatis Flash akan menggambar dua unsur objek, yaitu Fill (Bidang) dan Stroke (Bingkai/pinggir)

Menggambar Objek tanpa Fill

• Klik Oval tool, lalu atur melalui toolbox bagian colors. • Klik tombol Foll Color, lalu klik tombol No Colors dan biarkan saja tombol Stroke Color

Tombol Stroke Color Tombol Fill Color Tombol No Color Memahami warna Solid dan Gradiasi

• Klik Paint Bucket Tool, lau atur melalui Toolbox bagian color • Klik tanda segitiga pada tombol Fill Color, akan tampil pilihan warna yang disediakan, pilihlah

warna yang anda inginkan

Stroke (Bingkai/pinggir) Fill (Bidang)


7

• Klik dalam lingkaran untuk memberi warna solid

Menggambar Objek 3D

• Buat gambar lingkaran besar kemudian atur pait bucket toll nya • Buat satu gambar lingkaran kecil kemudian atur pait bucket toll nya • Gabungkan kedua lingkaran tersebut

Membuat kotak sudut tumpul

• Klik Rectangle tool, lalu lihat pada Toolbox bagian Option, di sana terdapat tombol Round Rectangle Radius

• Klik tombol tersebut maka akan tampil kotak dialognya, isikan pada gambar Corner Radius = 50 lalu klik OK

ARROW & SUBSELECTION TOOL Kolaborasi antara Arrow Tool (V) dan Subselection Tool (A) untuk menggambar hati. Aktifkan Snap to Objects (Ctrl+Shift+/).

(a) (b) (a) (b)

Buat objek dengan garis seperti yang terlihat pada gambar di samping.

Dengan panah hitam (Arrow Tool), lengkungkan garis seperti yang terlihat pada gambar. Perhatikan icon lengkung dan lancip yang diinformasikan oleh komputer saat Anda mengarahkan kursor ke daerah tertentu.

Perbaiki gambar Anda, sampai terlihat seperti bentuk hati di samping kiri ini. Sekarang kita ingin melancipkan bagian bawah hati seperti gambar di kanan. Dengan Arrow Tool, hal tersebut tidak memungkinkan. Kita harus menggunakan sub selection tool (panah putih).


8

Mengubah Warna Background dan ukuran movie Apa yang kita lakukan ketika membuat animasi bintang berkedip di malam hati atau burung terbang di langit? Tentu hal pertama yang harus kita lakukan adalah menguibah backgroundnya (latar belakang) menjadi hitam untuk warna malam atu biru muda untuk warna langit. Padahal, secara standar, backgroundnya movie di flash berwarna putih. Sekarang timbul pertanyaan, bagaimana caranya mengubah warna backgroundnya ? ikuti langkah – langkah berikut ini :

• Klik modify �� Document, akan tampil kotak dialognya • Pada background color disebelahnya terdapat kotak, klik tanda segitiga kotak tersebut akan tampil

pilihan warna yang disediakan. Selain dapat mengubah warna background, pada kotak dialog Document Properties juga dapat mengubah ukuran movie di bagian Dimension dan mengubah kecepatan jalannya animasi di frame pada bagian Frame Rate Mengenal Tipe dan Properties Teks

Dalam Flash tipe teks dibedakan menjadi tiga yaitu : a. Teks Statis

Tipe teks ini biasanya digunakan untuk menampilkan informasi yang bersifat tetap (statis), sehingga ketika movie dijalankan, teks tidak bisa berubah atau diedit lagi.

Dengan panah putih, perbaiki kembali gambar tersebut

sehingga sesuai dengan tujuan yang kita inginkan, yaitu lebih

melengkungkan sudut bawah hati.

Perhatikan icon panah putih saat mendekati sebuah titik.

Hal ini berguna untuk membuat lengkungan.

Perhatikan icon panah putih saat mendekati garis. Hal ini

berguna untuk menggerakkan keseluruhan objek.

Perhatikan icon panah putih saat mendekati titik tangen.

Cara kerja inilah yang membedakan panah hitam dan panah

putih.


9

b. Teks Dinamis Tipe teks ini biasanya digunakan untuk menampilkan informasi yang bersifat dinamis, atau berubah sehingga ketika movie dijalankan, teks bisa berubah atau diedit, misalnya teks menginformasikan tentang jam, tanggal, hari, tahun, skor permainan, mengakses teks dari suatu file dan lain-lain.

c. Teks Input Tipe teks ini meminta user untuk memasukkan atau mengisikan tulisan pada kotak yang telah disediakan sehingga ketika movie dijalankan, user bisa menulis atau mengisikan data pada kotak tersebut, biasanya digunakan dalam pembuatan form aplikasi seperti login, buku tamu, survei, toko online dan lain-lain. Aplikasi seperti ini biasanya memerlukan masukan dari user mengenai nama, alamat, password dan lain-lain.

Teks Vertical

• Klik Text tool, lalu tulislah ‘FLASH’ • Pada Properties, klik tombol Change direction of text, lalu pilih Vertical, left to right

Mengubah Teks menjadi bentuk • Klik Text tool, lalu tulislah teks ‘FLASH’ lalu klik menu Modify �� Break Apart • Klik lagi menu Modify �� Break Apart Teknik ini juga dapat digunakan untuk memisahkan objek, tetapi lakukan perintah Break apart –nya sekali saja, seperti dibawah ini

Teks Statis

Teks Input

Teks Dinamis


10

Latihan 1:

1. Buatlah bentuk lingkaran dengan layer bernama lingkaran , beri warna merah.

2. Buatlah teks menggambar lingkaran dengan warna merah, layer teks 2.

3. Cek hasil anda seperti berikut ini.

Simpanlah dengan nama drawing 1 Jika belum sama dengan yang tergambar, jangan segan untuk bertanya. Latihan 2.

1. Lanjutkan membuat layer baru bernama garis, buatlah garis dengan menggunakan line tool (

) dengan warna biru.

2. Buatlah layer baru dengan nama teks 3, buatlah teks menggambar garis, warna biru.

3. Rubahlah ketebalan garis dengan memilih garis, klik stroke height pada properties (

), ubah juga bentuk garis sesuai keinginan dengan klik stroke style (

).

4. Cek dengan hasil berikut ini.

Simpanlah hasil kerja dengan nama drawing 2.


11

BAB 2

ANIMASI DASAR: MOTION TWEEN, SHAPE DAN GUIDE

Macromedia Flash merupakan software keluaran Macromedia yang dapat digunakan untuk pembuatan animasi: web, film kartun dan presentasi multimedia. Sampai tutorial ini dibuat Macromedia sudahmengeluarkan sampai dengan versi ke-8. Karena kemudahan dan banyak manfaatnya, maka sofware ini dipelajari oleh berbagai kalangan. Tutorial berikut sedikit akan membahas pembuatan animasi-animasi dasar. Meskipun tutorial ini menggunakan Flash 8 sebenarnya Anda pun dapat menggunakan versi-versi sebelumnya. Berikut akan dijelaskan teknik-teknik pembuatan animasi dasar mengunakan Macromedia Flash 8. 1. Animasi Dasar Motion Tween Animasi ini merupakan animasi yang paling dasar karena animasi ini pada prinsipnya adalah pergerakan suatu objek (motion), seperti halnya definisi animasi yaitu teks/gambar yang bergerak. Langkah 1: Buat objek lingkaran menggunakan Oval Tool (C+O) Langkah 2: Seleksi objek menggunakan Selection Tool (C+V) atau Ctrl + A, untuk menyeleksi objek lingkaran. Setelah itu, klik kanan _ Convert to symbol _ pilih Movie Clip

Gambar : Jendela dialog Convert to Symbol (F8)

Langkah 3: Pilih frame 20 pada Layer 1 di Timeline, setelah itu klik kanan dan Insert Keyframe. Geser objek ke arah kanan _ kembalikan objek ke frame 1

Gambar . Insert Keyframe (F6)


12

Langkah 4: Pada Properties di bawah stage pilih Tween Motion. Jika langkah benar, maka di bagian layer 1 akan muncul panah dari frame 1 ke frame 20. Untuk menjalankan animasi: Enter atau Ctrl + Enter untuk melakukan Test Movie.

Gambar : Jendela Dialog Pemilihan Jenis Animasi

Untuk menghentikan test movie_Ctrl + W CATATAN: Animasi berhasil jika dalam layer terdapat tanda panah (_). Jika belum berhasil (garis dalam layer berupa garis putus-putus), ulangi langkah Anda sampai berhasil !

Latihan 3.

Sebagai latihan dengan jenis motion tween Anda dapat membuat: Animasi bola pantul Animasi tersebut berupa bola yang berpantul dari suatu titik ke titik yang lain, misalnya dari titk A ke B, dari B ke C dan seterusnya. Untuk pengembangan Anda juga dapat menambahkan background/gambar latar belakang, caranya dengan menambahkan layer baru yang dilengkapi dengan keyframe sepanjang objek tersebut berjalan.

Gambar 4. Ilustrasi Bola Pantul 2. Animasi Motion Shape Animasi bentuk/shape dibedakan menjadi 2 bagian yaitu: a. Animasi bentuk dengan objek statis/diam di tempat b. Animasi bentuk dengan objek dinamis/bergerak (ada motion-nya) Yang perlu diperhatikan ketika Anda akan membuat animasi bentuk baik yang statis ataupun dinamis adalah bahwa objek tidak perlu di Convert to Symbol. a. Animasi Bentuk Statis Langkah-langkahnya: Langkah 1: Buat objek lingkaran dengan Oval Tool. Langkah 2: Klik Frame 30, kemudian Insert Keyframe.


13

Langkah 3: Ubah bentuk lingkaran menjadi bentuk bukan lingkaran, menggunakan subselection tool. Langkah 4: Klik frame 1, pilih tween-shape di bawah stage. Langkah 5: Tekan Enter untuk Play atau Ctrl + Enter untuk Test Movie.

Gambar 5. Perubahan bentuk objek dari Frame 1 ke Frame 30

b. Animasi Bentuk Dinamis Jenis animasi ini merupakan pengembangan dari animasi bentuk statis. Pada jenis animasi ini akan diberikan contoh objek kotak berubah menjadi teks kotak. Langkah-langkahnya adalah: Langkah 1: Buat bentuk objek bentuk kotak di frame 1 menggunakan rectangle tool. Langkah 2: Klik frame 40, insert keyframe. Langkah 3: Pindahkan objek kotak dari frame 1 ke frame 40 setelah itu hapus objek dengan Delete. Langkah 4: Masih di frame 40, buat teks KOTAK, lalu tekan Ctrl + B (2x), agar teks terkonversi menjadi objek. Langkah 5: Kembali ke frame 1, pilih tween-shape, tekan Enter.

Gambar 6. Perubahan objek kotak menjadi teks “KOTAK” Sederhana dan mudah bukan ?


14

Latihan 4.

Untuk pengembangan Anda dapat membuat animasi berikut: A. Animasi Tumbukan Fisika

Ilustrasi: Objek mobil bergerak dari titik A ke titik B. Objek truk bergerak dari C ke B. Titik B merupakan titik tengah A dan C. Di titik B kedua objek bertemu dan terjadi tumbukan. Namun karena objek truk lebih besar dan kuat maka objek truk hanya bergerak beberapa meter saja, sedangkan objek mobil terpelanting jauh. Bagaimanakan animasinya ? Berkhayalah ..... B. Animasi Bola Sodok Ilustrasi: Buatlah background area billiard dengan satu stcik dan 2 bola, misalnya bola A dan B. Setelah itu stick akan menyodok bola A dan mengenai bola B, bola A dan bola B sama-sama terpental hanya karena menyodoknya tidak terlalu keras, maka bola A terpental lebih pendek daripada bola B. Bagaimanakah animasinya ? Animasi ini dapat dikembangkan dengan jumlah bola lebih banyak, area billiard ada lubangnya dan bola yang dsodok berturutan dan lebih banyak. 3. Animasi Motion Path Animasi ini merupakan dasar dari animasi game balapan mobil atau motor, yaitu bahwa mobil/motor bergerak mengikuti jalur/track yang sudah ditentukan. Hati-hati dalam membuat animasi ini, karena langkah tidak sesuai prosedur, maka animasi tidak akan berhasil. Langkah-langkah: Langkah 1: Buat objek persegi menggunakan rectangle tool dan convert object to symbol (F8), pilih Movie Clip Langkah 2: Klik kanan pada layer 1, pilih Add Motion Guide Langkah 3: Buat jalur bebas menggunakan Pencil Tool di layer guide Langkah 4: Gunakan Selection Tool, klik frame 30, dan insert keyframe di layer guide Langkah 5: Pilih kembali layer 1, frame 1, pindahkan objek ke pangkal jalur, posisikan objek dengan tepat, sehingga terlihat lingkaran kecil di tengah-tengah objek persegi

Gambar 7. Posisi layer dan Guide Layer


15

Gambar 8. Posisi Objek setelah diletakkan di pangkal jalur

Langkah 6: Klik frame 30 pada layer 1, lalu Insert Keyframe Langkah 7: Pindahkan objek dari pangkal ke ujung sesuai jalur yang dibuat, hati-hati pada langkah ini ! Langkah 8: Klik kembali frame 1 pada layer 1 kemudian pilih Tween Motion Langkah 9: Tekan Enter untuk Play animasi yang baru saja Anda buat, jika belum berhasil ulangi langkah-langkah tersebut Masih banyak animasi-animasi yang dapat dibuat dengan Macromedia Flash, namun langkah-langkah yang diberikan di atas kiranya dapat panduan bagi pemula yang ingin belajar animasi Flash. Selamat mencoba,

BAB 3 ANIMASI SEDERHANA

Gambaran Animasi pada Timeline Anda akan menemui gambaran pada area timeline sewaktu membuat frame by frame animation atau motion tweened animation.

Gambaran keyframe pada area timeline dapat dilihat dalam bentuk titik hitam. Anda akan melihat berbagai gambaran berikut ini pada area timeline sewaktu membuat animasi:

• Gambaran ini merupakan motion-tweened animation. Frame-frame tween diwakili oleh panah hitam dengan warna latar biru terang.

• Gambaran ini merupakan shape-tweened animation. Frame-frame yang di tween diwakili oleh panah hitam dengan warna latar hijau terang.


16

• Gambaran ini bisa terjadi pada motion atau shape tweened animation. Garis titik-titik tersebut menandakan bahwa keyframe terakhir tidak ada. Untuk melihat perubahan dalam suatu animasi, minimal dibutuhkan dua keyfame Kalau hanya terdapat 1 keyframe, Anda akan seperti melihat gambar-yang diam tidak bergerak.

• Gambaran ini berisi frame-frame yang sama dengan keyframe awal yang diwakili oleh warna abu-abu terang dan gambar kotak putih menandakan frame terakhir.

• Gambar 'a' kecil menandakan bahwa ada perintah atau script agar di frame tersebut

melakukan sesuatu.

• Gambar 'bendera merah' menandakan bahwa di frame tersebut berisi atau komentar.

Frame By Frame Animation Frame By Frame Animation animation ini seperti pekerjaan manual yang dilakukan oleh Manusia bila membuat film kartun dan penggunaannya sangat cocok untuk animasi yang rumit. Mereka menggambar satu per satu gambar pada frame dan setelah semuanya baru kemudian dianimasikan. Cara kerja di Flash pun tidak berbeda seperti yang telah dijelaskan di atas. Kita menggambar frame per frame di stage, setelah itu baru dijalankan. Animasi jenis ini ukuran file jauh lebih besar dibanding tweened animation. Oleh karena itu disarankan bila animasi yang kita buat tidak terlalu rumit, gunakan tweened animation untuk mengurangi ukuran movie kita.

Tweened Animation Ada dua jenis tweened animation. Pertama adalah motion tweening, Anda menentukan property seperti posisi, ukuran dan rotasi untuk sebuah instance, group atau text block untuk


17

satu titik keyframe, dan pada saat bersamaan Anda juga mengubah property yang sama di keyframe berikutnya. Kedua adalah shape tweening, Anda menggambar shape pada satu keyframe dan sekaligus juga mengubah bentuk shape tersebut di keyframe berikutknya. Berdasarkan informasi perubahan nilai atau shape tersebut, Flash membuat beberapa frame di antara keyframe tersebut (frames,in between) untuk membuat animasi. 1. Motion Tweening

Pada animasi ini, Anda mengubah property dari instance, group, atau text block. Flash dapat men-tween posisi, ukuran, rotasi, dan memiringkan instance, group, dan tulisan. Flash dapat men-tween warna dari instance dan tulisan, gradasi warna, fade in atau fade out. Tetapi untuk men-tween warna dari group atau Tulisan, Anda harus membuat mereka menjadi symbol terlebih dahulu. Untuk membuat motion tweening, Anda tinggal menentukan keyframe awal dan akhir. Kemudian Flash otomatis akan men-tween frame-frame di antaranya sehingga terbentuklah animasi.

Gambar Tweened frames

Berdasarkan ilustrasi di atas, ikan pada frame kedua, ketiga, dan keempat adalah hasil tweening yang dibuat oleh Flash berdasarkan pada frame pertama dan kelima. Frame ke-1 dan ke-5 merupakan frame kunci atau keyframe dalam proses tweening.

Project 1

KALEIDOSKOP

Pernahkah anda melihat kaleidoskop? Sebuah tabung kecil seperti teropong yang ketika kita gerak-gerakkan maka kita akan melihat bentuk-bentuk yang berwarna-warni.

Pada dasarnya, kaleidoskop itu terdiri dari beberapa potongan lingkaran. Nah, buatlah kaleidoskop versi digital dengan menggunakan Flash.

Frame 1 Frame 5


18

Ikuti langkah-langkah seperti berikut :

Setting the stage. 1. Buatlah dokumen baru di Flash. File → New. 2. Default size adalah 550 x 400 px. Kita tidak perlu mengubah ukuran stage. Membuat potongan lingkaran 1. Buatlah sebuah lingkaran dengan menggunakan oval tool (atau O untuk shortcut).

2. Buatlah sebuah garis vertikal yang membelah lingkaran yang baru kita buat menjadi dua.

Lihat gambar 2.

3. Pilih garis tersebut dan copy → paste in place (ctrl + shift + v) Kemudian pilih menu Modify → Transform → Scale and Rotate (ctrl + alt + s). Maka akan muncul dialog tab seperti pada gambar dibawah. Isikan kolom Rotate sebesar 22.5

Maka, hasilnya akan terlihat seperti pada gambar 3.

4. Hapuslah fill dan garis luar lingkaran tersebut sehingga membentuk potongan pizza seperti gambar 4.


19

5. Pilih bentuk potongan lingkaran tersebut dan convert menjadi symbol movieclip. Tekan F8 untuk memunculkan dialog convert to symbol. Namai symbol tersebut dengan nama 'potongan' dan pilih Movieclip diantara 3 pilihan yang tersedia. Ubahlah nama layer 1 menjadi 'Pecahan'. 6. Klik tool Free Transform Tool (Q). Geserlah pivot point ke bagian bawah (sudut) potongan lingkaran tersebut.

7. Copy → Paste in Place (ctrl + shift + v) potongan tersebut dan pilih menu Modify → Transform → Scale and Rotate (ctrl + alt + s). Isikan bagian Rotate sebesar 22.5 Hasilnya akan seperti gambar di bawah ini.

8. Ulangi langkah 7 sampai semua potongan membentuk formasi lingkaran seperti gambar di bawah.

9. Klik layer Pecahan dan tekan F8 untuk memunculkan dialog convert to symbol. Beri nama 'Kaleidoskop' dan pilih Movieclip. Biarkan Registration di tengah.


20

10. Pada bagian Library (Tekan L atau menu Window → Library), pilihlah movieclip Pecahan. Klik kanan pada movieclip tersebut dan pilih Edit.

Dalam stage movieclip Pecahan, buatlah sebuah layer baru bernama 'Warnawarni' dan drag layer tersebut hingga berada dibawah layer 1. Buatlah beberapa segi enam yang berwarna warni. Pilih tool Rectangle (Klik beberapa detik) dan pilih polystar tool (shortcut R).

Copy paste segi enam tersebut sehingga membentuk formasi seperti yang terlihat pada gambar di bawah ini.

Pilih layer Warnawarni dan tekan F8 untuk convert formasi segi enam tersebut menjadi movieclip. Posisikan tepat di sebelah kiri bentuk potongan lingkaran. Pada layer 1, klik frame 40, dan masukan frame (Klik kanan → Insert Frame). Pada layer Warnawarni, klik frame 20. Tepat di frame 20, masukkanlah keyframe (Klik kanan → Insert Keyframe).


21

Masih di frame 20, geserlah movieclip warnawarni tepat ke sebelah kanan potongan lingkaran (tips : sambil mendrag movieclip tsb, tekan Shift agar posisi y tidak berubah) Klik diantara frame 1 sampai 20 dan klik kanan → Create Motion Tween

Klik frame 40 pada layer Warnawarni, dan masukkan keyframe. Pada frame 40, geserlah posisi movieclip Warnawarni tepat seperti pada posisi di frame 1. Kemudian diantara frame 20 dan 40, klik kanan → Create Motion Tween. Klik tab Properties (Window → Properties), dan pada bagian Rotate, pilih CW dan kolom sebelahnya 1. Setelah itu, pilih layer 1 dan ubah menjadi Mask dengan cara klik kanan → Mask. Play movie dengan menekan ctrl + Enter.

Anda bisa membuat variasi animasi warna kaleidoskop dengan mengubah bentuk movieclip Warnawarni dan pergerakannya (tween animation, rotation, dsb). Selamat menikmati visualisasi kaleidoskop yang ajaib

Motion Guide Motion guide berguna untuk membuat objek bergerak mengikuti jalur atau path yang Anda buat sendiri. Lihat Gambar. Prinsip animasinya mirip dengan motion tweening, hanya tinggal menambahkan path sebagai panduan untuk membuat animasinya.


22

Gambar Objek yang mengikuti path

Perhatikan pada Gambar terlihat bahwa objek ikan di atas akan bergerak mengikut garis atau path.

2. Shape Tweening Pada animasi ini, Anda mengubah atau men-tween bentuknya atau shape-nya. Dengan tweening shape ini Anda dapat membuat efek mirip morphing yang membuat perubahan dari bentuk satu ke yang lain. Selain men-tween shape, Flash juga dapat men-tween lokasi, ukuran dan warna shape. Untuk hasil yang baik biasanya digunakan satu shape. Jika Anda menggunakan banyak shape, semuanya harus dalam layer yang sama.

Gambar File latihan

1. Anda lihat pada gambar terdapat hanya satu layer yang memiliki dua keyframe. Keyframe pertama (frame ke-1) adalah tuhsan "1" dengan warna hitam dan keyframe kedua (frame ke-15) adalah tulisan "2" dengan warn merah.

Sesuai dengan namanya, tipe animasi shape tweening hanya dapat men-tween shape saja, jadi tidak dapat men-tween symbol, gambar bitmap, text block. Karena tulisan di atas adalah text block, maka Anda harus membuatnya menjadi shape terlebih dahulu.

2. Klik tulisan "1" pada keyframe ke-1 dan jadikan shape. Pilih menu �� Break Apart

(CTRL+B). 3. Ulangi langkah 2 untuk tulisan "2".

Gambar Text block yang berubah menjadi shape


23

4. Untuk melakukan shape tweening, klik salah satu frame di antara frame ke-2 sampai frame ke-14 sehingga akan membuat seluruh frame dari frame ke-1 sampai frame ke-14 menjadi tersorot.

5. Pada properties di bawah, pada tween pilih shape 6. Jalankan Ctrl + Enter 7. Hasilnya

Project 2 Animasi OmbakAnimasi OmbakAnimasi OmbakAnimasi Ombak

Untuk membuat animasi ombak , ikuti tutorial sebagai berikut : 1. Buka program flash 8

2. Ubah ukuran stage menjadi 768 x 576 pixels.

3. Ganti warna bacground menjadi warna hitam

4. Ganti warna fill color menjadi #336699 dan warna stroke dijadikan none

5. Klik rectangle tool untuk membuat airnya dengan mendragnya ke stage seperti

gambar dibawah ini.

4. Klik kanan di frame 15 lalu klik insert keyframe, Ubah gambar airnya dengan cara tarik ke

atas menggunakan selection tool yang sebelah kiri

Gambarnya :


24

7. Klik di frame 1 lalu pilih tween shape

gambarnya

Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>

8. Klik Di frame 15 pilih tween shape

9. Lalu copy frame 1

caranya : klik kanan pada frame 1 dan pilih Copy Frames

kemudian Pastekan di frame 60

10. Klik Di frame 35 pilih tween shape

Seperti gambar dibawah ini:

Selamat mencoba...(@_@)

Jika semua sudah selesai tinggal kita menekan ctrl + enter dan nikmati hasilnya

( Jika sudah dianggap sempurna , mintalah untuk dinilai )


25

MEMBUAT BERBAGAI ANIMASI

1. Cara Cepat membuat animasi • Klik Rectangle tool, lalu gambarlah kotak di sebelah kiri layar

• Pada timeline, klik kanan frame 1, akan tampil menu, pilihlah Create Motion Tween

• Kemudian klik kanan pada frame 20, akan tampil menu, pilihlah Insert Keyframe

• Masih di frame 20, klik Selection tool, lalu pindahkan kotak ke sebelah kanan layar

• Untuk melihat hasilnya klik menu control �� test movie (ctrl + enter)

• Simpan filenya klik File �� Save as beri nama animasi1.

2. Cara Cepat membuat animasi • Buka file animasi1 • Klik menu Insert � Timeline � Motion Guide, akan tampil Guide : Layer 1 di atas Layer

1

• Pada Guide : Layer 1, klik frame 1, lalu klik Pencil tool dan gambarlah garis seperti

gambar

• Setelah kita selesai menggambar garis di layer Guide : Layer 1, secara otomatis objek kotak di frame 1 akan menempatkan posisinya pada awal garis dan objek kotak di frame 20 akan menempatkan posisinya pada akhir garis.

3. Animasi Marquee

• Aturlah ukuran dan kecepatan frame movie. Klik menu Modify

pada bagian Dimension : 400 px X 30 px dan Frame Rate : 6

• Klik Text tool, lalu tulislah ‘Selamat Datang’ di luar layar bagian kanan.

• Pada bagian Timeline, klik kanan pa• Klik kanan pada frame 20, pilihlah insert Keyframe, lalu pindahkan teks ke luar layar

bagian kiri

4. ANIMASI TRANSPARAN

1. Atur baground berwarna hitam, lalu klik Text tool dan tulislah ‘Welcome to Flash

Heaven’ dengan warna putih

2. Pada Timeline, klik kanan pada frame 1, pilihlah

klik kanan pada frame 20, pilihlah

3. masih di frame 20, pilih teks ‘Welcome to Flash Heaven’ lalu atur

pada color : Alpha dengan nilai 0 %

5. ANIMASI WARNA WARNI

1. Buat tulisan “C E R I A”

2. Pada Frame 1 tulisan “C E R I A” berwarna hitam

3. Beri Insert keyframe

4. Pada Frame 5 huruf E berwarna biru

5. Pada Frame 10 huruf R berwarna hijau

Macromedia Flash 8

Setelah kita selesai menggambar garis di layer Guide : Layer 1, secara otomatis objek kotak di frame 1 akan menempatkan posisinya pada awal garis dan objek kotak di frame 20 akan menempatkan posisinya pada akhir garis.

Aturlah ukuran dan kecepatan frame movie. Klik menu Modify � Document, lalu isikan

pada bagian Dimension : 400 px X 30 px dan Frame Rate : 6

Klik Text tool, lalu tulislah ‘Selamat Datang’ di luar layar bagian kanan.

Pada bagian Timeline, klik kanan pada frame 1, pilihlah Create Motion TweenKlik kanan pada frame 20, pilihlah insert Keyframe, lalu pindahkan teks ke luar layar

ANIMASI TRANSPARAN

Atur baground berwarna hitam, lalu klik Text tool dan tulislah ‘Welcome to Flash

engan warna putih

, klik kanan pada frame 1, pilihlah Create Motion Tween

klik kanan pada frame 20, pilihlah Insert Keyframe.

masih di frame 20, pilih teks ‘Welcome to Flash Heaven’ lalu atur properties,

: Alpha dengan nilai 0 %

ANIMASI WARNA WARNI

Buat tulisan “C E R I A”

Pada Frame 1 tulisan “C E R I A” berwarna hitam

Insert keyframe pada frame 5,10,15,20

Pada Frame 5 huruf E berwarna biru

Pada Frame 10 huruf R berwarna hijau


26

Setelah kita selesai menggambar garis di layer Guide : Layer 1, secara otomatis objek kotak di frame 1 akan menempatkan posisinya pada awal garis dan objek kotak di

Document, lalu isikan

Klik Text tool, lalu tulislah ‘Selamat Datang’ di luar layar bagian kanan.

da frame 1, pilihlah Create Motion Tween Klik kanan pada frame 20, pilihlah insert Keyframe, lalu pindahkan teks ke luar layar

Atur baground berwarna hitam, lalu klik Text tool dan tulislah ‘Welcome to Flash

Create Motion Tween. Kemudian,

properties,pilihlah


27

6. Pada Frame 15 huruf I berwarna merah

7. Pada Frame 20 huruf A berwarna kuning

6. Break Apart

1. Klik Oval tool, lalu gambarlah bulatan berbentuk oval di layar

2. klik kanan frame 20, pilihlah Insert blank key frame

3. Pada frame 20, klik teks tool lalu tuliskan ‘BERUBAH’ di layar. Kemudian, pilih teks

‘BERUBAH’ klik menu Modify �� Break Apart sebanyak 2 kali.

4. klik frame 1 untuk kembali ke frame 1, lalu atur Properties, pilihlah pada Tween

shape.

7. Animasi Masking

1. Klik Text tool, lalu tulislah ‘MASKING’ di layar. Kemudian klik kanan pada frame 25, dan

pilihlah Insert Frame.

2. Klik menu Insert �� Timeline �� Layer untuk membuat layer baru. Klik rectange tool, lalu

gambarlah segi empat berwarna gradiasi orange kuning disebelah kiri teks.

3. Pada Timeline, klik kanan frame 1, pilihlah Create Motion Tween.

4. Klik kanan pada frame 25, pilihlah Insert Keyframe, lalu pindahkan segiempat gradiasi ke

sebelah teks.

5. Pindahkan layer 1 keatas layer 2, lalu klik kanan Layer 1 dan pilihlah Mask.


28

8. Animasi Rotasi

1. Klik Rectangle tool, lalu gambarlah segiempat panjang di kiri layar

2. Pada Timeline, klik kanan pada frame 1, piihlah Create Motion Tween

3. Klik kanan pada frame 15, pilihlah Insert Keyframe, lalu pindahkan segiempat

panjang ke kanan layar.

4. Klik pada frame 1 untuk kembali ke frame 1, lalu atur Properties, isikan pada Rotate :

CW dengan nilai 2


29

BAB 4

Simple Action Script Action script merupakan bahasa script yang digunakan dalam pemrograman flash, dengan script ini animasi lebih menarik dan interaktif. 1. Membuat Dokumen baru, pilih menu File, New, Flash Document, Ok. 2. Merubah layer 1 menjadi bejana (karena cara sama dengan sebelum bab 6 maka penjelasan tidak diulang).

3. Menggambar kotak menggunakan rectangle tool ( ) rubahlah warnanya sesuai keinginan.

4. Merubah kotak menjadi symbol dengan klik kanan pada kotak, pilih convert to symbol.

Mengisi name bejana, dan type graphic, akhiri dengan Ok.

5. Membuat layer baru zat cair


30

6. Menggambar kotak, berikan warna berbeda.

7. Memasukkan frame dengan klik pada time line 30 layer bejana, klik kanan pilih insert frame. Artinya bejana akan bergerak hingga waktu ke-30.

8. Memasukkan keyframe layer zat cair pada timeline 30. Lakukan klik kanan pada time line 30 layer zat cair, pilih keyframe.


31

9. Free Transform Pilih kotak zat cair, klik kanan, free transform.

Geser ke atas kotak zat cair

10. Pilih time line 1, layer zat cair


32

Pada properties, pilih tween: Shape, klik sembaran lokasi di stage.

Lihat ada perubahan di time line.

Lihat juga hasil animasi dengan menggeser kota merah di time line. Gambar yang betul ketika bergeser, warna kuning juga bergerak.

Membuat Script Stop 1. Buat layer baru Stop, klik time line 1. 2. Pilih Action untuk memunculkan Action panel.


33

Klik tanda add a new item to the script (), pilih global function, timeline control, stop. 3. Klik tanda minimize ( Action Frame) untuk menutup Action panel. Membuat Script Tombol Play 1. Membuat layer baru tombol Play

2. Memunculkan library button, dengan pilih window, commont library, button.

3. Geser ke kanan, pilih bentuk buttonnya. Pilih button circle flat, circle flat purple


34

4. Tekan dan geser ke stage,

5. ubah ukuran agar serasi dengan gambar menggunakan free transform tool ( ). Memberi Action pada tombol play 1. Pilih Action ( ) untuk mengeluarkan Action panel 2. Pilih tanda add a new item to the script ( ), pilih global functions, movie clip control, on.


35

Pada jendela mucul script berikut

Pilih tanda show code hint ( ) setelah tanda kurung buka, pilih release dengan cara double klik muncul tambahan script.

Tekan enter setelah buka kurung kurawal

Pilih tanda , pilih global functions, timeline control, play

Script akhir tombol play bertambah menjadi

Minimize kan action Lakukan Test Movie, jika enter dipilih maka animasi bergerak


36

Menutup layer dengan menekan tanda close ( ) Lakukan penyimpanan, pilih menu File, save as, beri nama action script, klik save. Mengatur Lebar layer 1. Pilih Properties,

2. ubah ukuran (size) menjadi 250 x 300 agar tidak banyak halaman yang nampak kosong.

3. Lakukan penyimpanan kembali dengan menu File, save Membuat Animasi Autotyping Text Pada tutorial ini saya akan menjelaskan langkah-langkah pembuatan animasi autotyping text menggunakan Flash 8 dan sedikit menggunakan action script. Anda dapat menggunakan jenis animasi ini untuk presentasi, membuat banner atau untuk keperluan yang lain. Mari kita mula ! Langkah 1 Buat dokumen flash baru. Tekan Ctrl+J di keyboard Anda untuk mengatur Document Properties dan aturlah dimensi dari dokumen sesuai keinginan Anda. Pilihlah putih sebagai backgroundnya. Aturlah Flash movie’s dengan frame rate 34 setelah itu klik OK.


37

Langkah 2 Select the Text Tool (A) and go the Properties Panel (Ctrl+F3) below the stage. Then, choose Pilihlah Text Tool (A) dan tekan Ctrl+F3 (Properties Panel) yang terletak di bawah stage, kemudian aturlah seperti berikut. 1. Pilih Dynamic Text. 2. Pilih font: Lucida Sans. 3. Pilih 12 sebagai ukuran fontnya dan buatlah menjadi Bold (B). 4. Pilih #000000 sebagai warna 5. Pada bagian rendering option pilih Use Anti-alias for readability. 6. Untuk instance name, pilihlah My Text

Setelah itu, klik dan dragout dan buatlah field text dengan ukuran besar. Buatlah sedemikian rupa ukurannya lebih kecil daripada stage.

Langkah 3 Pada layer yang aktif, gantilah namanya menjadi autotypingtext dengan cara klik dua kali.

Langkah 4 Buatlah layer baru di atas layer autotyping dan berilah nama actionscript. Setelah itu, klik kanan pada layer autotyping frame 1 dan pilihlah Actions (F9) Tambahkah script berikut pada panel Action Script: var i:Number = 0;


38

var myMessage:String = "ISTIYANTO COM MEDIA ONLINE BELAJAR MATEMATIKA DAN TIK.\n\nIstiyanto.Com merupakan blog dengan konten Matematika dan TI.\n\nSaat ini Istiyanto.Com memiliki ribuan member yang tersebar di seluruh \n\npelosok tanah air. Daftarkan email Anda sekarang juga untuk menjadi \n\nmember Istiyanto.Com."; function autoWrite():Void { if (i<=myMessage.length) { My_text.text = myMessage.substr(0, i)+"█"; i = i+1; } else { clearInterval(writingInterval); 3 } } var writingInterval:Number = setInterval(autoWrite, 16); tombol.onRelease = function():Void { i = 0; writingInterval = setInterval(autoWrite, 16); } Langkah 5 Tambahkan layer baru di atas layer actionscript, kemudian gantilah nama layernya menjadi tombol. Layer Anda seharusnya seperti berikut.

Layer 6 Buatlah tombol dengan posisi pada stage sebagai berikut. Setelah itu beri nama instance name tombol di panel sebelah kiri bawah.

Layer 7 Tekan Ctrl+Enter untuk Test Movie. Untuk melihat isi file secara detail, silahkan download file fla-nya.


39

Project 3 Membuat Digital Clock di Flash

Bagaimana perasaan Anda ketika berhasil membuat sebuah aplikasi sederhana? Pastilah bangga bukan, Jika Anda ingin berkreasi membuat aplikasi sederhana tersebut disinilah jawabannya. Tutorial ini akan menuntun Anda membuat aplikasi sederhana berupa Digital Clock yang dibuat di Flash 8. Dengan dukungan Action Script yang lebih mudah dipahami, Anda akan dapat membuat aplikasi sederhana tersebut dalam hitungan detik…. Percaya peu hana (percaya atau tidak) Langkah Pembuatan 1. Buka halaman Flash dan buat 3 buah layer dengan nama layer action, dynamic text, dan backround.

2. Buat ukuran document

3. Pada layer backround buat desain untuk dijadikan backround.


40

4. Pada layer dynamic text buat text tool dengan pilihan Dynamic Text.

5. Buat nama variable pada dynamic Text dengan nama Clock_text

6. Pada layer action ketikan script pada frame 1 time=new Date(); // time object var seconds = time.getSeconds() var minutes = time.getMinutes() var hours = time.getHours() if (hours<12) { ampm = "AM"; } else{ ampm = "PM"; } while(hours >12){ hours = hours - 12; } if(hours<10) { hours = "0" + hours; } if(minutes<10) { minutes = "0" + minutes; } if(seconds<10) { seconds = "0" + seconds; } Clock_text.text = hours + ":" + minutes + ":" + seconds +" "+ ampm; 7. Pada layer acton ketikan script pada frame 2 gotoAndPlay(1);


41

8. Insert key frame 2 pada layer dynamic text dan backround

9. Ctrl+Enter untuk melihat hasil

Selamat Mencoba dan berkreasi ….

Project 4 Membuat Navigasi Sederhana

Pada dasarnya tutorial ini dapat dikembangkan untuk membuat sebuah permainan atau game yang sederhana. Mungkin Anda pernah melihat atau bahkan Anda sudah pernah bermain game pesawat tempur, untuk menggerakkan pesawat tempur tersebut kita dapat menggunakan tombol navigasi anak panah yang ada di dalam keyboard. Tombol anak panah atas, bawah, kiri dan kanan dipakai untuk mengendalikan gerak pesawat. Tentu Anda bertanya apa sulit untuk membuat navigasi dengan menggunakan keyboard? Tentu tidak karena Flash telah menyediakan printah-printah praktis untuk menggerakkan gambar atau objek apa saja lewat tombol-tombol pada keyboard. Berikut langkah-langkah membuat navigasi sederhana dengan menggunakan anak panah pada keyboard. 1. Buka halaman Flash dan buat 1 buah layer dengan nama layer navigasi

2. Pada layer navigasi klik file>inport>import to library pilih objek yang akan dijadikan navigasi utama.

3. Klik pada objek yang dijadikan objek navigasi kemudian tekan F9 dan ketikan script di bawah ini :


42

onClipEvent (enterFrame) { if(Key.isDown(Key.UP)) { this._y -=10; } if(Key.isDown(Key.DOWN)) { this._y +=10; } if (Key.isDown(Key.RIGHT)) { this._x +=10; } if (Key.isDown(Key.LEFT)) { this._x -=10; } }

4. Tekan Ctrl+enter untuk melihat hasil


43

APLIKASI

Macromedia Flash Professional 8: Proteksi SWF dengan Password

Macromedia Flash menghasilkan file bertipe SWF yang bisa digunakan untuk situs Web, Multimedia Interaktif, atau aplikasi lainnya. Sudah bukan rahasia lagi, SWF sebenarnya bisa dibongkar kembali menjadi FLA yaitu format file project Flash yang berisi elemen seperti movie clip, action script serta elemen lainnya.

Tentu bukan hal yang menyenangkan kalau ada orang lain yang dengan seenaknya menyontek hasil karya kita dengan meniru konsep desain dan mengambil action script dengan cara membongkar projectnya. Untuk inilah Macromedia menambahkan fitur baru pada Macomedia Flash Professional 8 untuk mengunci file SWF dengan kata sandi. Tanpa banyak omong langsung saja kita coba.

1. Klik menu [File] > [Publish Settings...]. 2. Beri tanda pada kotak Flash. 3. Aktifkan tab menu [Flash]. 4. Pada grup Option beri tanda kotak Protect from import dan Debugging permitted. 5. Masukkan kata sandi pada kotak Password. 6. Klik [Publish] untuk mengkompilenya menjadi SWF yang terproteksi.

Nah, dengan cara diatas Macomedia Flash akan meminta kata sandi jika file tersebut akan diimport. Juga ketika akan dikonversi kembali menjadi FLA.


44

Bab5 Presentation Publishing

“Publish Settings” digunakan untuk membuat file-file seperti *.SWF (Bisa dibuka jika ada flash player pada komputer), *.Fla (Dibuka jika ada Macromedia Flash/File mentah M. Flash), *.Exe (File yang berdiri sendiri) dan yang lainnya)

Cara melakukan “Publish Settings” 1. Pilih Menu File, Publish Setting.

2. Keluar jendela pilih *.exe, pilih publish

3. Pilih OK Hasil publish bisa dibuka dengan double klik.


45

Hasil seperti berikut ini.

BAB 1 PENGENALAN MACROMEDIA FLASH · PDF filepermainan efek suara dan gerakan menarik agar...

Documents

Transcript of BAB 1 PENGENALAN MACROMEDIA FLASH · PDF filepermainan efek suara dan gerakan menarik agar...