You are on page 1of 50

Bài 1

Làm quen với Web chúng ta không ai là không biết đến Flash , nhưng ít người trong
chúng ta quan tâm vì ngại tiếp xúc với giao diện làm việc quá phức tạp của Flash . Flash
là một chuẩn đồ họa hoạt hình trên Web , giúp cho trang Web có tính tương tác và hấp
dẫn hơn đối với người ghé thăm trang Web . Chỉ cần cài đặt Flash Player (hiện nay mới
nhất là version 7.0) thì việc đọc các file *.swf không còn là một vấn đề nan giải , vì lý do
đó mà Flash trở nên thông dụng và khiến cho rất nhiều người chú ý đến . Mặc dù hiện
nay có rất nhiều chương trình thiết kế Flash nhưng đại chúng nhất vẫn là chương trình
Flash của hãng Macromedia , và từ sau phiên bản 4.0 , Macromedia đã tự khẳng định
mình là hãng hàng đầu trong lãnh vực thiết kế Web . Do hiện nay Flash MX được sử
dụng khá phổ biến tại VN nên tôi chỉ xin đề cập đến phiên bản này.

Giao diện của Macromedia Flash MX

[Đầu trang]
Thay đổi màu nền khung làm việc và những điều cần biết về hộp thoại Document
Properties
* Thay đổi màu nền :
Từ thanh Menu bạn chọn Modify/Document... (ấn Ctrl + J hoặc ấn chuột phải chọn
Document Properties) để mở hộp thoại Document Properties . Để xuất hiện bảng màu bạn
nhấp chọn Background Color.
[Đầu trang]
Bạn có thể chọn màu sắc theo bảng màu hoặc nhập mã số , chẳng hạn như trên bảng mã
không có màu nào sáng hơn màu đen mà tối hơn màu #333333 ngay dưới màu đen trong
bảng màu ta buộc phải nhập mã nếu muốn thể hiện một màu phù hợp với yêu cầu (chẳng
hạn phù hợp với yêu cầu trên ta có thể chọn màu #0A0A0A).
* Hộp thoại Document Properties :
Dimensions : Kích cỡ của "Khung làm việc" (width : chiều rộng ; height : chiều cao)
Match : Khổ (Printer : kích cỡ chính xác khi in ; Default : kích cỡ mà bạn để mặc định)
Background color : màu nền
Frame Rate : tốc độ khung hình ( số khung hình trong 1 giây , mặc định thường là 12)
Ruler Units : chuyển qua các đơn vị khác của "thước"
Help : liên kết với trang giúp đỡ trong máy (trang này có sẵn sau khi cài đặt Flash MX)
Make Default : làm cho các thông số trở về mặc định
OK : đồng ý việc chỉnh sửa thông số trong hộp thoại
Cancel : không đồng ý và giữ nguyên thông số trước khi mở hộp thoại
Các công cụ vẽ (thanh công cụ)
* Công cụ Lasso :
Công cụ dùng để vẽ các đường thẳng , các đối tượng ở khung làm việc
Công cụ này có tất cả 3 tính chất :

-Stroke color : màu của đường thẳng mà bạn vẽ (bên trái)


-Stroke height : độ dày (độ đậm) của đường thẳng bạn vẽ (giữa)
-Stroke style : các loại đường thẳng (nét chấm gạch hay nét đứt chẳng hạn)
(bên phải)
Để chỉnh sửa thông số này nếu trong trình làm việc của bạn chưa sẵn có trình
Properties thì buộc bạn phải khởi động nó bằng cách chọn ở thanh Menu :
Window/Properties .
Để tô màu đường nét kiểu gradient , bạn dùng công cụ Arrow (hoặc ấn V)
chọn vùng mà bạn muốn trượt màu sau đó chọn ở thanh Menu :
Modify/Shape/Convert Lines to Fills

Bài 2
Các công cụ vẽ (thanh công cụ) (tiếp theo) * Công cụ Lasso (phím L) :
Dùng để chọn các đối tượng trên khung làm việc, đặc biệt hơn công cụ Arrow
(chọn các đối tượng trên khung làm việc dựa vào hình chữ nhật) ở chỗ có khả
năng xác định vùng có hình dạng bất kỳ của các đối tượng trong khung làm
việc .
Công cụ này có 3 mức làm việc :

-Magic Wand (bên trái) : chọn đối tượng dựa trên màu sắc trong vùng có hình
dạng bất kỳ
-Magic Wand Properties (bên phải) : điều chỉnh thông số cho Magic Wand .
-Polygon (dưới) : chọn các vùng có hình dạng đa giác
* Công cụ Pen (phím P) :
Công cụ vẽ các đường thẳng gấp khúc hoặc các đường cong bằng các chấm các
điểm tại các vị trí khác nhau rồi nối chúng lại dưới dạng các đường thẳng ,
đường cong . Công cụ này tương tự như công cụ Line nhưng tiện hơn công cụ
Line rất nhiều , dựa vào chức năng nối các điểm nếu ta nối điểm đầu vào điểm
cuối (3 điểm trở lên) sẽ tạo thành các hình đa giác .
Công cụ này có 4 tính chất :
-3 tính chất đầu tương tự công cụ Line
-Tính chất Fill color : tô màu cho các hình đa giác mà bạn đã vẽ
* Công cụ Text (phím T) :
Nghe tên chắc chắn ai cũng biết đây là công cụ nhập văn bản . Đây cũng đồng
thời là công cụ có nhiều tính chất nhất .

Chúng ta sẽ xét từng hàng . Bắt đầu từ hàng thứ nhất .


* Static Text : làm việc với văn bản tĩnh , thiết lập cho văn bản mà bạn đang
nhập là tĩnh - Dynamic Text : thiết lập cho văn bản của bạn sẽ làm việc với các
hiệu ứng động
* Font : định dạng font mà bạn dùng để nhập văn bản .
* Font Size : cỡ chữ mà bạn dùng để nhập văn bản .

* Text (fill) Color : chọn màu cho văn bản mà bạn sẽ nhập .
* Toggle the bold (italic) style (chữ B và I) : chọn in đậm chữ văn bản và nằm nghiêng .
* Change direction of text : chọn cho chữ trình bày theo chiều ngang (horizontal) chiều
dọc từ trái sang phải (từ phải sang trái) (vertical to left (right)) .
* Bốn biểu tượng cuối dòng 1 : gióng hàng (tùy theo chiều mà bạn cho chữ trình bày mà
có các loại gióng hàng khác nhau)
Hàng 2 : * Character Spacing : độ xa gần của các ký tự .
* Character Position : chế độ chữ bình thường (normal) , chế độ chữ thu nhỏ lên trên
(SuperScript) , chữ thu nhỏ xuống dưới (SubScript) .
* Auto Kern : tự động đưa các font chữ lại cùng một khoảng cách (cách đều các kí tự) .
* Edit format options : đưa ra bốn thông số cho chữ - Indent (khoảng các thụt vào) - Line
Spacing (khoảng các giữa các hàng) - Left (Right) Margin (rời lề trái hoặ phải một
khoảng) .
Hàng cuối - * W : chiều rộng của nhóm chữ - H : chiều cao nhóm chữ - X ; Y : hoành độ
và tung độ của nhóm chữ trong khung làm việc .
* Selectable :
* URL Link : đưa đường dẫn cho đoạn văn bản mà bạn chọn đến 1 file nào đó .
* Target : kiểu xuất hiện của file khi liên kết thực hiện .
* Công cụ Oval (phím O) : Công cụ dùng để vẽ những hình tròn , hình bầu dục , có 4 tính
năng tương tự công cụ Pen .
* Công cụ Rectangle (phím R) : Công cụ vẽ các hình chữ nhật ngoài 4 tính năng như
Oval , ta còn có thêm tính năng bo tròn các góc (Round Rectangle Radius) ở bảng options
.
* Công cụ Pencil (phím Y) : chức năng tương tự công cụ Pen nhưng độ chi tiết không
như công cụ Pen (các nét xa sẽ thành đường thẳng , các nét gần sẽ tạo thành đường cong ,
tất cả là do chương trình tự tính toán và bạn hoàn toàn vẽ bằng tay) , ngoài ra công cụ này
không có chức năng Fill color như công cụ Pen , mặc dù có nối điểm đầu với điểm cuối
tạo thành một hình .
* Công cụ Brush (phím B) : công cụ quét màu với 4 tính năng :
-Brush mode : kiểu quét (normal : quét màu bình thường ; behind : quét sau các màu khác
trên khung ...)
-Brush size : độ lớn của công cụ quét .
-Brush shape : hình dạng của công cụ quét ( hình que xéo , hình tròn , hình bầu dục ...)
-Lock fill : không cho tô màu lên .
* Công cụ Free Transform (phím Q) : công cụ này giúp chọn các đối tượng trên khung
làm việc , công cụ còn giúp ta chọn một vùng màu chỉ sau một cái click chuột , công cụ
còn giúp ta xoay vùng chọn một góc bất kỳ và có khả năng tăng giảm kích cỡ các chiều
trong vùng chọn , công cụ này mạnh hơn hẳn Arrow .
Công cụ này có 5 tính năng chính , 4 tính năng trong mục options (Rotate and Skew ;
Scale ; Distort ; Enverlope) và được thể hiện qua các thao tác trỏ chuột . Chức năng còn
lại là Fill color trong bảng Properties .
* Công cụ Ink bottle (phím S) : thay đổi màu , kích thước kiểu của một đường nét bao
quanh một hình dạng trong khung làm việc . Công cụ này có 3 tính năng tương tự như
Line .
* Công cụ Paint Bucket (phím K) : tô màu cho các hình dạng tạo ra từ các đường viền (tô
màu cho các hình dạng được tạo ra từ công cụ pencil chẳng hạn) , thay đổi màu đã có
trong khung làm việc . Có hai tính năng Gape Size và Lock Fill trong mục options .
* Công cụ Eyedropper (phím I) : cho phép lấy mẫu , sao chép màu tô , đường nét của đối
tượng đang xét rồi áp dụng cho một đối tượng khác , công cụ này không có tính chất khác
, giúp chúng ta tiết kiệm thời gian .
* Công cụ Eraser (phím E) : như cái tên của nó , công cụ này làm nhiệm vụ xóa màu ,
đường nét của một đối tượng trong khung làm việc . Công cụ gồm có 3 tính năng trong
mục options :
-Eraser mode : tương tự với Brush mode .
-Faucet : xóa nhanh đường nét nối liền , màu tô , một vùng tô màu của đối tượng .
-Eraser shape : tương tự với Brush shape .

Bài 3
Trong nhiều trường hợp , lý thuyết mà không có thực hành thì khó có thể thành công , do
đó mà tôi sẽ hướng dẫn bạn nốt cách sử dụng tốt nhất và các tính năng đặc biệt ở mỗi
công cụ .
Sao chép thuộc tính đường nét và áp dụng cho đường nét khác :
Nhấn phím I chọn công cụ Eyedropper , đặt con trỏ biểu tượng ống nhỏ giọt lên đường
nét mà bạn muốn sao chép ,khi đó sẽ xuất hiện hình cây bút chì nhỏ bên cạnh ống nhỏ
giọt . Nhấp chuột vào đường nét mà bạn muốn sao chép , từ công cụ Eyedropper sẽ kích
hoạt công cụ Ink bottle (tính năng đã giới thiệu trong bài trước). Sau đó bạn chỉ cần nhấp
chuột vào bất kỳ đường nét nào muốn thay đổi thuộc tính như đường viền lấy từ công cụ
Eyedropper thì đường nét đó sẽ có thuộc tính như đường nét gốc .
Tính năng Lock Fill của Brush và Paint Bucket :
Điều khiển cách thức tô màu với các vùng màu kiểu gradient , khi chọn thì sử dụng cùng
một kiểu màu gradient , còn khi không chọn mỗi vùng tô sẽ hiển thị khác biệt các kiểu tô
mà bạn áp dụng gradient .
Tính năng Gap Size của Paint Bucker :
Xử lý đường viền không bao kín vùng tô màu với 4 thông số
chính :
-Don't Close Gaps : Không tô vùng mà đường viền chưa bao
kín .
-Close Small Gaps : Tô vùng có đường viền hở rất nhỏ .
-Close Medium Gaps : Tô vùng có đường viền hở trung bình .
-Close Large Gaps : Tô vùng có đường viền hở lớn .
Làm mềm đường biên :
Chọn một lúc nhiều hình dạng trên khung làm việc (không phải phần tử của một nhóm) ,
sau đó chọn Modify>Shape>Soften Fill Edges .Hộp thoại hiện ra bạn chỉnh sử thông số
theo ý mình .Với :
-Distance :Khoảng cách giữa đường biên mềm và đường biên ngoài tính trên Pixel .
-Number of Step : Số bước từ đường biên đầu đến kết thúc đường biên mềm . Không nên
sử dụng nhiều bởi làm thế sẽ khiến cho máy phải tính toán nhiều hơn trước rất nhiều mỗi
khi thực hiện một cử động flash,nên chọn 10 là tối đa).
-Derection : Chọn hướng để đường biên mềm tạo ra bên ngoài (Expand) hoặc trong
(Insert) hình dạng .
Gióng hàng các đối tượng :
Nhấn Ctrl + K để sử dụng chức năng này .Với các
tham số :
Align left edge : canh trái đều các đối tượng
Align horizontal center : canh giữa theo hàng dọc các
đối tượng
Align right edge : canh phải đều các đối tượng
Align top edge : canh trên đều các đối tượng
Align vertical center : canh giữa theo hàng ngang các
đối tượng
Align bottom edge : canh dưới đều các đối tượng
Distribute top edge : canh trên đều cho các hàng đối tượng
Distribute vertical center : canh giữa theo hàng ngang cho các dòng đối tượng
Distribute bottom edge : canh dưới đều cho các hàng đối tượng
Distribute left edge : canh trái đều cho các hàng đối tượng
Distribute horizontal center : canh giữa theo hàng dọc cho các dòng đối tượng
Distribute right edge : canh phải đều cho các hàng đối tượng
Match width : canh đều trái và phải tất cả đối tượng
Match height : canh đều trên và dưới tất cả đối tượng
Match width and height : kết hợp hai thứ trên
Space evenly vertically : khoảng cách đều giữa các đối tượng theo hàng ngang
Space evenly horizontally : khoảng cách đều giữa các đối tượng theo hàng dọc.
[Đầu trang]
Lật các đối tượng :
Đôi khi làm việc với flash ta cần lật (quay) đối tượng một góc nào đó hoặc lật ngược đối
tượng. Do đó mà sử dụng các tính năng Flip là rất cần thiết .Tất cả được gộp chung khi
bạn chọn đối tượng rồi đưa tới Modify>Transform> ? và ? sẽ là :
-Free Transform : tại đây bạn có thể quay một góc bất kỳ , tăng giảm kích thước , thay
đổi góc độ cho một phần đối tượng
-Distort : thay đổi góc độ cho một phần đối tượng từ một điểm
-Envelope : tương tự như distort nhưng giữa các điểm vuông sẽ thêm vào các điểm tròn ,
các điểm tròn này có nhiệm vụ bo tròn các góc nhọn
-Scale : Chỉ có tác dụng thay đổi kích thước , nếu xài chức năng này thì tốt hơn là xài
Free Transform
-Rotate and Skew : quay đối tượng bằng chuột và dời đối tượng
-Scale and Rotate : thay đổi kích thước đối tượng (%) và góc xoay tự nhập

