July 14, 2024

Cara Membuat Tombol Rollover dan Rollout

2 min read

Dalam pembuatan web biasanya kita menambahkan animasi untuk memperindah tampilan web kita. Kita dapat menambahkan animasi, untuk membuat animasi tersebut bisa menggunakan swishmax, dengan mengimpor file tersebut dalam bentuk HTML+SWF, apabila animasi telah dimasukkan ke web kita bisa mengatur animasi yang dibuat itu yaitu saat kursor berada di atasnya animasi tersebut berhenti tapi saat kursor tidak berada di atas animasi, animasinya bergerak/jalan lagi. Nah disini bisa menggunakan yang namanya Rollover dan Rollout.

Rollover merupakan pengertian dari ketika kursor berada di atas atau di area animasi, sedangkan Rollout merupakan kursor berada di luar atau tidak di area animasi.

Langkah 1

Buatlah animasi yang akan ditambahkan pada web, misalnya membuat animasi seperti iklan untuk web yang telah buat, pada saat menambahkan efek dan ingin efek itu jalan terus menerus jadikan objek yang akan diberi efek itu sprite kemudian di panel sprite non aktifkan stop playing at end sprite.

Langkah 2

Setelah dibuat objek dan efek yang diinginkan, untuk membuat agar animasi dalam keadaaan Rollover tambahkan script di bagian scene. Caranya dengan cara klik script yang ada di samping layout: scene1

Di jendela script klik add script -> event -> button -> on (rollover), kemudian klik lagi add script -> movie control -> stop()

Maka akan muncul tampilan isi dari script :

Langkah 3

Setelah rollover ditambahkan rollout, caranya sama seperti menambahkan script di rollover tadi yaitu : add script -> event -> button -> on (rollout), kemudian klik lagi add script -> movie control -> play(), maksud play yaitu apabila kursor tidak berada di area animasi maka animasi tersebut akan jalan lagi.

Langkah 4

Untuk memasukkan animasi yang telah dibuat tadi ke aplikasi untuk membuat web, terlebih dahulu diimport dulu ke dalam bentuk HTML + SWF

Langkah 5

Setelah di import ke dalam bentuk HTML + SWF baru masukkan ke dalam web. Ambillah kode html mulai dari <object>รขโ‚ฌยฆ</object> lalu sisipkan di dalam web yang sedang dibuat.

Selamat mencoba.

0 thoughts on “Cara Membuat Tombol Rollover dan Rollout

  1. yhaa.. keduluan.. asalnya mo bikin materi yang sama tapi pake Flash.. yo sudahlah agak jauhan dikit bikinnya..

  2. eh.. ini rollover untuk animasi ye? kirain tombol rollover = popup menu.. hmm.. beda berarti.. ๐Ÿ˜€

  3. perasaan dulu waktu aku di 1tahun palcomtech memang diajarke buat yang cak ini…sudah umum nean…payo pak anggi keluarkan yang lebih canggih biar nambah ilmu…

  4. *v3: nah vit.. dengerlah kato pengamat tu.. sapolah wong tu..

    *pengamat: mungkin sudah umum.. tapi saya sendiri masih gak tau toh.. ๐Ÿ™‚

  5. jadi fungsi animasi ini sebenarnyo untuk apa ya sebenar nya ?

    *animasi untuk memperindah tampilan web

    kalau di pake bukan untuk itu deh, kalau dak salah untuk banner/iklan di web kali ya.

    maaf hanya mengkoreksi aja. setuju.

  6. @pengamat:emang d ajarin tpi g smuany jga yg tw..Q trinspirasi untuk buat tutor ini cz pas siswa sidang ada yg g bs buat gnian,,jdi yah mungkin hanya u/ mengingatkan kembali aja k meraka..
    tu aja koq..
    namanya juga berbagi..

    @pK Anggi..
    hoho,,y paK..

    @Father : y

  7. @Pengamat : Kalo ngerasa kurang canggih, kita tunggu tutorial anda yang lebih ok ๐Ÿ˜‰

    @Raise : Mari pak, saya juga menunggu tulisan bapak tentang website ๐Ÿ˜‰ talk less do more ๐Ÿ™‚

    @Fitri : Tetaplah menulis, nice tutorial, dengan berbagi.. ilmu anda akan semakin banyak ๐Ÿ˜‰
    thanks, salam kenal ๐Ÿ™‚

  8. @mbak v3 keren2 mbak tutorialnyo…
    mokaseh mbak infonyo…web we jgo pake animasi n2…kke berkat ajaran mbak…
    @pak anggi
    hehhehe
    pak keluarkan jurus2 pak yng lain…ditunggu tutorial yo lagi…
    @pak rais
    bener nan pak
    @pengamat…
    hohoho aq belajar 1 tahun tapi lum diajari materi n2…
    mungkin anda harus keluarkan tutorial anda yng lebih canggih biar kmi bisa blajar
    heheheh

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.