Ví dụ tạo ứng dụng FlashLite với CS4.0 và AS2.0

Flash Lite runtime đã được tối ưu hóa cho các thiết bị điện tử chủ yếu là thiết bị di động, nó nhẹ hơn nền tảng Adobe Flash thông thường, hỗ trợ sử dụng ít tài nguyên CPU, kích thước file nhỏ hơn, dùng ít bộ nhớ hơn. Có thể tạo mọi kiểu nội dung với FLash Lite từ những trò chơi, hoạt hình màn hình bảo vệ, màn hình, bản đồ... Trong ví dụ này sẽ mô tả từng bước quá trình sáng tạo một ứng dụng FlashLite điển hình cho di động. Ứng dung tự động gửi email đến một địa chỉ định trước.

Có nhiều phiên bản FLashLite khác nhau ứng với các đòng diện thoại khác nhau, trong ví dụ này giới thiệu Flash Lite 3.0 thử nghiệm với trình giả lập Nokia N96. Tuy nhiên ứng dụng này cũng có thể làm việc trên mọi dòng điện thoại hỗ trợ FlashLite 3.0

Yêu cầu

Adobe Flash CS3 / CS4 Professional

• Adobe Device Central CS3 / CS4
• Access to PHP server

Yêu cầu kiến thức

Biết sử dụng Flash CS 4.0 và lập trình ActionScript 2.0

Bước 1 : Tạo một tài liệu mới

Khởi động FLash IDE. Trong màn hình khởi động chọn "Flash File (Mobile) để khởi động ứng dụng Adobe Device Central.

Bước 2 : Cài đặt thiết bị

Góc trái màn hình là biểu tượng thư viện trực tuyến ”Online Library” cung cấp toàn thể danh sách các điện thoại di động. Tìm thiết bị Nokia N96 và click dúp để cài đặt trình giả lập thiết bị sẽ được cài đặt trên máy tính nhà thiết kế.

Bước 3 : Lựa chọn thiết bị

Góc trên bên phải của Thư viện trực tuyến ”Online Library” tìm trong thư viện địa phương ”Local Library”. Gồm danh sách các trình giả lập thiết bị đã tải về từ thư viện trực tuyến. Click đúp để chọn Nokia N96.

Bước 4 : Xem lại thông tin thiết lập cho thiết bị

Xem lại thông tin của thiết bị Nokia N96. gồm các kiểu thông tin về dòng điện thoại này, kích cỡ màn hình, nền tảng và phiên bản Flash Lite được hỗ trợ.

Bước 5 : Tạo tài liệu Flash

Chọn ”New Document” để tạo tài liệu mới. Chọn Flash Lite version là Flash Lite 3.0 và ActionScript Version là ActionScript 2.0. Sau khi xác lập các thông số, click đúp vào hình ảnh điện thoại cạnh đó để tạo ra một tài liệu Flash mới với mọi xác lập cần thiết cho dòng điện thoại này. Sau đó ta có thể làm việc với file .fla như một ứng dụng desktop thông thường.

Bước 6 : Tạo hình nền cho ứng dụng

Quay trở lại Flash IDE. Đặt tên lớp đầu tiên là ”background”. Chúng ta bắt đầu bằng việc tạo một hình nền cho ứng dụng. Với công cụ vẽ hình chữ nhật rectangle, tạo một hình chữ nhật cùng kích thước trên màn hình. Áp dụng chế độ đổ mầu phù hợp (từ dưới lên trên)

Bước 7 : Tạo các nhãn cho ứng dụng

Kết tiếp tạo một lớp mới đặt tên là ”form” . Các phần tử của ứng dụng sẽ được bổ sung trên lớp mới này. Tạo ba trường text như trên hình dưới đây

Bước 8 : Tạo các trường nhập liệu cho ứng dụng

Tạo ba trường nhập liệu kiểu input text như hình dưới, gõ một vài từ trong các trường này để dễ định vị chúng trên màn hình phát triển.

Bước 8 : Đặt tên cho các trường nhập liệu

Đặt tên cho các trường ” emailInput”, ”subjectInput” và ” messageInput”.

Bước 8 : Thêm nút điều khiển cho người sử dụng

Chúng ta muốn gửi mail khi người dùng bấm nút phải (nút mềm softkey) của điện thoại di động. Đặt nhãn Send tại góc dưới cùng bên phải.

Bước 9 : Màn hình phản hồi

Sau khi mail được gửi cần cung cấp một thông báo cho người sử dụng. Do vậy trong lớp "form" tạo một keyframe mới tại frame số 2 bằng cách bấm F6. Vì nền hình sẽ cùng kích thước trong cả hai màn hình, tạo một frame thông thường với lớp ”background” ở frame 2 (F5)Bước 10 : Hộp thông báo phản hồi.

