hướng đãn cơ bản về flash phần 1

Các bàỉ hướng dẫn cơ bản về Flash (Phần 1)
Không aỉ cổ thể nghỉ ngờ và hoàỉ nghỉ bất cứ đỉều gì về sức mạnh và
tiện ích của Flash mang lạỉ cho thế giới Internet ngày nay. Bài viết
sau sẽ hưáng dẫn các bạn những bước Cữ bản và đom giản nhất để
xây dụng, sử dụng Flash theo cách liêng.
Những kiến thức cần nắm rõ: WWW, HTML và cách xây dựng 1 trang
web.
Flash là gì?
- Là 1 ứng dụng đồ họa được sử dụng rộng rãi trên các trang web
- Với khả năng sáng tạo vầ đáp ứng gần như vô hạn, không có gì là quá
khó tưởng tượng với Flash
- Sử dụng các ảnh đồ họa vector, có nghĩa là các bức ảnh có thể được co
giãn với bất kỳ kích thước mà không làm gỉảm chất lượng
- Không yêu cầu quá khắt khe về các chương trình chuyền dụng và kỹ
năng ỉàm việc
So sánh Flash vói ảnh động (Animated Images) và Java Applets: khỉ
tiến hành so sánh những ứng dụng này, ta cố thể dễ dàng nhận ra những
sư khác bỉêt sau
- Flash có tốc độ tải nhanh hơn nhiều so với ảnh động
- Cho phép người dùng tương tác trực tiếp lên các đối tượng trong đó, còn
ảnh động thì không
- Flash không yêu cầu quá nhiều về kỹ năng xử lý, đối với java applets thì
ngược lại
Làm thế nào để xem được Flash
- Theo 1 cuộc khảo sát được tiến hành vào tháng 9/2000, công ty mẹ của
MediaMetrix, đã tiến hành điều tra về tổng số các trình duyệt web được
cài đặt sẵn Flash, kết quả thật bất ngờ khi có tới 96.4% tổng số trình
duyệt đáp ứng được điều này. Neu chưa có chương trình hỗ trợ
Shockwave Player, bạn có thể tải về và cài đặt tai đây.
Làm thế nào để tạo được Flash
- Công cụ nhất thiết cần có là chương trình hỗ trợ, các bạn có thể lựa

chọn giữa các ứng dụng tạo mẫu sẵn có hiện nay, hoặc tốt nhất là sử dụng
Adobe Flash Lite hoặc Flash CS3 Pro, với phiên bản dùng thử 30 ngày
tai đây.
Bắt đầu từ đâu
- Sau khi cài đặt thành công Flash CS3 Pro, các bạn nên tham khảo các
mẫu có sẵn trong chương trình.
Nhúng file Flash vào trang HTML sau khi tạo thành công 1 file Flash
(hoặc có thể sử dụng những file có sẵn trong Template), bạn lưu lại dưới
định dạng *. fia, cụ thể chọn File > Save As, và đặt tên bất kỳ, ví dụ:
Somefỉlename.ỉỉa
- Sau đó, mở file Flash vừa tạo ra, chọn File > Export Movie, lưu dưới
định dạng somefilename.swf, và lưu vào thư mục chứa trang web.
- Mở trang web vừa được tạo ra và chèn đoạn mã sau vào:
<object width= "550" height= "400">
<param name= "movie" value= "somefilename.swf'>
<embed src= "somefilename.swf' width= "550" height= "400">
</embed>
</object>
- Đây là đoạn mã tối thiểu để nhúng file Flash bất kỳ vào trình duyệt, biểu
tượng vỡ làm 2 phần sẽ xuất hiện trên trang web nếu trình duyệt chưa
được cài đặt plug-in dành cho Flash
- Trên đoạn mã trên có 2 thẻ cần chú ý là <embed> và <object>, bởi vì
thẻ <object> sẽ được nhận ra bởi Internet Explorer, còn Netscape chỉ có
thể nhận biết thẻ <embed> và hoàn toàn không nhìn thấy thẻ <object>
- Nhập địa chỉ vào đường dẫn của trình duyệt dưới dạng:
http://localhost:8080/ somefilename.swf (ví dụ)
Tìm hiểu thêm về chương trình Flash: đoạn mã trên là những gì tối
thiểu nhất về Flash khi muốn nhúng vào trang HTML, nhưng do yêu cầu
thực tế thì chúng ta hầu như không chỉ đơn thuần sử dụng đoạn mã trên,
các bạn cần chú ý thêm những đặc tính sau:

