Flash – Action Script 3.0 กับวันและเวลา

15/08/2013

สร้าง Text Animate ด้วยโปรแกรม Adobe After Effect กันเถอะ !!!

19/08/2013

พื้นฐานการสร้างนาฬิกาด้วย Flash

18/08/2013
empty image
empty image

ดูพื้นฐานเรื่องเวลากันไปแล้ว คราวนี้ลองมาสร้างนาฬิกาใช้นกันบ้าง จริงๆ โหลดเอาก็ได้เนอะ เต็มไปหมดเลย นาฬิกา flash แต่พอดีอยากจะทำเองอ่ะ ฮ่าๆ จะทำทั้งแบบ Analog และแบบบ Digital เลยละกัน

Analog Clock นาฬิกาอะนาล็อก

 

นาฬิกาแบบนี้ทำยากเหมือนกันนะ แต่ถ้าเข้าใจก็ไม่ยากหรอก (มั้ง) … ก่อนอื่นคิดก่อนนะ เราจะให้เข็มมันเดินรอบวงกลมซึ่งมี 360 องศา ลองมาคำนวนองศาการเดินคร่าวๆก่อน

– เข็มวินาทีมันเดิน 60 ครั้ง มันก็จะคิดเป็น 360/60 =  6 องศา / วินาที
– เข็มนาทีมันเดิน 60 ครั้งเหมือนกัน คิดเป็น 6 องศา / นาที
– เข็มชั่วโมงก็ 60 ครั้ง เอ้ย 24 ครั้ง คิดเป็น 24 ครั้ง ผิดแล้ว !!! จริงๆ แล้วต้องเป็น 12 เพราะนาฬิกาทั่วไปเรามี 12 ตัวเลข เป็น 12 ชั่วโมง เพียงแต่มันเดิน 2 รอบใน 1 วัน เลยกลายเป็น 24 ชั่วโมง
สรุปว่า 360/12 = 30 องศา / ชั่วโมง

จากข้างบนก็จะเขียนเป็นอัลกอรึทึมได้ว่า
เข็มวินาที.องศา=วินาที*6
เข็มนาที.องศา=นาที*6
เข็มชั่วโมง.องศา=ชั่วโมง*30
นี่คืออัลกอริทึมที่ 1
ตัวอย่างที่ได้ ดูตัวอย่างไปก่อนนะ เดี๋ยวค่อยทำ

ถ้าใครนั่งจ้องอยู่ 1 ชม. (*0*) จะเห็นว่า

เข็มวินาที เดินทุกๆ 1 วินาที
เข็มนาที เดินทุกๆ 1 นาที
เข็มชั่วโมง เดินทุกๆ 1 ชม.

ดูแปลกๆ มั้ย แปลกคือ 1 ชม. เข็มชม. (เข็มสั้น) เดิน แก๊กมาเลย 30 องศา ถ้าครบ ชม. (-..-) ไม่มีนาฬิกาที่ไหนมันเดินแบบนี้ (จริงๆก็มีแหละ) เข็มสั้นเดินข้ามตัวเลข 1 ไป 2 จาก 2 ไป 3 เข็มนาทีก็เหมือนกัน ซึ่งมันไม่ใช่ มันต้องค่อยๆ เดิน ทุกๆ วินาทีที่เข็มวินาทีเดิน เข็มทุกเข้มมันจะเดินตามโดยอัตราส่วนที่กำหนดไว้
เคยแกะนาฬิกาปลุกออกมาเล่นป่ะ สมัยประถม โรงเรียนแจกได้แจกดี กลัวเด็กตื่นไม่ทันล่ะมั้ง ฮ่าๆๆ คือทุกครั้งที่เฟืองวินาทีหมุน เฟืองทุกเฟืองจะขยับตามกันหมด เราเลยต้องมาปรับปรุงอัลกอริทึมใหม่
ซึ่งผมไปค้นหาอยู่นานเลย แต่พอค้นเป็นภาษาไทย แปบเดียวเจอเลย -..- ตามนี้…
ปัญหามุมบนหน้าปัดนาฬิกา
และยังไม่พอ ผมจะให้เข็มนาทีเดิน ทุกครั้งที่เข็มวินาทีเดินด้วย
60 วินาที เข็มนาทีเดิน 6 องศา
1 วินาที เข็มนาทีเดิน 6/60 = 0.1 องศา เขียนเป็นสูตรได้ว่า ( วินาที / 60 * 6 )
ลองเช็คดูซิ 1/60*6 = 0.1 โอเคถูกต้อง

