Thiết kế: Macromedia Flash

Macromedia Flash 5.0
Flash là một công cụ để tạo ra những trang web động
và có khả năng tương tác với người dùng.
1/- Giới thiệu về Flash
Bạn cần biết những gì trước khi học Flash?
Trước khi bước vào học Flash, bạn cần biết một số kiến thức cơ bản về những vấn đề sau:
WWW, HTML và kỹ thuật xây dựng Web cơ bản
Flash là gì?
Macromedia Flash là một chương trình kết hợp đồ hoạ và âm thanh đặc biệt được sử dụng
cho web. Flash cho phép bạn tạo ra những "đoạn phim" có khả năng tương tác. Flash sử
dụng những hình ảnh vector, điều đó có nghĩa là hình ảnh có thể phóng đại, thu nhỏ đến
bất kì kích cỡ nào mà không giảm chất lượng (độ sắc nét của ảnh). Flash không đòi hỏi bạn
phải có kỹ năng lập trình, và một điều thật tuyệt là Flash rất dễ học!!!
Flash vs. Animated Images, Java Applets
Ảnh động và Java applet thường được sử dụng để tạo những hiệu ứng động cho trang web.
Và những điểm tiến bộ của Flash so với ảnh động và Java applet là:
Flash load nhanh hơn nhiều so với ảnh động
Flash cho phép tương tác với người dùng, còn ảnh động thì không
Flash không đòi hỏi kỹ năng lập trình như Java applets
2/- Flash, làm thế nào…???
Những ai có thể xem được Flash?
Macromedia đã nói: "Tháng 9 năm 2000, theo nghiên cứu của NPD (MediaMetrix) về việc
có bao nhiêu người sử dụng Web có Macromedia Flash đã được install sẵn. Kết quả lá
khoảng 96.4% người dùng có thể xem Flash mà không cần download và install chương
trình đề chạy."
Macromedia Shockwave Player được kèm theo trong các hệ đều hành Windows 95, 98,
MacOS, Internet Explorer CD, America Online, và Netscape Navigator.
Nếu bạn chưa install Shockwave Player bạn có thể download miễn phí trong trang chủ của
Macromedia (200 K).
Những ai có thể tạo Flash Movies?
Để tạo được Flash movies của chính bạn, bạn cần có 1 chương trình Flash, phiên bản mới

nhất của Macromedia là Flash 5. Nếu ban không có chương trình Flash thì có thể
download phiên bản dùng thử 30 ngày của Flash 5 trong trang chủ của Macromedia.
Nên bắt đầu từ đâu?
Sau khi đã install Flash, bạn nên theo những bài học đã được kèm theo trong chương trình.
Khởi động Macromedia Flash, chọn Help trên thanh menu và chọn Lessons. những bài học
này sẽ dạy bạn nền tảng về Flash.
3/- Flash và HTML
Flash được kèm theo trong HTML
Sau khi đã tạo được một Flash movie, bạn chọn File > Save As trong thanh menu để lưu
file movie của bạn. Lưu file với đuôi .fla. Để kèm Flash movie bạn vừa tạo vào 1 trang
HTML, bạn hãy trở lại chương trình Flash và làm những bước sau:
Bước 1 Chọn File > Open. Mở Flash movie bạn vừa tạo được.
Bước 2 Chọn File > Export Movie.
Bước 3 Đặt tên cho file Flash cua bạn với đuôi .swf. Chọn vị trí để chứa file Flash của bạn
(trong thư mục chứa Web của bạn). Cick OK.
Bước 4 Mở trang HTML của bạn, chọn vị trí bạn muốn đặt Flash movie. Nhập vào đoạn
mã sau đây:
<object width="chiều ngang" height="chiều cao">
<param name="tên" value="tên file flash .swf">
<embed src="tên file Flash .swf" width="chiều ngang" height="chiều cao">
</embed>
</object>
Chú ý: Đây là đoạn mã ngắn nhất mà bạn cần để kèm Flash movie vào trang web. Nếu
người dùng không xem được Flash thì trình duyệt sẽ hiện ra kí hiệu liên kết gãy.
Chú ý: Trong đoạn mã trên, có cả thẻ <embed> và thẻ <object>. Bởi vì thẻ <object>
dành cho Internet Explorer, còn Netscape chỉ nhận được thẻ <embed> và bỏ qua thẻ
<object>.
Bước 5 Bây giờ hãy mở trang HTML và xem đoạn phim Flash đầu tiên của bạn
Hãy để chương trình Flash làm việc
Đoạn mã trên đây là đoạn mã tương đối ngắn nhất để kèm Flash vào trang HTML. Nhưng

