CHAPTER 2 MACROMEDIA FLASH Ariesto Hadi 1
DAFT AFTAR AR ISI 4. Teks... 3 1. Embeded dan device font... 3 2. Menulis dengan text tools... 3 3. Mengedit tulisan... 4 4. Panel character... 4 4. Panel paragraph... 5 5. Panel text option... 6 5. Animmasi teks dan gambar... 9 1. Mengubah warna dan transparency dari suatu gambar... 9 2. Mengubah warna dan transparency dari teks... 10 3. Membuat animasi teks dengan path... 11 4. Membuat animasi karakter dengan path... 12 5. Mask gambar... 13 8. Mask huruf... 13 2
4. TEKS Embeded dan Device Font Zeembry Embeded font - font yang telah diinstall pada sistem dan akan disertakan (embed) pada file SWF. Deviec font - font yang akan digunakan sesuai dengan font pada lokal komputer. Bila device font tidak ada pada lokal komputer, Flash Player akan mengambil font yang mirip dengannya. Menulis dengan Teks Tools Langkah-langkah membuat tulisan: 1. Pilih File > New untuk memulai perkerjaan baru 2. Klik Text Tool 3. Kursor berubah menjadi tanda + saat diarahkan pada stage. Klik pada stage, maka muncul kotak tulisan. 4. Ketik tulisan pada stage, otomatis kotak akan bertambah lebar sesuai penjang tulisan. 5. Block Handle dapat ditarik ke kiri dan ke kanan. block handle 9. Simpan file tersebut dengan nama Latihan200.fla 3
Mengedit Tulisan Tulisan da[pat diubah dengan sebelumnya harus diseleksi dulu. Untuk memasuki mode edit dapat dilakukan dengan 2 macam cara: Klik dua kali tulisan pada stage dengan Arrow Tool Klik satu kali tulisan di stage dengan Text Tool Panel Character Untuk menggunakan panel Character: 1. Pilih Window > Panels > Character, maka keluar panel seperti gambar. nama font kotak warna tombol style tracking baseline shift ukuran font 4
Untuk dapat diubah, tulisan harus diseleksi dulu, seperti pada gambnar. Panel Paragraph Panel Paragraph digunakan untuk mengatur paragraph 1. Pilih Window > Panels > Paragraph, maka keluar panel seperti gambar. allignment margin kanan leading margin kiri indent t 5
Panel Text Option Pada panel dapat dibuat teks statis, form isian dan link tulisan ke alamat URL Static Text Teks ini bersifat statis, artinya hanya dapat dilihat saja. Pilihan User Device Font - untuk menggunakan device font Pilihan Selectable - user dapat menyoroti tulisan pada stage saat movie berjalan. Untuk membuat tulisan static, dilakukan: 1. Pilih Window > Panels > Text Option 2. Pilih Static Text Dynamic Text Teks ini mempunyai banyak pilihan dalam mengatur tampilannya di Flash movie. Dynamic text menyediakan variabel pada movie, seperti membuat score suatu game. 6
block handle Untuk membuat tulisan dynamic, dilakukan: 1. Pilih Window > Panels > Text Option 2. Pilih Dynamic Text Pada panel terdapat beberapa pilihan field line type: Line type: Single Line - untuk menampilkan satu baris teks Multiline - untuk menampilkan teks yang terdiri dari beberapa baris HTML - untuk teks yang berbasis html Border/Bg - menampilkan garis pinggir dan background Selectable - teks yang ada pada stage dapat diselect Variabel - untuk membuat nama variable Embed fonts - untuk memilih karakter yang akan disertakan (embed) dalam movie 7
Input Text Teks ini dapat digunakan bagi user(pengunjung) untuk memasukkan teks. Input text berguna bila ingin membuat form, Untuk membuat tulisan input, dilakukan: 1. Pilih Window > Panels > Text Option 2. Pilih Input Text 8
4. ANIMASI GAMBNAR DAN TULISAN Mengubah warna dan transparency dari suatu gambar Setiap gambar merupakan instance dari suatu simbol, dapat dilakukan efek warna terhadapnya. Untuk itu dapat digunakan Effect panel. Langkah-langkah membuat effek warna: 1. Select Insert > Keyframe, keyframe pertama 2. Select File > Import, format file Sunset.jpg 3. Select Insert > Convert to Symbol, buat simbol Sunset1 4. Buat keyframe kedua 5. Select Window > Panel > Effect, Terdapat pilihan none, brightness, alpha, tint, advance Pilih Alpha 20% untuk gambar tersebut. 9
6. Buat simbol Sunset2 7. Buat motion tweening animation 8. Select Control > Play, maka animasi tweening akan ditampilkan dengan gambar yang warnanya menghilang 9. Simpan file tersebut dengan nama Latihan201.fla Mengubah warna dan transparency dari teks Setiap teks merupakan instance dari suatu simbol dapat dilakukan efek warna terhadapnya. Untuk itu dapat digunakan Effect panel. Langkah-langkah membuat effek warna: 1. Select Insert > Keyframe, keyframe pertama 2. Buat teks dengan Text tool pada stage 3. Select Insert > Convert to Symbol, buat simbol dengan nama Teks1 4. Buat keyframe kedua 5. Select Window > Panel > Effect, Terdapat pilihan none, brightness, alpha, tint, advance Pilih Alpha 20% untuk gambar tersebut. 6. Buat simbol Teks2 7. Buat motion tweening animation 8. Select Control > Play, maka animasi tweening akan ditampilkan dengan teks yang warnanya menghilang 9. Simpan file tersebut dengan nama Latihan202.fla 10
Pembuatan teks yang bergerak dan berubah warnanya dapat dilakukan sama dengan terhadap gambar, karena teks dan gambar merupakan suatu instance. Simpan file tersebut dengan nama Latihan203.fla Membuat animasi teks dengan path Setiap teks merupakan instance dari suatu simbol dapat dilakukan efek warna terhadapnya. Untuk itu dapat digunakan Effect panel. Langkah-langkah membuat animasi teks: 1. Select Insert > Keyframe, keyframe pertama 2. Buat teks dengan Text tool pada stage 3. Buat motion tweening seperti telah dibicarakan sebelumnya 4. Pada layer klik tombol kanan mouse, select Add Motion Guide 5. Gambar dengan Pen, Pencil, Line, Circle, Rectangle tool path yang diinginkan. 6. Snap center dari teks pada awal path, kemudian pada akhir path 7. Pada Frame properties terdapat pilihan orient path, synchronize Bila mimilih orient path, animasi selalu menghadap ke arah path. Synchronize digunakan supaya loopimh imstance baik pada movie. 8. Select Control > Play, maka animasi teks akan ditampilkan mengikuti path. 9. Simpan file tersebut dengan nama Latihan204.fla 11
Membuat animasi karakter dengan path Setiap karakter merupakan instance dari suatu simbol dapat dilakukan efek warna terhadapnya. Untuk itu dapat digunakan Effect panel. Langkah-langkah membuat animasi karakter sama dengan yang dilakukan dalam pembuatan animasi teks. Simpan file tersebut dengan nama Latihan205.fla Dalam suatu tampilan dapat digunakan gabungan antara animasi teks dan animasi karakter Simpan file tersebut dengan nama Latihan206.fla 12
Mask gambar 1. Buka file Latihan202.fla. 2. Select Insert > Layer, membuat layer di mana mask akan ditempatkan 3. Pada layer tersebut buat teks DAVID 4. Aktifkan teks DAVID, select Modify > Transform > Scale, tentukan ukuran huruf sehingga tingginya memenuhi gambar. 5. Buat tweening animation dari teks DAVID 6. Select layer di mana teks berada, klik tombol moue kanan, select Mask 7. Select Control > Play, maka masking text akan ditampilkan, di mana efek masking kelihatan pada teks dengan gambar sunset. 8. Simpan file tersebut dengan nama Latihan207.fla Mask huruf 1. Buat workspace baru, pilih File > New 2. Tentukan keyframe awal Insert > Keyframe 3. Buat teks PARADISE SUNSET dengan warna yellow 4. Buat symbol dengan memilih Insert > Convert to Symbol 5. Buat keyframe kedua pada frame ke 15 6. Buat layer baru dengan nama light. 7. Pada frame pertama dibuat keyframe, kemufian dibuat lingkaran. Buat symbol untuk lingkaran tersebut. 13
6. Lakukan transformasi dan atur warna dengan Panel Effect untuk mendapatkan bentuk lingkaran yang diinginkan. 7. Buat motion tweening pada lingkaran dari kiri ke kanan 8. Buat layer baru untuk menempatkan background. Import file sunset.jpg 9. Transformasikan gambar sunset sehingga memenuhi stage. 10. Pastikan layer light yang sktif. Klik tombol mouse sebelah kanan. Pilih Mask 11. Select Control > Play, maka masking text akan ditampilkan, di mana efek masking kelihatan pada teks dengan gambar sunset. 12. Simpan file tersebut dengan nama Latihan207a.fla 14
5. MEMBUAT T MOVIE CLIP Movie clip adalah mini flash movie yang mempunyai timeline, nama dan property tersendiri. Setiap movie clip yang diambil dari library dan diletakkan ke dalam stage disebut instance dari movie clip. Cara membuat movie clip adalah sebagai berikut: 1. Buat file baru 2. Pada menu File > Import 3. Import gambar bird1.jpg. 4. Pilih Window > Library, bird1. jpg akan tersimpan dalam library 5. Ulangi untuk menegimport bird2.jpg, bird3.jpg, bird4.jpg dan bird5.jpg. Pada library akan muncul simbol dari kelima gambar tersebut, sedangkan pada stage juga terdapat gambar lima gambar yang terletak pada satu posisi. 15
6. Delete semua gambar pada stage sehingga sehingga tidak ada ganbar satupun dalam stage. 7. Pilih Insert > New Symbol, bewri nama symbol dengan bird, dan pilih Movie Clip pada check box. Klik OK, maka muncum editor movie clip bird. 16
8. Dengan animasi frame by frame, simbaol gambar bird1.jpg dan lainnya dimasukkan ke dalam stage, dengan mengatur pososo dan besarnya image. 9. Simpan file tersebut dengan nama movie_bird.fla 10. Select Control > Play, maka dengan magambil dari library, movie clip bird dapat digunakan pada movie lain. Untuk menggunakan movie clip bird pada suatu movie: 1. Buka file movie_bird.fla 2. Select Window > Library, maka terlihat symbol movie clip bird dalam kotak library. 3. Select File > New 4. Drag movie clip bird dari library ka dalam stage. Movie clip tersebut sudah dapat digunakan pada suatu movie baru. 17