Thực hành code

1. Hiệu ứng tạo mặt nước chuyển động trong flash
2. Hướng dẫn làm hiệu ứng kính lúp trong flash
   

Read more »

Di chuột chạy ảnh với AS2

Di chuột chạy ảnh với AS2

Bình thườngTuyệt vời 

Đây là một bài tập khá hay nhưng rất đơn giản. Bạn nào thích thì vào Vọc nhé :D.
Nguyên vật liệu cho bài tập này là 1 bức ảnh để làm nền chạy, mình chọn bức này (các bạn lưu ý, chiều cao của bức ảnh phải lớn hơn hoặc bằng chiều cao của khung hiện thị flash còn chiều rộng thì vô cùng bạn muốn dài bao nhiêu cũng được tùy bạn). Mình thì chọn bức ảnh này:
http://i805.photobucket.com/albums/yy331/haihuoc_tunglinhonline/di-chuot-chay-anh-bg.jpg
P/S: bạn có thể ghép những tấm ảnh của bạn thành 1 cái ảnh dài để khi di chuột nó sẽ kéo ra thần tượng của bạn nhé (ý tưởng của mình :P)
OK sau khi các bạn đã chọn cho mình bức ảnh phù hợp thì chúng ta tiến ành làm nhé.
Bước 1:
Tạo 1 tài liệu Flash mới Ctrl + N chọn loại là Action Script 2.0 nhé, nhấn Ctrl + J mở bảng Document Setting để điều chỉnh chiều rộng và dài của file flash cũng như màu nền cho phù hợp với bức ảnh của bạn.
Bước 2:
Import bức ảnh vào flash bằng cách vào File > Import > Import to Stages...
Bước 3:
Sau khi import bức ảnh vào bạn sử dụng công cụ Selection Tool (V) click chọn bức ảnh vừa import rồi mở bảng Align bằng cách vào Window > Align (Ctrl +K) điều chỉnh như trong hình dưới để căn bức ảnh vào giữa khung hiển thị của flash.

Bước 4: 
Nhấn phím F8 để convert nó thành dạng Movie Clip và đặt tên cho movie clip này là: bg_mc
Bước 5:
Tạo 1 layer mới, click vào frame đầu tiên trên layer vừa tạo nhấn phím F9 để mở bảng ActionScript và chèn vào đoạn code sau:

this.onMouseMove = function() {

constrainedMove(bg_mc, 4, 1);

};

function constrainedMove(target:MovieClip, speed:Number, dir:Number) {

var mousePercent:Number = _xmouse/Stage.width;

var mSpeed:Number;

if (dir == 1) {

mSpeed = 1-mousePercent;

} else {

mSpeed = mousePercent;

}

target.destX = Math.round(-((target._width-Stage.width)*mSpeed));

target.onEnterFrame = function() {

if (target._x == target.destX) {

delete target.onEnterFrame;

} else if (target._x>target.destX) {

target._x -= Math.ceil((target._x-target.destX)*(speed/100));

} else if (target._x<target.destX) {

target._x += Math.ceil((target.destX-target._x)*(speed/100));

}

};

}

Thế là xong :D, giờ bạn chỉ cần nhấn Ctrl + Enter để xem kết quả của mình.
Chúc các bạn thành công.
aloflash.com
Download

Read more »

Hướng dẫn làm hiệu ứng kính lúp trong flash

Bạn di chuột vào flash này xem có ngạc nhiên không

Đầu tiên cần chuẩn bị 2 ảnh giống nhau, 1 ảnh nguyên gốc và 1 ảnh đã xử lí bằng bộ lọc (filter), ở đây em chọn filter là blur (có thể dùng Photoshop cho dễ)
Trong ví dụ này mình chỉ làm 1 ảnh, nhưng mình sẽ làm cho kích thước nó to nhỏ khác nhau để giống kiểu kính lúp hơn

Bước 1: Bạn tạo 1 file flash mới có kích thước 640 x 480 (đó là kích thước bức ảnh của mình còn tuỳ vào bức ảnh của bạn to hay nhỏ mà chọn kích thước sao cho hợp lý).

Bước 2: bạn tạo 4 layer như trong hình vẽ, ở layer 1 bạn import cái ảnh vào, nhớ set position chính giữa nhé (ở đây cần nói thêm cho các bạn newbies hiểu, muốn set position đúng chính giữa thì cách dễ nhất là sử dụng properties, chỉ cần chọn cái ảnh, mở properties lên, ngay chỗ X, Y điền vào số 0 hết).




Bước 3: Ở layer 2 thì copy và pase cái ảnh ở layer 1 sang, cũng set position chính giữa nhé.

Bước 4: Ở layer thứ 3, dùng công cụ Oval tool vẽ 1 vòng tròn, màu gì cũng được, vì bước sau chúng ta sẽ convert layer này thành mask layer. Tiếp theo chọn vòng tròn này (nhớ chọn luôn phần viền ngoài (stroke)) và convert nó thành Movie Clip, tên là c1 và instance name cũng là c1.

Bước 5: Convert cái layer thứ 3 thành mask layer bằng cách click chuột phải vào layer, chọn mask.



Bước 6: Ở layer trên cùng vẽ 1 vòng tròn cùng kích cỡ với vòng tròn c1 ban nãy, nhưng không có phần fill, chỉ là stroke thôi nhé, phần stroke để dày lên cho dễ nhìn. Chọn vòng tròn này và convert nó thành Movie Clip, tên là c2 và instance name cũng là c2.