bạn không nên dùng nó. Hãy thêm một số thuộc tính:
• classid là một thuộc tính cho thẻ <object>. Nó bắt Internet Explorer load ActiveX
plug-in nếu chưa installed sẵn trong máy.
• pluginspage là thuộc tính cho thẻ <embed>. Nó hiển thị một link đến trang
Download của Shockwave download nếu Netscape chưa có plugin. Chương trình
Flash có thể thêm một số thuộc tính cho bạn, hãy làm như sau:
Bước 1 Chọn File > Publish. Flash sẽ tạo các thẻ <object>, <param>, và <embed> cho bạn,
kể cả các thuộc tính classid và pluginspage.
Bước 2 Mở tài liệu HTML mà Flash đã tạo, xem source và copy đoạn mã cho trang HTML
của bạn.
4/- Flash Tweening
Thuật ngữ Tweening được tạo ra từ "in between". Với Tweening bạn có thể làm cho Flash
movie cua mình đi từ một keyframe tới một keyframe khác, và thay đổi hoạt ảnh. Hãy để
Flash làm việc đó, bạn chi cần 2 keyframe và Flash tạo ra những frame ở giữa chúng (“in
between”).
Với ví dụ này, bạn sẽ học cách tạo ra 1 đối tượngchuyển động dọc theo màn hình:
Bước 1 Tạo một hình tròn nhỏ bên trái trong khu vực Stage. Bạn làm điều này bằng cách
chọn công cụ vẽ hình tròn trên toolbar bên trái, và vẽ ở khu vực Stage.
Bước 2 Chọn công cụ Arrow (mũi tên) trên toolbar bên trái. Click vào hình tròn vừa vẽ để
chọn nó.
Bước 3 Bây giờ chúng ta phải chuyển hình tròn này thành 1 symbol. Bởi vì khi đã chuyển
thành symbol chúng ta mới có thể làm việc với nó. Từ menu, chọn Insert > Convert to
Symbol. Đặt tên symbol này, "Ball" chẳng hạn, và chọn OK.
Bước 4 Chuyển tới Frame 10 trong Timeline bằng cách click ô màu xám bên dưới số 10.
Sau đó click phải trong ô này, chọn Insert Keyframe. Quá trình này đã sao chép hình ảnh.
Chú ý: Mỗi keyframe đều ảnh hưởng đến sự hoạt động của các đối tượng trong đoạn phim
của bạn. Bạn hãy tạo keyframes tại những thời điểm quan trọng trong Timeline và để Flash
tạo các frames ở giữa.
Bước 5 Chọn hình tròn và di chuyển nó về bên phải một vài cm.
Bước 6 Click vị trí bất kỳ trên Timeline trong khoảng từ Frame 1 đến Frame 10. Sau đó

