Pengaruh Tutorial Flash Keren!

Ringkasan

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

Berikut hasil akhir:

Persyaratan

Flash CS3 atau Flash CS4.

Catatan: screenshot dalam tutorial ini dibuat di Flash CS3. Ia bekerja persis sama di Flash CS4.

Langkah 1 - Menginstal efek komponen

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

Langkah 2 - Membuat layer baru

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

Langkah 3 - Membuat latar belakang

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

Pilih frame pertama pada lapisan "bg" dan menggambar bentuk dengan rectangle tool pada kanvas. Pilih persegi panjang dan menyesuaikan pengaturan warna memiliki gradien bagus (Anda juga dapat menggunakan warna lain).

Langkah 4 - Membuat tombol

Pengaruh kubus harus bereaksi secara dinamis dengan keadaan mouse user (rollover / rollout). Cara terbaik adalah praktek TIDAK untuk menambahkan pendengar acara 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 rectangle dan mengubahnya menjadi Button dengan tekan [F8] atau klik kanan pada movieklip -> "Konversikan ke Olahraga ...".

Mengatur nama tombol untuk "BTN" dan pastikan bahwa jenis adalah "Tombol".

Klik dua kali tombol. Sekarang drag keyframe pertama "Up" ke bingkai terakhir "Hit". Hal ini membuat yakin, bahwa tombol akan interaktif, tetapi tidak terlihat.

Dapatkan kembali ke timeline utama dan mengatur nama instance dari tombol untuk "BTN".

Langkah 5 - mulai Buat movieklip

Efek membutuhkan memiliki dua movieklip dimana informasi visual yang diambil dari. Anda sekarang akan membuat movieklip transisi akan mulai dengan.

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

Sekarang mengubah gambar ini ke movieklip dan nama itu "img1".

Menetapkan nama turunan dari "hanya dibuat movieklip untuk img1".

Langkah 6 - Membuat movieklip Akhir

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

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

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

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

Klik dua kali movieklip buat, membuat lapisan kosong yang baru dan menaruh beberapa teks pada lapisan yang baru dibuat.

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

Langkah 7 - Tambahkan rollover ActionScript

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

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 fungsi _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 baru 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 acara rollover ke tombol. Dalam fungsi tersebut "_onOver" (baris 3) Anda pertama kali membuat sebuah instance dari CubeTransitionEffectAS3 sebelum Anda menonaktifkan interaktivitas mouse komponen (baris 4 dan 5). Ingat, tombol yang Anda buat sebelumnya adalah mengurus efek mouse dan Anda tidak ingin mengganggu efek pada.

Dalam jalur 9 akhirnya Anda menginisialisasi efek ( dokumentasi parameter di sini ). Bagian yang penting adalah dua parameter pertama. Anda mendefinisikan bahwa transisi dimulai dengan "img1" dan berakhir dengan "img2".

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

Langkah 8 - ActionScript yang lebih kompleks

OK, dengan kode sebelumnya rollover bekerja dengan baik. Tetapi bagaimana jika Anda juga ingin memiliki fungsi peluncuran yang membalikkan 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");
  berjalan = true;
  ) Else (
  Goin = false;
  goOut = true;
  )
 )

 fungsi _onOut (e: MouseEvent) (
  if (berjalan)! (
  _createAnimation ("keluar");
  berjalan = true;
  ) Else (
  Goin = true;
  goOut = false;
  )
 )

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

  if (pergi) (
  _createAnimation ("keluar");
  ) Else (
  berjalan = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ("di");
  ) Else (
  berjalan = false;
  Goin = false;
  )
 )

 fungsi _createAnimation (dir: String) (
  var myFilter: CubeTransitionEffectAS3 baru 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);
  ) Lain jika (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 membalik arah transisi selama efeknya berjalan. Sebaliknya, Anda dapat "mengingat" aksi pengguna, tunggu sampai efek dilakukan dan menerapkan transisi revers.

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

Fungsi "_createAnimation" (baris 52) adalah fungsi Anda helper awal animasi tergantung dari arah "dir" Anda telah lulus sebagai parameter.

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

Download

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

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