ได้อัลกอริทึมใหม่เป็นอัลกอริทึมที่สอง คือ
เข็มวินาที.องศา=วินาที*6 
เข็มนาที.องศา=(นาที*6)+(วินาที/60*6) เอาตัวร่วมออกเป็น (นาที+(วินาที/60))*6 
เข็มชั่วโมง.องศา=(1/2)*(60*ชั่วโมง+นาที)

โอเคได้ละ คราวนี้จะมาเขียนโค้ดด้วย Action Script 3

1. เขียนอัลกอริทึมที่ 2 ข้างบนให้เป็น AS3 จะอธิบายแบบละเอียดเลยนะ

var Now:Date = new Date(); //วันเวลา มันอยู่ในคลาส Date ต้องสร้าง Object Date ขึ้นมาเก็บที่ Now
var SS:uint=Now.seconds; //นำเลขวินาที จาก Now ไปเก็บไว้ที่ SS
var MM:uint=Now.minutes; //นำเลขบอกนาที จาก Now ไปเก็บไว้ที่ MM
var HH:uint=Now.hours; //นำเลขบอก ชม. จาก Now ไปเก็บไว้ที่ HH
//กำหนดให้เข็มมีการหมุนไปตามอัลกอริทึมที่สอง
SS_hand.rotation=SS*6;
MM_hand.rotation=(MM+(SS/60))*6;
HH_hand.rotation=(1/2)*(60*HH+MM);

เสร็จแล้ว ต่อไปเราจะทำยังไง ให้มันทำงานตลอดเวลา แน่นอน ต้องให้เหตุการณ์มาช่วย ถ้าใช้เหตุการณ์ Enter Frame มันเรียกบ่อยไปนะ เราเลยใช้ Timer ดีกว่า เรียกฟังก์ชันทุกๆ 1 วินาที เป็นการรีเฟชการทำงานทุกๆ 1 วินาทีนั่นเอง

var mytime:Timer=new Timer(1000);
mytime.addEventListener(TimerEvent.TIMER, Clock_Start);
mytime.start();

สรุปโค้ดข้างบน ทุกครั้งที่ mytime เดิน 1 วินาที ให้ไปทำงานฟังก์ชัน Clock_Start
เอาโค้ดที่เป็นอัลกอริทึมที่ 2 มาใส่เป็นฟังก์ชัน จะได้เป็นโค้ดทั้งหมดเลยคือ …

var mytime:Timer=new Timer(1000); //ตั้งเวลาให้เดิน ทุกๆ 1 วินาที
mytime.addEventListener(TimerEvent.TIMER, Clock_Start); //ทุกครั้งที่เวลาเดินให้ทำ Clock_Start
mytime.start();//เวลาเริ่มเดิน และแน่นอนฟังก์ชัน Clock_Start จะทำงาน
function Clock_Start(evt:TimerEvent) {
   var Now:Date = new Date();
   var SS:uint=Now.seconds;
   var MM:uint=Now.minutes;
   var HH:uint=Now.hours;
   SS_hand.rotation=SS*6;
   MM_hand.rotation=(MM+(SS/60))*6;
   HH_hand.rotation=(1/2)*(60*HH+MM);
}