click chuột phải và chọn Create Motion Tween.
Bước 7 Chọn Control > Test Movie từ menu để thử nghiệm Flash movie của bạn!
5/- Flash Guide Tweening – Tweening với đường dẫn
Với Motion Guide Tweening bạn có thể di chuyển 1 từ vị trí này đến vị trí khác dọc theo
đường dẫn đã được chỉ ra.
Với ví dụ sau, bạn sẽ học cách vẽ đường dẫn cho một đối tượng.
Bước 1 Chọn Window > Common Libraries > Graphics. Chọn một hình ảnh mà bạn muốn
sử dụng cho ví dụ này, tôi sử dụng một chú chuột màu xanh.
Bước 2 Click trên hình, và drag nó ra khỏi biên ngang của Stage.
Bước 3 Chọn Frame 40 trên Timeline (click trên ô màu xám bên dưới số 40). Sau đó click
chuột phải, chọn Insert Keyframe.
Bước 4 Click bất cứ vị trí nào trên Timeline giữa khoảng Frame 1 và Frame 40, sau đó
click phải, chọn Create Motion Tween.
Bước 5 Click chuột phải trên Layer 1 (Chọn trên tên của layer, chỗ ghi "Layer 1"). Chọn
Add Motion Guide trong menu pop-up. Bây giờ Flash sẽ thêm vào motion guide layer
phía trên layer 1. Motion guide layers dùng để vẽ đường dẫn cho symbol chạy theo.
Bước 6 Click vào Motion Guide Layer để chắc chắn nó là layer đang hoạt động (Chọn
trên tên layer, chỗ ghi "Guide: Layer 1").
Bước 7 Click vào công cụ Pencil (bút chì) trên thanh công cụ bên trái. Chọn chế độ bút chì
Smooth (nét vẽ mượt) trong khu Options thanh công cụ bên trái.
Bước 8 Vẽ một đường, bắt đầu từ hình ảnh của bạn và vẽ sang biên bên kia của Stage.
Bước 9 Chọn lai Frame 1 trên Timeline. Chọn công cụ Arrow (mũi tên) trên thanh công cụ
bên trái. Chọn nút "Snap to Objects" trong khu Options của thanh công cụ.
Bước 10 Dời hình ảnh của bạn sao cho điểm chính giữa của nó ngay chỗ đường dẫn bắt
đầu (đường mà bạn đã vẽ bằng bút chì Pencil). Điểm giữa của hình được biểu hiện bởi 1
dấu +. Một đường tròn đen nhỏ xuất hiện khi hình ảnh của bạn đã được gắn với đường dẫn
(motion guide). Thả chuột ra!
Bước 11 Chọn Frame 40. Dời hình của bạn sao cho điểm chính giữa trùng với diểm kết
thúc của đường dẫn.
Bước 12 Chọn Control > Test Movie trên menu để thử nghiệm Flash movie cua bạn.

Flash Movie của bạn có chạy nhanh quá không?
Bạn có thể điều chỉnh tốc độ bằng cách chọn Modify > Movie trên menu. Hộp thoại
Movie Properties (thuộc tính của Movie) sẽ xuất hiện. Frame Rate điều chỉnh bao nhiêu
frame sẽ xuất hiện trong một giây. Bạn chọn một con số nhỏ hơn và thử lại Flash movie
cho đến khi vừa ý!
6/- Flash Tint Tweening
Với Tint Tweening bạn có thể đổi màu cho một đối tượng. Với ví dụ sau, bạn sẽ được học
cách để làm điều đó.
Bước 1 Chọn Insert > New Symbol.
Chú ý: Để thêm hiệu ứng Tint, đối tượng của bạn phải là 1 Symbol.
Bước 2 Đặt tên cho symbol là "changecolor" và chọn Behavior là Graphic. Click OK.
Chú ý: Chương trình Flash sẽ chạy phần ứng dụng tạo symbol của nó. Bạn có thể tạo
symbol bằng chương trình này. Bạn có thể drag các Symbol vào stage sau khi đã tạo xong
chúng.
Bước 3 Chọn công cụ Text trên toolbox bên trái. Chọn Text > Size > 36 trên thanh menu
để chữ to hơn. Chọn Text > Style > Bold.
Bước 4 Click vào khu vực làm việc và gõ "Color Changing Text".
Bước 5 Trở lại Movie của bạn bằng cách chọn Edit > Edit Movie.
Bước 6 Chèn symbol bạn vừa tạo vào Movie. Chọn Window > Library. Chọn symbol
"changecolor" và drag nó vào giữa Stage.
Bước 7 Thêm vào 2 keyframe ở Frame 15 và Frame 30.
Bước 8 Đến Frame 15. Click phải vào text ở giữa Stage. Trong pop-up menu, chọn Panels
> Effect.
Bước 9 Chọn Tint từ menu đổ xuống, một bảng màu sẽ xuất hiện. Chỉnh màu: R=0,
G=255, B=0.
Bước 10 Click Timeline bất cứ chỗ nào trong khoảng từ Frame 1 đến Frame 15. Sau đó
click phải, chọn Create Motion Tween.
Bước 11 Tương tự với khoảng từ Frame 15 đến Frame 30.
Bước 12 Chọn Control > Test Movie trên thanh Menu để thử nghiệm Flash movie.
7/- Flash Shape Tweening - Đổi hình dáng

