Beranda > Artikel > Tutorial membuat web dengan Flash

Tutorial membuat web dengan Flash

1.     

Tutorial Macromedia Flash

“Pembuatan Web Interaktif dengan Flash MX”

Buka Program Flash MX, kemudian pada panel Properties ubah size = 770 x 600 pixel, dan ubah background menjadi warna hitam, lalu ubah frame rate menjadi 30.

2.      Pada layer 1, buat object “rectangle” dengan ukuran W = 188, H = 418, X = 21.4, Y = 139.3.

3.      Kemudian buat layer baru dan beri nama “mask”, pada frame 1, buat obyek “rectangle” dengan ukuran W=251, H=28, X= -10, Y=104.

4.      Klik pada frame 30, kemudian tekan F6 pada keyboard, lalu ubah ukuran rectangle menjadi W=251, H=471, X=-10, Y=104.

5.      Diantara frame 1 – 30 pada layer “mask”, Anda beri motion shape dengan cara mengubah tween pada panel Properties dengan shape.

6.      Pada layer mask Anda klik kanan kemudian pilih “mask”.

7.      Buat Layer baru dan beri nama “header”.

8.      pada frame 30 Anda tekan F7 pada keyboard, kemudian buat obyek dengan bentuk rectangle dengan ukuran W=10, H=10, X= 21, Y=138.

1.      pada frame 60 Anda tekan F6 pada keyboard, kemudian ubah ukuran garis menjadi W=10, H=10, X= 21, Y=138.

2.      Buat symbol button, dengan cara klik menu Insert à New Symbol à Button dan ubah nama simbol menjadi “Homepage”.

3.      Setelah masuk simbol button, pada frame “UP”, buat rectangle dengan W= 427.9, H=91.5, X=-182, Y=-43, lalu ubah warnanya menjadi warna linear, caranya klik paint bucket tool (K) lalu ubah fill color menjadi linier, untuk menerapkan warna linear klik dalam obyek linear dan drag secara vertical atau horizontal.

4.      Buat Text “homepage” tepat ditengah kotak.

5.      Pada frame “Over” tekan F6 dan ubah warna linear menjadi “orange dan putih”

6.      Pada frame “down” tekan F6 dan ubah warna linear menjadi “merah dan putih”, lakukan langkah ke 14 pada frame “hit”

7.      Buat tombol button satu lagi dengan nama “gallery”, seperti langkah 11 – 14.

8.      Buat layer baru dan beri nama “button”

9.      Drag symbol “homepage” ke stage, kemudian ubah ukuran & posisi sebagai berikut : W=148, H=31, X=38, Y=164,6. Kemudian drag juga Simbol “Gallery” ke stage kemudian ubah ukuran & posisi sebagai berikut : W=148, H=31, X=38, Y=206,6.

10.  Buat layer baru dengan nama “Picture”. Pada frame 61 tekan F6, kemudian buat obyek rectangle dengan ukuran w : 523.1, h : 393, x : 224.6, y : 160.3, ubah warna menjadi gray (abu-abu).

11.  Import file gambar, dengan cara klik menu File à Import à Import to Stage lalu pilih file “riyani.jpg” kemudian klik Open. Setelah itu ubah ukuran menjadi w : 492.8 h : 269.6, x : 240.2, y : 171.8

12.  Kemudian pada frame 90 tekan F6 pada layer “picture”.

13.  Buat layer baru tepat diatas layer “picture”, ubah namanya menjadi “mask picture”

14.  Pada mask picture klik pada frame 61 dan tekan F7, lalu buat rectangle dengan ukuran w : 19.9, h : 19.9, x : 476.9, y : 346.9.

15.  Pada frame 90, tekan F6 dan ubah ukuran “oval” menjadi w : 691, h : 691, x : 158.3, y : – 8.

16.  Pada layer “picture” klik frame 91 dan tekan F7, lalu buat rectangle dengan ukuran w : 523.1, h : 393, x : 224.6, y : 160.3.

17.  Import gambar dengan cara klik menu file à import à import to stage à pilih “irma.jpg” klik “Open”

18.  Ubah ukuran gambar menjadi w : 492.8, h : 369.6, x : 240.2, y : 171.8, setelah itu Anda klik pada frame 115 dan tekan F6 pada keyboard.

