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



You are here: Tutorials  Hiệu ứng Làm lá cờ trong Flash

Làm lá cờ trong Flash

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

Chào các bạn lâu lắm rồi mình mới lại có thời gian viết TUT chia sẻ cùng mọi người, hy vọng rằng tất cả sẽ luôn thành công và luôn hạnh phúc.

Bài hướng dẫn hôm nay mình sẽ giúp các bạn làm 1 lá cờ bay như thật mà vô cùng đơn giản. Nhưng mình test thử thì thấy cờ nào có sọc hoặc nhiều hoa văn bay có vẻ thật hơn là cờ 1 mầu, mình có thử qua cờ Việt Nam mà thấy không ổn lắm nên làm demo cờ USA cho nó oách hy vọng không động chạm gì đến chính trị. Hi

Và đây cũng có 1 cái Demo ứng dụng làm lá cờ cho banner: http://chuyenphatquocte.com/

Buôn chuyện chút vì lâu lắm mới viết lại TUT, bây giờ chúng ta bắt tay vào làm lá cờ nhé.

Bước 1:

Bạn mở phần mềm Fflash lên chọn loại ActioScript 2.0 như hình dưới:

Sau khi Import xong bạn hãy xóa ảnh lá cờ trên Stage (khung làm việc của Flash) đi.

Bước 2:

Bạn Import 1 bức ảnh lá cờ mà bạn muốn làm hiệu ứng vào Flash bằng cách vào File > Import > Import to Stage hoặc nhấn tổ hợp phím (Ctrl +R), như hình dưới đây:

Sau khi đã Import xong file ảnh lá cờ vào Flash chúng ta đến bước tiếp theo.

Bước 3:

Bạn mở thư viện Libraly trong Flash lên bằng cách vào Window > Libraly hoặc nhấn tổ hợp phím (Ctrl + L) như hình sau:

1 cửa sổ của Libraly sẽ mở ra và bạn thấy trong đó là 1 bức ảnh mà ở bước 1 chúng ta Import vào, tiếp tục bước tiếp nhé.

Bước 4:

Click chuột phải vào bức ảnh trong Libraly nó sẽ mở 1 hộp tùy chọn, bạn chọn Properties... như hình sau nhé.

Sau khi bạn chọn Properties... nó sẽ hiện ra 1 bảng tùy chọn. Nếu bạn nào thấy bảng hiện ra không đầy đủ như hình dưới thì Clicks vào chữ Advance nhé.

Bạn đánh dấu kiểm vào 2 ô Export for ActionScript Export in frame 1 sau đó dòng Indentifier bạn đặt tên là flag như hình trên. rồi nhấn OK

Bước 5:

Tạo 1 layer mới Click vào frame đầu tiên trên layer này và nhấn chuột phải chọn Action hoặc bạn nhấn phím tắt F9 để mở bảng ActionScipt chèn code cho flash này như hình bên dưới:

Khi bảng ActionScript hiện lên bạn chèn vào đoạn code sau:

// http://aloflash.com

import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.filters.DropShadowFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.geom.ColorTransform;

import de.popforge.wm2006.effect.Flag;

_quality = "LOW";
Stage.scaleMode = 'noScale';



var lib: BitmapData = BitmapData.loadBitmap( 'flag' );
//Đoạn code đặt các layer khác lên trên lá cờ
var outputClip: MovieClip = createEmptyMovieClip( 'outputClip', outputClip.getNextHighestDepth());
 mc = this["loader" + 1];
 var lowest:MovieClip = mc;
 for(i = 1; mc != undefined; i++)
 {
   mc = this["loader" + i];
   if(mc.getDepth() < lowest.getDepth())
   lowest = mc;
 }
outputClip.swapDepths(lowest);
//Kết thúc code gọi movieclip lên trên
var output: BitmapData = new BitmapData( 450, 265, true, 0 ); //450 và 265 là kích thước lá cờ bạn muốn hiện thị bạn có thể thay đổi kích thước khác tùy ý
outputClip.attachBitmap( output, 0 );
outputClip.filters = [ new DropShadowFilter( 600, 600, 10, 10, 2, 2, .3, 3 ) ]; //Đây là các tham số điều chỉnh sự phấp phới của lá cờ (hình file flash của bạn có kích thước càng lớn thì bạn nên để giá trị lớn và ngược lại).

outputClip._x = 0; //Tọa độ bắt đầu xuất hiện cờ theo trục X giá trị 0 là mép trên cùng bên trái
outputClip._y = -30; //Tọa độ bắt đầu xuất hiện cờ theo trục Y giá trị -30 là mép trên cùng bên trái

