วิธีทำ Clock แบบตัวเลข และแสดงวันเป็นภาษาไทย

NOOKFUFU2

วิธีทำ Clock แบบตัวเลข และแสดงวันเป็นภาษาไทย
ในบทความนี้จะแนะนำการทำนาฬิกาแบบแสดงเป็นตัวเลข พร้อมทั้งบอกวันเป็นภาษาไทย ตามเวลาสากลดังตัวอย่างแฟลชข้างล่างนะค่ะ




โหลดไฟล์ต้นฉบับ (ver. Flash Cs6)
[hide][/hide]

NOOKFUFU2

ขั้นตอนที่ 1
- เมื่อเปิดโปรแกรม Flash ขึ้นมาให้เลือกเป็น ActionScript 3.0


- หลังจากเข้าสู่หน้าจอโปรแกรมแล้ว ให้กดปุ่ม "T" เพื่อเรียกใช้เครื่องมือ Text Tool
- แล้วให้แดรกเม้าส์สร้างพื้นที่ๆจะพิมพ์ Text ลงไป



- ให้พิมพ์ตัวเลขไปตามภาพด้านล่างนะค่ะ (หรือจะพิมพ์อย่างอื่นก็ได้ แต่ต้องมีเครื่องหมาย ":" คั่นระหว่างกลุ่มตัวเลขแต่ละคู่)
- เปิดพาแนล Properties ขึ้นมา (Window > Properites) ที่พาแนล Propertiesกำหนด Text ให้เป็นชนิด Classic Text รูปแบบ Dynamic กำหนดสีและขนาดของ Text ตามความสมเหมาะของพื้นที่งาน



- ให้กำหนดชื่อตัวแปรของตัวเลข ในพาแนล Properties ว่า "clock"


ขั้นตอนที่ 2
2.1 ให้สร้าง text สำหรับเป็นตัวแปร "วัน" ในขั้นตอนนี้ สำหรับคนที่ใช้โปรแกรม AI ไม่เป็น ก็ให้ใช้เครื่องมือ Text Tool พิมพ์ตัวอักษรลงไป ตามจำนวนวันเป็นภาษาอังกฤษ เช่น Mon/ Tue/ Wed/ Thu / Fri /Sat / Sun  (ถ้าพิมพ์ใน Flash เป็นภาษาไทย แล้วมันจะชอบมีปัญหา แล้วก็ไม่ค่อยมี Text ตัวสวยๆให้เลือกใช้) ถ้าพิมพ์เสร็จแล้ว ก็ให้ข้ามไปทำข้อ 2.8 ต่อได้เลยค่ะ

สำหรับคนที่พอจะใช้โปรแกรม AI เป็นบ้างนิดนห่อยนะค่ะ ก็ให้พิมพ์ Text แทนตัวแปรวันลงไปเป็นภาษาไทยให้ครบตามจำนวนวันค่ะ เช่น วันจันทร์ / วันอังคาร / วันพุธ / วันพฤหัสบดี / วันศุกร์ / วันเสาร์ / วันอาทิตย์ เป็นต้น หลังจากปรับแต่งตัวอักษร(เลือกสี)และเลือกรูปแบบตัวอักษรจนพอใจแล้ว ก็ให้แดรกเม้าสฺ์เลือกตัวอักษรทั้งหมด และให้คลิกขวาเลือกคำสั่ง "Create Outlines" (เพื่อแปลง Text ให้กลายเป็นภาพ)



2.2 ให้แดรกเม้าส์เลือกภาพตัวอักษรทั้งหมด และกดปุ่ม Ctrl+ C เพื่อคัดลอก
2.3 จากนั้นให้ กลับไปที่โปรแกรม Flash และกดปุ่ม Ctrl+V
2.4 เลือกเมนูตัวเลือกตามภาพด้านล่าง และกด "OK"


2.5 ให้ทำการแปลงภาพตัวอักษรทั้งหมด ให้เป็น Symbol โดยให้คลิกที่ตัวอักษรทีละวัน เริ่มจากภาพตัวอักษร "วันจันทร์" ก่อน และไปที่คำสั่ง Modify > convert to Symbol...(หรือกดปุ่มF8)


