MEMASUKKAN HURUF DAN GAMBAR

Kali ini kita akan mempelajari bagaimana memunculkan gambar dan huruf secara bersamaan ketika sebuah tombol ditekan.Jumlah huruf dan gambar yang digunakan dalam tutorial ini adalah 4. Apabila anda ingin menggunakan gambar dan huruf lebih dari 4 anda dapat mengubah sedikit scriptnya. Tutorial ini cocok bagi anda yang ingin membuat aplikasi untuk anak-anak seperti misalnya memperkenalkan huruf kepada anak dengan menampilkan gambar sebagai contoh penggunaan hurufnya.
1. Buatlah sebuah flash document.
2. Buatlah 2 buah static text masing-masing bertuliskan Huruf : dan Gambar :
3. Buatlah sebuah dynamic text di stage. Seleksi dynamic text tersebut dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan huruf_tampil sebagai var serta nonaktifkan tombol selectable dan show border around text.
4. Buatlah sebuah persegi berwarna putih dengan hitam sebagai warna garisnya. Buatlah sebuah garis miring dari sudut kanan atas persegi ke sudut kiri bawah persegi.
5. Seleksi persegi dan garis miring tadi kemudian tekan F8. Pada panel yang muncul masukkan gambar_tampil sebagai name dan movie clip sebagai type lalu tekan ok.
6. Seleksi movie clip gambar tampil dan pada panel propertiesnya masukkan gambar_tampil sebagai instance name.
7. Buatlah 4 buah dynamic text dengan masing-masing bertuliskan A, B, C, D. Seleksi ke empat dynamic text tadi dan pada panel propertiesnya nonaktifkan tombol selectable dan aktifkan tombol show border around text.
8. Buatlah sebuah invisible button di stage. Seleksi invisible button tersebut dan tekan Ctrl+D sebanyak 3 kali sehingga di stage terdapat 4 buah invisible button.
9. Atur letak dan ukuran ke empat invisible button sampai menutupi 4 buah dynamic text (A,B,C,D).
10. Seleksi invisible button yang menutupi dynamic text bertuliskan A kemudian pada panel propertiesnya masukkan 1_btn sebagai instance name.
11.Seleksi invisible button yang menutupi dynamic text bertuliskan B kemudian pada panel propertiesnya masukkan 2_btn sebagai instance name.
12.Seleksi invisible button yang menutupi dynamic text bertuliskan C kemudian pada panel propertiesnya masukkan 3_btn sebagai instance name.
13. Seleksi invisible button yang menutupi dynamic text bertuliskan D kemudian pada panel propertiesnya masukkan 4_btn sebagai instance name.
14. Letakkan seluruh objek yang dibuat tadi seperti gambar di bawah ini :

15. 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

//membuat array bernama array_huruf berisi A, B, C, D //apabila anda ingin menambahkan huruf silahkan tulis huruf yang anda ingin masukkan di antara dua tanda petik dengan koma dan spasi sebagai pemisah antara huruf //contoh : array_huruf = ["K", "L", "M", "M", "N", "O", "P"]; array_huruf = ["A", "B", "C", "D"];   //memberikan tanda - pada dynamic text dengan var huruf_tampil huruf_tampil = "-";   //membuat variable i dengan nilai i=1, i=2, i=3, i=4 //jika anda mengubah jumlah huruf pada array_huruf anda juga harus mengubah perulanagn i ini //contohnya pada array_huruf terdapat 10 buah huruf maka ubah tulisan i<=4 pmenjadi i<=10 for (i=1; i<=4; i++) { //membuat variable no pada i+_btn dengan nilai i _root[i+"_btn"].no = i; //ketika tombol i_btn ditekan _root[i+"_btn"].onPress = function() { //tampilkan huruf yang terdapat pada array_huruf sesuai nilai no button ini dikurangi 1 pada dynamix text bervar huruf_tampil huruf_tampil = array_huruf[this.no-1]; //jalankan fungsi masukkan_gambar dengan nilai angka sama dengan nilai no pada button ini masukkan_gambar(this.no); }; }   //membuat fungsi masukkan_gambar function masukkan_gambar(angka) { //hapus movie clip berinstance name gambar di stage removeMovieClip(gambar); //memasukkan movie clip dengan instance name gambar di stage //movie clip yang dimasukkan adalah movie clip yang berlinkage gambar ditambah nilai variable angka, dengan nama baru gambar, pada kedalaman paling atas, dengan posisi x sama dengan posisi x gambar_tampil dan posisi y sama dengan posisi y gambar tampil gambar = attachMovie("gambar"+angka, "gambar", _root.getNextHighestDepth(), {_x:gambar_tampil._x, _y:gambar_tampil._y}); }

