Di chuột hoa rơi trong flash AS2

In
Xem kết quả: / 26
Bình thườngTuyệt vời 

Chào các bạn, hôm nay mình xin giới thiệu với các bạn 1 hiệu ứng di chuột tạo hoa rơi, các bạn có thể áp dụng bài tập này để làm tuyết rơi, sao rơi hay bất cứ cái gì rơi mà các bạn có thể nghĩ ra.

Chúng ta bắt tay vào làm nhỉ.

Bước 1:

Tạo 1 file tài liệu flash mới Ctrl + N chọn loại ActionScript 2.0 nhé. Nhấn Ctrl + J để mở bảng Document Properties thiết đặt các thông số cho phù hợp với file flash bạn cần, chọn màu nền phù hợp với file hoa rơi của bạn. Như mình làm hoa mùa trắng nên mình chọn màu nền (Background Color) là màu đen cho nổi.

Bước 2:

Sử dụng công cụ Oval Tool (O) vẽ một hình tròn (trong lúc vẽ bạn giữ phím Shift để được hình tròn tuyệt đối) vừa phải như hình dưới:

Bước 3:

Sử dụng công cụ Selection Tool (V) click chọn hình tròn vừa vẽ rồi nhấn F8 để convert nó thành dạng Movie Clip.

Sau khi Convert xong thì bạn Click đúp để vào trong Movie Clip này. Nhấn F8 tiếp, lần này bạn Convert nó thành dạng Button nhé (như hình dưới):

Lại click đúp tiếp bào Button này để vào trong, click đúp vào frame Hit nhấn F6 rồi click vào frame Up nhấn Delete để xóa frame này đi ta sẽ được như hình:

Vậy là xong cái button. Giờ bạn quay ra Scene vừa nãy để chúng ta tiếp tục bằng cách Click vào vùng mình đã khoanh đỏ như hình dưới:

Bước 4:

Chúng ta đã quay ra SceneSymbol 1, giờ bạn hãy nhấn Ctrl + để phóng to hình ra cho dễ làm (khi làm flash các bạn có thể nhấn Ctrl + hoặc Ctrl - để phóng to thu nhỏ tài liệu flash cho dễ làm nhé). Hình dưới là khi chúng ta đã ở Scene Symbol 1.

Click vào Frame thứ 2 nhấn F6 rồi nhấn Delete ta được như hình dưới:

Giờ chúng ta sẽ bắt đầu vẽ hoa cho nó tại frame thứ 2 này. (các bạn có thể vẽ hoa theo sáng tạo kiểu riêng của mình nhé) Cách của mình vẽ hoa như sau:

Mình sử dụng công cụ Oval Tool (O) vẽ 1 hình bầu dục (bạn lưu ý cái dấu thập con con trong hình là tâm của bông hoa sau này nên mình sẽ vẽ hoa quanh cái tâm này) như hình dưới ta đã được 1 cánh hoa rồi:

Chọn công cụ Free Transform Tool (Q) click và giữ phím Alt vào cánh hoa để copy nó, sau đó bạn xoay cánh hoa và xắp xếp chúng hợp lý để được 1 bông hoa như hình:

Chọn tất cả bằng cách nhấn Ctrl + A rồi nhấn phím F8 để Convert nó thành dạng MovieClip.

Click vào frame thứ 40 nhấn F6 để chèn vào keyframe. như hình dưới:

OK xong bông hoa, giờ chúng ta bắt đầu tạo chuyển động rơi xuống cho nó nhé, bạn có thể dùng nhiều cách như sử dụng đường Guide, hay là chuyển động thông thường tùy bạn, mình sẽ sử dụng đường guide cho nó hiện đại. :D

Bước 5:

Tạo 1 layer mới, sử dụng công cụ Pencil Tool (Y), vẽ một đường vòng vòng, bạn có thể vẽ tùy hứng mình, miễn sao hoa nó rơi đẹp đẹp tý :D

Sau đó bạn click chuột phải vào layer vừa vẽ đường vòng vòng và chọn Guide như hình:

Tạo xong nó sẽ có dạng như vậy:

Hiện nay layer 1 chưa lấy layer 3 ở hình trên làm đường Guide cho nó, giờ bạn hãy click chuột vào layer 1 kéo nó vào sát chân dưới của layer 3 để nó nhận layer 3 làm được Guide nhé.