- classỉd là 1 thuộc tính quan trọng của thẻ <object>, chức năng chính là
báo cho Internet Explorer kích hoạt plug-in ActiveX nếu chưa được cài
đặt đầy đủ
- plugỉnspage là thuộc tính của thẻ <embed>, nó sẽ hiển thị đầy đủ
đường dẫn đến trang hỗ trợ Shockwave nếu trình duyệt Netscape chưa
được cài đặt
Chương trinh Flash đầy đủ hỗ trợ và tích hợp các thuộc tính này giúp
bạn:
- Chọn File > Publish, Flash sẽ tự động sinh mã bao gồm các thẻ
<object>, <param>, và <embed>, đồng thời gán thêm các thuộc tính
như classỉd và plugỉnspage
- Mở mã trang HTML mà Flash vừa tạo ra, xem và chèn đoạn mã trên
vào nơi bạn muốn đặt file Flash.
- Nhớ đặt tên file tương ứng trong thư mục chứa trang web
- Mở trình duyệt, gõ địa chỉ tương tự như bước trên và thưởng thức thành
quả của bạn
Tìm hiểu về Flash Tweening: thuật ngữ Tweening ra đời tò "in
between", với Tweening bạn có thể di chuyển giữa các keyframe khác
nhau, tạo hoặc chèn thêm/bớt các hiệu ứng, và sau đó để chương trình
Flash tạo lại các frame trong khoảng thay đổi đó.
Các bước thực hiện:
- Tạo 1 vòng tròn nhỏ ở bên trái khu vực stage, bằng cách lựa chọn bút
vẽ vòng tròn tại cửa sổ công cụ bên tay trái, sau đó vẽ vòng tròn với kích
thước tùy ý.
- Chọn tiếp Arrow, kích đúp vào vòng tròn để lựa chọn đối tượng
- Tiếp theo, chúng ta phải chuyển đổi đối tượng vòng tròn thành symbol,
chúng ta sẽ làm được nhiều hơn với 1 đối tượng symbol. Từ menu chính,
chọn Modify > Convert to Symbol, đặt tên cho symbol là Ball. Bấm
ok
- Di chuyển tới Frame 10 trong dòng Timeline bằng cách chọn dòng có

