Ringkasan

Dalam tutorial ini Anda akan belajar cara membuat efek transisi kubus mouse rollover.

Sini hasil akhir:


Persyaratan

Flash CS3 atau Flash CS4.

Catatan: screenshot dalam tutorial ini dibuat di Flash CS3. Cara kerjanya sama persis di Flash CS4.

Langkah 1 - Install komponen efek

Membeli Efek Transisi Cube di sini. Silakan ikuti petunjuk instalasi dan tarik komponen komponen dari panel ke perpustakaan Anda. Fla file.

Drag komponen ke dalam perpustakaan

Langkah 2 - Membuat layer baru

Untuk menjaga hal-hal rapi Anda harus membuat layer baru pada timeline utama dan memberinya nama. Lakukan hal ini seperti yang ditunjukkan pada gambar di bawah.

Buat lapisan pada timeline utama

Langkah 3 - Membuat latar belakang

Sekarang Anda membuat latar belakang dengan gradien. Meskipun hal ini tidak diperlukan untuk membuat efek pekerjaan itu menunjukkan bahwa efek transparan juga bekerja sama dengan konten (lebih pada nanti).

Pilih frame pertama dalam "bg" lapisan dan menggambar bentuk persegi panjang dengan alat di kanvas. Pilih persegi panjang dan menyesuaikan pengaturan warna untuk have a nice gradien (Anda juga dapat menggunakan warna lain).

Buat bentuk latar belakang

Pengaturan warna gradien

Langkah 4 - Membuat tombol

Efek kubus harus bereaksi secara dinamis untuk para pengguna mouse negara (rollover / rollout). Ini adalah praktek terbaik TIDAK untuk menambahkan acara pendengar untuk efek itu sendiri dan bukan menggunakan "kosong" tombol.

Klik frame pertama pada layer "btn", dan menggambar persegi panjang dengan ukuran kanvas (warna tidak mater sejak tombol tidak akan terlihat). Pilih persegi panjang dan mengubahnya menjadi sebuah Button dengan [tekan F8] atau klik kanan pada movieklip -> "Convert to Symbol ...".

Convert bentuk untuk tombol

Mengatur nama tombol untuk "btn" dan pastikan bahwa jenis "Button".

Set tombol nama

Double-klik tombol. Sekarang drag keyframe pertama "Up" ke frame terakhir "Hit". Hal ini membuat yakin, bahwa tombol akan interaktif, tetapi tidak terlihat.

Ubah tombol keyframe dalam

Kembali ke timeline utama dan menetapkan nama contoh tombol untuk "btn".

Set nama misalnya tombol

Langkah 5 - Membuat mulai movieklip

Memerlukan efek memiliki dua movieklip di mana informasi visual yang diambil dari. Anda sekarang akan menciptakan transisi movieklip akan mulai dengan.

Klik pada frame pertama pada layer "img1". Impor gambar dengan ukuran kanvas dengan menekan [tekan Ctrl-R] atau "File" -> "Impor" -> "Impor on Stage ...".

Impor gambar

Sekarang mengubah gambar ini untuk sebuah movieklip dan nama itu "img1".

Konversi foto ke movieklip

Nama set movieklip

Mengatur nama contoh saja membuat movieklip untuk "img1".

Set nama misalnya

Langkah 6 - Buat Akhir movieklip

Akhir movieklip akan berisi teks daripada gambar. The mencapai ini, Anda akan memerlukan pendekatan yang sedikit berbeda.

Pilih bingkai pertama dari lapisan "img2" (ok, nama buruk, jangan ragu untuk benar bahwa ) ) Dan menggambar persegi panjang dengan ukuran kanvas. Anda ingin memastikan bahwa Akhir movieklip memiliki dimensi yang sama seperti movieklip Awal. Thats why anda pertama kali menggambar bentuk yang tak terlihat dengan ukuran yang sama movieklip Awal.

Menggambar bentuk

Pilih bentuk dan menetapkan nilai alpha ke 0 (bentuk masih ada tapi tak terlihat).

Set bentuk alfa

Mengubah bentuk ke movieklip [tekan F8] atau klik kanan pada movieklip -> "Convert to Symbol ..." dan nama itu "img2".

Convert to movieklip

Klik dua kali movieklip baru saja dibuat, buat layer kosong baru dan meletakkan beberapa teks pada lapisan yang baru dibuat.

