Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– LỜI NÓI ĐẦU Giáo trình “Flash” giáo trình giáo trình nghề Công nghệ thông tin, xây dựng biên soạn sở chương trình khung đào tạo nghề Bộ Lao động – Thương binh Xã hội ban hành chi tiết hóa chương trình đào tạo nghề Công nghệ thông tin (ứng dụng phần mềm) Trường Cao đẳng nghề Yên Bái Adobe Flash phần mềm chuyên nghiệp có ứng dụng to lớn giới Internet nói chung công nghệ giải trí nói riêng Flash sử dụng để thiết kế phần mềm mô Sử dụng ngôn ngữ lập trình ActionScript để tạo tương tác, hoạt cảnh phim Điểm mạnh Flash nhúng file âm thanh, hình ảnh động Người lập trình chủ động lập điều hướng cho chương trình Flash xuất đa dạng file kiểu html, exe, jpg để phù hợp với ứng dụng người sử dụng Các tập tin Flash, thường thường mang phần mở rộng swf thị chương trình duyệt trang Web hay ứng dụng Flash Player Gần Flash sử dụng để tạo ứng dụng Internet phong phú Với kích thước tương tự, tập tin Flash chứa nhiều thông tin tập tin dạng *.GIF hay dạng *.JPEG Ưu điểm lớn Flash đồ họa dạng vectơ có kích thước file nhỏ Thuận tiện cho việc truyền tải liệu qua Internet Dù nhiều công nghệ đời cố gắng cạnh tranh với Flash, Flash chiếm thị phần cao Có nhiều giáo trình Flash biên soạn, đại đa số dựa phiên MacroMedia Flash MX 2004 tương đối cũ Với phiên CS6, Adobe bổ sung vào tính giúp người dùng thiết kế lập trình đơn giản Cuốn giáo trình gồm có chương: Chương 1: Tại chương giáo trình này, giới thiệu khái niệm flash, cách tạo dự án flash Chương 2: Chương đưa cách sử dụng công cụ vẽ flash Qua bạn áp dụng để vẽ đôi tượng cụ thể dự án flash Chương 3: Ở trương đề cập đến đối tượng Graphic, Button, Movie Clip, cách thức áp dụng đối tượng vào dự án Chương 4: Hiệu ứng động hiệu ứng đa số dự án flash có Hiệu ứng chuyển động giúp cho dự án flash thêm phần sinh động Tại chương hướng dẫn cho bạn cách tạo dự án flash có hiệu ứng động Chương 5: Một dự án flash hoạt động thực hiệu quả, lập trình bước cần thiết Tại chương hướng dẫn bạn sử dụng ngôn ngữ lập trình Action Script để điểu khiển đối tượng flash Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Chương 6: Chương mang tính chất tổng hợp giúp bạn hoàn thiện thước phim kĩ thuật nâng cao Ngoài cung cấp thêm kiến thức để làm việc với Âm thanh, hình ảnh, hay video để sử dụng chúng cách hiệu Giáo trình môn học “Flash” Hội đồng thẩm định Trường Cao đẳng nghề Yên Bái nghiệm thu trí đưa vào sử dụng làm tài liệu thống nhà trường phục vụ giảng dạy học tập học sinh sinh viên Giáo trình biên soạn lần đầu nên cố gắng song khó tránh khỏi thiếu sót, mong nhận ý kiến đóng góp người sử dụng đồng nghiệp để giáo trình ngày hoàn thiện Xin trân trọng giới thiệu! HIỆU TRƯỞNG Thạc sỹ: Trịnh Tiến Thanh Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– CHƯƠNG 1: GIỚI THIỆU VỀ FLASH Sơ lược đồ họa vector lịch sử đời Flash Đồ họa máy tính lĩnh vực có nhiều ứng dụng lớn thực tiễn Một lĩnh vực ứng dụng tiềm lĩnh vực giải trí đa phương tiện (multimedia) Thông thường máy tính hiển thị hình ảnh với định dạng bản: Đồ họa điểm, đồ họa vector Đồ họa điểm Cơ sở điểm ảnh (pixel) Mỗi ảnh đồ họa điểm ma trận điểm, điểm ảnh xác định mẫu màu theo chuẩn phổ biến RGB (Red-Green-Blue) Khi phóng to ảnh đồ họa điểm, ta thấy rõ điểm ảnh Hãy quan sát ví dụ ảnh sau đây: Hình 1.1a - Đồ họa điểm Đồ họa vector: Đuợc tạo đoạn thẳng đường cong đuợc định nghĩa đối tượng toán học gọi Vector Hình Vector mô tả hình ảnh dựa thuộc tính hình học hình ảnh Dạng đồ họa vector có nhiều ưu điểm so với đồ họa điểm Một ưu điểm lớn chất lượng hình ảnh không thay đổi phóng to ảnh Thông thường, ảnh dạng đồ họa điểm bị giảm chất lượng phóng to Còn ảnh dạng vector, không xảy tıǹh trạng Cũng lí này, mà hầu hết nhà thiết kế thích sử dụng chương trình xử lí đồ họa vector đồ họa điểm Các chương trình đồ họa vector tiếng bao gồm Adobe Illustrator, Corel Draw, Đối với đồ họa điểm, nhiều định dạng hỗ trợ chế độ transparent (hay chế độ màu alpha) Nhưng với đồ họa vector, tính hỗ trợ cách hoàn hảo Với đồ họa vector, chương trình chỉnh sửa thiết kế đồ họa hỗ trợ chế độ lớp Layer, với đồ họa điểm, có vài định dạng hỗ trợ lớp Layer số đối tượng đồ họa tạo Adobe Illustrator hinh sau đây: Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 1.1b - Đồ họa vector Định dạng tập tin cuối Flash (swf) mà làm quen thuộc vào đồ họa vector Flash thường sử dụng để tạo hiệu ứng động Xét phạm trù đó, có nhiều điểm tương đồng với kĩ thuật tạo video (kĩ thuật 24 hình/giây) Nhưng có ưu điểm phim tạo Flash không thay đổi chất lượng phóng to (trừ trường hợp phim có chứa đối tượng đồ họa điểm) Một điều đặc biệt mà Flash ưa chuộng sử dụng rộng rãi internet , kích thước phim tạo Flash nhỏ gọn so với định dạng phim khác thường sử dụng để truyền tải world wide web Lịch sử đời Flash Flash kĩ thuật tạo hiệu ứng động, thước phim hoạt hình, thiết kế giao diện người dùng cho ứng dụng web… Flash giới thiệu công ty MacroMedia vào năm 1999 Đến năm 2005, công ty Adobe mua lại với giá 3.4 tỉ đôla Từ đời này, Flash có nhiều bước phát triển đáng ý Nhiều tính liên tục cập nhập phiên nó, kể từ phiên Macromedia Flash Adobe Flash Với phiên Adobe Flash CS4, công ty Adobe bổ sung vào cho Flash tính mạnh mẽ: Hỗ trợ nhiều định dạng import liệu; bổ sung công cụ tạo hoạt hình mạnh mẽ Bone, Bind, 3D Translation, 3D Rotation,… Hiện nay, Adobe tạo ấn mã nguồn mở cho Flash công nghệ Flex Một công nghệ đời sớm hỗ trợ tạo giao diện cho ứng dụng web có tính tương tác cao với người dùng – RIA Flex công nghệ hứa hẹn đem lại nhiều lợi nhuận cho Adobe (nhờ vào trình phát triển Adobe Flex Buider) Nó đối thủ lớn so sánh với công nghệ Silverlight Microsoft JavaFx Sun (nay mua lại Oracle) Cài đặt Adobe Flash CS6 Yêu cầu cấu hình cài đặt: Hệ điều hành Windows XP Pack cao (MacOS X cao hơn), 1Gb Ram cao hơn, Pentium IV cao hơn…… Các bước cài đặt: Mở thư mục chứa phần mềm, chạy tập tin Setup.exe, cửa sổ sau sau Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 1.2a - Màn hình chào đón cài đặt Adobe flash CS6 Có hai lựa chọn: Install Try, đó: - Try: Cài đặt phiên dùng thử - Install: Cài đặt phần mềm có quyền - Quit: Hủy bỏ cài đặt Sau chọn Install sổ sau xuất Hình 1.2b - Các điều khoản phần mềm Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hãy đọc qua điều khoản sử dụng phần mềm, đồng ý chọn Accept để tiếp tục chọn Back để quay bước trước Sau chọn Accept, cửa sổ sau xuất Hình 1.2c - Cửa sổ Serial Number Nhập số serial từ nhà cung cấp vào ô tương ứng với Provide a serial number, sau nhấn Next Nếu dãy số serial hợp lệ giao diện cài đặt hiển thị sau Tại mục Options lựa chọn gói phần mềm cần cài đặt, chọn ngôn ngữ cài đặt mục Language, chọn vị trí cài đặt mục Location(mặc định cài đặt địa C:\Program Files\Adobe) Sau thiết lập xong chọn Install để bắt đầu Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– trình cài đặt, sau kết thúc trình cài đặt, nhấp nút Finish để kết thúc trình cài đặt Giới thiệu Adobe Flash CS6  Khởi động Adobe Flash Professional CS6 Để khởi động Adobe Flash Professional CS6 Chọn biểu tượng hình Desktop, tiến hành bước sau: Vào Start / All Programs / Adobe Adobe Flash Professional CS6 Màn hình khởi động Adobe Flash Professional sau: Hình 1.3a - Màn hình khởi động Adobe Flash Professional CS6 Sau trình khởi động hoàn tất, bạn thấy giao diện sau Hình 1.3b - Cửa sổ ban đầu Flash Professional CS6 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Với phiên Adobe đưa vào mẫu( template) có sẵn muốn chọn mẫu quảng cáo banner, chuyển động mà Adobe hỗ trợ mục Create from Template Hoặc bạn không thích chọn mẫu template có sẵn mà bạn muốn chọn cho phong cách thiết kế riêng phương thức lập trình ngôn ngữ lập trình Action Script Action Script mục Create New Bên cạnh bạn thể hỗ trợ trực tiếp từ hãng adobe chủ đề có sẵn mục Learn 3.1 Các chế độ tùy biến giao diện Trong giao diện tổng thể Essential Flash CS6, chia làm vùng chính:  Vùng hệ thống menu phía  Vùng công cụ bên phải  Vùng thuộc tính thư viện bên cạnh công cụ  Vùng thiết kế trung tâm Hình 1.3.1 - Giao diện tổng thể Essential Flash CS6 Flash CS6 cho phép làm việc theo chế độ Tab Trên menu, góc bên phải mục Essentials(chế độ mặc định) cho phép ta chuyển đổi qua lại cách bố trí giao diện Có chế độ bố trí giao diện: Animator, Classic, Debug, Designer, Developer Essentials Tùy vào cảm quan bạn, bạn chọn lấy cách bố trí giao diện mà bạn cho phù hợp tiện lợi cho bạn Để phóng to hay thu nhỏ hình làm việc, ta cần sử dụng phím tắt Ctrl+ (để phóng to) Ctrl+- (để thu nhỏ) Hoặc bạn chọn chế độ hiển thị % bên menu Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– 3.2 Tạo dự án cho desktop mobile Để tạo dự án, bạn kích chuột vào File, chọn New (phím tắt Ctrl+N) Chọn thẻ General(hặc chọn Templates muốn chọn mẫu có sẵn) Hình 1.3.2 - Tạo dự án Flash CS6 Chọn kiểu dự án phù hợp mục Type, phía bên phải thông số dự án Muốn thay đổi click chuột vào thông số để thay đổi, đó:  Width: Chiều rộng dự án  Height: Chiều cao dự án  Ruler units: Quy đinh đơn vi đo dự án, mặc định pixels  Frame rates: Quy định số frame chạy / giây  Background color: Quy định màu dự án Khi tạo dự án Flash, cần quan tâm đến số kiểu dự án sau đây:  ActionScript 3.0: Tạo dự án Flash hỗ trợ ActionScript 3.0 Dự án sử dụng cho Flash Player Flash Plugin với tảng chủ yếu Desktop Bạn lưu ý rằng, giáo trình này, thảo luận ActionScript 3.0 Phiên phiên ActionScript thời điểm  ActionScript 2.0: Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Tương tự dự án ActionScript 3.0, nhiên phiên ActionScript hỗ trợ 2.0  Adobe Air 2/AIR: Tạo dự án Flash cho Desktop thiết bị khác có hỗ trợ Adobe Air Trong trường hợp này, AIR sử dụng phiên AIR 2.0 trở lên Adobe Air dự án Adobe nhằm tạo môi trường cho nhà phát triển xây dựng ứng dụng dựa vào công nghệ Flash chạy độc lập tảng hệ điều hành Nó có nhiều điểm tương đồng với công nghệ Java Sun hay NET Microsoft Để phát triển trình ứng dụng Adobe Air, bạn hoàn toàn sử dụng trình soạn thảo Adobe Flash Adobe Flex Builder (hay Adobe Flash Buider)  AIR for Android: Tạo dự án Flash chạy AIR phục vụ cho thiết bị sử dụng hệ điều hành Android Google Trong giáo trình này, giới thiệu cho bạn cách cài đặt AIR ứng dụng chạy AIR cho giả lập Android SDK Google cung cấp Chi tiết phần trình bày phần xuất tập tin Flash  AIR for iOS: Tạo dự án Flash chạy AIR phục vụ cho thiết bị sử dụng hệ điều hành iOS Apple iOS SDK Apple cung cấp cho nhà phát triển sử dụng tảng MacOS, đó, bạn nhà phát triển ứng dụng Windows, bạn lựa chọn hai cách: Cài đặt MacOS để sử dụng SDK; Hoặc sử dụng môi trường giả lập Virtual PC để cài đặt MacOS Hiển nhiên, bạn hoàn toàn viết ứng dụng cho iOS trường hợp sử dụng Adobe Flash CS6 trở lên, nhiên, để đảm bảo ứng dụng thực thi tốt hệ điều hành này, bạn cần kiểm tra môi trường giả lập thiết bị - Flash Lite 4: Tạo dự án Flash cho Mobile chạy Flash Lite Khi chọn kiểu dự án này, Adobe Flash CS6 tự động gọi đến Adobe Device Central Đây tiện ích quản lý thông tin Flash Lite hỗ trợ dòng điện thoại Bạn cần tìm kiếm loại điện thoại mà bạn cần tạo dựng dự án, sau bấm vào Create Ngoài ra, bạn muốn tạo Action độc lập, bạn tạo riêng chúng cách chọn ActionScript File Việc tạo ActionScript độc lập sử dụng chúng dự án Flash thảo luận kĩ làm quen với lập trình với ActionScript Lưu ý: Bạn cần lưu ý đến vài định dạng dự án Flash Tập tin dự án Flash có phần mở rộng fla (thực chất tập tin nén) Tập tin ActionScript File có định dạng as Tập tin cuối flash xuất swf (ngoài ra, Flash có định dạng khác hỗ trợ cho dự án khác như: *.exe –Trình tự chạy windows, *.app – Trình cài đặt Mac, *.apk – Trình cài đặt Android,…) 10 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– tượng cần hiệu chỉnh Ta thay đổi dịch chuyển tương đối phần đối tượng ta đặt trỏ chuột theo cách cạnh đối tượng dịch chuyển Nếu muốn phóng to, thu nhỏ đối tượng, ta đặt trỏ chuột vào nút đối tượng, kéo muốn tăng kích thước, kéo vào muốn làm giảm kích thước Nếu muốn xoay đối tượng, ta nhấn vào nút góc đối tượng, xoay đối tượng Hình 2.5d - Công cụ chỉnh góc cạnh, xoay đối tượng Free Transform Khi làm việc với đối tượng công cụ bạn cần lưu ý đến chức xoay đối tượng Hình 2.6a – Thay đổi tâm xoay đối tượng Mặc định, ta tạo đối tượng đối tượng tồn tâm xoay (khi xoay đối tượng, đối tượng quay quanh tâm xoay này) Bạn hiệu chỉnh vị trí tâm xoay cách bấm chọn di chuyển Trên hình vẽ trên, bạn thấy thay đổi vị trí tâm xoay đối tượng Ở đối tượng bên trái, tâm xoay nằm đường thẳng, hình bên phải, tâm xoay dịch chuyển xuống góc phía Bạn xoay đối tượng để nhận khác biệt: đường thẳng bên trái xoay theo kiểu 36 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– chong chóng (tâm quay cánh chong chóng), đường thẳng bên phải xoay theo kiểu kim đồng hồ (tâm quay đầu kim quay) Bất kì đối tượng đối xứng tâm, theo mặc định, tâm đối xứng đối tượng tâm xoay Tâm xoay đối tượng không thiết phải nằm đối tượng Nó nằm bất kì, tùy thuộc vào mục đích sử dụng bạn Xoay đối tượng hiệu ứng tạo đơn giản Flash Bạn tìm hiểu kĩ học cách tạo chuyển động kĩ thuật Tween ActionScript b Công cụ Gradient Transform Nhờ vào công cụ này, ta hiệu chỉnh thông số đổ màu cầu vồng cho đối tượng Sau tạo màu cầu vồng cho đối tượng, ta bấm chọn vào biểu tượng tam giác đen công cụ Free Transform, lúc xuất công cụ Gradient Transform, bạn việc bấm chọn Hình 2.6b – Công cụ Gradient Transform Sau đó, bấm chuột vào vùng màu cầu vồng Trên vùng màu này, dạng thức đổ màu hình bên Bạn việc hiệu chỉnh hình bao khung màu như: kéo to (tăng kích thước vùng sáng), thu nhỏ (giảm kích thước vùng sáng), hiệu chỉnh vị trí tam giác (thay đổi tâm vùng sáng), bấm vào nút tròn dịch chuyển (thay đổi vị trí vùng màu) Các công cụ làm việc với đường Bezier Như giới thiệu trên, Flash chuẩn đồ họa vector Mọi đối tượng Flash dựa sở đường Bezier Các đường Bezier tạo dựng dựa phương pháp nội suy Spline Một đường Bezier đặc trưng điểm đường điều khiển điểm Điểm điểm uốn, điểm góc cạnh, điểm đối xứng – ta gọi chung điểm điều khiển (vì tương ứng với đường điều khiển) Để làm việc với đối tượng này, Flash cung cấp 37 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– cho ta tập hợp công cụ để làm việc với đường Bezier: công cụ SubSelection, Pen, Add Anchor Point, Delete Anchor Point Convert Anchor Point Công cụ SubSelection nằm riêng, công cụ lại bố trí chung vào vị trí công cụ Sau đây, tìm hiểu công cụ Hình 2.7 a - Hiệu chỉnh vị trí điểm neo công cụ SubSelection Nhấp chọn biểu tượng SubSelection, sau bấm vào đối tượng Khi đó, đường viền đối tượng đường Bezier cấu thành nên vật thể Các điểm đánh dấu chấm tròn gọi điểm điều khiển đường Bezier Với công cụ này, ta hiệu chỉnh vị trí điểm Điểm điều khiển đường Bezier chia làm hai nhóm: nhóm điểm góc cạnh nhóm điểm uốn cong Bạn nhận thấy chúng – hình vuông, chữ nhật tạo nên từ điểm góc cạnh; đường tròn, elip tạo từ điểm uốn cong a Công cụ Pen Công cụ dùng để vẽ đường đa giác cách tạo điểm điều khiển, sau tự động nối điểm lại với Các thông số liên quan đến công cụ hoàn toàn tương tự với công cụ Line Khi sử dụng công cụ Pen, bạn lưu ý rằng, bạn tạo hình thể có dạng đường thẳng, bạn việc nhấp vào nút đầu nút cuối Nếu bạn muốn tạo dạng đường cong, bạn cần rê chuột liên tiếp để hiệu chỉnh đường điều khiển b Công cụ Add Anchor Point Delete Anchor Point Công cụ Add Anchor Point dùng để bổ sung thêm điểm điều khiển cho đường Bezier, ngược lại, Delete Anchor Point xóa bớt điểm điều khiển cho đường Bezier Để bổ sung thêm điểm điều khiển, ta việc chọn công cụ Add Anchor Point, sau bấm vào vị trí đường biên Để xóa điểm điều khiển, ta việc chọn công cụ Delete Anchor Point, sau bấm vào điểm điều khiển cần xóa bỏ 38 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Việc bổ sung xóa bỏ điểm điều khiển hữu ích việc tạo đường uốn Với đường uốn đặc thù, ta cần bổ sung vào số lượng điểm điều khiển tối ưu cho việc hiệu chỉnh Ta lấy ví dụ: đường Parabol, ta cần ba điểm điều khiển; với đường đồ thị hàm số đa thức bậc ba ta cần bốn điểm điều khiển Các điểm điều khiển điểm nằm đường biên Những điểm không nằm đường biên điểm thuộc đường điều khiển Hình 2.7b – Hình điểm điều khiển c Công cụ Convert Anchor Point Dùng để chuyển đổi điểm điều khiển góc cạnh thành điểm điều khiển uốn cong Ngoài có chức hiệu chỉnh góc uốn nhờ vào đường điều khiển Chức tương đối giống với chức hiệu chỉnh góc cạnh công cụ SubSelection Nhưng điểm khác biệt chỗ, công cụ Convert Anchor Point hiệu chỉnh đường điều khiển cách độc lập (tại điểm điều khiển có hai đường điều khiển bên trái bên phải Công cụ hiệu chỉnh đường điều khiển bên trái bên phải cách riêng biệt.), công cụ SubSelection hiệu chỉnh đồng thời hai đường điều khiển (điểm uốn đối xứng) Để chuyển đổi điểm điều khiển góc cạnh thành điểm uốn cong, ta việc chọn công cụ nhấp vào điểm cần chuyển đổi Để hiệu chỉnh góc xoay cho đường điều khiển, ta việc xoay đường điều khiển Hình 2.7c – Công cụ Convert Anchor Point Làm việc với đối tượng Khi thao tác với đối tượng, ta thường sử dụng chức sau đây: - Nhóm viền đối tượng thành nhóm: Có hai cách nhóm – sử dụng chức Group chức Union Chọn đối tượng viền (nhấp đôi 39 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– chuột vào đối tượng), sau vào Modify, chọn Group (Ctrl+G) Combine Object > Union Để nhóm nhiều đối tượng thành nhóm, ta sử dụng chức Group: chọn đối tượng cần nhóm, nhấn tổ hợp phím Ctrl+G - Vô hiệu hóa việc chỉnh sửa đối tượng: Chọn đối tượng cần khóa, vào Modify, chọn Arrange > Lock (Ctrl+Alt+L) - Kích hoạt việc chỉnh sửa đối tượng trở lại: Modify > Arrange > Unlock All (Ctrl+Shift+Alt+L) - Sắp xếp thứ tự đối tượng: Chọn đối tượng, vào Modify > Arrange Sau đó, ta hiệu chỉnh thứ tự xếp - Canh chỉnh vị trí kích thước đối tượng: Vào Modify > Align (Ctrl+K) Hình 2.8a – Vùng Align - Làm việc với Shape: Vào Modify > Shape Sau ta chọn chức cần hiệu chỉnh - Làm việc với Bitmap: Bitmap đối tượng đồ họa điểm Flash hỗ trợ đồ họa điểm Để làm việc với Bitmap, ta vào Modify > Bitmap Tương ứng với Bitmap, có hai chức Swap Bitmap (thay đổi hình Bitmap) hay Trace Bitmap (chuyển đổi Bitmap thành dạng vector) Việc chuyển đổi Bitmap thành dạng đồ họa vector phức tạp Đa số ảnh vector thu không giữ gìn nguyên trạng đối tượng ảnh Bitmap ban đầu Xây dựng đối tượng Layer khác nhau: Việc sử dụng layer kĩ thuật hữu ích đồ họa máy tính Trong Flash, kĩ thuật Layer quan trọng Nhờ vào Layer, mà ta tạo chuyển động riêng biệt cho đối tượng khung sáng tác 40 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– BÀI TẬP THỰC HÀNH Bài 1: Sử dụng công cụ tô vẽ bản, vẽ hình nhân vật sau a b c Bài 2: Sử dụng công cụ tô vẽ, vẽ phong cảnh sau: 41 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– a b 42 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– c 43 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– CHƯƠNG 3: CÁC BIỂU TƯỢNG TRONG FLASH Biểu tượng đối tượng tạo Flash tái sử dụng Một biểu tượng sử dụng movie import vào thư viện sử dụng movie khác Có ba loại biểu tượng là: Graphics, Buttons MovieClips Biểu tượng đối tượng tạo lưu vào thư viện Nếu biểu tượng sử dụng movie gọi thể biểu tượng (instance) Mỗi thể biểu tượng có thuộc tính riêng (màu sắc, kích thước, chức năng…) khác với biểu tượng tạo Mọi thể đối tượng tạo nhờ vào chức kéo thả biểu tượng từ thư viện vào khung thiết kế Khi biểu tượng chỉnh sửa thể cập nhập theo Việc sử dụng biểu tượng phương pháp hiệu để giảm kích thước movie Những biểu tượng không sử dụng movie, dù nằm thư viện không tính vào kích thước movie Biểu tượng Graphic Biểu tượng Graphic hình ảnh tĩnh tái sử dụng để tạo chuyển động Bất kì đối tượng dạng đồ họa điểm, đồ họa vector hay văn chuyển đổi thành Graphic Chúng có Frame TimeLine (điều có nghĩa ta đặt frame trì trạng thái mà không tạo hiệu ứng động) Biểu tượng graphic không hỗ trợ Actionscript Để tạo Graphic, bạn thao tác sau: - Chọn đối tượng cần chuyển đổi sang biểu tượng Graphic - Nhấn phím F8 (hoặc kích chuột phải, chọn Convert to Symbol) Trong hộp thoại Convert to Symbol, có tùy chọn sau Hình 3.1a – Chuyển đổi sang biểu tượng Graphic + Name: Tên biểu tượng tạo +Type: Loại biểu tượng cần tạo Ở đây, chọn Graphic Tiếp đến, bạn nhấp Ok Một biểu tượng Graphic tạo đưa vào thư viện 44 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Các thuộc tính biểu tượng Graphic Hình 3.1b – Bảng thuộc tính biểu tượng Graphic - Thanh tùy chọn thả xuống: Cho phép chuyển đổi qua lại loại biểu tượng - Instance of: Khi kích chuột vào tùy chọn swap, bạn thay đổi biểu tượng đối tượng thể chọn - Position and Size: Cho phép hiệu chỉnh vị trí theo tọa độ đối tượng thể (x y), kích thước (w – width h – height) Tùy chọn Lock width and height values together cho phép thay đổi kích thước chiều rộng cao đồng thời hay riêng lẻ - Color effect: Với tùy chọn Style, bạn hiểu chỉnh thuộc tính Brightness(hiệu chỉnh độ sáng tối), Tint, Advanced Alpha cho đối tượng - Looping: Tùy chọn liên quan đến số lần lặp lại hành động biểu tượng Graphic Nó Loop, Play Once Single Frame Tạo hiệu ứng động đơn giản biểu tượng Graphic Trong ví dụ này, ta tạo hiệu ứng động cách sử dụng biểu tượng Graphic Có ba khái niệm đề cập: TimeLine, frame keyframe Chúng ta minh họa cho ví dụ sử dụng biểu tượng Graphic mà không thảo luận thêm chúng Chi tiết ta thảo luận chương (1) Sử dụng công cụ Rectangle để tạo hình chữ nhật màu xanh blue sau chuyển đổi sang biểu tượng graphic (2) Nhấp đôi chuột vào biểu tượng graphic để mở Timeline Trong Timeline chọn frame thứ nhấn phím F6 để tạo keyframe Trên keyframe này, ta thay đổi màu sắc cho hình chữ nhật thành màu đỏ 45 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– (3) Quay trở lại với khung sáng tác, frame thứ nhấn phím F5 Khi kiểm tra movie, bạn cần chọn đối tượng graphic hiệu chỉnh thông số mục Looping lần lượt: loop, play one, single frame để quan sát kết Khi chọn hiệu ứng loop, biến đổi từ màu xanh blue sang màu đỏ ngược lại diễn cách liên tục (lặp liên tục); chọn hiệu ứng play one biến đổi diễn lần nhất; chọn single frame biến đổi diễn (bởi sử dụng frame đơn nhất) Hai tùy chọn loop play one thường sử dụng muốn tạo hình ảnh động ảnh động gif Nghĩa sử dụng chức thay khung hình đơn giản Còn single frame, thường sử dụng ta muốn tối ưu khung thiết kế Bạn thiêt kế nhiều hình ảnh đối tượng graphics Mỗi hình ảnh thiết kế keyframe riêng biệt Khi cần sử dụng hình ảnh frame nào, ta cần chọn thuộc tính looping tương ứng với tùy chọn single frame điṇh tùy chọn first tương ứng với keyframe mà hình ảnh đối tượng cần dùng thiết lập Cách làm giúp ta quản lý đối tượng đồ họa đơn giản Bạn thử tưởng tượng, bạn có khung cảnh Khung cảnh thay theo mùa: xuân, hạ, thu, đông Khi thiết kế cảnh, ta tạo biểu tượng graphic có tên landcape Trên landcape có keyframe tương ứng với biến đổi cảnh sắc theo mùa Trong phim, ta cần hiển thi ̣theo cảnh sắc mùa nào, ta việc thay đổi tham số first từ – (khi looping chọn single frame) mà thay đổi nhiều lớp đối tượng hay tùy chỉnh lại Timeline Biểu tượng Button Biểu tượng Button dùng để bổ sung tương tác với movie, phản hồi lại kiện kích chuột, ấn phím, kéo kéo hành động khác Một biểu tượng Button có bốn Frame tương tác: Up, Down, Over Hit Biểu tượng Button cài đặt điều khiển ActionScript Điều hoàn toàn khác so với biểu tượng Graphic Bạn cần lưu ý rằng, Flash có hai lớp đối tượng Button: Simple Button Button Lớp Simple Button lớp Button người dùng thiết kế sử dụng chức Convert to Symbol Lớp Button lại nằm thư viện fl.Controls sử dụng việc thiết kế giao diện GUI cho ứng dụng Chúng hai lớp đối tượng hoàn toàn khác biệt Mặc dù chúng có nhiều điểm tương đồng Trong mục này, ta đề cập đến Simple Button mà không quan tâm đến đối tượng fl.Controls.Button Để tạo Button, bạn thao tác sau: - Chọn đối tượng cần chuyển đổi sang Button - Nhấp phím F8 kích chuột phải, chọn Convert to Symbol Khi đó, xuất hộp thoại sau: 46 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 3.4a – Chuyển đổi sang biểu tượng Button Trong mục Type, chọn Button nhấp Ok Tạo hiệu ứng cho Button Ở đây, ta thao tác để tạo hiệu ứng cho Button Ta không thảo luận thêm việc sử dụng TimeLine cách tạo hiệu ứng động Chi tiết phần trình bày chương Mỗi biểu tượng Button có Frame TimeLine Tương ứng với Frame Up hiệu ứng trỏ chuột thả (sau bấm xuống), Frame Down tương ứng với hiệu ứng trỏ chuột nhấn xuống, Frame Over tương ứng với hiệu ứng trỏ chuột di chuyển qua đối tượng Frame Hit tạo vùng tương tác ảo cho Button (nghĩa thao tác vùng hoàn toàn tương tự với thao tác Button đó) Vùng tương tác gọi ảo không hiển thị movie - Ví dụ tạo hiệu ứng cho Button (1) Kích đup chuột vào Button vừa tạo (2) Nhấp chọn Frame Up, nhấn phím F6 thay đổi thuộc tính màu sắc, tọa độ x y, màu viền, độ rộng, độ cao… Cho Button Hoàn toàn tương tự cho Frame Down Frame Over (3) Nếu bạn muốn tạo vùng tương tác ảo, bạn sử dụng công cụ vẽ để tạo vùng tương tác Frame Hit: Chọn Frame Hit, nhấp F6 vẽ hình thể Frame Hit (4) Quay trở lại Scene, nhấp Ctrl+Enter để kiểm tra Việc tạo Button điều khiển Flash đơn giản So với lớp fl.Controls.Button, Simple Button đơn giản nhiều Ta cần lưu ý rằng, Simple Button không hỗ trợ thuộc tính label (phần văn hiển thi ̣trên Button) ta hoàn toàn tạo văn cho Button công cụ Hình 3.4b – Bảng thuộc tính Text kết hợp với frame Up, Down, Over biểu tượng Button Hit 47 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Các thuộc tính biểu tượng Button - Instance Name: Tên hiển thị biểu tượng Được dùng làm việc với ActionScript - Thanh tùy chọn thả xuống: Cho phép chuyển đổi qua lại loại biểu tượng - Instance of: Chọn swap để thay đổi biểu tượng cho đối tượng hiển thị - Position and Size: Thay đổi vị trí kích thước cho đối tượng - Color effect: Chọn hiệu ứng màu sắc cho đối tượng, bao gồm:Brightness, Tint, Advanced Alpha - Display: Với thuộc tính Blending, cho phép ta chọn chế độ pha trộn màu sắc cho Button - Tracking: Với Options, bạn chọn Track as Button Track as MenuItem - Filter: Hoàn toàn tương tự với Filter làm việc với công cụ Text Tạo biểu tượng Button nhanh chóng: Bạn sử dụng chức sau để tạo biểu tượng Button nhanh chóng: + Sử dụng Button tạo sẵn: vào Windows > Common Libraries > Button + Sử dụng Commands: Bạn tạo khối hình thể, nhấp chọn Sau vào Commands > Make Button Biểu tượng MovieClip Là mẫu hoạt hình Flash tái sử dụng Khác với Graphic Button, MovieClip có riêng TimeLine với vô số Frame dùng để tạo hoạt hình Một MovieClip bao gồm nhiều biểu tượng Graphic, Button chí MovieClip Cũng tương tự Button, bạn cài đặt tên hiển thị cho để điều khiển ActionScript Tạo hiệu ứng cho Movieclip: Chúng ta tìm hiểu cách tạo hoạt hình cho MovieClip chương Các thuộc tính biểu tượng MovieClip - Instance Name: Tên hiển thị biểu tượng Được dùng làm việc với ActionScript - Thanh tùy chọn thả xuống: cho phép chuyển đổi qua lại loại biểu tượng - Instance of: Chọn swap để thay đổi biểu tượng cho đối tượng hiển thị - Position and Size: Thay đổi vị trí kích thước cho đối tượng - 3D Position and View: Hiểu chỉnh vị trí không gian khung nhìn 3D Perspective Angle: hiệu chỉnh góc phối cảnh theo độ xa gần - Vanishing Point: Hiệu chỉnh tọa độ điểm triệt tiêu 48 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– - Color effect: Chọn hiệu ứng màu sắc cho đối tượng, bao gồm:Brightness, Tint, Advanced Alpha - Display: Với thuộc tính Blending, cho phép ta chọn chế độ pha trộn màu sắc cho Button - Tracking: Với Options, bạn chọn Track as Button Track as MenuItem Đây cách thức tương tác với Button Nó tạo hiệu ứng theo cách Button truyền thống hay theo cách MenuItem - Filter: Hoàn toàn tương tự với Filter làm việc với công cụ Text Hình 3.5 – Bảng thuộc tính biểu tượng MovieClip Làm việc với Library Library thư viện quản lý đối tượng import convert Để convert đối tượng ta kích chuột phải vào đối tượng chọn Convert to Symbol Khi đó, biểu tượng xuất Library Kích thước movie không bao gồm toàn đối tượng Library, bao gồm đối tượng sử dụng movie Để import đối tượng từ bên vào Libray, ta chọn File > Import > Import to Library Sau đó, đối tượng chọn đưa vào Library Hình 3.6 – Khu vực quản lý thư viện Library Các đối tượng nằm thư viện tổ chức quản lý theo cấu trúc thư mục Để tổ chức quản lý theo thư mục, ta cần tạo thư mục 49 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– theo cấu trúc Windows Explorer Các đối tượng thư viện chứa thư mục thư mục Thư viện Flash cho phép bạn thực thao tác kéo thả đối tượng từ vị trí thư mục sang vị trí khác Ở phía cấu trúc thư mục khung Preview, cho phép bạn xem qua đối tượng thư viện chương trình Flash CÂU HỎI ÔN TẬP Câu Biểu tượng Graphic gì? Trình bày cách tạo, thuộc tính biểu tượng Graphic Câu 2: Trình bày tác dụng biểu tượng Button, cách tạo hiệu ứng cho biểu tượng button Câu 3: Biểu tượng MovieClip gì? Trình bày cách tạo, thuộc tính biểu tượng MovieClip Câu 4: Thư viện(library) dùng để làm gì? Cách đưa đối tượng vào library 50 [...]... nghiệp, bạn cần có sự hiểu biết tương đối đầy đủ về ngôn ngữ lập trình ActionScript mạnh mẽ này được tích hợp trong Flash Hình 1. 3.7g - Vùng Code Snippets 18 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Chúng ta sẽ tìm hiểu về vùng chức năng này sau khi tìm hiểu về ngôn ngữ lập trình ActionScript Trong vùng chức năng Code Snippets có các... Vùng String: (Ctrl + F 11) Cho phép bạn tùy chọn ngôn ngữ cho thước phim của mình Nếu bạn muốn phim của bạn hiển thị đúng ngôn ngữ trên các máy tính khác nhau, bạn hãy hiệu chỉnh trong vùng String này  Thay đổi phím tắt trong Adobe Flash: vào Edit/KeyBoard Shortcuts 19 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Hình 1. 3.7h - Hộp thoại... giảm đi một cách đáng kể nhờ vào công nghệ được sử dụng trong Flash Điều này cũng giúp làm giảm kích thước của tập tin Flash 11 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––  Scene: Được hiểu như là các cảnh quay trong Flash Một cảnh quay là tập hợp của các khung hình kế tiếp nhau để tạo ra chuyển động Để chèn thêm scene, ta vào Insert,... (7) – Tạo các điểm thoát khi debug chương trình (8) – Đóng mở các khối mã lệnh chương trình (9) – Hỗ trợ khi viết script 14 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– 3.7 Các vùng chức năng khác Ta có thể làm hiển thị thêm các vùng chức năng khác trong Flash bằng cách vào Windows và chọn cửa sổ tương ứng  Vùng Align (Ctrl+K): Dùng để... (hiệu chỉnh góc quay), 15 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Skew (hiệu chỉnh góc dịch chuyển xiêng – hay độ kéo trượt theo hai phía) - Nhóm thứ 3: Liên quan đến tọa độ 3D và điểm trọng tâm 3D Chức năng này chỉ hoạt động đối với biểu tượng MovieClip Hình 1. 3.7b - Vùng Transform  Vùng History (Ctrl+F10) Quản lý lịch sử các... vẽ brush - Smoothing: Độ mềm dẻo cho nét vẽ Hình 2.1b - Công cụ Brush c Công cụ Spray Brush 21 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Khi bạn bấm vào biểu tượng tam giác nhỏ ở trên biểu tượng Brush, thì sẽ xuất hiện biểu tượng của Spray Brush Đây là công cụ phun màu tuyệt vời của Flash Bạn có thể định nghĩa mẫu màu để phun, các chế... tượng quả cầu phía trên bên phải hoặc chọn không màu bằng cách bấm vào biểu tượng hình vuông gạch chéo Bạn cũng có thể chọn chế độ Transparent bằng cách điều chỉnh thông số Alpha Hình 1. 3.7d– Bảng màu chuẩn 16 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– Bảng màu chuẩn còn cung cấp cho chúng ta một số mẫu màu Gradient có sẵn Nếu nhu cầu... điểm và đồ họa flash Câu 2: Nêu khái niệm về Layer, Frame, Scene và Movie Câu 3: Nêu tác dụng các vùng chức năng cơ bản của flash CS6 20 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– CHƯƠNG 2: CÁC CÔNG CỤ VẼ CƠ BẢN 1 Các công cụ Pencil, Brush và Erase a Công cụ pencil (y) Đối với công cụ Pencil, bạn có thể dùng để vẽ các đối tượng bằng... các thông số trong bảng thuộc tính Properties 13 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– này Tương tự, chúng ta cũng có thể làm xuất hiện hoặc đóng vùng thuộc tính này lại bằng cách vào Windows, chọn Properties(Ctrl + F3) 3.6 Vùng soạn thảo ActionScript Trong khung soạn thảo ActionScript, phần soạn thảo nằm ở trung tâm của cửa sổ này... Angle quay theo chiều kim đồng hồ, lấy vị trí gốc là vị trí góc 900, số đo của góc chính là số đo góc của 25 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– phần bị khuyết Góc đóng End Angle quay theo chiều ngược kim đồng hồ, số đo góc phần bị khuyết là góc bù 2 của góc này (tức 360-góc đóng) Ví dụ: Khi thiết lập góc mở Start Angle là 600, ... có định dạng khác hỗ trợ cho dự án khác như: *.exe Trình tự chạy windows, *.app – Trình cài đặt Mac, *.apk – Trình cài đặt Android,…) 10 Giáo trình: Flash Trường Cao đẳng nghề Yên Bái –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––... Professional sau: Hình 1. 3a - Màn hình khởi động Adobe Flash Professional CS6 Sau trình khởi động hoàn tất, bạn thấy giao diện sau Hình 1. 3b - Cửa sổ ban đầu Flash Professional CS6 Giáo trình: Flash Trường... điều hành Android Google Trong giáo trình này, giới thiệu cho bạn cách cài đặt AIR ứng dụng chạy AIR cho giả lập Android SDK Google cung cấp Chi tiết phần trình bày phần xuất tập tin Flash  AIR