19.  Pada layer “mask picture” klik frame 91 dan buat obyek “rectangle” dengan ukuran w : 575, h : 7.6, x : 191.7, y : 350.6.

20.  Klik pada frame 115, lalu tekan F6, kemudian ubah ukuran rectangle dengan ukuran w : 575.1, h : 419.5, x : 191.7, y : 145.3.

21.  Klik pada frame antara 91 – 115 pada layer mask picture, lalu diberi “motion shape” pada panel Properties.

22.  Klik pada layer “mask picture” kemudian klik kanan dan pilih “mask”

23.  Buat layer baru dan ubah nama menjadi “text”

24.  Klik pada frame 35 pada layer text, kemudian tekan F7 pada keyboard.

25.  Pada frame 35 buat obyek text “HOMEPAGE” dengan text “arial black” size : 43, kemudian klik kanan text dan pilih “convert to symbol”, pilih graphic dan klik Ok.

26.  Kemudian klik frame 60 dan tekan F6,

27.  Klik pada frame 30 pilih obyek teks, kemudian pada panel properties ubah color menjadi “Alpha” dan ubah prosentase menjadi 0%, kemudian antara 30 – 60 dan Anda beri “motion tween.”

28.  Klik frame 90 pada layer “text” kemudian tekan F6 pada keyboard.

29.  Klik frame 91 pada layer “text” kemudian tekan F7 pada keyboard.

30.  Buat obyek text “gallery” (type Arial black, 43), ubah positionnya menjadi x : 31739, y : 48.8, kemudian klik kanan text “gallery” dan pilih “convert to symbol”, pilih graphic dan klik Ok.

31.  Kemudian klik frame 60 dan tekan F6

32.  Klik pada frame 30 pilih obyek teks, kemudian pada panel properties ubah color menjadi “Alpha” dan ubah prosentase menjadi 0%, kemudian antara 30 – 60 dan Anda beri “motion tween.”

33.  Buat layer satu lagi kemudian beri nama “action”

34.  Klik pada frame 90 kemudian pilih “panel action” kemudian klik tanda ( + ) kemudian akan muncul pilihan, pilih Global Function à Movie Controller à Stop

35.  Klik pada frame 115, kemudian beri juga action “stop”

36.  Klik pada symbol button “homepage”, kemudian pada panel Action tuliskan action sebagai berikut :

On (release) {gotoAndPlay (1);}

37.  Klik pada symbol button kedua yaitu “Gallery”, kemudian pada panel Action tuliskan action sebagai berikut :

On (release) {gotoAndPlay (91);} 

38.  Setelah semua langkah-langkah selesai maka lakukan “Test Movie” atau dengan cara tekan “Ctrl + Enter”, jika terdapat Comment Dialog, berarti masih terdapat kesalahan pada actionscript yang telah Anda buat.