Trong frame thứ 2 của lớp "form", tạo một trường text động ở trung tâm của màn hình. Căn chỉnh kích thước trường text đủ lớn để hiển thị thông tin phản hồi. Đặt tên trường text là ”serverResponse”.

Bước 10 : Nút thoát ứng dụng

Sau cùng, bạn muốn người dùng có thể thoát khỏi ứng dụng bằng việc bấm phím mềm bên phải. Do vậy trong cùng frame khi hiển thị thông tin đáp ứng từ máy chủ, tạo một trường text ở góc dưới bên phải màn hình với chữ "Quit".

Bước 10 : Mã ActionScript trong Frame 1

Tạo một lớp mới đặt tên là ”actions”. Trong frame đầu tiên của lớp "actions", gõ đoạn mã dưới đấy.

//Stop the movie
stop();

// sets your content to be full screen
fscommand2("FullScreen", true);

// sets your content to dsiplay at high  quality
fscommand2("SetQuality", "high");

// set soft keys
fscommand2("SetSoftKeys", null,  "Send");

//We will save the server response to this  variable
var serverResponseText = "";

//We use LoadVars to send the data to the  server
formData = new LoadVars();

//Create a new object that will listen for the  key presses
var myListener:Object = new Object();

//Assign the key listener
Key.addListener(myListener);

//This function is called when a key is  pressed
myListener.onKeyDown = function() {

              //Check  if this is the right side soft key
              if  (Key.getCode() == ExtendedKey.SOFT2) {

                              //Assign  the values to the LoadVars
                              formData.email  = emailInput.text;
                              formData.subject  = subjectInput.text;
                              formData.message  = messageInput.text;

                              //Send  the data to the server
                              formData.sendAndLoad('http://flashmymind.com/email.php',formData,"POST");
              }
};

//This function is called when we get data  from the server
formData.onLoad = function(success) {

              //If  we have succeeded
              if  (success) {
                              serverResponseText  = "Email has been sent to " + this.sentTo;
              }
              else  {
                              serverResponseText  = "Could not connect to server!"
              }

              //Go  to the second frame
              gotoAndStop(2);
};

Bước 11 : Mã ActionScript trong Frame 2

Tạo một keyframe mới trên frame thứ 2 trong lớp "actions". Nhập đoạn mã dưới đây

//Give feedback to the user
serverResponse.text = serverResponseText;

// set soft keys
fscommand2("SetSoftKeys", null,  "Quit");

var myListener2:Object = new Object();

//Assign the key listener
Key.addListener(myListener2);

//This function is called when a key is pressed
myListener2.onKeyDown = function() {

              //Check  if this is the right side soft key
              if  (Key.getCode() == ExtendedKey.SOFT2) {

                              //Quit  the application
                              fscommand("Quit");
              }
}

Bước 12 : Chuẩn bị ứng dụng trên máy chủ

Ứng dụng đã hoàn thành trên máy khách. Cần thêm đoạn mã ứng dụng trên máy chủ để email có thể được gửi đi. Có thể sử dụng một ngôn ngữ máy chủ phổ dụng là PHP hoặc bất kỳ ngôn ngữ động nào. Tạo một file .php và nhập dòng mã.

$sendTo = $_POST["email"];
$subject = $_POST["subject"];
$message = $_POST["message"];

mail($sendTo, $subject, $message);

echo "&sentTo=$sendTo";
?>

Ở đây ta chỉ đơn giản gửi các số liệu đến máy chủ và gọi đến dịch vụ gửi mail đến một đỉa chỉ email cụ thể. Sau đó ta gán biến "sentTo” giữ địa chỉ email mà ta vừa gửi đi.

Lưu file này thành ”email.php” và upload lên máy chủ server ứng dụng.

Bước 13 : Chạy thử ứng dụng

Sau khi hoàn thành các bước. Chạy thử ứng dụng với tổ hợp phím Ctrl + Enter để kiểm tra ứng dụng Flash Lite vừa tạo. Cửa sổ Adobe Device Central với trình giả lập Nokia N96 sẽ hiển thị. Để nhập ký tự vào trường nhập liệu, bấm phím lựa chọn ở trung tâm của điện thoại. Trình giải lập sau đó sẽ mô phỏng các tính năng của trường nhập liệu trên điện thoại thực.

Ứng dụng hoàn chỉnh trên hình dưới đây

Bây giờ bạn sẽ nhận được email trong hộp thư theo địa chỉ mà bạn đã gửi! Lưu ý trình giả lập không hỗ trợ chức năng "Quit", nên cần thử nghiệm thêm trên thiết bị thực.

Reference :
Creating a Flash Lite Application with Flash CS4 and Actionscript 2.0