Tampilan Flash
Pada setiap versi, Macromedia/Adobe Flash memiliki tampilan yang berbeda-beda. Perbedaan itu disebabkan juga pada penambahan fiturnya. Namun dari perbedaan tersebut sebenarnya ada yang fungsinya sama. Tampilan yang akan di bahas pada tutorial kali ini adalah tampilan pada Macromedia Flash 8. Untuk memulainya, pertama bukalah terlebih dahulu Macromedia Flash 8 maka akan tampil seperti gambar di bawah ini :
Klik pada gambar untuk memperbesar gambar
Perhatikan pada kotak dialog di tengah-tengah:
1. Open a Recent Item : membuka file berekstensi .fla yang terakhir anda buka di flash.
2. Create New : membuat file flash baru. Terdapat 7 pilihan tapi pada seluruh tutorial di sini menggunakan Flash Document.
3. Create from template : membuat file flash baru dengan template yang sudah disediakan.
Selanjutnya klik pada Flash Document.
Maka akan muncul tampilan seperti di bawah ini :
Klik pada gambar untuk memperbesar gambar
1. Menu Bar : kumpulan perintah-perintah operasi pada flash. Klik di sini untuk lebih lengkapnya
2. Toolbox : kumpulan tool yang memiliki fungsi-fungsi yang berbeda pada setiap toolnya.Klik di sini untuk lebih lengkapnya
3. Timeline : digunakan untuk mengatur frame, layer dan durasi animasi.
4. Stage : halaman kerja pada flash. Klik di sini untuk lebih lengkapnya
5. Library : panel yang digunakan untuk menampilkan objek-objek yang dibuat. Klik di sini untuk lebih lengkapnya
6. Properties : panel yang digunakan untuk menampilkan informasi
7. Color Mixer : panel yang digunakan untuk memilih warna. Klik di sini untuk lebih lengkapnya
8. Align & Info & Transform : panel yang digunakan untuk mengubah ukuran dan mengatur letak objek.
Membuat company Profile Perusahaan Ujian Kompetensi 2011
SMK N 7 JAKARTA
Langkah pembuatan tombol
1. Tuls dulu
2. Klik tombol 2x / tekan tombol F8-convert to symbol
3. Insert key frame
4. Pilih bottom
5. Beri nama : home_btn, visi_btn, About_btn, gallery_btn
6. Klik tombol 2x pada tombol : akan ada tampilan seperti berikut
7. Up, Over, Down, Hit
8. Klik kanan & insert key frame pada
9. Over : rubah warna teks
10. Klik kanan & insert key frame pada
11. Down lalu CTRL + T untuk merubah ukuran teks 50%
12. Klik kanan & insert key frame pada :
13. Hit : buat kotah warna diatas teks
LAYER
Ganti nama layer :: klik 2x pada teks layer 1
Beri nama : “tombol”
Menambah layer : klik kanan insert-layer beri nama “contens
Mengunci Layer
Klik tanda kunci /klik pada pilihan berikut /key
Conten untuk membuat garis, beri nama “ bg” letakkan dibawah layer tombol
Insert layer action
Klik kanan pada layer 1 pilih action :
Ketiklah stop()
Sejauh ini kita telah membuat 4 Layer yaitu :
Action
Ada dua cara menempatkan scrip pada flah
Actionscript
Actionscript terdiri dari 2 kata yaitu : action (aksi) dan script (tulisan/naskah) yang berarti tulisan/naskah yang beraksi
Actionscript adalah bahasa pemrograman yang digunakan di Flash. Hingga saat ini sudah mencapai 3 versi.
Actionscript 1.0 (tahun 2000 – tahun 2003) mulai dipergunakan pada Flash 5 dengan minimal dimainkan di Flash Player 5
Actionscript 2.0 (tahun 2003 – tahun 2006) mulai dipergunakan pada Flash MX 2004 dengan minimal dimainkan di Flash Player 7
Actionscript 3.0 (tahun 2006 sampai sekarang) mulai dipergunakan pada Flash CS3 dengan minimal dimainkan di Flash Player 9
Di Flash actionscript ditulis pada Panel Action, Penulisan actionscript di Panel Action, dapat dilakukan pada 3 tempat yaitu pada movie clip, button, dan frame. Ketiga buah tempat tadi memiliki aturan penulisan yang berbeda.
1. Untuk menjalankan event pada button, script pada button penulisannya diawali dengan on(){}
2. Untuk menjalankan event pada movie clip, script pada movie clip penulisannya diawali dengan on(){} atau onClipEvent(){}
3. Untuk menjalankan event pada frame, script pada frame penulisannya diawali dengan onLoad=function(){} atau onEnterFrame=function(){} atau onPress=function(){} atau onRelease=function(){} dsb.
Ketiga cara penulisan script tersebut memiliki kekurangan dan kelebihan. Kami lebih merekomendasikan menulis script pada frame karena apabila terdapat kesalahan/error pada script yang anda tulis anda dapat cepat memperbaikinya. Coba bandingkan apabila anda menulis script pada movie clip atau button, jika sampai muncul kesalahan/error pada script yang anda tulis, tentunya anda harus mengeceknya satu per satu mana yang error.
Untuk mengecek apakah terdapat kesalahan pada script yang anda tulis anda dapat menggunakan tombol Check syntax pada Panel Action, Ketika tombol Check syntax ini ditekan, apabila script yang anda tulis terdapat kesalahan maka akan muncul kotak dialog beserta panel output yang di dalamnya berisi informasi kesalahan pada script anda. Apabila script yang anda tulis sudah benar maka akan muncul kotak dialog bertuliskan This script contains no errors.
Seperti dalam kehidupan nyata tulisan pada selembar kertas harus ditulis dengan rapi agar enak membacanya. Begitu juga penulisan script, apabila kurang rapi penulisannya tentunya anda akan tidak enak membacanya atau malah sampai bingung bagaimana membacanya. Untuk itu di Flash sudah disediakan fasilitas untuk merapikan script yang anda tulis. Caranya cukup mudah, apabila anda sudah yakin tidak ada error pada script yang anda tulis, silahkan anda menekan tombol Auto format pada Panel Action, Jika anda menekan tombol tersebut maka script yang tadinya penulisannya kurang rapi (ada yang terlalu kekanan, ada yang terlalu banyak spasinya dsb) akan menjadi teratur dan rapi secara otomatis.
Berikut ini beberapa actionscript yang sering digunakan :
+
-
*
/
=
-=
+=
%=
*=
/=
!=
<
=
–
++
and
or
not
stop
play
gotoAndStop
gotoAndPlay
nextFrame
prevFrame
nextScene
prevScene
onClipEvent(){}
on(){}
trace
_x
_y
_xscale
_yscale
_visible
_height
_width
_alpha
_rotation
_currentframe
_xmouse
_ymouse
_totalframes
_quality
for
if
enabled
useHandCursor
getBytesLoaded
getBytesTotal
getURL
fscommand
loadMovie
unloadMovie
loadMovieNum
unloadMovieNum
setInterval
clearInterval
stopAllSounds
startDrag
stopDrag
hitTest
random
attachMovie
dupilateMovieClip
swapDepths
getNextHighestDepth
setMask
SharedObject
Sound constructor
attachSound
setVolume
start sound
stop sound
Variable
Array
Math
Panel actions adalah panel yang digunakan untuk menulis actionscript. Untuk memunculkan panel actions ini dapat dilakukan dengan 2 cara :
1. Melalui menu bar Window>Actions
2. Menekan F9 pada keyboard
Panel Actions
1. Filters items shown in the Action toolbox : Digunakan untuk memilih type actionscript
2. Actions toolbox : kumpulan actionscript yang sudah diatur letaknya menurut kategorinya.
3. Script navigator : digunakan untuk menampilkan daftar hirarki frame, movie clips, dan button yang terdapat actionscript didalamnya.
4. Script pane : tempat actionscript ditulis.
5. Add a new item to the script : digunakan untuk menambah actionscript di script pane.
6. Find : digunakan untuk mencari kata atau kalimat di dalam actionscript.
7. Insert a target path : digunakan untuk mencari dan memasukkan target di script pane.
8. Check syntax : digunakan untuk mencari tahu apakah script yang ditulis sudah benar.
9. Auto format : digunakan untuk membuat script yang ditulis tersusun rapi.
10. Show code hint : digunakan untuk menampilkan script apa saja yang dapat ditulis selanjutnya.
11. Debug options : digunakan untuk memunculkan lingkaran merah di sebalah kiri baris script dan juga untuk menghilangkannya.
12. Script assist : digunakan untuk membantu anda dalam penulisan script.
13. Help : digunakan untuk menampilkan panel help.
url
Sesuai judulnya, kali ini kita akan belajar memasukkan links ke dalam teks atau gambar. Untuk membuat links tersebut kita akan menggunakan script getURL. Penulisannya :
getURL(url, window);
url = alamat yang ingin anda masukkan sebagai links
window = bagaimana links tersebut dibuka, terdapat 4 pilihan : _self, _blank, _parent, _top
_self = membuka links pada window tempat links berada
_blank = membuka links pada window baru (kalau pada browser istilahnya new tab)
_parent = membuka links pada parent tempat links berada. Hampir sama dengan _self
_top = membuka links pada top level frame tempat links berada. Hampir sama dengan _self
Url dan window tersebut ditulis dalam tanda kutip. Pada tutorial berikut ini kita akan menggunakan _blank sebagai windownya.
Membuat links pada teks
1. Buatlah sebuah flash dokumen
2. Buatlah sebuah static teks dengan tulisan WARUNG FLASH berwarna biru.
3. Seleksi tulisan tersebut dan tekan F8. Pada panel yang muncul masukkan wfteks sebagai name dan button sebagai type lalu tekan ok.
4. Seleksi button wfteks_btn di stage dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan wfteks sebagai instance name.
5. Klik kanan button wfteks di stage kemudian pilih Edit.
6. Seleksi frame Over, Down, dan Hit lalu tekan F6. Ubah warna tulisan WARUNG FLASH pada frame over menjadi biru muda. Ubah warna tulisan WARUNG FLASH pada frame Down menjadi biru tua.
7. Kemudian pada frame Hit buatlah sebuah persegi panjang dengan panjang dan lebar sama dengan panjang dan lebar sama dengan panjang dan lebar sttic teks bertuliskan WARUNG FLASH. Letakkan persegi panjang tersebut tepat di tengah tengah tulisan WARUNG FLASH sehingga tulisannya tertutup oleh persegi panjang.
8. Tekan Ctrl+E untuk kembali ke stage scene 1.
9. Klik frame 1 dan tekan F9. PadaPanel action yang muncul masukkan script berikut :
1
2
3
4
5 //ketika button wfteks ditekan
wfteks.onRelease = function() {
//buka www.warungflash.com pada window/tab baru
getURL(“http://www.warungflash.com”, “_blank”);
};
10. Tekan Ctrl+Enter untuk melihat hasilnya.
Membuat links pada gambar
1. Buatlah sebuah flash documen.
2. Tekan Ctrl+R, pada panel yang muncul cari gambar yang diinginkan kemudian tekan open.
Contoh gambar yang digunakan
3. Seleksi gambar tersebut dan tekan F8. Pada panel yang muncul masukkan wfpic sebagai name dan button sebagai type lalu tekan ok.
4. Seleksi button wfpic di stage kemudian tekan Ctrl+F3. Pada panel poperties yang muncul masukkan wfpic sebagai instance name.
5. Klik kanan button wfpic di stage kemudian pilih Edit.
6. Seleksi frame Over dan Down lalu tekan F6. Ubah ukuran gambar pada frame Over menjadi sedikit lebih besar. Kemudian tekan Ctrl+E untuk kembali stage scene 1.
7. Klik frame 1 dan tekan F9. Pada Panel action yang muncul masukkan script berikut :
1
2
3
4
5 button wfpic ditekanwfpic.onRelease = function() {
//buka www.warungflash.com pada window/tab baru
getURL(“http://www.warungflash.com”, “_blank”);
};;
8. Tekan Ctrl+Enter untuk melihat hasilnya.
Pada setiap versi, Macromedia/Adobe Flash memiliki tampilan yang berbeda-beda. Perbedaan itu disebabkan juga pada penambahan fiturnya. Namun dari perbedaan tersebut sebenarnya ada yang fungsinya sama. Tampilan yang akan di bahas pada tutorial kali ini adalah tampilan pada Macromedia Flash 8. Untuk memulainya, pertama bukalah terlebih dahulu Macromedia Flash 8 maka akan tampil seperti gambar di bawah ini :
Klik pada gambar untuk memperbesar gambar
Perhatikan pada kotak dialog di tengah-tengah:
1. Open a Recent Item : membuka file berekstensi .fla yang terakhir anda buka di flash.
2. Create New : membuat file flash baru. Terdapat 7 pilihan tapi pada seluruh tutorial di sini menggunakan Flash Document.
3. Create from template : membuat file flash baru dengan template yang sudah disediakan.
Selanjutnya klik pada Flash Document.
Maka akan muncul tampilan seperti di bawah ini :
Klik pada gambar untuk memperbesar gambar
1. Menu Bar : kumpulan perintah-perintah operasi pada flash. Klik di sini untuk lebih lengkapnya
2. Toolbox : kumpulan tool yang memiliki fungsi-fungsi yang berbeda pada setiap toolnya.Klik di sini untuk lebih lengkapnya
3. Timeline : digunakan untuk mengatur frame, layer dan durasi animasi.
4. Stage : halaman kerja pada flash. Klik di sini untuk lebih lengkapnya
5. Library : panel yang digunakan untuk menampilkan objek-objek yang dibuat. Klik di sini untuk lebih lengkapnya
6. Properties : panel yang digunakan untuk menampilkan informasi
7. Color Mixer : panel yang digunakan untuk memilih warna. Klik di sini untuk lebih lengkapnya
8. Align & Info & Transform : panel yang digunakan untuk mengubah ukuran dan mengatur letak objek.
Membuat company Profile Perusahaan Ujian Kompetensi 2011
SMK N 7 JAKARTA
Langkah pembuatan tombol
1. Tuls dulu
2. Klik tombol 2x / tekan tombol F8-convert to symbol
3. Insert key frame
4. Pilih bottom
5. Beri nama : home_btn, visi_btn, About_btn, gallery_btn
6. Klik tombol 2x pada tombol : akan ada tampilan seperti berikut
7. Up, Over, Down, Hit
8. Klik kanan & insert key frame pada
9. Over : rubah warna teks
10. Klik kanan & insert key frame pada
11. Down lalu CTRL + T untuk merubah ukuran teks 50%
12. Klik kanan & insert key frame pada :
13. Hit : buat kotah warna diatas teks
LAYER
Ganti nama layer :: klik 2x pada teks layer 1
Beri nama : “tombol”
Menambah layer : klik kanan insert-layer beri nama “contens
Mengunci Layer
Klik tanda kunci /klik pada pilihan berikut /key
Conten untuk membuat garis, beri nama “ bg” letakkan dibawah layer tombol
Insert layer action
Klik kanan pada layer 1 pilih action :
Ketiklah stop()
Sejauh ini kita telah membuat 4 Layer yaitu :
Action
Ada dua cara menempatkan scrip pada flah
Actionscript
Actionscript terdiri dari 2 kata yaitu : action (aksi) dan script (tulisan/naskah) yang berarti tulisan/naskah yang beraksi
Actionscript adalah bahasa pemrograman yang digunakan di Flash. Hingga saat ini sudah mencapai 3 versi.
Actionscript 1.0 (tahun 2000 – tahun 2003) mulai dipergunakan pada Flash 5 dengan minimal dimainkan di Flash Player 5
Actionscript 2.0 (tahun 2003 – tahun 2006) mulai dipergunakan pada Flash MX 2004 dengan minimal dimainkan di Flash Player 7
Actionscript 3.0 (tahun 2006 sampai sekarang) mulai dipergunakan pada Flash CS3 dengan minimal dimainkan di Flash Player 9
Di Flash actionscript ditulis pada Panel Action, Penulisan actionscript di Panel Action, dapat dilakukan pada 3 tempat yaitu pada movie clip, button, dan frame. Ketiga buah tempat tadi memiliki aturan penulisan yang berbeda.
1. Untuk menjalankan event pada button, script pada button penulisannya diawali dengan on(){}
2. Untuk menjalankan event pada movie clip, script pada movie clip penulisannya diawali dengan on(){} atau onClipEvent(){}
3. Untuk menjalankan event pada frame, script pada frame penulisannya diawali dengan onLoad=function(){} atau onEnterFrame=function(){} atau onPress=function(){} atau onRelease=function(){} dsb.
Ketiga cara penulisan script tersebut memiliki kekurangan dan kelebihan. Kami lebih merekomendasikan menulis script pada frame karena apabila terdapat kesalahan/error pada script yang anda tulis anda dapat cepat memperbaikinya. Coba bandingkan apabila anda menulis script pada movie clip atau button, jika sampai muncul kesalahan/error pada script yang anda tulis, tentunya anda harus mengeceknya satu per satu mana yang error.
Untuk mengecek apakah terdapat kesalahan pada script yang anda tulis anda dapat menggunakan tombol Check syntax pada Panel Action, Ketika tombol Check syntax ini ditekan, apabila script yang anda tulis terdapat kesalahan maka akan muncul kotak dialog beserta panel output yang di dalamnya berisi informasi kesalahan pada script anda. Apabila script yang anda tulis sudah benar maka akan muncul kotak dialog bertuliskan This script contains no errors.
Seperti dalam kehidupan nyata tulisan pada selembar kertas harus ditulis dengan rapi agar enak membacanya. Begitu juga penulisan script, apabila kurang rapi penulisannya tentunya anda akan tidak enak membacanya atau malah sampai bingung bagaimana membacanya. Untuk itu di Flash sudah disediakan fasilitas untuk merapikan script yang anda tulis. Caranya cukup mudah, apabila anda sudah yakin tidak ada error pada script yang anda tulis, silahkan anda menekan tombol Auto format pada Panel Action, Jika anda menekan tombol tersebut maka script yang tadinya penulisannya kurang rapi (ada yang terlalu kekanan, ada yang terlalu banyak spasinya dsb) akan menjadi teratur dan rapi secara otomatis.
Berikut ini beberapa actionscript yang sering digunakan :
+
-
*
/
=
-=
+=
%=
*=
/=
!=
<
=
–
++
and
or
not
stop
play
gotoAndStop
gotoAndPlay
nextFrame
prevFrame
nextScene
prevScene
onClipEvent(){}
on(){}
trace
_x
_y
_xscale
_yscale
_visible
_height
_width
_alpha
_rotation
_currentframe
_xmouse
_ymouse
_totalframes
_quality
for
if
enabled
useHandCursor
getBytesLoaded
getBytesTotal
getURL
fscommand
loadMovie
unloadMovie
loadMovieNum
unloadMovieNum
setInterval
clearInterval
stopAllSounds
startDrag
stopDrag
hitTest
random
attachMovie
dupilateMovieClip
swapDepths
getNextHighestDepth
setMask
SharedObject
Sound constructor
attachSound
setVolume
start sound
stop sound
Variable
Array
Math
Panel actions adalah panel yang digunakan untuk menulis actionscript. Untuk memunculkan panel actions ini dapat dilakukan dengan 2 cara :
1. Melalui menu bar Window>Actions
2. Menekan F9 pada keyboard
Panel Actions
1. Filters items shown in the Action toolbox : Digunakan untuk memilih type actionscript
2. Actions toolbox : kumpulan actionscript yang sudah diatur letaknya menurut kategorinya.
3. Script navigator : digunakan untuk menampilkan daftar hirarki frame, movie clips, dan button yang terdapat actionscript didalamnya.
4. Script pane : tempat actionscript ditulis.
5. Add a new item to the script : digunakan untuk menambah actionscript di script pane.
6. Find : digunakan untuk mencari kata atau kalimat di dalam actionscript.
7. Insert a target path : digunakan untuk mencari dan memasukkan target di script pane.
8. Check syntax : digunakan untuk mencari tahu apakah script yang ditulis sudah benar.
9. Auto format : digunakan untuk membuat script yang ditulis tersusun rapi.
10. Show code hint : digunakan untuk menampilkan script apa saja yang dapat ditulis selanjutnya.
11. Debug options : digunakan untuk memunculkan lingkaran merah di sebalah kiri baris script dan juga untuk menghilangkannya.
12. Script assist : digunakan untuk membantu anda dalam penulisan script.
13. Help : digunakan untuk menampilkan panel help.
url
Sesuai judulnya, kali ini kita akan belajar memasukkan links ke dalam teks atau gambar. Untuk membuat links tersebut kita akan menggunakan script getURL. Penulisannya :
getURL(url, window);
url = alamat yang ingin anda masukkan sebagai links
window = bagaimana links tersebut dibuka, terdapat 4 pilihan : _self, _blank, _parent, _top
_self = membuka links pada window tempat links berada
_blank = membuka links pada window baru (kalau pada browser istilahnya new tab)
_parent = membuka links pada parent tempat links berada. Hampir sama dengan _self
_top = membuka links pada top level frame tempat links berada. Hampir sama dengan _self
Url dan window tersebut ditulis dalam tanda kutip. Pada tutorial berikut ini kita akan menggunakan _blank sebagai windownya.
Membuat links pada teks
1. Buatlah sebuah flash dokumen
2. Buatlah sebuah static teks dengan tulisan WARUNG FLASH berwarna biru.
3. Seleksi tulisan tersebut dan tekan F8. Pada panel yang muncul masukkan wfteks sebagai name dan button sebagai type lalu tekan ok.
4. Seleksi button wfteks_btn di stage dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan wfteks sebagai instance name.
5. Klik kanan button wfteks di stage kemudian pilih Edit.
6. Seleksi frame Over, Down, dan Hit lalu tekan F6. Ubah warna tulisan WARUNG FLASH pada frame over menjadi biru muda. Ubah warna tulisan WARUNG FLASH pada frame Down menjadi biru tua.
7. Kemudian pada frame Hit buatlah sebuah persegi panjang dengan panjang dan lebar sama dengan panjang dan lebar sama dengan panjang dan lebar sttic teks bertuliskan WARUNG FLASH. Letakkan persegi panjang tersebut tepat di tengah tengah tulisan WARUNG FLASH sehingga tulisannya tertutup oleh persegi panjang.
8. Tekan Ctrl+E untuk kembali ke stage scene 1.
9. Klik frame 1 dan tekan F9. PadaPanel action yang muncul masukkan script berikut :
1
2
3
4
5 //ketika button wfteks ditekan
wfteks.onRelease = function() {
//buka www.warungflash.com pada window/tab baru
getURL(“http://www.warungflash.com”, “_blank”);
};
10. Tekan Ctrl+Enter untuk melihat hasilnya.
Membuat links pada gambar
1. Buatlah sebuah flash documen.
2. Tekan Ctrl+R, pada panel yang muncul cari gambar yang diinginkan kemudian tekan open.
Contoh gambar yang digunakan
3. Seleksi gambar tersebut dan tekan F8. Pada panel yang muncul masukkan wfpic sebagai name dan button sebagai type lalu tekan ok.
4. Seleksi button wfpic di stage kemudian tekan Ctrl+F3. Pada panel poperties yang muncul masukkan wfpic sebagai instance name.
5. Klik kanan button wfpic di stage kemudian pilih Edit.
6. Seleksi frame Over dan Down lalu tekan F6. Ubah ukuran gambar pada frame Over menjadi sedikit lebih besar. Kemudian tekan Ctrl+E untuk kembali stage scene 1.
7. Klik frame 1 dan tekan F9. Pada Panel action yang muncul masukkan script berikut :
1
2
3
4
5 button wfpic ditekanwfpic.onRelease = function() {
//buka www.warungflash.com pada window/tab baru
getURL(“http://www.warungflash.com”, “_blank”);
};;
8. Tekan Ctrl+Enter untuk melihat hasilnya.
Tag :
MATERI SEKOLAH SMK
0 Komentar untuk "Tutorial flash"