Ebook hướng dẫn và thiết kế website bằng macromedia flash phần 2 TS hoàng vân anh

Chương 4 sẽ chỉ hướng dẫn bạn hai cách viết Script đoTi giản mà vẫn hiệu quả đó là cách viết gắn Script với một đối tượng symbol trong khung thiết kế và cách thứ hai là gắn Script điều k

Chương 4

HUỚNG d A n Vlếr cAc Mfi «aiO N cơ b A n

Trong phần này chúng ta sẽ thực hiện những công việc sau:

Các khái niệm trong ngôn ngữ lập trình AS.

Sử dụng bảng Action Panel trong việc viết AS.

Sử dụng bảng Movie Explorer hỗ trợ việc lập trình.

Viết actions cho Frame, Symbol như thế nào?

Các bài tập ví dụ.

Các nội dung trước đã giới thiệu về cách viết Actionscript như thể nào Chương 4 sẽ chỉ hướng dẫn bạn hai cách viết Script đoTi giản mà vẫn hiệu quả đó là cách viết gắn Script với một đối tượng symbol trong khung thiết

kế và cách thứ hai là gắn Script điều khiển một frame bất kỳ trong thanh thước thời gian Timeline Đó cũng là cơ sở để bạn nắm được kiến tìiức cơ bản để làm các bài tập phía sau

Nhưng trước khi bắt tay vào làm các bài tập ví dụ này ta cần làm quen một sổ khái niệm về các đối tượng trong Action Script

4.1 Các khái niệm trong ngôn ngữ lộp trình fìS

Actions: là một dãy các lệnh nằm ừong các file SWF Mỗi một file

SWF có thể chứa từ một đến nhiều lệnh tùy tìieo chức năng của ứng dụng được xây dựng Nhiệm vụ của nó là điều khiển frame (khung hình), label (nhãn), một đối tượng nào đang chạy

Boolean: những biến được gán kiểu Boolean bao gồm hai giá frị ứiam

số là True (đúng), False (sai)

Classes : là các lớp mà người lập trình AS tự định nghĩa ra Nó là một

kiểu định nghĩa riêng dành cho lớp đối tượng nào đó Đê định nghĩa các class (lóp), sử dụng từ khoá class và nó được tạo trong một file AS

63

Events', là các actions (hành động) hay còn gọi là các sự kiện xảy ra

trong khi file SWF đang chạy

Expressions: chứa các toán tử và toán hạng Ví dụ trong phép toán

X + 2 thì X và 2 là toán hạng còn phép tính + là toán tử

Function (các hàm) : Mỗi hàm bao gồm một khối các mã lệnh có thể

sử dụng lại được Các hàm này có thể được gán với một tham số nào đỏ và trả về kết quả là một giá trị

(variable), một thuộc tính (properties), một đối tượng (object), một hàm (function), một cách thức (method) Ký tự đầu tiên của các tên gọi này phải

là một chữ cái, dấu gạch dưới (_), hay dấu dollar ($)

Instances: là các đối tượng phụ thuộc vào một lớp nào đó Mỗi một

đổi tượng loại này trong một lớp đều chứa tất cả các thuộc tính và phương thức hoạt động của lớp đó

file FLA (hay file SWF) Các tên này được người thiết kế đặí cho các đoạn phim (movie) và các nút (button) Properties Panel Và tên của chúng được sử dụng ữong đoạn mã Script Mồi một đối tưọng được gọi là instance này được sinh ra tò một đối tượng symbol gốc Mỗi đối tượng gốc này có thể có nhiều instance nhưng mỗi một instance này nếu nằm trong một file FLA thì chúng chỉ có duy nhất một cái tên Và không được đặt trùng tên với các đối tượng khác

Keywords: Là các từ khoá có ý nghĩa đặc ưưng riêng khác nhau Ví dụ

từ khoá Var cho phép định nghĩa một biến mới.

Methods: Là các hàm được kết hợp với một lớp nào đó Khi sử dụng

chúng, người sử dụng chỉ việc truyền tham sổ vào

Objects: là các đối tưọng được xây dựng để thực hiện một công việc

nào đó trong quá trình lập trình

Properties- Các thuộc tính của các đối tưọng.

Variables: Các biến được sử dụng để lưu trữ dữ liệu.

4.2 Sử dụng bỏng Rction Ponel trong việc viết RS

Bảng Action là bảng cho phép người thiết kế có thể viết và sửa các mã Script để gán nó vào một đối tượng nào đó hay một frame Bảng này được

chia thành ba khu vực khác nhau: Action Toolbox, Script Pane và Script Navigator Trong bảng Action Panel có thêm một số các nút chức năng như gợi ý, tìm kiếm, thay thế, hiển thị số hàng trong đoạn script giúp bạn có thể tận dụng các hỗ trợ để viết các đoạn Script nhanh và hiệu quả hơn.

Để hiển thị bảng Action Panel (hinh 4.1), vào menu Windows -

Development Panels — Action hoặc nhấn phím F9.

Script pane: là khu vực để viết các đoạn mã chương trình Có hai cách

để viết mãchưomg trinh:

■ Cách 1 : Sử dụng chuột trái kéo thả và gắp các lệnh từ khu vực

Action Toolbox vào khu vực Script Pane (hình 4.2)

