Anda di halaman 1dari 29

 Siapkan sebuah dokumen flash baru menggunakan Flash CS 3, karena kita perlu Flash Player

9 untuk agar dapat fullscreen pada browser.


 Atur ukuran dari stage menjadi 640 piksel x 480 piksel.

panel properties

 Gambar 4 buah teks agar berguna sebagai link, yaitu : home, project, link, about me.

menu

 Tulisan tersebut masih berupa teks, sekarang kita ubah menjadi button, sehingga semua
terdapat 4 button. Klik kanan pada masing-masing teks, pilih Convert to Symbol, pilih button
dan klik OK.
Convert to Symbol

 Setelah itu klik 2 kali pada tombol yang baru saja dibuat, tambahkan area pada frame hit.
Gunanya adalah agar ketika mouse memasuki area tersebut, maka tombol akan bisa di-klik.

Masuk ke dalam Button

 Setelah sudah, klik 2 kali pada area kosong untuk kembali ke stage. Terapkan teknik tersebut
ke masing-masing teks menu.
 Beri instance name masing-masing tombol yang telah dibuat seperti gambar ini.
Memberikan instance name, cukup klik pada button tersebut dan tekan Ctrl + F3 untuk
menampilkan panel properties.
Instance Name

 Buatlah sebuah kotak berukuran 2400 piksel x 350 piksel pada stage pada posisi x = 20 dan y
= 70. Bagi menjadi 4 bagian, sehingga per bagian memiliki panjang 600 piksel.

Kotak (Klik untuk memperbesar)

 Seleksi kotak tersebut, dan klik kanan kemudian pilih Convert to Symbol pilih MovieClip.
Pastikan titik registrasi berada di kiri.
Convert to Movieclip

 Jangan lupa untuk mengganti instance name-nya menjadi kotak_mc.

kotak_mc

 Sekarang, masuk ke dalam kotak tersebut, dan kita edit bagian dalamnya , kira2 seperti ini
:

Preview

 Sekarang buat sebuah tombol untuk fullscreen. Beri nama fullscreen_btn sebagai instance
name-nya.

tombol fullscreen

 Sekarang lanjut ke script (actionscript 2.0). Buat sebuah layer baru, klik pada frame 1, tekan
F9 untuk memunculkan panel Actions – Frame. Ketik syntax berikut :
view source
print?
01 import mx.transitions.Tween;
02 import mx.transitions.easing.*;
03  
04 tombol1_btn.onRelease=function(){
    var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut,
05
kotak_mc._x, 20, 1, true);
06 }

07 tombol2_btn.onRelease=function(){
    var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut,
08
kotak_mc._x, -580, 1, true);
09 }
10 tombol3_btn.onRelease=function(){
    var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut,
11
kotak_mc._x, -1180, 1, true);
12 }

13 tombol4_btn.onRelease=function(){
    var myTween:Tween = new Tween(kotak_mc, "_x", Strong.easeOut,
14
kotak_mc._x, -1780, 1, true);
15 }
16  
17 fullscreen_btn.onRelease=function(){
18     //fullscreen di projector
19     //fscommand("fullscreen","true");
20     //fullscreen pada browser
21     Stage.displayState="fullScreen";
22 }

 Kemudian buka publish setting pada Menu File -> Publish Settings, pastikan pengaturan
seperti pada gambar.
Publish Settings

 Kemudian klik Publish agar file Html dan .swf terbentuk.

1. Before I begin – for those of you who want an easy way out of this tutorial, you can create a
free flash website with Wix that will look like a very professional website. Sebelum saya
memulai - untuk anda yang menginginkan jalan keluar yang mudah dari tutorial ini, Anda bisa
membuat website flash gratis dengan Wix yang akan terlihat seperti website profesional yang
sangat. Now for those who are still interested in going through with the tutorial, I will continue.
Sekarang bagi mereka yang masih tertarik akan melalui dengan tutorial, saya akan melanjutkan.
Open flash click new flash document. Buka dokumen klik flash flash baru.

2. 2. Open the page properties if its not already opened which it should be
Window/Properties/Properties Buka properti halaman jika tidak yang sudah dibuka yang harus
Window / Properties / Properties

3. 3. Change the size of the canvas to 800, 600. Mengubah ukuran kanvas sampai 800, 600.