màu xám dưới Frame 10, kích chuột phải chọn Insert Keyframe, hành
động này sẽ nhân bản file ảnh. Keyframe sẽ định, nghĩa các hành động,
các thay đổi trong từng khung hình. Người sử dụng sẽ tạo ra những
keyframe quan trọng trong Timeline và chương trình Flash sẽ tạo những
frame còn lại bên trong đó.
- Bước tiếp theo, lựa chọn vòng tròn và di chuyển đối tượng về bên phải 1
khoảng cách tùy ý
- Chọn vị trí bất kỳ giữa Frame 1 và Frame 10, kích chuột phải và
Create Motion Tween
- Sau đó, kiểm tra kết quả bằng cách Control > Test Movie
Hướng dẫn về Flash Tweening: sau đây là 1 số thao tác cơ bản để di
chuyển 1 đối tượng từ vị tri này sang yị trí khác theo đường dẫn cố định
- Chọn Window > Common Libraries > Graphics, lựa chọn hình ảnh
bạn muốn sử dụng, trong ví dụ này dùng ảnh chú chuột màu xanh
- Kích vào bức ảnh và kéo, thả nó vào bên ngoài viền của vùng khung
hình Stage
- Di chuyển tới Frame 40 trong phần Timeline, làm tiếp tương tự như ví
dụ trên, kích vào dòng màu xám dưới Frame 40, nhấn chuột phải và chọn
Insert Keyframe
- Tiếp theo chọn vị trí bất kỳ giữa Frame 1 và Frame 40, kích chuột phải
và chọn Create Motion Tween
- Kích chuột phải lên Layer 1 (chọn đúng vùng Layer, sẽ chỉ định rõ ràng
các Layer tương ứng), chọn Add Motion Guide tại menu popup, chương
trình Flash sẽ tự động chèn thêm 1 lớp motion guide vào đầu Layer l,
lớp này có tác dụng vẽ lên các đường, các quỹ đạo di chuyển mà các
symbol sẽ bám vào đó.
- Kích chuột vào lớp Motion Guide Layer để đảm bảo rằng đó là lớp
đang được kích hoạt, sau đó sử dụng công cụ Pencil, thiết lập chế độ
Pencil Mode ở giá trị Smooth
- Vẽ 1 đường tùy ý, bắt đầu ở vị trí bức ảnh và kết thúc ở phía bên kia

Stage
- Trở lại Frame 1 tại đường Timeline, chọn công cụ Arrow, và thiết lập
giá trị Snap to Objects trong bảng giá trị.
- Đặt bức ảnh vào vị trí trung tâm của đường motion guide (chính là
đường kẻ được vẽ bằng công cụ Pencil bên trên), trung tâm bức ảnh bây
giờ được đánh dấu +, 1 vòng tròn nhỏ màu đen sẽ xuất hiện khi bức ảnh
được nhập vào motion guide. Nhả chuột ra khi bức ảnh được kéo đến hết
đường kẻ.
- Quay trở lại Frame 40, làm tương tự như trên, đặt và kéo bức ảnh vào
vị trí giữa cho tới cuối motion.
- Kiểm tra kết quả bằng Control > Test Movie
- Neu tốc độ di chuyển của đối tượng quá nhanh, bạn có thể điều chỉnh
được việc này bang menu Modify > Movie, hộp thuộc tính xuất hiện,
trường giá tri Frame Rate hiển thị bao nhiêu khung hình sẽ hoạt động
trong 1 giây, giá trị càng lớn thì tốc độ hoạt động của các symbol càng
nhanh và ngược lại
Tìm hiểu về Flash Tint Tweening: với tính năng Tint Tweening, bạn có
thể thay đổi màu sắc hiển thị của bất kỳ đối tượng nào
- Chọn menu Insert > New Symbol, để áp dụng hiệu ứng Tint thì tất cả
các đối tượng phải được chuyển đổi về dạng symbol
- Đặt tên cho symbol vừa tạo là changecolor, chọn Graphic trong mục
Behavior, và OK. Bạn sẽ được chuyển đến phần tạo symbol trong
chương trình Flash
- Chọn tiếp công tụ Text, thiết lập giá trị Text > Size > 36 và Bold để tạo
chữ cỡ to và đậm
- Gõ dòng chữ với nội dung bất kỳ vào khung hình, ở ví dụ này là Color
Changing Text
- Quay trở lại bước chọn movỉe bằng cách Edit > Edit Movie
- Chèn symbol bạn vừa tạo xong vào movỉe, chọn Window > Library,
lựa chọn symbol changecolor và kéo thả đối tượng và giữa khung hình