เสร็จเรียบร้อยในส่วนของโค้ดเพื่อควบคุมเข็มนาฬิกา เอาโค้ดก็เสร็จนานล่ะ จะเขียนอะไรมาซะยาว -..-
ต่อไปจะเป็นการสร้างตัวนาฬิกาและตัวเข็มกันล่ะ…

Note : 
– คิดไปคิดมาทำให้ผมเข้าใจว่า การคูณทำให้หน่วยเล็กลง การหารทำให้หน่วยใหญ่ขึ้น
ตอนเรียนไม่เคยตั้งใจเล๊ยยย
– จะเห็นว่าองศาของเข็มชั่วโมง สมมติเวลา 14.30 องศาเข็ม ชม. จะเป็น 1/2*60*14+30 = 435 ซึ่งมันเกิน แต่โปรแกรมมันคิดให้เอง คือถ้าเกินเดี๋ยวมันก็เริ่มนับเป็น 1 ใหม่ ก็จะเป็น 75 องศา หรือเอา 435-360 = 75 ซึ่งเข็มจะชี้อยู่ตรงกลางระหวางเลข 2 กับเลข 3 ซึ่งมันก็เป็นจริง

1. ตัวเรือน

สามารถ…
– import นำเข้ารูปจากข้างนอกมาใส่ อาจจะเป็นรูปตัวเองก็ได้
– วาดเอง

นำเข้ารูป

ก็ใช้รูปตัวเองที่มี หรือหาเอาก็ได้ ถ้าหาจาก Google ลองใช้คำค้นรูป “นาฬิกา” , “a analog clock” ก็จะเจอรูปนาฬิกาได้ไม่ยาก
จากนั้นก็ทำการเซฟภาพ
แล้ว…มันต้องลบเข็มออกด้วยสินะ จะใช้ Photoshop ก็ได้ จากนั้น import หรือลากวางในโปรแกรมได้เลย ไม่แนะนำให้ Trace Bitmap ใน Flash เพราะถ้าเลือกความละเอียดสูง คอมค้างเลยหง่ะ ฮ่าๆๆ แต่ถ้าเลือกต่ำ ภาพก็เละ -..- จริงๆ ภาพนาฬิกาไม่มีเข็มมันก็มี ลองหาดูๆ
ได้ภาพนาฬิกาแล้ว…

วาดเอง

1. New Symbol ขึ้นมา ตั้งชื่อ … จากนั้นก็ลงมือวาด

– ใช้ Line Tool [N] วาดเส้น

– จากนั้น [Ctrl+C] และ [Ctrl+Shift+C] เพื่อก๊อปปี้แล้วก็วางที่เดิม จากนั้นหมุนโดยใช้ Penal Transform โดยหมุนไป 90 องศา คลิกแล้วพิมพ์เลข 90 หรือลากไปทางขวา

– จากนั้นก็ดับเบิ้ลคลิกเส้นทั้งหมดแล้ว  [Ctrl+C] และ [Ctrl+Shift+C] แล้วหมุนไปอีก 30
– จากนั้นก็ดับเบิ้ลคลิกเส้นทั้งหมดแล้ว  [Ctrl+C] และ [Ctrl+Shift+C] แล้วหมุนไปอีก 30 เป็น 60

 

ก็จะได้เส้น ที่แบ่งตัวเลขเป็น 12 ตัวเท่าๆ กัน ตัวละ 30 องศา
ถ้าเส้นที่วาดมันเล็ก ก็สามารถขยายเพิ่มขึ้นได้ โดยเลือกเส้นทั้งหมด แล้วดูที่ Penal Transform แล้วก็ scale มันเพิ่มหรือลด ก็แล้วแต่

– กด Ctrl+Atl+G เพื่อโชว์เส้นกริด

ตั้งค่าตามข้างบนเลย
– ดับเบิ้ลคลิกเพื่อลากเส้นที่วาดไปวางไว้ให้อยู่ตรงจุดกึ่งกลางของ Symbol ลากไปใกล้ๆ เดียวมันจะดูดเข้าหาเอง เสร็จแล้วก็จะได้ดังรูปด้านล้าง

