Tiếp tục đẩy mạnh việc học tập, làm theo tư tưởng, tấm gương đạo đức và phong cách Hồ Chí Minh. Tiếp tục thực hiện có hiệu quả các cuộc vận động lớn: Cuộc vận động “Hai không”, “Mỗi thầy cô giáo là một tấm gương đạo đức, tự học và sáng tạo”, phong trào thi đua “Xây dựng trường học thân thiện, học sinh tích cực”.

CHỦ ĐỀ NĂM HỌC 2018-2019

Thư điện tử




Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Gốc > Tin học trong tầm tay > Flash >

    Macromedia Flash MX (Bài 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.

    Trước khi bắt đầu phần 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 6).

    • 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 + 10).

    • Chèn action script vào button (bài 10).

    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.

    nguồn www.echip.com.vn


    Nhắn tin cho tác giả
    Lê Đức Minh @ 18:05 16/10/2009
    Số lượt xem: 579
    Số lượt thích: 0 người
     
    Gửi ý kiến