slide bai giang macromedia flash cs5

100

Upload: binh-bet-m

Post on 12-Dec-2014

123 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Slide Bai Giang Macromedia Flash CS5
Page 2: Slide Bai Giang Macromedia Flash CS5

Giới thiệu Macromedia flash là chương trình ứng

dụng dùng để thiết kế và tạo các chuyển động.

Kết hợp các ứng dụng đồ họa khác và tính năng quản lý hình ảnh, âm thanh, movie (multimedia) cho phép chương trình có thể tạo các trình diễn động tuyệt hảo

Các ứng dụng áp dụng chương trình như web application, presentations, e–lerning,...

Page 3: Slide Bai Giang Macromedia Flash CS5

Giao diện chương trìnhChọn workspace

Bảng quản lý các chuyển động

Bảng thuộc tính

Bảng công cụ

Bảng mở rộng khác

Page 4: Slide Bai Giang Macromedia Flash CS5

Tạo mới file

Mục đích chọn› Actionscript 2.0 or 3.0 (lựa chọn các phiên bản script)› Adobe AIR 2.0 (dùng cho Mac, Windows, và Linux)› iPhone OS (dùng cho các thiết bị iPhone, iTouch và iPad)› Flash Lite (dùng cho các ứng dụng sử dụng tối thiểu điện năng và bộ nhớ) – Mới› Adobe Device Central (dùng cho các thiết bị điện thoại)

Tạo file có phần mở rộng (.fla)

Tạo file có phần mở rộng Khác. Tùy thuộc vào từng ứng dụng cần gọi các file này

Page 5: Slide Bai Giang Macromedia Flash CS5

Tạo mới file từ mẫu templates

Phân loại templates

Các mẫu chọn thuộc từng phân loại

Page 6: Slide Bai Giang Macromedia Flash CS5

Mở file Các định dạng

hỗ trợ .as file flash script .xfl, .xml file chứa mã định

dạng nội dung .asc file chứa mã giao tiếp

với máy chủ Flash .fla file flash .jsfl file chứa các hàm viết

bằng javascript đưa vào trong flash

.swf file flash đã dịch

Page 7: Slide Bai Giang Macromedia Flash CS5

Giao diện chương trình (ESSENTIALS)

Màn hình thiết kế

Kích cở màn hình

Phóng lớn màn hình

Hiển thị hình ảnh trong lớp

Khóa lớp

Hiển thị đường viền phân biệt lớp

Tên ứng dụng

Bảng quản lý các chuyển động

Mode quản lý các cảnh - scence

Page 8: Slide Bai Giang Macromedia Flash CS5

Giao diện chương trình (CLASSIC)

Page 9: Slide Bai Giang Macromedia Flash CS5

Giao diện chương trình Thay đổi kích cở màn hình thiết kế

Các phím tắt thông dụng› Ctrl +, Ctr – (Phóng lớn, thu nhỏ cửa sổ), Space bar (công cụ hand)› Ctrl + F3 (đóng mở bảng thuộc tính )› Ctrl + F2 (đóng mở bảng công cụ)› Ctrl + L (đóng mở thư viện)› Ctrl + K (đóng mở bảng canh chỉnh)› Ctrl + Alt + T (đóng mở bảng time line)› Ctrl + Enter (xem chuyển động)

Kích cỡ màn hình thiết kế

Thay đổi đơn vị đo lường

Thay đổi màu background

Thay đổi số hình trên giây (tần xuất)

Thiết lập mặc định

Page 10: Slide Bai Giang Macromedia Flash CS5

Lưu file

Chọn phiên bản lưu

Đặt tên file

Chọn đường dẫn lưu trữ

Page 11: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

Nhóm công cụ chọn đối tượng

Nhóm công cụ vẽ hình

Nhóm công cụ tô, xóa

Nhóm công zoom, hand

Đường viền và màu tô

Thuộc tính khác

Page 12: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ Nhóm công cụ vẽ hình

Công cụ Deco tool (U)

Chọn các hiệu ứng

Tính năng nâng cao

Công cụ text

Công cụ line

Công cụ pencil

Page 13: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ1. Nhóm công cụ vẽ hình cơ bản (hình tròn, vuông,…)2. Tính năng nhóm đường viền, màu tô và bắt dính đối tượng (snap) 3. Nhóm đường viền và màu tô