4. 4. Click on the background button and change it to #333333 Klik pada tombol latar belakang
dan mengubahnya menjadi # 333333

5. 5. After you have done this click the square tool Setelah Anda telah melakukan hal ini klik
tool persegi
6. 6. The color of the square should be white so click on the paint bucket tool and choose the
color white. Warna alun-alun harus putih jadi klik pada alat ember cat dan memilih warna putih.
the stroke should also be off.. stroke juga harus off .. this is what it looks like. ini adalah apa
yang tampak seperti. the stroke tool is right intop of the paint bucket. alat stroke intop kanan
ember cat.
7.Drag and make a square any size we would change that manually in a moment. 7.Drag dan
membuat persegi ukuran kita akan perubahan yang secara manual dalam sekejap.

8. 8. now change the width, height, x, and y positioning( change the width to 650, the height to
469.2, the x positioning to 398.1, and the y positioning to 299.3.) to change this dimmensions is
all in the page properties. sekarang mengubah lebar, tinggi, x, dan y positioning (ubah lebar ke
650, tinggi ke 469,2, posisi x untuk 398,1, dan posisi y untuk 299,3.) untuk perubahan ini
dimmensions semua pada properti halaman. you have to click on the square and with it selected
you can start making this changes. Anda harus mengklik di alun-alun dan dengan itu dipilih,
Anda dapat mulai membuat ini berubah.
9. 9. with the square still selected now make it into a symbol to do this press (F8) a screen will
come up what will ask you to name it. dengan alun-alun sekarang masih dipilih membuatnya
menjadi simbol untuk melakukan hal ini tekan (F8) layar akan muncul apa yang akan meminta
Anda untuk nama itu. Name it “Background Symbol”. Nama itu "Latar Belakang Symbol". make
sure the movie clip button is clicked. pastikan tombol klip video diklik.

10. 10. make a new layer to do tis click on the insert layer button. membuat layer baru untuk
melakukan tis klik pada tombol insert layer.

11. 11. Select the new layer and click on the square tool again and make another square with the
stroke off and the color instead of white make it black. Pilih layer baru dan klik pada alat persegi
lagi dan membuat lain persegi dengan off stroke dan warna bukan putih membuatnya hitam. This
time with this dimensions.( width: 632.4, height: 450.4, x positioning: 81.6, and y
positioning:73.3) Kali ini dengan dimensi (lebar: 632,4, tinggi: 450,4, posisi x: 81,6, dan posisi
y: 73,3).
12. 12. Make the new square into a symbol by pressing (F8) and name it masked symbol.
Buatlah persegi baru ke simbol dengan menekan (F8) dan nama itu bertopeng simbol.

13. 13. after you have made it into a symbol double click into the square this will take you inside
the symbol and a new time line. setelah Anda telah membuatnya menjadi simbol double klik ke
alun-alun ini akan membawa Anda di dalam simbol dan garis waktu yang baru. this is just like
the time line you were in but now you are inside of a symbol. ini hanya seperti garis waktu Anda
berada di tetapi sekarang kamu adalah di dalam simbol. make a new layer just like you did it
before by clickin on the insert layer button. membuat layer baru seperti kamu melakukannya
sebelumnya oleh clickin tombol insert layer. all the art work is in the bottom layer as of right
now you can tell because of the little black dot under and on the top layer there is a white dot.
semua karya seni di lapisan bawah sebagai hak sekarang Anda bisa mengatakan karena titik
hitam kecil di bawah dan pada lapisan atas ada titik putih. the white dot means there is no art
work on this layer. titik putih berarti tidak ada karya seni pada lapisan ini.

14. 14. Now clck and hold down on “Layer 1″ and with it still clicked drag it intop of “Layer 2″ .
Sekarang clck dan tahan pada "Layer 1" dan dengan itu masih diklik tarik intop dari "2 Layer".
remember that all this is happening inside that symbol we made called “masked symbol”. ingat
bahwa semua ini adalah terjadi di dalam simbol yang kami buat disebut "simbol bertopeng".
15. 15. the picture on top shows what it should look like. gambar di atas menunjukkan apa yang
seharusnya terlihat seperti.

