Cool Flash Hiệu quả Hướng dẫn!

Tóm tắt

Trong hướng dẫn này bạn sẽ học cách để tạo ra một hiệu ứng chuyển khối lập phương trên rollover chuột.

Đây là kết quả cuối cùng:

Yêu cầu

Flash CS3 hoặc Flash CS4.

Lưu ý: ảnh chụp màn hình trong hướng dẫn này được thực hiện trong Flash CS3. Nó hoạt động giống hệt nhau trong Flash CS4.

Bước 1 - Cài đặt các thành phần có hiệu lực

Mua chuyển Cube có hiệu lực ở đây . Xin vui lòng làm theo các hướng dẫn cài đặt và kéo các thành phần từ các thành phần của bảng điều khiển vào trong thư viện của bạn. file fla.

Bước 2 - Tạo một lớp mới

Để giữ cho mọi thứ ngăn nắp bạn nên tạo một layer mới trên chính thời gian và cung cấp cho nó một cái tên. Làm điều này như thể hiện trên ảnh chụp màn hình dưới đây.

Bước 3 - Tạo nền

Bây giờ bạn tạo ra một nền tảng với một gradient. Mặc dù điều này là không cần thiết để làm cho công việc hiệu quả nó cho thấy rằng hiệu ứng cũng làm việc với nội dung minh bạch (nhiều hơn về điều này sau).

Chọn frame đầu tiên trong lớp "" bg và vẽ một hình dạng với các công cụ hình chữ nhật trên tấm bạt. Chọn hình chữ nhật và điều chỉnh các cài đặt màu sắc để có một gradient tốt đẹp (bạn cũng có thể sử dụng bất kỳ màu nào khác).

Bước 4 - Tạo nút

Các hiệu ứng khối lập phương phải phản ứng tự động cho nhà nước sử dụng chuột (rollover / triển khai). Cách tốt nhất là thực hành không để thêm người nghe sự kiện vào các hiệu ứng riêng của mình và thay vào đó sử dụng một "khoảng trống" nút.

Click vào frame đầu tiên trong lớp "BTN" và vẽ một hình chữ nhật với kích cỡ của canvas (màu sắc không mater từ nút sẽ không được hiển thị). Chọn hình chữ nhật và chuyển nó sang một Nút với [nhấn F8] hoặc phải bấm vào MovieClip -> "Convert to Symbol ...".

Đặt tên của nút để "BTN" và chắc chắn rằng loại là "Button".

Click đôi vào nút. Bây giờ kéo các khung hình chính đầu tiên "Up" vào khung cuối cùng "truy cập". Điều này làm cho chắc chắn, rằng các nút sẽ được tương tác nhưng không nhìn thấy được.

Quay về chính thời gian và đặt tên dụ của nút để "BTN".

Bước 5 - Tạo bắt đầu MovieClip

Hiệu ứng nhu cầu có hai MovieClip nơi các thông tin hình ảnh được lấy từ. Bây giờ bạn sẽ tạo ra các MovieClip sự chuyển tiếp sẽ bắt đầu với.

Nhắp chuột vào frame đầu tiên trên lớp "img1". Nhập một hình ảnh với kích thước của tấm bạt bằng cách nhấn [nhấn Ctrl-R] hoặc "File" -> "Import" -> "Nhập vào giai đoạn ...".

Bây giờ chuyển đổi hình ảnh này vào một MovieClip và đặt tên là "img1".

Đặt tên dụ của các chỉ cần tạo ra MovieClip tới "img1".

Bước 6 - Tạo MovieClip End

The End MovieClip sẽ chứa văn bản thay vì một hình ảnh. Việc đạt được điều này bạn sẽ cần một cách tiếp cận hơi khác nhau.

Chọn frame đầu tiên của lớp "img2" (ok, xấu đặt tên, cảm thấy tự do để sửa mà ) Và vẽ một hình chữ nhật với kích cỡ của canvas. Bạn muốn đảm bảo rằng các MovieClip cuối cùng có kích thước giống như các MovieClip Start. Thats lý do tại sao bạn đầu tiên vẽ một hình dạng vô hình với kích thước giống như các MovieClip Start.

Chọn hình dạng và thiết lập giá trị alpha đến 0 (hình dạng vẫn còn đó nhưng vô hình).

Chuyển đổi hình dạng cho một [MovieClip] F8 báo chí hoặc kích chuột phải vào MovieClip -> "Convert to Symbol ..." và đặt tên là "img2".

