CHAPTER 2

MACROMEDIA FLASH

Ariesto Hadi

MACROMEDIA FLASH Ariesto Hadi S

DAFT AR ISI AFTAR

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

MACROMEDIA FLASH Ariesto Hadi S

4. TEKS
Embeded dan Device F ont 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 T eks T ools 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

MACROMEDIA FLASH Ariesto Hadi S

Mengedit T ulisan Tulisan

Tulisan da[pat diubah dengan sebelumnya harus diseleksi dulu. Untuk memasuki mode edit dapat dilakukan dengan 2 macam cara:
l l

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

ukuran font tracking baseline shift

MACROMEDIA FLASH Ariesto Hadi S

Untuk dapat diubah, tulisan harus diseleksi dulu, seperti pada gambnar.

Panel P aragraph Paragraph

Panel Paragraph digunakan untuk mengatur paragraph 1. Pilih Window > Panels > Paragraph, maka keluar panel seperti gambar.

allignment margin kanan leading

t indent margin kiri

MACROMEDIA FLASH Ariesto Hadi S

Panel T ext Option Text

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.

MACROMEDIA FLASH Ariesto Hadi S

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:

l

Line type: Single Line - untuk menampilkan satu baris teks Multiline - untuk menampilkan teks yang terdiri dari beberapa baris

l l l l l

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

MACROMEDIA FLASH Ariesto Hadi S

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

MACROMEDIA FLASH Ariesto Hadi S

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.

MACROMEDIA FLASH Ariesto Hadi S

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
MACROMEDIA FLASH Ariesto Hadi S

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

MACROMEDIA FLASH Ariesto Hadi S

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

MACROMEDIA FLASH Ariesto Hadi S

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.

MACROMEDIA FLASH Ariesto Hadi S

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

MACROMEDIA FLASH Ariesto Hadi S

14

5. MEMBUA T MO VIE CLIP MEMBUAT MOVIE

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.
MACROMEDIA FLASH Ariesto Hadi S 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.

MACROMEDIA FLASH Ariesto Hadi S

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.

MACROMEDIA FLASH Ariesto Hadi S

17