Jul 12
3

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

Đăng trong danh mục Graphic Design, Miscellaneous, Web Design bởi admin | Tags: , , , , ,

flex-countdown-clock-dong-hoc-dem-nguoc-flash

flex-countdown-clock-dong-hoc-dem-nguoc-flash

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:

flex-countdown-clock-navigator

flex-countdown-clock-navigator

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

a. Khai báo biến:

?View Code JAVASCRIPT
	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().

?View Code JAVASCRIPT
	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().

?View Code JAVASCRIPT
	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:

?View Code JAVASCRIPT
	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.

Bài viết liên quan:

3 Lời bình cho bài viết “Tạo đồng hồ đếm ngược bằng Flex”

  • Én
    August 18, 2010 at 5:37 pm

    M` đã dow các file về mấy nhưng ko biết khởi động sao? Bạn có thể cho m` hỏi cách cài đồng hồ này voà powerpoint được không? Hj`, mình khá mù mờ mà. Thanks!

    [Reply]

    Reply
  • Nghia
    November 28, 2010 at 3:38 pm

    Mình đang làm trương trình và cần dùng đến File ĐẾM NGƯỢC THỜI GIAN trong vòng 10S. Nhưng mình không biết tạo nó ! Anh em nào có thì giúp mình với ! Mình Cảm Ơn Anh Em Trước !

    [Reply]

    Reply
  • Duong Duc Toan
    April 8, 2011 at 1:20 pm

    Xin cam on nhieu ! Xem ban demo cua ban rat hay, nhung neu thiet ke them hiển thị total time (neu nhu stop truoc khi het gio )
    Chuc vui ve va thanh dat !

    [Reply]

    Reply

Viết lời bình



Bình luận mới nhất

Menu

Danh mục

Lưu trữ



Tags