2.6 ตั้งชื่อ Symbol ว่า "1"


2.7 ส่วนภาพตัวอักษรวันอื่นๆที่เหลือก็ทำแบบเดียวกันค่ะ โดยตั้งชื่อเรียงตามลำดับ ดังตัวอย่างด้านล่าง
- วันจันทร์ symbol ชื่อ "1"
- วันอังคาร symbol ชื่อ "2"
- วันพุธ symbol ชื่อ "3"
- วันพฤหัสบดี symbol ชื่อ "4"
- วันศุกร์ symbol ชื่อ "5"
- วันเสาร์ symbol ชื่อ "6"
- วันอาทิตย์ symbol ชื่อ "7"

2.8 หลังจากแปลงภาพตัวอักษรวันให้เป็นชนิด Symbol ครบทั้ง 7 ตัวแล้ว ก็ให้เปิดพาแนล Properties และตั้งชื่อตัวแปรให้กับ Symbol แต่วัน 7 ตัว(7วัน) เช่น วันจันทร์ก็ตั้งชื่อ "ตัวแปร" ว่า "mon" (ใช้ตัวพิมพ์เล็กทั้งหมด)



- วันจันทร์ ตัวแปร ชื่อ "mon"
- วันอังคาร ตัวแปร ชื่อ "tue"
- วันพุธ ตัวแปร ชื่อ "wed"
- วันพฤหัสบดี ตัวแปร ชื่อ "thu"
- วันศุกร์ ตัวแปร ชื่อ "fri"
- วันเสาร์ ตัวแปร ชื่อ "sat"
- วันอาทิตย์ ตัวแปร ชื่อ "sun"

(ทำให้ครบทั้ง 7 วันเลยนะค่ะ)


2.9 เสร็จแล้วก็ให้นำ Symbol ทั้ง 7 ตัว ย้ายมาวางซ้อนทับกันดังภาพด้านล่าง


ขั้นตอนที่ 3
- ให้ทำการเปิดไฟล์ใหม่ โดยไปที่คำสั่ง File > New... เลือกข้อ "ActionScript File"



- หลังจากเปิดไฟล์ใหม่ขึ้นมาแล้วให้ใส่โค๊ด Java Script ลงไปดังนี้ค่ะ

1. package
   
2. {
   
3. import flash.display.MovieClip;
   
4. import flash.utils.Timer;
   
5. import flash.events.TimerEvent;
   
6. public class main_clock extends MovieClip
   
7. {
   
8.   var date:Date = new Date();
   
9.   var day:int = date.day;
   
10.   var hours:int = date.hours;
    
11.   var minutes:* = date.minutes;
    
12.   var seconds:* = date.seconds;
    
13.   var timer:Timer = new Timer(1000);
    
14.   public function main_clock():void
    
15.   {
    
16.    updateClock();
    
17.    
    
18.    hideObjects(mon, tue, wed, thu, fri, sat, sun);
    
19.    
    
20.    showCurrentDay();
    
21.    timer.addEventListener(TimerEvent.TIMER, startClock);
    
22.    timer.start();
    
23.   }
    
24.   
    
25.   private function updateClock():void
    
26.   {
    
27.       if (hours>24)
    
28.    {
    
29.     hours-=24
    
30.    }
    
31.    if (String(minutes).length<2)
    
32.    {
    
33.     minutes="0"+minutes;
    
34.    }
    
35.    if (String(seconds).length<2)
    
36.    {
    
37.     seconds="0"+seconds;
    
38.    }
    
39.    clock.text=hours+":"+minutes+":"+seconds;
    
40.   }
    
41.   private function hideObjects(...targets)
    
42.   {
    
43.    for (var i:int = 0; i < targets.length; i++)
    
44.    {
    
45.     targets[i].visible=false;
    
46.    }
    
47.   }
    
48.   private function showCurrentDay():void
    
49.   {
    
50.    switch (day)
    
51.    {
    
52.     case 0 :
    
53.      sun.visible=true;
    
54.      break;
    
55.     case 1 :
    
56.      mon.visible=true;
    
57.      break;
    
58.     case 2 :
    
59.      tue.visible=true;
    
60.      break;
    
61.     case 3 :
    
62.      wed.visible=true;
    
63.      break;
    
64.     case 4 :
    
65.      thu.visible=true;
    
66.      break;
    
67.     case 5 :
    
68.      fri.visible=true;
    
69.      break;
    
70.     case 6 :
    
71.      sat.visible=true;
    
72.      break;
    
73.     default :
    
74.      trace("Week day error");
    
75.    }
    
76.   }
    
77.   private function startClock(e:TimerEvent):void
    
78.   {
    
79.    date = new Date();
    
80.    hours=date.hours;
    
81.    minutes=date.minutes;
    
82.    seconds=date.seconds;
    
83.    
    
84.    updateClock();
    
85.   }
    
86. }
    
87. }