Page 14: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

2. Sử dụng công cụ line vẽ đường thẳng3. Bảng thuộc tính công cụ

Page 15: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Sử dụng công cụ pencil2. Thay đổi mode vẽ đường cong, thẳng, tự do3. Bảng thuộc tính công cụ pencil4. Mẫu vẽ trên màn hình thiết kế5. Thông số thay đổi độ mượt khi chọn mode vẽ đường cong

Page 16: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Công cụ vẽ hình ellipse – hình tròn2. Thay đổi đường viền – màu tô đối tượng

1. Công cụ vẽ hình vuông – chữ nhật2. Thuộc tính bo góc tròn3. Thuộc tính thay đổi kích cở hình4. Đối tượng trên màn hình thiết kế

Page 17: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ1. Công cụ vẽ hình đa giác2. Nút chọn thay đổi thuộc tính3. Thuộc tính thay đổi kiểu hình4. Thuộc tính quy định số đỉnh5. Thuộc tính quy định kích cở

Page 18: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Công cụ brush2. Mẫu chọn lựa cách tô màu

Page 19: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Công cụ phun màu (spray)2. Bảng thuộc tính chọn cách phun màu3. Mẫu phun

Page 20: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Công cụ décor2. Chọn mẫu tô3. Thay đổi thuộc tính màu tô4. Thay đổi hiệu ứng khác (mở rộng)5. Mẫu tô

Page 21: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Công cụ pen2. Click chọn từng điểm kế tiếp tạo đường path

Page 22: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

Nhóm công cụ chọn đối tượng

Công cụ chọn (V)

Công cụ subselect (A)

Công cụ thòng lọng (L)

Page 23: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. 4 đường và màu tô được có thể chọn riêng biệt2. Nhấn giữ phím shift để chọn các đối tượng khác3. 1 đường thẳng4. Khi 2 đường cắt nhau sẽ tạo thành 4 đường riêng biệt

5. Double click để chọn đường viền và màu tô6. Double click vào đường viền để chọn tất cả đường viền7. Click chọn và di chuyển đường viền 8. Chọn 1 đường viền

Page 24: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Công cụ select2. Thay đổi đường thẳng thành đường cong, thay đổi góc3. Chọn đường thẳng

Page 25: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ1. Đối tượng mẫu2. Chọn công cụ select3. Đưa trỏ chuột vào đường tròn, sao cho

xuất hiện mode thay đổi đường cong.Click và di chuyển đường cong đến vịtrí khác

4. Đưa trỏ chuột vào đường tròn, sao choxuất hiện mode thay đổi đường cong.Bấm Alt + Click và di chuyển đườngcong đến vị trí khác

Page 26: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ1. Đối tượng mẫu2. Chọn công cụ sub select3. Click chọn các điểm (node) trên đường tròn4. Bấm giữ phím alt + click chuột thay đổi đường

cong trên từng đoạn

Page 27: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Công cụ thòng lòng2. Chọn đối tượng

Page 28: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Chọn đối tượng2. Chọn công cụ transform3. Chọn thuộc tính thay đổi (scale, skew,

rotate, distort, envelope)4. Làm xiên đối tượng (xoay đối tượng)

5. Tâm đối tượng6. Thay đổi kích cỡ đối tượng đều7. Thay đổi kích cỡ theo chiều

ngang

Page 29: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

Page 30: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ

1. Chọn công cụ 3D Rotation (W)2. Chọn mode Global Transform3. Lần lượt di chuyển đối tượng theo một trong các hệ trục tọa độ X, Y, Z

để tạo chuyển động xoay đối tượng theo các hệ trục tọa độ trên.Lưu ý: để tạo đối tượng xoay này bắt buộc phải chuyển đối tượng thànhMovie, Graph, Button

Page 31: Slide Bai Giang Macromedia Flash CS5

Thanh công cụ1. Chọn công cụ 3D translation (di chuyển đối tượng

trong không gian 3 chiều)2. Chọn thuộc tính Global Transform3. Di chuyển đối tượng theo các hệ trục tọa độ x, y, z

Page 32: Slide Bai Giang Macromedia Flash CS5

Canh chỉnh đối tượng Canh chỉnh đối tượng

› Theo đường lưới (grid) Menu view grid Menu view edit grid (thay đổi thuộc tính lưới)

