GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG TỔNG QUAN VỀ FLASH VÙNG LÀM VIỆC TRONG FLASH Khi bạn làm việc Flash, bạn tạo đoạn phim cách vẽ ảnh hay nhập vào ảnh vẽ, xếp Stage, làm chuyển động ảnh với thước thời gian Timeline Bạn tạo vùng chuyển cảnh đoạn phim cách dùng Action (hành vi) để tạo đoạn phim trả lời lại kiện theo nhiều cách đặc biệt Khi đoạn phim tạo xong, bạn xuất thành đoạn phim Flash Player xem chúng Flash Player, trình chiếu đoạn phim chương trình Flash Player độc lập với Flash Bạn xem đoạn phim tạo Flash theo cách sau đây: Trong trình duyệt Internet Netscape Navigator, Microsoft Internet Explorer Các trình duyệt dùng với Flash Player Với điều khiển Flash ActiveX Microsoft Office, Microsoft Internet Explorer Windows môi trường máy chủ ActiveX khác Trong Flash Player, trình ứng dụng độc lập Như chương trình chiếu phim độc lập, file đoạn phim phát mà không cần phần mềm Flash Player ẢNH TRONG FLASH Flash cung cấp nhiều phương pháp để tạo ảnh gốc xuất ảnh gốc sang nhiều chương trình ứng dụng khác Bạn tạo nhiều đối tượng cách dùng công cụ vẽ tô, xác định thuộc tính đối tượng tồn Bạn xem mục Tổng quan cách vẽ làm việc với cách chọn màu Ngoài bạn đưa vào ảnh đồ họa Bitmap hay ảnh Vec-tơ từ chương trình ứng dụng khác thay đổi ảnh nhập vào Flash ẢNH ĐỒ HỌA VỚI ĐỊNH DẠNG VECTOR VÀ BITMAP Máy tính hiển thị ảnh với định dạng Vector hay Bitmap Nếu hiểu rõ hai khác hai cách định dạng giúp bạn làm việc hiệu Flash cho phép bạn tạo làm ảnh chuyển động với định dạng Vector Ngoài Flash cho phép bạn mở thao tác ảnh với định dạng Vector Bitmap tạo trình ứng dụng khác Ảnh với định dạng Vector Vẽ ảnh Vector cách sử dụng công cụ vẽ đường thẳng đường cong bao gồm thuộc tính màu vị trí gọi Vector Ví dụ, ảnh vẽ hình trang bên thực điểm mà đường thẳng ngang qua, tạo hình dạng viền Màu xác định màu đường viền màu vùng chọn bao quanh đường viền TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG Khi bạn chỉnh sửa ảnh Vector này, bạn thay đổi thuộc tính đường thẳng đường cong tạo nên hình dạng Bạn di chuyển, thay đổi kích thước, thu phóng, thay đổi màu ảnh vector mà không thay đổi đặc tính bên Ảnh Vector có độ phân giải màu độc lập, điều có nghóa chúng hiển thị với nhiều thiết bị xuất khác cho độ phân giải khác mà thay đổi đặc tính Ảnh với định dạng Bitmap Ảnh Bitmap sử dụng chấm màu xếp đặt mảng lưới gọi pixel Chẳng hạn ảnh vẽ vị trí đặc biệt gọi pixel (điểm ảnh) pixel có giá trị màu vùng lưới, tạo ảnh thể qua pixel khác thể khảm Khi bạn hiệu chỉnh ảnh Bitmap, có nghóa bạn thay đổi thuộc tính pixel không ảnh vector thay đổi thuộc tính đường thẳng đường cong Ảnh Bitmap có độ phân giải phụ thuộc liệu tạo ảnh vẽ xếp vào lưới có kích thước đặc biệt Việc hiệu chỉnh ảnh Bitmap làm thay đổi chất lượng ảnh xuất Đặc biệt thay đổi kích thước ảnh Bitmap làm cho góc biên ảnh trông thô điểm pixel ảnh phân bố lại vùng lưới Khi ảnh Bitmap xuất thiết bị có độ phân giải thấp độ phân giải ảnh, điều làm cho chất lượng ảnh xuất trở nên nhạt màu Chú ý : Bạn đưa vào file âm thanh, bạn biết rõ ràng mục “ Tổng quan cách thêm âm vào Flash” ẢNH CHUYỂN ĐỘNG (ANIMATION) TRONG FLASH Khi sử dụng Flash, bạn tạo đối tượng chuyển động, làm cho chúng xuất hiện, di chuyển ngang qua khung Stage (nơi trình chiếu) làm thay đổi hình dáng (Shape), kích thước (Size), màu sắc (Color), hướng xoay (Rotation) thuộc tính khác Bạn tạo ảnh chuyển động từ frame (khung) sang frame khác mà khung tạo ảnh riêng lẽ Ngoài ra, bạn tạo ảnh chuyển động kiểu Tween, kiểu bạn cần tạo frame frame cuối sau Flash tạo trực tiếp frame để kết nối frame đầu frame cuối Bạn tạo ảnh chuyển động xuất thành đoạn phim thông qua dùng lệnh Set Property Action Bạn xem mục trợ giúp phần ActionScript CHUYỂN CẢNH ĐOẠN PHIM TRONG FLASH Flash cho phép bạn tạo vùng chuyển cảnh cho đoạn phim mà người xem sử dụng bàn phím hay chuột để nhảy đến phần khác đoạn phim, di chuyển đối tượng, nhập vào trông tin mẫu thực nhiều thao tác khác Bạn tạo vùng chuyển cảnh cách thiết lập Action (hành vi) dùng ActionScript Để biết thêm thông tin cách thiết lập Action chung Flash, bạn tham khảo mục “Cách tạo vùng chuyển cảnh đoạn phim” TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG Bạn thiết lập hành động bảng Actions bạn tạo nút, Clip hay frame Dùng bảng Actions điều khiển chế độ Normal Mode, bạn chèn vào action mà không cần phải viết mã ActionScript Nếu bạn quen thuộc với ActionScript, bạn viết mã Script cho riêng bạn Những mục dẫn form action đơn lẻ việc : hướng dẫn cách ngừng phát đoạn phim hay loạt action, bạn ước lượng điều kiện sau để thực thi action Nhiều action đòi hỏi bạn phải có kinh nghiệm việc lập trình để thiết lập chúng Các action đòi hỏi phải quen thuộc với ngôn ngữ lập trình phát triển đến mức độ xa Bạn tham khảo phần ngôn ngữ trợ giúp mã ActionScript VÙNG LÀM VIỆC TRONG FLASH Khi tạo chỉnh sửa đoạn phim, bạn làm việc với thuộc tính quan trọng có tên sau đây: Stage : Vùng hình chữ nhật nơi mà đoạn phim phát Thanh thước thời gian Timeline : Tại ảnh tạo diễn hoạt liên tục Thanh thước Timeline Symbol (Biểu tượng) : Nguồn tài nguyên truyền thông dùng lại phim Cửa sổ Library : Nơi biểu tượng thiết lập Movie Explorer : Tạo nhìn tổng thể đoạn phim cấu trúc Bảng Movie Explorer Các bảng trôi vùng làm việc, cho phép bạn thay đổi nhiều thành phần đoạn phim định cấu hình vùng làm việc Flash cho thích hợp Vùng Stage thước thời gian Timeline Giống phim chiếu, đoạn phim thực Flash có độ dài chia thành nhiều frame.Vùng Stage nơi tạo nội dung cho frame riêng biệt đoạn phim, vẽ ảnh trực tiếp lên frame hay xếp đặt ảnh nhập vào TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG Vùng Stage nơi mà bạn tạo frame riêng rẽ cho đoạn phim Thanh thước Timeline nơi bạn xếp thời gian chuyển động lắp ráp ảnh vào Layer đặc biệt TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG Thanh thước thời gian Timeline nơi bạn xếp thời gian ảnh chuyển động lắp ráp ảnh vào Layer đặc biệt Trong đoạn phim, Timeline hiển thị frame Các Layer hoạt động giống phim suốt, giữ cho ảnh tách biệt bạn kết nối nhiều thành phần khác lại thành ảnh thấy liên tục Điều khiển biểu tượng, ghế hướng xoay đoạn phim Layer riêng biệt Các Symbol Và Instance Các Symbol (biểu tượng) yếu tố dùng lại bạn sử dụng đoạn phim Các Symbol ảnh đồ họa, nút, clip âm hay font chữ Khi bạn tạo Symbol, Symbol lưu lại vào file thư viện, bạn thay Symbol vùng Stage, bạn tạo Instance Symbol Các Symbol làm giảm kích thước file, bỏ qua nhiều Instance Symbol bạn tạo Flash lưu lại Symbol file lần Điều có ích thành phần xuất nhiều lần Bạn thay đổi thuộc tính Instance mà không làm ảnh hưởng đến Symbol hiệu chỉnh Symbol để làm thay đổi tất Instance Bạn chỉnh sửa Symbol vùng Stage Các thành phần khác lại hiển thị vùng Stage bị mờ Ngoài hiệu chỉnh Symbol cửa sổ độc lập, vùng cửa sổ thước Timeline hiển thị thước Timeline Symbol bạn hiệu chỉnh Bạn xem kỹ phần mục “Cách hiệu chỉnh Symbol” Bạn xác định mở Symbol thư viện từ bên vùng Movie Explorer, sử dụng lệnh Find Library Bạn xem kỹ phần mục “Cách dùng Movie Explorer” TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG Để biết thêm Symbol Instance, bạn chọn mục tham khảo Symbols trình đơn Help > Lessons > Symbols (bằng tiếng Anh) Hiệu chỉnh Symbol độc lập (bên trái) hiệu chỉnh Symbol ngữ cảnh đoạn phim CÁC SYMBOL VÀ VÙNG CHUYỂN CẢNH CỦA ĐOẠN PHIM TƯƠNG TÁC Ngoài Symbol phần toàn cho việc tạo phần chuyển cảnh cho đoạn phim Bạn dùng Instance Symbol để tạo vùng chuyển cảnh cho đoạn phim Ví dụ : Bạn tạo biểu tượng nút làm thay đổi hành vi chuột đặt Instance Symbol vào Stage Bạn dùng loại Symbol khác gọi Movie Clip, nhằm tạo phần chuyển cảnh phức tạp Cửa sổ Library (Thư viện) TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 10 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG Cửa sổ Library nơi lưu xếp Symbol tạo Flash, mở file ảnh Bitmap, file âm QuickTime movies Cửa sổ Library cho phép xếp thư mục thư viện, sau xếp chúng theo loại thường dùng đến TẠO MỘT ĐOẠN PHIM MỚI VÀ THIẾT LẬP CÁC THUỘC TÍNH CỦA NÓ Mỗi mở Flash, trình ứng dụng tạo file mới, với phần định dạng mở rộng FLA Bạn tạo đoạn phim bạn làm Thiết lập kích thước số lượng frame, màu Background thuộc tính khác đoạn phim Bạn dùng hộp thoại Movie Properties Cách tạo đoạn phim thiết lập thuộc tính Chọn trình đơn File > New Sau chọn tiếp trình đơn Modify > Movie Hộp thoại Movie Properties xuất Tại mục chọn Frame Rate, nhập vào số frame chuyển động hiển thị giây Đối với hầu hết ảnh chuyển động hiển thị máy tính, đặc biệt chúng hiển thị trang Web, giá trị từ fps (frame per second) đến 12 fps thường sử dụng nhiều (chế độ mặc định 12 fps) Đối với mục chọn Dimensions, bạn chọn tùy chọn sau: Xác định kích thước Stage pixel, nhập vào giá trị cho mục Width Height Kích thước đoạn phim theo mặc định 550 x 400 pixels Kích thước tối thiểu 18 x 18 pixel, kích thước tối đa 2880 x 2880 pixel Thiết lập kích thước vùng Stage để có khoảng trống xung quanh diện tích mặt, nhấp chuột vào nút Match Contents Xác định kích thước đoạn phim tối thiểu, canh lề tất thành phần sang góc trái Stage trước sử dụng Contents mục Match TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 11 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG Thiết lập kích thước vùng Stage đến giá trị lớn cho vùng in giấy, nhấp chuột vào nút Match chọn Printer Vùng xác định kích thước khổ giấy trừ lề trang hành chọn vùng Margins hộp thoại Page Setup (trong Windows) hộp thoại Print Margins (trong Macintosh) Thiết lập màu Background cho đoạn phim, nhấp chuột vào nút Background Color chọn màu có bảng màu Background vừa xuất Chọn đơn vị đo trình đơn xổ xuống Ruler Units, chọn đơn vị đo cho loại thước mà bạn muốn hiển thị cửa sổ trình ứng dụng Sau xác định xong thuộc tính, nhấp chuột chọn nút OK TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 12 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH CHƯƠNG XEM TRƯỚC VÀ KIỂM TRA LẠI ĐOẠN PHIM Khi bạn tạo đoạn phim, bạn cần phát lại để xem chuyển động kiểm tra điều khiển chuyển cảnh Bạn xem kiểm tra đoạn phim Flash cửa sổ làm việc hay trình duyệt Web Xem trước đoạn phim vùng cửa sổ Stage: Để xem trước đoạn phim bạn sử dụng lệnh trình đơn Control, nút Controller lệnh bàn phím Để xem trước cảnh đoạn phim hành, thực thao tác sau đây: Chọn trình đơn Control > Play Chọn tiếp trình đơn Window > Toolbars > Controller (trong Windows) hoaëc Window > Controller (trong Macintosh) nhấp chuột vào nút Play Nhấn phím Enter (Windows) phím Return (Macintosh) Cảnh chuyển động hiển thị cửa sổ Movie với số lượng frame xác định cho đoạn phim Để bước sang frame trình chuyển động, bạn sử dụng nút Step Forward nút Step Backward bảng Controller chọn lệnh trình đơn Control Bạn nhấn phím < & > bàn phím Bạn đến frame frame cuối đoạn phim, bạn sử dụng nút First Frame hay Last Frame bảng Controller Chú ý : Bạn thay đổi cách phát lại (Playback) đoạn phim cách dùng lệnh trình đơn Control Chú ý bạn phải chọn Control > Play để xem đoạn phim trước dùng lệnh sau ♦ ♦ Xem đoạn phim chế độ liên tục : Chọn trình đơn Control > Loop Playback Xem tất cảnh đoạn phim : Chọn trình đơn Control > Play All Scenes TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 13 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5.0 BẰNG HÌNH ẢNH ♦ ♦ CHƯƠNG Xem đoạn phim không cần nghe âm : Chọn trình đơn Control > Mute Sounds Chọn hành vi cho frame actions : Chọn trình đơn Control > Enable Simple Frame Actions Enable Simple Buttons KIỂM TRA LẠI ĐOẠN PHIM Dù Flash phát đoạn phim vùng Stage, nhiều chức chuyển cảnh chuyển động hoạt động trừ đoạn phim xuất định dạng cuối Bạn sử dụng lệnh trình đơn Control, hay xuất đoạn phim hành định dạng Flash Player phát đoạn phim cửa sổ Việc xuất đoạn phim dùng tùy chọn thiết lập hộp thoại Publish Settings Bạn kiểm tra đoạn phim trình duyệt Web Ngoài kiểm tra action đoạn phim dùng chế độ Debugger Cách kiểm tra chức chuyển cảnh chuyển động ♦ ♦ Chọn trình đơn Control > Test Movie Control > Test Scene Flash tạo đoạn phim Flash Player (một file SWF), mở cửa sổ độc lập xem Flash Player File SWF đặt thư mục với file FLA Cách kiểm tra đoạn phim trình duyệt Web Chọn trình đơn File > Publish Preview > HTML LƯU FILE ĐOẠN PHIM THỰC HIỆN Bạn lưu file Flash FLA, sử dụng tên địa hành lưu tài liệu sang tên khác vùng địa khác Bạn trở lại phiên lưu lại lần sau Cách lưu tài liệu Thực thao tác sau: ♦ Để ghi chồng lên phiên hành trên, chọn File > Save ♦ Lưu file vào vùng tên địa khác, chọn trình đơn File > Save As TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 14 BIÊN SOẠN : KS PHAÏM QUANG HUY ... chọn Bảng hộp công cụ Flash TỦ SÁCH STK – THẾ GIỚI ĐỒ HỌA 15 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5. 0 BẰNG HÌNH ẢNH CHƯƠNG CÁCH DÙNG CÁC... HỌA 10 BIÊN SOẠN : KS PHẠM QUANG HUY GIÁO TRÌNH THIẾT KẾ WEB : PHẦN LÝ THUYẾT - TỰ HỌC MACROMEDIA FLASH 5. 0 BẰNG HÌNH ẢNH CHƯƠNG Cửa sổ Library nơi lưu xếp Symbol tạo Flash, mở file ảnh Bitmap,... : Bạn đưa vào file âm thanh, bạn biết rõ ràng mục “ Tổng quan cách thêm âm vào Flash? ?? ẢNH CHUYỂN ĐỘNG (ANIMATION) TRONG FLASH Khi sử dụng Flash, bạn tạo đối tượng chuyển động, làm cho chúng xuất