Click đôi vào MovieClip chỉ cần tạo ra, tạo một layer mới và đặt một số trống rỗng, văn bản trên là lớp vừa được tạo ra.

Trụ lại cho chính thời gian và đặt tên instance của MovieClip tới "img2".

Bước 7 - Thêm rollover ActionScript

Chọn layer "kịch bản" và mở "hành động" cửa sổ với "Windows" -> "Hành động" hoặc] nhấn F9 [.

Nếu bạn chỉ đơn giản muốn có một sự chuyển tiếp về rollover (và không có, lại chuyển về triển khai) sao chép các dòng sau vào cửa sổ code.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 chức năng _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);
 )

Trong dòng đầu tiên bạn thêm người nghe sự kiện rollover để nút. Trong chức năng "_onOver" (dòng 3) trước tiên bạn tạo một thể hiện của CubeTransitionEffectAS3 trước khi bạn vô hiệu hóa các tương tác chuột của thành phần (dòng 4 và 5). Hãy nhớ rằng, các nút mà bạn tạo ra trước đó là chăm sóc của các hiệu ứng chuột và bạn không muốn ảnh hưởng can thiệp vào đó.

Trong dòng 9 cuối cùng bạn khởi tạo có hiệu lực ( tài liệu của các tham số ở đây ). Phần quan trọng là hai tham số đầu tiên. Bạn xác định rằng quá trình chuyển đổi bắt đầu với "img1" và kết thúc với "img2".

Xuất khẩu tập tin của bạn fla. Như bạn thấy, các thành phần có hiệu lực hoạt động hoàn hảo với nền trong suốt của "img2".

Bước 8 - thêm phức tạp ActionScript

OK, với mã trước đó tái đầu tư các công trình tốt. Nhưng nếu bạn cũng muốn có một chức năng triển khai đảo ngược sự chuyển tiếp từ "img2" để "img1"? Để đạt được điều đó bạn cần có một mã phức tạp hơn. Xóa các tập lệnh và chèn như sau:

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

 var chạy = false;
 var Goin = false;
 var goOut = false;

 chức năng _onOver (e: MouseEvent) (
  if (chạy)! (
  _createAnimation ("ở");
  chạy = true;
  ) Else (
  Goin = false;
  goOut = true;
  )
 )

 chức năng _onOut (e: MouseEvent) (
  if (chạy)! (
  _createAnimation ("out");
  chạy = true;
  ) Else (
  Goin = true;
  goOut = false;
  )
 )

 chức năng _inAnimationDone (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (Goin) (
  _createAnimation ("out");
  ) Else (
  chạy = false;
  goOut = false;
  )
 )

 chức năng _outAnimationDone (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ("ở");
  ) Else (
  chạy = false;
  Goin = false;
  )
 )

 chức năng _createAnimation (dir: String) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  if (dir == "trong") (
  myFilter.init (img1, img2, 24, "l-> r", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Khác nếu (dir == "out") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Điều quan trọng cần biết, mà bạn không thể đảo ngược theo hướng chuyển đổi trong quá trình thực hiện đang chạy. Thay vào đó bạn có thể "nhớ" những hành động của người sử dụng, đợi cho đến khi có hiệu lực được thực hiện và áp dụng các chuyển tiếp revers.

Các biến "Goin" và goOut "" (dòng 5 và 6) được sử dụng cho mục đích đó. Bạn đặt chúng khi chức năng "_onOver" và _onOut "" (dòng 8 và 18) được thực hiện. Nhưng chỉ khi var chạy là đúng, nếu nó sai (dòng 9 và 19), bạn bắt đầu việc chuyển đổi ngay lập tức (dòng 10 và 20).

Chức năng "_createAnimation" (dòng 52) là chức năng của bạn helper khi bắt đầu các hình ảnh động phụ thuộc vào hướng "dir" bạn thông qua như là tham số.

Chú ý rằng sau khi gọi removeFilter "" phương pháp (dòng 29 và 41) cả MovieClip Start và End MovieClip được thiết lập để có thể nhìn thấy (trong số các hiệu ứng). Thats lý do tại sao bạn thiết lập khả năng hiển thị MovieClip - sự chuyển đổi bắt đầu với - dòng (sai 30 và 42).

Tải về

Click vào đây để tải về các fla của hướng dẫn này. Lưu ý:. Fla không bao gồm các thành phần có hiệu lực. Để thực hiện công tác fla, bạn cần phải mua các hiệu ứng chuyển tiếp Cube ở đây .

Tại đây bạn có thể tìm thấy một video hướng dẫn về cách thực hiện một tác dụng khác nhau .