Tạo đồng hồ đếm ngược bằng Flex

Hôm nay mình sẽ chỉ cho các bạn một làm project nho nhỏ bằng Flex đó là tạo ra một đồng hồ đếm ngược định dạng xuất là file SWF(Flash) để chúng ta có thể dùng trong các sự kiện hay những lúc cần những chức năng đếm ngược (vd:  đếm ngược từ 10 giây, 15 giây, 1phút, 2 phút…1 giờ, ….)

Các yêu cầu của đồng hồ đếm ngược này:
– Giao diện rõ ràng để biểu thị thời gian đang chay ngược
– Có các thang thời gian cố định (10s, 15s..)
– Có nút BẮT ĐẦU, STOP
– Có tùy chọn nghe âm thanh khi đếm và âm thanh khi hết giờ
– Hiển thị FULLSCREEN(toàn màn hình) khi chạy chương trình này

.Online Demo
.File chạy (.HTML + .SWF file) (880K)
.Flex Project Files (1.3M)

————————————–
Để nắm được toàn bộ nội dung project, bạn download file rar chứa toàn bộ resource của project ở trên để xem. Hướng dẫn một số phần quan trọng trong project:

1> Trước tiên bạn hãy xem cấu trúc của ứng dụng:

2> Một số hàm cần thiết:

a. Khai báo biến:

	private var clockCounter:Timer;
	private var timeInSeconds:Number;

	[Embed('../assets/tick.mp3')]
	private var tick_mp3:Class;
	private var tickSound:SoundAsset = new tick_mp3() as SoundAsset;

	[Embed('../assets/alarm.mp3')]
	private var alarm_mp3:Class;
	private var alarmSound:SoundAsset = new alarm_mp3() as SoundAsset;

b.Hàm beginCountdown() dùng khi click nút BẮT ĐẦU TÍNH. Công việc chính của hàm này trước tiên là hiển thị và gán các giá trị cần thiết cho các label để bắt đầu tính. Set các tùy chọn enable cho nút Stop…Đồng thời khởi động timer và gán action cho mỗi lần tick bằng hàm timeTick() (Hàm timeTick dùng để gọi các hàm xử lý thời gian hiện tại và hiển thị, đồng thời phát ra âm thanh tick) và gán action khi kết thúc timer là hàm timeEnd().

	public function beginCountdown():void
	{
		this.timeValue.text = t_time.selectedItem.data;
		this.timeValue.text = formatTime(int(t_time.selectedItem.data));
		bStopCount.enabled = true;
		bBeginCount.enabled = false;
		stopImage.visible = false;
		timeValue.visible = true;
		tTimeOut.visible = false;

		this.timeInSeconds = int(t_time.selectedItem.data);
		clockCounter = new Timer(1000, this.timeInSeconds);
		clockCounter.addEventListener(TimerEvent.TIMER, timeTick);
		clockCounter.addEventListener(TimerEvent.TIMER_COMPLETE, timeEnd);
		clockCounter.start();

		stage.displayState = StageDisplayState.FULL_SCREEN;
	}

	private function timeTick(e:Event):void
	{
		this.displayClockCount();
		playTickingSound();
	}

	private function timeEnd(event:TimerEvent):void
	{
		tTimeOut.visible = true;
		stopCountdown();
		playAlarmSound();
	}

c.Hàm displayClockCount() sẽ làm chức năng hiển thị thời gian cònlại lên màn hình bằng hàm formatTime().

	private function displayClockCount():void
	{
		this.timeValue.text = formatTime(clockCounter.repeatCount - clockCounter.currentCount);
	}

d.Hàm formatTime(): Một trong những hàm cần thiết của ứng dụng là hàm formatTime(). Hàm này dùng để định dạng fontsize để có thể hiển thị các chữ số cho phù hợp tương ứng với số thời gian còn lại. Ở đây mình triển khai cố định 1 số font-size theo màn hình chuẩn tối thiểu là 1024×768. Nếu nhu cầu của các bạn dành cho các màn hình nhỏ hơn, các bạn có thể edit lại hàm này 1 xíu, cho phép font-size tự động dựa vào chiều rộng của vùng hiển thị để đưa ra font-size chính xác hơn và đảm bảo tất cả các con số để có thể được hiển thị trên mọi kích thước màn hình:

	public function formatTime(input:Number):String
	{
		var output:String = "";
		var hour:String = "";
		var min:String = "";
		var sec:String = "";
		
		//hien thi gio:phut:giay
		if(input >= 3600)
		{
			//tinh so gio
			hour = String(int(input/3600));
			min = String(int((input%3600)/60));
			
			if(min.length < 2)
				min = "0" + min;
				
			sec = String(int((input%3600)%60));
			
			if(sec.length < 2)
				sec = "0" + sec;
				
			output = hour + ":" + min + ":" + sec;
			timeValue.setStyle("fontSize", 50);
		}
		else if(input >= 60)
		{
			//tinh so phuc
			min = String(int(input/60));
			sec = String(int(input%60));
			if(sec.length < 2)
				sec = "0" + sec;
				
			output = min + ":" + sec;
			timeValue.setStyle("fontSize", 70);
		}
		else
		{
			output = String(input);
			
			if(input >= 10)
				timeValue.setStyle("fontSize", 100);
			else
				timeValue.setStyle("fontSize", 200);
		}
		return output;
	}

—-
Hy vọng bài viết này sẽ giúp bạn phần nào trên con đường master ngôn ngữ Flex.