MACROMEDIA FLASH - · PDF fileMACROMEDIA FLASH 8 Ariesto Hadi S Input Text Teks ini dapat...

1MACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASHMACROMEDIA FLASH

Ariesto Hadi S

MACROMEDIAMACROMEDIAMACROMEDIAMACROMEDIAMACROMEDIAFLASHFLASHFLASHFLASHFLASH

CHAPTER 2CHAPTER 2CHAPTER 2CHAPTER 2CHAPTER 2

Ariesto Hadi


Ariesto Hadi S

DDDDDAFTAFTAFTAFTAFTAR ISIAR ISIAR ISIAR ISIAR 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


Ariesto Hadi S

4. TEKS4. TEKS4. TEKS4. TEKS4. TEKS

Embeded dan Device FEmbeded dan Device FEmbeded dan Device FEmbeded dan Device FEmbeded dan Device FontontontontontZeembry

Embeded font - font yang telah diinstall pada sistem dan akan disertakan (em-

bed) 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 TMenulis dengan TMenulis dengan TMenulis dengan TMenulis dengan Teks Teks Teks Teks Teks Toolsoolsoolsoolsools

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


Ariesto Hadi S

Mengedit TMengedit TMengedit TMengedit TMengedit Tulisanulisanulisanulisanulisan

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

PPPPPanel Characteranel Characteranel Characteranel Characteranel 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


Ariesto Hadi S

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

PPPPPanel Panel Panel Panel Panel Paragrapharagrapharagrapharagrapharagraph

Panel Paragraph digunakan untuk mengatur paragraph

1. Pilih Window −−−> Panels −−−> Paragraph,

maka keluar panel seperti gambar.

allignment

margin kanan

leading

t

indent

margin kiri


Ariesto Hadi S

PPPPPanel Tanel Tanel Tanel Tanel Text Optionext Optionext Optionext Optionext 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.


Ariesto Hadi S

block handle

Untuk membuat tulisan dynamic, dilakukan:


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


Ariesto Hadi S

Input Text

Teks ini dapat digunakan bagi user(pengunjung) untuk memasukkan teks. In-

put text berguna bila ingin membuat form,

Untuk membuat tulisan input, dilakukan:


2. Pilih Input Text


Ariesto Hadi S

4. ANIMASI GAMBNAR4. ANIMASI GAMBNAR4. ANIMASI GAMBNAR4. ANIMASI GAMBNAR4. ANIMASI GAMBNARDAN TULISANDAN TULISANDAN TULISANDAN TULISANDAN TULISAN

Mengubah warna dan transparency dari suatu gambarMengubah warna dan transparency dari suatu gambarMengubah warna dan transparency dari suatu gambarMengubah warna dan transparency dari suatu gambarMengubah 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.


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


Mengubah warna dan transparency dari teksMengubah warna dan transparency dari teksMengubah warna dan transparency dari teksMengubah warna dan transparency dari teksMengubah warna dan transparency dari teks

Setiap teks merupakan instance dari suatu simbol dapat dilakukan efek warna


Langkah-langkah membuat effek warna:


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



Ariesto Hadi S

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 pathMembuat animasi teks dengan pathMembuat animasi teks dengan pathMembuat animasi teks dengan pathMembuat animasi teks dengan path

Setiap teks merupakan instance dari suatu simbol dapat dilakukan efek warna


Langkah-langkah membuat animasi teks:


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.



Ariesto Hadi S

Membuat animasi karakter dengan pathMembuat animasi karakter dengan pathMembuat animasi karakter dengan pathMembuat animasi karakter dengan pathMembuat animasi karakter dengan path

Setiap karakter merupakan instance dari suatu simbol dapat dilakukan efek warna


Langkah-langkah membuat animasi karakter sama dengan yang dilakukan dalam

pembuatan animasi teks.


Dalam suatu tampilan dapat digunakan gabungan antara animasi teks dan

animasi karakter



Ariesto Hadi S

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


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


Ariesto Hadi S

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


Ariesto Hadi S

5. MEMBUA5. MEMBUA5. MEMBUA5. MEMBUA5. MEMBUAT MOT MOT MOT MOT MOVIE CLIPVIE CLIPVIE CLIPVIE CLIPVIE 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.


Ariesto Hadi S

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.


Ariesto Hadi S

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 - · PDF fileMACROMEDIA FLASH 8 Ariesto Hadi S Input Text Teks ini dapat...

Documents

Transcript of MACROMEDIA FLASH - · PDF fileMACROMEDIA FLASH 8 Ariesto Hadi S Input Text Teks ini dapat...