Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Flash วิธีทำ Clock แบบตัวเลข และแสดง ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 5767|ตอบ: 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, 24-9-2017 17:28 , Processed in 0.071311 second(s), 23 queries .

Powered by Discuz! X1.5

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

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books