16. Klik kanan frame 2 dan pilih Insert Blank Keyframe.
17. Buatlah 4 buah persegi dengan panjang dan lebar sama dengan panjang dan lebar persegi pada movie clip gambar_tampil di frame 1.
18. Jika sudah tekan Ctrl+R. Pada panel yang muncul cari 4 buah gambar yang diinginkan kemudian tekan open.
19. Atur letak 4 buah gambar yang baru d import ke tengah tengah 4 buah persegi. 1 buah persegi mendapatkan 1 buah gambar.
20. Seleksi gambar dan persegi pertama lalu tekan F8. Pada panel yang muncul masukkan gambar1 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
21. Seleksi gambar dan persegi kedua lalu tekan F8. Pada panel yang muncul masukkan gambar2 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
22. Seleksi gambar dan persegi ketiga lalu tekan F8. Pada panel yang muncul masukkan gambar3 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
23. Seleksi gambar dan persegi keempat lalu tekan F8. Pada panel yang muncul masukkan gambar4 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
24. Klik kanan frame 2 dan pilih remove frame lalu tekan Ctrl+L. Pada panel library yang muncul klik kanan movie clip gambar 1 dan pilih linkage. Pada panel yang muncul berikan tanda centang pada Export for Actionscript dan masukkan gambar1 sebagai identifier.
25. Lakukan hal yang sama pada movie clip gambar2-4. Untuk idnetifernya masukkan sesuai name movie clipnya sehingga pada panel library terdapat 4 buah movie clip yaitu gambar1-gambar4 dengan masing-masing memiliki identifier yang sama dengan namanya.

26. Tekan Ctrl+Enter untuk melihat hasilnya.

MEMASUKKAN HURUF DAN GAMBAR

Kali ini kita akan mempelajari bagaimana memunculkan gambar dan huruf secara bersamaan ketika sebuah tombol ditekan.Jumlah huruf dan gambar yang digunakan dalam tutorial ini adalah 4. Apabila anda ingin menggunakan gambar dan huruf lebih dari 4 anda dapat mengubah sedikit scriptnya. Tutorial ini cocok bagi anda yang ingin membuat aplikasi untuk anak-anak seperti misalnya memperkenalkan huruf kepada anak dengan menampilkan gambar sebagai contoh penggunaan hurufnya.
1. Buatlah sebuah flash document.
2. Buatlah 2 buah static text masing-masing bertuliskan Huruf : dan Gambar :
3. Buatlah sebuah dynamic text di stage. Seleksi dynamic text tersebut dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan huruf_tampil sebagai var serta nonaktifkan tombol selectable dan show border around text.
4. Buatlah sebuah persegi berwarna putih dengan hitam sebagai warna garisnya. Buatlah sebuah garis miring dari sudut kanan atas persegi ke sudut kiri bawah persegi.
5. Seleksi persegi dan garis miring tadi kemudian tekan F8. Pada panel yang muncul masukkan gambar_tampil sebagai name dan movie clip sebagai type lalu tekan ok.
6. Seleksi movie clip gambar tampil dan pada panel propertiesnya masukkan gambar_tampil sebagai instance name.
7. Buatlah 4 buah dynamic text dengan masing-masing bertuliskan A, B, C, D. Seleksi ke empat dynamic text tadi dan pada panel propertiesnya nonaktifkan tombol selectable dan aktifkan tombol show border around text.
8. Buatlah sebuah invisible button di stage. Seleksi invisible button tersebut dan tekan Ctrl+D sebanyak 3 kali sehingga di stage terdapat 4 buah invisible button.
9. Atur letak dan ukuran ke empat invisible button sampai menutupi 4 buah dynamic text (A,B,C,D).
10. Seleksi invisible button yang menutupi dynamic text bertuliskan A kemudian pada panel propertiesnya masukkan 1_btn sebagai instance name.
11.Seleksi invisible button yang menutupi dynamic text bertuliskan B kemudian pada panel propertiesnya masukkan 2_btn sebagai instance name.
12.Seleksi invisible button yang menutupi dynamic text bertuliskan C kemudian pada panel propertiesnya masukkan 3_btn sebagai instance name.
13. Seleksi invisible button yang menutupi dynamic text bertuliskan D kemudian pada panel propertiesnya masukkan 4_btn sebagai instance name.
14. Letakkan seluruh objek yang dibuat tadi seperti gambar di bawah ini :