- Chèn tiếp keyframe vào Frame 15 và 30
- Tiếp theo, chọn Frame 15, kích chuột phải và chọn Panels > Effect
- Tiếp đến, lựa chọn Tint, bảng màu cụ thể sẽ xuất hiện, thiết lập giá trị
như sau R=0, G=255, B=0
- Nhấn chuột vào dòng Tỉmeỉỉne bất kỳ chỗ nào giữa Frame 1 và Frame
15, kích chuột phải và chọn Create Motion Tween
- Làm tương tự như trên với Frame 15 và 30
- Kiểm tra kết quả bằng cách Control > Test Movie
Các bàỉ hướng dẫn Ctf bản về Flash (Phần 2)
Hướng dẫn ve Flash Shape Tweening: tírứi năng này giúp bạn chuyển
đổi qua lại giữa các đối tượng khác nhau
- Chọn công cụ viết chữ Text, thiết lập giá trị Text > Size > 48 và Bold
để tạo chữ cỡ to và đậm
- Gõ chữ bất kỳ vào khung hình, ở ví dụ này là Hello
- Kích chuột phải vào dòng chữ vừa tạo, chọn Panels > Align
- Trong hộp Align, bấm nút To stage trước tiên, tiếp theo chọn Align
Horizontal Center và Align Vertical Center, sau đó đóng hộp Align lại
- Tiếp đến, sử dụng công cụ Arrow Tool, chọn dòng chữ, Modify >
Break Apart từ cửa sổ menu popup
- Chèn tiếp các keyframe vào vị trí Frame 24,50 và 51
- Tiếp đến, xóa dòng chữ Hello tại vị trí Frame 24, và viết tiếp chữ khác
vào vị trí đó, ở đây là World, cỡ chữ 48, kiểu chữ bold
- Lặp lại các thao tác như trên, kích chuột phải vào dòng chữ, chọn
Panels > Align, tiếp theo lựa chọn các giá trị ừong ô Align, To stage
trước tiên, lần lượt theo sau là Align Horizontal Center và Align
Vertical Center. Sau khi thiết lập các giá trị xong, đóng ô Align lại
- Chọn tiếp công cụ Arrow Tool, Modify > Break Apart từ menu
popup
- Chèn thêm 1 keyframe vào Frame 26
- Kích đúp vào keyframe tại vị trí Frame 1, sẽ xuất hiện 1 cửa sổ popup

nhỏ, chọn thẻ Frame, thiết lập thông so Tweening thành Shape. Sau đó
đóng cửa sổ lại
- Làm tương tự như vậy với Frame 51, tại cửa sổ popup chọn thẻ Frame
Actions, kích vào dấu +, chọn tiếp Basic Actions > Go To, và đóng cửa
sổ lại
- Kiểm tra kết quả bằng cách Control > Test Movie
Hướng dẫn tạo nút bấm đơn giản: ví dụ sau sẽ hướng dẫn bạn chèn
ảnh, chuyển đổi thành đối tượng nút bấm, chèn thêm đường dẫn URL để
tạo link
- Đầu tiên, File > Import để nhập 1 bức ảnh bất kỳ, sau đó chuyển thành
nút. Sau khi Open 1 bức ảnh bất kỳ, file ảnh đó sẽ được lưu vào thư viện
- Tiếp theo, lựa chọn ảnh bằng công cụ Arrow. Sau đó chuyển đối tượng
image thành symbol, tiếp theo Insert > Convert to Symbol, đặt tên cho
symbol vừa tạo là button, chọn giá trị Button từ danh sách Behavior và
OK
- Kích chuột phải vào ảnh, chọn Actions, hộp thoại Object Actions hiện
ra, kích vào biểu tượng dấu +, và Basic Actions > Get URL. Nhập giá trị
đường dẫn đầy đủ của 1 trang web bất kỳ nào đó, ở ví dụ này là
http:/Avww. w3 schools, com/
- Chọn tiếp giá trị target tại trường Window, đóng cửa sổ Object
Actions lại
- Kiểm tra kết quả bằng cách Control > Test Movie
Hướng dẫn tạo nút bấm đom giản 2: ví dụ sau sẽ giúp bạn tạo đối tượng
nút bấm theo cách riêng, tạo hiệu ứng mouse-over và chèn link
Bắt đầu, chọn Insert > New Symbol, đặt tên cho symbol vừa tạo là
button. Thực hiện các thao tác như ví dụ trên, chọn giá trị Button từ
danh sách Behavior, OK. Tại dòng Timeline, bạn sẽ thấy 4 giá trị mặc
định sẵn có: up, over, down, hit
- Lựa chọn công cụ Rectangle, sử dụng Fill Color với màu đỏ nhẹ, vẽ 1
hình chữ nhật nho nhỏ trong khung hình. Tiếp đến, sử dụng công cụ Text,

