AloFlash ! Cộng đồng flash Việt Nam



You are here: Tutorials  AS 1.0 - 2.0 Hiệu ứng bong bóng ánh sáng bay lên trong flash AS2

Hiệu ứng bong bóng ánh sáng bay lên trong flash AS2

Email In PDF.
Xem kết quả: / 31
Bình thườngTuyệt vời 

Hôm nay mình mới chuyển sever và nâng cấp diễn đàn lên phiên bản mới, các bạn có thể vào diễn đàn chơi game tặng quà cho nhau hay gửi những lời chúc điều ước tốt đẹp trong mục giải trí.

Giờ mình xin hướng dẫn các bạn tut này nhé. Mình sẽ hướng dẫn các bạn làm bóng bay lên 1 màu cho đơn giản và mình sẽ gửi kèm theo file gốc nhiều màu để các bạn nghiên cứu cách làm.

Chúng ta bắt đầu thôi nhỉ.

Bước 1:

Tạo 1 file flash mới Ctrl + N chọn loại Action Script 2.0 nhé.

Bước 2:

Sửng dụng công cụ Rectangle Tool (R) vẽ 1 hình chữ nhật (cái này ta sẽ làm nền, nếu bạn có 1 bức ảnh nền thì bỏ qua bước này). 

Sau đó bạn sử dụng công cụ Selection Tool (V) clich vào hình chữ nhật vừa vẽ, bạn nhìn vào bảng Properties bên cạnh sẽ thấy những thông số của hình chữ nhật này. Hãy chú ý những thông số mình khoanh đỏ trong đó: XY là tọa độ của mép phía trên bên trái của hình chữ nhật. WH là chiều rộng và chiều cao của hình chữ nhật.

Giờ chúng ta sẽ sửa những thông số trong vòng tròn đỏ mình khoanh để cho hình chữ nhật bạn vừa chọn đứng vừa kích thước với khung flash nhé. File flash mình chọn là kích thước 450x320 nên mình thiết lập như sau (tọa độ XY là 0 để mép trên bên trái hình chữ nhật trùng với mép của khung hiển thị flash)

Tiếp đến bạn vào bảng chỉnh màu sắc Color: Window > Swatches (Ctrl + F9) như hình:

Sau đó bạn chọn loại Radial như trong hình ta sẽ được:

Các bạn muốn đổ Radial cho nó đặc biệt hơn thì có thể dùng công cụ Gradient Transform Tool (F) rồi cilick vào hình chũ nhật để chỉnh sửa nhé. :)

Vậy là đã xong bước làm nền. như trong file flash mình gửi đính kèm. Bạn nào dùng ảnh để làm nền thì có thể bỏ qua bước này và Import trực tiếp ảnh vào nhé.

Làm xong bước này bạn khóa layer này lại nhé.

Bước 3:

Tạo một layer mới, sử dụng công cụ Rectangle Tool (R) vẽ một hình chữ nhật, thiết đặt thông số như phần đầu tiên của bước 2:

Sau đó sử dụng công cụ Selection Tool (V) click vào hình chữ nhật vừa tạo nhấn F8 để convert nó thành dạng Movie Clip, Sau khi convert xong bạn nháy đúp vào movie clip vừa tạo để vào trong. ở đây bạn Click vào hình chữ nhật và nhấn phím Delete để xóa nó đi. Dưới đây là hình ảnh lúc chưa xóa thì trên frame sẽ là 1 chầm đen và khi xóa thì nó sẽ trắng:

Giờ bạn click vào frame 1 trên layer này (hình dấu trắng mình khoanh trong đỏ ở hình trên) nhấn F9 để mở bảng ActionScript và chèn vào đoạn code sau:

