Monday, 4 March 2013

Animasi Teks Mengelilingi Lingkaran dengan Flash

 

Sebelumnya kita sudah membuat sebuah animasi bola pantul. Kali ini kita akan membuat Animasi teks mengelilingi sebuah lingkaran penuh.
1. Buatlah sebuah flash document.
2. Buatlah sebuah lingkaran berwarna merah dengan hitam sebagai warna garisnya.
3. Seleksi lingkaran ini kemudian tekan F8. Pada panel yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type lalu tekan ok.
4. Seleksi movie clip lingkaran di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan lingkaran sebagai instance name. Letakkan movie clip lingkaran ini di tengah-tengah stage.
5. Tekan Ctrl+L dan pada panel library yang muncul klik kanan warna putih yang berada di bawah movie clip lingkaran pada panel library kemudian pilih New Font.

new font
6. Pada panel yang muncul, masukkan jenisHuruf sebagai name, Arial sebagai Font, berikan tanda contreng pada Bold lalu tekan ok.
font symbol properties
7. Klik kanan jenisHuruf pada panel library kemudian pilih linkage. Pada panel yang muncul, berikan tanda contreng pada Exprot for ActionScript kemudian masukkan jenisHuruf sebagai identifier lalu tekan ok.
8. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//membuat variable kalimat yang berisi kata kata yang akan melingkar
kalimat = "KOMPUTER DOTCOM Tempat Belajarnya Orang TI";
//membuat sebuah movie clip kosong bernama huruf
this.createEmptyMovieClip("huruf", 0);
//posisi x movie clip huruf sama dengan posisi x movie clip lingkaran
huruf._x = lingkaran._x;
//posisi y movie clip huruf sama dengan posisi y movie clip lingkaran
huruf._y = lingkaran._y;
//membuat variable sudut
sudut = (2*Math.PI)/kalimat.length;
//membuat variable jarak dengan nilai -40
jarak = -40;
//membuat movie clip lingkaran menjadi tidak terlihat
lingkaran._alpha = 0;
//membuat variable format yang berisi format text
format = new TextFormat();
//font pada variable format sama dengan font symbol pada library dengan identifier jenisHuruf
format.font = "jenisHuruf";
//ubah ukuran huruf pada format menjadi 20
format.size = 20;
//ubah warna huruf pada variable format menjadi coklat
format.color = 0x333300;
for (i=0; i<kalimat.length; i++) {
 if (kalimat.charAt(i) != " ") {
  //membuat dan mengatur nilai variable posX dan posY
  posX = Math.round(Math.cos(i*sudut)*(lingkaran._width+jarak));
  posY = Math.round(Math.sin(i*sudut)*(lingkaran._height+jarak));
  //membuat sebuah text field dengan nama huruf
  huruf.createTextField("h"+i, i, posX, posY, 20, 20);
  //membuat variable _hrf berisi huruf['h'+i];
  _hrf = huruf['h'+i];
  //aktifkan autosize pada variable _hrf
  _hrf.autoSize = true;
  //mengatur arah rotasi variable _hrf
  _hrf._rotation = (i*sudut)*(180/Math.PI)+90;
  //kata yang ada di variable _hrf sama dengan kata yang ada di variable kalimat per huruf
  _hrf.text = kalimat.charAt(i);
  //jalankan TextFormat yang ada di variable format ke variable _hrf
  _hrf.setTextFormat(format);
  //variable _hrf tidak dapat diseleksi
  _hrf.selectable = false;
  //akitfkan embedFonts pada variable _hrf
  _hrf.embedFonts = true;
 }
}
//membuat kalimat yang melingkar berputar berlawanan arah jarum jam
huruf.onEnterFrame = function() {
 this._rotation -= 2;
};
9. Tekan Ctrl+Enter untuk melihat hasilnya.

Selamat Belajar dan Berkesperimen...

No comments:
Write comments