Illus mãi rồi, hôm nay đổi gió nào! Video tutorial này sẽ giúp các bạn có thể tạo những hiệu ứng chuyển động đơn giản và xuất ra file Swf (flash player) nhúng trực tiếp lên web, blog hoặc cũng có thể convert thành HTML5. Sử dụng phần mềm Adobe Indesign CS6
Hiển thị các bài đăng có nhãn Flash. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Flash. Hiển thị tất cả bài đăng
7/9/15
Tạo file swf đơn giản với Indesign
Illus mãi rồi, hôm nay đổi gió nào! Video tutorial này sẽ giúp các bạn có thể tạo những hiệu ứng chuyển động đơn giản và xuất ra file Swf (flash player) nhúng trực tiếp lên web, blog hoặc cũng có thể convert thành HTML5. Sử dụng phần mềm Adobe Indesign CS6
5/9/15
Ả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.
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.
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
Menu hiện đại với Filter Effects
Bước 1: Mở 1 file Flash mới, vào Modify / Document (hoặc ấn Ctrl + J) để điều chỉnh thông số cho file này:
Bước 2: Vào File / Import / Import to Library để đưa những bức ảnh bạn muốn vào bên trong thư viện Flash, sau đi đã chọn xong, bạn ấn Ctrl + L thì trong bảng Libary (thư viện) bạn sẽ thấy như hình dưới:
- Chọn công cụ Selection Tool (V) kéo thả những bức ảnh bạn vừa đưa vào thư viện ra ngoài khung trình chiếu:
Bước 3: Vẫn tiếp tục sử dụng Selection Tool (V), click chọn vào bức ảnh đầu tiên, ấn F8 để convert nó sang dạng Moive Clip:
- Trong bảng Properties (Ctrl + F3) các bạn nhớ là phải điền tên anh1 vào trong ô Instance Name
Bước 4: Click 2 lần vào Moive Clip vừa tạo và chúng ta sẽ làm viêc bên trong của nó.
- Tiếp tục dùng công cụ Selection Tool (V) chọn bức ảnh đầu tiên và một lần nữa convert nó sang dạng Movie Clip.
- Click chọn frame 15 và ấn phím F6
- Trong bảng Properties (Ctrl + F3) các bạn hãy chọn Filter.
- Tiếp theo hãy click chọn biểu tượng hình chữ thập và chọn Bevel như hình dưới:
- Điều chỉnh các thông số như sau:
1. Blur X and Y : 13
2. Quality : High
3. Strenght: 1000%
4. Shadow and Highlight:#000000
5. Type:Inner
- Giờ bạn sẽ được một hình như sau:
Bước 5: Click chuột phải vào khoảng xám bất kỳ giữa frame 1 và frame 15 chọn Create Motion Tween
Bước 6: Tạo 1 layer mới đặt tên là "Text", trên frame 15 của layer này các bạn hãy ấn F6 để tạo keyframe.
- Chọn công cụ Text Tool (A), trong bảng properties chúng ta điều chỉnh như sau:
- Sau đó viết Text lên bức ảnh:
- Chọn frame 15 của Layer Text, ấn F6 thêm 4 lần nữa, tại frame 16 và 18 các bạn hãy ấn phím Delete (bước này chúng ta làm để tạo hiệu ứng nhấp nháy cho Text)
Bước 7: Giờ thì chúng ta sẽ quay trở lại Sence 1.
- Tạo thêm 1 Layer mới (đặt tên là Invisible Button 1)
Chú ý: Về cách tạo Invisible Button tôi đã nói khá nhiều trong những bài viết của mình nên giờ có lẽ cũng không cần nhắc lại nữa. Nếu bạn nào chưa biết có thể tham khảo tại các bài viết trước trong Website.
- Tại frame đầu tiên của layer Invisible Button các bạn hãy ấn phím F9 để mở bảng Action và dán đoạn mã sau vào:
on (rollOver) {
_root.mouse_over_anh1 = true;
} on (rollOut) {
_root.mouse_over_anh1 = false;
} on (release){
getURL("http://zensoft.vn/");
}
Bước 8: Sau đó hãy tạo 1 layer mới Action, tại frame đầu tiên của layer này chúng ta sẽ ấn F9 để mở bảng Action và dán đoạn mã sau vào:
_root.anh1.onEnterFrame = function() {
if (mouse_over_anh1) {
_root.anh1.nextFrame();
} else {
_root.anh1.prevFrame();
}
};
Bước 9: Đây là ví dụ tôi làm với bức ảnh đầu tiên, các bạn hãy làm tương tự đối với những bức ảnh còn lại. Nhưng hãy lưu ý là chúng ta phải thay đổi Instance Name cho thích hợp.
Sau khi đã làm xong ấn Ctrl + Enter để kiểm tra kết quả. Chúc các bạn thành công.
Hướng dẫn tạo phần mềm nghe nhạc đa chức năng
Bước 1: Vào Window-Components-User-InterFalce, kéo cái List ra ngoài, đặt tên là “danhsach”.Bước 2: Vào lại Components tìm và lôi ra cái gọi là MediaPlayback, đặt tên là “WinMusic”.
Cái này dùng để chơi nhạc đấy.
Bước 3: Vào lại Components tìm và lôi ra cái Button, đặt tên cho nó là “Open_btn”. Cái button này để mở file nhạc và load vào danh sách.
Bước 4: Tạo 4 button điều khiển nhạc và đặt tên cho chúng là “start_btn”, ”stop_btn”, ”back_btn”, ”forward_btn”.
Bước 5: Sắp xếp các bộ phận trên cho đẹp đẹp một tý ở Frame1 Layer1, Code chúng ta để ở Frame 1 Layer 2. Code mình để ở bên dưới.
Bước 6: Lưu lại với cái tên dễ thương là “NeroPlayer”. Tạo thư mục “Music” nằm trong ổ đĩa D vì cái máy của mình chỉ biết hát nhạc nằm trong đường dẫn D:\Music\ .
Nếu muốn chỉnh lại đường dẫn thì bạn sửa lại MusicLink = "file:///D|/MUSIC/";
Chúc bạn thành công. Bài sau mình sẽ hướng dẫn các bạn làm một cái mày trình chiếu hình ảnh, cái máy xem phim, và chơi game flash. Hic, và sau đó gộp chúng lại tạo thành một cái máy đa năng. Túm lại nó đa năng hơn Win Media Player nhiều. Hơ hơ.
CODE:
// Brown Con File Music//
import flash.net.FileReferenceList;
import flash.net.FileReference;
var listener:Object = new Object();
listener.onSelect = function(fileRefList:FileReferenceList) {
var list:Array = fileRefList.fileList;
var item:FileReference;
for(var i:Number = 0; i < list.length; i++) {
item = list[i];
// Add Item vao List danhsach //
danhsach.addItem({label:item.name, data:i});
danhsach.setPropertiesAt(i, {backgroundColor:0xFFCCFF, icon: "happiniss"});
danhsach.sort(Array.RETURNINDEXEDARRAY);
danhsach.selectedIndex = 0;
}
}
var fileRef:FileReferenceList = new FileReferenceList();
fileRef.addListener(listener);
//
Open_btn.addEventListener("click", uploadSong);
function uploadSong(event:Object):Void {
fileRef.browse([{description: "MP3 Files - NguyenVu Music", extension: "*.mp3"}, {description: "All Files", extension: "*.*"}]);
}//
// Cac Ham Dieu Khien Cai May Biet Hat ^^
var song:Sound = new Sound(this);
var nextsong = 0;
function START(){
nextsong = danhsach.selectedItem.data;
baihat = danhsach.selectedItem.label;
WinMusic.contentPath = MusicLink+baihat;
WinMusic.play();
}
function FORWARD(){
nextsong +=1;
baihat = danhsach.getItemAt(nextsong).label;
WinMusic.contentPath = MusicLink+baihat;
danhsach.selectedIndex = nextsong;
WinMusic.play();
}
function BACK(){
nextsong -= 1;
baihat = danhsach.getItemAt(nextsong).label;
WinMusic.contentPath = MusicLink+baihat;
danhsach.selectedIndex = nextsong;
WinMusic.play();
}
// Gan Cac Ham Dieu Khien Vao Cac Button Dieu Khien
start_btn.onPress = function(){
START();
}
stop_btn.onPress = function(){
WinMusic.stop();
}
forward_btn.onPress = function(){
FORWARD();
}
back_btn.onPress = function(){
BACK();
}
// Cai May Tu Dong Chuyen Bai Khi Ca Het Bai Hat
WinMusic.complete = function(){
nextsong +=1;
danhsach.selectedIndex = nextsong;
baihat = danhsach.getItemAt(nextsong).label;
tenbai = baihat;
WinMusic.contentPath = MusicLink+baihat;
WinMusic.play();
}
// Day La Cai Link
MusicLink = "file:///D|/MUSIC/";
//
// End !!!
Tạo album ảnh bằng kỹ thuật mask
Trong bài hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một hiển thị album ảnh sành điệu bằng kỹ thuật mask trong chương trình Flash. Bạn sẽ không phải sử dụng một đoạn Action Script nào trong bài hướng dẫn này. Có thể áp dụng bài này để tạo album ảnh, banner website, gallery quảng cáo...
Bước 1
Bạn hãy chuẩn bị các bức ảnh cần thiết để đưa vào trong bài này, lưu ý là các bức ảnh nên có kích thước bằng nhau.
Bước 2
Tạo một file flash mới. Nhấn Ctrl + J (Document Properties) và thiết lập độ rộng của file là 300 px, chiều cao là 225 px (hoặc theo kích thước của các bức ảnh mà bạn đã chuẩn bị). Màu nền chọn là màu #2B2B2B, và tốc độ Frame rate là 32, sau đó kích OK.
Bước 3
Đặt lại tên cho layer hiện tại là photo 1. Kích đúp vào nên mặc định của nó (Layer 1) và đổi tên. Nhấn Enter sau khi đã nhập xong tên mới!
Bước 4
Vào File > Import > Import to Library. Trong cửa sổ duyệt file, chọn các bức ảnh mà bạn đã chuẩn bị (trong ví dụ này là 3 ảnh photo 1, photo 2, photo 3) và giữ phím Shift trong khi chọn các bức ảnh. Sau đó kích vào Open. Nếu phần Flash Library (Ctrl+L) của bạn đang được mở, bạn sẽ thấy 3 bức ảnh xuất hiện trong list danh sách library.
Bước 5
Chọn công cụ Selection Tool (V) và sử dụng công nghệ kéo thả để kéo bức ảnh đầu tiên từ Library vào phần làm việc của flash.
Bước 6
Trong khi bức ảnh trong phần làm việc vẫn được chọn, vào phần Align Panel (Ctrl + K) và chọn các thành phần sau:
- Kích bật nút To Stage của phần Align/Distribute
- Kích vào nút Align horizontal center
- Kích vào nút Align vertical center
Sau đó nhấn phím F8 (Convert to Symbol) để chuyển ảnh đang chọn sang phần Movie Clip Symbol.
Bước 7
Kích vào frame 25 và nhấn phím F6. Trong khi vẫn đang chọn frame 25, sử dụng công cụ Selection Tool (V) và kích một lần vào bức ảnh để chọn nó. Sau đó vào phần Properties Panel (Ctrl+F3) ở phía dưới cửa sổ làm việc. Trong phần bên phải bạn sẽ thấy menu Color. Chọn Alpha và kéo độ tương phản xuống 20%.
Bước 8
Trở lại frame đầu tiên, chọn lại công cụ Selection Tool (V) và kích vào bức ảnh để chọn nó. Lại vào phần Properties Panel (Ctrl+F3), và tại menu Color chọn Advanced. Kích vào nút Settings và chỉnh các thành phần Advanced Effect như sau:
Bước 9
Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa 2 keyframe trên thanh timeline và chọn Create Motion Tween từ menu xuất hiện.
Bước 10
Tạo một layer mới phía trên layer photo 1 và đổi tên thành mask 1.
Bước 11
Chọn layer mask 1 và sử dụng công cụ Rectangle Tool (R). Trong phần Colors trên Tool Panel, khóa màu Stroke bằng cách kích vào biểu tượng bút chì nhỏ và chọn ô vuông có gạch chéo đỏ. Fill color thì chọn màu trắng, sau đó vẽ một hình chữ nhật ở chính giữa bức ảnh với kích thước 8x6 px.
Bước 12
Kích vào frame 12 và nhấn phím F6. Chọn công cụ Free Transform Tool (Q) và thực hiện theo thao tác sau:
Bước 13
Kích vào frame 25 và nhấn F6. Lại sử dụng công cụ Free Transform Tool (Q) và thực hiện theo thao tác sau
Bước 14
Chọn layer mask 1 và vào phần Properties Panel (Ctrl+F3) dưới cửa sổ làm việc. Trong phần bên trái, bạn sẽ thấy menu Tween xổ xuống, chọn Shape như hình sau:
Bước 15
Chọn layer mask 1 và chuyển nó sang dạng mask bằng cách kích vào tên layer mask 1 và chọn Mask
Bước 16
Tạo một layer mới lên trên layer mask 1 và đặt tên nó là photo 1.1
Bước 17
Trở lại frame 25 của layer photo 1 và nhấn Ctrl + C (Copy). Sau đó, chọn frame 5 của layer photo 1.1 và nhấn phìm F6. Vẫn tại frame 5 này, nhấn Ctrl+Shift+V (Paste in Place)
Bước 18
Chọn công cụ Selection Tool (V) và kích một lần vào ảnh để chọn nó. Vào phần Properties Panel (Ctrl + F3), tại menu Color ở phía bên phải, chọn Alpha và độ tương phản kéo xuống 40%.
Bước 19
Tạo một layer mới lên trên layer photo 1.1 và đặt tên là mask 1.1
Bước 20
Chọn frame 5 và nhấn F6. Sau đó trở lại frame 1 của layer mask 1 và nhấn Ctrl + C (Copy). Trở lại frame 5 của layer mask 1.1 và nhấn Ctrl+Shift+V (Paste in place).
Bước 21
Kích vào frame 17 của layer mask 1.1 và nhấn F7 (tạo keyframe trắng). Sau đó vào frame 12 của layer mask 1 và nhấn Ctrl+C (Copy). Trở lại frame 17 của layer mask 1.1 và nhấn Ctrl+Shift+V (Paste in Place).
Bước 22
Kích vào frame 29 của layer mask 1.1 và nhấn F7 lần nữa. Vào frame 25 của layer mask 1 và nhấn Ctrl + C. Trở lại frame 29 của layer mask 1.1 và nhấn Ctrl+Shift+V (Paste in Place).
Bước 23
Chọn layer mask 1.1, vào phần Properties Panel (Ctrl + F3). Trong phần bên trái tại menu Tween, chọn Shape.
Bước 24
Kích chuột phải vào tên layer mask 1.1 và chọn Mask.
Bước 25
Kích vào frame 29 của layer photo 1.1, mask 1 và photo 1 sau đó nhấn phím F5.
Thực hiện tương tự với từng bước mask tiếp theo và các bức ảnh tiếp theo.
Bước 1
Bạn hãy chuẩn bị các bức ảnh cần thiết để đưa vào trong bài này, lưu ý là các bức ảnh nên có kích thước bằng nhau.
Bước 2
Tạo một file flash mới. Nhấn Ctrl + J (Document Properties) và thiết lập độ rộng của file là 300 px, chiều cao là 225 px (hoặc theo kích thước của các bức ảnh mà bạn đã chuẩn bị). Màu nền chọn là màu #2B2B2B, và tốc độ Frame rate là 32, sau đó kích OK.
Bước 3
Đặt lại tên cho layer hiện tại là photo 1. Kích đúp vào nên mặc định của nó (Layer 1) và đổi tên. Nhấn Enter sau khi đã nhập xong tên mới!
Bước 4
Vào File > Import > Import to Library. Trong cửa sổ duyệt file, chọn các bức ảnh mà bạn đã chuẩn bị (trong ví dụ này là 3 ảnh photo 1, photo 2, photo 3) và giữ phím Shift trong khi chọn các bức ảnh. Sau đó kích vào Open. Nếu phần Flash Library (Ctrl+L) của bạn đang được mở, bạn sẽ thấy 3 bức ảnh xuất hiện trong list danh sách library.
Bước 5
Chọn công cụ Selection Tool (V) và sử dụng công nghệ kéo thả để kéo bức ảnh đầu tiên từ Library vào phần làm việc của flash.
Bước 6
Trong khi bức ảnh trong phần làm việc vẫn được chọn, vào phần Align Panel (Ctrl + K) và chọn các thành phần sau:
- Kích bật nút To Stage của phần Align/Distribute
- Kích vào nút Align horizontal center
- Kích vào nút Align vertical center
Sau đó nhấn phím F8 (Convert to Symbol) để chuyển ảnh đang chọn sang phần Movie Clip Symbol.
Bước 7
Kích vào frame 25 và nhấn phím F6. Trong khi vẫn đang chọn frame 25, sử dụng công cụ Selection Tool (V) và kích một lần vào bức ảnh để chọn nó. Sau đó vào phần Properties Panel (Ctrl+F3) ở phía dưới cửa sổ làm việc. Trong phần bên phải bạn sẽ thấy menu Color. Chọn Alpha và kéo độ tương phản xuống 20%.
Bước 8
Trở lại frame đầu tiên, chọn lại công cụ Selection Tool (V) và kích vào bức ảnh để chọn nó. Lại vào phần Properties Panel (Ctrl+F3), và tại menu Color chọn Advanced. Kích vào nút Settings và chỉnh các thành phần Advanced Effect như sau:
Bước 9
Kích chuột phải vào bất kỳ vị trí nào trong vùng màu xám giữa 2 keyframe trên thanh timeline và chọn Create Motion Tween từ menu xuất hiện.
Bước 10
Tạo một layer mới phía trên layer photo 1 và đổi tên thành mask 1.
Bước 11
Chọn layer mask 1 và sử dụng công cụ Rectangle Tool (R). Trong phần Colors trên Tool Panel, khóa màu Stroke bằng cách kích vào biểu tượng bút chì nhỏ và chọn ô vuông có gạch chéo đỏ. Fill color thì chọn màu trắng, sau đó vẽ một hình chữ nhật ở chính giữa bức ảnh với kích thước 8x6 px.
Bước 12
Kích vào frame 12 và nhấn phím F6. Chọn công cụ Free Transform Tool (Q) và thực hiện theo thao tác sau:
Bước 13
Kích vào frame 25 và nhấn F6. Lại sử dụng công cụ Free Transform Tool (Q) và thực hiện theo thao tác sau
Bước 14
Chọn layer mask 1 và vào phần Properties Panel (Ctrl+F3) dưới cửa sổ làm việc. Trong phần bên trái, bạn sẽ thấy menu Tween xổ xuống, chọn Shape như hình sau:
Bước 15
Chọn layer mask 1 và chuyển nó sang dạng mask bằng cách kích vào tên layer mask 1 và chọn Mask
Bước 16
Tạo một layer mới lên trên layer mask 1 và đặt tên nó là photo 1.1
Bước 17
Trở lại frame 25 của layer photo 1 và nhấn Ctrl + C (Copy). Sau đó, chọn frame 5 của layer photo 1.1 và nhấn phìm F6. Vẫn tại frame 5 này, nhấn Ctrl+Shift+V (Paste in Place)
Bước 18
Chọn công cụ Selection Tool (V) và kích một lần vào ảnh để chọn nó. Vào phần Properties Panel (Ctrl + F3), tại menu Color ở phía bên phải, chọn Alpha và độ tương phản kéo xuống 40%.
Bước 19
Tạo một layer mới lên trên layer photo 1.1 và đặt tên là mask 1.1
Bước 20
Chọn frame 5 và nhấn F6. Sau đó trở lại frame 1 của layer mask 1 và nhấn Ctrl + C (Copy). Trở lại frame 5 của layer mask 1.1 và nhấn Ctrl+Shift+V (Paste in place).
Bước 21
Kích vào frame 17 của layer mask 1.1 và nhấn F7 (tạo keyframe trắng). Sau đó vào frame 12 của layer mask 1 và nhấn Ctrl+C (Copy). Trở lại frame 17 của layer mask 1.1 và nhấn Ctrl+Shift+V (Paste in Place).
Bước 22
Kích vào frame 29 của layer mask 1.1 và nhấn F7 lần nữa. Vào frame 25 của layer mask 1 và nhấn Ctrl + C. Trở lại frame 29 của layer mask 1.1 và nhấn Ctrl+Shift+V (Paste in Place).
Bước 23
Chọn layer mask 1.1, vào phần Properties Panel (Ctrl + F3). Trong phần bên trái tại menu Tween, chọn Shape.
Bước 24
Kích chuột phải vào tên layer mask 1.1 và chọn Mask.
Bước 25
Kích vào frame 29 của layer photo 1.1, mask 1 và photo 1 sau đó nhấn phím F5.
Thực hiện tương tự với từng bước mask tiếp theo và các bức ảnh tiếp theo.
Tạo một bản đồ tương tác
Bài viết này sẽ hướng dẫn cho bạn làm thế nào để tạo một bản đồ có thể tương tác, mà khi ta di chuyển qua các thành phố được đánh dấu và hiện lên một bức ảnh nhỏ về thành phố đó.
Bằng cách sử dụng lớp Tween để điều khiển sự chuyển động Điểm Dấu. Chúng ta cũng sử dụng các mảng, cá chàm và các vòng lặp để tạo các đoạn mã thông minh và có thể sử dụng lại.
Bắt Đầu
- Tạo một ActionScript mới 1 hoặc 2 Flash movie, thiết lập chiều620x420 px, framerate là 30, để màu nền mặc định. Đặt tên cho layer duynhất trong timeline là Map và chèn ảnh vào trong stage và khóa layer.
Tạo và triển khai các nút bấm
- Tạo một layer mới có tên là Buttons. Chúng ta sẽ sử dụng layer nàyđể tạo nút đầu tiên, sau đó nhân các bản copy của nó thành tất cả cácđiểm thành phố mà chúng ta muốn điểm sáng. chọn Oval Tool và vẽ một vòng tròn bất kỳ trên stage. Đường kính của vòng tròn này là 25px. Trong khi hình vẫn được chọn, nhấn F8 đểchuyển nó thành biểu tượng nút bấm và đặt tên là myButton, đảm bảo rằng điểm đăng ký là center. Dấu mốc sẽ bay qua điểm đăng ký của nút bấm vìvậy để nó ở vị trí center rất quan trọng.
- Bản đồ của chúng ta đã có các điểm đồ họa trong các vị trí củathành phố, điều này có nghĩa là chúng ta sẽ không cần các nút bấm nào khác ngoài những gì đã có trên bản đồ. Chúng ta sẽ ẩn các nút bấm bằngcách cấu hình các Timeline của nó. Nhấn đúp vào vòng tròn để sửa nó,timeline sẽ thay đổi ở button, ta kéo nội dung từ Up frame đến Hitframe. điều này sẽ tạo cho nút button của chúng ta một điểm hit chứ ko phải là điểm nhìn đồ họa.
Nút bấm của chúng ta đã sẵn sàng, quay lại với timeline chính và đặt button đầu tiên vào các điểm sáng được định vị sẵn trên bản đồ. sau đó, vào thuộc tính Inspector và đặt tên cho button là muscat_btn.
Nút bấm của chúng ta đã sẵn sàng, quay lại với timeline chính vàđặt button đầu tiên vào các điểm sáng được định vị sẵn trên bản đồ. sauđó, vào thuộc tính Inspector và đặt tên cho button là muscat_btn.
Chúng ta đã có nút đầu tiên, copy và paste nút này và đặt nó theo các vị trí đã đánh đâu cho Sohar, Dubai và Abu Dhabi. Bạn đừng quên đổi tên theo các địa điểm đó nhé: sohar_btn, dubai_btn và abu_dabhi_btn.
Tạo dấu mốc bản đồ
- Đảm bảo 2 layer đang tồn tại đã được khóa, tạo một layer mới cótên là Marker. Cho các ảnh đánh dấu vào trong stage để sử dụng như một dấu mốc. Trong khi đối tượng được chọn, nhấn F8 và chuyển thành biểutượng Movie Clip, có tên là myMarker. Thông thường, chúng ta gán điểmđăng ký cho đỉnh của dấu mốc, vì vậy khi nó di chuyển thì đỉnh của dấu mốc sẽ được coi là điểm then chốt. Nhấn đúp vào đối tượng ở trên stage để chuyển thành Movie clip, chú ý đển nơi của dấu + (plus) ở trên stagevà chuyển dấu mốc để đỉnh của nó chạm vào dấu + (plus). Khi đã làm xong thì khóa layer lại
- Trong một timeline của movie clip có một layer và một frame . đặttên layer này là Marker, sau đó chèn 4 frame phụ cho layer này (nhấn F54 lần). Tạo thêm một layer mới cho timeline này và đặt tên là Cities,chèn 4 keyframes phụ (trong khi layer này được chọn nhấn F6 4 lần).Timeline của bạn sẽ giống như hình bên dưới.
- Bây giờ, chúng ta chèn ảnh cho mỗi thành phố. Chọn layer Cities,nhấn vào frame thứ 2 và chọn Frame -> Import -> Import to stagevà chọn Muscat image. Bạn phải đặt ảnh vào đúng đầu của dấu mốc đượcminh họa trong ảnh bên dưới
- Mỗi lần nhấn vào frame 2 của layer Cities, chọn Properties Inspector và gán tên Muscat như nhãn của Frame 2
Bây giờ từng bước 1, import mỗi bức ảnh của thành phó vào framekhác nhau của layer Cities, đặt chúng vào vị trí bên phải của dấu mốc.Sau đó gán nhãn cho các Frame với tên của thành phố (Sohar, dubai,abu_dhabi). Chúng ta không cần phải quan tâm đến thứ tự của chúng bởivì những bức ảnh sẽ được gọi bởi tên của frame chứ không phải số frame.
Cuối cùng, chèn hàm stop() vào frame đầu tiên của timeline để dừngkhi để chúng tự động chạy. Nhấn chuột phải vào Frame 1 của layer Citiesvà mở cửa sổ Actions, nhập đoạn code.
stop();
- Bây giờ quay lại timeline chính và gán tên marker_mc cho movie clip
Chú ý: Bạn phải chọn bộ loc Drop Shadow cho dấu mốc để cải thiện cách hiển thị trên bản đồ.
Chèn ActionScript
- Tất cả sự năng động của movie clip đã được thiết lập, tạo một layer mới có tên là Actions. Paste đoạn mã dưới:
import mx.transitions.Tween;
import mx.transitions.easing.*;
var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]
function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);
}
for (var i = 0; i<cities.length; i++){
var my_btn = this[cities+"_btn"];
my_btn.myCity = cities;
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}
}
Giải Thích Mã
- 2 Dòng mã dưới chỉ để import 2 lớp Tween và easing để sử dụng hiệu ứng Tween.
import mx.transitions.Tween;
import mx.transitions.easing.*;
- Phân đoạn thứ 2 (1 dòng) là mảng chứa tên của các thành phố. Các tên ở đây theo tên của các nút của phân đoạn đầu tiên mà sẽ được tạosau này. Nó cũng cùng tên với các nhãn frame mà chúng ta đã sử dụng.Bạn nên chú ý đến các giá trị này phân biệt hoa thường.
var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]
- Phân đoạn mã thứ 3 tạo một hàm mà sử dụng lớp Tween để chuyển dấumốc từ vị trí hiện tại tới vị trí của các nút sẽ gọi hàm này. Chúng ta tạo 2 đối tượng tween để đối tượng theo 2 chiều ngang và dọc.
function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);
}
- Phân đoạn mã cuối cùng sử dụng một vòng lặp để duyệt qua mảngcities, tạo tên thể hiện cho các nút và gán sự kiện OnRollOver để xử lýcác nút để gọi hàm mover và chỉ định các dấu mốc di chuyển hay dừng lạiở trên ảnh của thành phố được chọn.
for (var i = 0; i<cities.length; i++){
var my_btn = this[cities+"_btn"];
my_btn.myCity = cities;
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}
}
Vậy là đã hoàn thành Nhấn Ctrl + Enter để kiểm tra Kết quả chúc các bạn thành công.
Bằng cách sử dụng lớp Tween để điều khiển sự chuyển động Điểm Dấu. Chúng ta cũng sử dụng các mảng, cá chàm và các vòng lặp để tạo các đoạn mã thông minh và có thể sử dụng lại.
Bắt Đầu
- Tạo một ActionScript mới 1 hoặc 2 Flash movie, thiết lập chiều620x420 px, framerate là 30, để màu nền mặc định. Đặt tên cho layer duynhất trong timeline là Map và chèn ảnh vào trong stage và khóa layer.
Tạo và triển khai các nút bấm
- Tạo một layer mới có tên là Buttons. Chúng ta sẽ sử dụng layer nàyđể tạo nút đầu tiên, sau đó nhân các bản copy của nó thành tất cả cácđiểm thành phố mà chúng ta muốn điểm sáng. chọn Oval Tool và vẽ một vòng tròn bất kỳ trên stage. Đường kính của vòng tròn này là 25px. Trong khi hình vẫn được chọn, nhấn F8 đểchuyển nó thành biểu tượng nút bấm và đặt tên là myButton, đảm bảo rằng điểm đăng ký là center. Dấu mốc sẽ bay qua điểm đăng ký của nút bấm vìvậy để nó ở vị trí center rất quan trọng.
- Bản đồ của chúng ta đã có các điểm đồ họa trong các vị trí củathành phố, điều này có nghĩa là chúng ta sẽ không cần các nút bấm nào khác ngoài những gì đã có trên bản đồ. Chúng ta sẽ ẩn các nút bấm bằngcách cấu hình các Timeline của nó. Nhấn đúp vào vòng tròn để sửa nó,timeline sẽ thay đổi ở button, ta kéo nội dung từ Up frame đến Hitframe. điều này sẽ tạo cho nút button của chúng ta một điểm hit chứ ko phải là điểm nhìn đồ họa.
Nút bấm của chúng ta đã sẵn sàng, quay lại với timeline chính và đặt button đầu tiên vào các điểm sáng được định vị sẵn trên bản đồ. sau đó, vào thuộc tính Inspector và đặt tên cho button là muscat_btn.
Nút bấm của chúng ta đã sẵn sàng, quay lại với timeline chính vàđặt button đầu tiên vào các điểm sáng được định vị sẵn trên bản đồ. sauđó, vào thuộc tính Inspector và đặt tên cho button là muscat_btn.
Chúng ta đã có nút đầu tiên, copy và paste nút này và đặt nó theo các vị trí đã đánh đâu cho Sohar, Dubai và Abu Dhabi. Bạn đừng quên đổi tên theo các địa điểm đó nhé: sohar_btn, dubai_btn và abu_dabhi_btn.
Tạo dấu mốc bản đồ
- Đảm bảo 2 layer đang tồn tại đã được khóa, tạo một layer mới cótên là Marker. Cho các ảnh đánh dấu vào trong stage để sử dụng như một dấu mốc. Trong khi đối tượng được chọn, nhấn F8 và chuyển thành biểutượng Movie Clip, có tên là myMarker. Thông thường, chúng ta gán điểmđăng ký cho đỉnh của dấu mốc, vì vậy khi nó di chuyển thì đỉnh của dấu mốc sẽ được coi là điểm then chốt. Nhấn đúp vào đối tượng ở trên stage để chuyển thành Movie clip, chú ý đển nơi của dấu + (plus) ở trên stagevà chuyển dấu mốc để đỉnh của nó chạm vào dấu + (plus). Khi đã làm xong thì khóa layer lại
- Trong một timeline của movie clip có một layer và một frame . đặttên layer này là Marker, sau đó chèn 4 frame phụ cho layer này (nhấn F54 lần). Tạo thêm một layer mới cho timeline này và đặt tên là Cities,chèn 4 keyframes phụ (trong khi layer này được chọn nhấn F6 4 lần).Timeline của bạn sẽ giống như hình bên dưới.
- Bây giờ, chúng ta chèn ảnh cho mỗi thành phố. Chọn layer Cities,nhấn vào frame thứ 2 và chọn Frame -> Import -> Import to stagevà chọn Muscat image. Bạn phải đặt ảnh vào đúng đầu của dấu mốc đượcminh họa trong ảnh bên dưới
- Mỗi lần nhấn vào frame 2 của layer Cities, chọn Properties Inspector và gán tên Muscat như nhãn của Frame 2
Bây giờ từng bước 1, import mỗi bức ảnh của thành phó vào framekhác nhau của layer Cities, đặt chúng vào vị trí bên phải của dấu mốc.Sau đó gán nhãn cho các Frame với tên của thành phố (Sohar, dubai,abu_dhabi). Chúng ta không cần phải quan tâm đến thứ tự của chúng bởivì những bức ảnh sẽ được gọi bởi tên của frame chứ không phải số frame.
Cuối cùng, chèn hàm stop() vào frame đầu tiên của timeline để dừngkhi để chúng tự động chạy. Nhấn chuột phải vào Frame 1 của layer Citiesvà mở cửa sổ Actions, nhập đoạn code.
stop();
- Bây giờ quay lại timeline chính và gán tên marker_mc cho movie clip
Chú ý: Bạn phải chọn bộ loc Drop Shadow cho dấu mốc để cải thiện cách hiển thị trên bản đồ.
Chèn ActionScript
- Tất cả sự năng động của movie clip đã được thiết lập, tạo một layer mới có tên là Actions. Paste đoạn mã dưới:
import mx.transitions.Tween;
import mx.transitions.easing.*;
var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]
function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);
}
for (var i = 0; i<cities.length; i++){
var my_btn = this[cities+"_btn"];
my_btn.myCity = cities;
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}
}
Giải Thích Mã
- 2 Dòng mã dưới chỉ để import 2 lớp Tween và easing để sử dụng hiệu ứng Tween.
import mx.transitions.Tween;
import mx.transitions.easing.*;
- Phân đoạn thứ 2 (1 dòng) là mảng chứa tên của các thành phố. Các tên ở đây theo tên của các nút của phân đoạn đầu tiên mà sẽ được tạosau này. Nó cũng cùng tên với các nhãn frame mà chúng ta đã sử dụng.Bạn nên chú ý đến các giá trị này phân biệt hoa thường.
var cities:Array = ["muscat", "sohar", "dubai","abu_dhabi"]
- Phân đoạn mã thứ 3 tạo một hàm mà sử dụng lớp Tween để chuyển dấumốc từ vị trí hiện tại tới vị trí của các nút sẽ gọi hàm này. Chúng ta tạo 2 đối tượng tween để đối tượng theo 2 chiều ngang và dọc.
function mover (targetX, targetY){
currentX = marker_mc._x;
currentY = marker_mc._y;
var xTween:Tween = new Tween(marker_mc, "_x", Strong.easeOut, currentX, targetX, .5, true);
var yTween:Tween = new Tween(marker_mc, "_y", Back.easeOut, currentY, targetY, 1.5, true);
}
- Phân đoạn mã cuối cùng sử dụng một vòng lặp để duyệt qua mảngcities, tạo tên thể hiện cho các nút và gán sự kiện OnRollOver để xử lýcác nút để gọi hàm mover và chỉ định các dấu mốc di chuyển hay dừng lạiở trên ảnh của thành phố được chọn.
for (var i = 0; i<cities.length; i++){
var my_btn = this[cities+"_btn"];
my_btn.myCity = cities;
my_btn.onRollOver = function() {
mover( this._x, this._y);
marker_mc.gotoAndStop(this.myCity);
}
}
Vậy là đã hoàn thành Nhấn Ctrl + Enter để kiểm tra Kết quả chúc các bạn thành công.
Đăng ký:
Bài đăng (Atom)