colorful_dots = function (particle_number:Number, max_particle_area_width:Number, max_particle_area_height:Number, max_size:Number, min_size:Number, y_direction_speed:Number, x_direction_speed:Number) {
for (var i:Number = 0; i<particle_number; i++) {
// Attach particle to Box Particle Storm Stage MC from library
this.attachMovie("red_particle", "i"+i, this.getNextHighestDepth());
this["i"+i].max_width = max_particle_area_width;
this["i"+i].max_height = max_particle_area_height;
this["i"+i].max_size = max_size;
this["i"+i].min_size = min_size;
this["i"+i].y_direction_speed = y_direction_speed;
this["i"+i].x_direction_speed = x_direction_speed;
}
var mask_mc:MovieClip = this.createEmptyMovieClip("mask_mc", this.getNextHighestDepth());
mask_mc._x = 0;
mask_mc._y = 0;
mask_mc.beginFill(0x00FF00, 100);
mask_mc.lineTo(max_particle_area_width, 0);
mask_mc.lineTo(max_particle_area_width, max_particle_area_height);
mask_mc.lineTo(0, max_particle_area_height);
mask_mc.lineTo(0, 0);
this.setMask(mask_mc);
};
// Call Box Particle Storm Function 
colorful_dots(80, 450, 320, 70, 30, 1, 1);

Trong đoạn code dưới cùng: 450 là chiệu rộng của đoạn bóng mà các bạn muốn nó hiện thị, 320 là chiều cao đoạn bóng mà bạn muốn hiện thị, nói chung file flash bạn có kích thước bao nhiêu thì bạn điều chỉnh 2 thông số này cho phù hợp.

Nhấn phím F9 để tắt bảng ActionScript bạn sẽ được kết quả như hình: 

Bạn chọn công cụ Oval Tool (O) nhấn Ctrl + để phóng to rồi vẽ 1 hình tròn nhỏ (trong lúc vẽ bạn giữ phím Shift sẽ được hình tròn tuyệt đối):

Sử dụng công cụ Selection Tool (V), click vào hình tròn vừa tạo. Mở bảng Color bằng cách vào: Window > Color hoặc (Shift + F9) bạn sẽ thấy như hình:

Các bạn lưu ý những vùng mình khoanh đỏ nhé.

Giờ bạn nháy đúp vào cái khóa màu đỏ mình khoanh ở hình trên nó sẽ hiện ra 1 bảng tùy chọn, đầu tiên bạn chọn màu trắng rồi thiết đặt alpha cho nó là 0% như hình:

Click vào khoảng giữa 2 khóa để tạo thêm 1 khóa màu nữa, click đúp vào khóa màu vừa tạo và chọn màu cam độ alpha là 50% nhé:

Click vào khóa màu cuối bên phải, chọn màu đỏ độ alpha là 100% nhé:

OK giờ là xong bước tạo màu cho quả bóng. 

Note: Tùy theo màu nền mà các bạn thiết kế màu cho quả bóng phù hợp không nhất thiết phải màu đỏ như mình làm nhé.

Click vào quả bóng vừa được đổ màu bạn nhấn F8 để Convert nó thành dạng Movie Clip:

Tạo xong bạn nháy đúp để vào trong Movie Clip này tiếp tục nhấn F8 để Convert quả bóng thành Movie Clip 1 lần nữa. ở đây bạn tạo 1 layer mới click vào frame đầu tiên trên layer vừa tạo nhấn F9 mở bảng ActionScript và chèn vào đoạn code sau:

import flash.filters.BlurFilter;
blur = new BlurFilter();
// add blend mode
this.blendMode = 8;
// depth : Basic Randomly value
depth = Math.random();
_xscale = _yscale=Math.floor((depth*max_size)+min_size);
particle_alpha = Math.floor((depth*70)+30);
// Starting Alpha 
_alpha = 0;
// Randomly Starting X and Y Positions
this._x = (Math.random()*max_width);
this._y = (Math.random()*max_height);
// calculate Particle Y coordinate speed
x_speed = y_speed=depth+0.5;
y_speed *= y_direction_speed;
// calculate Particle X coordinate speed
x_speed *= x_direction_speed;
// xs : Starting x wave value
xs = depth*180;
// Particle X and Sacle wave frequency
wave = depth;
// Particle Zoom factor 
zoom = 0.5;
this.onEnterFrame = function() {
this._y -= y_speed;
_x += (Math.sin(xs)*wave)+x_speed;
_xscale = _yscale += (Math.sin(xs)*wave*zoom);
xs += depth/20;
if (_alpha<particle_alpha) {
_alpha += 1;
}
if (_x>max_width+this._width/2) {
_x = 0-this._width/2;
}
if (_x<0-this._width/2) {
_x = max_width+this._width/2;
}
if (this._y<0-this._height/2) {
this._y = max_height+this._height/2;
this._x = (Math.random()*max_width);
}
if (this._y>max_height+this._height/2) {
this._y = 0-this._height/2;
this._x = (Math.random()*max_width);
}
current_y = this._y;
//color_frame = Math.floor((current_y/max_height)*100);
dot_mc.gotoAndStop(color_frame);
blur.blurY = blur.blurX=Math.floor((10-(depth*10))*1);
blur.quality = 4;
this.filters = [blur];
};

