04:56
Ngọc Bích
Welcome
Chào mừng bạn đến với blog của Ngọc Bích, cũng Bích chia sẻ những kinh nghiệm nhé.
Thứ Tư, 1 tháng 12, 2010
Cách làm một ảnh nền chạy mãi mãi
Đây là một file flash với một ảnh nền chạy mãi mãi, không có điểm dừng. Tưởng chừng bức ảnh sẽ rất dài nhưng thực ra nó chỉ là một ảnh với kích thước bằng đúng cái flash này.
Thủ thuật rất đơn giản là làm cho điểm đầu và điểm cuối của hình thật khớp với nhau.
Bài viết này sẽ trình bày cụ thể cho bạn cách làm này bằng Photoshop và Flash.
Đầu tiên bạn cần chọn một tấm hình thật ưng ý, như hình ảnh phong cảnh với kích thước 420x120 pixel này chẳng hạn.
Mở hình bằng Adobe Photoshop, bạn copy Layer hình thêm một Layer nữa. Tôi đặt tên là Layer 1 và Layer 2.
Dùng công cụ Move (V) di chuyển Layer 1 đi một đoạn khá lớn, tương tự ta cũng move Layer 2 đi một đoạn sao cho điểm cuối của hình ảnh trên Layer 1 sát mép với điểm đầu của hình ảnh trên Layer 2.
Nhiệm vụ của bạn giờ đây là làm sao cho 2 mép này hòa lẫn vào nhau. Có rất nhiều cách, ở đây tôi sử dụng công cụ Clone Stamp (S) để tô hình này chồng lên hình kia, tất nhiên đòi hỏi bạn phải có kỹ thuật Photoshop một chút xíu. Nhấn đè phím Alt để lấy mẫu và bắt đầu tô, chọn Opacity là 20% là vừa.
Cuối cùng ta có ảnh kết quả như sau:
Vậy là xong với Photoshop, bây giờ mở Macromedia Flash ra, tạo file mới có kích thước 420x120 (bằng với kích thước hình), nếu cần kích thước khác thì vào Photoshop chỉnh sửa lại kích thước ảnh để cho đẹp.
Vào menu File.Import (Ctrl+R) để import hình cuối cùng ở trên vào. Chọn hình đó, copy và paste trên cùng Layer. Ghép 2 mảnh lại liên tục với nhau, cạnh cuối hình này sát mép cạnh đầu hình kia, nhất là phải thẳng hàng với nhau (nên dùng panel Align (Ctrl+K) và Info (Ctrl+I) để canh chỉnh và xác định tọa độ cho chính xác.
Canh chỉnh xong, chọn cả hai hình, nhấn F8 (Convert to Symbol) để tạo đối tượng là movieclip, nhớ chọn tâm của đối tượng là góc trái trên, điểm (0,0). Canh movieclip này vào góc (0,0), right-click movieclip và hcọn Action, dán đoạn code này lên đó (trên movieclip chứ không phải trên Timeline nhé)
CODE
onClipEvent (load) {
// Định bước nhảy (số pixel), số càng to chạy càng lẹ, số âm chạy từ phải qua trái, số dương chạy ngược lại
var stepX=-2;
var maxX=420; // Độ rộng của movieclip, có thể viết var maxX=this._width/2;
}
onClipEvent (enterFrame) {
vitriX=this._x+stepX;
if (vitriX>0) vitriX-=maxX;
if (vitriX<-maxX) vitriX+=maxX;
this._x=vitriX;
}
Tạo thêm Layer làm mặt nạ 420x120 pixel để che toàn bộ movieclip này nhé. Rồi đó, bây giờ nhấn Ctrl+Enter để test xem nhé.
Đối với những ai không biết AS thì có thể dùng movieclip này để tạo motiontween, keyframe đầu movieclip nằm ở vị trí x=-420, keyframe 2 movieclip nằm ở vị trí x=0.
Xong ấn Ctrl + Enter
Thủ thuật rất đơn giản là làm cho điểm đầu và điểm cuối của hình thật khớp với nhau.
Bài viết này sẽ trình bày cụ thể cho bạn cách làm này bằng Photoshop và Flash.
Đầu tiên bạn cần chọn một tấm hình thật ưng ý, như hình ảnh phong cảnh với kích thước 420x120 pixel này chẳng hạn.
Mở hình bằng Adobe Photoshop, bạn copy Layer hình thêm một Layer nữa. Tôi đặt tên là Layer 1 và Layer 2.
Dùng công cụ Move (V) di chuyển Layer 1 đi một đoạn khá lớn, tương tự ta cũng move Layer 2 đi một đoạn sao cho điểm cuối của hình ảnh trên Layer 1 sát mép với điểm đầu của hình ảnh trên Layer 2.
Nhiệm vụ của bạn giờ đây là làm sao cho 2 mép này hòa lẫn vào nhau. Có rất nhiều cách, ở đây tôi sử dụng công cụ Clone Stamp (S) để tô hình này chồng lên hình kia, tất nhiên đòi hỏi bạn phải có kỹ thuật Photoshop một chút xíu. Nhấn đè phím Alt để lấy mẫu và bắt đầu tô, chọn Opacity là 20% là vừa.
Cuối cùng ta có ảnh kết quả như sau:
Vậy là xong với Photoshop, bây giờ mở Macromedia Flash ra, tạo file mới có kích thước 420x120 (bằng với kích thước hình), nếu cần kích thước khác thì vào Photoshop chỉnh sửa lại kích thước ảnh để cho đẹp.
Vào menu File.Import (Ctrl+R) để import hình cuối cùng ở trên vào. Chọn hình đó, copy và paste trên cùng Layer. Ghép 2 mảnh lại liên tục với nhau, cạnh cuối hình này sát mép cạnh đầu hình kia, nhất là phải thẳng hàng với nhau (nên dùng panel Align (Ctrl+K) và Info (Ctrl+I) để canh chỉnh và xác định tọa độ cho chính xác.
Canh chỉnh xong, chọn cả hai hình, nhấn F8 (Convert to Symbol) để tạo đối tượng là movieclip, nhớ chọn tâm của đối tượng là góc trái trên, điểm (0,0). Canh movieclip này vào góc (0,0), right-click movieclip và hcọn Action, dán đoạn code này lên đó (trên movieclip chứ không phải trên Timeline nhé)
CODE
onClipEvent (load) {
// Định bước nhảy (số pixel), số càng to chạy càng lẹ, số âm chạy từ phải qua trái, số dương chạy ngược lại
var stepX=-2;
var maxX=420; // Độ rộng của movieclip, có thể viết var maxX=this._width/2;
}
onClipEvent (enterFrame) {
vitriX=this._x+stepX;
if (vitriX>0) vitriX-=maxX;
if (vitriX<-maxX) vitriX+=maxX;
this._x=vitriX;
}
Tạo thêm Layer làm mặt nạ 420x120 pixel để che toàn bộ movieclip này nhé. Rồi đó, bây giờ nhấn Ctrl+Enter để test xem nhé.
Đối với những ai không biết AS thì có thể dùng movieclip này để tạo motiontween, keyframe đầu movieclip nằm ở vị trí x=-420, keyframe 2 movieclip nằm ở vị trí x=0.
Xong ấn Ctrl + Enter
Hướng dẫn làm button đơn giản và đẹp trong Flash
Thể theo nguyện vọng của nhiều bạn muốn làm những Button đọc đáo, long lanh hút hồn những du khác xem sản phẩm của bạn (Hi nói quá tý cho vui). Mình xin hướng dẫn những cách tạo Button trên Flash. Bạn nào có các cách khác thì xin chia sẻ với mọi người nhé.
Yêu cầu cần và đủ là 2 phần mềm: Illustrator và Flash.
Đầu tiên bạn dùng Illustrator để tạo Button.
Bước 1:
Mở 1 file Illustrator mới, Chọn loại Web Document...
Bước 2:
Giữ chuột vào ô công cụ Rectangle Tool (M) để nó xổ ra các loại tùy chọn cho bạn vẽ.
Như trong hình mình chọn Rounded Rectangle Tool để vẽ.
Bước 3:
Vẽ 1 hình dạng chữ nhật:
Bạn chọn Swatches trên thanh công cụ hoặc vào Windows > Swatches. Chọn một loại có Gradient.
Sau đó bạn Click vào Ô Gradient (đánh dấu màu đỏ trong hình vẽ duới).
Khi bạn di chuột vào cái chấm đen mình đánh dấu bằng vòng đỏ ở hình dưới, bạn sẽ có thể tùy chọn cho Gradient của bạn. có thể kéo thả thêm bớt mầu sắc.
Như vậy là ta đã hoạn thành cái button công việc còn lại chỉ là chèn text cho button nếu bạn không muốn là trong flash sau đó Ctrl + G nhóm nó lại rồi vứt qua flash là xong.
Còn đây là những file gốc của Illustrator về Button mình chia sẻ cho các bạn nghiên cứu nhé.
Download:
Chúc các bạn thành công.
----------------------------------------------------------------------------------------------
Theo aloflash.com
Thứ Bảy, 27 tháng 11, 2010
Flash Mask Effect
Click here to see another example. Tutorial is on the video section of the forum.
Part1: Getting the images and editing it in Photoshop.
First find a image that you want to add the effect to, I found the image I used in this tutorial from freephotosbank.com. Click here to copy the image I used, after copying the image and paste it into Photoshop. Duplicate the image 2 times, click on the layer you duplicated and click Filter Blur -> Gaussian -> Blur... as shown below.
After that the window below will come up, change the Radius to 6.5 pixels and click ok.
If you want to give you image any kind of effect you can do it. I added a stroke to the images using blending options. After you are satisfied with your images you have to export both the blurred image and the original. we will do this one at a time, Hide all the layers except the one you want to export
after that click File -> Save for Web... save the image as JPEG. Repeat this for the blurred image.
Part2: Importing the images into Flash and working with it.
Create a new Document using the settings shown below. The dimensions will depend on your image size you are using.
Next import the Blurred image first into flash File -> Import -> Import to Stage.
Change the X and Y positions to 5 as shown below.
Create a new layer, and import the Original Image. Use the same position as above. Your layers setup should look like the screenshot below.
Part3: Creating the Icon that follows the icon.
Next insert a New Layer and name it border, as shown below.
Click on Frame 1 of the Border layer. Click on the Rectangular Tool using the settings below.
Create a small square.
Next insert a New Layer and name it Mask, as shown below. Make sure the layer position is the same as mine in the image.
Click to select the Mask Layer using the Rectangular Tool with the settings below.
Create a Rectangle in side the border, as shown below.
Part4: Adding the code to allow the mouse to follow your courser.
First we need to convert the images on the mask and border layers to a movie clip. Make sure the Mask layer is selected right click on the Blue square and select Convert to Symbol
The window below will come up select Movie Clip and click ok.
After that click windows-> properties -> properties
Change the Instance Name to px1 as shown above. Repeat step 4 for the border layer. In this case change the Instance Name to px2.
Click on the first frame, of the border layer and open up the Action window. with the action window open copy and paste this code into the First Frame.
| speed = .9; setInterval(CursorMovement, 40); function CursorMovement() { px2._x = speed*(px2._x-_xmouse)+_xmouse; px2._y = speed*(px2._y-_ymouse)+_ymouse; } |
With that click on the first frame, of the Mask layer and add the code below.
|
At this point your layers should look like the image below.
Part5: Adding the Mask Effect.
Right click on the Mask Layer and click Mask.
Now go test your movie.
Finished:
Well that is it. Hope it is what you expected. If you have, any questions or comments feel free to e-mail me or leave a message on the forum. If you are having a hard time with the tutorial email, me and I will try to help. I also created a video tutorial for this example. The file is a 9 MB flash file. I have the link up on the video section on the forums. Users have to register to view the file, click here to register and view the file.
----------------------------------------------------------------------------------------------
Tut cho ứng dụng Mask trong flash
| ||||
| - Đầu tiên, bạn khởi động chương trình Flash (tôi sẽ hướng dẫn bạn sử dụng bằng Macromedia Flash Professional 2004), chọn File > New... để tạo một file mới trong vùng làm việc. - Import vào flash 1 picture mà bạn muốn làm hiệu ứng. Ở đây tôi dùng picture này làm ví du.  - Nhấn Ctr+L để mở thư viện, trong cửa sổ thư viện kéo picture(mới import vào) vào trong vùng làm việc.  - Click phải chuột vào picture chọn Covert to Symbol(hoặc nhấn F8), đặt tên và hiệu chỉnh như hình bên dưới, cuối cùng chọn OK.  -Click vào Picture (lúc này đã được chuyển thành graphic symbol “girl_gr”, sau này tui sẽ ko gọi là picture nữa mà gọi trực tiếp là “girl_gr”), vào Properties -> color -> Alpha=99%.  - Cuối cùng đổi tên Layer1 thành Layer "bg" Bước 2: Tạo Movie clip - Nhấn Ctr+F8 để tạo 1 movie, đặt tên là "ripple_mc", nhấn OK  - Trong vùng làm việc của movie clip , trên Layer1 -> click frame thứ nhất -> vào thư viện kéo Graphic Symbol “girl_gr” (vừa mới tạo ở trên) vào vùng làm việc . -Tiếp tục click chọn “girl_gr” , vào Properties chọn Alpha = 0%  -Tại frame thứ 5 trên Layer1, nhấn F6. -Cũng tại frame thứ 5 , click chọn “girl_gr “, vào Properties chọn Alpha=99%. - Trên thanh Timeline, tại frame thứ nhất, click phải chuột, chọn Create Motion Tween  - Tiếp tục nhấn F6 tại frame thứ 15, thứ 20.. - Tại frame thứ 20, click chọn "girl_gr", vào properties -> color -> Alpha=0% - Trên thanh Timeline, tại frame thứ 15, click phải chuột , chọn Create Motion Tween kết quả như sau:  - Tạo thêm 1 Layer mới trong movie clip(là Layer2). - Tại Frame thứ nhất trên Layer2, vẽ một hình chữ nhật(nhớ bỏ khung viền), chiều rộng = chiều rộng của "girl_gr", chiều cao ta nên cho nhỏ thôi vì càng nhỏ thì hiệu ứng càng mịn. - Đặt hình chữ nhật vào giữa "girl_gr"(vì picture là do 2 image ghép lại, ở đây tui muốn làm hiệu ứng cho image bên dưới, nên tui phải đặt hình chữ nhật = phía trên của image bên dưới => vì thế hình chữ nhật sẽ nằm chính giữa)  -Trên Layer2, nhấn F6 tại frame thứ 20. Cũng tại frame thứ 20 ta kéo hình chữ nhật về phía dưới cùng của "girl_gr" và giảm bớt chiều cao hình chữ nhật.  - Trở lại frame thứ nhất trên Layer2, vào properties -> Tween -> Shape  - Cuối cùng vào Layer2, click phải chuột chọn Mask  BƯỚC CUỐI CÙNG - Quay trở lại vùng làm việc chính(Scene 1) - Insert 1 Layer mới đặt tên là Layer"ripple1", Layer này nằm trên Layer"bg". - Tại frame thứ nhất trên Layer"ripple1", kéo movie clip "ripple_mc" vào trong vùng làm việc, chỉnh movie này nằm giữa "girl_gr" (giống như ta chỉnh hình chữ nhật ở trên) và cuối cùng nhấn F5 tại frame thứ 20.  -Tương tự, tui Insert thêm một Layer mới đặt tên là Layer"ripple2", layer này nằm trên Layer"ripple1". tại frame thứ 4 , keo movie clip "ripple_mc" vào trong vùng việc, chỉnh movie này nằm trùng với movie của layer"ripple1" và cuối cùng tại frame thứ 24 nhấn F5. -Tương tự tạo thêm Layer"ripple3", kéo "ripple_mc" tại frame thứ 7 và nhấn F5 tại frame thứ 33. -Tương tự layer"ripple4", tại frame thứ 10 và frame thứ 36. - Cuối cùng nhấn F5 tại frame thứ 36 cho Layer"bg".  Phù...phù thế là xong, các bạn nhấn tổ hợp Ctr+Enter xem kết quả như thế nào nhé. Bản demo xem tại đây. |
Thứ Năm, 27 tháng 5, 2010
Bài 6: Câu lệnh điều kiện – Tự học lập trình Flash
Bạn đã thấy thông báo lỗi xuất hiện ở bảng Output. Khi bạn dừng chương trình (đóng cửa sổ swf), thông báo lỗi vẫn còn lưu lại trong bảng Output ở phía phải cửa sổ Flash để bạn “nghiền ngẫm”.
Lỗi như vậy gọi là lỗi lúc biên dịch (compile-time error). Chương trình không chạy được nếu có lỗi lúc biên dịch. Nếu chương trình chạy được nhưng lại tỏ ra “kỳ cục”, không đúng như dự kiến, người ta nói rằng chương trình có lỗi lúc chạy (run-time error).
Trong chương trình của mình, bạn có thể chủ động đưa thông báo ra bảng Output. Nhờ vậy, khi chạy chương trình, bạn dễ dàng theo dõi diễn biến thực tế, dễ dàng phát hiện nguyên nhân gây ra lỗi lúc chạy. Để thử đưa thông báo ra bảng Output, bạn hãy bấm chọn quả banh đang có lỗi biên dịch, gõ phím F9 để mở lại bảng Actions (nếu cần). Trong bảng Actions, bạn xóa câu lệnh sai, gõ đoạn mã mới như sau:
onClipEvent(mouseDown) {
_y -= 20;
trace(“Tôi đi lên đây.”);
}
Hàm onClipEvent giờ đây có hai câu lệnh. Câu lệnh đầu tiên làm cho quả banh xê dịch lên trên 20 điểm ảnh. Câu lệnh thứ hai là câu lệnh gọi hàm trace, làm cho quả banh biết thông báo về hành động của mình! Thông báo “Tôi đi lên đây” là đối mục của hàm trace. Về mặt cấu trúc, thông báo “Tôi đi lên đây” là một chuỗi ký tự, gọi tắt là chuỗi (string). Dùng bộ gõ UniKey thông dụng, bạn dễ dàng tạo ra ký tự Việt có dấu trong chuỗi. Khi dùng chuỗi, bạn đừng quên mở đầu và kết thúc chuỗi bằng dấu nháy (“).
Ấn Ctrl+Enter để chạy chương trình, bạn thấy mỗi lần bấm chuột, quả banh xê dịch lên trên và thông báo “Tôi đi lên đây” xuất hiện ở bảng Output (hình 1). Bạn hãy bấm chuột liên tiếp nhiều lần để thấy quả banh đi mất tiêu. Đó là khi tung độ _y vượt ra ngoài phạm vi hiển thị của sân khấu.
Để quả banh không đi mất, bạn dừng chương trình, sửa nội dung hàm onClipEvent như sau:
onClipEvent(mouseDown) {
if(_y > 0) {
_y -= 20;
trace(“Tôi đi lên đây.”);
}
}
Những gì bạn vừa viết bên trong hàm onClipEvent là một câu lệnh điều kiện. Câu lệnh ấy ngụ ý: nếu tung độ _y của quả banh lớn hơn 0 thì mới xê dịch quả banh và đưa ra thông báo “Tôi đi lên đây” ở bảng Output. Điều kiện “tung độ _y lớn hơn 0″ phải được viết trong cặp dấu ngoặc ( ), đặt sau từ if. Những việc cần làm khi điều kiện được thỏa phải được viết bên trong cặp dấu gộp { }, đặt sau cặp dấu ngoặc ( ). Để Flash hiểu được những gì bạn viết, cần tuân thủ nghiêm ngặt các quy tắc vừa nêu.
Chạy lại chương trình và bấm chuột nhiều lần, bạn thấy quả banh rốt cuộc dừng lại, “không thèm” nhúc nhích nữa. Đó là khi điều kiện “tung độ _y lớn hơn 0″ không được thỏa, tức là khi _y nhỏ hơn hoặc bằng 0. Bạn chú ý, tung độ của quả banh là tung độ của điểm mốc. Chính bạn đã quy định điểm mốc nằm ở giữa cạnh dưới khung bao của quả banh.
Nếu muốn quả banh “nói năng” gì đó khi điều kiện “tung độ _y lớn hơn 0″ không được thỏa, chứ không im lìm, bạn viết thêm vào hàm onClipEvent:
onClipEvent(mouseDown) {
if(_y > 0) {
_y -= 20;
trace(“Tôi đi lên đây.”);
}
else {
trace(“Tôi không đi nữa.”);
}
}
Từ else giúp bạn diễn đạt trường hợp ngược với trường hợp được nêu bởi từ if. Việc cần làm khi điều kiện “tung độ _y lớn hơn 0″ không được thỏa phải được ghi bên trong cặp dấu gộp { } theo sau từ else. Nhờ viết như vậy, lúc chạy chương trình, quả banh thông báo “Tôi không đi nữa” nếu tung độ của nó không lớn hơn 0. Lời từ chối đó cho bạn thấy quả banh tuy trơ trơ nhưng vẫn hiểu bạn đang bấm chuột thúc giục nó.
Với hai quả banh còn lại “chưa có cá tính”, ta cũng thử lập trình cho chúng có hành vi khác biệt. Trước khi làm như vậy, bạn nên cho hai quả banh còn lại có màu khác cho dễ phân biệt: một xanh, một cam chẳng hạn. Bạn không thể chọn màu tô khác nhau cho các thể hiện khác nhau của một nhân vật nhưng có thể chọn màu nhuộm (tint color) khác nhau cho chúng. Cụ thể, bạn hãy chọn quả banh “chưa có cá tính”, ấn Ctrl+F3 để mở cửa sổ Properties tương ứng, chọn Tint trong ô Color, bấm vào ô màu kế bên và chọn màu trong bảng màu. Muốn màu nhuộm lấn át màu tô, bạn ghi 100% trong ô Tint Amount: . Bằng cách đó, bạn có được ba thể hiện của nhân vật Ball có màu khác nhau (hình 2).
Bạn chọn quả banh màu xanh, gõ đoạn mã như sau trong bảng Actions:
onClipEvent(mouseDown) {
if(_yscale == 100) {
_yscale = 200;
}
else {
_yscale = 100;
}
}
Để thử đoán nhận hành vi của quả banh màu xanh, bạn cứ chạy chương trình xem sao.
Theo echip.com
Đọc thêm :
Tổng hợp các bài tự học lập trình Flash
Downloads công cụ lập trình Flash – Flash Development tool 3.1