var flag: Flag = new Flag( lib, output );
flag.appearMoreFabric();

onEnterFrame = function(): Void
{
    flag.enterFrame();
}

attachMovie( 'go', '1', 1, { onRelease: function(){ getURL( 'http://aloflash.com' ) } } );

//aloflash.com chuc cac ban vui ve

Trong đoạn code trên mình đã giải thích 1 số chỗ cơ bản để các bạn tùy biến theo ý muốn của mình. Tắt bảng ActionScipt hoặc nhấn phím tắt F9.

Chúng ta đã hoàn tất cơ bản giờ các bạn kéo xuống cuối bài viết Download file gốc về. bạn giải nén trong File download về sẽ có 1 thư mục mang tên src trong đó đã chứa các code để tạo chuyển động cho lá cờ, giờ bạn chỉ việc làm 1 bước cuối cùng như sau:

Bước 6:

Mở bảng Properties của Flash bằng cách vào Window > Properties như hình dưới:

Click chuột ra vùng không làm việc của Flash để Properties hiện các thông số chung như hình dưới:

Bạn lưu ý dòng ActionScipt Setting mình đánh dấu đỏ ở hình trên, chúng ta sẽ Click vào chữ Edit ở bên phải nó. Sau khi click vào Edit nó sẽ hiện ra 1 bảng tùy chọn, sau đó bạn click chuột vào hình cái thư mục màu vàng như hình bên dưới để tìn đến đường dẫn của thư muc src mà bạn đã download về khi trước.

Bạn tìm đến thư mục src trên máy tính của bạn, như mình để nó trong ổ E thuộc thư mục cac file flash / flag thì đường dẫn của nó sẽ là: E:\Cac file Flash\flag\src\ xong và nhấn OK như hình dưới:

Vậy là chúng ta đã hoàn thành bài tập này. Các bạn hãy nhấn Ctrl +Enter để xem kết quả nhé.

(Mình cài bản CS5 nên chỉ Convert được xuống CS4 bạn nào làm thì convert xuống các bản thấp hơn rồi chia sẻ cho những người khác giúp mình nhé).

Chúc cả nhà vui vẻ.smiley

Download

Bình luận (23)Add Comment
0
...
được viết bởi yen nhi, Tháng ba 20, 2012
Chào mừng anh trở lại, chúc anh luôn vui vẻ, mạnh khỏe và có nhiều thời gian viết TUT cho mọi người nhé. Cảm ơn anh nhiều vì các bài anh hướng dẫn rất dễ hiểu và dễ làm. Cố lên anh nhé,smilies/cheesy.gif
0
...
được viết bởi yen nhi, Tháng ba 20, 2012
Ah anh nhớ viết nốt mấy cái tut còn đang dở nhé. Em cũng chờ lâu lắm rồi muốn làm quá mà hem biết hi hi smilies/grin.gif
0
...
được viết bởi chemchep, Tháng ba 20, 2012
Lâu lắm mới thấy bài TUT của bạn!
Chúc bạn sức khỏe và thành đạt!
Cám ơn nhiều!
smilies/grin.gif
0
...
được viết bởi thobeo, Tháng ba 23, 2012
Lâu lắm em mới ra trang chủ, toàn vào diễn đàn chơi nông trại. smilies/grin.gif lâu lắm mới thấy anh xuất hiện, hy vọng anh sẽ xuất hiện thường xuyên để viết TUT đừng xuất quỷ nhập thần rồi lại biến mất anh nhé. Hi hi smilies/grin.gif chúc anh sức khỏe và vui vẻ.
0
...
được viết bởi gacon, Tháng ba 29, 2012
smilies/grin.gif Chao anh admin lau moi thay anh xuat hien,anh xuat hien thuong xuyen ko de moi nguoi mong cho hoai
moi nguoi mong cho anh viet TUT do
anh luon vui ve manh khoe he hesmilies/cry.gif
0
...
được viết bởi Quý, Tháng tư 16, 2012
hi các bạn ơi sao mình làm giống như hướng dẫn mà nó báo lỗi ơi cái dòng 34. var flag:Flag = new Flag(lib, output);
0
...
được viết bởi TienXu.Flash Giat Dien, Tháng năm 26, 2012
site đẹp quá. ngưỡng mộ :x
0
...
được viết bởi windnohome, Tháng sáu 01, 2012
thích quá,chúc anh nhiều sức khỏe,để có nhiều bài Tut ,chỉ cho các bạn trẻ.
0
...
được viết bởi vinhosmediavn, Tháng bảy 04, 2012
co file ko anh oi gui cho em voi hj
0
...
được viết bởi ..., Tháng chín 25, 2012
Bạn ơi cho mình hỏi chút. Khi làm được lá cờ rồi muốn cho các mc khác lên bề mặt của lá cờ thì làm thế nào. Mình làm nó toàn bị chìm sau lá cờ thôi.
0
...
được viết bởi aloflash, Tháng chín 26, 2012
Bạn chú ý đoạn code này:
//Đoạn code đặt các layer khác lên trên lá cờ
var outputClip: MovieClip = createEmptyMovieClip( 'outputClip', outputClip.getNextHighestDepth());
mc = this["loader" + 1];
var lowest:MovieClip = mc;
for(i = 1; mc != undefined; i++)
{
mc = this["loader" + i];
if(mc.getDepth() < lowest.getDepth())
lowest = mc;
}
outputClip.swapDepths(lowest);
//Kết thúc code gọi movieclip lên trên

