Xây dựng ứng dụng Flash bằng FlashDevelop và Flex SDK (Phần 1)

I. Giới thiệu

Ghi chú: Không như cái tên của nó, Flex SDK không phải chỉ để biên dịch ứng dụng viết bằng Flex (AS + MXML). Flex SDK còn được dùng để biên dịch ứng dụng viết hoàn toàn bằng ActionScript (AS); biên dịch và đóng gói ứng dụng desktop AIR; xuất tài liệu tham khảo từ các comment trong mã nguồn (tương tự javadoc)…
Với những ai mới làm quen với ActionScript 3, bạn không cần hiểu ngay những khái niệm mới nêu ra trong bài viết này. Hãy làm theo hướng dẫn và tự trải nghiệm, bạn sẽ dần dần hiểu và nắm được chúng.
Bài viết này sẽ hướng dẫn phát triển ứng dụng Flash với ActionScript 3 thuần túy (pure ActionScript 3).
[list="padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 40px; line-height: 18px; color: rgb(34, 34, 34); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"]
[*]
[*]
[*]Java Runtime Environment 1.6+ (download): để chạy Flex SDK
[/list]

II. Tải về và cài đặt

A. Đối với FD trước 3.3.0 hoặc bạn không chọn tải về Flex SDK lúc cài FD 3.3.0+

[list="padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 40px; line-height: 18px; color: rgb(34, 34, 34); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"]
[*]

• Fex SDK 3.5: Biên dịch ứng dụng Flash 9 và 10.0, AIR 1.5.3. 
  Đối với người mới bắt đầu hoặc mới chuyển từ AS2, tôi khuyên các bạn sử dụng bản 3.5 sẽ ít rắc rối hơn.
  
• Flex SDK 4.1: Biên dịch ứng dụng Flash 10.0 và 10.1, AIR 2.0. 
  Dùng phiên bản này khi bạn đã hiểu và nắm vững Flex SDK, hoặc có nhu cầu biên dịch ứng dụng cho Flash 10.1 trên thiết bị di động.
  

[*]
[*]
[*]Cũng tại trang settings của Flash Viewer, chọn “External” cho Movie Display Style.
[/list]

B. Đối với FD từ 3.3.0 trở đi:

[list="padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 40px; line-height: 18px; color: rgb(34, 34, 34); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"]
[*]
[*]
[*]
[/list]

III. Viết và biên dịch ứng dụng “Hello World”

[list="padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 40px; line-height: 18px; color: rgb(34, 34, 34); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"]
[*]Mở menu Project > New Project…