15. 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

//membuat array bernama array_huruf berisi A, B, C, D //apabila anda ingin menambahkan huruf silahkan tulis huruf yang anda ingin masukkan di antara dua tanda petik dengan koma dan spasi sebagai pemisah antara huruf //contoh : array_huruf = ["K", "L", "M", "M", "N", "O", "P"]; array_huruf = ["A", "B", "C", "D"];   //memberikan tanda - pada dynamic text dengan var huruf_tampil huruf_tampil = "-";   //membuat variable i dengan nilai i=1, i=2, i=3, i=4 //jika anda mengubah jumlah huruf pada array_huruf anda juga harus mengubah perulanagn i ini //contohnya pada array_huruf terdapat 10 buah huruf maka ubah tulisan i<=4 pmenjadi i<=10 for (i=1; i<=4; i++) { //membuat variable no pada i+_btn dengan nilai i _root[i+"_btn"].no = i; //ketika tombol i_btn ditekan _root[i+"_btn"].onPress = function() { //tampilkan huruf yang terdapat pada array_huruf sesuai nilai no button ini dikurangi 1 pada dynamix text bervar huruf_tampil huruf_tampil = array_huruf[this.no-1]; //jalankan fungsi masukkan_gambar dengan nilai angka sama dengan nilai no pada button ini masukkan_gambar(this.no); }; }   //membuat fungsi masukkan_gambar function masukkan_gambar(angka) { //hapus movie clip berinstance name gambar di stage removeMovieClip(gambar); //memasukkan movie clip dengan instance name gambar di stage //movie clip yang dimasukkan adalah movie clip yang berlinkage gambar ditambah nilai variable angka, dengan nama baru gambar, pada kedalaman paling atas, dengan posisi x sama dengan posisi x gambar_tampil dan posisi y sama dengan posisi y gambar tampil gambar = attachMovie("gambar"+angka, "gambar", _root.getNextHighestDepth(), {_x:gambar_tampil._x, _y:gambar_tampil._y}); }

16. Klik kanan frame 2 dan pilih Insert Blank Keyframe.
17. Buatlah 4 buah persegi dengan panjang dan lebar sama dengan panjang dan lebar persegi pada movie clip gambar_tampil di frame 1.
18. Jika sudah tekan Ctrl+R. Pada panel yang muncul cari 4 buah gambar yang diinginkan kemudian tekan open.
19. Atur letak 4 buah gambar yang baru d import ke tengah tengah 4 buah persegi. 1 buah persegi mendapatkan 1 buah gambar.
20. Seleksi gambar dan persegi pertama lalu tekan F8. Pada panel yang muncul masukkan gambar1 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
21. Seleksi gambar dan persegi kedua lalu tekan F8. Pada panel yang muncul masukkan gambar2 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
22. Seleksi gambar dan persegi ketiga lalu tekan F8. Pada panel yang muncul masukkan gambar3 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
23. Seleksi gambar dan persegi keempat lalu tekan F8. Pada panel yang muncul masukkan gambar4 sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
24. Klik kanan frame 2 dan pilih remove frame lalu tekan Ctrl+L. Pada panel library yang muncul klik kanan movie clip gambar 1 dan pilih linkage. Pada panel yang muncul berikan tanda centang pada Export for Actionscript dan masukkan gambar1 sebagai identifier.
25. Lakukan hal yang sama pada movie clip gambar2-4. Untuk idnetifernya masukkan sesuai name movie clipnya sehingga pada panel library terdapat 4 buah movie clip yaitu gambar1-gambar4 dengan masing-masing memiliki identifier yang sama dengan namanya.

26. Tekan Ctrl+Enter untuk melihat hasilnya.

MENGONTROL ROTASI OBJEK

Pada tutorial di bawah ini kita akan membuat sebuah objek yang dapat dikontrol arah rotasinya. Kontrol yang digunakan adalah mouse. Jadi jika mouse digerakan, arah putaran rotasi objek juga ikut berubah sesuai letak kursor mouse.
1. Buatlah sebuah flash document.
2. Buatlah sebuah objek seperti gambar di bawah ini :

3. Seleksi objek tersebut dan tekan F8. Pada panel yang muncul masukkan segitiga sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
4. Seleksi movie clip segitiga di stage lalu tekan Ctrl+F3. Pada panel properties yang muncul masukkan segitiga dalam kotak instance name.
5. Klik frame 1 dan ekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11