Với Shape Tweening bạn có thể đổi hình dạng của 1 đối tượng. Bạn sẽ được học qua ví
dụ sau đây:
Bước 1 Chọn công cụ Text trên thanh công cụ bên trái. Chọn Text > Size > 48 trên menu
chính để là chữ to hơn. Chọn Text > Style > Bold để làm chữ đậm hơn.
Bước 2 Click vào không gian làm việc và gõ "Hello".
Bước 3 Click phải vào Text mà bạn vừa gõ, chọn Panels > Align từ pop-up menu.
Bước 4 Trong hộp thoại Align bấm nút "To Stage" trước tiên. Sau đó bấm nút "Align
Horizontal Center" và nút "Align Vertical Center". Đóng hộp thoại Align.
Bước 5 Chọn công cụ Arrow rồi bấm vào đối tượng text. Chọn Modify > Break Apart
trên menu chính.
Bước 6 Chèn keyframe ở Frame 24, 50 và 51.
Bước 7 Xoá chữ "Hello" ở Frame 24: chọn nó và bấm Delete trên bàn phím.
Bước 8 Viết 1 chữ khác trên Stage, "World!” chẳn hạn (Font size: 48, style: bold).
Bước 9 Click phải trên đối tượng text bạn vừa tạo và chọn Panels > Align trong menu
pop-up menu. Trong hộp thoại Align chọn nút "To Stage", sau đó click nút "Align
Horizontal Center" và nút "Align Vertical Center". Đóng hộp thoại Align lại.
Bước 10 Dùng công cụ Arrow và click vào đối tượng text. Chọn Modify > Break Apart
trên menu chính.
Bước 11 Chèn 1 keyframe tại vị trí Frame 26.
Bước 12 Click đúp keyframe ở Frame 1. Trong hộp pop-up nhỏ, click chọn tab Frame.
Chọn thuộc tính Tweening là Shape. Đóng hộp pop-up lại.
Bước 13 Tương tự ở Frame 26.
Bước 14 Click đúp trên keyframe ở Frame 51. Trên hộp pop-up lớn, click chọn tab Frame
Actions. Click lên dấu +. Chọn Basic Actions > Go To. Đóng hết pop-up.
Bước 15 Chọn Control > Test Movie trên menu chính để thử nghiệm Flash movie của
bạn.
8/- Flash Button 1
Trong ví dụ này bạn sẽ học cách để chèn 1 hình, chuyển nó thành button (nút bấm), và
thêm URL cho nó, nút bấm của bạn sẽ trở thành 1 link.
Bước 1 Chọn File > Import to để thêm vào 1 hình. Chọn hình rồi bấm Open. Hình này sẽ

được lưu vào Library.
Bước 2 Chọn hình này với công cụ Arrow.
Bước 3 Chuyển hình thành 1 symbol: Chọn Insert > Convert to Symbol trên menu chính.
Đặt tên cho symbol này là "button", chọn Behavior là Button rồi click OK.
Bước 4 Click phải lên hình, chọn Actions từ pop-up menu.
Bước 5 Trong hộp thoại Object Actions click vào dấu +. Chọn Basic Actions > Get URL.
Bước 6 Nhập 1 URL đầy đủ vào field URL (ví dụ như ).
Bước 7 Chọn target Window. Đóng hộp thoại Object Actions.
Bước 8 Chọn Control > Test Movie để thử nghiệm Flash movie của bạn.
9/- Flash Button 2
Ví dụ:
Bước 1 Chọn Insert > New Symbol trên menu chính.
Bước 2 Đặt tên symbol là "button", chọn Behavior là Button rồi click OK. Trên Timeline,
bạn sẽ thấy 4 state của 1 button: up, over, down, hit.
Bước 3 Chọn côg cụ Rectangle (hình chữ nhật), chọn 1 màu đỏ sáng làm màu tô và vẽ 1
hình chữ nhật vào không gian làm việc.
Bước 4 Chọn công cụ Text, chọn 1 màu đậmvà gõ "Click Me" trên hình chữ nhật.
Bước 5 Chọn công cụ Arrow và di chuyển text và giữa hình chữ nhật.