Bước 7: thế là chúng ta đã hoàn thành phần hình ảnh, bây giờ bắt tay vào viết code:

Chọn frame 1 layer 4 và viết vào đó đoạn code này:
this.onEnterFrame = function () { c1._x = _xmouse; c1._y = _ymouse; c2._x = _xmouse; c2._y = _ymouse; };

Bước 8: Tới đây movie của chúng ta vẫn chưa giống kính lúp hẳn, cần phải làm thêm sao cho phần trong vòng tròn phóng to lên một chút nữa thì sẽ giống hơn nhỉ.
Bạn scale cái ảnh ở layer thứ 2 cho lớn hơn khoảng 50% (dùng công cụ Free tránform tool để kéo to bức ảnh ra.), đặt nó ở vị trí trên chếch chếch 1 chút *-:). convert nó thành Movie Clip tên là i1, instance name cũng là i1.


Sau đó thêm đoạn code này vào đoạn code lúc nãy (dưới dòng c2._y = _ymouse)
i1._x = _xmouse - (_xmouse/512)*i1._width + i1._width/2; i1._y = _ymouse - (_ymouse/384)*i1._height + i1._height/2;

Và bây giờ chúng ta có đoạn code hoàn chỉnh:
this.onEnterFrame = function (){ c1._x = _xmouse; c1._y = _ymouse; c2._x = _xmouse; c2._y = _ymouse; i1._x = _xmouse - _xmouse / 640 * i1._width + i1._width / 2; i1._y = _ymouse - _ymouse / 480 * i1._height + i1._height / 2; };



Note: Đây chỉ là ví dụ cơ bản, các bạn có thể biến tấu theo những cách khác dựa trên bài hướng dẫn cơ bản này. Chúc các bạn có những tác phẩm độc đáo và tuyệt đẹp

Read more »

Hiệu ứng tạo mặt nước chuyển động trong flash.

Bài này mình sẽ giới thiệu tới các bạn một hiệu ứng làm mặt nước chuyển động tự nhiên, với một đoạn code trong flash là bạn có thể làm được một hiệu ứng mới rồi, hiệu ứng này có thể áp dụng làm các baner về phong cảnh vv... Chúc các bạn thành công.

Bước 1:

Tạo 2 layer: Layer1: Đặt tên là mặt nước

Layer2: Đất và trời

Bước 2 :

Tại layer1, các bạn import một bức ảnh vào làm đối tượng để thực hành. Vào menu File > Import > Import to Stage (Ctrl +R) để đưa 1 bức ảnh bạn đã chuẩn bị sẵn vào phần thiết kế.

Bước 3 :

Tại layer1 click chuột phải vào bức ảnh ở khung trình chiếu và chọn "Break Apart" (Ctrl +B)

Bước 4 :

Vẫn ở phần layer1 các bạn sử dụng công cụ Lasso Tool (L) và chọn tất cả những phần mà chúng ta không muốn làm hiệu ứng trên đó.( vẽ ra những phần không làm) Mình vẽ như hình bên dưới :

- Sau khi đã chọn xong các bạn Copy (Ctrl + C), chọn Layer "Đất & Trời" và Paste vào đó (Edit Paste in Place)

Bước 5 :

Bây giờ chúng ta chọn lại Layer "Mặt Nước" và convert bức ảnh ở khung trình chiếu sang Movie Clip. Modify > Convert to Symbol,( Ấn phím f8 nó cũng chuyển sang dạng symbol đặt tên là matnuoc_mc.

Sau đó các bạn vào phần menu ở phía bên dưới có chữ Properties bạn kick vào đó chọn trong phần texbox chữ Movie clip rồi thay xóa chữ Instance Name và viết bằng chữ matnuoc_mc.

Chú ý : Phần này bạn phải ghi đúng tên để khi vào đoạn code flash còn phải gọi tên này ra, nếu bạn ghi sai tên là mặt nước không chuyển động được, tên này phải trùng với tên khi bạn gọi ra trong đoạn code thì nó mới hiển thị được đoạn code. Hình minh họa bên dưới Hình 1a

Hình 1a

Bước 6 :

Các bạn hãy tạo thêm 1 Layer mới (gọi là Action Script).

- Click chọn Frame đầu tiên, ấn F9 để mở cửa sổ Action Script và dán đoạn mã sau vào :

import flash.display.*;
import flash.geom.*;
import flash.filters.*;
myBitmap = new BitmapData(390,293,false,0);
pt = new Point(0,0);
mpoint = new Point(0,0);
myDispl = new DisplacementMapFilter(myBitmap, mpoint,1,2,10,50);
matnuoc_mc.myList = new Array();
matnuoc_mc.myList.push(myDispl);
matnuoc_mc.filters = matnuoc_mc.myList;
i = 1;
this.onEnterFrame = function()
{
filterList = matnuoc_mc.filters;
offset = new Array();
offset[1] = new Object();
offset[1].x = i;
offset[1].y = i/8;
myBitmap.perlinNoise(45,5,3,50,true,false, 7,true,offset);
filterList.mapBitmap = myBitmap;
matnuoc_mc.filters = filterList;
i++;
}

Bước7:

Bây giờ sản phẩm của chúng mình đã xong, các bạn chỉ cần ấn Ctrl + Enter để kiểm tra kết quả. Chúc các bạn thành công.

Hình 1: Sản phẩm sau khi làm xong

Read more »