segitiga.onEnterFrame = function() { jarak = Math.sqrt(Math.pow(_root._xmouse-segitiga._x, 2)+Math.pow(_root._ymouse-segitiga._y, 2)); sudut = Math.asin((_root._xmouse-segitiga._x)/jarak); sudut = sudut*(180/Math.PI); if (_root._ymouse>segitiga._y) { if ((_root._xmouse>segitiga._x) || (_root._xmouse<segitiga._x)) { sudut = 180-sudut; } } segitiga._rotation = sudut; };

6. Tekan Ctrl+Enter untuk melihat hasilnya.

MENGONTROL ROTASI OBJEK

Pada tutorial di bawah ini kita akan membuat sebuah objek yang dapat dikontrol arah rotasinya. Kontrol yang digunakan adalah mouse. Jadi jika mouse digerakan, arah putaran rotasi objek juga ikut berubah sesuai letak kursor mouse.
1. Buatlah sebuah flash document.
2. Buatlah sebuah objek seperti gambar di bawah ini :

3. Seleksi objek tersebut dan tekan F8. Pada panel yang muncul masukkan segitiga sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.
4. Seleksi movie clip segitiga di stage lalu tekan Ctrl+F3. Pada panel properties yang muncul masukkan segitiga dalam kotak instance name.
5. Klik frame 1 dan ekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11

segitiga.onEnterFrame = function() { jarak = Math.sqrt(Math.pow(_root._xmouse-segitiga._x, 2)+Math.pow(_root._ymouse-segitiga._y, 2)); sudut = Math.asin((_root._xmouse-segitiga._x)/jarak); sudut = sudut*(180/Math.PI); if (_root._ymouse>segitiga._y) { if ((_root._xmouse>segitiga._x) || (_root._xmouse<segitiga._x)) { sudut = 180-sudut; } } segitiga._rotation = sudut; };

6. Tekan Ctrl+Enter untuk melihat hasilnya.

SLIDER OBJEK

Hampir sama pada tutorial sound slider. Kali ini kita tidak akan mengubah volume suara tetapi mengubah ukuran suatu objek.
1. Buatlah sebuah flash document.
2. Buatlah sebuah persegi dengan ukuran panjang 5px dan lebar 20px. Seleksi persegi tersebut dan  tekan F8. Pada panel yang muncul masukkan kotak2 sebagai name dan movie clip sebagai type serta titik registrationnya berada di tengah-tengah lalu tekan ok.
3. Seleksi movie clip kotak2 di stage dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan kotak2 sebagai instance name.
4. Pastikan anda masih menyeleksi movie clip kotak2 lalu tekan F8. Pada panel yang muncul masukkan kotak1 sebagai name dan movie clip sebgai type serta titik registrationnya berada di tengah-tengah lalu tekan ok. 5. Seleksi movie clip kotak1 dan masukkan kotak1 sebagai instance name pada panel properties. 6. Klik kanan movie clip kotak1 dan pilih Edit maka anda akan masuk ke dalam stage movie clip kotak1. 7. Buatlah sebuah persegi dengan panjang 100px dan lebar 5px. Letakkan seperti pada gambar di bawah ini :

Letakkan persis seperti gambar di atas

8. Tekan Ctrl+E untuk kembali ke stage scene 1.
9. Buatlah sebuah lingkaran, seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type lalu tekan ok.
10. Seleksi movie clip lingkaran di stage dan masukkan lingkaran sebagai instance name pada panel properties.
11. Buatlah sebuah dynamic text, seleksi dynamic text tersebut dan masukkan angka sebagai Var pada panel properties
12. 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

kotak1.kotak2._x = 100; kotak1.kotak2.onEnterFrame = function() { angka = 0+this._x; lingkaran._xscale = 0+this._x; lingkaran._yscale = 0+this._x; }; kotak1.kotak2.onPress = function() { startDrag(this, false, 0, this._y, 100, this._y); }; kotak1.kotak2.onRelease = kotak1.kotak2.onReleaseOutside=function () { stopDrag(); };

13. Tekan Ctrl+Enter untuk melihat hasilnya.

SLIDER OBJEK