› Theo đường guide Menu view guide Menu view edit guide (thay đổi thuộc tính

đường guide)› Hiển thị thước

Menu view ruler› Bật tắt tính năng bắt dính đối tượng (snap)

Menu view snapping

Page 33: Slide Bai Giang Macromedia Flash CS5

Canh chỉnh đối tượng Sắp xếp các đối tượng

Nhóm, sắp xếp, phân tán các đối tượng○ Menu modify group (ctrl + g)

ungroup (ctrl + shift + g) ○ Menu modify arrange○ Menu modify align○ Menu modify transform

Ctrl + up (xếp lên trên)Ctrl + down (xếp xuống dưới)

Ctrl + shift + up (xếp lên trên 1 đối tượng)Ctrl + shift + down (xếp xuống dưới 1 đối tượng)

Page 34: Slide Bai Giang Macromedia Flash CS5

Canh chỉnh đối tượng Bảng canh chỉnh đối tượng (Ctrl + K)

Canh đối tượngtheo màn hìnhthiết kế

Page 35: Slide Bai Giang Macromedia Flash CS5

Tô màu Chọn màu trong bảng công cụ

Chọn màu trong bảng swatch› Ctrl + F9

Chọn màu trong bảng color› Alt + Shift + F9

Page 36: Slide Bai Giang Macromedia Flash CS5

Tô màu Bảng color (Alt + Shift + F9)

1. Mẫu tô minh họa2. Chọn hướng tô theo đường thẳng

lan tỏa từ tâm,…3. Chọn cách tô (mới)4. Vùng chọn màu5. Mẫu tô chuyển sắc6. Nút thay đổi từng vùng màu tô,

cũng như thay đổi độ trong suốtcủa đối tượng (alpha)

7. Chọn màu mới

Page 37: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Thiết kế và tạo chuyển động trong flash gần

giống như là quay một bộ film (movie).

Trên thực tế việc quản lý các chuyển động trong flash phức tạp hơn lý do:› Thiết kế chuyển động (đơn giản – phức tạp)› Cách tổ chức quản lý các chuyển động› Tổ chức quản lý các đối tượng trong từng chuyển động› Chọn lựa các chuyển động….

Movie Flash

Quay từng cảnh24 hình/giâyGhép nối từng đoạnLồng tiếng

Tạo chuyển động trên từng cảnh24 frame/giâyKết hợp từng cảnh chuyển độngĐưa âm thanh vào chuyển động

Page 38: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động

Nguyên tắc tạo chuyển độngViệc thay đổi vị trí các đối tượng trong từng

hình (frame) ○ Có bao nhiêu cách tạo chuyển động ?○ Quản lý các chuyển động như thế nào ?○ Thay đổi tốc độ chuyển động như thế nào ?

Page 39: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Bảng time line control

Bảng quản lý và điều khiển các chuyển động các thành phần khác nhau trong các cảnh (scence) được xếp theo từng hàng gọi là layers, các cột trong từng dòng gọi là frames.

Frames chứa các đối tượng để tạo chuyển động Với mỗi layer chứa các frames khác nhau cho phép tạo

và quản lý nhiều chuyển động cùng lúc. Frames view buttons

Tần xuất chuyển động

Số framesCác lớp

New, Folder, Delete

Lớp hiện hành

Page 40: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Bảng time line control

› Layer 3 có 1 keyframe rỗng (chưa có đối tượng bên trong) › Layer 2 có 1 keyframe (có chứa đối tượng bên trong)

Đối tượng bên trong keyframe có thể là 1 hình, 1 chữ, hoặc 1 movie clip,…

› Layer 1 có 1 keyframe và các frame 2,3,4,5 để chỉ đối tượng trong lớp này sẽ hiển thị trên màn hình trình diễn trong khoảng thời gian 5/24

Để tạo chuyển động nhanh hay chậm› Thay đổi tần xuất mặc định 24 frames / giây› Tăng giảm số frame trong từng lớp

Page 41: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Frame by Frame by

Frame Frame

Các phím tắt xử lý framesThêm frames F5Xóa frames Shift + F5Copy keyframe F6Xóa keyframe Shift + F6

Các thao tác xử lý khácCopy keyframe Alt + Click chuột di

chuyển keyframes sang layer khác (hoặc sang vị trí khác trên cùng layer)