Kategori:Artikel
  1. roexman
    April 18, 2008 pukul 3:14 pm

    kulonuwun, langsung aja ya…saya ada masalah dengan flash untuk web, sebenarnya sangat menarik untuk web interkatifnya sih!… tapi saya udah mencoba membuatnya, misal untuk halaman depan dan kedua, serta udah melakun tes movie dan plubiser karena tes script nya udah gak ada yang eror, tetapi kenapa kok waktu dicoba dijalankan file HTML nya untuk halaman depan bisa preview..kemudian saya klik button untuk halaman kedua ….bisa conec tapi tidak bisa preview halam kedua…demikian masalah saya mungkin ada yang bisa kasih saran

    terimaksih

    roexman

  2. Mei 26, 2008 pukul 2:41 pm

    saya minta tutorial membuat presentasi dengan flash donk…

  3. Januari 14, 2009 pukul 8:41 pm

    thanks mas buat tutorialnya….

    mau di coba dulu deh

  4. sardhi
    Januari 16, 2009 pukul 2:13 pm

    mas,mohon izin cpoi tutornya…
    thanks ya…

  5. Agus Setia Budiawan
    Januari 27, 2009 pukul 4:59 pm

    Mas, minta turtorialnya donk?
    thks sebelumnya

  6. Ahmad Fauzi
    Maret 31, 2009 pukul 1:43 pm

    askum wr wb n slmt braktivitas all..

    slm knl’y di w..!!

    ehm, tuan rumah tolong dox ksh contohnya byr tmbh lebih jlas lg ych…!!!!
    Al’y klo cm materi doax tnpa gambar gk bs br jln dgn smpurna cuy..!!!

    Makach….!!!1

  7. Juni 26, 2009 pukul 9:17 am

    makasih infonya… mas mau tanya, kalo bikin website kayak yang di transformersmovie.com itu gimana ya? keliatan keren banget websitenya…

  8. Juli 10, 2009 pukul 6:34 pm

    trims dan sangat bermanfaat bg saya

  9. Oktober 31, 2009 pukul 8:23 pm

    ra ceto mas , sing enek gambare ngunu , gen gayeng

  10. masrur
    November 7, 2009 pukul 10:24 pm

    untuk kritik dan saran, silahkan posting comment anda

  11. miftah
    Desember 25, 2009 pukul 12:22 am

    boleh juga tutorialnya tapi klo bleh usul bisa dikasih contoh jg biar tambah jelas… trims..

  12. Wansyah
    Januari 23, 2010 pukul 11:16 am

    Askum. Mas minta tolong ni ada ga’ tutor untuk membuat e-learning gtu? Low ada krm donk mas..ke

    diofriendly@yahoo.com

    makasih

  13. Februari 2, 2010 pukul 6:02 pm

    ada gak ya web yang instannya???????????????? tapi menggunakan flashhhhhhhh???????????

  14. bowo
    Maret 11, 2010 pukul 9:07 pm

    keren boz, sesampainya dirumah nanti akan segear ku coba…

    bisa tuker link juga bozz dgn http://bowol.blogspot.com/

  15. mus
    Mei 9, 2010 pukul 9:25 am

    thanksss!!!

  16. imron hamzah
    Mei 29, 2010 pukul 10:03 pm

    mas saya anggota baru dalam forum ini . . . . mas boleh mintak tutorialnya buat web di flash????

  17. Juni 11, 2010 pukul 6:00 pm

    Gak Jelas……….Tolong Tampilkan Hasilnya….atau gambar pembuatan flash dari proses pertama sampai akhir..

  18. widi
    November 16, 2010 pukul 12:33 pm

    Buat tmn2 yang webnya udah jadi.
    Silahkan pelajari cara2 memasukkan webnya ke Google.com
    Kunjungi za website http://www.widtama.com
    Terimaksh, semoga info ini bermanfaat bwt kita semua.

  19. alhe
    Februari 3, 2011 pukul 9:20 pm

    bingung w ni gan,,,,
    tapi penasaran

  20. Mei 9, 2011 pukul 4:23 pm

    Makasih infonya….
    walau agag sedikit puyeng.. hehe.

  21. Juni 4, 2011 pukul 7:35 pm

    thanxz infonya gan . .

    saya coba dulu

  22. latif
    Juni 23, 2011 pukul 10:43 am

    izin sedot gan…
    thank infonya

  23. Desember 5, 2011 pukul 4:09 pm

    nice info.
    terima kasih.

  24. Januari 11, 2012 pukul 7:12 pm

    kakak minta tutorialnya untuk pembuatan web dari flash donk?
    thank

  25. Januari 11, 2012 pukul 7:13 pm

    kakak bagaimana membuat menu dropdown pada flash?
    thank

  26. Januari 24, 2012 pukul 5:14 pm

    setelah web jadi kalo mengunakan flash apakah bisa di hosting??
    kalo bisa gmna caranya?

  27. ana
    Mei 8, 2012 pukul 1:37 pm

    tanya donk kl mau buat animasi membuka buku dari halaman 1 ke halaman berikutnya gmn ya ???

  28. Mei 16, 2012 pukul 12:45 pm

    Thz atas tutorialnya ….

    Bagi sobat yg mau tau tutorial lengkap tentang flash… ada video nya juga ..

    kunjungi situs http://www.asastudio.org dijamin freeeeee

    semoga bermanfaat..

  29. blogsae
    Desember 16, 2012 pukul 11:59 am

    kalo web flas bisa bikin halaman administratornya tidak…? atau menggunakan seo biar bisa di cari di bah google….? thank

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: