e) Vùng soạn thảo, lập trình ActionScript :
Để chuyển đổi giữa các cảnh trong chương trình chúng ta sẽ sử dụng các câu lệnh chuyển cảnh của ngôn ngữ lập trình kịch bản này. Trong khung soạn thảo ActionScript, phần soạn thảo nằm ở trung tâm của cửa sổ này. Vùng phía bên trái chứa các lớp thư viện và cây phả hệ. Phía trên khung soạn thảo là hệ thống các công cụ hỗ trợ soạn thảo ActionScript. Nhấn F9 để mở phần soạn thảo
38
f) Các biểu tượng trong Flash :
Biểu tượng là một đối tượng được tạo trong Flash và có thể tái sử dụng. Một biểu tượng có thể được sử dụng trong một movie hoặc import vào thư viện và sử dụng trong một movie khác. Có ba loại biểu tượng là: Graphics, Buttons và Movie Clips. Trong đồ án, các đối tượng có tương tác, chuyển động đều được chuyển thành các biểu tượng, tạo thuân lợi trong quá trình xây dựng chương trình
Biểu tượng là đối tượng được tạo và lưu vào trong thư viện. Nếu một bản sao của biểu tượng đó được sử dụng trong movie thì nó được gọi là một sự thể hiện của biểu tượng đó. Mỗi sự thể hiện của một biểu tượng có một thuộc tính riêng (màu sắc, kích thước, chức năng) khác với biểu tượng tạo ra nó. Mọi sự thể hiện của đối tượng có thể được tạo nhờ vào chức năng kéo thả biểu tượng từ thư viện vào khung trình chiếu. Khi một biểu tượng được chỉnh sửa thì mọi sự thể hiện của nó cũng được cập nhập theo.
H nh 5 : Tạo mới một biểu tượng
Việc sử dụng biểu tượng là phương pháp hiệu quả để giảm kích thước của movie. Những biểu tượng không được sử dụng trong movie, dù nằm trong thư viện thì nó cũng không được tính vào kích thước của movie đó.
39
g) Tạo hoạt cảnh :
Tìm hiểu về TimeLine :
TimeLine là một vùng tương tác để tạo ra chuyển động trong movie của Flash. Để tạo ra chuyển động, TimeLine thay thế từng Frame một theo thời gian, kỹ thuật frame by frame.
H nh 6 : Khung TimeLine
Trong TimeLine, có thể dễ dàng thấy được ba phần chính: Phần quản lý Layer (bên trái), Phần quản lý Frame (phía trên bên phải) và Phần quản lý Công cụ(phía dưới bên phải).
Layer: quản lý các lớp đối tượng. Mỗi một đối tượng trên Layer sẽ có một thanh TimeLine của riêng mình. Trong trường hợp minh họa trên, thì đối tượng trên Layer 1 nằm trên TimeLine phía dưới và đối tượng trên Layer 2 nằm trên TimeLine phía trên.
Thanh TimeLine: chứa nhiều Frame. Khi tạo ra chuyển động, các Frame sẽ lần lượt thay thế cho nhau. Frame sau sẽ thay thế cho Frame trước đó.
Khi làm việc với TimeLine, chúng ta sẽ thường xuyên sử dụng đến hai phím tắt sau đây:
40
Phím F5: chèn Frame vào thanh TimeLine (tương ứng với Insert Frame). Nếu vùng TimeLine trong thanh TimeLine đã được tạo Tween, thì nó sẽ tự động giãn vùng Tween này (chèn thêm Frame vào trong vùng Frame đã tạo Tween, các Frame mới tạo này cũng kế thừa Tween).
Phím F6: chèn KeyFrame vao thanh TimeLine (tương ứng với Insert KeyFrame). Frame cuối cùng khi chèn là một KeyFrame. Với KeyFrame này, ta có thể tạo điểm chốt cho h{nh động trong một movie. Khi kết hợp với Tween, nó sẽ tạo một chuyển động mềm mại cho movie của Flash.
41
CHƯƠNG 4: ỨNG DỤNG PHẦN MỀM ADOBE FLASH THIẾT KẾ MÔ PHỎNG BỐN THUẬT TOÁN SẮP XẾP TRONG DẠY HỌC MÔN
CTDL>
4.1. Giới thiệu phần mềm Adobe Flash và ngôn ngữ lập trình ActionScript 3.0: ActionScript 3.0:
4.1.1. M đí h và đối tượng của hương trình:
Chương trình mô phỏng một số thuật toán sắp xếp cơ bản trong tin học xây dựng trên nền tảng Flash ( ngôn ngữ lập trình Action Script 3.0 )
Với chương trình này sinh viên có thể tham khảo các thuật toán sắp xếp cơ bản được xây dựng một cách rõ ràng,dễ hiểu và sinh động.Ngoài ra, từ đó có thể phát triển với nhiều thuật toán, hay bài toám tìm kiếm hơn, giúp cho sinh viên có thể tự học dễ dàng từ đó nâng cao chất lượng dạy và học CNTT.
Phiên bản này sẽ hỗ trợ 4 thuật toán bao gồm các thuật toán về sắp xếp
Sắp xếp lựa chọn (Selection Sort)
Sắp xếp nổi bọt (Bubble Sort)
Sắp xếp chèn (Insertion Sort) (adsbygoogle = window.adsbygoogle || []).push({});
Sắp xếp nhanh ( Quick Sort)
Đối tượng áp dụng của chương trình mô phỏng là sinh viên đang theo học các trường đại học - cao đẳng chuyên ngành CNTT.
4.1.2. Triển khai ứng d ng:
Áp dụng trong dạy và học môn CTDL như một phương tiện dạy học và phát triển trên môi trường web. Phương tiện dạy học trực quan
Cách tiến hành tạo Flash mô phỏng giải thuật sắp xếp :
Với người dạy: Có thể xây dựng các chuyển động cơ bản trong Flash, từ đó mô phỏng lại quá trình thực hiện
Với người học: Có thể tham khảo phần mô phỏng, bài tập có hướng dẫn. Yêu cầu có sự tương tác
42
Chạy trên một timeline, sử dụng các câu lệnh để chuyển đến các frame
Bây giờ, Code Snippets để tạo các hiệu ứng mà chúng ta đã thảo luận ở trên.
Trước tiên, ta sẽ tạo hiệu ứng Button cho các Menu này. lần lượt chọn Play, sau đó vào Commands > Make Button. Lặp lại điều này cho Help và Result. Ở các Scene Play, Help, Result bạn bổ sung vào dòng lệnh
stop();
vào vị trí cuối cùng của mã lệnh ( ở đây dòng lệnh này là duy nhất )
Tiếp theo, bạn hãy nhấp vào nút Play trên Scene Menu, bấm chọn chức năng Code Snippets. Bạn chọn nhóm TimeLine and Navigation. Tiếp đến, bạn chọn chức năng Click to Go to Scene and Play. Khi đó, Flash sẽ sinh đoạn mã sau
btPlay.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene);
function fl_ClickToGoToScene(event:MouseEvent):void
{
MovieClip(this.root).gotoAndPlay(1, "Play");
}
Cần thay đổi tên của Scene cho phù hợp với Scene sẽ chuyển đến trong dòng lệnh
MovieClip(this.root).gotoAndPlay(1, "đổi tên Scene");
Thực hiện thao tác này cho những chức năng còn lại. Cuối cùng, bạn nhấn tổ hợp Ctrl+Enter để kiểm tra kết quả.
43
4.1.3. Xây dựng kịch bản:
Xây dựng kịch bản:
Xây dựng các hoạt cảnh (scene), sẽ có sự tương tác giữa các hoạt cảnh thông qua các nút, sử dụng các câu lệnh Action Script
Chương trình gồm 18 scene với các biểu tượng, các biểu tượng này được lưu trong thư viện, với các biểu tượng graphic khi thiết kế các cảnh khác nhau mà vẫn muốn dùng các cảnh đó thì chỉ việc sử dụng các biểu tượng có sẵn trong thư viện library.
Scene 1: Trang mở đầu. Do các mô phỏng sẽ áp dụng trong dạy và học môn CTDL> nên giao diện ban đầu sẽ ghi tên môn CTDL>.
Scene 2: Khung menu chính gồm 6 nút: Giới thiệu, Bài học, Mô phỏng, Bài tập, Liên hệ, Trợ giúp. Khi nhấn vào sẽ dẫn đến các cảnh chứa các nội dung tương ứng. Sử dụng các câu lệnh chuyển cảnh gắn với các nút.
Scene 3: Khung Liên hệ: Khi nhấn vào sẽ cho thông tin liên hệ của nhóm tác giả làm chương trình.Mọi thắc mắc về chương trình người học có thể liên hệ với nhóm tác giả thông qua email và số điện thoại, thắc mắc của người học sẽ được giải đáp. (adsbygoogle = window.adsbygoogle || []).push({});
Scene 4: Khung Menu mô phỏng: Đưa ra giao diện 4 nút tương ứng với bốn thuật toán, khi kích vào nút nào thì sẽ dẫn đến cảnh mô phỏng thuật toán tương ứng. Thể hiện quá trình mô phỏng 4 thuật toán được xây dựng trên 4 cảnh (scene).
Scene 5: Khung mô phỏng thuật toán lựa chọn (Selection Sort)
Scene 6: Khung mô phỏng thuật toán nổi bọt ( Buble Sort)
Scene 7: Khung mô phỏng thuật toán sắp xếp chèn ( Insertion Sort)
44
Các khung mô phỏng đều có các nút điều chỉnh tốc độ nhanh chậm, nút pause để người học có thể tự điều chỉnh tốc độ chuyển động sao cho phù hợp để tiện cho việc theo dõi bài học.
Scene 9: Khung menu bài học xây dựng 4 nút ứng với bài học của 4 thuật toán, khi chọn một nút sẽ hiện ra slide bài giảng của thuật toán tương ứng.
Scene 10: Slide bài giảng thuật toán sắp xếp lựa chọn (Selection Sort)
Scene 11: Slide bài giảng thuật toán nổi bọt ( Buble Sort)
Scene 12: Slide bài giảng thuật toán sắp xếp chèn ( Insertion Sort)
Scene 13: Slide bài giảng thuật toán sắp xếp nhanh ( Quick Sort)
Scene 14: Khung menu bài tập: Đưa ra giao diện 2 nút tương ứng hai dạng bài tập cơ bản và nâng cao, mục đích để người học có thể tự đánh giá khả năng nhận thức của mình sau bài học thông qua việc làm bài tập. Người học có thể chọn mức độ bài tập từ dễ đến khó.Ở bài tập cơ bản sẽ là mức độ dễ, kiến thức cơ bản, các câu hỏi ở dạng trắc nghiệm, người học sẽ chọn đáp án bằng cách tích vào câu trả lời đúng, nút Submit Answer sẽ hiển thị đán án đó là đúng hay sai. Ở bài tập nâng cao sẽ tính điểm và giới hạn thời gian làm bài tập , sau khi hoàn thành các câu hỏi chương trình sẽ đưa ra các câu người học đã làm đúng và các câu đã làm sai kèm theo số điểm mà người học đạt được. Khi kích vào nút bài tập cơ bản hay nâng cao thì sẽ dẫn đến cảnh bài tập tương ứng. Thể hiện bài tập được xây dựng trên 2 cảnh (scene).
Scene 16: Bài tập cơ bản
Scene 17: Bài tập nâng cao
Scene 18: Phần trợ giúp . Sẽ hướng dẫn người học biết cách sử dụng chương trình.
45
4.1.4. Giới thiệu bốn thuật toán sắp xếp:
Sắp xếp là quá trình xử lý một danh sách các phần tử (hoặc các mẫu tin) để đặt chúng theo một thứ tự thỏa mãn một tiêu chuẩn nào đó dựa trên nội dung thông tin lưu giữ tại mỗi phần tử.
Mức độ hiệu quả của từng giải thuật phụ thuộc vào tính chất của cấu trúc dữ liệu cụ thể mà nó tác động đến, thời gian tính
H nh 7 : Hình ảnh dãy sắp xếp tăng dần
Bài toán sắp xếp dãy số :
Bài toán: Cho trước một dãy số a1 , a2 ,… , aN được lưu trữ trong cấu trúc dữ liệu mảng
Sắp xếp dãy số a1 , a2 ,… , aN là thực hiện việc bố trí lại các phần tử sao cho hình thành được dãy mới ak1 , ak2,… ,akN có thứ tự (ví dụ thứ tự tăng) nghĩa là aki > aki-1.
Để quyết định được những tình huống cần thay đổi vị trí các phần tử trong dãy, cần dựa vào kết quả của một loạt phép so sánh
-> Hai thao tác so sánh và gán là các thao tác cơ bản của hầu hết các thuật toán sắp xếp.
Chú ý: Khi xây dựng một thuật toán sắp xếp cần tìm cách giảm thiểu những phép so sánh và đổi chỗ không cần thiết để tăng hiệu quả của thuật toán.
46
a) Sắp xếp lựa chọn (Selection Sort) :
* Ý tưởng:
Chọn phần tử nhỏ nhất trong N phần tử ban đầu, đưa phần tử này về vị trí đầu dãy hiện hành; sau đó loại nó khỏi danh sách sắp xếp tiếp theo. (adsbygoogle = window.adsbygoogle || []).push({});
Xem dãy hiện hành chỉ còn N-1 phần tử của dãy ban đầu, bắt đầu từ vị trí thứ 2; lặp lại quá trình trên cho dãy hiện hành… đến khi dãy hiện hành chỉ còn 1 phần tử.
* Cá bước sắp xếp tăng dần:
Bước 1: i = 1 // lần xử lý đầu tiên
Bước 2: Tìm phần tử nhỏ nhất a[min] trong dãy hiện hành từ a[i]
đến a[N]
Bước 3: Hoán vị a[min] và a[i]
Bước 4: Nếu i < N-1 thì i = i+1; Lặp lại Bước 2
47
H nh 8 : Lưu đồ giải thuật sắp xếp lựa chọn
*Cài đặt giải thuật :
public void selectionsort() {
for (int i = 0; i < spt-1; i++) { int min = i; for (int j = i + 1; j < spt; j++) if (mang[j] < mang[min]) min = j; if (min != i) {
int tam = mang; mang = mang[min]; mang[min] = tam;
48 }
}
*Đánh giá giải thuật trên:
Ở lượt thứ i, bao giờ cũng cần (n-i) lần so sánh để xác định phần tử nhỏ nhất hiện hành. Do vậy số lần so sánh :
∑( ) ( )
Số lần hoán vị (một hoán vị bằng 3 phép gán) lại phụ thuộc vào tình trạng ban đầu của dãy số, ta chỉ có thể ước lược trong từng trường hợp như sau:
Trường hợp Số lần so sánh Số phép gán
Tốt Nhất n(n-1)/2 3(n-1)
Xấu nhất n(n-1)/2 n(n-1)/2+3(n-1)
b) Sắp xếp nổi bọt (Bubble Sort):
*Ý tưởng:
xuất phát từ đầu dãy, so sánh 2 phần tử cạnh nhau để đưa phần tử nhỏ hơn lên trước, sau đó lại xét cặp tiếp theo cho đến khi tiến về đầu dãy. Nhờ vậy, ở lần xử lý thứ i sẽ tìm được phần tử ở vị trí đầu dãy là i
*Cá bước:
Bước 1: i=1 // lần xử lý đầu tiên (adsbygoogle = window.adsbygoogle || []).push({});
Bước 2: j=N // duyệt từ cuối dãy trở về vị trí Trong khi j>i thực hiện:
49 j= j-1
Bước 3: i=i+1 // lần xử lý tiếp theo Nếu i>N-1 thì dừng
Ngược lại, lặp lại Bước 2.
H nh 9 : Lưu đồ giải thuật sắp xếp nổi bọt
*Cài đặt giải thuật :
void BubbleSort(int X[], int n) {
int i, j;
for (i=1, i<n, i++) for (j=n, j>i, j--) if (X[j]<X[j-1]) swap(X[j-1],X[j]); }
50 void swap (int x, int y)
{
int temp; temp=x;
}
*Đánh giá giải thuật:
Ở lượt thứ i, bao giờ cũng cần (n-i+1) lần so sánh để xác định phần tử nhỏ nhất hiện hành. Do vậy số lần so sánh:
∑( ) ( )
Số lượng phép hoán vị thực hiện tùy thuộc vào kết quả so sánh, có thể ước lược trong từng trường hợp như sau:
Trường hợp Số lần so sánh Số phép gán
Tốt Nhất n(n-1)/2 0
Xấu nhất n(n-1)/2 n(n-1)/2
c) Sắp xếp chèn : *Ý tưởng:
Trước hết ta xem phần tử a[0] là một dãy đa có thứ tự.
Bước 1: Chèn phần tử a[1] vào đúng vị trí trong dãy a[0] trên sao cho dãy gồm a[0] và a[1] được sắp thứ tự.
Bước 2: Chèn phần tử a[2] vào đúng vị trí trong dãy gồm a[0], a[1] sao cho dãy gồm a[0], a[1], a[2] được sắp thứ tự.
51
Tổng quát bước i, chèn phần tử a[i] vào đúng vị trí trong dãy đa sắp xếp a[0],… a[i-1] sao cho dãy a[0], a[1],… a[i] được sắp thứ tự.
Sau N-1 bước thì kết thúc.
H nh 10 : Lưu đồ giải thuật sắp xếp chèn (adsbygoogle = window.adsbygoogle || []).push({});
*Cài đặt giải thuật :
void InsertSort (int X[], int n) {
int k := 2;// Bắt đầu chèn từ phần tử thứ hai đến cuối dãy while (k <= n) {
insert(X, k, X[k]); k := k + 1;
} }
void insert (int a[], int k, value) { int i := k-1;
while (i > 0 and a[i] > value) {
52 i := i - 1;
}
a[i+1] := value; / chèn value vào bên phải }
*Đánh giá giải thuật:
Độ phức tạp giải thuật phụ thuộc vào số lần so sánh. Ở lượt thứ i, tối đa cần i lần so sánh để tìm được vị trí chèn thích hợp. Do vậy số lần so sánh tối đa là:
∑ ( )
d) Sắp xếp nhanh : *Ý tưởng :
Kỹ thuật sắp xếp nhanh xếp danh sách theo chiến lược chia để trị (divide & conquer). Trong thuật toán này, danh sách cần xếp sẽ được xếp thành 2 nhóm, nhóm các phần tử lớn và nhóm các phần tử nhỏ dựa trên 1 phần tử được chọn nào đó. Sau đó tiến hành lặp đệ qui thao tác đó đến khi toàn bộ danh sách được sắp xếp. Nếu so với thuật toán nổi bong bóng đã giới thiệu, thì thuật toán này tỏ ra hiệu quả hơn do số lần thực hiện việc so sánh các phần tử sẽ ít hơn.
*Cá bước thực hiện:
Sắp xếp một đoạn bất kỳ X[L],...,X[R] với điều kiện L < R
Bước 1: pirot = (L+R) div 2, key=X[pirot]
Bước 2: i=L+1, j=R
Bước 3:
* Nếu X[i] < key thì i=i+1; * Nếu X[j] > key thì j=j-1;
53
Bước 5: Lặp lại từ Bước 1 đến Bước 3 với đoạn X[L],...,X[j-1] và X[j] đến X[R], dừng khi tất cả đoạn có độ dài là 1.
*Cài đặt giải thuật :
Thủ tục phân chia
Function Part(a[1..n],k1,k2)
i=k1; j=k2; k=int((k1+k2)/2)+1; v=a[k] While i<j do
While a[i]<=v do i:=i+1; While a[j]>v and j>i do j=j-1; if i>=k2 then (adsbygoogle = window.adsbygoogle || []).push({});
Swap(a[k],a[k2]) return k2-1 Swap(a[i],a[j]) return i-1
Quick Sort đệ quy
Procedure PartSort (a,k1,k2) if k1<k2 then
k=part(a,k1,k2) PartSort(a,k1,k) PartSort(a,k+1,k2) *Đánh giá giải thuật :
Độ phức tạp thời gian : O(n logn)
Trường hợp xấu nhất O(n2 )
54
4.1.5. Thể hiện kịch bản:
*Tạo chuyển động bằng kỹ thuật Adding a Motion Guide:
Kỹ thuật Adding a Motion Guide là kỹ thuật chuyển động theo đường vẽ. Chúng ta sẽ vẽ đường chuyển động cho đối tượng rồi cho đối tượng chuyển chuyện theo đường đã vẽ.
B1: Tạo mới một dự án Ascript 3.0
B2: Trên thanh công cụ Tools chọn Oval Tool (Ctrl + O)