– สร้างเลเยอร์ใหม่ แล้ววาดวงกลม ใช้ Oval Tool [O] โดยเริ่มวาดจากจุดสีแดงๆ ในรูป แล้วลาก มันจะล๊อกให้เอง รับรองตรงแน่นอน

– จากนั้นก็ก๊อปปี้โดยการ [Ctrl+C] และ [Ctrl+Shift +V] แล้วก็ Scale ขึ้นลง ปรับขนาดตามใจ
– แล้วทำการก็อปปี้เส้นจากเลเยอร์ที่ 2 มาไว้เลเยอร์ที่ 1 ให้มันทับกับเส้นที่แบ่งไว้ 12 เส้นนั้นอ่ะ คือเพื่อให้เส้นมันติดกัน พอมันติดกันเราก็จะลบออกได้

– เมื่อลบเส้นออกก็จะได้ดังภาพด้านล่าง อย่าลืมยกเลิกเส้นกริด โดยกด [Ctrl+Alt+G] แล้วติ๊กออกให้หมด 3 ช่องอ่ะ

– ใส่ตัวเลขไปสิ … โดยสร้างเลเยอร์ใหม่ขึ้นมา แล้วก็พิมพ์ตัวเลข หรืออักษร หรืออะไรก็แล้วแต่ จากนั้นควรจะ Break Apart ให้เป็นรูปไปเลย เพื่อจะได้ไม่มีปัญหาเวลาเอาไปเปิดที่อื่น (แต่ก็จะแก้ตัวอักษรไม่ได้แล้วนะ ฮ่าๆ) หรือไม่ก็ฝังฟอต์นเข้าในไฟล์ด้วยเลย
เสร็จแล้วตกแต่งนิดหน่อยก็จะได้ประมาณนี้… อยากจะทำตัวอักษรโค้งตามเส้น แต่ Flash มันทำไม่ได้หง่ะ ต้องทำใน Illustrator

เสร็จแล้วสำหรับตัวเรือนอย่างง่ายๆ แต่องค์ประกอบทุกอย่างลงตัว
ต่อไปเป็นเข็ม…

2. ตัวเข็ม

1. ก่อนอื่นให้นำตัวเรือนที่วาดไว้แล้วมาใส่ใน Scene จากนั้นสร้างเลเยอร์ขึ้นมาใหม่เพื่อวาดเข็ม

– วาดเข็มวินาที จะใช้ Line Tool หรือจะวาดเป็นรูปก็ได้ จากนั้น แปลงเป็น Symbol Movie Clip ตั้งชื่อ SS_hand หรือเข็มสั้นอะไรก็ว่าไป ตรง Registration ให้เลือกจุดกลาง ล่างสุด ดังรูป ซึ่งมันจะเป็นจุดหมุนของเข็ม

แล้วใน Properties ตั้งชื่อ Instance name ว่า SS_hand

– เข็มอื่นๆ ที่เหลือใครจะวาดใหม่ก็ได้ แล้วก็ทำตามด้านบน แต่ผมขี้เกียจวาดใหม่ฮ่าๆ ผมใช้เข็มเดียวทั้งหมดเลย แค่เปลี่ยนชื่อตรง instance name
เข็มวินาทีชื่อ SS_hand
เข็มยาวชื่อ MM_hand
เข็มสั้นชื่อ HH_hand

– สร้างเลเยอร์ขึ้นมาใหม่เพื่อใส่ Action Script กด F9 ใส่

กด Test Movie ดู แล้วจะพบความอัศจรรย์ -..-

Download Source https://www.dropbox.com/s/t0qo3e2g0ikgfcp/analog_clock.fla

Ref.
http://th.wikipedia.org/wiki/ปัญหามุมบนหน้าปัดนาฬิกา
help.adobe.com