16. 16. Right click on “Layer 1″ and then select “Mask” Klik kanan pada "Layer 1" dan
kemudian pilih "Mask"

17. 17. when you do this both layers are goint to be locked you can tell because now the have a
little lock next to them. ketika Anda melakukan ini baik lapisan goint harus dikunci Anda dapat
memberitahu karena sekarang memiliki kunci kecil di samping mereka. click on the bottom lock
to take it off. klik pada kunci bawah untuk melepasnya.
18. 18. Select “Layer 2″ find an image you like and now we are going to place in there. Pilih
"Layer 2" menemukan gambar yang Anda suka dan sekarang kita akan ke tempat di sana. the
way you do this is you go File/Import/Import to stage. cara Anda melakukan ini adalah Anda
pergi File / Import / Impor ke panggung. then a search window is goign to come up and you find
where your picture is and double click and it will be placed on the stage. maka search window
akan muncul dan Anda menemukan di mana foto Anda dan klik dua kali dan itu akan
ditempatkan di atas panggung.
19. 19. Now lock that layer back up by clicking where the lock was. Sekarang kunci lapisan yang
kembali dengan mengklik dimana kuncian tersebut. and you should have something that looks
kind of like this. dan Anda harus memiliki sesuatu yang tampak jenis seperti ini.
20. 20. Now go tot the main time line. Sekarang pergi tot garis waktu utama. if you remember we
were working inside a symbol so now get out of the symbol and go to the main timeline. jika
anda ingat kami bekerja di dalam simbol maka sekarang keluar dari simbol dan pergi ke timeline
utama. a simple way to do this i to click somewhere were there is no artwork outside of the
canvas, in the grey area. cara sederhana untuk melakukan hal ini saya untuk mengklik suatu
tempat yang tidak ada karya seni di luar kanvas, di daerah abu-abu.

21. 21. Now lets make some buttons.Start by making a new layer and drag it all the way down so
it becomes the bottom layer. Sekarang mari kita membuat beberapa buttons.Start dengan
membuat layer baru dan drag semua jalan ke bawah sehingga menjadi lapisan bawah.

