Tutorial flash (1)
1 like441 views
Dokumen ini adalah panduan tutorial mengenai penggunaan Adobe Flash yang mencakup berbagai alat teks seperti static text, dynamic text, dan input text, serta cara membuat simbol dan objek. Terdapat penjelasan tentang ActionScript, termasuk perintah untuk mengendalikan frame seperti stop, play, gotoandplay, dan gotoandstop. Selain itu, terdapat juga informasi mengenai penggunaan fscommand untuk mengatur tampilan Flash dalam mode fullscreen.
Tutorial flash (1)
- 1. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal Pelatihan Adobe Flash DIKDASMEN Kota Semarang Disusun oleh : Ridho Tawakal Materi 4 pertemuan
- 2. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal Mengenal Type Text Text tool terletak di bawah lasso tool. Digunakan untuk membuat kata/kalimat di stage. Terdapat tiga macam yaitu Static Text, Dynamic Text, dan Input Text. Untuk penjelasan dan penggunaan lebih lengkap silahkan lihat di bawah ini : 1. STATIC TEXT Digunakan untuk menampilkan kata/kalimat yang hanya dapat diubah bentuk dan isinya saat berada di Flash. Untuk membuatnya, aktifkan terlebih dahulu text tool dengan cara mengkliknya langsung di toolbox atau menekan tombol T pada keyboard. Setelah text tool aktif, bukalah panel properties dengan menekan Ctrl+F3 pada keyboard. Ubah Text type pada panel properties menjadi Static Text. Pastikan text tool masih aktif, klik stage sekali maka akan muncul sebuah static text kosong. Mulailah menulis pada static text kosong ini. Jika sudah klik sekali mouse di stage pada sembarang tempat. 2. DYNAMIC TEXT Digunakan untuk menampilkan kata/kalimat yang dapat berubah sewaktu-waktu. Untuk mengubah bentuk dan isinya anda dapat menggunakan actionscript. Untuk membuatnya, aktifkan terlebih dahulu text tool dengan cara mengkliknya langsung di toolbox atau menekan tombol T pada keyboard. Setelah text tool aktif, bukalah panel properties dengan menekan Ctrl+F3 pada keyboard. Ubah Text type pada panel properties menjadi Dynamic Text. Pastikan text tool masih aktif, klik stage sekali maka akan muncul sebuah dynamic text kosong. Anda dapat mengisikan tulisan pada dynamic text kosong ini atau tetap mengkosongkannya. Untuk menghubungkan dynamic text dengan actionscript anda dapat mengisi kotak instance name ataupun kotak Var. 3. INPUT TEXT Digunakan untuk memasukkan kata/kalimat sesuai keinginan user/pengguna. Untuk mengubah bentuk dan isinya anda juga dapat menggunakan actionscript. Untuk membuatnya, aktifkan terlebih dahulu text tool dengan cara mengkliknya langsung di toolbox atau menekan tombol T pada keyboard.
- 3. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal Setelah text tool aktif, bukalah panel properties dengan menekan Ctrl+F3 pada keyboard. Ubah Text type pada panel properties menjadi Input Text. Pastikan text tool masih aktif, klik stage sekali maka akan muncul sebuah input text kosong. Anda dapat mengisikan tulisan pada input text kosong ini atau tetap mengkosongkannya. Untuk menghubungkan input text dengan actionscript anda dapat mengisi kotak instance name ataupun kotak Var Symbol dan Objek A. Symbol-Objek 1. Buatlah sebuh flash document. 2. Pilih menu Insert>New Symbol…(tekan CTRL+F8), maka akan muncul kotak dialog Create New Symbol. 3. Ubah Name (jika diperlukan) dan Type sesuai kebutuhan. Tekan OK jika sudah selesai. Ada 3 type symbol : Movie clip Button Graphic 4. Gambar kotak dialog Create New Symbol 5. Maka kita akan berada di dalam stage symbol yang kita buat. 6. Tampilan ketika kita berada di dalam stage symbol 7. Buatlah objek sesuai kebutuhan di dalam stage symbol tersebut. 8. Jika sudah selesai tekan CTRL+E untuk keluar dari symbol. 9. Symbol telah selesai dibuat dan siap untuk digunakan.
- 4. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal 10. Untuk menaruh symbol ke dalam stage, pilih menu Window>Library(CTRL+L), akan muncul panel library. 11. Gambar kotak dialog Library 12. Drag symbol yang baru kita yang berada di panel library ke stage. B. Objek-Symbol 1. Buatlah sebuh flash document. 2. Buatlah sebuah objek. 3. Seleksi objek tersebut lalu pilih menu Modify>Convert to Symbol(F8), maka akan muncul kotak dialog Convert to Symbol. 4. Gambar kotak dialog Convert to Symbol 5. Ubah Name (jika diperlukan), Type, dan Registration sesuai kebutuhan. Tekan OK jika sudah selesai. 6. Symbol telah selesai dibuat dan siap untuk digunakan. 7. Untuk menaruh kembali symbol ke dalam stage, pilih menu Window>Library(CTRL+L), akan muncul panel library. 8. Drag symbol yang baru kita yang berada di panel library ke stage. Movie Clip Movie clip adalah salah satu type dari symbol. Movie clip digunakan untuk membuat objek agar dapat menggunakan beberapa fasilitas dari flash seperti animasi tween, masking, guide selain itu dengan dijadikannya suatu objek menjadi movie clip maka objek tersebut dapat di beri actionscript. Berikut langkah-langkah membuat movie clip : 1. Buatlah sebuh flash document.
- 5. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal 2. Buatlah sebuah objek di stage misalnya lingkaran berwarna merah dengan hitam sebagai warna garisnya. 3. Seleksi lingkaran tersebut kemudian tekan F8. Pada panel convert to symbol yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type lalu tekan ok. 4. Sebuah movie clip lingkaran sudah jadi dan siap digunakan. 5. Untuk menggunakannya ulang anda dapat membuka panel library dengan menekan Ctrl+L pada keyboard. Pada panel library yang muncul drag movie clip lingkaran ke stage sebanyak yang anda mau. 6. Untuk memberikan instance name pada movie clip, pertama yang anda lakukan adalah menyeleksi movie clip tersebut kemudian tekan Ctrl+F3. Masukkan instance name yang anda inginkan ke dalam kotak instance name pada panel properties. 7. Instance name adalah nama khusus yang anda berikan pada movie clip. Nama tersebut akan digunakan untuk menghubungkan antara movie clip dengan actionscript Button Terkadang kita sering membuat prototype (kerangka) sebuah aplikasi ataupun juga ingin mencoba-coba sebuah tutorial. Di dalam pembuatannya kita sering menggunakan sebuah atau beberapa buah tombol. Berhubung masih dalam bentuk prototype atau uji coba kita tidak perlu membuat tombol tersebut dangan bagus. Kita bisa menggunakan simple button pada tutorial ini sebagai tombol sementara pada prototype tersebut. Keuntungan dari simple button ini adalah cepat dalam pembuatannya, anda tidak perlu masuk kedalam stage sebuah tombol untuk mengatur frame hitnya karena kita akan menggunakan show border around text sebagai gantinya. 1. Buatlah sebuah flash document. 2. Buatlah sebuah dynamic text. Masukkan kata yang anda inginkan dalam dynamic text tersebut. Misalnya kita akan memasukkan Example sebagai katanya. 3. Seleksi dynamic text tersebut dan tekan Ctrl+F3. Pada panel propertis yang muncul nonaktifkan tombolselectable dan aktifkan tombol show border around text. 4. Pastikan anda masih menyeleksi dynamic text tadi dan tekan F8. Pada panel yang muncul masukkan sample_btn sebagai name dan button sebagai type lalu tekan ok. 5. Sebuah simple button sudah jadi dan siap untuk anda gunakan. Apabila simple button tersebut membutuhkan instance name, anda cukup menyeleksi simple button tersebut dan pada panel properties masukkan instance name sesuai keinginan anda. Panel Library Panel Library merupakan panel yang digunakan untuk menampilkan objek-objek yang dibuat di flash. Objek-objek tersebut berupa movie clip, button, graphic. Sound dan video yang diimport juga masuk dalam panel Library ini. Bisa juga dikatakan objek tidak akan masuk ke dalam panel library ini jika belum dijadikan symbol atau diimport ke dalam panel library. Apabila panel library belum muncul, anda bisa memunculkannya dengan cara:
- 6. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal 1. Melalui menu bar Window>Library Pilih menu seperti gambar di atas 2. Menekan tombol Ctrl+L pada keyboard. Panel Library Panel Library ini akan sering digunakan. Jadi sebisa mungkin panel library ini harus dimunculkan.
- 7. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal Prev Scene prevScene digunakan untuk memainkan frame 1 scene sebelumnya sedangkan nextScene digunakan untuk memainkan frame 1 scene berikutnya. Fungsinya mirip prevFrame dan nextFrame hanya saja prevFrame dan nextFrame memainkan frame sedangkan prevScene dan nextScene meminkan scene. Penulisannya : 1 2 prevScene(); nextScene(); Untuk contoh penggunaannya silahkan lihat di bawah ini : 1. Buatlah sebuah flash document. 2. Buatlah 2 buah dynamic text masing-masing bertuliskan PREVIOUS dan NEXT. Seleksi kedua dynamic text tersebut kemudian tekan Ctrl+F3. Pada panel properties yang muncul nonaktifkan tombol selectable dan aktifkan tombol show border around text. 4. Seleksi dynamic text bertuliskan PREVIOUS kemudian tekan F8. Pada panel yang muncul masukkanprevious_btn sebagai name dan button sebagai type lalu tekan ok. 5. Seleksi previous_btn di stage dan pada panel propertiesnya masukkan previous_btn sebagai instance name. 6. Seleksi dynamic text bertuliskan NEXT kemudian tekan F8. Pada panel yang muncul masukkan next_btnsebagai name dan button sebagai type lalu tekan ok. 7. Seleksi next_btn di stage dan pada panel propertiesnya masukkan next_btn sebagai instance name. Letakkan next_btn dan previous_btn di dalam stage. 8. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut : 1 2 3 4 5 6 7 8 stop(); //ketika tombol next_btn ditekan next_btn.onPress = function() { //mainkan frame 1 scene berikutnya nextScene(); }; //ketika tombol previous_btn ditekan previous_btn.onPress = function() {
- 8. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal 9 10 11 //mainkan frame 1 scene sebelumnya prevScene(); }; 9. Klik kanan frame 1 kemudian pilih Copy Frames. 10. Tekan Shift+F2, pada panel scene yang muncul klik tombol + sekali. Anda akan secara otomatis berpindah ke frame 1 scene 2. 11. Klik kanan frame 1 scene 2 tersebut dan pilih Paste Frames. 12. Klik tombol + sekali lagi pada panel scene. Anda akan secara otomatis berpindah ke frame 1 scene 3. 13. Klik kanan frame 1 scene 3 tersebut dan pilih Paste Frames. 14. Klik tulisan Scene 1 pada panel scene kemudian buatlah sebuah static text di dalam stage dengan tulisan Ini adalah Frame 1 Scene 1. 15. Klik tulisan Scene 2 pada panel scene kemudian buatlah sebuah static text di dalam stage dengan tulisan Ini adalah Frame 1 Scene 2. 16. Klik tulisan Scene 3 pada panel scene kemudian buatlah sebuah static text di dalam stage dengan tulisan Ini adalah Frame 1 Scene 3. Action Script Actionscript yang akan kita pelajari berikut ini adalah stop(); play(); gotoAndPlay(); dan gotoAndStop();. Masing-masing script tersebut sering digunakan. Fungsi seluruh script tersebut hanya mengurusi bagian frame. Untuk lebih jelasnya seilahkan baca di bawah ini : 1. stop berfungsi menghentikan frame yang dimainkan. Penulisannya : 1 stop(); 2. play berfungsi memainkan frame. Frame yang dimainkan hanya frame berikutnya anda tidak dapat mengatur di frame mana yang akan dimainkan. Misalnya anda menaruh tombol dengan script
- 9. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal play di dalamnya dan berada di frame 4, dan jika tombol tersebut ditekan maka akan memainkan frame 5, frame 6, frame 7, dst. Penulisannya : 1 play(); 3. gotoAndPlay fungsinya hampir sama dengan play tetapi dengan gotoAndPlay anda dapat mengatur di frame/frame label mana yang akan dimainkan. Misalnya Misalnya anda menaruh tombol dengan script gotoAndPlay(9) di dalamnya dan berada di frame 1, dan jika tombol tersebut ditekan maka akan memainkan frame 10, frame 11, frame 12, dst. Untuk memainkan frame anda cukup menuliskan angka didalam tanda kurung. Untuk memainkan frame label anda harus menuliskan frame label di antara tanda kutip. Jika menggunakan variable, anda dapat menuliskannya langsung seperti menuliskan angka frame. Penulisannya : 1 2 3 4 5 6 7 8 //masukkan langsung jika yang dimasukkan angka frame gotoAndPlay(5); //berikan tanda kutip di antara frameLabel gotoAndPlay("frameLabel"); //masukkan langsung jika yang dimasukkan variable gotoAndPlay(namaVariable); 4. gotoAndStop fungsinya hampir sama dengan gotoAndPlay hanya saja frame yang dituju tidak dimainkan seterusnya melainkan berhenti. Misalnya Misalnya anda menaruh tombol dengan script gotoAndPlay(9) di dalamnya dan berada di frame 1, dan jika tombol tersebut ditekan maka akan memainkan frame 10 dan tidak akan dilanjutkan ke frame berikutnya. Untuk memainkan frame label anda harus menuliskan frame label di antara tanda kutip. Jika menggunakan variable, anda dapat menuliskannya langsung seperti menuliskan angka frame. Penulisannya: 1 2 3 4 //masukkan langsung jika yang dimasukkan angka frame gotoAndStop(5); //berikan tanda kutip di antara frameLabel
- 10. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal 5 6 7 8 gotoAndStop("frameLabel"); //masukkan langsung jika yang dimasukkan variable gotoAndStop(namaVariable); Untuk contoh penggunaanya silahkan membuat animasi frame yang simpel berikut ini: 1. Buatlah sebuah Flash Document dengan panjang 300px dan lebar 300px serta 2fps sebagai frame ratenya. 2. Seleksi frame 1 sampai 5 lalu tekan F7. Maka di timeline akan tampil seperti berikut ini: Tampilan timeline 3. Buatlah static text di masing-masing frame dengan tulisan FRAME 1 di bagian frame 1, FRAME 2 di bagian frame 2 dst Contoh penggunaan script stop: 1. Buatlah animasi frame simpel diatas 2. Klik frame 1 dan tekan F9. Pada kotak dialog yang muncul masukkan script berikut: 1 2 //hentikan animasi frame stop(); Contoh penggunaan script play: 1. Buatlah animasi frame simpel diatas 2. Buatlah 2 buah tombol dengan masing-masing di beri tulisan PLAY dan STOP. 3. Klik tombol yang memiliki tulisan PLAY dan tekan F9. Pada kotak actions yang muncul masukkan script berikut:
- 11. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal 1 2 3 4 5 //ketika tombol ditekan on (press) { //mainkan animasi frame play(); } 4. Klik tombol yang memiliki tulisan STOP dan tekan F9. Pada kotak actions yang muncul masukkan script berikut: 1 2 3 4 5 //ketika tombol ditekan on (press) { //hentikan animasi frame stop(); } 5. Tekan Ctrl+Enter untuk melihat hasilnya. Contoh penggunaan script gotoAndPlay: 1. Buatlah animasi frame simpel diatas 2. Klik frame 1 dan tekan F9. Pada kotak ations yang muncul masukkan script berikut: 1 2 //hentikan animasi frame stop(); 3. Buatlah sebuah tombol dengan tulisan gotoAndPlay di dalamnya. Klik tombol tersebut dan tekan F9. Pada kotak dialog yang muncul masukkan script berikut : 1 2 3 4 5 //ketika tombol ditekan on (press) { //mainkan frame 3 gotoAndPlay(3); }
- 12. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal 4. Tekan Ctrl+Enter untuk melihat hasilnya. Contoh penggunaan script gotoAndStop: 1. Buatlah animasi frame simpel diatas 2. Klik frame 1 dan tekan F9. Pada kotak ations yang muncul masukkan script berikut : 1 2 //hentikan animasi frame stop(); 3. Buatlah sebuah tombol dengan tulisan gotoAndStop di dalamnya. Klik tombol tersebut dan tekan F9. Pada kotak dialog yang muncul masukkan script berikut : 1 2 3 4 5 //ketika tombol ditekan on (press) { //animasi berhenti di frame 4 gotoAndStop(4); } 4. Tekan Ctrl+Enter untuk melihat hasilnya. Fscommand Kali ini kita akan mempelajari cara menggunakan fscommand. Ada 6 jenisnya tapi kita hanya akan mempelajari 5 jenis saja. 1. fscommand fullscreen Kegunaan : membuat flash movie/swf yang dimainkan menjadi fullscreen jika nilainya true. Bagi anda yang menginginkan flash movie/swf tampil fullscreen anda bisa menggunakan fscommand ini. Penulisannya : 1 fscommand("fullscreen", "true"); 2. fscommand allowscale Kegunaan : Ukuran konten di dalam swf tidak akan berubah walaupun ukuran window swf diperbesar jika nilainya false. Penulisannya :
- 13. E-mail : putranusa_smg@yahoo.com Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal 1 fscommand("allowscale", "false"); 3. fscommand showmenu Kegunaan : menghilangkan menu File, View, Control, Help dan jika swf diklik kanan maka hanya muncul settings dan about jika nilainya true. Kelemahannya, di swf akan sedikit muncul ruang kosong di bagian atas dan bawah / konten akan terlihat sedikit mengecil. Penulisannya : 1 fscommand("showmenu", "false"); 4. fscommand trapallkeys Kegunaan : membuat pengguna tidak bisa menggunakan keyboard di swf yang dimainkan jika nilainya true. Keyboard hanya bisa digunakan dengan actionscript key (contohnya : if (Key.isDown(Key.BACKSPACE)) {} ). Penulisannya : 1 fscommand("trapallkeys", "true"); 5. fscommand quit Kegunaan : menutup swf yang dimainkan. Tidak ada nilainya. Penulisannya : 1 fscommand("quit", ""); Kelimanya dapat digunakan secara bersama-sama. Lihatlah nilai (true/false) masing-masing sesuai keterangan di atas. Jika nilainya berupa kebalikannya (misalnya true diubah menjadi false) maka kegunaannya adalah kebalikan dari kegunaan yang ditulis di atas. Untuk mengetesnya apakah berjalan atau tidak, anda harus memainkan swf-nya langsung (klik 2 kali swf yang akan dimainkan di Windows Explorer). Anda tidak dapat mengetesnya melalui Test Movie.