Digital Clock นาฬิกาดิจิตอล

 

ที่ผ่านมาอะนาล๊อก เหมือนจะยุ่งยากไปหน่อย มาดิจิตอลนี่ง่ายหน่อย เพราะดึงตัวเลขไปแสดงได้เลย
ส่วนโค้ดก็เอาจากอะนาล๊อกมาได้เลย ฮ่าๆ
มาเริ่มกันเลย

1. วาด ก็ผมวาดเป็นกรอบๆ ละกัน ใครอยากจะตกแต่งยังไงก็ตามสบายเลย

– วาดเสร็จแล้วเลือกเครื่องมือ Text Tool ไม่ต้องพิมพ์ข้อความ ขยายกรอบให้ พอดี ทดลองพิมพ์ 00.00.00 ดู เอาให้ขนาดพอดีนี้แหละ
– ตั้งชื่อ instance name ว่า txt_time ถ้าตั้งเป้นชื่ออื่น ในโค้ดก็ต้องเปลี่ยนด้วย
– ชนิดข้อความเลือกเป็น Dynamic Text

2. ใส่โค้ดนี้ลงไป เสร็จแล้ว !!!

var mytime:Timer=new Timer(1000);//ตั้งเวลาให้เดิน ทุกๆ 1 วินาที
mytime.addEventListener(TimerEvent.TIMER, Clock_Start);//ทุกครั้งที่เวลาเดินให้ทำ Clock_Start
mytime.start();//เวลาเริ่มเดิน และแน่นอนฟังก์ชัน Clock_Start จะทำงาน
function Clock_Start(evt:TimerEvent) {
 var Now:Date = new Date();
 var SS:uint=Now.seconds;
 var MM:uint=Now.minutes;
 var HH:uint=Now.hours;
        txt_time.text=String(HH+" : "+MM+" : "+SS);//ให้กล่องข้อความแสดงข้อความเวลา
}

ทดสอบ test movie ดู
แต่… เมื่อมองไปซักพักจะเห็นว่า ถ้าตัวเลขแสดงเป็นหลักหน่วย มันก้จะแสดงแค่ตัวเดียว ทำให้ข้อความมันขยับไปขยับมา เราจะเพิ่มเลข 0 เข้าไปข้างหน้า ถ้าตัวเลขมันไม่ถึง 10 ซึ่งก็จะเป็น 01, 02, 03 ประมาณนี้
จะได้โค้ดใหม่เป็น

var mytime:Timer=new Timer(1000);
mytime.addEventListener(TimerEvent.TIMER, Clock_Start);
mytime.start();
function Clock_Start(evt:TimerEvent) {
 var Now:Date = new Date();
 var SS:uint=Now.seconds;
 var MM:uint=Now.minutes;
 var HH:uint=Now.hours;
 var txt_SS=(SS<10)? "0"+SS : SS;
 var txt_MM=(MM<10)? "0"+MM : MM;
 var txt_HH=(HH<10)? "0"+HH : HH;
 txt_time.text=(txt_HH+":"+txt_MM+":"+txt_SS);
}

ใช้เงื่อนไข if เข้ามาเช็คว่าถ้าตัวเลขมากกว่า 10 ให้เติม 0 ข้างหน้า แต่ถ้าเป็นเท็จ ก็พิมพ์ค่าเดิม
แต่…ไหน ไม่เห็นมี if ซักตัว… อ้าาาา เพราะใช้ short if นั่นเอง โดยมีรูปแบบว่า

(เงื่อนไข)? “เมื่อเป็นจริงทำคำสั่งนี้” : “เมื่อเป็นเท็จทำคำสั่งนี้”;
OK ? เย้…นอน Zzz

Ref.
http://kirill-poletaev.blogspot.com/2010/07/how-to-make-digital-clock-using.html
http://helpx.adobe.com/flash/using/embed-fonts-consistent-text-appearance.html