22. 22. Make a square with the square tool.(background color #666666, width 130, height 50,
positioning 137.2, y positioning 553.4). Buatlah persegi dengan alat persegi. (Latar belakang
warna # 666666, lebar 130, tinggi 50, posisi 137,2, posisi y 553,4).

23. 23. Make this square into a symbol and call it “buttons” Buatlah persegi ini menjadi simbol
dan menyebutnya "tombol"

24. 24. select the square and copy and paste in the same place. pilih persegi dan copy dan paste
di tempat yang sama. To do this while with the square selected press (Ctrl + C) this will copy it
and the press (Ctrl + Shift + V) and this will copy it in the same place now with it still selct it
change the x positioning ( x positioning 269.9 ) Untuk lakukan sementara ini dengan pers yang
dipilih persegi (Ctrl + C) ini akan menyalin dan pers (Ctrl + Shift + V) dan ini akan menyalin di
tempat yang sama sekarang dengan masih selct itu mengubah posisi x (x positioning 269.9)

25. 25. Follow step 24 three more times but each time with a diffrent x positioning. Ikuti langkah
tiga kali 24 lebih tetapi setiap kali dengan posisi x yang berbeda. (x positioning 398.8), (x
positioning 529.6), (x positioning 660.5) it should look something like this. (X positioning
398,8), (x positioning 529,6), (x positioning 660,5) seharusnya terlihat seperti ini.

26. 26. Add some text to the buttons click on the text tool. Tambah teks beberapa klik tombol
pada alat teks. is the one witht the letter “A” right intop of the square tool. adalah satu dengan
huruf "A" intop kanan alat persegi.
27. 27. change the text color just like if you were changing the background color on a square.
mengubah warna teks sama seperti jika Anda mengubah warna latar belakang pada persegi. After
click intop of one of the buttons and type “Home” , then click intop of the second button and
type “portfolio”, on the third button type ” About” on the fourth type “FAQ” and on the last
button type “ontact” Setelah intop klik salah satu tombol dan ketik "Home", kemudian klik intop
dari tombol kedua dan ketik "portfolio", pada jenis tombol ketiga "Tentang" pada jenis keempat
"FAQ" dan pada jenis tombol terakhir "ontact "

29. 29. Make a new layer intop of the buttons layer to do this select the buttons layer and then
click insert layer and it will put a layer intop of it. Buat intop layer baru dari layer tombol untuk
melakukan ini pilih layer tombol dan kemudian klik layer masukkan dan akan menaruh intop
lapisan itu.

30. 30. here we are going to to create a hit areao for the buttons so you can actually click on
them. di sini kita akan membuat areao hit untuk tombol-tombol sehingga Anda benar-benar bisa
klik pada mereka. click on the square tool again and create a square with the color white make
this square about the same size of the buttons klik pada alat persegi lagi dan membuat sebuah
persegi dengan warna putih persegi membuat ini tentang ukuran sama tombol
31. 31. make this square into a symbol but this time instead of making it a movie clip click on the
button selection. membuat persegi menjadi simbol tapi kali ini daripada membuat sebuah klip
video klik pada tombol pilihan.

32. 32. double click inside this symbol and it will look a little diffrent than a movie clip symbol.
double klik di dalam simbol ini dan itu akan terlihat sedikit berbeda dari simbol klip video. i
tsays “Up”, “Over”, “Down”, and “Hit”. tsays i "Up", "Over", "Down", dan "Hit".

33. 33. there is a littel black dot under the text “Up” right click it and dont leg go and just drag it
to where is says hit and now the little black dot should be under the text that says “Hit” ada
sedikit titik hitam di bawah teks "Up" klik kanan dan kaki dont pergi dan hanya tarik ke mana
mengatakan memukul dan sekarang sedikit titik hitam harus di bawah teks yang mengatakan
"Hit"

34. 34. Go back to the main timeline. Kembali ke timeline utama. and the box should look blue
dan kotak akan terlihat biru

35. 35. copy and paste it 4 times and drag each one under on button until all of them have one.
copy dan paste 4 kali dan tarik masing-masing di bawah tombol sampai semua dari mereka
memiliki satu.

36. 36. Now create a layer at the very top click on the square tool and take the stroke off and the
bacgound color black have this settings (width: 304.8, height: 429.1, x positioning: 551.5, and y
positioning: 297.0) Sekarang membuat lapisan di klik paling atas pada alat persegi dan
mengambil dari stroke dan warna hitam bacgound memiliki pengaturan (lebar: 304,8, tinggi:
429,1, posisi x: 551,5, dan posisi y: 297,0)

36. 36. Now select the square and do the following go to the top menu and click on
Modify/Shape/Soften fill edges Sekarang pilih persegi dan melakukan hal berikut ini pergi ke
menu atas dan klik Modify / Bentuk / Lembutkan mengisi tepi
37. 37. a new screen is goingt come up which si going to ask you “distance” , and “number of
steps in both of this put 20 and make sure expand is clicked. layar baru goingt datang yang si
akan meminta Anda "jarak", dan "beberapa langkah di kedua ini 20 meletakkan dan pastikan
memperluas diklik.

38. 38. The next step is important so pay close attention. Langkah selanjutnya adalah penting
agar memperhatikan dekat. if you look where all the layers are to the right there are a bunch of
numbers what you need to do is on the number 30 at the top click and drag down to select all the
layers and the right click and click insert frame. jika Anda melihat di mana semua lapisan berada
di sebelah kanan ada beberapa angka yang perlu Anda lakukan adalah pada nomor 30 di klik atas
dan tarik ke bawah untuk memilih semua lapisan dan klik kanan dan klik frame masukkan.
39. 39. Create two more layers at the very top. Membuat dua lebih lapisan di bagian paling atas.

40. 40. on the very top on the teh time line whre the number 5 is press it dont drag this time and
press (F6) do that a the number 10,15, and 20 di bagian paling atas pada garis whre saat angka 5
adalah tekan dont tarik kali ini dan tekan (F6) melakukan bahwa nomor 10,15, dan 20
41. 41. now on the little sircle on the number one frame select it and press (F9) this will bring up
the actionscript window. sekarang pada sircle kecil di frame nomor satu pilih dan tekan (F9) ini
akan memunculkan jendela actionscript. here type the following “stop();” disini ketik berikut
"stop ();"
42.as you can tell now intop of that littel circle there is a letter “a” this means that there is
actionscrip on that frame. 42.as Anda dapat memberitahu sekarang intop dari lingkaran kecil
terdapat huruf "a" ini berarti bahwa ada actionscrip pada frame itu. now do the same on layer
5,10,15, and 20. sekarang melakukan hal yang sama pada lapisan 5,10,15, dan 20.

43. 43. Ok now press (F6) again on the layers5,10,15, and 20 but this time on the layer right
under. Ok sekarang tekan (F6) lagi pada layers5, 10,15, dan 20 tapi kali ini di sebelah kanan
lapisan bawah.
44. 44. we are going to do something a little diffrent this time we are going to name the little
sircles instead of inserting actionscript. kita akan melakukan sesuatu yang sedikit berbeda kali ini
kita akan nama sircles kecil daripada memasukkan actionscript. do this click on the first frame on
the circle with nothing on it and then go to the bottom left corner and there is something that says
frame there enter the following “home”. melakukan hal ini klik pada frame pertama pada
lingkaran dengan apa-apa di atasnya dan kemudian pergi ke sudut kiri bawah dan ada sesuatu
yang mengatakan frame ada masukkan "rumah" berikut.

45. 45. Now name all the other little circles this shouuld be the names ( portfolio, about, faq, and
contact). Sekarang nama semua kalangan kecil lainnya shouuld ini menjadi nama (portofolio,
tentang, faq, dan kontak).

46. 46. ok now on the layer under what you need to do is to Press (F6) also on frames
5,10,15,and 20. ok sekarang pada lapisan di bawah apa yang perlu Anda lakukan adalah untuk
Tekan (F6) juga pada frame 5,10,15, dan 20. after this you will have a litte black dot on each one
of those. setelah ini Anda akan memiliki litte titik hitam pada setiap satu dari mereka.

47. 47. on the frist frame where the black square was type whatever you want pada frame Frist
mana kotak hitam adalah tipe apapun yang Anda inginkan
48. 48. Now type something diffrently on frames 5,10,15 and 20. Sekarang ketik sesuatu
diffrently pada frame 5,10,15 dan 20.

49. 49. after you have typed everything you wanted on the diffrent squares now its time to make
it all work. setelah Anda telah mengetik semua yang Anda inginkan di kotak yang berbeda
sekarang saatnya untuk membuatnya bekerja semua. what you need to do is to click on the blue
square ontop of the “home button” dont double click it just select it. apa yang perlu Anda
lakukan adalah untuk klik pada ontop persegi biru dari "tombol rumah" dont klik dua kali itu
hanya memilihnya. afte you have it selected press (F9) this will bring up the the actionscript
window type the following afte Anda memilikinya tekan dipilih (F9) ini akan memunculkan
jenis jendela actionscript berikut

on(press){ pada (tekan) {

gotoAndStop(“home”); gotoAndStop ("rumah");

}}
this will make it that when you click on that button it will go to the frame that you named home.
ini akan membuat bahwa ketika Anda klik pada tombol ini akan pergi ke frame yang Anda
bernama rumah. follow the same steps on every blue box but where the parentises are intead of
having home type in the appropiate name. ikuti langkah-langkah yang sama pada setiap kotak
biru tetapi di mana parentises adalah intead memiliki tipe rumah di nama yang tepat. such
as( portfolio, about, faq, and contact. seperti (portofolio, tentang, faq, dan kontak.

50. 50. Now you have finished this simple but very nice looking flash site. Sekarang Anda telah
selesai ini situs flash sederhana namun sangat nice looking. save your work. menyimpan
pekerjaan Anda. and to see it at work press (Ctrl + Enter) to see the swf. dan untuk melihatnya di
tekan kerja (Ctrl + Enter) untuk melihat swf. hope you enjoyed this tutorial. harap anda
menikmati tutorial ini.

51. 51. Alternatively, if you are extremely frustrated with flash and want to save yourself some
time, you can create a free flash website with Wix . Atau, jika Anda sangat frustasi dengan flash
dan ingin Anda bisa menghemat waktu, Anda dapat membuat website flash gratis dengan Wix .
Create a super good looking, professional flash website without any knowledge of flash. Buat
yang baik super tampan, flash website profesional tanpa pengetahuan tentang flash.

Anda mungkin juga menyukai