ActionScrÌpt 1.0 & 2.0

[¡0 Timelỉne Control

(ẵ) gotoAndPlây goloAndStcfflu

với cách viết này Mặc dù các câu lệnh script không phức tạp và khó nhớ nhưng nếu chỉ phạm những lỗi nhỏ nhất như nhầm lẫn giữa chữ in hoa và chữ in thường thì câu lệnh khiến cho ừình duyệt không dịch và cũng Idiông thể thực hiện được

Có một đặc điểm chưong trinh hỗ trợ việc lập trình bàng cách gợi ý các tham số tiếp theo của một câu lệnh khi bạn gõ đúng lệnh Ví dụ ở hình 4.3, với câu lệnh cho phép khung hình đang được hiển thị chuyển đến khung hình do người lập trình tự thiết !ập trong câu lệnh này:

gotoÁndPlayO chướng trình sẽ gợi ý về tham số tiếp theo là sổ frame nào

hoặc số thứ tự của frame nằm trong Scene nào Nhưng nếu bạn viết nhầm câu lệnh này thì dòng gợi ý sẽ không hiện lên

H/n/j 4.4 Cách viết Script sai

Điều này ứtực sự là một khỏ khăn khi mới làm quen với ngôn ngữ AS, tuy nhiên hoàn toàn cỏ thể khắc phục được khó khăn đó nếu ta kiên trì luyện tập viết các lệnh với bảng Action Toolbox trước Sau một thời gian bạn sễ có kinh nghiệm và nắm được các quy tắc về viết lệnh

Action toolbox: Bảng náy chứa toàn bộ các lệnh được phép viết ưong

Flash Có thể coi nó giống như một cuốn từ điển lệnh Action toolbox được quản lý theo hình cây thư mục Có rất nhiều hạng mục khác nhau được phân chia theo tửng chức năng riêng (hình 4.5) Trong mỗi mục bao gồm rất nhiều lệnh và câc lệnh này cho phép bạn có ứiể kéo và ứiả vào trong vủng Script Pane

67

ị iic tlo r is - P rỡ íiíc

■ AdlonScript 1.0 6« 2.0 (p3 Global Functions

V ị

/( p j Timeline Control@ goỉoAnđPlay I - ^— i li - Ị

— @ goioAndsiop fu n c tio n s that control movie playbackj

'1 2

g o t o A n d P l a y (

@1 nexlFrame

@ nexỉScene

@ play (2) prevFr^me

@ prevScene

@ stop

@ stopAllSounds Browser/Hetwork

Code Hints: là các dòng chữ nằm trong bảng màu vàng đi kèm theo

khi thao tác vối các lệnh hoặc là các bàng lệnh tham số đi kèm đổi tượng khi ta gõ vào câu lệnh chính hay tên đối tượng nào đó của nó Nó là dòng chữ gợi ý về cách viết cũng như sử dụng Gác tham số cho các lệnh đang thao tác Tuy nhiên nếu chương ữình không hiện các dòng Code Hints này thì có thể thiết lập nó theo cách sau đây:

disable (tắt) chức năng hiển thị Code Hints

Hình 4.6 khoanh vùng có sự lựa chọn Code Hints

Category General ActionScrlpt Auto Format Clipboard Drawing Text Warnings

Reload modified Flies: Prompt Syntax colors: 0 Code coloring

Foreground; H Keywords: H

V ▼ Actimis - Frame

(|lj TimeBne Contrd

gotoAndPliy goloAndStop

^ n«xtFr»m«

^ nexiScene

@ pUy prevFrdme

Script Navigator: Trong bảng Action Panel, nó được sử dụng để ửiể hiện

mối liên kết giữa các đổi tượng ữong file Flash và các đoạn mã Script gắn kèm (hình 4.9) Nếu trong quá ữình kiểm tra hay muốn sủa lại các đổi tượng hoặc các đoạn Script, ta có thể click chuột vào tên tiêu đề của đối tượng đó

Hình 4.9

Chức năng cùa các biểu tượng trên thanh công cụ Toolbar:

Bảng này có nhiệm vụ quản lý, tìm kiếm vả tập hợp tất cả các đổi tượng dạng Text, Symbol, Sound, frame, layer và các action Nó cho phép người sử dụng quản lý các đối tượng trên theo từng bảng nhỏ và có thể ừuy cập nhanh tới đối tượng đố frong một file Flash theo từng mục riêng của nổ

Đe hiển ứiị bảng Movie Explorer, thực hiện các thao tâc sau:

Chọn menu Window - Other Panels - Movie Explorer Bảng Movie

Explorer sẽ hiện lên như hình 4.10.

71

Ta đang đề cập đến việc bảng Movỉe Explorer hỗ trợ trong việc lập trình như thế nào Chú ý tới chức năng Hiện các đối tượng Scripts ừong hình 4.10 Trong bảng này sẽ liệt kê tất cả các mã script được viếtữong chương trình Có thể mã đó viết cho đối tượng frame hoặc có thế viết cho một đối tượng Symbol (bao gồm Movie Clip, Button) Khi click vào biểu

trình của Script này (hình 4.11)

ịí # Hovle ÉKplbr^

A □ ỉ;âi;

Frndi

f i c bum SHI iic SHI

i i c muus

i i c Poc AcMonsfor proydssSar onClipEvent (load) \

total ^ joot.getSytesT otalO ;}

onClipEvent (enterFrame) \

b «ded = j-oot.getBytesLoadecK);

percent *= lnt( loaded j total * lOJ);

SB ’*1 riflHftH ’■ + nf.rrftnl' + Scene 1 -> layer -> Frama 1 -> progressBar

•8: > ^ I 80.

'~ỏnCUpívẽnV Tìõãăr ”«' ^

t o t « l • ir<in», oi»r I

lls- Poc

onC% )C^«« { (oot getPytMToỉâ«}:

4.4 Cách Viết actions cho Frame, Svmbol

Như đã nói ở phẩn đầu euổn sách, Actionscript có thể viết để điều khiển rẩt nhiều đổi tượng Nhưng trong nội dung yêu eầu kiến thức của cuốn sách này sẽ hướng dẫn cách viết Script cho hai đổi tượng mà yẫn đạt hiệu quả cao khi bạn muốn làm Project hoặc eác bầi tập lớn về Website, đỏ

!à các đối tượng sau đây:

Frame có nghĩa là khung hình Trên thanh thước thời gian Timeline có chứa một dãy các khung hình có đánh số thứ tự Khi các đoạn Movie Glip (hay cởn gọi nôm na là các đoạn phim) chuyển động, người ta sẽ dùng thanh thước này biểu đạt trạng thái thời gian và tốc độ chuyển động cùa đoạn phim đó Thường khi viết script loại này gắn với một frame thì frame

đỏ sẽ có ehức nẫíig điều khiển đoạn Movie khi đoạn Movie chạy đến vỊ trí

của frame nàv Những script loại này thường được sữ dụng trong các điều khiển như sau: Cho phép Play (chạy) Stop (dìmg), Loop (lặp lại), đi chuyển hoặc dừng chuyển động không tuân theo thứ tự của các khung hình trên thanh thước thời gian Timeline mà tuân theo sự chì định do đoạn Actionscript đưa ra

Cách thức để thêm Script vào khung hình như sau : Trỏ vào Frame cần gắn đoạn mã Sau đó click phải chuột, màn hinh sỗ xuất hiện menu với các lệnh được phép ísử đụng eho khung hinli đó (hỉnh 4.13) Đi chuyển xuống dưới đáy cúa menu sẽ thấy xuất hiện lệnh Action Kích hoạt vào lệnh này, con trỏ chuột tự động di chuyển vào vùng viết mã của bảng Action Panel., đây là nơi bắt đầu viết đoạn mã điều khiền

Đưa ra một minh hoạ eụ thể hơn Ví dụ, khi muốn đoạn movie clip '

hinh này Nếu không nhớ lệnh này, ta có thể sử dụng bộ lệnh gợi ỷ trong bàng Action Công việc của bạn lúc này sẽ là lìm kiếm lệnh đó nằm trong

bộ lệnh nào rồi kéo thả nó vào vùng viết mã Script

Bạn có thể làm theo gợi ý nliư sau để kiểm soát và tìm kiếm các lệnh đon giản, clễ nhớ : ở đây ta Gần điều khiển một khung hình trên tbanh íhựởc thời gian ĩHmeline Ta sẽ thấy bộ lệnh điều khiển Timeline Control tPOing

bộ lệnh GíỊobal Function (hình 4.14) Trên hình 4.13, la sẽ ihấy trong bộ lệnh Timeline Coĩilro! chứa lất cả các điều khiển về trạng thái hoạt động của tìhanh thước thời gian Timeline

o MAcrMT^dia FMsh Professional 8 • [mftin*]

Sỉếỉ«tmntí

f l i t AcỉronScriỊ^ 2.0 Clj»s«s fW|l C o m p ^ Drcctives

Copy Frarrves

Clear Frames Select Al Frames

Hinh4.13

Hình 4.14

Quay trở về với việc viết script cho frame thứ nhất Sau khi gấp thả

lệnh stopO vào trong vùng viết mã chương trình, ta sẽ nhận thấy một sổ

thay đổi trong bảng Movie Explorer Nố xuất hiện thêm một biểu tượng là

Actions for Frame 1 kèm theo lệnh síopộ ở bên dưới biểu tượng

(hìrứi 4.14) Đồng thời lúc này ừên tharứi thước thời gian Timeline xuất

hiện một biểu tượng chữ a được gắn kèm nhằm báo hiệu là frame này đã

được viết mã script điều khiển (hình 4.15)

Tưong tự nếu bạn muốn thực hiện

việc gắn action với các frame khác thì có

thể thực hiện thao tác như trên Có một

điều cần chú ý là trong bảng Timeline

này bao gồm cả chức năng quản lý các

layer (lóp) Mỗi một lóp có thể có độ dài

khung hình khác nhau hay còn hiểu nôm

na là thời gian các hình ảnh của các lóp

xuất hiện có thể xuất hiện cùng một lúc

hay không Nhưng điều này cũng không

làm ảnh huởng đến việc điều khiển hoạt

động cho frame bỏd vì khi đoạn phim chạy đến khung hình có chứa Action,

nó sẽ bị điều khiển bởi đoạn mã đính kèm frame đó cho dù action đó nằm trên lớp nào

■ Viết Script cho Symbol

Symbol là đổi tượng dạng đặc biệt của Flash Một Symbol chửa nhóm các đối tượng con và các đối tượng con này có thể là các hình vẽ dạng

Vector Symbol có ba loại; Bitmap (ảnh tĩnh), Button (nút bấm) và Movie

Clip (đoạn phim) Cả ba đối tưỢng này đều được quản lý chung trong bảng

Library Đe hiển thị bảng này, vào menu Window — Library (hình 4.16) hoặc nhấn tổ hợp phím tắt Ctrl + L.

* conmandi Cortroí miidem Haip

ĩtttííoint

Canponerto Compgrwrt lnw

WtrkỉộộCt í»roJl

HdtParMb

escode

Bảng quản lý Symbol Library

.v: ^

ọi«0ytBírotai{);

' Ü m f é b K i r

7 :i! 8

BHmap

ÉÈtmap

M«rwp

Mmap amap

VMìd í«jnd

Chỉ có hai đối tượng được sử dụng để viết mã Actionscript là button

và movie clip Trước tiên ta đề cập đến đổi tượng button hay còn gọi là các nút điều khiển Chúng được sử dụng như một biểu tượng hướng dẫn người

sử dụng thao tác với các chức năng điều khiển trong một file SWF Trong một Website nếu có nhiều nút bấm xuất hiện cùng một nhóm và bổ ữí theo hàng ngang hoặc hàng dọc thì người ta gọi chúng là menu chức năng (hình 4.17) Nhiệm vụ của từng nút bấm này sẽ là kích hoạt một hành động nào đó mà bản thân nó đã được lập trình sẵn

Crcu< URL

Hình 4.17

Ví dụ cho hình minh hoạ menu hàng ngang này có 5 nút chứe năng khác nhau Khi mỗi nút đirợe bấm vào nó sẽ hiện lên một màn hình ứng với nội dung yêu cầu của nút bấm đó (hỉnh 4.18)

Hình 4.18

Vậy việc thêm script cho các nút bẩm này như thế nào? Việc đầu tiên cần phải làm là đặt vị trí hợp ỉý cho các nút bấm đó Sau đó click chuột trái vào đối tượng trên màn hình thiết kế và kích hoạt bảng Action Panel để bắt đầu viết đoạn mã điều khiển cho nút bấm này.

này tự động xuất hiện một loạt các điều khiển hỗ trợ cho phép gắn kèm với nút bấm này (hình 4.20)

77

' ẽSt * VXW ¿W rt Soẳỹ* T«i “cim m ãm te "c«««! W w »"'M Íịp

aUbềPropmm Otnit*on

Scarw t ->t<yaf 8->Ff«n8 95->biJttar»

có thể dùng bàn phún Ta sẽ liệt kê các điều khiển và tác dụng của nó ừong bảng dưới đây:

Sự kiện

Press Khi người sử dụng click chuột lên nút bấm

Release Khi người sử dụng click chuột lên mặt nút bấm đồng thời

thả chuột ra rollOver Khi người sử dụng di chuột qua mặt cùa nút bẩm mà

rollout Khi người sử dụng di chuột ra ngoài khu vực của nút bấm

mà không cần click chuột dragOver Khi người sử dụng kéo trái chuột trên bề mặt của nút bấm dragOut Khi người sử dụng kéo trái chuột nhưng không đề chuột

trên bề mặt nút bám

Bảng điều khiển sự kiện sừ dụng các nút chức năng của bàn phím

ở đoạn mã trên sẽ là câu lệnh On đi kèm với sự kiện là rollover Tên

sự kiện nằm trong dấu mở ngoặc Tiếp theo sự kiện sẽ là dấu ngoặc { } cho phép viết khối lệnh script trong đó Lúc này ta lại quay frở về với cách viết lệnh thông thường Bạn có thể kéo thả các lệnh tìr bộ lệnh gợi ý ở cửa

sổ bên trái vào cửa sổ viết lệnh

Đổi với cách viết lệnh với Movie clip thì đầu tiên phải chuẩn bị trước

một sổ dữ liệu như đoạn phim trước khi bạn muốn lập trình cho Movie Hãy vận dụng kiến ửiức về animation để tạo ra một đoạn phim đơn giản để

79

thử nghiệm trước Sau này khi đã làm thành Ihục ta có thể sửa hay thiết kể

ra các đoạn phim công phu và phức tạp hơn nhàm tạo ra những sản phẩm đặc sẳc và phong phú hơn

Giả sử đã cỏ đoạn phim và nó đã nằm trong vùng quản lý của Library Bạn hãy tạo một lớp mới và kéo thả nó vào vùng thiết kế (hình 4.21)

•* 1»«««»tú

Khi đoạn phim được kéo vào, thiết kế tiếp hai nút bấm có chữ Play và Stop, đồng thời kéo thả nỏ vào trong màn hình thiết kế và bố trí hai nút này như hình minh hoạ 4.22 Lưu ý là mỗi một đối tượng nên đặt trên một layer khác nhau Điều này sẽ giúp tránh khỏi những lỗi nhầm lẫn đáng tiếc khi nhầm các Symbol với nhau

ti lni«rt MâdVy T««t Canti^A Cortfoi VM»» Ho(p

Tiếp theo, ta sẽ thêm các script vào hai nút bấm này Ta thực hiện các bước sau:

màn hình thiết kế ta cần đặt tên cho nó Do nguồn gốc của đoạn phim này lấy ra từ trong Library nên tên của nó chỉ có tác dụng quản lý trong chính cửa sổ đó Còn khi đã xuất hiện trong màn hình Scene (khung cảnh đang

thiết kế) thì lúc này tên cùa nó được quản lý bởi ô Instance name Đe đặt được tên cho Instance name, mở rộng cửa sổ Properties ở phía dưới và đặt tên cho đoạn phim này ở đây tạm đặt tên nó là testl (hình 4.23).

H ìn h 4 2 3

sau đó bấm vào nút có biểu tưọng hinh tam giác ở góc trên trái của bảng Action để mở bảng hoặc có thể nhấn nhanh phím F9 và thêm đoạn mã code sau với chức năng điều khiển nút bấm PLAY

On (release) { testỉ.playO;

ĩ

ActionScript l.o & ¿,0

sau khi trồ chọn nút bấm này

On (release) {

testỉ.stopO;

}

Cả hai nút bấm trên đều sử dụng sự kiện là On (Release) có nghĩa là trỏ chuộl bấm vào rồi thả ra để điều khiển đoạn phim chạy hay dừng Đe kiểm tra kết quả công việc, nhấn tổ họp phím Ctrl + Enter Ket quả màn hình hiện ra như hình 4.25: khi bạn nhấn phím STOP đoạn phim sẽ dừng lại

và khi bấm PLAY nó sẽ tiếp tục chạy

có thể sử dụng cho các bài tập lớn ở chương tiếp theo.

Bài tập 1: Thiết kế file SWF theo mẫu sau

- Tạo một đoạn chuyển động cho hình ngôi sao.

- Tạo một nút bấm có hai ừạng thái: PLAY và STOP Nếu di chuột lên mặt nút sẽ hiện lên chữ STOP còn bình thường nút mặc định là chữ PLAY

- Chức năng của hai nút này là di chuột lên mặt nút sẽ làm đoạn phim dừng lại Neu di chuột ra ngoài mật nút thì đoạn phim sẽ tiếp tục chạy

Cách iàm bài tập 1:

Bật bảng Properties trỏ vào nút Option -> xuất hiện bảng ehọn để

thiết lập cho đa giác này thành hình ngôi sao (hình 4.26)

Bảng Tool Setting xuất hiện với ba lựa chọn Bạn tt-ỏ vào 5 Style để

lựa chọn cho hình đa giác là Star Click chuột vào ô Nurtiber of Size để lựa

chọn số cạnh cho hình ngôi sao này là 5 Đồng thòi chọn màu tô cho nền và viền của hình ngôi sao

Đồng thời đật ngôi sao này trên một layer (lóp) có tên li ngoisao

(hình 4.27)

H ìn h 4 2 7

đoạn chuyển động cho ngôi sao di chuyển từ phía bên ữái sang phía bên phải màn hình đồng thời nó vừa di chuyển vừa xoay tròn:

Trên hình 4.27, tại thanh thước Timeline, tất cả các đối tượng đều

những đối tượng đó sẽ được lấy hình ảnh của nó tại khung hình này (hình

ngôi sao sang phía bên tay phải Có thể nhấn chìm phím Shift để căn cho việc di chuyển thẳng theo hàng ngang (hình 4.29)

85

Trỏ chuột vào tên lóp ngoisao ữên thanh thước thời gian Timeline

để chọn toàn bộ các hình có trong layer này đồng thời mở rộng bảng

Properties ở phía dưới để thiết lập các thông số chuyển động clio đối

tượng hình ngôi sao (hình 4.30)

Svnc: f'w* w v<r(««

N» »unđ sriectoỉ

H ìn h 4 3 0

ứiLìữ ồ«

Trong bảng Properties, ta sẽ thấy ngay mục chọn lựa Tween

Đây là mục cho phép đặt trạng thái chuyến động cho đổi tượng ngôi saọ

Bạn click chuột vào hộp chọn và lựa chọn Motion đồng thời trong mục tích

vào mục kiểm chọn Rotate, thiết lập giá trị ở ô đó là GW nếu muốn hình

sao quay ngược chiều kim đồng hồ (hình 4.31)

l ô b d type:

t

Èasa;

otiofi V , p l& o ie V Ị ẩ i, J V 1 Htítes

^ Quay lại với thanh thước thời gian Timeline Nhìn trên hình 4.31,

nếu từ frame 1 đến frame số 50 xuất hiện các đường gạch ngang đứt đoạn

có nghĩa là chuyển động bạn lảm vẫn chưa hoàn tất nên nó chưa thực hiện

số thao tác nữa Vậy đây có phải là một lồi thiết kế không và khắc phục nó thế nào khi hình ngôỉ sao vẫn chưa xoay được? Đế lý giải điều này bạn cần hiểu thêm kiến thức về chuyển động trong Flash Trong Flash cổ hại trạng thải thiết lập chuyển động là : Motion và Shape Để thiết kế chụyên đông Motion, tất cả các hình ảnh cùa nỏ nên đưa hết về chế đậ Group (nhóm) còn đổi với chuyển động Shape, tất cá các hình ảnh đế ở chế độ ảnh Vector Chính vi điểu này nên nhiều người hay nhầm lẫn và nghĩ rằng mình đã thiết

đoạn ữên thanh thước Timeline Để khắc phục tình trạng này rất dơn giản,

ta trỏ chuột vào frame đầu tiên của layer ngoisao đồng thời nhấn tổ hợp phím Ctrl + G hoặc vào menu Modify - Group chương trình sẽ ứiựe hiện việe nhóm các đối tương được chọn (hình 4.32)

87

■«¿¿'■■¿iwt'lSfV Urt''oinnini'''¿«¿rti Wwdw' Hitp

H ìn h 4 3 4

Công việc cuối cùng cần làm để cho ngôi sao này chuyển động đúng với trạng thái Motion, nhấn chuột một lần nữa vào tên lớp của nó ừên thanh thước thời gian Timeline Lúc này các đường gạch ngang éên các frame biến mất và thay vả đó là mũi tên kéo dài từ frame 1 đến frame số 50 (hình 4.35)

Hình 4.35

■ Bước 5: Thiết kế một núi bấm có hai trạng thái PLAY và STOP

Vào menu Insert — New Symbol (hinh 4.36) hoặc nhấn tổ hợp phím Ctrl +

chọn Button rồi nhấn OK để tạo ra một symbol button mới

thước Timeline có một layer với bốn trạng thái khác nhau là : Up, Over, Down, Hit Bốn trạng thái này chính là các trạng thái hiển thị khác nhau khi người sử dụng tác động chuột lên nút bấm

|0 Mi>c ronvediA iFldsb ProfiiSsiortAl^

Rte Edit Vtew Insert M o d fy Text Commands Control Window Help

thành nút STOP thì bạn đặt ở trạng thái Up chữ PLAY và trạng thái Over chừ STOP Còn hai ữạng thái còn lại có thể để mặc định Công việc thiết kế nút bấm này sẽ như sau;

Trỏ chuột vào Type tool trên Toolbox, gõ chữ PLAY ừên nền màn hình thiết kế (hình 4.39)

Sử dụng công cụ Rcctangie Tool frên Toolbox để tạo khung cho nút bấm Neu muốn hình nền màu trắng thì đặt cho phần Fill là None Color

Trỏ chuột tiếp sang trạng thái

trạng thái mới này Nếu chữ PLAY xuất

hiện thi xoá chữ này và thay vào đó bằng

chữ STOP (hình 4.41)

Hoàn thiện xong quá trình thiết kế

nút bấm, bạn ừỏ chuột vào biểu tượng

Scene 1 trên ửianh thước Timeline để trở về

Trỏ chuột vào biểu tượng Scenel để quay trở lại màn hình thiết kế chinh

l’ L*\Y

Library Bạn tạo ra một layer mới rồi sử dụng phím trái chuột kéo và thả nó

nằm phía dưới hình ngôi sao trong màn hình thiết kế Việc đặt Instance

name cho nút bấm lúc này là không cần thiết nên sau khi đặt vị trí cho nút

bấm xong ta tiến hành viếl mã script cho núl bấm này điều khiền việc chuyến động cho hình ngôi sao Irên.

Ỡ MacrwiwOU Fteih s - [tevtỉ]

ĩ đ t View lrw « ỉ M otify T ext Cơtnmand« Cor*fO< WtkJow Help

Giải thích cho đoạn mã này như sau:

- Nút bấm này có hai sự kiện xảy ra: ihứ nhất là di chuyển chuột lên trên vùng mặt nút và ngoài vùng mặt nút

- Mỗi một sự kiện bao gồm một lệnh điều khiển Cụ thể ờ đây là khi di chuột lên mặt nút thì nhãn cùa nút sẽ chuyển thành chữ STOP và đoạn phim

sẽ dừng lại còn khi di chuột ra ngoài mặt nút thì nhãn của nút sẽ hiện ra chữ

trên và không được thiếu các dấu đóng mở ngoặc hoặc chừ cái in hoa, in

91

thường Điều này rất quan trọng vì nếu viết sai hay thiểu thì chương trinh có thể không chạy hoặc báo lỗi luôn Neu không tự tin với cách viết thẳng trực tiếp thì có thể kéo thả các lệnh trong bộ lệnh gợi ý Với hai lệnh ở trên bạn có

thể tìm trong bộ lệnh Global Functions - Timeline Control.

Nó là một sự gợi ý rất tốt và giúp viết mã nhanh hơn và chuẩn xác hơn (hình 4.44)

í 'T Actions

A c tìo n S c rip e 1,0 & 2.0

ỉịO Globíl Func»k>nĩ

fiWiI Conversion Functions

Movie Clip Control

»n Gbbiỉ PropiftHB G bbiỉProp

gì không Bạn nhấn tổ họp phím Ctrl + Enter hoặc vào menu Control —

Test Movie để kiểm tra kết quả bài tập này (hình 4.45).

Q Maciomedta Flash ProiSs^ftai 8

-ẽĩe' E<i' yỈ8w' lns«t’ H o S y''Ìíă ''''’cơí^wds''"c8fíírol' Wfrxtoi*'

Stop Ftjriwri One Flaw Step Backward 0 » frame

0H+&*«

arl+SWt^«*Bf

Cttt+A»+6riw

Delete ASOFtes ữetete A50 Fiw and Test Movie

Hình4.45

Hình 4.46 là hình ảnh minh hoạ lúc đoạn phim đang ở ữạng thái chạy bình thưòng.

Bài tập 2: Thiết kế một album ảnh

Yêu cầu của bài tập này nhu sau:

xuất hiện trên thanh thước thời gian Timeline Nếu không muốn thiết kế trực tiếp frên Scene thì cũng có thể tạo nó thành một Movie Clip rồi sau đó điều khiển nó Nhưng điều này sẽ phức tạp và cũng không cần thiết vì bạn đang cần luyện tập những lệnh cơ bản để hoàn thành bài tập này

93

- Bạn tạo ra 4 nút bấm sau: Tua trở về trước , Play , Pause "

thể để album chạy tự động hoặc cỏ điều khiển

Cách làm bài tập 2

gọi album.fla

lượng và cỡ ảnh mà bạn có, hãy thiết lập nó sao cho hợp lý Lưu ý là kích

cỡ màn hình máy tính thông thường hiện này là 1024 X 768 đơn vỊ pixel, vì vậy ỉchông nên để ảnh vượt qua ngưỗng đơn vị này, nếu không thay đổi lại kích cỡ của ảnh thì khi sản phẩm xuất ra sẽ xuất hiện thêm các thanh cuộn trượt dọc và ngang Khi đó, bạn phải dùng chuột để di chuyển thanh trượt mới xem được hết hình ảnh trong album Vậy ta hãy thống nhất thiết lập kích cỡ nền album là 780 X 550 đơn vị pixel để sản phẩm xuất ra sẽ nằm vừa vặn trong màn hình (hình 4.48)

|D<Kuin*nt T«»:

kích thước các hình ảnh này ữong Photoshop hoặc có thế dùng công cụ Transform trong Flash cho cùng cỡ

bộ các ảnh sẽ đựợc bổ trí cùng vị trí trên cùng một layer nhưng bạn không

.ìhải lo về việc xuất hiện của các ảnh này sẽ bị chồng lên nhau bởi vì mồi

Vào menu File - Import - Import to Library (hình 4.49) Lệnh này có tác Jụng là toàn bộ các file ảnh khi được Import (nhập) vào trong file album

;ẽ được đưa vào và quản lý trong cừa sổ bảng Ubrary để sau đó ta có thể céo thả nó vào trong màn hình thiết kế chính

Q M «(rom «dia P lA th Profession0 •

Píe Eck '^ew Modtfy Text Ccxnmariđs Control Wmdow Help Mew

Operi

O p e n from S < e

Open RetPfW Close Cbso AS Save Sdve a(id Compact Save As

Save as Templdt»

SaveAl

import

Export Pubtisli Settngs

Pubiish pfeview Pi/blish

Ctfl+N

c t r l + o

ctfi+w

Cỉrl+Aft+W CUl-fS Qrl+Shtfỉ+S

Open txteinal Libeary Ctrf+Shift+O Import Vtdeo

Uàợe Seỉup

Send E(*ts*ev

H ìn h 4 4 9

Xuất hiện cửa sổ Imprort to Library {hình 4.50) Di chuyển đến thư

3ể lựa chọn nhiều ảnh cùng một lúc, có thể nhấn chim phím Ctrl đồng thời

ihấp chuột vào ảnh được chọn

Tất cả các ảnh vừa lựa chọn sẽ được nhập vào cửa số Library' quản lý (hình 4 51).

và bô trí các đôi tượng ảnh sao cho đẹp măt Việc này sẽ giúp cho bạn chủ động trong quá trình thiết kế và không bối rối khi không biết đặt các đối tượng thế nào cho họp lý Ta sẽ đưa bản phác hoạ đó ra theo mẫu sơ đồ sau:

Khu vực trang trí tiêu đề Album Phần này dành cho các tràng

trí phụ cho album

Khu vực các ảnh trong Album sẽ lần Iư 0

xuất hiện Khu vực các nút bám điều khiển Album

chọn công cụ Type Tool hoặc nếu cầu kỳ hợn, cố thể thiết kế trong Photoshop rồi Import vào thư viện Library,

Nếu sử dụng Type tool để tạo dòng chữ (hình 4.52), có thể sử dụng

thêm hỗ trợ tạo hiệu ứng của chương trình bằng cách chọn dòng chữ vừa

tạo, vào menu Insert - >Time!ỉne Effect -> Effect -> Drop Shadow Màn hinh sẽ xuất hiện cửa sổ Drop Shadow (hình 4.53) Đây là hỉệu ứng

cho phép đổ bỏng hình ảnh eủa đối tượng Bạn thiết lập các tham số ở phía cửa sổ bên trái thật hợp lý Ghú ý sau mỗi lần điều chỉnh tham số nếu muốn

xem kết quả vừa tạo, nhấn vào nút Update Preview ở phía bên phải của cửa sổ này.

Sau khi thiết lập các tham số xong, nhấn nút OK để kết thúc quá trình

và thoát ra ngoài cửa sổ màn hình thiết kế chính Như vậy, ta đã có dòng chữ tiêu đề cho album (hình 4.54)

Flí Cđi Vi** iTMtC HwUfy t*j* Cwwwir»* Cot*rol w»*»5« Heti

kế Đối với các ảnh này nên bố trí trong một khung cố định với kích thước sẵn có Các ảnh này có thể để cùng hoặc khác kích thước Điều này hoàn toàn phụ thuộc vào những dữ liệu ảnh đã Import vào cũng như ý đồ thiết kế của bạn Đe thực hiện công việc này, làm tuần tự những thao tác sau:

Trỏ chuột vào công cụ Rectangle tool tạo một hình chữ nhật không màu nền và có đường viền trên một lớp mới và đặt tên là khung ảnh' (hình 4.55) Vị ữí của hình chữ nhật này chính là vị trí xếp các ảnh Nên chú ý tới khoảng cách của khung ảnh này với mép bên phải của album sao cho không sát nhau quá

chứa toàn bộ các ảnh khi chúng được kéo thả vào màn hình thiết kế chính Trỏ chuột trên layer images để các đổi tượng ảnh đưa vào không bị nằm lẫn ữên các layer khác Sau đó sử dụng hìrih ảnh đầu tiên trong cửa sổ Library kéo thả vào trong vùng khung ảnh được định sẵn (hình 4.56).

về số frame sẽ dùng cho việc này Nếu mỗi ảnh cách nhau 5 frame thì cần đặt 30 frame Nếu vậy cả hai layer có tên là khung ảnh và tiêu đề album

cũng đật chủng hiện hình ảnh tại frame số 30 Nểu không làm thao tác này thì khi đoạn phim chạy chỉ có toàn bộ các ảnh là xuất hiện còn hai layer kia

sẽ chi xuất hiện tại frame đầu tiên rồi biến mất Vậy để lẩy hình ảnh của hai layer này lại khung hình sổ 30, bạn trỏ chuột vào frame sổ 30 tại mỗi hàng

chuột vào frame sổ 30 và chọn lệnh Insert Keyframe từ menu được kíeh hoại (hình 4.57)

Q ria^h Piof.wionai lì frtlbum*!

£< » V«w, ìmeii Moáty Commaciík Cúnctd Window Hefc

số 5 và nhấn phải chuột chọn lệnh Insert Blank Keyframe (hmh 4.58) Đây lả lệnh cho phép tạo ra một khung hình trống cỏ sẵn để sau đó bạn có thể chèn bất kỳ một bình ảnh nào vào frame này mà không bị ảnh hưởng đến hĩnh ảnh của các frame khác trên cùng một layer

Blank Keyframe sẽ đánh dấu bằng vòng ữòn nhỏ rỗng tại frame số 5 (hình 4.59).

Tiếp tục thực hiện công việc chèn ảnh vào frame số 5 này Tương

tự như trên, kéo thả ảnh từ cửa sổ Library vào khung ảnh trong màn hình thiết kế (hình 4.60)

Frame số 15, 20 và 25 cũng làm như các bước ữên để chèn hết số ảnh trong thự viện Library vào Đối với frame số 30 thi không phải chèn

Blank Keyframe vào mà sẽ sử dụng lệnh Insert Keyframe hoặc nhấn

5 frame cuối cùng cho bức ảnh thứ 6

r u ídtt 'v«w lr a v t " i * ^ r lẽiít ’cotiwsndj 'c o ^ o l Wrnk» Haíp

Toàn bộ các khung hình

đâ đựợc chèn hình ảnh vào

H ìn h 4 6 2

(hình 4.62) Hãy căn chỉnh và trang trí sao cho cân đối để kết quả sản phẩm đưa ra sẽ đẹp mắt hơn khi các ảnh lần lượt được xuất hiện Công việc ở

Như đã nói ở trên, trong album này sẽ có 4 nút bấm là: tua về phía trước

này bằng công cụ Toolbox nhưng có một cách đơn giản và nhanh hơn là sử dụng bộ thư viện có sẵn của chương trình Nó sẽ có đầy đủ các nút bấm mẫu cần thiết để lựa chọn

Để kích hoạt thư viện này, vào menu Window - Common

Library - Button (hình 4.63).

101

y <«» ‘'•

a: ►•»«ie 4;

Hình 4.63

Xuất hiện cửa sổ thư viện quản lý các button mẫu của chương trình với các bộ mẫu nút ở đây bạn tìm trong tất cả các bộ mẫu này, bộ nào có chứa các nút bấm có chức năng và hình dạng như trên thì chuẩn bị kéo thả nó vào vị frí của màn hình album và nhớ là nó nằm phía dưới khung ảnh

Tạo một layer mới và đặt tên là button để layer này sẽ chứa hình ảnh các nút bấm được kéo thả vào màn hình album, ở đây, ta chọn bộ nút

phải được di chuyển đến frame số 1 để lấy khung hình Nếu trỏ chuột vào

^ 1^5 buttons wurtded

b u tte « fOuwSed doiAte ' 0 fcuR oM K í g n ơ « ít r t p o í

p

1 ’^ i p b>At«n» tub« doubt»

h buttons tube Rat

?*■ piaybjcKf

j fJnlbli

d íS 5 fc b u tto n »

piayt»d(»at fJnlblueiMck