(hình khi bạn giữ layer 1 và kéo vào chân layer 3)

Khi nhả chuột ra thì ta được như hình: 

Làm xong bạn khóa layer chứa đường Guide lại nhé.

OK ta đã xong công đoạn tạo đường Guide cho chuyển động.

Bước 6:

Sử dụng công cụ Selection Tool (V), click vào frame 1 ở layer 1, sau đó chọn button tròn của chúng ta và di chuyển nó vào đầu của đường guide như hình:

Tiếp tục click vào frame thứ 2 trên layer này và chọn hình bông hoa, bạn kéo bông hoa sao cho tâm tròn của bông hoa phải nằm trên đường Guide nhé:

Click vào Frame thứ 40, chọn bông hoa kéo nó vào cuối của đường guide (bạn cũng lưu ý tâm của bông hoa phải nằm trên đường Guide nhé) có thể nhấn Ctrl +Ctrl - để phóng to thu nhỏ tiện cho các thao tác của bạn.

P/S: Giờ bạn click chuột vào hình bông hoa này và để độ Alpha nhỏ hơn để nó khi rơi xuống sẽ mờ dần hoặc bạn có thể dùng công cụ Free Transfrom Tool (Q) kéo nó to nhỏ để khi rơi xuống nó sẽ to hơn hoặc nhỏ hơn lúc đầu.

OK chúng ta đã tạo xong kịch bản chuyển động, giờ chỉ còn tạo chuyển động cho nó mà thôi.

Click vào bất kỳ nơi nào giữa Frame 2 và frame 40 bạn click chuột phải chọn Greate Classic Tween.

Vậy là đã xong công đoạn tạo chuyển động cho hoa rơi. giờ ta sẽ viết code cho nó, code cực kỳ đơn giản.

Bước 7:

Tạo 1 layer mới Click vào frame đầu tiên trên layer này nhấn F9 và chèn vào đoạn code:

stop();

Giờ bạn nhấn F9 để thoát bảng ActionScript kéo chuột bôi đen từ Frame 2 đến frame 40 (như bạn bôi đen trong wrod excel) chuột phải chọn: Remove Frames để chúng ta xóa từ frame 2 đến frame 40 bạn nhứ lại frame 1 là frame mà chúng ta đã chèn đoạn code stop(); nhé.

Click vào frame đầu tiên trên layer 1, layer chứa cái button tròn, bạn click chuột vào button này và nhấn F9 để mở bảng action script chèn vào đoạn code sau:

on (rollOver)
{
    gotoAndPlay(2);
}

Xong chuyển động và code rồi, giờ bạn trở lại Scene đầu tiên bằng cách nhấn vào 1 trong những chỗ mình đã khoanh đỏ trong hình dưới:

Sau khi đã ra ngoài công việc của chúng ta rất là đơn giản bạn chỉ là xắp xếp các ô hình tròn thành 1 phần đều trên mặt phần hiện thì của flash, Bạn hãy giữ phím Alt để thực hiện thao tác nhân và kéo hình tròn.

Hình khi bắt đầu ra Scene ngoài:

Hình bạn đã nhân ra thành 1 cột: (đây là cách khoa học để bạn làm nhanh các ô hoa rơi)

Sau khi đã được 1 cột này rồi bạn nhấn Ctrl + A để chọn toàn bộ cột này rồi giữ phím Alt kéo sang bên cạnh, ta đã được 2 cột rồi lại nhấn Ctrl + A chọn 2 cột này và giữ phím Alt kéo sang bên cạnh. cứ thể chỉ vài bước là bạn đã phủ kín vùng hiển thị flash như hình dưới rồi:

OK rồi đó, bạn có thể nhấn Ctrl + Enter để xem thành quả của mình.

Kết quả mình làm theo tut này đây:

Sở dĩ mình viết tut này rất kỹ vì mình thấy nó khá hay có thể ứng dụng rất nhiều, như bạn có thể di chuột làm bong bóng bay lên, hay di chuột vào cành cây thì chim bay ra, nói chung là rất hữu ích.

Hy vọng với tut này các bạn sẽ có nhiều ý tưởng hay cho nó, bạn nào làm thêm ý tưởng nào thì vào đây Show cho mọi người xem với nhé.

Chúc các bạn thành công.

aloflash.com

Download

Share