Menambahkan teks ke movieklip

Kembali ke timeline utama dan menetapkan nama contoh movieklip untuk "img2".

Set nama misalnya

Langkah 7 - Tambahkan rollover ActionScript

Pilih layer "script" dan membuka "Tindakan" jendela dengan "Windows" -> "Tindakan" atau [tekan F9].

Buka jendela ActionScript

Jika Anda hanya ingin memiliki transisi di rollover (dan tidak kembali-transisi pada peluncuran) salin baris berikut ke kode jendela. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 fungsi _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  myFilter.init (img1, img2, 75, "l-> r", 2, "easeInOutCubic", false);
 )

Pada baris pertama Anda menambahkan pendengar untuk mendata aktivitas pengalihan tombol. Dalam fungsi "_onOver" (baris 3) pertama kali membuat turunan dari CubeTransitionEffectAS3 sebelum Anda menonaktifkan mouse interaktivitas dari komponen (baris 4 dan 5). Ingat, tombol yang Anda buat sebelumnya adalah mengurus efek mouse dan Anda tidak ingin efek mengganggu itu.

Pada jalur 9 akhirnya Anda menginisialisasi efek (dokumentasi dari parameter di sini). Bagian yang penting adalah dua parameter pertama. Anda menetapkan bahwa transisi dimulai dengan "img1" dan diakhiri dengan "img2".

Ekspor file fla Anda. Seperti yang Anda lihat, efek komponen bekerja sempurna dengan latar belakang transparan "img2".

Langkah 8 - Lebih kompleks ActionScript

OK, dengan kode sebelumnya yang rollover bekerja dengan baik. Tetapi bagaimana jika Anda juga ingin memiliki fungsi yang membalikkan peluncuran transisi dari "img2" untuk "img1? Untuk mencapai bahwa Anda memerlukan kode yang lebih kompleks. Hapus script dan masukkan berikut ini: 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 var berjalan = false;
 var goin = false;
 var goOut = false;

 fungsi _onOver (e: MouseEvent) (
  if (! berjalan) (
  _createAnimation ( "di");
  berlari = true;
  ) else (
  goin = false;
  goOut = true;
  )
 )

 fungsi _onOut (e: MouseEvent) (
  if (! berjalan) (
  _createAnimation ( "keluar");
  berlari = true;
  ) else (
  goin = true;
  goOut = false;
  )
 )

 fungsi _inAnimationDone (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (goin) (
  _createAnimation ( "keluar");
  ) else (
  berlari = false;
  goOut = false;
  )
 )

 fungsi _outAnimationDone (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ( "di");
  ) else (
  berlari = false;
  goin = false;
  )
 )

 fungsi _createAnimation (dir: String) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  if (dir == "dalam") (
  myFilter.init (img1, img2, 24, "l-> r", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) else if (dir == "keluar") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Ini penting untuk mengetahui, bahwa Anda TIDAK dapat mengubah arah transisi selama efek sedang berjalan. Sebaliknya Anda dapat "mengingat" tindakan pengguna, tunggu sampai efek dilakukan dan menerapkan revers transisi.

Variabel "pergi" dan "goOut" (baris 5 dan 6) digunakan untuk tujuan itu. Anda menetapkan mereka ketika fungsi "_onOver" dan "_onOut" (baris 8 dan 18) yang dieksekusi. Tapi hanya jika var berjalan adalah benar, kalau itu palsu (baris 9 dan 19), Anda memulai transisi langsung (baris 10 dan 20).

Fungsi "_createAnimation" (baris 52) adalah fungsi penolong Anda yang memulai animasi tergantung dari arah "dir" Anda lulus sebagai parameter.

Perhatikan bahwa setelah menyebut "removeFilter" metode (baris 29 dan 41) baik movieklip Awal dan Akhir movieklip ditetapkan untuk terlihat (keluar dari efek). Thats why Anda menetapkan visibilitas movieklip - transisi dimulai dengan - untuk palsu (baris 30 dan 42).

Hasil akhir

Unduh

Klik di sini untuk men-download fla dari tutorial ini. Catatan:. Fla tidak mencakup komponen efek. Dalam rangka untuk membuat fla bekerja, Anda perlu membeli Cube Efek Transisi di sini.

Di sini Anda dapat menemukan sebuah video tutorial tentang cara menerapkan efek yang berbeda.

  • Share / Bookmark