-Rotate 90' CC : quay đối tượng một góc 90' từ bên trái lên trên
-Rotate 90' CCW : quay đối tượng một góc 90' từ bên phải lên trên
-Flip Vertical : lật ngược đối tượng theo chiều ngang
-Flip Horizontal : lật ngược đối tượng theo chiều dọc
-Remove Transform : bỏ chọn Transform

Bài 4
Làm việc với Flash thì quan trọng bốn khâu quan trọng nhất đó chính là khung hình. Nói
cho dễ hiểu thì ta cứ tưởng tượng trong một đoạn phim sẽ có 24hình/giây thì bằng cách
thiết lập thông số frame (đã học trong bài đầu) thì ta có thể hình dung rằng một frame
(khung hình) sẽ tương đương một hình trong Flash, và nếu bạn đặt thông số 12 fps thì sẽ
có 12 hình hiển thị trong một giây cho bạn. Nói cho cùng thì flash cũng không khác video
cho lắm nhưng bạn phải lưu ý rằng nếu cài đặt số khung hình càng cao trong một giây thì
cái giá phải trả cho dung lượng đoạn flash sẽ lớn lên theo tỉ lệ nghịch (đây là điều tối kị
với thiết kế Web) hoặc khung hình càng thấp thì chuyển động trong flash càng tệ. Bây
giờ chúng ta sẽ bắt đầu bài học.
Hai phương pháp hoạt động chính
- Sử dụng khung nối tiếp : có nghĩa là bạn sẽ đặt từng phần tử khác nhau ở mỗi frame hay
một một đoạn frame , sau đó ráp nối chúng lại như một đoạn phim, cách này dễ thực hiện
nhất và có nhiều điều khiển hơn nhưng đồng thời cái giá phải trả là bạn sẽ mất nhiều thời
gian hơn.
- Sử dụng khung biến đổi : không đòi hỏi thủ công như cách trên, chúng ta sẽ sử dụng
khả năng biến đổi tự động của flash, ta chỉ cần quy định điểm đầu và điểm cuối, flash sẽ
tính toán và biến đổi đối tượng cho ta (giả sử chọn điểm đầu là hình vuông và điểm cuối
là hình tròn trong 24 frames thì trong 2 giây hình vuông sẽ biến đổi qua các hình dạng bo
tròn các cạnh ngày một lớn hơn và cuối cùng là chuyển thành hình tròn).
Chúng ta sẽ bắt đầu với việc tìm hiểu chức năng của các thành phần trên khung. Sau đây
sẽ là những phần mà các bạn cần quan tâm :

Tính từ trái qua thì lần lượt là :


- Nút canh giữa khung hình :canh giữa khung hình mà bạn đang chọn(nếu bạn cuộn đến
vị trí 1500 trong số 2000 khung hình của toàn đoạn flash mà trỏ của bạn đang ở vị trí 300
thì khi nhấp canh giữa sẽ giúp cho bạn trở lại vị trí 300 một cách nhanh chóng).
- Nút Onion Skin :xem và chỉnh sửa nhiều khung hình cùng một lúc , khi đang ở một vị
trí trên thanh tiến trình thì việc chọn nút Onion Skin sẽ giúp bạn gom toàn bộ nội dung
của khung hình vào giữa hai điểm được đánh dấu , lúc này bạn có thể chỉnh sửa nội dung
của đoạn khung hình đang được chọn.
- Nút Onion Skin Outlines :giống với Onion Skin, và điểm khác là toàn bộ nội dung trên
các khung hình khác với khung hình đang được chọn sẽ xuất hiện dưới dạng đường viền.
- Nút Edit Multiple Frames :chỉnh sửa nhiều khung hình và phần thể hiện tương tự Onion
Skin.
- Nút Modify Onion Markers :khi nhấp vào nút này thì một bành sẽ hiện ra :
Bảng này có nhiệm vụ thay đổi các điểm đánh dấu của
Onion Skin với các thông số sau :
+ Always Show Markers :làm cho các điểm đánh dấu
Onion Skin hiển thị hay không hiển thị cho dù bạn có hay
không có chọn tính năng Onion Skin.
+ Anchor Onion :giữ lại hay khóa các điểm được đánh dấu
chọn Onion Skin tại vị trí mà chúng đang hiện diện.
+ Onion 2 :Thiết lập các điểm đánh dấu bằng Onion Skin ở
vị trí hai khung hình nằm trước và sau vị trí thanh thực hiện.
+ Onion 5 :giống như Onion 2 nhưng thay vào 2 là 5 khung hình trước và sau.
+ Onion All :thực hiện chức năng Onion skin với tất cả các khung hình trong cảnh hiện
tại.
- Khung hình hiện tại :xác định bởi số chỉ và nội dung hiện tại khung hình làm việc, nơi
xác định vị trí thanh thực hiện.
- Tốc độ khung hình :thông số tốc độ hiện tại, khi đoạn phim đang cập nhật , tốc độ này
sẽ thay đổi liên tục(tốc độ này có thể khác với thông số Frame Rate mà bạn chọn trong
hộp Document Properties(bài 1)bởi nó cho biết tốc độ thực sự khi bạn phát lại).
- Thời gian trôi qua :xác định thời gian giữa khung hình đầu tiên và khung hình ở vị trí
thanh tiến trình(giả sử thanh tiến trình ở vị trí 12 thì có thể là 1 giây),nó cũng được cập
nhật liên tục khi chạy thử.
Các dạng của khung hình
- Khung hình rỗng : nơi để bạn đặt các khung hình thật trên một lớp vào.Cách đặt
là bạn chọn một vị trí trên khung hình rỗng nhấn chuột phải và chọn Insert Frame.
- Khung hình khóa :
trên cùng là khung hình khóa trống , tiếp đến là khung hình
khóa có kèm theo hành động và dưới cùng là một khung hình
khóa bình thường.Vậy khung hình khóa là một khung hình
đặc biệt ,là nơi để bạn thay đổi hành động trong Flash.Bất kì
bạn muốn chuyển động trong flash trải qua bạn buộc phải dùng kiểu khung hình
khóa.Nếu sử dụng kiểu khung nối tiếp bạn sẽ tiêu tốn một lượng lớn khung hình khóa
nhưng với dạng khung biến đổi chỉ yêu cầu hai khung hình khóa ,một bắt đầu và một kết
thúc(việc tính toán sự biến đổi là do flash ,bạnsẽ không cần chèn thêm các khung hình
khóa).
- Khung hình bình thường :là các khung hình tĩnh hiển thị một nội dung bất kỳ trong
khung hình khóa sau cùng ở cùng một lớp ,các khung này luôn đòi hỏi phải có một khung
hình khóa đứng trước và nội dung của khung hình khóa đứng trước sẽ hiển thị tại các
khung hình bình thường sau nó cho đến lúc lại gặp khung hình khóa khác ,ví dụ là phần
màu nâu trên khung hình khóa bình thường ở phần khung hình khóa.
- Khung hình dạng biến đổi :là khung hình tối thiểu phải có hai khung hình khóa, một xác
định sự xuất hiện của đối tượng và một xác định thời điểm kết thúc các
khung hình nằm giữa sẽ là những hình ảnh biến đổi trung gian giữa khung hình đầu và
cuối.Có hai dạng biến đổi :
+ BIến đổi chuyển động :tạo ra sự thay đổi kích thước ,vị trí...các biểu tượng ,khối ,văn
bản trong flash mà bạn đang làm việc.Được xác định ít nhất bởi hai khung hình khóa
cách nhau bởi các khung hình bình thường với mũi tên màu đen và nền màu xanh dương
sáng.
+ Biến đổi hình dạng :biến từ một hình dạng đơn giản ra một hình dạng khác(ví dụ hình
vuông màu đỏ ra hình tròn màu xanh,chữ G mà xanh thành chữ K màu đỏ).Biến đổi hình
dạng chỉ áp dụng cho khung làm việc chứ không áp dụng cho nhóm hoặc biểu
tượng.Được xác định ít nhất bởi hai khung hình khóa cách nhau bởi các khung hình bình
thường với mũi tên màu đen và nền màu xanh lá cây sáng.
+ Dạng cuối cùng là biến đổi có vấn đề :cũng được xác định bởi hai khung hình khóa và
có chèn khung hình bình thường ở giữa ,có các nét đứt đoạn ở giữa các khung hình.

Bài 5
Ở bài trước chúng ta đã được cung cấp toàn bộ khái niệm về hai loại khung hình của
Flash (nếu chưa xem yêu cầu bạn quay lại bài 4 để có kiến thức cơ bản) và bây giờ chúng
ta sẽ đi thẳng vào vấn đề là làm cách nào để tạo chúng. Đầu tiên ta sẽ bắt đầu từ loại
khung hình đầu tiên :

Khung hình nối tiếp


