tutorial flash (1)

of 13/13
E-mail : [email protected] Phone : 085 727 585 524 TUTORIAL FLASH DASAR | Ridho_tawakal Pelatihan Adobe Flash DIKDASMEN Kota Semarang Disusun oleh : Ridho Tawakal Materi 4 pertemuan

Post on 14-Apr-2017

189 views

Category:

Education

0 download

Embed Size (px)

TRANSCRIPT

  • E-mail : [email protected] Phone : 085 727 585 524

    TUTORIAL FLASH DASAR | Ridho_tawakal

    Pelatihan Adobe Flash

    DIKDASMEN Kota Semarang

    Disusun oleh : Ridho Tawakal

    Materi 4 pertemuan

    mailto:[email protected]

  • E-mail : [email protected] 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.

    mailto:[email protected]

  • E-mail : [email protected] 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.

    mailto:[email protected]:///C:/Users/Yunita Nur Ayu A/Downloads/Membuat Symbol _ Warung Flash Dot Com_files/01-12-2008-5-03-57.jpgfile:///C:/Users/Yunita Nur Ayu A/Downloads/Membuat Symbol _ Warung Flash Dot Com_files/01-12-2008-5-17-51.jpg

  • E-mail : [email protected] 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.

    mailto:[email protected]://warungflash.com/wp-content/uploads/2008/12/library.pnghttp://warungflash.com/wp-content/uploads/2008/12/01-12-2008-5-23-40.jpg

  • E-mail : [email protected] 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:

    mailto:[email protected]://warungflash.com/2009/09/actionscript-2/http://warungflash.com/2009/06/text-tool/

  • E-mail : [email protected] 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.

    mailto:[email protected]:///C:/Users/Yunita Nur Ayu A/Downloads/Panel Library _ Warung Flash Dot Com_files/m2.pngfile:///C:/Users/Yunita Nur Ayu A/Downloads/Panel Library _ Warung Flash Dot Com_files/pl.png

  • E-mail : [email protected] 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() {

    mailto:[email protected]

  • E-mail : [email protected] 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

    mailto:[email protected]

  • E-mail : [email protected] 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

    mailto:[email protected]

  • E-mail : [email protected] 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:

    mailto:[email protected]://warungflash.com/wp-content/uploads/2009/03/timlin.png

  • E-mail : [email protected] 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);

    }

    mailto:[email protected]

  • E-mail : [email protected] 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 :

    mailto:[email protected]

  • E-mail : [email protected] 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.

    mailto:[email protected]