คัดลอกไปที่คลิปบอร์ด

(ภาพตัวอย่างประกอบ)


- จากนั้นก็ให้บันทึกไฟล์ โดยไปที่คำสั่ง Flie >Save ให้บันทึกไฟล์ตัวสคริปชื่อว่า "main_clock.as"
(ส่วนไฟล์งานตัวเดิมของเรา .fla ให้บันทึกไฟล์เป็นชื่ออะไรก็ได้ค่ะ)

ขั้นตอนที่ 4
- ให้กลับมาที่หน้า .fla ที่เรายังทำค้างไว้ ให้คลิกที่พื้นที่ว่างตรงไหนในหน้าจอโปรแกรมก็ได้ 1 ครั้ง เพื่อยกเลิกการเลือกทั้งหมด แล้วก็ให้พิมพ์ชื่อสคริป "main_clock" ลงไปในช่อง Class ดังภาพด้านล่างค่ะ



- แล้วก็ให้กดปุ่ม Ctrl+Enter เพื่อรันสคริปดู จะได้ผลลัพธ์ตามนี้ค่ะ จะเห็นว่า ทั้งเวลาและวันที่ ณ ปัจจุบัน (วันที่นั่งทำภาพประกอบคือ"วันอังคาร") จะถูกแสดงขึ้นตรงตามเวลาสากล ส่วนวันอื่นๆจะถูกซ่อนไว้ แบบนี้ถือว่าถูกต้องค่ะ



ขั้นตอนที่ 5
- ถึงวันและเวลาจะแสดงตรงตามสากลเวลาแล้ว แต่มันก็มีแต่หน้าตัวเลขแห้งๆ โล่งๆ
- เราจะทำการปรับแต่งตัวเลขให้ดูน่าสนใจขึ้นหน่อย โดยใช้พาแนล Properties เปลี่ยนสีตัวเลขให้เป็นสีเขียว


- แล้วก็ใส่เอฟเฟค ให้กับตัวเลข โดยให้เปิดพาแนลย่อย "FILTERS" คลิกที่ปุ่ม "Add Filter" เลือกคำสั่ง "Glow" (เรือแสง)


- คลิกที่ช่อง "color" เลือกสีของ Glow เป็นสีเขียวสีนีออน


ขั้นตอนที่ 6
- ให้สร้างภาพพื้นหลังขึ้น จะทำโดยโปรแกรมอะไรก็ได้แล้วแต่ถนัด สำหรับภาพพื้นหลังอ้านล่างนี้ ข้าพเจ้าจากทำจากโปรแกรม AI เพราะอยากให้เป็น Vector เหมือนภาพที่วาดจากโปรแกรม Flash โดยตรง และขนาดไฟล์ตอนเอาขึ้นเว็บก็จะได้เล็กด้วย

(วิธีนำภาพพื้นหลังที่สร้างจากโปรแกรม AI มาใส่ที่โปรแกรม Flash ขั้นตอนที่ 2.1 - 2.4)


- นำภาพพื้นหลังไปวางไปที่เลเยอร์ล่างสุด แล้วก็จัดวาง "เวลา" และ "วัน" ให้แสดงพอดีกับกรอบพื้นหลัง



- เสร็จแล้วค่ะ ^^"


ขอให้สนุกกับทุกชิ้นงานนะค่ะ

บทความโดย NOOKFUFU2
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)

haneemony

ขอบคุณครับ

kitiporn

ขอบคุณสำหรับบทความครับ

talasine

thx