Giờ chỉ cần bạn muốn hình nào, hay đối tượng nào đè lên trên thì bạn Convert hình và đối tượng đó thành MovieClip và đặt tên lần lượt là "loader1" "loader2" ... đến loaderi số 1 , 2 ... i sau loader để thể hiện tầng lớp của MovieClip đó.
Chúc bạn vui vẻ.
0
...
được viết bởi ..., Tháng chín 26, 2012
Được rùi smilies/grin.gif. Thank ad smilies/grin.gif
0
...
được viết bởi tuanhvct, Tháng mười một 08, 2012
ban ơi cho mình hỏi muốn cho lá cờ bay nhanh thì làm the nào?
0
...
được viết bởi smily, Tháng mười hai 24, 2012
Mình sử dụng 1 ảnh lá cờ nhưng mặc dù đã chọn chế độ ảnh chất lượng cao sao mình thấy ảnh vẫn nhòe ko được nét, co bác nào biết cách khắc phục ko nhỉ? Thanks nhé!
0
...
được viết bởi thobeo, Tháng mười hai 28, 2012
Chắc bạn làm sai kích thước lá cờ, nếu trong flash lá cờ của bạn là 200x200 thì ảnh lá cờ bạn đưa vào cũng phải có kích thước 200x200 thì sẽ được chất lượng như ý muốn.
0
...
được viết bởi tiendat, Tháng năm 04, 2013
Em chào anh, em đọc tut của anh nhưng hiện tại máy k cài adb nên không test và cảm nhận được. Mong admin cho em 1 file demo ạ.

Em rất muốn làm 1 logo như thế này : http://direct1.anhso.net/origi...152906.gif nhưng tìm mãi k thấy h/d của pts nên em nghĩ file gif trên đc tạo từ flash chuyển thể và tìm đc toppic này.

Mong anh giúp đỡ, làm cách nào để tạo lá cờ giống trong banner trên ạ.
0
...
được viết bởi Toan, Tháng năm 31, 2013
sao minh copy cai code ma no bao loi zay? ai biet chi cho tui voi?
0
...
được viết bởi nguyen trung tin, Tháng bảy 23, 2013
bạn ơi cho hỏi...mình làm thêm 1 lá cờ nửa nằm sau và cung bay như thế thì làm sao bạn
0
...
được viết bởi Panda Mun, Tháng tám 28, 2013
Cho tớ Link download Phần mềm được không mấy bạn smilies/sad.gif
0
...
được viết bởi Hong Le, Tháng chín 05, 2014
Sao ko download file gốc (src) được vậy mấy tiền bối
0
...
được viết bởi Nguyen Phuong, Tháng sáu 10, 2015
Bạn ơi. Mình làm ok rồi, nhưng h mình muốn cho 2 lá cờ lên 1 background thì làm ntn ? (1 bên cờ đảng, 1 bên quốc kỳ)
0
...
được viết bởi Khanh, Tháng mười 14, 2015
code nay viền dưới không thấy uốn lượn, thất bại rồi ad ơi
0
...
được viết bởi Son, Tháng năm 11, 2016
Anh(chị) chỉ giúp mình với, mình đã làm lá cờ bay rồi, nhưng mà khi xuất file thì nó vẫn có hình nền (khung trắng) như khi làm, vậy có cách nào chỉ lấy hình lá cờ bay để làm logo được không? chân thành cảm ơn anh (chị).

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

busy