Tóm lược

Trong bài này bạn sẽ học cách để tạo ra một hiệu ứng chuyển tiếp vào khối 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 Transition Cube Effect ở đâ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ừ bảng thành phần vào thư viện của file fla. Bạn.

Kéo thành phần vào thư viện

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

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

Tạo lớp trên dòng thời gian chính

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

Bây giờ bạn tạo 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 để thực hiện các công việc có hiệu lực nó cho thấy tác dụng cũng làm việc với nội dung minh bạch (thêm về điều này sau).

Chọn khung đầu tiên trong bg "" lớp và vẽ một hình dạng với công cụ hình chữ nhật trên vải này. 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 đẹp (bạn cũng có thể sử dụng bất kỳ màu sắc khác).

Tạo hình nền

Màu gradient thiết lập

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

Hiệu quả khối nên phản ứng tự động cho nhà nước chuột người sử dụng (rollover / buổi giới thiệu). Nó là không thực hành tốt nhất để nghe thêm sự kiện vào các hiệu lực bản thân và thay vì sử dụng một "trống" nút.

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

Chuyển đổi hình dạng nút

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

Đặt tên của nút

Double-click vào nút. Bây giờ kéo keyframe đầu tiên "Up" vào khung cuối "Hit". Điều này làm cho chắc chắn, đó nút sẽ được tương tác, nhưng không nhìn thấy được.

Thay đổi keyframe bên trong nút

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

Ví dụ đặt tên của nút

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

Hiệu ứng các nhu cầu có hai MovieClip nơi các thông tin thị giác đượ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.

Bấm vào khung đầu tiên trên lớp "img1". Nhập một hình ảnh với kích thước của canvas bằng cách nhấn Ctrl nhấn [-R] hay "File" -> Nhập "" -> "nhập khẩu trên sân khấu ...".

Nhập khẩu hình ảnh

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

Chuyển đổi hình ảnh để MovieClip

Đặt tên của MovieClip

Đặt tên instance của MovieClip để vừa tạo "img1".

Ví dụ đặt tên

Bước 6 - Tạo Cuối MovieClip

Các MovieClip Cuối 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, đặt tên xấu, cảm thấy tự do để sửa mà :) ) Và vẽ một hình chữ nhật với kích thước của canvas. Bạn muốn bảo đảm rằng các MovieClip Cuối có kích thước tương tự như các MovieClip Bắt đầu. Thats tại sao trước tiên bạn vẽ một hình dạng vô hình có kích thước tương tự như các MovieClip Bắt đầu.

Vẽ hình

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).

Set alpha của hình

Chuyển đổi hình dạng một F8 MovieClip nhấn [] hay nhấn chuột phải vào MovieClip -> "Convert to Symbol ..." và đặt tên là "img2".

Convert to MovieClip

Click đúp vào MovieClip vừa tạo, tạo ra một lớp mới có sản phẩm nào và đưa một số văn bản trên là lớp vừa được tạo ra.

Thêm văn bản vào MovieClip

Trụ trở lại timeline chính và đặt tên instance của MovieClip để "img2".

Ví dụ đặt tên

Bước 7 - Thêm rollover ActionScript

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

Mở cửa sổ ActionScript

Nếu bạn chỉ đơn giản muốn có một quá trình chuyển đổi trên rollover (và không có back-chuyển tiếp vào buổi giới thiệu) sao chép các dòng sau vào cửa sổ mã. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 chức năng _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = mới CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

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

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

Trong dòng 9 cuối cùng bạn khởi động có hiệu lực (tài liệu của các tham số ở đây). Các 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 bằng "img2".

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

Bước 8 - phức tạp hơn ActionScript

OK, với mã trước rollover các công trình chỉ cần sử dụng tốt. Nhưng nếu bạn cũng muốn có một buổi giới thiệu có chức năng đảo ngược quá trình chuyển đổi từ "img2" để "img1"? Để đạt được điều đó bạn cần một mã phức tạp hơn. Xóa và chèn đoạn mã sau đây: 

 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 ( "ra");
  chạy = true;
  ) else (
  goin = true;
  goOut = false;
  )
 )

 chức năng _inAnimationDone (e: Sự kiện) (
  e.target.removeFilter ();
  img1.visible = false;

  nếu (goin) (
  _createAnimation ( "ra");
  ) else (
  chạy = false;
  goOut = false;
  )
 )

 chức năng _outAnimationDone (e: Sự kiện) (
  e.target.removeFilter ();
  img2.visible = false;

  nếu (goOut) (
  _createAnimation ( "ở");
  ) else (
  chạy = false;
  goin = false;
  )
 )

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

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

Điều quan trọng là biết, rằng bạn không thể đảo ngược hướng trong suốt quá trình chuyển đổi có hiệu lực là chạy. Thay vào đó bạn có thể "nhớ" những hành động của người sử dụng, chờ cho đến khi có hiệu lực được thực hiện và áp dụng các quá trình chuyển đổi 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 các chức năng "_onOver" và _onOut "" (dòng 8 và 18) được thực thi. Nhưng chỉ khi chạy var là đúng, nếu nó sai (dòng 9 và 19), bạn bắt đầu quá trình 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 bắt đầu các hoạt hình tùy theo sự chỉ đạo của "dir" bạn thông qua như một tham số.

Lưu ý là sau khi gọi removeFilter "" phương pháp (dòng 29 và 41) cả MovieClip Bắt đầu và kết thúc 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 - bắt đầu với sự chuyển tiếp - để dòng (sai 30 và 42).

Cuối cùng kết quả

Tải xuống

Click vào đây để tải 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ác công việ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 hiệu ứng khác nhau.

  • Share / Bookmark