Download - Tutorial flash (1)

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]



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.


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.


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




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


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 :



http://warungflash.com/wp-content/uploads/2008/12/library.png

http://warungflash.com/wp-content/uploads/2008/12/01-12-2008-5-23-40.jpg



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:


http://warungflash.com/2009/09/actionscript-2/

http://warungflash.com/2009/06/text-tool/



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.




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() {




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.





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




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




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:


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:


http://warungflash.com/wp-content/uploads/2009/03/timlin.png



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


on (press) {


stop();

}

5. Tekan Ctrl+Enter untuk melihat hasilnya.

Contoh penggunaan script gotoAndPlay:


2. Klik frame 1 dan tekan F9. Pada kotak ations yang muncul masukkan script berikut:

1

2


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


on (press) {

//mainkan frame 3

gotoAndPlay(3);

}





Contoh penggunaan script gotoAndStop:


2. Klik frame 1 dan tekan F9. Pada kotak ations yang muncul masukkan script berikut :

1

2


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


on (press) {

//animasi berhenti di frame 4

gotoAndStop(4);

}


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 :




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.


Download - Tutorial flash (1)

Top Related