Hampir sama pada tutorial sound slider. Kali ini kita tidak akan mengubah volume suara tetapi mengubah ukuran suatu objek.
1. Buatlah sebuah flash document.
2. Buatlah sebuah persegi dengan ukuran panjang 5px dan lebar 20px. Seleksi persegi tersebut dan  tekan F8. Pada panel yang muncul masukkan kotak2 sebagai name dan movie clip sebagai type serta titik registrationnya berada di tengah-tengah lalu tekan ok.
3. Seleksi movie clip kotak2 di stage dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan kotak2 sebagai instance name.
4. Pastikan anda masih menyeleksi movie clip kotak2 lalu tekan F8. Pada panel yang muncul masukkan kotak1 sebagai name dan movie clip sebgai type serta titik registrationnya berada di tengah-tengah lalu tekan ok. 5. Seleksi movie clip kotak1 dan masukkan kotak1 sebagai instance name pada panel properties. 6. Klik kanan movie clip kotak1 dan pilih Edit maka anda akan masuk ke dalam stage movie clip kotak1. 7. Buatlah sebuah persegi dengan panjang 100px dan lebar 5px. Letakkan seperti pada gambar di bawah ini :

Letakkan persis seperti gambar di atas

8. Tekan Ctrl+E untuk kembali ke stage scene 1.
9. Buatlah sebuah lingkaran, seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type lalu tekan ok.
10. Seleksi movie clip lingkaran di stage dan masukkan lingkaran sebagai instance name pada panel properties.
11. Buatlah sebuah dynamic text, seleksi dynamic text tersebut dan masukkan angka sebagai Var pada panel properties
12. 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

kotak1.kotak2._x = 100; kotak1.kotak2.onEnterFrame = function() { angka = 0+this._x; lingkaran._xscale = 0+this._x; lingkaran._yscale = 0+this._x; }; kotak1.kotak2.onPress = function() { startDrag(this, false, 0, this._y, 100, this._y); }; kotak1.kotak2.onRelease = kotak1.kotak2.onReleaseOutside=function () { stopDrag(); };

13. Tekan Ctrl+Enter untuk melihat hasilnya.

GERAKAN ELASTIS OBJEK

Hasil yang akan kita peroleh melalu tutorial ini berupa sebuah objek yang koordinat x dan y nya akan berada di x dan y mouse apabila mouse ditekan serta akan kembali ketempat semula apabila tekanan pada mouse dilepaskan.
1. Buatlah sebuah flash document.a
2. Buatlah sebuah lingkaran. Seleksi lingkaran tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type lalu tekan ok.
3. Seleksi movie clip lingkaran di stage dan Ctrl+F3. Pada panel properties yang muncul masukkan lingkaran di dalam kotak instance name.
4. Klik frame 1 dan tekan F9. Pada kotak 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 50

//membuat variable targetX dengan nilai koordinat x awal lingkaran targetX = lingkaran._x; //membuat variable targetY dengan nilai koordinat y awal lingkaran targetY = lingkaran._y; //membuat variable kecepatanX dengan nilai 0 kecepatanX = 0; //membuat variable kecepatanY dengan nilai 0 kecepatanY = 0; //membuat variable gerak dengan nilai 1 gerak = 1; //membuat variable kecepatan dengan nilai 10 kecepatan = 10; //membuat variable perlambat dengan nilai 1.2 perlambat = 1.2; lingkaran.onEnterFrame = function() { //jika variable gerak bernilai 1 if (gerak == 1) { //posisi x movie clip ini ditambah nilai kecepatanX this._x += kecepatanX; //posisi y movie clip ini ditambah nilai kecepatanY this._y += kecepatanY; //menghitung nilai kecepatanX dan kecepatanY kecepatanX += (targetX-this._x)/kecepatan; kecepatanY += (targetY-this._y)/kecepatan; //kecepatanX dan kecepatanY dibagi perlambat kecepatanX /= perlambat; kecepatanY /= perlambat; } //jika variable gerak bernilai 2 if (gerak == 2) { //posisi x movie clip ini sama dengan posisi x kursor mouse this._x = _root._xmouse; //posisi y movie clip ini sama dengan posisi y kursor mouse this._y = _root._ymouse; //nilai kecepatanX diubah menjadi 0 kecepatanX = 0; //nilai kecepatanY diubah menjadi 0 kecepatanY = 0; } }; //ketika mouse ditekan onMouseDown = function () { //ubah nilai variable gerak menjadi 2 gerak = 2; }; //ketika mouse tidak ditekan onMouseUp = function () { //ubah nilai variable gerak menjadi 1 gerak = 1; };

5. Tekan Ctrl+Enter untuk melihat hasilnya.