[*]Trong danh sách project template, chọn ActionScript 3 – AS3 Project. (Đây là template cho dự án Flash ActionScript 3 thuần túy.) 
Tại trường Name, nhập vào tên dự án (HelloAS3). 
Tại trường Location, duyệt và tạo một thư mục mới cho dự án này. 
Sau đó OK. FD sẽ hỏi tên mặc định cho tác giả (@author) nếu bạn chưa cài cho nó.
[*]Tại cửa sổ Project (mặc định ở bên phải), mở thư mục src và double click lên file Main.as để mở nó bên cửa sổ soạn thảo. 
Đây là nội dung tạo sẵn cho lớp Main:
package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
  
    public class Main extends Sprite { 
  
        public function Main():void { 
            if (stage) init(); 
            else addEventListener(Event.ADDED_TO_STAGE, init); 
        } 
  
        private function init(e:Event = null):void { 
            removeEventListener(Event.ADDED_TO_STAGE, init); 
            // entry point 
        } 
    } 
}
[/list]
Ghi chú:  Để biên dịch với Flex SDK, bạn cần chỉ định một file target. Lớp của file này phải extend từ MovieClip hoặc Sprite và nó là đối tượng hiển thị (display object) đầu tiên được đặt lên stage. Để dễ hình dung, lớp này sẽ tương ứng với Document Class nếu bạn build ứng dụng bằng Flash Pro. 
Mặc định bởi template AS3 Project, file Main.as đã được chọn làm target để biên dịch. Khi nhấn chuột phải lên tên file, bạn sẽ thấy mục “Always Compile” đã được đánh dấu chọn. Bạn cũng có thể chọn Always Compile cho một lớp khác nếu muốn thay đổi target.
[list="padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 40px; line-height: 18px; color: rgb(34, 34, 34); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"]
[*]Sửa hàm init() được tạo sẵn với nội dung sau:
private function init(e:Event = null):void { 
    removeEventListener(Event.ADDED_TO_STAGE, init); 
  
    //trace output 
    trace(“init() is called”); 
  
    //tạo text field mới 
    var helloText: TextField = new TextField(); 
  
    //set giá trị text cho text field 
    helloText.text = "Hello World"; 
  
    //đặt text field lên stage 
    addChild(helloText); 
}
[*]Build và test ứng dụng Flash bằng cách nhấn vào nút Test Movie trên thanh toolbar ( nút play màu xanh) hoặc nhấn shorcut F5. 
Bên dưới, FD sẽ gọi lệnh mxmlc của Flex SDK để biên dịch ứng dụng Flash của bạn. 
Nếu mọi việc suôn sẻ bạn sẽ thấy: 
– Ứng dụng của bạn sẽ được chạy trên Flash Player standalone với chữ “Hello World”. 
– Trong panel output, bạn sẽ thấy dòng trace “init() is called”

Nếu ở các bước trước bạn chưa cài đặt đường dẫn đến Flex SDK, FD sẽ cảnh báo và yêu cầu bạn cài đặt đường dẫn đến Flex SDK ở trong AS3 context (bước II.A.3)
[*]Bạn có thể điều chỉnh kích thước mặc định của ứng dụng Flash khi xuất ra bằng cách vào Project > Properties (hoặc nhấn nút Project Properties trên panel Project) > tab Output > General > sửa lại Dimensions (chẳng hạn 500×400). 
Tại đây bạn cũng có thể sửa màu nền mặc định và framerate mặc định. 
Sửa xong bạn chạy test lại để thấy thay đổi.
[/list]
Ghi chú: FlashDevelop khi build với Flex SDK sẽ sử dụng một process có tên là Flex Compiler Shell (fcsh). Process này sẽ được tạo ra khi build lần đầu và lưu lại trong RAM cho đến khi thoát FD. Do đó những lần build sau, bạn sẽ thấy tốc độ build lần sau cực nhanh. Đây là một lợi thế đáng kể của Flex SDK so với Flash Pro.
Xem mã nguồn đầy đủ của Main.as trong phần này

IV. Sử dụng thư viện đã được biên dịch sẵn (SWC)

Mỗi file *.swc là một thư viện các component đã được biên dịch sẵn. SWC giống DLL của .NET hay JAR của Java ở chỗ: mã nguồn AS3 đã được biên dịch thành bytecode và tài nguyên (hình ảnh, âm thanh, font chữ…) đã được nhúng sẵn. Tuy nhiên nó khác ở chỗ: SWC chỉ dùng để liên kết lúc biên dịch, không dùng được lúc chạy (run-time).
Ưu điểm của swc là do đã được biên dịch từ trước, thời gian biên dịch của dự án sẽ được rút ngắn. Khả năng dùng lại cao và dễ dàng khi đem từ dự án này sang dự án khác. Khuyết điểm là khi code với FlashDevelop, chú thích ngữ cảnh cho các lớp và hàm ở trong swc sẽ không được chi tiết so với khi có source đầy đủ.
Làm theo hướng dẫn sau để hiểu rõ hơn về swc và cách dùng trong FD:
[list="padding-right: 0px; padding-left: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 40px; line-height: 18px; color: rgb(34, 34, 34); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; background-color: rgb(255, 255, 255);"]
[*]Trước tiên bạn hãy tải về thư viện hỗ trợ hiệu ứng hoạt cảnh TweenLite tại địa chỉ:http://www.greensock.com/as/greensock-as3.zip 
TweenLite/TweenMax là bộ thư viện tạo hoạt cảnh được dùng khá phổ biến. Cách dùng sẽ được ghi chú trong code mẫu của bài viết.
[*]Giải nén greensock-as3.zip ra bạn sẽ thấy file greensock.swc. Chép file này vào thư mục lib của dự án HelloAS3. 
(Nhấn nút refresh trên Project panel nếu chưa thấy file này hiện ra)
[*]Trong panel Project, chuột phải lên file greensock.swc và chọn “Add to Library”. File greensock.swc sẽ chuyển màu xanh. 
Lúc này FD sẽ hiểu các lớp có trong greensock.swc. Nó sẽ gợi ý code cho bạn cũng như liên kết đến khi biên dịch với Flex SDK.
[*]Khai báo 2 biến member kiểu TextField và sửa hàm init() như bên dưới:
public var nameText: TextField; 
public var roleText: TextField; 
  