Page 42: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Frame by Frame by

Frame Frame Tạo chuyển động quả banh

› Việc thay đổi vị trí các đối tượng trong từng lớp để tạo ra chuyển động của chúng (ctrl + enter xem thử chuyển động)

› Khi quả banh chuyển động đến frame thứ 3 thì dừng lại hay tiếp tục chuyển động?

› Nếu quả banh tiếp tục chuyển động thì sẽ chuyển động ngược lại theo tuần tự 3,2,1,2,3…. Hay là chuyển động lại từ đầu?

Page 43: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Frame by Frame by

Frame Frame

Nhận xét chuyển động quả banhVới tuần xuất chuyển động 24 frames/giây

chuyển động quá nhanh không thấy rõ được vị trí quả banh tại các vị trí của chúng.

Sau khi thay đổi tuần xuất chuyển động 3 frames/giây thấy rằng quả banh chuyển động đến vị trí thứ 3 rồi nhảy đến vị trí 1 (chuyển động lại từ đầu). Điều này cho thấy rằng để tạo chuyển động mượt hơn cần tạo thêm 1 keyframe thứ 4 và copy keyframe thứ 2 sang vị trí keyframe thứ 4 để có được 1 chuyển động tuần tự từ 1 3 và ngược lại từ 3 1

Page 44: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Frame by Frame by

Frame Frame

Câu hỏi Nếu chuyển động phức tạp thì cần phải tạo

bao nhiêu frames ?Cơ bản việc thay đổi vị trí của của các đối

tượng trong frames để tạo chuyển động. Nhưng trong trường hợp quá nhiều frames (100 frames, hoặc hơn nữa) thì thay đổi vị trí các chuyển động bao nhiêu lần ?

Quản lý các frame này như thế nào ?Nếu có nhu cầu cần sử dụng lại các chuyển

động này thì làm như thế nào ?

Page 45: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Giới thiệu motion tweenTrong flash, việc tạo chuyển động không nhất

thiết là thay đổi vị trí các đối tượng trong từng frames.

Bằng cách thay đổi vị trí đầu vị trí cuối của đối tượng trong keyframes đầu và keyframes cuối và flash sẽ tự động tạo toàn bộ chuyển động theo từng frames giữa keyframes đầu và cuối gọi tweening

Tweening cho phép tạo chuyển động nhanh chóng và áp dụng các hiệu ứng fade, color, alpha, scale,… trong từng chuyển động.

Page 46: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Trong phiên bản Flash CS5 phân làm 2 loại chuyển động là Classic tween và motion tween

Tạo chuyển động motion tween dễ dàng hơn classic tween và chuyển động motion tween cung cấp các điều khiển đối tượng chính xác hơn, trong khi chuyển động classic tween thì phức tạp và cung cấp quá nhiều tính năng mở rộng để điều khiển đối tượng.

Các phiên bản flash CS3 trở về trước tạo chuyển động bằng kiểu classic tween.

Page 47: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Motion tweenYêu cầu tạo chuyển

động○ Convert đối tượng thành

symbol○ Chỉ cần 1 keyframes để

tạo chuyển động

Đặc điểm khác○ Không cho viết script trực

tiếp trên frames○ Cho phép tạo chuyển

động đối tượng 3D

Classic tween› Yêu cầu tạo chuyển

động Không cần thiết convert

đối tượng thành symbol Phải có keyframes đầu

và cuối để tạo chuyển động

› Đặc điểm khác Cho viết script trực tiếp

trên frames Không cho phép tạo

chuyển động đối tượng 3D

Page 48: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Chuyển đối tượng thành 1 symbol (convert symbol)› Đưa đối tượng vào màn hình thiết kế› Bấm F8 định đối tượng thành các ứng dụng sau

Movie clip Graphic Button

Mục đích chuyển đổi đối tượng thành symbol› Tạo chuyển động› Sử dụng lại các chuyển động› Quản lý các chuyển động

Page 49: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Tạo chuyển động quả banh

1. Chọn đối tượng2. Bấm f8 định đối tượng là

movie clip

3. Chọn vị trí frame thứ 10bấm F5 thêm frame

Page 50: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Tạo chuyển động quả banh (tt)

4. Click phải chuột lên vị trí frame thứ 1chọn lệnh create motion tween