Để dễ hiểu chúng ta sẽ lấy một ví dụ điển hình của loại khung hình này làm bài học.
Chúng ta sẽ làm cho dòng chữ "TIN HOC NHU COM BINH DAN" xuất hiện từng chữ,
từng chữ một. Đầu tiên việc mà bạn phải làm là tạo một tài liệu mới và chắc chắn rằng
chưa có một khung hình nào cả ngoài một khung hình khóa trống trên một lớp duy nhất.
Ở đây trong hộp thoại "Document properties" tôi để số frame xuất hiện trong một giây là
12 fps và tôi dự định trong một giây sẽ có 3 chữ xuất hiện, thực hiện một bài toán chia
nho nhỏ bạn sẽ có một chữ tương đương với 4 frames. Như vậy dòng chữ của tôi có cả
thảy 19 chữ vậy tôi phải sử dụng 76 frame. Vậy công việc của bạn bây giờ là đặt trỏ
chuột ở vị trí ở chỗ khung hình tương đương với vị trí số 4 của thanh thực hiện, tại chỗ đó
tôi click chuột phải chọn "Insert Frame"(bước 1) và tiếp đến ở vị trí tương đương với số 5
của thanh thực hiện tôi lại nhấn chuột phải và lần này tôi chọn "Insert KeyFrame"(bước
2), cứ như thế bạn thực hiện cho đến frame76 và dừng lại ở bước 1. Xin lưu ý là đến bây
giờ bạn vẫn chưa nhập nội dung gì cả. Nếu bạn chưa hiểu rõ
tôi xin giải thích thêm, việc bạn chèn frame(bước 1) là để
nhập nội dung lên frame, còn bạn chèn khung hình khóa là để
ngăn cách hai đoạn frame,một đoạn chứa nội dung chữ "T"
và một đoạn nội dung chữ "TI", ráp nối các đoạn lại với nhau
chúng ta sẽ có đoạn chữ xuất hiện liên tục.
Quay trở lại bài học sau khi đã chèn xong 76 frame thì ta để
chuột tại một frame bất kỳ sau đó nhấn chuột phải chọn
"Select All Frames". Bạn sẽ thấy lúc này toàn bộ frame sẽ
được tô đen và tiếp theo bạn chọn công cụ Text(bài 2) và
đánh dòng chữ "TIN HOC NHU COM BINH DAN" vào
khung làm việc. Tiếp đến bạn lại trở lại bảng frame và chọn
toàn đoạn frame kế cuối (chọn khung hình khóa kế cuối và
giữ shift sau đó nhấn vào frame kế bên tay trái khung hình
khóa cuối cùng) và sau khi chọn bạn trở lại khung làm việc
chọn dòng chữ khi nãy bỏ đi chữ "N" cuối cùng. Cứ tiếp tục
như thế đến khi gặp lại đoạn frame đầu tiên và đoạn này chỉ
còn chứa chữ "T".
Kết thúc quá trình tạo xong bạn có thể xem qua trước khi
xuất ra dưới dạng *.swf bằng cách chọn trên thanh menu
Control>Play.
Nếu cảm thấy đã hài lòng thì bạn có thể xuất thẳng ra bằng cách chọn File>Export Movie
hoặc nhấn tổ hợp phím Ctrl+Alt+Shift+S. Bây giờ chúng ta đã có thể tạo một file flash tự
chạy đơn giản dựa vào khung. Nhưng phía trên tôi chỉ mới đưa ra cách để bạn tạo còn
việc chọn các tham số như "Insert Frame" chẳng hạn thì lại chưa đề cập tới. Vậy để có
một khái niệm rõ ràng hơn về menu bổ trợ của khung(hình trên) này ta hãy cùng xem chi
tiết từng tham số của chúng.
+Create Motion Tween : khi đánh dấu một đoạn frame và kích hoạt chức năng này thì các
frame sẽ tự biến đổi khung hình hiện tại (khung hình nối tiếp) thành khung hình biến đổi
ở dạng biến đổi có vấn đề mà chúng ta đề cập cuối bài 4. Từ dạng khung
hình này chúng ta sẽ chuyển qua một trong hai dạng khung hình biến đổi. Xin lưu ý là khi
chuyển sẽ chỉ mới có khung hình khóa bắt đầu sự kiện mà chưa có khung hình khóa kết
thúc sự kiện (hình). Để có một khung hình biến đổi bạn phải chèn thêm một khung hình
khóa ở cuối.
+Insert Frame : như bạn đã biết, đây là chức năng chèn frame, nếu bạn chèn ở một khung
hình rỗng thì khoảng cách từ khung hình trống(hoặc khung hình bình thường) đến khung
hình rỗng là một đoạn khung hình rỗng sẽ được thay thế bằng khung hình trống. Nếu bạn
chèn ngay trong khung hình trống (hoặc khbt) thì một khung hình mới sẽ xuất hiện ngay
bên tay phải vị trí khung hình bạn đang trỏ chuột.
+Remove Frames : đánh dấu một hay một đoạn khung hình và kích hoạt chức năng này
thì (các) khung hình chọn sẽ bị xóa đi.
+Insert Keyframe : chèn một khung hình khóa và tương tự như "Insert Frame".
+Insert Blank Keyframe : chức năng tương tự "Insert Keyframe" nhưng thay vào một
khóa có kèm theo hành động hoặc không (khung hình khóa trống) là một khung hình
khóa trống.
+Clear Keyframe : khi đánh dấu một đoạn khung hình mà trong đó có khung hình khóa
thì tất cả khung hình khóa trong đoạn sẽ bị thay thế bằng khung hình bình thường (trừ
khung hình đầu tiên của một lớp).
+Convert to Keyframes : khi đánh dấu một hay nhiều khung hình bình thường và chọn
chức năng này thì (các) khung hình bình thường sẽ biến thành (các) khung hình khóa
trống (nếu không có nội dung) hoặc khung hình khóa có kèm theo hành động.
+Convert to Blank Keyframe : tương tự như "Convert to Keyframes" nhưng thay vào đó
chỉ có khung hình khóa trống mặc cho có nội dung hay không (giống "Insert Blank
Keyframe").
+Cut Frames : cắt một hoặc một đoạn khung hình để dán vào chỗ khác.
+Copy Frames : chép một hoặc một đoạn khung hình để dán vào chỗ khác.
+Paste Frames : dán một hoặc một đoạn khung hình vào một chỗ khi đã chép hoặc cắt
(chỉ có tác dụng khi dùng một trong hai tính năng cắt hoặc chép).
+Clear Frames : xóa một hoặc một đoạn khung hình mà bạn chọn (xóa ở đây không phải
là làm mất mà biến các khung hình chứa nội dung thành khung hình trống có khung hình
khóa trống đứng đầu).
+Select All Frames : chọn toàn bộ frame trên một lớp.
+Reverse Frames : lật hoặc đảo vị trí các khung hình đang chọn. Kết quả phát với thứ tự
ngược lại.
+Synchronize Symbol : đồng bộ khung hình bắt đầu của nhiều phiên bản của cùng biểu
tượng đồ họa ngang qua nhiều khung hình khóa trên cùng một lớp.
+Properties : hiện hộp thoại điều khiển các tính năng của khung hình.

+<Frame Label> : nhãn của toàn bộ khung hình trong một lớp, chức năng này không ảnh
hưởng gì đến khung hình cả, nhưng nó thật có ích nếu bạn muốn ghi chú gì đó về chức
năng của toàn đoạn khung hình trên một lớp chẳng hạn.
+Tween : các dạng của khung hình biến đổi, chỉ có tác dụng với các khung hình dạng
biến đổi có vấn đề (khi để ở chế độ motion), về việc này chúng ta sẽ nghiên cứu kĩ hơn ở
bài sau.
+Sound : chèn âm thanh vào khung hình, trước tiên bạn phải chọn File>Import (hoặc
Ctrl+R) để đưa file nhạc của bạn vào, sau đó chọn một đoạn khung hình và chèn đoạn
nhạc của bạn vào. Đoạn nhạc sẽ phát khi đoạn khung hình đó hiển thị.
+Effect : hiệu ứng âm thanh, chức băng bày chỉ được bật một khi bạn đã chèn nhạc vào
một đoạn frame. Bạn muốn âm biến đổi như thế nào thì chọn ở đây.
+Sync : bật nhạc khi bắt đầu hay kết thúc hoặc lúc xảy ra sự kiện.
+Loop : số lần lập lại của đoạn nhạc mà bạn chèn.
+Edit... : bật bảng biên soạn lại âm thanh nếu bạn cảm thấy các kiểu âm thanh ở Effect là
chưa đủ và không thích hợp. Khi chọn hộp thoại sau sẽ xuất hiện:

Bây giờ bạn chỉ cần kéo thả chuột sao cho âm thanh vừa ý và nhấn OK (hình) (phần này
đơn giản và tùy theo sở thích của bạn nên tôi nhường cho các bạn tìm hiểu).
Ngoài ra bạn cũng cần để ý đến lời khuyên sau đây nếu bạn làm flash cho web :
+Nên chèn (import) đoạn nhạc có tần số thấp để giảm thiểu tối đa việc làm phát phì file.
+Không nên chèn các đoạn nhạc quá dài, và nên dùng loop cho các đoạn nhạc ngắn, dung
lượng file nhạc đừng nên quá 100Kb ( --> như vậy là quá cao
và chỉ nên làm với file lớn như vậy khi lưu vào CD hay bật trên HDD).
+Khi xuất nên để ở Mono và tầng số thấp.

Bài 6

Ở bài trước tôi đã đề cập đến việc tạo khung hình nố tiếp, một trong hai dạng chính của
khung hình. Quả thật, nếu làm một flash mà chỉ đầu tư "cơ bắp" vậy cũng đã đủ khoảng
60-70%, nhưng giả sử đoạn flash ấy kéo dài 1 phút hay hơn vậy thì làm một bài tính đơn
giản cho số đoạn frames mà bạn thiết lập thì đúng là một "big problem", hiểu được vấn
đề đó, hãng macromedia đã sáng tạo ra một loại khung hình thứ 2, đó là khung hình biến
đổi (xem chi tiết phần cơ bản ở bài 4).Nay tôi xin hướng dẫn bạn cách tạo khung hình
biến đổi dạng đầu tiên:
Khung hình biến đổi chuyển động

Để cho bài học có một cái gì đó cho bạn thực hành và dễ hiểu, tôi sẽ làm một ví dụ nho
nhỏ sau, bạn sẽ làm cho chú gà con "Echip" bay từ một điểm này đến điểm khác sau một
đoạn khung hình. Và đầu tiên bạn cần chuẩn bị cho tôi một tấm hình "gà con" hay đại
loại gì đó cũng được (nói thế không phải không làm việc với text được).

Tôi sẽ tạo một tài liệu mới 800x600 pixels và cho chú gà bay từ góc trái sang góc phải,
thời gian bay là 5s, nếu bạn đặt số frame trong 1 giây là 12 vậy tương đương với 60
frames.Vậy tại frame thứ 60, bạn tạo ra một khung hình khóa.

Đặt trỏ chuột tại khung hình đầu tiên (hình) và chọn trên thanh menu :
File>Import (hoặc nhấn Ctrl+R) để chèn hình ban đầu vào. Hộp thoại
Import hiện ra, bạn chọn hình mà mình đã chuẩn bị sẵn.

Khi này, bạn sẽ thấy xuất hiện hình mà mình muốn chèn nằm giữa khung làm việc, bạn
nhấn V chọn công cụ Arrow để dời hình về góc trái khung làm việc. Đồng thời bạn sẽ
thấy toàn bộ phần khung từ frame 1-59 bị tô xám.

Lúc này bạn chọn frame đầu tiên và


nhấn giữ nút shift, giữ cho đến khi
bạn chọn frame thứ 59 thì hẵng
buông ra để đánh dấu chọn khung
hình 1 đến khung hình 59, sau đó
nhấn chuột phải chọn Remove
Tween, làm điều này chúng ta sẽ biến
cả đoạn khung hình ở giữa thành
khung hình biến đổi có vấn đề, buộc phải làm vậy để có thể chuyển sang một trong hai
dạng khung hình biến đổi (nói cách khác khung hình biến đổi có vấn đề là khung hình bị
thiếu mất khung hình khóa đầu hay khung hình khóa cuối, và là bước trung gian từ khung
hình bình thường thành khung hình dạng biến đổi.

Tiếp đến ta click chọn hình chú gà con (hình trên) và nhấn tổ hợp phím Ctrl+C để copy
hình chú gà. Và bạn thử đoán xem ta sẽ paste ở đâu? Hẳn là ở frame thứ 60 rồi. Tôi sẽ nói
chi tiết hơn một tí, bạn chọn frame 60 sau đó dùng công cụ Arrow click vào khung làm
việc một cái sau đó nhấn Ctrl+V, và bạn sẽ kéo hình chú gà này về phía tuốt tận cùng
phíc bên phải. Xong xuôi bạn sẽ có khung hình như sau:

Vậy là đầy đủ điều kiện cho một


khung hình dạng biến đổi (có khung
hình khóa ở đầu và khung hình khóa
kết thúc), đến lúc này trướ khi xuất
ra xem bạn có thể kiểm tra trước
tương tự như khung hình nối tiếp.
Đoạn khung hình ở giữa có hình mũi
tên sẽ do flash tính toán đường bay
cho chú chim từ góc phải sang góc trái. Đơn giản quá phải không? Nhưng tiếc thay một
số thao tác mà tôi vừa hướng dẫn các bạn có pha một chút không chính quy, bạn có nhận
ra là gì không? Đó là khung hình đết thúc, nó chưa là khung hình biến đổi (nếu là thì nó
đâu có màu xám).

Vậy tôi sẽ hướng dẫn cho bạn cách chính quy và theo bạn cách nào nhanh hơn là còn tùy.
Cũng như trên nhưng ta dừng lại ở chỗ vừa tạo xong khung hình biến đổi có vấn đề. Lúc
này bạn chỉ cần chọn khung hình thứ 59 và nhấn chuột phải chọn Insert Keyframe, sau đó
để trỏ chuột ở khung hình thứ 59 (lúc này đã biến thành khung hình khóa), và kéo hình
chú gà trong khung làm việc về góc phải:

Vậy là xong, nhưng bạn thấy đấy, mọi việc kết thúc ở khung hình 59, và khung hình 60
lại bị biến thành khung hình khóa trống, vậy một điều rút ra được là khi áp dụng cách
chính quy thì bạn phải tạo dư ra một khung hình lúc đầu và sau đó phải xóa cái khung
hình dư đó đi. Thế đấy, cái nào cũng có một chút phiền phức nhất định cả. Nhưng với
cách làm đầu tiên tôi cũng muốn nói với các bạn một điều, hãy tận dụng triệt để khả năng
cắt dán trong flash, nó cũng tương tự như các chương trình Office và sẽ tiết kiệm cho bạn
một khối thời gian lớn khi làm việc.

Bạn thấy đấy, mặc dù chỉ với một số bước ngắn gọn mà ta đã có thể tiết kiệm biết bao
nhiêu sức lao động trong khi cứ phải tạo mỗi đoạn frame rồi đặt một hình vào cho ví dụ
khung hình nối tiếp, và với ví dụ trên nếu bạn tạo thêm nhiều khóa ở giữa nữa, chẳng hạn
12 frame thì cứ đặt một khóa và tại mỗi khóa bạn dịch chuyển chú gà con một tí thì hẳn
chú sẽ bay lượn đẹp lắm ta. Nếu mà làm với khung hình nối tiếp thì quả thực trời hỡi cực
ơi là cực và còn không chính xác nữa chứ, và tôi xin đưa ra ngay ví dụ :
Bạn thấy giữa hai hình có sự khác biệt chứ, một chú thì bay thẳng một đường làm cho
đoạn flash mất tự nhiên làm sao, còn một chú thì bay lượn một chút xíu trong có vẻ tự
nhiên hơn.

Thực ra tôi chỉ có thay đổi chút xíu như đã nói ở trên thôi, nếu vẫn chưa hiểu thì bạn nhìn
hình dưới đây sẽ tưởng tượng ra ngay thôi, và nhớ là có 5 đoạn khung hình bến đổi đấy
nhé:

Hình mỗi Chíp ở đây chính là một vị trí của khung


hình khóa, với cách làm như vậy góc độ khi bay
sẽ bị lệch đi một chút và đánh lừa người xem
khiến họ nghĩ rằng thực ra những chú chim kia bay lượn lờ. Từ ví dụ này tôi khuyên các
bạn đừng để vị trí các chú Chip lệch nhau quá, mà chỉ nên hơi lệch thôi, và khoảng cách
giữa hai điểm nên nhỏ thôi nếu không đoạn flash sẽ cho thấy chú Chip bay theo góc cạnh
chứ không lượn lờ nữa, vậy chắc chắn sẽ không thuyết phục được người xem.

Đến đây tôi đã giới thiệu xong khung hình dạng biến đổi chuyển động, nhưng tất cả chỉ
mới là căn bản thôi, sau khi giới thiệu xong 4 khâu căn bản tôi sẽ đi vào chuyên sâu hơn
cho các bạn sau, và ở bài sau (bài 6b) chúng ta sẽ tiếp tục làm quen với khung hình biến
đổi hình dạng với ví dụ mà trước kia tôi đã đề cập với các bạn, biến một chữ G màu xanh
thành một chữ K màu đỏ.

Khung hình biến đổi hình dạng:

Ở bài 6a chúng ta đã được làm quen với dạng khung hình biến đổi chuyển động. Giờ tôi
sẽ thực hiện lời hứa của mình, hướng dẫn ngay các bạn các cơ bản để tạo một khung hình
biến đổi hình dạng, vậy xin được bỏ qua phần giới thiệu dài dòng vì dù sao qua các bài
học trước các bạn cũng đã biết phần nào về loại khung hình này.
* Khái quát:

Chúng ta sẽ làm cho tất cả biến đổi diễn biến trong vòng hai giây nên như các bạn cũng
biết chúng ta phải tạo ra số frame gấp đôi so với mặc định mà bạn quy định có trong một
giây (thông thường thì là 12fps thì số frame bạn cần tạo 24 frames, và đây là lần cuối tôi
nhắc lại việc quy định frames, sau này mọi bài viết sẽ để ở mức frame chuẩn là 12fps, tôi
sẽ không nói nhiều vể phép tính tạo frame đơn giản nữa).

* Phần chính:

- Đầu tiên bạn đặt thanh thực hiện tại frame thứ nhất, tại đây bạn chọn công cụ Text và
nhập vào chữ G.

- Tiến tới frame thứ 24 bạn nhấn chuột phải chọn Insert Blank Keyframe (nên nhớ là
Blank chứ không phải Insert Keyframe, còn tại sao phải như vậy thì xin bạn xem lại bài
5).

- Giờ frame thứ 14 của bạn sẽ là khung hình trống, tại đây bạn lại chọn công cụ Text và
nhập chữ K tại ngay vị trí mà bạn đã nhập chữ G (bạn chọn font chữ lớn hơn cũng không
sao bởi vì biến đổi hình dạng bao gồm ý biến đổi kích thước).

- Nhập hai chữ G và K xong công việc của bạn vẫn chưa kết thúc, việc mà bạn phải làm
là biến các chữ dạng text (thuần văn bản) này sang dạng hình (bởi flash chỉ chấp nhận
biến đổi các hình dạng chứ không thể biến đổi các file mà mỗi kí tự của nó mang tên đuôi
khác trong Wins).

- Để làm việc này bạn chọn khung hình đầu tiên và chọn trên menu: Modify>Break Apart
(hoặc nhấn Ctrl+B), bạn thực hiện điều tương tự cho chữ K.

- Tiếp theo bạn di chuyển thanh thực hiện đến vị trí frame đầu tiên. Ở đây bạn nhấn chuột
phải chọn Properties, bảng Properties ở cuối màn hình hiện ra và bạn chọn thông số như
hình sau:
Như bạn thấy đấy trước đây khi tạo khung hình chuyển động thì chúng ta chọn Motion,
giờ khi chọn shape thì hiễn nhiên là dạng còn lại của khung hình (vậy là khung tween đã
không còn bí ẩn gì với chúng ta và tôi đã thực hiện lời hứa sẽ giải thích toàn bộ cho bạn).
Sau khi chọn Shape khung hình của chúng ta sẽ biến thành như thế này:

(đúng với màu xanh lá cây sáng mà tôi nhắc đến trong
bài 4)

Nhưng còn thông số Ease và Blend là gì? Bạn chớ băn khoăn, tôi giải thích ngay đây:

+ Ease: có hai giá trị từ -100 đến 0 là giá trị In, từ 0 đến 100 là giá trị Out. Là tùy chọn
giúp bạn tăng giảm tốc độ chuyển động biến đổi. Ease giúp cho khoảng thời gian từ khi
bắt đầu cho đến khi kết thúc chuyển động biến đổi tốc độ sẽ tăng dần hay giảm dần. Nếu
giá trị 0 đương nhiên tốc độ sẽ không thay đổi từ khi bắt đầu cho đến khi kết thúc chuyển
động.

+ Blend: có hai thông số chính là Distributive và Angular.Là tùy chọn giúp cho đường
nét và góc hòa trộn nhau. Distributive phù hợp cho hình dạng cong và trơn. Angular
ngược lại là lựa chọn số 1 cho góc cạnh. Nói vậy chứ dù là góc hay dạng cong đều có thể
một trong hai thứ này, chỉ là cái nào phù hợp và tối ưu hơn thôi. Trong ví dụ bạn thấy rõ
chữ G thì cong còn chữ K thì góc cạnh nên bạn chọn tùy chọn nào cũng tốt cả.

Đến lúc này sau khi thiết lập xong bạn đã có một flash biến đổi hình dạng hoàn chỉnh mà
không cần phải phân chính quy hay không như chuyển động rồi đấy, bạn có thể xem
thẳng ngay trong FlashMX cũng được, nếu không thì xuất ra xem cũng không sao.

Trên là ví dụ về việc vừa biến đổi hình vừa biến đổi độ lớn.

[Đầu trang]
Tất cả các công phu về biến đổi hình dạng do Macromedia cung cấp cho chúng ta vẫn
chưa dừng tại đó, hãng còn cung cấp cho chúng ta một tính năng tuyệt vời có tên Shape
Hints.

Shape Hint: là chứ năng chọn và quy định một hay nhiều vị trí trên hình ban đầu theo
bảng chữ cái và quy định các điểm tương ứng tại hình dạng kết thúc. Một điều thuận lợi
từ Shape Hint là khi đặt, các điểm sẽ tự động dò tìm theo phần tử của hình, dễ dàng cho
ta thiết lập và việc biến đổi vị trí các phần tử diễn ra theo ý ta chứ không phải do flash
quyết định.

Để sử này ta chọn Modify>Shape>Add Shape Hint (Ctrl+Shift+H).

- Chọn khung hình đầu tiên, sau đó chọn chức năng Shape Hint, sau đó kéo điểm Shape
Hint đến góc nào đó trong hình, thực hiện như vậy cho đến khi các điểm Shape Hint bao
quanh hình:

Như các bạn cũng thấy, trong hình các vị trí mà tôi đặt là theo thứ tự từ a đến i, từ đó bạn
cũng buộc phải đặt ở frame cuối cùng bao quanh chữ K là các điểm Shape Hint từ a đến i,
nếu không thực hiện đúng quy trình thì hậu quả dẫn đến là đoạn flash biến đổi của bạn
không hợp logic từ đó khiến cho đoạn flash có kết quả khó đoán, hỏng đi sự biến đổi
mềm mại mà thay vì flash giúp ta tự tính toán nếu không sử dụng tính năng này.

- Tiếp đến ta chọn khung hình cuối cùng và đặt các điểm Shape
Hint tương ứng như tôi đã nói ở trên. Cần lưu ý khi bạn tiến
đến frame cuối chứa chữ K thì các điểm SH (Shape Hint)
không cần phải tạo lại mà chúng nằm đè lên nhau, việc của bạn
là phải tách chúng ra và đặt chúng tại các điểm hợp lý:

Nguyên trạng khi vừa chuyển đến frame cuối, các SH đè lên
nhau và trên cùng là SH i.
Đây là các vị trí SH sau khi chỉnh sửa vị trí, nhưng rất tiếc là không hợp logic nên Flash
không thể tính toán chu trình biến đổi.

SH là một tính chất kèm thêm của Flash cực mạnh và cho phép
bạn thay đổi cơ cấu biến đổi, nhưng bù lại nó lại rất khó sử
dụng trong khâu đặt các phần tử sao cho hợp logic. Do đó nếu
bạn mới bắt đầu học flash thì chỉ nên áp dụng cho các cấu trúc
hình học đơn giản như hình vuông chữ T hay hình tròn,... Còn
nếu bạn là một Designer chuyên nghiệp hay đã sử dụng thuần
thục Flash thì đây là một mấu chốt của sự khác nhau giữa trình
độ của bạn và người khác.

Nếu việc thiết lập SH không thành công, bạn không nên lo lắng
mà bỏ tất cả đoạn flash, bạn có thể bỏ tất cả SH bằng cách nhấn
chuột phải vào một SH nào đó trong hình của Frame đầu tiên
chọn Remove All Hints để xóa bỏ tất cả và Remove Hint để xóa
SH mà bạn đang chọn. Đơn nhiên tạo thêm Hint thì bạn chọn Add Hint.

Đến đây là kết thúc phần cơ bản của khung hình dạng biến đổi hình dạng, tiếp đến tôi sẽ
hướng dẫn bạn các nào để chú gà Chip bay vòng tròn khi sử dụng khung hình chuyển
động. Tất cả sẽ được thực hiện gói gọn trong bài 6c, nhưng trước hết bạn cũng nên xem
lại những bài liên quan đến công cụ vẽ đã đưa lên website Echip để dễ thao tác hơn trong
bài 6c.

Khung hình chuyển động theo lớp dẫn:

Chúng ta đã được biết đến cách tạo khung hình biến đổi chuyển động ở bài 6a.

Ờ cuối bài tôi đã có đề cập đến phương thức tạo nhiều khoảng frames để chú gà con lượn
lờ lên xuống tạo cảm giác thật cho người xem, nhưng cách đó có vẻ chỉ thích hợp khi ta
cho bé gà bay trên đường thẳng và không những thế còn làm ta mất nhiều công sức.

Vậy nếu muốn bé Chíp nhà ta bay theo một đường phức tạp thì ta phải làm sao đây? Các
bạn thử xem ví dụ dưới đây nhá.

* Lớp dẫn:
Thật đơn giả đó chính là chúng ta sử dụng thêm lớp dẫn.

Vậy lớp dẫn làm gì?

Lớp dẫn là một lớp đè lên lớp hiện hành, cho phép ta hoạch định đường bay cho đối
tượng, đây là một trong các loại cao cấp nhất của lớp mà ta chỉ thấy ở các chương trình
tạo flash.

Lớp hiện hành sẽ quy định điểm đầu và điểm cuối của đối tượng chuyển động, lớp hiện
hành sẽ là lớp chứa khung hình chuyển động quy định đường bay thẳng cho đối tượng.

Lớp dẫn chứa nội dung đường bay theo logic, ta chỉ cần vẽ đường bay sao cho đi qua
điểm đầu và điểm cuối của đối tượng và hợp logic thì flash sẽ tự tính toán đường bay cho
lớp hiện hành (lớp chứa chuyển động bay thẳng).

Lớp dẫn không hiển thị khi thực hiện chu trình chuyển động.

* Thực hiện:

Nói mà không làm thì khó mà hiểu được.Do đó bạn hãy cùng tôi thực hiện ví dụ nói trên.

Đầu tiên ta tạo một chuyển động y như ví dụ ở bài 6a.

Xin xem hình dưới để bạn có thể hình dung ra.

Như bạn thấy, trong vòng 50 khung hình , chú gà con sẽ chuyển động từ sát phía bên trái
đến sát phía bên tay phải tài liệu của bạn.

Chúng ta sẽ không đá động gì đến lớp hiện hành này nữa.

Việc tiếp theo là bạn phải chèn một lớp dẫn, xin hãy xem
chi tiết ở hình sau.
Bạn nhấn vào biểu tượng đã được khoanh đỏ.

Layer Guide mà tôi gọi là lớp dẫn xuất hiện.

Nếu mặc định phiên bản Flash mà bạn dùng không phải là Guide thì bạn nhấn chuột phải
lên layer này và chọn Guide.

Tiếp đến bạn chọn hết tất cả frame trong layer này và chọn công cụ vẽ nào mà bạn muốn
để vẽ đường đi cho đối tượng.Ở đây tôi dùng công cụ Pencil để vẽ đường đi ngoằn ngoèo
cho đối tượng.

Việc cuối cùng mà bạn phải làm bây giờ là export thành quả ra mà thôi.

Download ví dụ tại đây.

[Đầu trang]

Lợi dụng kẽ hở về khung hình của Flash MX

Trên là một ví dụ về việc lợi dụng về thuật toán khi tuy Logic nhưng không thể tính toán
được ở Flash MX.
Như bạn thấy, ví dụ trên khi nhìn, chắc chắn ta sẽ có sự liên tưởng đến việc sử dụng
Mask như trên, nhưng chúng ta chưa học tới các bài về lớp và theo đề mục ví dụ cũng
cho ta thấy không nhất thiết ta phải lợi dụng Mask.

(Layer Mask là lớp mặt nạ cũng như Guide hay còn gọi là lớp dẫn là một trong những
thành phần khác của lớp, bạn sẽ được biết chi tiết hơn về sau)

Trở lại vấn đề, ta thấy đối tượng lúc ẩn hiện trong khi trượt từ trái sang phải, do đó chắc
chắn vấn đề sẽ liên quan đến khung hình chuyển động. Nhắc lại lần nữa ta sẽ không làm
việc với lớp, chỉ đơn thuần là lợi dụng sự tính toán lệch của Flash. Do đó mà trong trường
hợp này chắc chắn bạn chỉ còn một trường hợp duy nhất đó là sử dụng khung hình biến
đổi.

Sau đây là cách thực hiện :

Đơn nhiên bạn phải tạo một tài liệu mới trước.

Tại khung hình thứ 60 bạn tạo một khung hình khóa. Chèn đối tượng trong khoảng frame
1 đến 59 ở bên tay trái như hình trên.

Tại khung hình 60 bạn chèn tiếp đối tượng tại góc phải cuối tài liệu làm việc.
Việc làm này tương tự như bạn tạo khung hình chuyển động, đích xác là ví dụ được lấy
từ bài 6a.

Sau đó bạn chọn toàn bộ đoạn khung hình từ 1 - 59 tại bảng


Properties ở Tween là Shape (làm như vậy để thiết lập dãy khung
hình này là dạng biến đổi chứ không phải là dạng chuyển động
Motion).

Đây là kết quả mà bạn nhận được sau khi thực hiện chọn Shape:

Theo đúng lý thuyết thì Flash chỉ nhận thực hiện thuật giải khi đây là dạng chuyển động
chứ không phải hình dạng, nhưng theo lý thuyết thì việc chèn khung hình khoá ở cuối và
khung hình đầu đã đầy đủ điều kiện nên bắt buộc Flash phải đưa ra thuật giải, đó là một
thuật giải tương tự khi bạn dùng hai lớp, một lớp dưới do biến đổi nên hình đối tượng sẽ
sắp liên tiếp theo đường đi, lớp trên là một lớp trắng khuyết một phần thực hiện dạng
chuyển động chạy cũng theo đường định sẵn.

Đến đây ví dụ cũng đã xong, bạn chỉ cần export ra xem là được.

Download ví dụ tại đây.

Hai ví dụ trên rất phổ biến và được sử dụng rất nhiều trong giới chuyên nghiệp.

Bạn cũng có thể kết hợp hai ví dụ trên với nhau tạo nên một hiệu ứng khác cũng thường
được sử dụng.

Bai 7
Lớp và các thuộc tính:

Như tôi đã nói trước kia, Flash bao gồm 4 đại gia chính và chúng ta đã được biết cơ bản
về hai đại gia "Công cụ vẽ" và "khung hình", nay tôi xin giới thiệu với các bạn vị đại gia
thứ 3, đây cũng là một vị đại gia không kém phần quan trọng so với các đại gia trước.
ĐÓ CHÍNH LÀ LỚP.

Nói đến lớp ta liên tưởng đến ngay các trình đồ họa nổi tiếng như Photoshop, và bạn cũng
nên hiểu, lớp ở đây mang nghĩa Layer, tức nó cũng có chung một tính năng như Layer
trong Photoshop.

Sau đây là toàn bộ khu vực làm việc của lớp:

* Hình con mắt cho biết nội dung lớp có được hiển thị trong vùng làm
việc hay không (chức năng này chỉ có hiệu quả khi bạn làm việc, lớp
có hiển thị hay không khi bạn export ra là còn tùy thuộc vào thuộc tính
mà nó đang mang).

* Hình ổ khóa cho biết nội dung trong lớp đó có khả năng bị chỉnh sửa hay không (làm
như vậy để chắc chắn trong quá trình làm việc không vô ý hủy hoại hay tác động ngoài ý
muốn nội dung trong lớp, khi bạn chọn lớp để khóa, Flash sẽ báo cho bạn biết lớp này
không chỉnh sử được nữa bằng cách gạch chéo biểu tượng cây bút chì).

* Hình khung viền đen: quy định màu sắc bao các đối tượng trong lớp.

*Hình tờ giấy: đó là biểu tượng của một lớp bình thường, không mang thuộc tính khác.

Bên cạnh đó có dòng chữ "Layer 1" chính là tên lớp, đối với lớp thường thì lớp nào nằm
trên sẽ hiển thị đối tượng ở lớp trên đè lên đối tượng nằm trong lớp dưới.

* Hình tờ giấy có dấu +: tạo thêm một lớp thường, mặc định lớp này tạo ra sẽ nằm trên
lớp hiện hành (tức là lớp mà bạn đang để trò chuột).

* Hình dấu cộng có các chấm đỏ: như ta đã từng thực hành, đây là biểu tượng chèn lớp
dẫn (Guide) cho lớp hiện hành.

* Biểu tượng thư mục có dấu +: chèn thư mục.

* Biểu tượng thùng rác: xóa lớp mà bạn đang chọn.

Các thuộc tính của lớp:

Để hiển thị thuộc tính của lớp, bạn chọn lớp mà bạn muốn sửa đổi thuộc tính, sau đó
nhấn chuột phải chọn Properties.

Bảng Layer Properties hiện ra:


* Name: quy định tên cho lớp mà bạn đang chọn, bạn có thể thay đổi tên cho lớp này
bằng cái tên khác Layer 1 như Echip chẳng hạn. Việc quy định tên cho lớp cũng khá quan
trọng khi bạn muốn thể hiện vắn tắt nội dung chứa trong lớp đó (một cách khác để đổi tên
là bạn không phải mở bảng thuộc tính lớp ra mà có thể double click vào phần tên của
layer hiện hành và nhập tên mới).

* Show và Lock: là thuộc tính hình con mắt và ổ khóa như tôi nói ở trên.

* Type: đây chính là các thuộc tính khác nhau của lớp.

+ Guide hay Guided là lớp dẫn nhưng có sự khác nhau đôi chút, còn Mask hay Masked
là lớp mặt nạ, cũng như lớp dẫn hai loại này cũng khác nau đôi chút. Chúng ta sẽ đề cập
sâu hơn về 4 loại lớp này ở bài 8 và 9.

+ Normal: chính là lớp bình thường, chứa nội dung và quy định hiển thị trên dưới.

+ Folder: có cùng chức năng với biểu tượng thư mục. Đây là một thành phần mới mà chỉ
có thể bắt gặp từ phiên bản MX trở lên. Quy định ngăn các các lớp giúp ta dễ kiểm soát
nội dung các lớp hơn.

* Outline Color: chức năng này không những một lần nữa giúp ta phân biệt các lớp mà nó
còn giúp ta phân biệt các thành phần trong lớp.

Lấy ví dụ bạn tạo hai lớp, mỗi lớp tạo chèn một bé Chíp ở một vị trí khác nhau :
Vậy bạn sẽ không biết được đâu là bé Chíp thuộc lớp Chíp 1, đâu là bé Chíp thuộc lớp
Chíp 2.

Mà trong khi bạn đang chọn lớp Chíp 1 với Outline Color là màu xanh lá, lớp Chíp 2 là
màu xanh da trời. Bây giờ chỉ có hai cách nhận biết, một là bạn chọn đại 1 trong 2 bé
Chíp, nếu trỏ chuột hiển thị ờ khung hình nào thì Chíp đó thuộc lớp đó. Nhưng đây không
phải là cách toàn diện, bởi nếu đây không phải hai mà là hàng ngàn bé Chíp với cả chục
lớp thì bạn không thể đánh dấu từng Chíp một theo kiểu trên.

Cách tốt nhất là bạn dựa vào Outline Color, bạn nhấn chuột lên khung có viền đen như tôi
nói ở trên, bạn sẽ dễ dàng thấy hai bé Chíp bị biến thành :

Bạn thấy đấy, bây giờ nhận biết không còn là khó nữa, màu xanh da trời là thuộc lớp
Chíp 2, màu xanh lá là thuộc lớp Chíp 1.

* View layer as outline chính là thuộc tính nếu bạn chọn thì toàn bộ đối tượng sẽ hiển thị
dưới dạng viền màu tương tự hình sau của ví dụ về Outline Color, đối tượng sẽ không
hiển thị mà chỉ hiển thị viền ngoài và màu Outline mà thôi (tùy chọn này thay thế cho cái
click chuột vào khung viền đen trong phần Outline Color).

* Layer Height: tùy chọn này cho phép bạn thay đổi độ cao của lớp, không hề tác động
lên các thành phần trong lớp, có ba mức là 100%, 200%, và 300%.
Giả sử tôi chọn 300% cho lớp Chíp 1 thì:

Như bạn thấy đấy, độ cao của lớp sẽ lập tức tăng gấp 3 lần, trở lại
như cũ thì bạn chọn 100%.

Vậy Macromedia làm chức năng này để làm gì? Xin thưa, đó là để
cho bạn dễ dàng hơn trong việc sửa đổi tầng số âm thanh dạng sóng
nhấp nhô ngay trong Flash. Việc sửa đổi đã đề cập trước đây và sẽ
nâng cao sau này.

Thay đổi thứ tự lớp: do mặc định tạo thêm lớp mới thì lớp này sẽ nằm trên lớp cũ và trở
thành lớp hiện hành, vậy muốn thay đổi vị trí một lớp nào đó (theo tính năng của lớp chỉ
có duy nhất hai vị trí đó là nằm trên hoặc nằm dưới một hay nhiều lớp khác) bạn chỉ cần
chọn lớp muốn thay đổi vị trí, chọn lớp đó và giữ chuột rê đến vị trí mà mình cần.

Bạn cũng có thể thay đổi một lúc vị trí của nhiều lớp bằng cách nhấn Shift kèm theo khi
chọn lớp (không thể nhấn Ctrl bởi làm thế Flash sẽ không thể tính toán vị trí của các lớp
và khi chọn Shift cũng có nghĩa với việc bạn buộc phải chọn các lớp liên tiếp nhau), sau
đó giữ chuột đồng thời giữ Shift và rê đến vị trí mà bạn muốn.

Sao chép lớp: việc này không đơn giản như việc Copy và Paste mà bạn thường làm, để
sao chép nội dung một lớp bạn phải tạo một lớp mới trước, lớp này tên bạn đặt là gì cũng
được và cũng không cần thiết về việc quy định số khung hình trong lớp mới này.

Tiếp đến bạn chọn toàn bộ nội dung của lớp cần sao chép và giữ nút Ctrl đồng thời nhấn
chuột phải chọn Copy Frame, sau đó bạn chọn một vị trí nào đó trong lớp mới và nhấn
chuột phải (không phải giữ Ctrl) và chọn Paste Frame là OK.

(đáng ra phần này nên nói ở bài khung hình thì tốt hơn nhưng ở bài đó chúng ta chưa biết
về lớp nên phải đợi đến bài này)

Sao chép nhiều lớp: cũng như trên bạn phải tạo thêm một lớp mới trước, sau đó bạn
chọn nội dung các lớp bằng phím Shift (không thể dùng phím Ctrl bởi ta không thể sao
chép các lớp cách nhau), nhấn chuột phải chọn Copy Frames và việc còn lại cũng như sao
chép lớp, chọn Paste Frame trên lớp mới tạo là xong.

Di chuyển nội dung trong một lớp đến lớp khác: để làm việc này bạn chọn phần nội
dung trong lớp mà bạn muốn di chuyển sau đó nhấn và giữ chuột và rê đến bất cứ khung
hình nào của lớp mà bạn muốn di chuyển nội dung.

Bỏ tất cả các khóa và ẩn: việc này rất hữu ích nếu các lớp bị ẩn hoặc đã bị khóa (đánh
dấu hình con mắt hoặc ổ khóa), bởi nếu với một số lượng quá lớn sẽ khiến cho bạn mất
nhiều thời gian khi bỏ từng đối tượng, đơn giản là bạn chỉ cần chọn một lớp bất kì nhấn
chuột phải và chọn Show all. Tất cả ẩn và khóa sẽ bị loại bỏ hoàn toàn.

Bai 8
Ở bài trước, chúng ta đã làm quen với những điều cơ bản về lớp. Như đã hứa, tại bài này
tôi sẽ giải thích và nêu ra công dụng đặc sắc của lớp dẫn (guide).

Đầu tiên, hẳn điều mà các bạn thắc mắc ngay từ bài trước là hai định dạng lớp Guide và
Guided. Nay tôi xin đưa ra hai định nghĩa cho hai khái niệm này:

+ Guide: thực tế trong cuộc sống bạn chỉ gặp hai dạng đường thẳng hoặc đường cong,
cách tạo chuyển động thẳng ta có thể dựa vào khung hình chuyển động nhưng với đường
cong Flash buộc phải đưa ra một khái niệm khác, đó là vẽ đường cho đối tượng bằng một
lớp khác và đặt tên là guide. Định dạng này giúp bạn biến đổi một lớp bình thường thành
lớp dẫn cho chuyển động, có chức năng định đường đi của một hay nhiều đối tượng trong
1 lớp hoặc nhiều lớp thuộc lớp dẫn chuyển động. Thành phần trong lớp này sẽ không xuất
ra trực tiếp để có thể nhìn bằng mắt thường.

+ Guided: định dạng thiết lập lớp được kiên kết đến một lớp dẫn chuyển động (guide).
Định dạng này chỉ phát huy tác dụng khi bạn có ít nhất một lớp chứa khung hình chuyển
động nằm dưới lớp Guide. Và lớp thường này sẽ biến thành định dạng Guided (có nghĩa
là bị động, bị lớp dẫn tác dụng). Các thành phần trong lớp này khi xuất ra sẽ được thấy
bằng mắt thường.

* Một cách khác để tạo lớp dẫn:

Nhấn chuột phải vào lớp mà bạn muốn thiết lập lớp dẫn, nhấn chuột phải chọn Add
Motion Guide. Lớp Guide sẽ tự động nằm đè lên lớp chọn.

* Phân biệt lớp dẫn được và không được liên kết:

Như bạn thấy ở hình bên chúng ta có tất cả 4 lớp (thứ tự từ trên xuống):
Lớp 1: lớp không có đối tượng (lớp khác) để liên kết chuyển động.
Lớp 2: lớp dẫn (guide) cho lớp thứ 3.
Lớp 3: lớp liên kết với lớp dẫn chuyển động (Guided).
Lớp 4: lớp thường.

* Các khuyết điểm chưa được khắc phục của lớp dẫn chuyển động:

Như tôi đã nói ở trên thì lớp dẫn guide có thể chứa nhiều guided liên kết đến, nhưng
khuyết điểm ở đây là tất cả các lớp guided đều phải nằm dưới guide. Mà trong khi đó
Guided lẫn lớp thường đều được thể hiện dưới mắt thường khi được xuất ra.
--> vấn đề chính là ở chỗ này: giả sử bạn có tất cả 4 lớp 1 lớp Guide và 2 lớp Guided gọi
là A và C, 1 lớp thường gọi là B. Vậy nếu vì một lý do nào đó mà bạn muốn đặt ba lớp
này xếp chồng lên nhau theo thứ tự của chúng thì điều đó không thể xảy ra khi bạn dùng
1 lớp Guide. Vậy giải pháp giờ chỉ có một, đó là tạo thêm một lớp Guide khác cho lớp C
y như lớp Guide của lớp A, và đặt lớp thường B ở giữa 5 lớp. Nếu như Macromedia có
một cách khác thiết lập hiệu quả hơn về liên kết lớp thì chúng ta sẽ tiết kiệm hơn dung
lượng file Flash lẫn công sức mà ta bỏ ra.
* Lợi dụng lớp dẫn cho việc trình bày:
Như chúng ta biết, lớp guide sẽ không xuất ra cho chúng ta nhìn dưới mắt thường, vậy
khi chúng ta muốn ẩn một đối tượng nào đó để so sánh xem khi đoạn phim có hai không
đối tượng này sẽ hay và đẹp hơn bạn chỉ cần làm một việc duy nhất chuyển định dạng
của lớp ấy sang guide để lớp ấy không hiển thị là ổn.
Lớp mặt nạ
Cũng được nhắc đến song song với Guide đó chính là Mask.
Tôi cũng xin đề cập ngay đến hai khái niệm của loại định dạng này.
+ Lớp mặt nạ ta cũng có thể tưởng tượng giống như tên của nó, giả sử cả phần đầu ta là
một lớp, với các chi tiết như mắt, mũi, tay, chân, đầu, tóc, ..., thì khi đeo mặt nạ che mất
đi phần mắt, không cho ta nhận dạng ra người đối diện (ở đây là một phần đối tượng của
lớp). Lớp mặt nạ khi liên kết với các lớp khác.
* Định nghĩa Mask và Masked:
Tương tự như Guide và Guided, ta có các định nghĩa tương tự:
+ Mask: Lớp mặt nạ, có tác dụng che các đối tượng thuộc lớp liên kết với nó.
+ Masked: Là các lớp liên kết với lớp Mask.
* Hai cách tạo Mask và Masked:
+ Cách 1:Chọn một lớp và đặt thuộc tính là mask, sau đó kéo lớp còn lại (lớp thường)
nằm dưới lớp mask ta được lớp masked.
+ Cách 2:Tạo hai lớp, chọn lớp trên là mask, lớp dưới tự động sẽ được định nghĩa là
masked.
+ Chú ý: Từ cách tạo thứ 2 cho ta thấy lớp dưới của lớp đặt thuộc tính mask sẽ tự động
định dạng là masked, để tránh việc tạo các masked không muốn , bạn nên kéo lớp muốn
đặt thuộc tính mask xuống cuối cùng rồi mới đặt thuộc tính.
* Phân biệt Mask và Masked:

Hình bên mô tả hai lớp mask và masked:


Lớp 1: Lớp Mask che đối tượng lớp Masked.
Lớp 2: Lớp Masked, lớp liên kết với mask và các đối tượng trong nó sẽ bị che bởi mask.
* Khuyết điểm của lớp mặt nạ: Tương tự như Guide. *Ví dụ về việc sử dụng lớp

mask: * Thực hiện:


- Tạo một tài liệu flash mới, trên dự án mới bạn tạo hai layer (1 dùng để làm layer mask,
1 dùng làm layer masked).
- Đặt tên cho layer nằm trên là mask, layer dưới là masked (bạn có thể đặt tên mà bạn
muốn, tôi đưa ra hai tên này để giúp bạn dễ liên tưởng).
- Cả hai layer bạn đều tạo 25 khung hình (bao nhiêu khung hình tùy thích, nhưng theo ví
dụ trên thì là 25 khung).
- Khung hình trên bạn tạo một khung hình chuyển động với đối tượng chuyển động là
hình tròn tạo từ công cụ Oval Tool (phím O) như những bài học trước, sau đó bạn chọn
đối tượng hình tròn vừa tạo sau khi đã thiết lập chuyển động và chọn chuột phải: chọn
Convert To Symbol..., sau đó nhấn OK.

- Đến đây bạn đã làm xong nửa công đoạn, phần còn lại đơn giản bạn chỉ cần import hình
echip vào layer mask.
-Tiếp đến bạn nhấn chuột phải lên layer mask và chọn Mask, kết quả như sau:

- Cuối cùng bạn chỉ cần chạy thử hay export để xem thành quả.
- Để tiện cho việc thực hiện bạn có thể download mã nguồn tại đây.
Tính đến giờ phút này chúng ta đã học xong ba phần chính của Flash, nhưng vẫn còn lại
một đại gia cuối chính là Action Script, và một số phần phụ khác mà bạn cần phải biết
nếu muốn sử dụng Flash là: Symbol, Scene, Library và các Components tích hợp với việc
kết nối XML, Data Set và thành phần giao diện như UI Component. Hy vọng khái quát
trước những gì mà tôi sắp trình bày trong các bài học tiếp theo sẽ giúp các bạn dễ dang
hơn trong việc hệ thống kiến thức.

Bai 9
Như đă giới thiệu ở cuối bài trước, tôi xin đề cập đến Scene, Library và Symbol trong bài
này.

Scene (phân cảnh)

Thử tưởng tượng nhé, với những ǵ mà bạn đă được cung cấp cho bạn trong các bài trước,
bạn biết rằng một đoạn phim Flash được tập hợp từ các khung h́nh, các khung h́nh tĩnh
được chuyển liên tục đánh lừa con mắt người xem rằng ảnh đang chuyển động. Đó là lư
thuyết tương tự như các loại phim nhựa. Và cũng tương tự như vậy, Flash đề ra một khái
niệm tương tự phim, đó là các phân cảnh. Một bộ phim sẽ không thể xoay quanh mă một
cảnh, mà đó là chắp nối của nhiều lần quay với nhiều cảnh quay trong các không gian
khác nhau, đó là lănh vực phim, scene trong Flash sẽ có nghĩa hơn thế nữa nếu bạn là một
nhà phát triển game hay phần mềm bằng Flash. Với game th́ đó chính là các màn chơi
khác nhau tương ứng với mỗi scene, với nhà lập trình thì đó chính là những phần ẩn ngay
trong cùng một form. Thật ấn tượng phải không các bạn.

+ Để tạo một scene, sau khi đă bật tŕnh Flash và tạo một dự án (hoặc với dự án mà bạn
đang thực hiện) bạn chọn trên thanh menu Insert/Scene.

+ Để chuyển đổi qua lại với các scene bạn nhấn chọn biểu tượng Edit Scene và chọn
scene mà bạn muốn làm việc.

* Trình quản lý Scene:

Để hiển thị hộp quản lư Scene bạn chọn từ menu Window/Design Panels/Scene (hoặc
nhấn Shift + F2), hộp thoại sau sẽ hiển thị:

Như bạn thấy, khung h́nh trên sẽ liệt kê toàn bộ các scene trong dự án của bạn. Hộp thoại
liệt kê cho phép bạn thao tác các hành động sau đây:

+ Sử đổi tên phân cảnh: việc làm này rất có ích, lợi ích rơ ràng nhất mà ta có thể thấy
được đó chính gợi nhớ, với cách đặt tên thay cho các kí hiệu scene 1, scene2... không cần
bạn phải chuyển sang phân cảnh, hoặc lục lọi trong các phân cảnh để t́m phân cảnh cần
sử chữa mà vẫn biết được chính xác phân cảnh chứa ǵ theo gợ nhớ của bạn. Để đổi tên
bạn đơn giản chỉ cần double click lên phân cảnh mà ḿnh muốn đổi tên, sau đó nhập tên
mà bạn muốn.
+ Xếp lại thứ tự phân cảnh: chọn phân cảnh muốn đổi chỗ, sau đó nhấn và giữ chuột phải,
di chuyển phân cảnh đến vị trí mà bạn muốn.

+ Nhân đôi phân cảnh: đôi khi trong công việc, bạn cần thiết kế hai phân cảnh hoàn toàn
giống nhau, thiết kế lại đó với một khung cảnh chứa đầy layer và khung h́nh lồng ghép
phức tạp sẽ ngốn của bạn không ít thời gian, chính v́ vậy mà Macromedia cung cấp cho
bạn chức năng nhân đôi (duplicate scene), để nhân đôi bạn chọn phân cảnh cần phân đôi
trong danh sách liệt kê, sau đó nhấn biểu tượng đầu tiên (duplicate scene) trong hành
cuối. (chức năng này tương tự duplicate layer trong photoshop).

+ Thêm một phân cảnh: chức năng này tương tự việc bạn tạo phân cảnh mà tôi nói trên,
để thực hiện bạn nhấn vào biểu tượng thứ hai mang h́nh dấu cộng.

+ Xóa một phân cảnh: không nói ǵ hơn đó là biểu tượng h́nh thùng rác.

Symbol

Liệu có bao giờ bạn quan tâm đến việc chương tŕnh của ḿnh có một dung lượng khá lớn
trong khi bản thân bạn đă thực hiện các phương pháp tối ưu như giảm độ phân giải h́nh
và âm thanh... mà chương tŕnh vẫn c̣n nặng, symbol chính là một giải pháp hay trong việc
giảm thao tác cũng như dung lượng chương tŕnh. Lấy ví dụ, trong mỗi phân cảnh bạn cần
dùng h́nh gà con echip một lần, nhưng tiếc thay chương tŕnh bạn tồn tại quá nhiều phân
cảnh, nếu cứ import và từng phân cảnh măi th́ thật là một giải pháp tồi, thứ nhất là rất mất
thời gian cho các hành động lập đi lập lại, thứ hai là chỉ với một h́nh mà bạn phải import
vào nhiều lần như vậy sẽ khiến cho dung lượng tăng đáng kể, thứ mà bạn cần chính là
khả năng trích xuất nhanh chóng và dùng chung (tương tự như thiết kế web, với một tấm
h́nh bạn hoàn toàn có thể liên kết hiển thị với nhiều file HTML, giảm thiểu tối đa việc sử
dụng dung lượng đĩa cứng), và đó chính là sự cần thiết của symbol.

Bạn đừng vội hiểu nhầm Symbol và các đối tượng mà bạn vẽ hay import vào file flash là
hai phạm trù khác nhau, thực chất chúng là hệ quả của nhau, tức phải có đối tượng bạn
mới có thể có symbol.

Có hai cách để tạo symbol:

- Dùng các đối tượng có sẵn: dùng công cụ Selection Tool (V) để chọn đối tượng mà bạn
muốn chọn làm symbol, sau đó chọn chuột phải và chọn Convert To Symbol... từ menu
hiện ra.

- Các thứ hai là tạo một symbol trống và bắt đầu vẽ hoặc import các đối tượng vào khung
làm việc của frame chứa symbol. Để tạo một symbol rỗng ta chọn từ thanh menu
Insert/New Symbol... (hoặc nhấn Ctrl + F8).

Dù cho chọn cách tạo nào cũng vậy, bạn đều gặp phải một hộp thoại miêu tả chi tiết các
thuộc tính symbol mà bạn muốn tạo, hộp thoại đó có nội dung như sau:
+ Name: tên symbol, thiết lập này khá quan trọng, nếu bạn phải làm việc với một dự án
lớn, th́ việc gặp phải hàng trăm thậm chí hàng ngàn symbol là chuyện thường, việc đặt
tên sẽ rất có ích khi bạn muốn t́m một symbol nào đó bằng các từ gợi nhớ là tên symbol.

+ Behavior: Đây là thiết lập thuộc tính của symbol, bạn buộc phải chọn 1 trong ba thuộc
tính cho đối tượng chuyển thành symbol.

- Graphic: đây là symbol đồ họa với mục đích phục vụ cho việc nhân bản, như ví dụ nêu
trên, chỉ cần một symbol, bạn có thể dùng lại nhiều lần trong cùng một scene hay với các
scene khác nhau, đây là một symbol thường dùng nhất.

- Button: là symbol thực hiện tạo các nút nhấn, các nút nhấn tạo ra sẽ chịu sự tương tác
với trỏ chuột (sẽ nói rơ hơn tại bài tương tác) để điều khiển mọi thứ trong file flash của
bạn.

- Movie Clip: là symbol toàn vẹn nhất, nó mang nhiều tính năng nhất, ta lấy một ví dụ
cho dễ hiểu, trong một đoạn phim sẽ có nhiều đoạn quảng cáo nhỏ được chèn vào giữa
phim, chúng hoạt động độc lập với bộ phim đang chiếu, tương tự như vậy ta có định
nghĩa của symbol này, symbol này chứa các đoạn phim (tức chứa cả các đối tượng khung
h́nh... trong đoạn phim đó), nó sẽ được lồng ghép và đoạn phim chính, hay cho chạy bất
cứ lúc nào bạn muốn khi tương tác bằng button... Nó hoạt động độc lập và không nằm
trong phần đang làm việc của bạn.

Cả ba thuộc tính đều có một công dụng nhất định và không có thuộc tính nào giống thuộc
tính nào, vì vậy khi thiết lập thuộc tính, bạn phải biết rõ mình tạo symbol vì mục đích gì.

Để nhân đôi một symbol ta nhấn chuột phải lên symbol chọn Duplicate Symbol... (hoặc
chọn trên menu Modify/Symbol/Duplicate Symbol...)

Để quản lý symbol, ta cần biết khái niệm về thư viện. Do đó tôi sẽ đề cập ngay bây giờ.

Library

Thật khó khi quản lư mọi phần tử có khả năng tái sử dụng (symbol) trong một dự án
Flash nếu không gộp chúng về một đầu mối, chính v́ vậy mà khái niệm thư viện được
macromedia đề xướng và sử dụng ngay từ phiên bản 4. Đến nay, đă có thêm nhiều chức
năng nổi bật cho thư viện được macromedia tích hợp trong phần mềm của ḿnh như: quản
lư, thêm bớt, edit lại thuộc tính symbol..., trong thư viện bạn có thể chứa mọi thứ miễn là
quy chúng vè symbol, bạn cũng có thể chứa các đoạn nhạc mà ḿnh đă import, ...

Để bật cửa sổ quản lư của thư viện bạn chọn: Window/Library (hoặc chọn Ctrl + L):

Đây là giao diện của cửa sổ quản lý với các thành phần:

+ Dòng đầu tiên thống kê số phần tử tồn tại trong thư viện (trong hình là 15 items)

+ Dòng thứ hai là cửa sổ hiển thị hình dạng của đối tượng symbol.

+ Dòng ba là hộp liệt kê các phần tử với các thông số chi tiết:

- Name: cung cấp thông tin của dạng symbol, tên symbol, và biểu tượng nhận biết nhanh.

- Kind: thông tin loại phần tử, phần này có vẻ dư thừa bởi bản thân name đă cung cấp cho
ta thuộc tính symbol.

- Use count: số lần sử dụng symbol, không hiểu tại sao macromedia tạo thành phần này
trong khi quy cho mọi symbol số lần sử dụng lại vô hạn.

- Linkage: đây là một loạt chức năng thêm mà chỉ có phiên bản MX 2004 cung cấp, nó hỗ
trợ cho việc lập tŕnh bằng Action Script, vì vậy tôi không đề cập trong bài này. Bạn sẽ
sớm biết thôi mà.

- Date Modified: dịch ra là ngày cập nhật.


+ Hàng cuối:

- Biểu tượng thứ nhất: tạo symbol mới.

- Biểu tượng thứ hai: tạo folder, tại sao phải tạo folder, chắc chắn bạn sẽ hỏi như vậy, vậy
tôi hỏi lại bạn, bạn có tạo folder trong các ổ đĩa ở trong máy bạn không. Tạo folder ở đây
cũng vậy, với một khối lượng symbol lên tới hàng trăm và vối từ miêu tả gần cạn th́
symbol giúp ta thống kê tốt hơn với mô h́nh cây của explorer. Sau khi tạo folder, nếu bạn
muốn đặt các phần tử trước vào folder th́ bạn chỉ cần kéo thả vào folder mà ḿnh muốn,
c̣n nếu không th́ bạn làm ngược lại.

- Biểu tượng thứ ba: cung cấp toàn bộ thông tin về symbol (không cần thiết v́ hộp liệt kê
đă làm rất tốt điều đó).

- Biểu tượng cuối: xóa đi các symbol mà bạn không thích.

Ngoài ra khi nhấn chuột phải bạn c̣n bắt gặp menu sau:

Khi nhấn folder:

- Rename: đổi tên cho folder mà bạn đang chọn.

- Duplicate: nhân đôi folder mà bạn đang chọn.

- Move to New Folder: chuyển đến một folder mới tạo, việc làm này đồng nghĩa bạn tạo
một folder mới và chuyển folder ḿnh đang chọn vào trong folder mới tạo đó.

- Delete: dịch là xóa folder.

- Expand Folder: mở mọi phần tử con trong folder bạn đang chọn, giống như bạn xem
mọi phần tử trong cây explorer.

- Collapse Folder: đóng lại mọi phần tử trong folder đang chọn, lại giống explorer.

- Expand All Folder: giống Expand Folder nhưng tác động lên tất cả folder trong library.
- Collapse All Folder: giống Collapse Folder nhưng tác động lên tất cả folder trong
library.

Khi nhấn symbol:

- Rename: đổi tên symbol.

- Duplicate: nhân đôi symbol.

- Move to New Folder: hành động xảy ra đồng thời, tạo một folder mới và chuyển symbol
đang chọn vào trong đó.

- Delete: xóa symbol mà bạn chọn.

- Edit: hiển thị khung làm việc với riêng symbol bạn chọn.

- Properties...: Hiển thị cửa sổ tạo symbol nhưng với tiêu đề Symbol Properties và chức
năng là đặt lại thuộc tính chứ không phải tạo mới.

- Linkage...: không nói trong bài này.

- Play: nếu symbol thuộc dạng movie clip th́ chức năng này bật.

- Type: chuyển đổi nhanh thuộc tính của symbol về một trong hai thuộc tính c̣n lại hoặc
giữ nguyên.

- Export Flash Movie...: xuất symbol về file thi hành *.swf (chỉ dùng cho dạng movie clip
bởi nó hội đủ mọi yêu cầu như một dự án).
- Export SWC File..: xuất ra file swc, đây là file định dạng thành phần, là một file chứa
compiled clips được export.

- Covert to Compiled Clip: ở trên tôi đă đề cập đến cụm từ này, Compiled Clip là các
symbol movie clip được xuất thành swf, vậy tính năng của nó tương tự symbol movie
clip, tại sao macromedia lại thêm vào, v́ nó có khả năng kết nối cao, phân tán thành các
file SWC nói trên và không những thế khả năng hiển thị của nó nhanh hơn so với symbol
movie clip, nhưng hăy nhớ, với Compiled Clip bạn sẽ không thể chỉnh sửa lại như với
symbol movie clip.

- Component Definition...: sẽ đề cập trong bài về các Components.

Để sử dụng một symbol vào khung làm việc, đơn giản bạn chỉ cần chọn symbol trong
library và kéo thả chúng ra vùng làm việc với bất ḱ chỗ nào bạn muốn.

Đến đây tôi đă cung cấp cho bạn xong các khái niệm về symbol, scene và library, trong
bài tiếp theo chúng ta sẽ làm ví dụ về chúng để các bạn nắm rơ hơn.

Bai 10
Như đã hứa tại bài trước, trong bài này chúng ta sẽ thực hành phần lý thuyết khá dài dòng
tại bài trước để các bạn nắm rõ hơn.

Vì vậy tôi xin thực hiện một loạt ví dụ về button trước:

Ví dụ 1: Tạo một button bình thường

Việc tạo một button bình thường cũng khá đơn giản, bởi nó bản thân nó chỉ đem lại kết
quả đồ họa đơn giản tương ứng với các tác động của con trỏ gây nên (nếu bạn là một nhà
thiết kế web thì điều này tương đương bạn đang viết một class cho từng hyperlink),
nhưng bạn đừng vội bỏ qua phần này, bởi nó chính là tiền đề cho các ví dụ sau.

Để tạo một button bình thường, hãy làm theo các bước sau:

1. Chọn Insert->New Symbol... từ thanh menu (hoặc nhấn Ctrl+F8) để tạo một symbol,
hãy nhớ, bản thân button cũng là một dạng của symbol.

2. Tiếp theo bảng Create new symbol sẽ hiện lên, bạn có thể đặt tên nào tùy thích, và
đừng quên chọn thuộc tính button cho Behavior. Hoàn tất thì bạn nhấn OK. (trong ví dụ
này tôi đặt tên cho button là buttonechip)

3. Bây giờ thì chính xác điều mà bạn thấy là một cửa sổ làm việc mới và phía trên bộ
phận quản lý khung hình chỉ có một layer duy nhất và bốn khung hình như sau:
Tại đây bạn hãy dùng các công cụ vẽ để tạo hình button như bạn mong muốn nếu không
nữa thì hãy import hình mà bạn muốn vào (nhưng nếu làm vậy nhớ chuyển tấm hình đó
sang dạng đối tượng và import vào một symbol graphic để tránh tiện quản lý trong thư
viện).

Còn đây là hình mà tôi vẽ cho ví dụ này:

4. Việc tiếp theo là bạn phải tạo một keyframe ngay vị trí ô trắng có nhãn Over, để làm
nhanh bạn có thể nhấn chọn ô trắng đó và thay vì nhấn chuột phải chọn thao tác thì bạn
chỉ cần nhấn F6 là được. Sau đó bạn chỉnh sửa lại một chút hình dạng button tại frame
này là được. Riêng tôi thì tôi đổi phông nền từ màu xanh lá thành màu đỏ.
5. Tương tự bạn làm như vậy với hai frame có nhãn Down.

6. Cuối cùng là frame mang nhãn Hit, bước này bạn làm tương tự như nhãn Down, và
như vậy thì sẽ có kết quả 008a, nếu làm tiếp như đoạn dưới thì có kết quả 008b.

Tại nhãn Hit bạn cũng làm tương tự như nhãn Down, vẫn chọn ô frame trắng mang nhãn
Hit, nhấn F6, và đổi màu của button(trong ví dụ này tôi lần lượt có các màu như sau:nhãn
Up màu xanh lá; nhãn Over màu đỏ; nhãn Down màu vàng và nhãn Hit màu xanh
dương). Tiếp đến bạn kéo toàn bộ đối tượng ra khỏi vị trí button, trong ví dụ tôi kéo
chệch sang phải như hình dưới:
7. Hoàn tất mà không tạo frame ở nhãn Hit thì bạn trở lại Scene 1 và kéo thả symbol có
tên buttonechip vào trong giao diện làm việc, đến lúc này bạn đã có thể export ra file swf
để xem thành quả rồi đấy.

Còn nếu có thực hiện bước 6 thì bạn phải làm thêm một việc là vẽ một đối tượng tương
tự đối tượng tại frame Hit tại vùng tương ứng với nơi mà bạn đặt button.(để cho dễ thực
hiện bạn copy toàn bộ đối tượng trong frame Hit và paste tại scene1, bạn cũng có thể vẽ
một đối tượng hoàn toàn khác tại scene1 miễn sao nó bao trùm phần đối tượng trong
frame Hit).

8. Kết quả 008a:

Download tập tin nguồn của ví dụ tại đây.

Kết quả 008b:

Download tập tin nguồn của ví dụ tại đây.

Giải thích:

Frame mang nhãn Up chứa hình dạng button lúc bình thường, đồng nghĩa chưa tương tác
với trỏ chuột.
Frame mang nhãn Over chứa hình dạng button lúc bạn rê chuột lên nó nhưng chưa có
hành động nhấn chuột.
Frame mang nhãn Down chứa hình dạng button lúc bạn rê chuột lên button và đã có hành
động nhấn chuột.
Frame mang nhãn Hit chứa hình dạng button tại một nơi khác, nó làm công việc thay đồi
vùng chuột tác động lên button, đồng nghĩa với hiệu ứng chuyển hình dạng sẽ không xảy
ra khi bạn rê chuột trực tiếp lên vùng này, mà chỉ xảy ra khi bạn tác động gián tiếp lên
vùng đối tượng trong frame Hit.

Sau khi xem xét qua ví dụ một đơn giản, bây giờ chúng ta sẽ học cách chèn mã Action
Script vào button, mặc dù chưa nói qua Action Script lần nào, nhưng cá bạn cứ yên tâm
vì đây chỉ là ví dụ đơn giản và bạn có thể hoàn toàn hiểu được một cách dễ dàng.

Ví dụ 2: Mở một trang nào đó khi nhấn vào button, chúng ta sẽ tiếp tục làm trên cơ sở ví
dụ 008a.

1. Sau khi đã chèn button vào vùng làm việc tại scene1, bạn nhấn chọn 1 lần rồi mở bảng
Action Script ra (nhấn F9).

2. Sau đó hãy chèn vào nội dung đoạn action script như sau:

on (release) {
getURL ("http://www.echip.com.vn/echiproot/html/tutor/flashmx/index.html");
}

3. Hoàn tất bạn export ra file swf và xem kết quả.

4. Kết quả:

Download tập tin nguồn của ví dụ tại đây.


Giải thích:

Dòng đầu: mở đầu là dòng on (release), dòng này làm nhiệm vụ xác định thuộc tính
tương tác với chuột, release đồng nghĩa với tương tác nhả ra (tức phải hội đủ ba yếu tố:
yếu tố thứ nhất người dùng phải di chuyển trỏ chuột lên button trước, yếu tố thứ hai là
người dùng phải nhấn lên button và cuối cùng phải nhả nút chuột).

Chắc bạn thắc mắc tại sao phải nhấn lên button mới thực hiện hiệu ứng chuyển trang mà
tại sao khi nhấ lên các vùng khác.

Câu giải đáp nằm ở bước một, xin hãy luôn nhớ rằng, đoạn action script mà bạn chèn vào
chỉ trong phạm vi một khung hình chứa button chứ không phải toàn bộ vùng làm việc.
Vậy ta có thể rút ra kết luận, action script chèn vào từng đối tượng riêng biệt.

Dòng thứ hai: getURL


("http://www.echip.com.vn/echiproot/html/tutor/flashmx/index.html") dòng này được kẹp
giữa dòng ba và dòng đầu tiên. Vậy nó sẽ mang nội dung kết nối đến một URL nào đó,
vậy dòng 1 mang nội dung khai báo đồng nghĩa dòng ba mang nội dung kết thúc sự kiện.

Thêm: thực chất bạn có thể bỏ dấu "{" khi mở đầu sự kiện và thay thế "}" bằng dòng
cuối kết thúc là End on, hai kiểu viết code này tương tự như sử dụng C# và VB, bạn có
thể viết theo sở thích của riêng mình.(lưu ý cách viết code này chỉ có hiệu lực từ Flash 6
trở xuống).

Chúng ta vừa xem xét cách chèn mã action script thực hiện hành động nhảy đến một
trang nào đó, giờ chúng ta sẽ tiếp tục phát triển ví dụ 9, nhưng thay vì nhảy đến một trang
nào đó, ta sẽ nhảy đến một khung hình nào đó ngay trong file flash.

Ví dụ 3: Nhảy đến một khung hình quy định.

1. Đầu tiên chúng ta sẽ tạo một chuyển động của chú gà con như những ví dụ của bài
khung hình chuyển động (thông số tôi dùng trong ví dụ này như sau: tốc độ frame/giây:5;
số khung hình chuyển động là 24, khung hình thứ 25 là khung hình khóa, tức echip sẽ
chuyển động trong 5 giây). Chuyển động này chúng ta sẽ tạo trên một layer khác, và khóa
cuối cùng (frame 25) bạn cần phải thêm đoạn action script sau:

gotoAndStop(25)

Lý do mà tôi thêm đoạn script này là để chuyển động sẽ tự động dừng, không lặp lại khi
Flash player chạy qua 25 frame. Ở các phiên bản trước Flash MX thì điều này là không
cần thiết vì khi export, Flash sẽ hỏi bạn có muốn đoạn hoạt cảnh của mình âập lại không;
bạn chỉ cần chọn không là được, còn trong phiên bản này, điều này đã được bỏ hẳn, vì
vậy bạn buộc phải chèn đoạn script này để dừng hẳn đoạn phim.
2. Bước tiếp theo ta insert frame tại khung hình 25 của layer chứa button (trong ví dụ này
layer chứa button là Layer1 nằm trên layer chứ hoạt cảnh tức Layer2), và thay đoạn code
trước bằng đoạn code sau:

on (release) {
gotoAndPlay(1);
}

Sau đây là hình khái quát cho hai bước đầu:

3. Hoàn tất bạn export và xem kết quả.

4. Kết quả:

Download tập tin nguồn của ví dụ tại đây.

Sau khi chuyển động thực hiện xong hoặc đang dang dở, bạn nhấn button echip để thực
hiện chuyển động lại từ đầu.
Giải thích:

Tại bước một như bạn đã thấy, chúng ta phải thêm đoạn script gotoAndStop(25) tại frame
cuối cùng của Layer2, như tôi đã giải thích nó có tác dụng làm dừng hẳn đoạn phim mà
bạn xem, nhưng như thế là chưa hoàn toàn chính xác mà thực chất của vấn đề hơi khác
một chút. Tôi giải thích như sau, khi Flash Player đọc đến khung 25, nó vẩn chưa dừng
hẳn, mà Flash Player sẽ làm thêm một công đoạn nữa là nhảy đến (goto) khung hình thứ
25 trong dự án của bạn, và dừng (Stop) lại tại đó. Do dự án của bạn chỉ có 25 khung hình
nên vì vậy xem như kết thúc đoạn phim. Do quá trình tính toán xảy ra quá nhanh và
khung hình thứ 25 chỉ có một ảnh duy nhất nên ta không thể nhận ra ôột loạt tiến trình mà
đúng ra nó phải xảy ra theo diễn dịch trên.

Như vậy, tôi không cần nói ra, đoạn script trong bước hai sẽ làm nhiệm vụ gì chắc bạn
cũng biết.

Bài học xin được tạm dừng tại đây, tại bài sau (bài 10b) chúng ta sẽ tiếp tục làm ví dụ.

Trước khi bắt đầu bài này tôi xin khái quát sơ lượt toàn bài trước.
Trong bài trước chúng tuần tự làm 3 ví dụ nhằm thực hành toàn bộ nội dung phần lý
thuyết trong bài 9.

 Ở Vd 1 chúng ta thực hành cách tạo button và tìm hiểu các thuộc tính của nó.
 Sau đó, chúng ta tiếp tục sử dụng Vd1 để làm ví dụ 2 bằng cách đưa nội dung vào
button. Cụ thể chúng ta cho hành động nhảy đến một URL nào đó khi nhấn
button.
 Tiếp đến, ở Vd 3, chúng ta đưa hành động nhảy đến một khung hình nào đó đồng
thời bắt đầu thực hiện chạy tiếp hay nhảy đến một khung hình nào đó và dừng hẳn
tại đó.

Vậy trong bài này, tôi xin được tiếp tục phát triển từ Vd3. Cụ thể, tại Vd này tôi sẽ cho
hành động nhảy đến một scene (phân cảnh) khác khi ta nhấn vào một button tại một
button tại scene hiện thời. Đây chính là ví dụ thực hiện điều mà tôi nói về công dụng của
scene, với kĩ thuật này bạn hoàn toàn có thể áp dụng chúng để nhảy đến các màn chơi
trong game do mình tạo bằng Flash với mỗi màn chơi tương ứng một scene.

Đề làm điều này ta cần chuẩn bị một số kiến thức từ các bài trước như sau:

 Cách tạo khung hình chuyển động (bài 6a).


 Cách tạo khung hình chuyển động theo lớp Guide (bài 8).
 Cách tạo mộf Scene và chỉnh sửa thuộc tính (tên scene chẳng hạn) của scene đó
(bài 9).
 Cách tạo button và tinh chỉnh nội dung button đó (bài 9 + 10a).
 Chèn action script vào button (bài 10a).
Ví dụ 4: Nhảy đến một khung hình trong một scene khác
Cũng giống như ví dụ 3, ở scene hiện tại chúng ta tạo một khung hình chuyển động cho
bé Chip bay từ trái sang phải.

Đồng thời ở ví dụ trước, bạn cũng đã tạo một button cho phép nhảy về khung hình đầu
tiên thực hiện lại chuyển động. Bây giờ tôi cần bạn tạo thêm hai button nữa với nội dung
tùy thích, hai button này lát nữa sẽ phục vụ cho động tác nhảy đến một khung hình nào
đó trong một scene khác.

Như bạn thấy trong hình, tôi tạo 3 button tổng cộng trong thư viện, một là rePlay phục vụ
cho thao tác nhảy về khung hình đầu tiên trong scene hiện tại, một là gotoScene1 để nhảy
đến khung hình đầu tiên trong scene thứ nhất và còn lại là gotoScene2 để nhảy đến khung
hình đầu tiên trong scene thứ hai mà tôi sắp tạo đây.

Nếu bạn không muốn xem lại từng bước trong bài trước, bạn có thể xem khái quát nội
dung của scene mang tên Scene 1 trong hình dưới đây.
Tiếp đến bạn tạo một Scene mới bằng cách chọn trên thanh menui: Insert/Scene. Tôi giữ
nguyên tên Scene 2 trong ví dụ, nếu bạn muốn đặt lại tên khác cũng không sao nhưng tốt
nhất là không nên đặt quá dài.

Sau đó tôi chuyển qua Scene 2, lúc này là một khu vực làm việc hoàn toàn mới tinh, chưa
có nội dung. Tại scene này tôi tạo 4 lớp:

1. Lớp Background: Lớp này chỉ chứa nội dung màu nền của Scene 2 (trong ví dụ
là màu xám), sở dĩ tôi tạo lớp này là để cho bạn dễ dàng phân biệt hai scene với
nhau.
2. Lớp Guide: Layer: chứ nội dung đường cong làm nhiệm vụ định đường đi cho bé
Chip. Nếu bạn nào quên cách tạo lớp này có thể xem lại các bài trước mà tôi nhắc
ở trên.
3. Lớp motion: chứa chuyển động của bé Chip. Lưu ý rằng để bé Chip có thể
chuyển động đúng đường đi, bạn cần kéo bé Chip đặt vào mỗi đầu đường đi ứng
với khung hình đầu và cuối trong scene, và đồng khi kéo, bạn sẽ thất có một tâm
tròn nhỏ ở giữa hình bé Chip, bạn phải đặt tâm này dính vào mỗi đầu đường đi,
nếu bạn không làm vậy thì chắc chắn bạn sẽ không thể làm bé Chip bay theo
đường cong được, và đây cũng là lý do mà có khá nhiều bạn gửi thư hỏi tôi tại sao
không thực hiện được chuyển động theo Lớp Guide. Bạn nên lưu ý điều này.
4. Lớp Button Layer: lớp này đơn giả chỉ để chứa các button mà tôi đã tạo.

Sau khi đã tạo xong nội dung cho hai scene ta bắt đầu chuyển qua thao tác với các button
đã được chèn trong hai scene.

Như ví dụ trước, ở scene có tên Scene 1 tôi chèn đoạn mã tương tự như Vd3 nhảy về
khung hình đầu tiên.
Sau đó tôi tiếp tục chèn đoạn action script sau cho button gotoScene2 đặt trong Scene 1

on (release) {
gotoAndPlay("Scene 2", 1);
}

Đoạn mã trên tương tự như đoạn mã trước nhưng giờ chỉ thếm duy nhất một chuỗi tên
scene đặt trong ngoặc đơn dòng hai: "Scene 2", như vậy đoạn code này sẽ thực hiện động
tác nhãy đến khung hình đầu tiên của scene có tên Scene 2 và thực hiện động tác chạy
tiếp những khung hình còn lại một khi có động tác nhấn chuột lên button.

Tương tự ta chèn đoạn mã có nội dung gần giống vậy cho button gotoScene1 trong Scene
2.
Hoàn tất bạn sẽ có nội dung đoạn Flash như sau:

Download tập tin nguồn của ví dụ tại đây.

Đến đây, nếu bạn có thể thực hiện toàn bộ các ví dụ từ 1 đến 4 hoàn hảo, bạn sẽ có thể
sáng tạo được rất nhiều thứ từ các ví dụ đó. Cũng chính vì lý do này, nên tôi không thể
hướng dẫn bạn toàn bộ các ví dụ vì tất cả phụ thuộc vào sự sáng tạo của bạn, thay vào đó
tôi sẽ đưa ra một bài tập kèm theo hình ảnh minh họa từng bước và tập tin nguồn nhằm
tiết kiệm thời gian đọc của bạn.

Bài tập: Tạo trình chơi ảnh đơn giản với tất cả ảnh nằm trong tập tin Flash, yêu cầu trình
chơi ảnh có hai nút nhấn để di chuyển giữa các bức ảnh với nhau.
Download tập tin nguồn của bài tập tại đây.
Download tập hình ảnh các bước tại đây.

Lưu ý trong các bước trình bày bài tập bằng hình ảnh có một số mẹo để tiết kiệm thời
gian của bạn trong việc chèn ảnh và button cho từng frame, cũng như tạo mới một button.
Do đó bạn nên lưu ý và tận dụng chúng cho công việc của mình.

Đồng thời tôi cũng mong rằng bạn nào đã hiểu và có khả năng trình bày qua văn bản bài
tập trên, có thể gửi thư kèm phần văn bản trả lời bài tập cho tôi; tôi sẽ giúp bạn xem xét
và đưa vào các bài sau nhằm giúp các bạn khác chưa thực hiện được có thể nhờ vào kinh
nghiệm của bạn để hoàn tất bài tập này.

You might also like