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.
Điểm 4.6/5 dựa vào 87 đánh giá
EmoticonEmoticon