private function init(e:Event = null):void { 
    removeEventListener(Event.ADDED_TO_STAGE, init); 
      
    //xuất ra ouput 
    trace("init() is called"); 
    
    //tạo TextField để hiển thị tên 
    nameText = new TextField(); 
    //TextField tự động điều chỉnh kích thước vùng bao vừa với text 
    nameText.autoSize = "left"; 
    nameText.text = "Emma Watson"; 
    //vị trí ban đầu của TextField ở bên ngoài stage về phía phải 
    nameText.x = stage.stageWidth; 
    nameText.y = 20; 
      
    //tạo TextField để hiển thị tên nhân vật 
    roleText = new TextField(); 
    roleText.autoSize = "left"; 
    //sử dụng htmlText để tận dụng một số tag của HTML 
    roleText.htmlText = "as <b>Hermione Granger</b>"; 
    //vị trí ban đầu của TextField ở bên ngoài stage về phía phải 
    roleText.x = stage.stageWidth; 
    //roleText được đặt ngay phía dưới của nameText 
    roleText.y = nameText.y + nameText.height; 
     
    //đặt các đối tượng lên stage 
    addChild(nameText); 
    addChild(roleText); 
  
    show(); 
}
Khi khai báo biến, nếu kiểu của nó chưa được import, FD sẽ import giùm bạn.
[*]Thêm hàm show() với nội dung sau:
private function show(): void { 
    //di chuyển các TextField ra phía ngoài, bên phải stage 
    nameText.x = stage.stageWidth; 
    roleText.x = stage.stageWidth; 
    //di chuyển nameText từ vị trí hiện tại đến tọa độ x=220 trong thời gian 0.7s 
    TweenLite.to(nameText, 0.7, { x: 220 } ); 
    //di chuyển roleText từ vị trí hiện tại đến tọa độ x=220 trong thời gian 0.7s 
    //nhưng delay sau 0.4s 
    TweenLite.to(roleText, 0.7, { x: 220, delay: 0.4 } ); 
}
Với cách viết lớp static như TweenLite, FD hiện tại sẽ không import cho bạn. Bạn có thể tự viết dòng "import com.greensock.TweenLite;" vào phía đầu file Main.as hoặc bạn chỉ cần đặt con trỏ tại "TweenLite" và nhấn Ctrl-Shift-1.
[*]Nhấn nút Test Movie hoặc F5 để test ứng dụng. Bạn sẽ thấy 2 đoạn text lần lượt bay vào từ bên phải.

[/list]
Ghi chú: Bạn hoàn toàn có thể dùng source code thay cho swc bằng cách chép thư mục “gs” vào thư mục “src” của dự án. Độ ưu tiên khi biên dịch các lớp của Flex SDK sẽ là source code rồi mới tới swc.
Xem mã nguồn đầy đủ của Main.as trong phần này
—-

Xem tiếp phần 2

openflashbook.wordpress.com