Thaigraph

 

   

ค้นหา
Thaigraph หน้าย่อย Flash วิธีทำ Clock แบบตัวเลข และแสดง ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 5239|ตอบ: 4
go

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

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 26-2-2013 20:35 |แสดงโพสต์ทั้งหมด


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




โหลดไฟล์ต้นฉบับ (ver. Flash Cs6)
[hide][/hide]
ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 26-2-2013 21:45 |แสดงโพสต์ทั้งหมด

ขั้นตอนที่ 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
(ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น!!!)
ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Rank: 10Rank: 10Rank: 10

โพสต์เมื่อ 2-5-2013 23:16 |แสดงโพสต์ทั้งหมด
ขอบคุณครับ

Rank: 10Rank: 10Rank: 10

โพสต์เมื่อ 16-11-2014 20:26 |แสดงโพสต์ทั้งหมด
ขอบคุณสำหรับบทความครับ

Rank: 1

โพสต์เมื่อ 16-6-2015 15:50 |แสดงโพสต์ทั้งหมด
thx

Thaigraph

GMT+7, 29-3-2017 18:14 , Processed in 0.119290 second(s), 23 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.