5. Chọn vị trí frame thứ 10

Page 51: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Tạo chuyển động quả banh (tt)

6. Di chuyển quả banh lên trên

Page 52: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Tạo chuyển động quả banh (tt)Bấm ctrl + enter để kiểm tra chuyển động

Page 53: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Nhận xétTăng số frame lên 24 frame thì chuyển động như thế

nào?Thay đổi đường path (màu xanh lá) trong màn hình

thiết kế thì chuyển động như thế nào?

Page 54: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion Tween Motion Tween

Các thuộc tính chuyển động (motion tween)

Ease

Rotate

Path Hiệu chỉnh trực tiếp

Page 55: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Lưu và sử dụng lại chuyển độngMenu windows motion presetĐặt tên chuyển động

Áp dụng chuyển động cho đối tượng khácTạo mới đối tượngConvert symbol movie clipMenu windows motion preset

chọn mẫu chuyển động đã tạo trước đóChọn nút apply để áp dụng mẫuBấm Ctrl + enter xem kết quả

Tạo mới

Page 56: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Tạo chuyển động quả banh (tt)

1. Chọn đối tượng2. Bấm f8 định đối tượng là

movie clip

3. Chọn vị trí frame thứ 10bấm F6 copy frame

Page 57: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Tạo chuyển động quả banh (tt)

4. Di chuyển banh đến vị trí khác

Page 58: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Tạo chuyển động quả banh (tt)

5. Click phải chuột lên key framesthứ nhất chọn lệnh create classictween

6. Bấm ctrl + enter xem chuyển động

Page 59: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Tạo chuyển động quả banh (tt)

Page 60: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Các thuộc tính chuyển động (classic tween)

Page 61: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Các thuộc tính chuyển động (classic tween)

Lưu ý:Classic tween yêu cầu phải tạo lớp đường guide (add motion guide) trướcMotion tween không cần phải tạo lớp đường guide

Page 62: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Các thuộc tính chuyển động (classic tween)

Page 63: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Các thuộc tính chuyển động (classic tween)

Page 64: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Các thuộc tính chuyển động (classic tween) Ease thuộc tính thay đổi vị trí đối tượng trong chuyển động Orient to path thuộc tính đặt đối tượng chuyển động dọc theo đường

path Snap thuộc tính bắt dính đối tượng theo đường path Rotate thuộc tính xoay đối tượng (cw, ccw) Scale thuộc tính thay đổi tỉ lệ đối tượng

Lưu ý:Chọn keyframe để thay đổi các thuộc tính trên

EaseRotate

Snap, Orient…

Page 65: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Các hiệu ứng trong chuyển động› Color effect các hiệu ứng liên quan đến màu sắc

Alpha thay đổi độ trong suốt đối tượng Brightness thay đổi độ sáng đối tượng Tint đổi màu sắc đối tượng Advance kết hợp thay đổi màu sắc và độ trong suốt

› Display thay đổi các mode hòa trộn Xem lại trong PS

› Filters áp dụng các bộ lọc Drop shadow hiệu ứng bóng đổ Blur hiệu ứng mờ Glow hiệu ứng hào quang Bevel hiệu ứng nổi Gradient glow hiệu ứng hào quang chuyển sắc Gradient bevel hiệu ứng trạm nổi đổi màu Ajust color hiệu ứng thay đổi màu sắc

Lưu ý: Chọn đối tượng đầu và cuối để áp dụng các hiệu ứng (chọn đối

tượng trong keyframe)

Page 66: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Thay đổi màu sắcTint – Alpha – Brightness – Advance

Page 67: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Thay đổi màu sắcTint – Alpha – Brightness – Advance

Chọn đối tượng để áp dụng hiệu ứng

Page 68: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Filter Dropshadow – Blur – Glow

Page 69: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Classic Tween Classic Tween

Filter Dropshadow – Blur – Glow

Chọn đối tượng để áp dụng hiệu ứng

Chọn hiệu ứng

Page 70: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion Tween Motion Tween

Filter (blur, dropshadow, glow,….)Bảng Monitor editor

Thuộc tính

Chuyển động

Dịch chuyển

Hiệu ứng màu

Bộ lọc

Thay đổi tốc độ

Chọn các hiệu ứng dropshadow, blur,…

Page 71: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Filter