Nhìn cũng hoa mất nhỉ :D. Làm xong bạn nhấn F9 để thoát bảng ActionScript.

Vậy là xong code cho quả bóng, giờ bạn quay trờ lại Scenne trước bằng cách Click vào vùng khung màu đỏ mình đã khoang ở hình dưới:

Sau khi bạn đã ra ngoài Scene Symbol 1, bạn click vào Movie Clip quả bóng và nhấn phím Delete để xóa nó đi.

Vào Library: Window > Library (Ctrl + L) Click chuột phải vào Symbol 2 như hình chọn Properties... (Xin lỗi các bạn mình chụp nhầm hình, các bạn click chuột phải vào Symbol 2 chứ không phải Symbol 3 như hình nhé còn các bước khác vẫn như thế)

Nó sẽ hiện ra 1 bảng bạn đánh dấu kiểm vào ô Export for ActionScriptExport in Frame 1 rồi gõ vào mục Identifierred_particle

OK. Công của chúng ta đã hoàn tất. Giờ chỉ còn việc nhấn Ctrl + Enter để xem sản phẩm của bạn.

Demo của file full màu:

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

aloflash.com

  Download file 1 màu   I    Download file Full màu

Bình luận (13)Add Comment
0
...
được viết bởi dungnguyen, Tháng mười một 13, 2010
có tut chưa bạn??hjhj, mong mỏi tut này quá đi mất.....cái này rất hay!!tks bạn nhe!!
0
...
được viết bởi banhmiopla, Tháng mười một 14, 2010
vie^t' dj anh Linh
0
...
được viết bởi lose, Tháng mười một 15, 2010
khong co tut asmilies/sad.gif
0
...
được viết bởi aloflash, Tháng mười một 17, 2010
Mình viết rồi đó, bận nâng cấp diễn đàn quá.
Chúc mọi người vui vẻ. smilies/cheesy.gif
0
...
được viết bởi banhmiopla, Tháng mười một 18, 2010
thanks a Linh,e rat thich the loai animation su dung as.mong anh co nhung bai tut that hay
Chuc a vui ve!!!
0
...
được viết bởi tuananh, Tháng một 08, 2011
anh Linh ơi , làm sao để nó repeat được vậy
0
...
được viết bởi nguyenhailogo, Tháng một 20, 2011
wa đẹp...full color dành cho web disco hay ecard
0
...
được viết bởi hay, Tháng tư 09, 2011
romantic ok ??? khi nao can hoc hoi thi nho bac giup do nhe . em cung moi tap tanh lam thoi nhung co nhieu cho van ga lam ???
0
...
được viết bởi Tr?n Anh Tu?n, Tháng bảy 19, 2011
Mình làm được rồi, nhưng chỉ làm được bản 1 màu thôi, bản full màu khó quá admin ơi ! Viết tut hướng dẫn a em luôn đi, mình gà lắm, thanks admin quá chừng luôn !
0
...
được viết bởi thangcuoilove, Tháng mười hai 23, 2011
hay lắm !
0
...
được viết bởi Hi, Tháng tư 07, 2012
Nếu làm trong as3 thì phải sữa chỗ nào hả bạn?
0
...
được viết bởi cường, Tháng tư 25, 2012
file full màu làm thế nào để chạy được tween vậy bạn ơi?
mình thêm vài layer vào và để nó chuyển động mà ko thể nào chạy được,bỏ cái layer stop đi thì chết luôn smilies/sad.gif
0
...
được viết bởi ghitas, Tháng hai 08, 2013
còn cái đom đóm làm sao thế anh smilies/shocked.gif smilies/shocked.gif smilies/shocked.gif smilies/shocked.gif

Viết bình luận
nhỏ hơn | lớn hơn

busy