điền Click Me đè lên hình chữ nhật đó, đổ màu cho dòng chữ bằng màu
đậm
- Lựa chọn Arrow, di chuyển dòng chữ vào giữa hình chữ nhật.
- Thêm keyframe vào Over State trong dòng Timeline. Thuộc tính Over
State sẽ chỉ định, khai báo những hành động xảy ra khi bạn di chuyển
chuột qua nút bấm
- Lựa chọn đối tượng hình chữ nhật và đổ 1 màu khác, ví dụ xanh nhạt
- Chọn tiếp Edit > Edit Movie để quay lại bước chọn movỉe
- Chọn Window > Library để xác định vị trí nút bấm, kéo thả nút bấm
vào khung hình
- Kích chuột phải vào khung ảnh, chọn Action từ menu popup
- Trong hộp Object Actions chọn biểu tượng có dấu +, tiếp theo Basic
Actions > Get URL
- Nhập đường dẫn URL đầy đủ và cụ thể, ở ví dụ này là
http://www. w3 schools, com/
- Chọn thuộc tính target tại trường Window, đóng cửa sổ Object
Actions
- Kiểm tra kết quả bằng cách Control > Test Movie
Hướng dẫn về Flash Animation:
Tạo 1 file Flash mới, viết 1 dòng chữ với nội dung bất kỳ với công cụ
Text
- Lựa chọn tiếp công cụ arrow, kích lên dòng chữ vừa tạo để lựa chọn,
sau đó chuyển đổi đối tượng từ text thành symbol bang menu Insert >
Convert to Symbol, đặt tên cho symbol là text, tiếp tục chọn thuộc tính
đồ họa graphic từ danh sách Behavior, cuối cùng OK
- Di chuyển tới vị trí Frame 30 tại Timeline, kích chuột phải vào trường
này và chọn Insert Keyframe
- Tiếp theo chọn bất kỳ vị trí Timeline nào trong khoảng Frame 1 và
Frame 30, kích chuột phải và chọn Create Motion Tween
- Quay trở lại Frame 30 của Timeline, và di chuyển dòng chữ xuống

phía dưới góc phải
- Chọn đúng đối tượng dòng chữ text, chọn Modify > Transform > Flip
Horizontal
- Kiểm tra kết quả bằng Control > Test Movie. Dòng chữ text sẽ di
chuyển từ vị trí đầu tiên (được định nghĩa tại frame 1) tới vị trí thứ 2
(frame 2) hoặc ngược lại nếu bạn chuyển 2 frame đó cho nhau
Hướng dẫn chèn âm thanh trong Flash
Sau khi tạo 1 văn bản Flash mới, chọn File > Import, xác định vị trí file
âm thanh muốn nhúng vào Flash và chọn Open, file âm thanh sẽ được lưu
trong thư viện của file Flash
- Kích vào lớp frame đàu tiên của Layer 1 của phần Timeline, chọn tiếp
Window > Panels > Sound
- Cửa sổ popup hiện ra (Sound), và chọn đúng file âm thanh mà bạn vừa
nhập vào thư viện, chọn tiếp stream trong trường Sync
- Tiếp đến, tìm đến frame 50 trong dòng Timeline, kích chuột phải và
chọn Insert Frame
- Kiểm tra kết quả bằng cách Control > Test Movie
Trên đây là bài hướng dẫn những bước cơ bản nhất để tạo ra 1 file Flash
với những tính năng đơn giản nhất.