Blur X mờ đối tượng theo trục XBlur Y mờ đối tượng theo trục Y

Page 72: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Filter

Click phải chuột tại vị trí frame cuối cùng trong chuyển động, chọn lệnh add keyframeThay đổi đường chuyển động để thay đổi hiệu ứng thích hợp

Page 73: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Page 74: Slide Bai Giang Macromedia Flash CS5

Tạo chuyển động Motion TweenMotion Tween

Page 75: Slide Bai Giang Macromedia Flash CS5

Chuyển động biến hình Shape Tween

Giới thiệuVề cơ bản việc tạo chuyển động Shape

tween gần giống như là motion tween, cũng có keyframe, color, scale,…. Nhưng mục đích chính của chuyển động là thay đổi hình dạng.

Page 76: Slide Bai Giang Macromedia Flash CS5

Chuyển động biến hình Shape Tween

Tạo chuyển động

1. Vẽ đối tượng hình đa giác

Lưu ý: Chuyển động biến hình chỉ áp dụng đối với ảnh vector Đối tượng ảnh không được group (ungroup)

2. Chọn vị trí frame thứ 7 (hoặc vị trí khác)bấm F7 (thêm keyframe rỗng)

3. Vẽ đối tượng ngôi sao 10 đỉnh

Page 77: Slide Bai Giang Macromedia Flash CS5

Chuyển động biến hình Shape Tween

Tạo chuyển động

4. Click phải chuột lên keyframe thứ 1 chọn lệnh Create Shape Tween

5. Bấm Ctrl + enter để xem chuyển động

Page 78: Slide Bai Giang Macromedia Flash CS5

Chuyển động biến hình Shape Tween

Page 79: Slide Bai Giang Macromedia Flash CS5

Chuyển động biến hình Shape Tween

Kiểm soát chuyển động biến hình

Page 80: Slide Bai Giang Macromedia Flash CS5

Chuyển động biến hình Shape Tween

Kiểm soát chuyển động biến hình1. Chọn keyframes đầu tiên2. Chọn menu modify shape

add shape hint (ctrl + shift + h)3. Di chuyển vị trí hint đến các vị trí

cần neo giữ khi thực hiện biến hình4. Chọn vị trí keyframes thứ 2 và di

chuyển hint đến vị trí cần neo giữ5. Thực hiện lại các bước 2,3,4 để tạo

các vị trí cần neo giữ khác

Các vị trí neo giữ

Lưu ý:Gở bỏ hint click phải chuột vào cácCác trí neo giữ chọn lệnh remove hint

Page 81: Slide Bai Giang Macromedia Flash CS5
Page 82: Slide Bai Giang Macromedia Flash CS5

Mặt nạ (mask)

Giới thiệuMặt nạ dùng để hiển thị một phần hoặc tất

cả các đối tượng trong chuyển động

Page 83: Slide Bai Giang Macromedia Flash CS5

Mặt nạ (mask)

Tạo chuyển động mặt nạ

1. Tạo lớp chữ trên layer 12. Tạo lớp hình tròn trên layer 2

Page 84: Slide Bai Giang Macromedia Flash CS5

Mặt nạ (mask) Tạo chuyển động mặt nạ

3. Chọn vị trí frame thứ 30 nhấn f5 để thêm frame4. Di chuyển đường tròn qua bên phải5. Click phải chuột lên keyframe thứ 1 chọn lệnh create motion tween

Page 85: Slide Bai Giang Macromedia Flash CS5

Mặt nạ (mask)

Tạo chuyển động mặt nạ

6. Click phải chuột lên layer 2, chọn lệnh Mask7. Bấm Ctrl + Enter để xem chuyển động

Lưu ý:Có thể áp dụng mặt nạ cho nhiều lớpClick phải chuột lên lớp mặt nạ, chọn lại lệnh mask (gỡ bỏ lớp mặt nạ)

Page 86: Slide Bai Giang Macromedia Flash CS5

Mặt nạ (mask)

Tạo chuyển động mặt nạ

Page 87: Slide Bai Giang Macromedia Flash CS5

Xử lý âm thanh

Giới thiệu Sử dụng âm thanh để tăng hiệu quả trình diễn đối với người

xem. Tuy nhiên để điều khiển âm thanh hiệu quả đòi hỏi người thiết

