Cách thiết kế flash đơn giản, cực đẹp

Nhanluu1294 Nhanluu1294 @Nhanluu1294

Cách thiết kế flash đơn giản, cực đẹp

19/04/2015 01:08 PM
189

Cách sử dụng Flash SlideShow Builder (FSB) cũng khá đơn giản. Hãy tham khảo bài viết sau để thiết kế flash hiệu quả nhất





Cách làm Flash dễ cực


- Bước 1 (Browser): Nhấn vào nút “Browser” trên giao diện -> Tìm đến thư mục chứa các ảnh số cần dùng để tạo slideshow -> Lần lượt kéo và thả các ảnh số cần dùng xuống các khung trống có số thứ tự 1,2,3,4… bên dưới, hoặc nhấn nút “Add All” để đưa toàn bộ ảnh số trong một thư mục vào danh sách xử lý của FSB. Sau khi “Add” xong các ảnh số cần dùng, bạn nhấn vào nút “Edit” trên giao diện để vào bước 2.

- Bước 2 (Edit): Chỉnh độ sắc nét, tương phản, bóng mờ, sắc cạnh của từng ảnh số bằng các thanh trượt nằm trong ô “Basic Editting” -> Chọn các hiệu ứng màu sắc (trắng đen, màu tương phản…) trong ô “Photo Filter”, bạn có thể nhấn nút “Apply to All” để áp dụng hiệu ứng đã chọn cho tất cả các ảnh số -> Thực hiện các động tác xoay ảnh theo đủ chiều hoặc “Crop” hình ảnh ở khung “Rotate and Crop” -> Thực hiện thuyết trình cho từng ảnh số trong slideshow bằng giọng nói của chính mình ở “Audio Record”. Bạn có thể cắm microphone vào máy tính, sau đó nhấn vào nút “Record” để thực hiện quá trình thu âm thuyết trình trực tiếp vào slideshow -> Nhấn vào nút “Text Setttings” để chèn các đoạn văn bản vào các ảnh số trong slideshow. Gõ văn bản cần chèn vào khung “Input the specific illustration to your photo”. Chọn hiệu ứng cho chữ ở “Funny Text Effect”, cũng như chọn font chữ, màu sắc, kích cỡ chữ ở các ô tương ứng. FSB làm việc tốt với mọi font chữ tiếng Việt. Nhấn vào nút “Effect” để vào bước 3.

- Bước 3 (Effect): đây là bước chọn hiệu ứng flash cho slidedshow. Bạn có thể chọn 1 trong 200 hiệu ứng sẵn có để áp dụng cho toàn bộ slideshow hay chỉ áp dụng cho một số hình ảnh… Nhưng tốt hơn hết bạn nên nhấn vào nút “Randomize All” để tất cả các hiệu ứng flash này xuất hiện lần lượt trên toàn bộ slideshow của bạn. Nhấn vào nút “Theme” để vào bước 4.

- Bước 4 (Theme): bạn có thể chọn 1 trong 30 kiểu khung flash cho slideshow ở ô “Theme” -> chọn màu nền cho khung flash ở “Background Color” -> Đặc biệt, bạn có thể chèn cả một album nhạc số của mình vào slideshow flash này ở khung “Background Music”. Nhấn vào dấu “Add” (+) trong giao diện, sau đó tìm đến các bài nhạc số yêu thích của mình để lần lượt đưa vào slideshow. Nhấn vào nút “Publish” để vào bước 5.

- Bước 5 (Publish): đây là bước cuối cùng để hoàn tất slideshow. Trên giao diện xuất bản này, bạn có thể chọn 1 trong 5 kiểu xuất slideshow là: “Publish as SWF” (xuất slideshow thành dạng file flash SWF); “Publish as Online Album” (xuất thành dạng album ảnh để xem trên mạng); “Publish as HTML” (xuất thành dạng một trang web); “Publish as EXE” (xuất thành dạng file tự vận hành EXE) và “Publish as Screen Saver” (xuất thành một trình bảo vệ màn hình).

Chính khả năng xuất slideshow đa hệ như trên đã đưa Flash SlideShow Builder trở thành ứng dụng tạo slide show thuộc hàng số một hiện nay
Download http://download.flash-slide-show.com/fssb_trial.exe

Dưới đây là hình ảnh về Flash SlideShow Builder


http://www.softpedia.com/screenshots...-Builder_3.png






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

Macromedia Flash - 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

   Macromedia Flash - Quả trứng vỡ

Macromedia Flash - Quả trứng vỡ

Bước 1. Tạo 1 file có thông số như hình 1:


Hình 1

Bước 2. Dùng công cụ Oval Tool (O), bỏ màu viền, chọn màu tô là màu gần giống quả trứng gà, và vẽ một quả trứng (xem hình 2)


Hình 2

Bước 3. Chọn Window > Align để làm xuất hiện bảng Align & Info & Transform (xem hình 3)


Hình 3

