Membuat Panning Situs Web Dalam Flash

A+ A-

Anda mungkin telah melihat beberapa situs panning di Flash. Mereka seperti website biasa, tapi dengan user interface halus. Ketika Anda mengklik pada link di website, gulungan halaman yang tepat dengan konten secara otomatis, bukan loading halaman web dengan konten. Hal ini disebut sebagai panning. Sangat mudah untuk menerapkan efek ini di website.
Anda dapat membuat website sederhana dengan efek panning dengan mudah di Flash. Tutorial ini mengharuskan Anda untuk tahu tentang MovieClips, Buttons, dan ActionScript 3.0. Ini memberi Anda petunjuk sederhana untuk memberikan efek panning pada sebuah website sederhana di Flash.

Mulai

  • Langkah 1: Buat dokumen ActionScript 3.0 baru di Flash
  • Langkah 2: Sekarang tekan Ctrl + J
  • Langkah 3: Mengatur ukuran tahap preferensi Anda. Dalam tutorial ini, kita akan menggunakan ukuran 1024 × 600. Sekarang Anda perlu membuat tombol.

membuat tombol

  • Langkah 1: Gunakan insert di Flash untuk membuat sebuah tombol. Anda dapat membuat tombol desain Anda. Dalam tutorial ini, kita akan menggunakan tombol persegi panjang.
  • Langkah 2: Buat sebanyak tombol yang Anda inginkan dan memberi mereka contoh nama sehingga mereka dapat digunakan dalam ActionScript 3.0. Artinya, home_btn, about_btn, contact_btn untuk tiga tombol pada gambar di bawah.

    Mengklik pada salah satu dari 3 tombol di gambar, harus segera menampilkan konten dengan efek panning. Untuk ini, strip dari konten adalah pilihan yang lebih baik. Jadi, ketika Anda mengklik sebuah tombol, strip akan bergulir ke samping untuk menunjukkan konten. Untuk ini, Anda perlu membuat movieklip.

Klip film

  • Langkah 1: Buat MovieClip dengan lebar 1024 (lebar jendela)
  • Langkah 2: Berikan ketinggian klip preferensi Anda dan nama klip video sebagai 'content_mc'

Kode

  • Langkah 1: Buat layer baru untuk ActionScript sehingga memberikan kode
  • Langkah 2: Salin dan paste kode yang mengikuti
    impor fl.transitions.Tween;
    mengimpor fl.transitions.easing *.;

    home_btn.addEventListener (MouseEvent.CLICK, panContent);
    about_btn.addEventListener (MouseEvent.CLICK, panContent);
    contact_btn.addEventListener (MouseEvent.CLICK, panContent);

    Fungsi panContent (EVT: MouseEvent) {
    var BUTTONNAME: String = evt.target.name;
    switch (BUTTONNAME) {
    Kasus "home_btn":
    Tween baru (content_mc, "x", Strong.easeOut, content_mc.x, 0,1, true);
    istirahat;
    Kasus "about_btn":
    baru Tween (content_mc, "x", Strong.easeOut, content_mc.x, -1024,1, true);
    istirahat;
    Kasus "contact_btn":
    baru Tween (content_mc, "x", Strong.easeOut, content_mc.x, -2048,1, true);
    istirahat;
    }
    }

    Catatan: Dua baris pertama dari kode impor Tween dan kelas Mempermudah untuk klip video. Tiga baris selanjutnya adalah acara pendengar, sehingga tombol merespon untuk acara kali klik. Setiap kali pengguna mengklik salah satu tombol, fungsi event akan dieksekusi. Sisa kode untuk fungsi pan. Artinya, untuk acara kali klik, fungsi pan ini akan dieksekusi. The 'Beralih' akan melakukan fungsi yang berbeda untuk masing-masing tombol.

Sekarang halaman perlu dipublikasikan.

Menerbitkan halaman di HTML

  • Langkah 1: Pilih Publish Settings dan pergi ke tab HTML di kotak dialog
  • Langkah 2: Pilih 'flash Hanya' untuk template dan pastikan kotak centang di kanan bawah itu tidak dicentang
  • Langkah 3: Berikan 100 x 100 persen dimensi setelah memilih 'Persen'
  • Langkah 4: Dalam Playback, periksa 'menu Tampilan' dan 'loop' kotak centang
  • Langkah 5: Pilih 'High' untuk kualitas, 'Window' untuk mode Window dan 'Default' untuk penyelarasan HTML
    Langkah 6: Pilih 'No Skala' untuk Skala
  • Langkah 7: Pilih 'Pusat' untuk kedua keberpihakan flash Horizontal dan Vertikal
  • Langkah 8: Periksa kotak centang 'Tampilkan pesan peringatan' dan kemudian klik tombol OK
  • Langkah 9: Sekarang 'Publish' flash dan menjalankan HTML. Jika ukuran layar lebih lebar 1024 piksel, maka Anda akan melihat konten tambahan dalam strip panning, bukan hanya melihat 'Home'. Untuk menghindari hal ini,
  • Langkah 10: Terapkan masker selama Konten lapisan dari Options

Kesimpulan

Efeknya ditambahkan ke halaman web. Klik pada salah satu dari tiga tombol di halaman web setelah menjalankan untuk melihat ke samping jalur bergulir untuk menunjukkan konten. Anda dapat men-tweak metode ini secara kreatif untuk membuatnya lebih menarik.