kế phải có kiến thức nhất định về cách điều khiển âm thanh (import, xử lý, phân loại âm thanh), cũng như biết được các định dạng mà chương trình hỗ trợ.

Có 2 dạng âm thanh là event sounds và stream sounds. Event sound cần phải hoàn tất việc download trước khi khởi

động và play. Event sound vẫn tiếp tục play đến khi hết bảng nhạc hoặc do người sử dụng tắt.

Stream sound khởi động khi đã đủ dữ liệu download trong trong những frames đầu tiên. Stream sound được sử dụng trên các web site

Page 88: Slide Bai Giang Macromedia Flash CS5

Xử lý âm thanh

Import âm thanh Menu file import to stage (màn hình thiết kế) Menu file import to library (thư viện)

Page 89: Slide Bai Giang Macromedia Flash CS5

Xử lý âm thanh

Tên bài hát

Thay đổi hiệu ứng

Chỉnh âm thanh

Repeat (lặp lại âm thanh)Loop (lặp vô tận)

Page 90: Slide Bai Giang Macromedia Flash CS5

Xử lý âm thanh

Phóng lớn

Thu nhỏ

Xem theo thời gian

Xem theo frames

Chỉnh volume giảm dần theo frames

Left

Right

Page 91: Slide Bai Giang Macromedia Flash CS5

Xử lý âm thanh

Các định dạng file hỗ trợ ASND (Windows or Mac) định dạng của Adobe SoundboothTM

WAV (Windows) AIFF (Mac) MP3 (Windows or Mac) AIFF (Windows or Mac) Sound Designer II (Mac) Sound Only QuickTime Movies (Windows or Mac) Sun AU (Windows or Mac) System 7 Sounds (Mac)

Page 92: Slide Bai Giang Macromedia Flash CS5

Tạo nút điều khiển

B1 – vẽ nút điều khiểnB2 – bấm f8 định đối tượng

là buttons

B3 – bấm f6 copy keyframestại các vị trí over, hit…

B4 – thay đổi màu sắcđối tượng tại vị trí over

Các trạng thái nút:- Up trạng thái mặc định nút- Over trạng thái thay đổi khi rê chuột lên nút- Down trạng thái thay đổi khi nhấn và giữ nút- Hit vùng ảnh hưởng đến các trạng thái nút

Lưu ý:- Nên đưa các chuyển động vào vị trí Over để tạo hiệu ứng cho nút điều khiển

Page 93: Slide Bai Giang Macromedia Flash CS5

Actionscript Giới thiệu AS

AS là ngôn ngữ lập trình cho phép người sử dụng điều khiển các đối tượng trong chuyển động, hiển thị dữ liệu,…. Bằng cách sử dụng lệnh xử lý.

Sử dụng AS phải theo đúng quy tắc từ việc sử dụng các từ khóa, cách dùng biến lưu trữ và nhận dữ liệu…

Các phiên bản script ○ Actionscript 3.0○ Actionscript 2.0

Page 94: Slide Bai Giang Macromedia Flash CS5

Actionscript Viết lệnh điều khiển chuyển động

1. Tạo chuyển động bánh răng2. Tạo các nút điều khiển play, stop3. Chọn các nút lần lượt đặt tên cho

từng nút điều khiển

Page 95: Slide Bai Giang Macromedia Flash CS5

Actionscript Viết lệnh điều khiển chuyển động

1. Chọn nút lệnh play2. Bấm F9 mở bảng AS3. Mở bảng Code Snippets4. Chọn đối tượng điều khiển5. Event Handlers Mouse Click Event6. Gõ lệnh điều khiển chuyển động play();7. Thực hiện tiếp theo cho nút lệnh stop8. Gõ lệnh điều khiển chuyển động stop();

Page 96: Slide Bai Giang Macromedia Flash CS5

Actionscript Viết lệnh điều khiển chuyển động

Bấm Ctrl + F9 kiểm tra lại các chuyển động và các nút điều khiển

Page 97: Slide Bai Giang Macromedia Flash CS5

Actionscript

Di chuyển qua lại các frames

Page 98: Slide Bai Giang Macromedia Flash CS5

Actionscript

Di chuyển qua lại các frames

Page 99: Slide Bai Giang Macromedia Flash CS5

Actionscript

Page 100: Slide Bai Giang Macromedia Flash CS5

Actionscript