Membuat Tabel Periodik Sederhana
1. Menggunakan UI Object
Pada Kesempatan kali ini, kita akan membangun sebuah table system periodic unsur dengan menggunakan software Adobe flash.
Disini kita akan mengguanakan sedikit animasi yang atraktif dan menarik yang nantinya diaharapkan pengguna akan tertarik dalam
mengguanakanya. Selain itu Simulasi yang akan kita buat ini, juga dapat di lakukan Perubahan sewaktu-waktu karena menggunakan kode
yang simple dan memungkinkan untuk di update. Pada kesempatan kali ini kita akan menggunakan sedikit pengolahan string dalam
actionscript 2.0.
2. Membnguka Halaman Kerja
a. Bukalah Aplikasi Adobe Flash dalam computer anda, kemudian klik
file – Open, kemudian kita cari file table periodic.fla yang telah tercantum.
b. Kemudian kita akses Library panel. Bila dialog library belum
terbuka, maka kita dapat mengaksesnya melalui window – library yang terdapat pada menu bar atau kita dapat dengan mudah
menekan CTRL + L. Pada library panel kita akan menemukan beberapa Komponen pembangun animasi system periodaik yang
akan kita bangun mulai dari movie clip, button dan graphic yang telah disediakan.
2 | P a g e
c. Pada panel Library anda akan menemukan sebuah movieclip dengan
nama unsurbox. Ambil dan masukan pada scene layer dengan cara melakukan drag and drop.
3 | P a g e
d. Setelah itu kita beri instance name dari object tadi dengan nama “unsur1” tanpa tanda kutip. Kemudian kita buat layer baru pada timeline. Cara
membuat layer baru adalah kita klik insert – Timeline – layer.
e. Kemudian Dalam layer yang baru kita buat tadi kita masukan sebuah movieclip dari library dengan nama draggable Area, dua buah button
dengan nama closeBtn dan nav.Selain itu kita juga membutuhkan sebuah form. Setelah Melakukan Drag and drop beberapa media tadi,
maka selanjutnya kita susun media – media tadi sedemikian rupa, sesuai gambar di bawah.
4 | P a g e
f. Kemudian Kita masukan instance name untuk tiap-tiap bagian tadi Button nav. Kiri : prev
Button nav kanan : next Button berwarna merah : close_btn
g. Kemudian Pada properties text field kita atur . a. Type
: Dynamic Text b. Instance name
: “info_txt” tanpa tanda kutip c. Font size
: 12 d. Align
: left e. Line type
: Multiline f. Selectable
: true h. Kemudian Kita blok pada dialog yang telah kita buat tadi, Klik kanan lalu
klik convert to symbol.
5 | P a g e
i. Beri nama infoBox untuk movieclip yang telah kit buat. Dan untuk instance name-nya kita beri nama “infoBox_mc” tanpa tanda petik
6 | P a g e
j. Selanjutnya Kita lakukan edit in place pada movie clip yang telah kita buat tadi. Caranya yaitu kita klik dua kali pada movie clip tersebut, atau bisa
kita klik kanan – edit in place. Kemudian Blok semua objek, klik kanan dan pilih “distribute to layer”.
7 | P a g e
k. Kemudian Kita Kembali pada layer1 kemudian temukan sebuah movie clip dengan nama draggable area di library panel dan tambahkan ke dalam
layer tersebut. Tambahkan instance name “ drag_mc” pada properties panel-nya. Kemudian atur movie clip “draggable area” tadi hingga berada
persis sesuai dengan window pada movieclip dialog yang telah kita buat sebelumnya. Atur posisi sehinggan movie clip “draggable area” tidak
menutupi button.
l. Isi instance name movie clip yang baru kita buat barusan dengan nama drag_mc.
Pembuatan dan pengaturan pada infobox telah selesai, tahap selanjutnya yang akan kita lakukan adalah melakukan pengaturan animasi.
8 | P a g e
3. Animasi
Kategori