Bước 4. Nhấp chọn quả trứng trên khung làm việc (Stage), trong bảng Align nhấp chọn 3 vị trí như trên hình 4 để đảm bảo quả trứng nằm ngay giữa khung làm việc (xem hình 4)


Hình 4

Bước 5. Nhấp chuột phải vào Frame 10 và chọn Insert Frame (xem hình 5)


Hình 5

Bước 6. Tạo một layer mới (xem hình 6)


Hình 6

Bước 7. Nhấp chọn Frame 1 của Layer 2, trên bảng công cụ chọn Pencil Tool và vẽ một đường nứt (xem hình 7)


Hình 7

Bước 8. Nhấp chuột phải vào Frame 2 của Layer 2 và chọn Insert KeyFrame (xem hình 8)


Hình 8

Bước 9. Thực hiện tương tự cho các Frame 3,4...,10 (xem hình 9)


Hình 9

Bước 10. Nhấp chọn lại Frame 1 của Layer 2, chọn công cụ Eraser Tool và xóa gần hết đường nứt (xem hình 10)


Hình 10

Bước 11. Thực hiện tương tự thao tác xóa cho Frame 2, 3, 9 (lưu ý rằng đường nứt ở Frame 2 dài hơn Frame 1 và không thực hiện thao tác xóa cho Frame 10) (xem hình 11 minh họa cho Frame 2)


Hình 11

Bước 12. Tạo một layer mới (xem hình 12)


Hình 12

Bước 13. Nhấp chuột phải vào Frame 11 của Layer 3 và chọn Insert KeyFrame (xem hình 13)


Hình 13

Bước 14. Nhấp chọn Frame 1 của Layer 1, nhấn Ctrl-C để copy quả trứng…để dành trên clipboard (xem hình 14)


Hình 14

Bước 15. Nhấp chọn Frame 11 của Layer 3, nhấp chuột phải trên khung làm việcvà chọn Paste in Place để dán (Paste) quả trứng đã copy ở B14 vào đúng tọa độ đó (xem hình 15)


Hình 15

Bước 16. Nhấp chọn Frame 10 của Layer 2, nhấn Ctrl-C để copy đường nứt…để dành trên clipboard (xem hình 16)


Hình 16

Bước 17. Nhấp chọn Frame 11 của Layer 3, nhấp chuột phải trên khung làm việc và chọn Paste in Place để dán (Paste) đường nứt đã để dành ở B16 vào ngay đúng tọa độ đó (xem hình 17)


Hình 17

Bước 18. Chọn công cụ Selection Tool (V),(lưu ý rằng ta đang ở Frame 11 của Layer 3), nhấp chuột phải vào nửa quả trứng bên phải đường nứt, chọn Free Transform (xem hình 18)


Hình 18

Bước 19. Dời tâm quay (vòng tròn nằm giữa khung Free Transform) về ngay chân đường nứt (xem hình 19-tâm quay được khoanh tròn màu đen)


Hình 19

Bước 20. Để chuột bên ngoài khung Free Transform và rê chuột để quay quả trứng về bên phải chút xíu (xem hình 20)


Hình 20

Bước 21. Thực hiện tương tự cho nửa bên trái (xem hình 21)


Hình 21

Bước 22. Nhấp đúp vào đường nứt để chọn nó và nhấn phím Delete để xóa nó

Bước 23. Nhấp chuột vào Frame 12 của Layer 3 và chọn Insert KeyFrame (xem hình 22)


Hình 22

Bước 24. Thực hiện tương tự cho Frame 13, 14,15 (xem hình 23)


Hình 23

Bước 25. Nhấp chọn Frame 12, chọn nửa phải quả trứng, nhấp chuột phải vào nó và chọn Free Transform (xem hình 24)


Hình 24

Bước 26. Dời tâm quay về chân đường nứt rồi dùng chuột xoay nó về bên phải một chút (xem hình 25)


Hình 25

Bước 26. Thực hiện tương tự B25 cho nửa bên trái

Bước 27. Thực hiện lại bước 25, bước 26 cho các Frame 13, 14, 15

Bước 28. Tạo một lớp mới (xem hình 26)


Hình 26

Bước 29. Nhấp chuột phải vào Frame 15 của lớp mới tạo, chọn Window > Actions để mở bảng Frame-Actions, trong bảng này bạn nhập dòng lệnh: stop(); (xem hình 27)


Hình 27

Bước 30. Nhấn Enter+Ctrl để kiểm tra kết quả.
 

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:

Stroke color: không chọn
Fill color: #A1958A

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)



Cách khắc phục lỗi adobe flash player trên
Kinh nghiệm chụp ảnh với đèn flash
Hướng dẫn làm tuyết rơi trong flash
Hướng dẫn làm phim hoạt hình bằng flash
Hướng dẫn làm flash tặng người yêu
Hướng dẫn làm pháo hoa bằng flash cực đơn giản



(ST)

Hỏi đáp, bình luận, trả bài:
*địa chỉ email của bạn được bảo mật

Hot nhất
Top xink
Bộ sưu tập
Chợ xink
Thanh lý