Hướng dẫn học làm flash cơ bản

Thiết kế Banner flash hoàn thiện

Bước 1
Mở một file flash mới, vào Modify > Document và thiết lập các thuộc tính Width: 430px; Height: 180px; Frame rate set: 22fps

Bước 2
Tìm 3 bức ảnh để đưa lên banner và thiết lập kích thước của ảnh tương tự như nền (430x180px). Bạn có thể sử dụng Photoshop hay bất cứ chương trình đồ hoạ nào khác để chỉnh sửa

Bước 3
Click đúp vào layer1 và đổi tên thành picture1

Bước 4
Vào File > Import > Import to Stage (Ctrl + R) và Import bức tranh đầu tiên. Sau đó sử dụng công cụ căn lề Align (Ctrl + F3) để căn nó vào chính giữa nền.

Bước 5
Chọn frame 80 của layer picture và nhấn phím F5

Bước 6
Thêm một layer mới với tên là line1. Chọn layer mới, sử dụng công cụ Rectangle Tool (R), Stroke color thiết lập không màu, Fill color chọn bất cứ màu nào mà bạn muốn rồi vẽ một hình chữ nhật với kích thước 10x20px. Sau đó, sử dụng Align Panel để đặt hình vừa vẽ theo vị trí middle right như hình dưới đây:

 

Bước 7
Click vào frame 10 và nhấn F6. Sau đó chọn Free Transform Tool (Q) và làm theo hình vẽ dưới đây

Bước 8
Click vào frame 20, nhấn F6 và cũng sử dụng công cụ Free Transform Tool để làm theo hình dưới

Bước 9
Trở lại Frame1 và sau đó là frame 10, mở Properties Panel (Ctrl + F3), tại Tween chọn Shape

Bước 10
Chọn layer line1 và chuyển đổi nó sang Mask bằng cách click chuột phải vào layer chọn Mask.

Bước 11
Chọn layer line1, thêm một layer mới với tên là picture2

Bước 12
Chọn frame 60 của layer mới và nhấn F6. Sau đó nhấn Ctrl + R (Import to Stage) và Import một bức tranh khác.

Bước 13
Chọn frame 160 của layer picture2 và nhấn F5.

Bước 14
Thêm một layer mới với tên là line2 và lặp lại từ bước 6 -> bước 10 nhưng khác với line1, hoạt động của hình chữ nhật tại line2 sẽ bắt đầu từ phía trên trái. Hãy xem hình dưới.
 

Vậy là chúng ta đã hoàn thiện được 2 bức tranh đầu tiên trong banner rồi. Hãy lặp laij bước này nếu bạn muốn thêm nhiều hình nữa vào banner

Bước 15
Nếu bạn muốn đặt link vào các bức tranh thì việc đầu tiên cần làm là bạn chuyển đổi tranh sang dạng Movie Clip, rồi mở Action Script Panel (F9) ra và đưa vào đoạn mã sau (Chú ý thay URL website của bạn vào):

on (release) {
getURL ("http://www.quantrimang.com","_blank");
}

Download file nguồn

Tạo menu Flash dọc

.

Bước 1

Tạo một file flash mới, vào Modify > Document (Ctrl + J) và thiết lập theo các giá trị như hình dưới

Bước 2

Click đúp vào layer1 và đổi tên thành background. Thêm một layer mới và đặt tên là menu. Sau đó dùng công cụ Rectangle Tool (R) để vẽ 5 hình chữ nhật kích thước 88,5 x 250px với các thiết lập như sau:

Xem hình dưới

Bước 3

Chọn công cụ Text Tool (T) với Fill Color #FFFFFF và nhập vào nút đầu tiên của menu với chữ “Home”

Bước 4

Chọn Modify > Transform > Rotate 90o CW (Ctrl + Shift + 9)

Bước 5

Chọn nút đầu tiên trong menu (Home), nhấn phím F8 (Convert to Symbol) và chuyển đổi nó sang dạng Movie Clip.

Bước 6

Chọn Movie Clip vừa chuyển, mở Properties Panel (Ctrl + F3) và nhập button1 vào ô

Bước 7

Click đúp vào Movie Clip vừa tạo (Button) hoặc click chuột phải và chọn Edit in Place.

Bước 8

Chọn text Home, nhấn phím Ctrl + X (Cut), thêm một layer mới (layer 2) và dán text vừa cắt vào layer mới tạo (nhấn phím Ctrl + Shift + V) để dán.

Bước 9

Trở lại layer1, click vào frame 20 và nhấn phím F6. Sau đó tại ô Fill Color thiết lập màu #E16802. Trở lại frame1, vào Properties Panel (Ctrl + F3) tại Tween chọn Shape.

Bước 10

Khoá layer1, chọn layer2, vào frame 10 và nhấn phím F6. Chọn Modify > Transform > Rotate 90o CCW (Ctrl + Shift + 7)

Bước 11

Chọn frame 20 và nhấn phím F6. Sau đó sử dụng chuột để kéo chữ Home lên phía trên của nút (hình chữ nhật) như hình dưới

Bước 12

Chọn layer1, vào Properties Panel, tại Tween chọn Motion.

Bước 13

Chọn frame 20 của layer1, mở Action Script Panel (F9) và đưa vào dòng script sau:

stop();

Bước 14

Trở lại Scene chính (Scene 1), thêm một layer mới và đặt tên là Invisible Button 1. Sau đó tạo “Invisible Button” lên trên button đầu tiên (xem hình dưới)

Bước 15

Chọn “Invisible Button”, mở Action Script Panel (F9) và đưa vào đoạn code sau (chú ý đổi link sang địa chỉ mà bạn muốn Home link tới)

on (rollOver) {
      _root.mouse_over_button1 = true;
}
on (rollOut) {
      _root.mouse_over_button1 = fstartlse;
}
on (release){
      getURL("http://www.quantrimang.com/", "blank");
}

Bước 16

Thêm một layer mới với tên là Action Script. Vào frame đầu tiên và đưa vào đoạn script sau:

_root.button1.onEnterFrame = function() {
      if (mouse_over_button1) {
              _root.button1.nextFrame();
          } else {
              _root.button1.prevFrame();
      }
};

Vậy là chúng ta đã hoàn thiện xong nút đầu tiên của menu. Bạn hãy làm theo những bước tương tự như trên để hoàn thiện nốt các nút còn lại trong menu.

Đoạn Script cho “Invisible Button” của các nút khác

on (rollOver) {
     _root.mouse_over_button2 = true;
}
on (rollOut) {
     _root.mouse_over_button2 = fstartlse;
}

on (release){
     getURL("http://www.quantrimang.com/", "blank");
}

Và Action Script cho các nút là

_root.button1.onEnterFrame = function() {
      if (mouse_over_button1) {
              _root.button1.nextFrame();
          } else {
              _root.button1.prevFrame();
      }
}; 
_root.button2.onEnterFrame = function() {
      if (mouse_over_button2) {
              _root.button2.nextFrame();
          } else {
              _root.button2.prevFrame();
      }
}; 
_root.button3.onEnterFrame = function() {
      if (mouse_over_button3) {
              _root.button3.nextFrame();
          } else {
              _root.button3.prevFrame();
      }
}; 
_root.button4.onEnterFrame = function() {
      if (mouse_over_button4) {
              _root.button4.nextFrame();
          } else {
              _root.button4.prevFrame();
      }
};
_root.button5.onEnterFrame = function() {
      if (mouse_over_button5) {
              _root.button5.nextFrame();
          } else {
              _root.button5.prevFrame();
      }
};

Download file nguồn (.fla)

(ST)