ส.ค.ส. ๒๕๕๑

สวัสดีปีใหม่ ๒๕๕๑

เนื่องในศุภวารดิถีขึ้นปีใหม่ พุธศักราช ๒๕๕๑

ขออวยพรให้ท่านผู้อ่านหนังสือ "เรียนรู้ด้วยตนเอง OOP C# ASP.NET" และผู้อ่านบลอกทุกท่าน จงประสบความสำเร็จในการนำ OOP ไปใช้ประโยชน์ในหน้าที่การงาน ประสบความสำเร็จในการเปลี่ยนวิธีคิดจากแบบเดิมเป็นแบบ OOP และประสบความสำเร็จในการศึกษาวิชา OOP ดังที่ท่านมุ่งหวังไว้ทุกประการ

ด้วยความเคารพ

ลาภลอย วานิชอังกูร

ActionScript 3 ตอน 1

ไปหน้าแรก | สารบัญ | Laploy.com |  ระเบียนบทความ | บทความจากลาภลอย

สร้างเว็บลวดลายจัด

บทความโดย ลาภลอย วานิชอังกูร (laploy.com) จากนิตยสาร Windows IT Pro

ยุคการสร้าง application ในเว็บมาถึงนานแล้ว นานจนกระทั่งคำว่า client/server ไม่มีใครพูดกันอีก เพราะใครๆ ก็สร้าง web application (webapp) ที่เป็น client/server จนเป็นเรื่องธรรมดา แต่ webapp วันนี้จะไม่เป็นเพียง form ที่มีช่องให้กรอกมีปุ่ม submit ให้กดส่งข้อมูลอีกต่อไป webapp สมัยใหม่ต้องมีลูกเล่นมากมีลวดลายจัด

RIS ย่อจาก Rich Internet Application เป็น webapp ที่มีอินเตอร์เฟสหรือการใช้งานสวยงาม มีลูกเล่น เครื่องอำนวยความสะดวกน้องๆ desktop application หากท่านนึกไม่ออกว่า RIS เป็นอย่างไรลองดูเว็บไซต์ desktoptwo.com ก็แล้วกัน ผู้เขียนทดลองใช้งานดูแล้วแทบไม่อยากเชื่อว่าเป็น webapp เพราะมีองค์ประกอบต่างๆ ราวกับเป็น shell แบบ GUI ของ OS เต็มยศ

 

เว็บไซต์ desktoptwo นำเสนอการใช้งานในเว็บแบบใหม่ โปรแกรมเต็มไปด้วยคุณสมบัติที่ปรกติจะพบได้เฉพาะใน desktop application ผู้สร้าง desktoptwo ทำเช่นนั้นได้อย่างไร? คำตอบคือใช้ภาษาและเครื่องมือพัฒนาเว็บยุคใหม่ ซึ่งก็คือ RIS นั่นเอง

 

ในบทความตอนนี้ท่านจะได้เรียนรู้เทคนิกการสร้าง RIS และสิ่งต่างๆ ต่อไปนี้

• ภาษา ActionScript 3
• เทคโนโลยี Flex
• ภาษา MXML
• การสร้าง RIS โดยใช้ Flex Builder 2
• ทดลองเขียนโปรแกรม Hello, World!
• เขียนโปรแกรมวาดภาพวงกลมในเว็บ
• วิธีนิยามคลาสวาดวงกลมแบบ OOP
• เขียนโปรแกรมวาดภาพดาว 1,500 ดวง

 

ActionScript 3

หน้าเว็บอย่าง Desktoptwo ถูกสร้างด้วยเทคโนโลยี Flash เดิมทีผู้สร้างเว็บไซต์มักนำ Flash มาสร้างเป็นไตเติ้ลของเว็บไซต์ เพราะสามารถใส่ภาพเคลื่อนไหวและดนตรีได้ บางคนก็สร้างทั้งเว็บไซต์จาก Flash ไปเลย ทำให้มีเมนูและมีลูกเล่นต่างๆ ได้หลายอย่าง แต่ก็ทำอะไรจริงจังไม่ได้มาก เพราะภาษาสคริปต์ของ Flash (ชื่อภาษา ActionScript) มีความสามารถจำกัด เขียนได้แค่สคริปต์เล็กน้อยๆ สำหรับมือสมัครเล่นไว้ทำอะไรสนุกๆ นักเขียนโค้ดมืออาชีพไม่อยากข้องแวะด้วย เพราะภาษา ActionScript ต้องใช้คู่กับ time line ของ Flash เพื่อบังคับการทำงานของ sprite นักเขียนโค้ดมืออาชีพจะงงว่าทำไมต้องมี time line อะไรคือ Movie Clip อะไรคือ scene

แต่ตอนนี้สถานการณ์เปลี่ยนไปแล้ว ActionScript พัฒนามาถึงเวอร์ชัน 3 (ต่อไปจะเรียกย่อว่า AS3) ยึดตามสเปคของ ECMAScript เวอร์ชันสี่ (ที่ยังร่างไม่เสร็จ) AS3 เป็นภาษาคอมพิวเตอร์เต็มรูปแบบ มีคุณสมบัติต่างๆ ที่ภาษาสมัยใหม่พึงมี เช่นสนับสนุน OOP เต็มขั้น (คือเป็น class base ไม่ใช่ prototype base อย่างแต่ก่อน) เป็น strong type, type safety, exception handling และอื่นๆ พร้อมมูล ทำให้การพัฒนาโปรแกรมมีวิธีไม่ต่างจากการพัฒนาโปรแกรมด้วยภาษา Java หรือ C# มากนัก สามารถสร้าง webapp ที่ซับซ้อนมากๆ ได้อย่างสบาย และ time line กลายเป็นอดีตไปเสียแล้ว

 

Flex technology

บริษัท Adobe คงกลัวว่าลำพัง AS3 อย่างเดียววิธีพัฒนาโปรแกรมยังไม่เหมือน Java และ C# มากพอ จึงสร้างเทคโนโลยีอีกอย่างมาใช้คู่กันเรียกว่า Flex technology เทคโนโลยีนี้เน้นการใช้ภาษา MXML ร่วมกับภาษา AS3 เพื่อสร้าง .swf ที่มีการทำงานซับซ้อนได้ทุกรูปแบบ โดยจะทำงานบน Virtual Machine เรียกว่า AVM2 ที่เด็ดคือ AVM2 ไม่ได้มีเฉพาะบนวินโดวส์ แต่มีบน Linux และ OSX ด้วย ทำให้การพัฒนาโปรแกรมด้วย Flex technology มีคุณสมบัติไม่ขึ้นกับ platform เช่นเดียวกับภาษา Java และมี IDE ที่สร้าง user interface ได้ง่ายด้วยการลากหยอดเหมือน Visual Studio และ NetBeans

 

ภาษา MXML

เป็นภาษาสคริปต์สำหรับพรรณนาสิ่งต่างๆ บนหน้าเว็บเช่นเดียวกับ HTML และ XML เป็นภาษาที่ Adobe พัฒนาขึ้นเพื่อสนับสนุนเทคโนโลยี Flash และ Flex ลองดูตัวอย่างโค้ด

ที่เห็นข้างบนคือโค้ดภาษา MXML ทำหน้าที่แสดงหน้าเว็บในภาพ มีองค์ประกอบเพียงสองอย่าง อย่างแรกคือรูปภาพ และอย่างที่สองคือปุ่มแบบ popup จะเห็นว่าภาษา MXML ไม่ได้แปลกประหลาดหรือเขียนยาก แต่เรามักไม่ต้องเขียนเอง เพราะเครื่องมือพัฒนาโปรแกรม (IDE) จะสร้างโค้ดให้โดยอัตโนมัติเมื่อเมื่อเราลากและหยอดองค์ประกอบต่างๆ

 

ผลลัพธ์จากโค้ดภาษา MXML ในตัวอย่าง

 

AS3 + Flex = RIS

เมื่อเรานำภาษา AS3 และ MXML มาใช้งานร่วมกันเราสามารถสร้าง webapp ที่มีลวดลายจัด มีคุณสมบัติซับซ้อนราวกับเป็น desktop application ได้อย่างน่าทึ่ง

การสร้าง webapp ด้วยเทคโนโลยี Flex มีข้อดีดังนี้

• ลวดลายจัด: ทำมัลติมีเดีย กราฟฟิค ดนตรี วิดีโอ และสื่อต่างๆ สารพัด
• วาดรูป : สร้างรูปกราฟฟิคแบบ vector graphic ได้ง่าย
• เป็น OOP : วิธีทาง OOP ของภาษา AS3 แทบจะเหมือนภาษา Java และ C#
• เหนือกว่า JavaScript : นักเขียน JavaScript ควรหันมามอง AS3 เพราะภาษาคล้ายกัน แต่ AS3 ใช้การคอมไพล์ (ไปเป็นไบต์โค้ดที่รันใน Virtual machine ซึ่งมี JIT แปลเป็น native อีกที) ไม่ได้ใช้ interpreter อย่าง JavaScript
• ทำงานได้หลาย platform : เพียงแค่ platform นั้นมี Flash Player 9 ก็ทำงานได้แล้ว
• ตอบสนองเร็ว : AS3 เป็น client side script เหมือนภาษา JavaScript ทำให้การตอบสนองเกิดทันที ไม่ต้องรอการ post back/round trip เหมือนหน้าเว็บ ASP.NET หรือ JSP
• เขียนง่าย : นักเขียนโค้ดอาชีพสามารถเรียนวิธีเขียน AS3 ได้อย่างรวดเร็ว เพราะ AS3 มีคุณสมบัติต่างๆ คล้ายภาษา Java และภาษา C# ส่วน MXML ก็มีรูปแบบคล้ายภาษา XML มาก
• เครื่องมือพัฒนาดี : โปรแกรมแบบ IDE ของ Flex คล้ายกับที่นักเขียนโค้ดคุ้นเคยเมื่อทำงานด้วยภาษา Java และ C#

 

การสร้าง webapp ด้วยเทคโนโลยี Flex มีข้อเสียคือ

• ยากกว่า time line: การเขียนโปรแกรมทำ animation เป็นสิ่งที่ซับซ้อนพอสมควร นักเขียนโค้ดอาชีพส่วนใหญ่จะถนัดเขียนโค้ดเกี่ยวกับธุรกรรมมากกว่าเรื่อง computer graphic ส่วนนักเขียนโค้ดสมัครเล่นที่เดิมเคยใช้วิธีใส่ script ใน time line จะพบว่าการพัฒนา webapp เต็มรูปแบบไม่ใช่สิ่งที่ตนคุ้นเคย
• แปลนาน : มีคนบ่นกันมากเหมือนกันว่าทำไม compiler ของ Flex ถึงคอมไพล์โปรแกรมนานนัก แค่โปรแกรมสั้นๆ ไม่กี่บรรทัด มีคลาสไม่กี่ไฟล์ก็ใช้เวลาคอมไพล์หลายวินาที

 

เครื่องมือเขียนโปรแกรม

การเขียนโปรแกรม AS3 มีเครื่องเมื่อให้เลือกใช้ได้สามแบบคือ

• Flash CS3 IDE
• Flex Builder 2
• Flex 2 SDK command line compiler

แบบแรกสุดหรูสุดแต่ก็แพงที่สุดด้วยเช่นกัน เพราะเราต้องซื้อชุด CS3 ของบริษัท Adobe เหมาะสำหรับนักออกแบบ graphic นักสร้างเว็บไซต์ที่เป็นพวกหนักไปทางออกแบบ ไม่เน้นการเขียนโปรแกรม แบบที่สอง Flex Builder 2 (คือแบบที่ผู้เขียนเลือกใช้) ทำมาสำหรับนักพัฒนาซอฟท์แวร์ วิธีใช้งานคล้ายคลึงกับ Visual Studio หรือใครที่เขียนโปรแกรมภาษา Java ด้วย Eclipse จะคุ้นเคยมาก (เพราะสร้างจาก Eclipse) ส่วนแบบที่สามต้องใช้ text editor แล้วคอมไพล์โปรแกรมเอง สร้างไฟล์ต่างๆ เองทั้งหมดซึ่งไม่ใช่เรื่องน่าสนุกนัก

บริษัท Adobe ให้เราดาวน์โหลดเพื่อทดลองใช้ Flex Builder 2 ได้ฟรี ส่วนใครที่ใช้ Eclipse อยู่แล้วจะดาวน์โหลดเฉพาะส่วน plug-in ก็ยังได้ (ไปที่ adobe.com) การติดตั้งก็ทำเหมือนการติดตั้งโปรแกรมทั่วไปตามปรกติ ไม่มีอะไรแปลกประหลาด

หน้าดาวน์โหลด Flex Builder 2 ที่เว็บไซต์ adobe.com

เมื่อติดตั้งเสร็จเปิดโปรแกรมครั้งแรกจะได้ IDE หน้าตาแบบนี้ เป็น IDE มาตรฐาน ใช้ง่าย นักเขียนโค้ดทั่วไปคุ้นเคยกันดีอยู่แล้ว

 

Hello, World!

เป็นธรรมเนียมเมื่อได้ภาษาใหม่และ IDE ใหม่ก็ต้องเขียนโปรแกรม Hello, World! มาทดสอบกันก่อน ให้เปิด project ใหม่ (เลือกเป็นแบบ ActionScript project) ให้ตั้งชื่อ project ว่า HelloWorld แล้วพิมพ์โค้ดตามนี้ใส่ไว้ในไฟล์ HelloWorld.as

จากนั้นทดลอง run โปรแกรมในโหมด debug โดยกดเลือเมนู run / debug HelloWorld ผลลัพธ์ที่ได้จะเห็นข้อความ Hello, world ปรากฏในกรอบ Console

สิ่งต่างๆ ที่ควรสังเกตในโปรแกรมนี้คือ

1. คำสั่ง package เป็นการกำหนด package ทำหน้าที่จัดกลุ่มคลาส หรือ type ในงานเดียวกันไว้เป็นก้อนเดียวกัน (ในไฟล์นี้มีเพียงคลาสเดียว)
2. คำสั่ง import ทำหน้าที่จับรวม namespace ที่ต้องการมาคอมไพล์ร่วมด้วย
3. คลาส HelloWorld ทำหน้าที่เหมือนคลาส Main คือเป็นคลาสเริ่มต้นการทำงาน และโปรแกรมจะทำงานคำสั่งต่างๆ ในคลาสนี้ได้โดยตรง เราไม่จำเป็นต้องสร้าง object จากคลาสนี้ก่อน
4. function HelloWorld เป็น default constructor
5. คำสั่ง trace เหมือนคำสั่งชื่อเดียวกันในภาษา JavaScript

 

วาดภาพวงกลม

จุดเด่นของ AS3 คือสร้างกราฟฟิคได้ง่าย เพราะมี API ด้านกราฟฟิคมาให้เพียบ (อยู่ในตัว runtime ภายใน Flash Player 9) ดังนั้นต่อไปเราจะลองวาดภาพวงกลม ให้เปิด project ใหม่ (เลือกเป็นแบบ ActionScript project) ให้ตั้งชื่อ project ว่า Ball01 แล้วพิมพ์โค้ดตามนี้ใส่ไว้ในไฟล์ Ball01.as

จากนั้นทดลอง run โดยกดปุ่ม run (ปุ่มที่มีสามเหลี่ยมสีเขียว) ผลลัพธ์คือ web browser จะเปิดขึ้นและมีภาพวงกลมสีแดง สิ่งต่างๆ ที่ควรสังเกตในโปรแกรมนี้คือ

1. Function Draw คือเมธอดสมาชิกของคลาส Ball01
2. เมธอด Draw มี return type เป็น void
3. คลาส Ball01 สืบคุณสมบัติจากคลาส Sprite
4. คำว่า graphics คือ property ของคลาส Sprite
5. beginFill, drawEllipse และ endFill คือเมธอดของ Sprite

 

วาดวงกลมแบบ OOP

ตัวอย่างโปรแกรมสองอันแรกไม่เป็น OOP ต่อไปนี้เราจะมาดูวิธีเขียนแบบ OOP บ้าง ขั้นแรกให้เปิด project ใหม่ชื่อ project ว่า TestOop ใน project นี้ให้สร้างโฟลเดอร์ใหม่ชื่อ MyClass แล้วสร้างไฟล์ชื่อ Ball.as ในโฟลเดอร์ MyClass นี้แล้วพิมพ์โค้ดตามนี้

โปรดสังเกตสิ่งต่างๆ ในคลาสนี้ดังนี้

1. คลาสนี้จะทำงานได้ก็ต่อเมื่อมี client class (ต่อไปจะเรียกว่า cc) มานำมันไปสร้างเป็น object
2. ชื่อ package จะต้องตรงกันกับชื่อโฟลเดอร์ที่ใช้เก็บไฟล์นี้
3. คำสั่ง import ใช้เครื่องหมายดอกจันเพื่อจับรวมทุก type ใน namespace display เข้ามาทั้งหมด
4. target คือตัวอ้างอิง cc ที่เราจะวาดวงกลมไปใส่ (เหมือน pointer ที่ชี้ไปยัง object)
5. addChild ทำหน้าที่นำวงกลม (ซึ่งเป็น object) ไปใส่ใน object collection

 

เมื่อได้คลาสวาดวงกลมแล้ว ต่อไปเราจะเขียนโปรแกรมทดสอบ ให้เปิดไฟล์ TestOpp.as แล้วป้อนพิมพ์โค้ดดังนี้

เมื่อรันโปรแกรมนี้คลาส TestOop (ซึ่งทำหน้าที่เป็น cc) จะสร้าง object ชื่อ myBall เป็น object ซึ่งมี type ตรงตามที่เรานิยามไว้ในคลาส Ball แล้วเรียกเมธอด DrawBall เพื่อแสดงภาพวงกลมบนหน้าเว็บ ข้อสังเกตของโค้ดข้างบนนี้เป็นดังนี้

1. คำสั่ง var ใช้เพื่อประกาศตัวแปร ภาษา AS3 ตัวแปรเป็นแบบ strong type เหมือ Java และ C#
2. คำว่า this ที่ส่งเป็นอาร์กิวเมนต์ให้เมธอด DrawBall เป็นการส่งค่าอ้างอิงคลาสนี้ เนื่องจากคลาสนี้สืบคุณสมบัติจากคลาส Sprite ค่าอ้างอิงที่ส่งไปจึงเป็น Sprite ซึ่งเป็น object collection ในภาษา AS3 ใช้จะคำว่า DisplayObjectContainer

 

แทรกภาพ 005 ผลลัพธ์จากการรันโปรแกรม TestOop

 

ฟิลด์และ property สมาชิก

ตัวอย่างต่อไปแสดงวิธีนิยามฟิลด์และ property สมาชิก เราจะดัดแปลงโปรแกรม TestOop ให้สร้างวงกลมเล็กๆ สัก 1,500 ดวง เหมือนดวงดาวบนท้องฟ้า ให้สร้าง project ใหม่ชื่อ TestOop2 ใน project นี้ให้สร้างโฟลเดอร์ใหม่ชื่อ MyClass แล้วสร้างไฟล์ชื่อ Ball.as ในโฟลเดอร์นี้ แล้วพิมพ์โค้ดตามนี้

จากโค้ดข้างบนจะเห็นว่าเหมือนคลาส Ball ของเดิม แต่คราวนี้เพิ่มฟิลด์ชื่อ posX และ posY ทำหน้าที่เก็บพิกัดทางแนวตั้งและแนวนอน และเพิ่ม property ชื่อเดียวกัน (แต่อักษรแรกเป็นตัวใหญ่) เพื่อให้ cc สามารถกำหนดค่าตำแหน่งของวงกลมได้ ต่อไปเป็นโปรแกรมเพื่อทดสอบคลาส Ball ชื่อ TestOop2.as

โค้ดข้างบนจะเห็นว่าคล้าย TestOop แตกต่างกันที่เราเพิ่มการทำงานให้วนซ้ำรอบ 1,500 รอบ ในแต่ละรอบมีคำสั่งเซต property เพื่อกำหนดตำแหน่งวงกลมโดยใช้ค่าสุ่ม (Random)

 

ผลลัพธ์จากการรันโปรแกรม TestOop2

 

สรุปเรื่อง ActionScript 3 ตอน 1

บทความตอนนี้ผู้เขียนแนะนำเครื่องมือพัฒนา RIS ชื่อ Flex Builder 2 และการเขียนโปรแกรมภาษา AS3 เบื้องต้น โปรดป้อนพิมพ์และลองดัดแปลงโปรแกรมตัวอย่างให้มีการทำงานแปลกออกไป เช่นเปลี่ยนสีหรือขนาดของวงกลม ถ้าไม่อยากพิมพ์ ผู้เขียนได้จัดทำไฟล์ project ทั้งหมดไว้แล้ว ท่านสามารถดาวน์โหลดได้ที่เว็บไซต์ laploy.com (ดูในหัวข้อ download ไฟล์ชื่อ AS3001) ฉบัยหน้าเราจะเขียน AS3 ที่ซับซ้อนขึ้นเพื่อสร้างอะไรสนุกๆ เล่นกัน

 

บทความเกี่ยวกับ ActionScript 3 โดย ลาภลอย วานิชอังกูร ในนิตยสาร Windows IT Pro ยังมีอีกหลายตอนดังนี้

 

ตอน 2 : สร้างลูกศรหันตามเมาส์

เขียนโปรแกรมภาษา ActionScript 3.0 สร้างออพเจ็กต์ลูกศรที่หันหัวชี้ไปตามการเคลื่อนไหวของเมาส์พอยน์เตอร์ ได้ผลลัพธ์เป็น Flash Movie ไว้ใช้งานในหน้าเว็บ

ฉบับที่แล้วผู้เขียนแนะนำวิธีพัฒนาโปรแกรมด้วยภาษา ActionScript เวอร์ชัน 3.0 (ต่อไปจะเรียกว่า AS3) เบื้องต้น ได้แนะนำไว้ว่าภาษา AS3 ต่างจากภาษา ActionScript เวอร์ชันก่อนๆ มาก ภาษา ActionScript เวอร์ชัน 1 และ 2 เป็นเพียงภาษาสคริปต์ที่ผูกติดกับทามน์ไลน์ (time line) แต่ AS3 เป็นภาษาเพื่อการเขียนโปรแกรมอย่างเต็มรูปแบบ เราสามารถพัฒนาโปรแกรมได้ด้วยวิธีการใกล้เคียงกับการสร้างแอพลิเกชันด้วยภาษาจาวาและ C#

เครื่องมือสำหรับพัฒนาโปรแกรมหรือ IDE ที่แนะนำให้ใช้คือโปรแกรม Adobe Flex Builder 2 (ต่อไปจะเรียกย่อว่า AFB2) มีวิธีใช้งานคล้ายกับ IDE ที่เราคุ้นเคย (เช่นวิสชวลสตูดิโอและเน็ตบีนส์) ทำให้นักพัฒนาโปรแกรมมืออาชีพสามารถก้าวเข้าสู่โลกแห่งการสร้าง rich internet application (โปรแกรมประยุกต์ในอินเตอร์เน็ตที่มีลักษณะการใช้งานใกล้เคียงกับโปรแกรมในเดกส์ท็อป) ได้อย่างรวดเร็ว และที่สำคัญคือภาษา AS3 สนับสนุนหลักการ OOP เหมือนจาวาและ C# (ทุกอย่างเป็นออพเจ็กต์ ใช้คลาสเพื่อสืบคุณสมบัติ ไม่ได้ใช้โปรโตไทป์เหมือนอย่างเวอร์ชันก่อน) ช่วยให้การนำโค้ดกลับมาใช้ใหม่ทำได้อย่างมีประสิทธิภาพ

 

ตอน 3 : เล่นภาพซับซ้อนใน ActionScript

เขียนโปรแกรมภาษา ActionScript เวอร์ชัน 3.0 เพื่อนำไฟล์ swf มาทำเป็นออพเจ็กต์และภาพเคลื่อนไหวไว้แสดงบนหน้าเว็บ

นี่คือตอนที่สามของบทความชุด “เรียนรู้ด้วยตนเอง OOP AS3” สำหรับท่านผู้อ่านที่ไม่เคยอ่านสอนตอนแรก ขอให้เข้าใจว่านี่คือบทความเกี่ยวกับการสร้างสคริปต์ฝั่งไคลอัน (client script) เพื่อสร้างเว็บแอพลิเกชันที่มีอินเตอร์เฟสหรูหรา (rich internet application)

ภาษาที่ใช้คือ ActionScript เวอร์ชัน 3.0 (ต่อไปจะเรียกย่อว่า AS3) เป็นภาษาสมัยใหม่ มีรูปแบบในการเขียนโปรแกรมแบบวัตถุวิธีเหมือนจาวาและ C# เครื่องมือที่ใช้คือ Adobe Flex Builder 2 (ต่อไปจะเรียกย่อว่า Flex)เป็น IDE (Integrated Development Environment) ที่มีวิธีใช้คล้ายไมโครซอฟต์ วิสชวล สตูดิโอ และเน็ตบีน ผลลัพธ์ที่ได้เป็นไฟล์ swf นำไปบูรณาการในหน้าเว็บก็ได้ หรือจะทำเป็นเว็บแอพลิเกชันเดี่ยว (stand alone web application) ก็ได้

ฉบับที่แล้วผู้เขียนแนะนำวิธีเขียนโค้ดสร้างลูกศรหันตามเมาส์ ผู้อ่านท่านหนึ่งถามมาในอีเมลว่า นอกจากรูปทรงง่ายๆ อย่างภาพลูกศรแล้ว เราจะนำภาพวาด (vector graphic)ที่เป็นไฟล์นามสกุล swf (Shock Wave Flash บางทีเรียกว่า Flash Movie เป็นไฟล์ที่สร้างจากแฟลช) มาใช้เป็นออพเจ็กต์ใน AS3 จะได้ไหม คำตอบคือได้ และทำได้ง่ายมากด้วย

บทความตอนนี้ผู้เขียนจะสาทิตวิธีนำ swf มาใช้สามโปรเจคคือ

• LoyAS0301 : แสดงภาพเคลื่อนไหวแบบง่ายที่สุด (ดูตัวอย่าง)
• LoyAS0302 : สร้างออพเจ็กต์หลายๆ ตัวจาก swf เดียว แล้วเพิ่มจำนวนโดยใช้ตัวจับเวลา (ดูตัวอย่าง)
• LoyAS0303 : สร้างฉากหลังเป็นออพเจ็กต์ และมีตัวการ์ตูนเดินข้างหน้า (ดูตัวอย่าง)

นำไฟล์ swf มาแสดงเป็นภาพเคลื่อนไหวแบบง่ายที่สุด

สร้างออพเจ็กต์หลายๆ ตัวจาก swf เดียว

สร้างฉากหลังเป็นออพเจ็กต์ และมีตัวการ์ตูนเดินข้างหน้า

 

ตอน 4 : ซ่อนโค้ดไว้หลังฉาก

วิธีเขียน Flex เอพลิเกชันแบบโค้ดบีไฮนด์ (code-behind) กับสามโครงงานด้านแฟ้มตัวอักษร

ไม่ว่าจะเขียนโปรแกรมเกม หรือโปรแกรมประยุกต์ใช้งานทางธุรกิจ เรามักหลีกเลี่ยงการอ่านข้อมูลจากแฟ้มข้อมูลตัวอักษรไม่ได้ (text file ต่อไปจะเรียกย่อว่า TF)บทความนี้ผู้เขียนจะแสดงวิธีสร้างหน้าเว็บที่มีส่วนประมวลผลด้าน TF และวิธีทำให้เป็นโค้ดบีไฮนด์สามโปรเจ็กต์ดังนี้

AS0401 : ทดสอบการทำงานของปุ่มและการใส่ข้อความในกล่องข้อความบนหน้าเว็บ ด้วยการเขียนโค้ดแบบโค้ดบีไฮนด์(ดูตัวอย่าง)

ผลลัพธ์จากโปรแกรม AS0401

AS0402 : อ่านข้อความภาษาไทย จาก TF ที่เก็บรายชื่อจังหวัดในประเทศไทย จะเป็น TF ที่อยู่ในเซอฟเวอร์เดียวกัน หรือเซอฟเวอร์เครื่องอื่นๆ ในอินเตอร์เน็ตก็ได้ (ดูตัวอย่าง)

ผลลัพธ์จากโปรแกรม AS0402

AS0403 : สร้างคลาสอ่าน TF ที่นำกลับมาใช้ใหม่ได้ และคัดกรองข้อมูลได้ (ดูตัวอย่าง)

ผลลัพธ์จากโปรแกรม AS0403

 

Web Desktop ตอน 1

สร้างเว็บแอพลิเกชันยุคใหม่ที่มีการใช้งานแบบเดียวกับโปรแกรมในเดกส์ทอป

บทความนี้จะสอนวิธีสร้างหน้าเว็บที่เลียนแบบการทำงานของเดกส์ทอป คือมีฉากหลังของเดกส์ทอป ไอคอน สำหรับเปิดหน้าต่าง และมีหน้าต่างที่สามารถเปิด-ปิดได้ โดยจะสร้างทั้งหมดเป็นออพเจ็กต์ที่สามารถนำกลับมาใช้ใหม่ได้ นำไปเพิ่มเติมความสามารถ หรือเปลี่ยนแปลงคุณสมบัติได้ตามหลักการโปรแกรมวัตถุวิธี (OOP) เตรียมไว้นำไปบูรณาการเป็นเว็บแอพลิเกชันที่มีส่วนติดต่อกับผู้ใช้ซับซ้อนสวยงาม (Rich Internet Application หรือ RIA) เทียบเท่าโปรแกรมในเดกส์ทอป

หน้าเว็บเมื่อสร้างเสร็จประกอบด้วยเดกส์ทอป หน้าต่าง และไอคอน ทดลองใช้งาน

ท่านผู้อ่านที่เพิ่งอ่านบทความนี้เป็นตอนแรกโปรดทราบว่านี่เป็นอิพิโสด 5 ในซีรีส์สอนวิธีพัฒนาเว็บแอพลิเกชันด้วยภาษา ActionScript และ Flex เวอร์ชันใหม่สุด อิพิโสดก่อนหน้านี้สนุกทุกตอน กรุณาสั่งซื้อนิตยสารฉบับย้อนหลังมาอ่านได้เลย รับรองไม่ผิดหวัง

การสร้างเดสก์ทอป

โจทย์ของเราคือต้องการสร้างเว็บแอพลิเกชันซึ่งมีคุณสมบัติดังนี้

• มีฉากหลังของเดสก์ทอป : กำหนดภาพ wallpaper ได้ กำหนดขนาดได้
• มีไอคอน : กำหนดขนาดได้ กำหนดภาพไอคอนได้ กำหนดตำแหน่งได้ กำหนดหน้าต่างที่จะเปิดได้
• มีกรอบหน้าต่าง : หดให้เล็กได้ (minimize) คืนขนาดเดิมได้ ปิดได้ ซ้อนทับได้ เปลี่ยนลำดับการเรียงซ้อนทับหน้า-หลังได้เมื่อผู้ใช้คลิกเมาส์

และทั้งหมดที่ว่ามาต้องเพิ่มเติมคุณสมบัติต่างๆ ได้ง่าย ผ่านทางการทำอินเฮียริเตนซ์และโพลีมอร์ฟิสซึม จุดมุ่งหมายคือสร้าง RIA ที่เมื่อเสร็จสมบูรณ์แล้วผู้ใช้จะเผลอนึกว่าตนกำลังใช้งานวินโดวส์แอพลิเกชัน ไม่ใช่กำลังเปิดหน้าเว็บ

 

Web Desktop ตอน 2

สร้างเว็บแอพลิเกชันยุคใหม่ที่มีการใช้งานแบบเดียวกับโปรแกรมในเดกส์ทอป

บทความนี้จะสอนวิธีสร้างหน้าเว็บที่เลียนแบบการทำงานของเดกส์ทอป คือมีฉากหลังของเดกส์ทอป ไอคอน สำหรับเปิดหน้าต่าง และมีหน้าต่างที่สามารถเปิด-ปิดได้ โดยจะสร้างทั้งหมดเป็นออพเจ็กต์ที่สามารถนำกลับมาใช้ใหม่ได้ เตรียมไว้สำหรับใช้สร้างเว็บแอพลิเกชันที่มีส่วนติดต่อกับผู้ใช้ซับซ้อนสวยงามแบบ RIA (Rich Internet Application)

รูป 001: หน้าเว็บเมื่อสร้างเสร็จประกอบด้วยเดกส์ทอป หน้าต่าง และไอคอน ทดลองใช้งานได้ที่ laploy.com/actionscript/0501

ท่านผู้อ่านที่เพิ่งอ่านบทความนี้เป็นตอนแรกโปรดทราบว่านี่เป็นตอนสอง (ของอิพิโสด 5) ในซีรีส์สอนวิธีพัฒนาเว็บแอพลิเกชันด้วยภาษา ActionScript (AS3) และ Flex เวอร์ชันใหม่สุด (Flex2) บทความในอิพิโสด 1 ถึง 4 สนุกทุกตอน กรุณาสั่งซื้อนิตยสารฉบับย้อนหลังมาอ่านได้ รับรองไม่ผิดหวัง

มาว่ากันต่อจากคราวที่แล้ว

บทความในฉบับที่แล้วคือตอนที่ 1 (ของเรื่อง Web Desktop) อธิบายการทำงานของเว็บเดสก์ทอปไปแล้วอย่างคร่าวๆ และเราดูโค้ดในคลาสหลักคือคลาส Main ไปแล้วเป็นบางส่วน คือประกาศส่วนหัว (คำสั่ง import) คำสั่งดึงภาพเข้ามาฝังในโปรแกรม (คำสั่ง Embed) และโค้ดส่วนสมาชิกแบบฟิลด์ ยังมีส่วนที่ยังไม่ได้อธิบายคือสมาชิกแบบเมธอดซึ่งมีทั้งหมดดังนี้[แทรกภาพ 003]เมธอดบนสุดซึ่งมีชื่อเดียวกับคลาส (Main) คือคอนสทรักเตอร์ เมธอด StartUp และเมธอด createDeskTop เราดูโค้ดไปเรียบร้อยแล้ว ใบบทความตอนนี้เราจะมาดูเมธอดอื่นๆ ที่เหลือ

การออกแบบสร้างไอคอนสำหรับใช้บน DeskTop

กีฬาๆ เป็นยาวิเศษ

ปักกิ่ง 2008

ใกล้โอลิมปิกแล้ว คราวนี้จัดที่เมืองจีน ได้รับแผ่นพับแสดงข้อมูล ดูผ่านๆ มีอยู่หน้าหนึ่งตอนแรกนึกว่าเป็นตัวอักษรจีน แต่พอดูอีกทีเป็น Pictogram หรือสัญญลักษณ์แทนกีฬาแต่ละประเภท เห็นว่าน่าสนใจดีจำนำมาฝากครับ

ลาก่อนแป้นพิมพ์-เมาส์ สวัสดี!จอหลากสัมผัส

ไปหน้าแรก | สารบัญ | Laploy.com |  ระเบียนบทความ | บทความจากลาภลอย

Multi-touch screen
ลาก่อนแป้นพิมพ์-เมาส์ สวัสดี!จอหลากสัมผัส

• บทความจากนิตยสาร WinMag
• ผู้เขียน ลาภลอย วานิชอังกูร (laploy.com )

ในวันปฐมฤกษ์ของ iPhone หลังเข้าแถวรอหลายชั่วโมง จ่ายเงินห้าร้อยเหรียญ และเดินออกมาพร้อมเสียงตบมือเชียร์ตามหลัง ลูกค้าที่ซื้อโทรศัพท์มือถือเครื่องแรกของบริษัท แอปเปิล คอมพิวเตอร์พบว่า นอกจากของเล่นราคาแพงนี้จะมีดีไซน์ที่สวยงามแล้ว มันยังมีจอหลากสัมผัส (Multi-Touch Screen) อีกด้วย

“จอหลากสัมผัสเนี่ยเป็นอะไรที่เข้าท่าจริงๆ ก่อนเริ่มใช้เครื่องเราต้องปลดล็อกมัน ซึ่งทำได้โดยการลากนิ้วข้ามจอภาพ มันทำให้ผมรู้สึกยังกะรูดซิปเปิดเครื่องเลย การย่อขยายภาพบนถ่ายทำได้โดยใช้นิ้วชี้สองนิ้วลากเข้าหากันหรือออกห่างจากกัน” ลูกค้า iPhone กล่าวอย่างชื่นชม

 

จอหลากสัมผัสเป็นนวัตกรรม มันแตกต่างจากจอภาพระบบสัมผัสธรรมดาที่เราคุ้นเคยกัน จอภาพระบบสัมผัสธรรมดาอย่างที่เห็นตามตู้เอทีเอ็ม ตู้ให้ข้อมูลตามห้างสรรพสินค้า (kiosk) หรือแม้แต่ในเครื่องคอมพิวเตอร์พกพา  (PDA) รับรู้การกดได้เพียงจุดเดียวเท่านั้น แต่จอหลากสัมผัสรับรู้การกดพร้อมๆ กันได้หลายจุด (มากกว่า 50 ตำแหน่ง)  นอกจากนั้นมันยังสามารถแยกแยะอากัปกริยาของนิ้วและความหนักเบาในการกดได้อีกด้วย ยิ่งไปกว่านั้น จอชนิดนี้สามารถ “เห็น” สิ่งที่ถูกวางไว้บนมัน และมีปฏิสัมพันธ์กับอุปกรณ์พกพาดิจิตอลที่มันเห็นได้ การค้นคว้าพัฒนาจอหลากสัมผัสมีมานานไม่ต่ำกว่ายี่สิบห้าปีแล้ว โดยเริ่มจากมหาวิทยาลัยโตรอนโต และห้องทดลองเบล แต่มันเพิ่งจะเริ่มเป็นที่สนใจของสาธารณชนเมื่อ “แจฟเฟอร์สัน วาย ฮาน” นำเสนอผลงานของเขาในงาน TED 2006 ที่สร้างความฮือฮาให้ผู้ชมมาก มันปลุกเร้าจินตนาการเพราะคล้ายภาพยนตร์นิยายวิทยาศาสตร์เรื่อง Minority report (ภาพยนตร์ปีค.ศ.2002 ของสตีเวน สปิลเบิกร์) ในภาพยนตร์เรื่องนี้ ทอม ครูส ควบคุมการทำงานของคอมพิวเตอร์โดยการโบกมือไปมาในอากาศด้วยลีลาของวาทยกรที่กำลังอำนวยเพลงซิมโฟนี เบื้องหน้ามีจอภาพขนาดยักษ์ที่ทำจากวัสดุใสเหมือนแก้ว ฉายภาพซึ่งเปลี่ยนไปตามการเคลื่อนที่ของนิ้วมือ “การจับต้องเป็นกระบวนการที่เป็นธรรมชาติที่สุด” ฮาน กล่าว “แทนที่จะใช้แป้นพิมพ์หรือเมาส์เพื่อสั่งการคอมพิวเตอร์ คุณสามารถจับต้องวัตถุในจอได้โดยตรง มันเป็นปฏิกิริยาตามธรรมชาติ เมื่อเราเห็นสิ่งต่างๆ เราก็อยากจะสัมผัสมัน”

 

จอมมายากล

งานสัมมนาของเท็ด (TED ย่อจาก Technology Entertainment Design) ที่มอนเทอเรย์คาลิฟอร์เนีย เป็นงานที่จัดขึ้นประจำทุกปีเพื่อแสดงผลงานวิจัยใหม่ล่าสุด ผู้เข้าร่วมสัมมนาล้วนแล้วแต่เป็นผู้มีส่วนเกี่ยวข้องกับนวัตกรรมซึ่งจะเปลี่ยนแปลงโลก เป็นกลุ่มคนระดับมันสมองที่เดินทางมาจากทุกมุมโลกเพื่อค้นหาแรงบันดาลใจ

งานสัมมนาในปี 2006 ก็เหมือนกับทุกปี หอประชุมใหญ่ขนาด 500 ที่นั่ง บัดนี้เต็มแน่นจนล้น ผู้เข้าร่วมสัมมนาต่างกระหายจะรับฟังและชมการนำเสนอสิ่งประดิษฐ์ใหม่ ซึ่งไม่เคยเปิดตัวที่ไหนมาก่อน วิทยากรผู้นำเสนอมักเป็นศาสตราจารย์ผมเผ้ากระเซิง หรือไม่ก็นักวิจัยสติเฟื่องที่หมกตัวอยู่ในห้องทดลองวิทยาศาสตร์จนตัวขาวซีด จะว่าไปแล้วบรรยากาศของการสัมมนาแทบจะไม่แตกต่างจากงานประชุมผู้คลั่งไคล้ภาพยนตร์สตาร์แทรกเท่าใดนัก

เมื่อแสงไฟในห้องประชุมหรี่ลง ไฟบนเวทีก็จับที่แจฟเฟอร์สัน วาย ฮาน ซึ่งเดินออกมากลางเวทีด้วยความประหม่า ฮานเป็นชายร่างเล็ก ค่อนข้างท้วมแต่ไม่ใช่คนอ้วน ชุดสูทรสีดำแบบแมนฮัตตันเข้ากับผมสีดำและใบหน้าแบบชาวเอเชียของเขาเป็นอย่างดี ฮานไล่สายตาไปยังกลุ่มผู้ชม นั่นมหาเศรษฐีหนุ่มนามอุโฆษ เซอร์กี บริน เจ้าของบริษัทกูเกิล กำลังจ้องมองอย่างเบื่อหน่าย นั่นแจฟ บีซุส แห่งเว็บไซต์อะเมซอนกำลังคุยกับบิล จอย ผู้ร่วมก่อตั้งบริษัทซัน ไมโครซิสเต็ม ฮานพบว่าคนในหอประชุมล้วนแล้วแต่เป็นผู้มีชื่อเสียงในแวดวงเทคโนโลยี ส่วนเขาเป็นเพียงวาจกนิรนาม ฮาน รู้สึกตัวลีบเหลือนิดเดียว

 

สุดยอดการนำเสนอ แล้วฮานก็เริ่มการนำเสนอ เบื้อหน้าของเขาคือจอภาพแบบพิเศษ เป็นแผ่นกระจกใสกว้าง 36 นิ้ว ทำให้ผู้ชมสามารถมองผ่านแผ่นกระจก (ซึ่งมีเส้นตารางที่เรืองแสงอ่อนๆ แต่เห็นได้ชัดในห้องประชุมซึ่งขณะนี้ค่อนข้างมืด) และเห็นอากัปกริยาทุกอย่างของฮานได้อย่างชัดเจน ฮานตั้งสมาธิกับจอภาพตรงหน้า สมองนึกไล่เรียงถึงลำดับของการนำเสนอที่ฝึกซ้อมมา พลันความประหม่าก็มลายไป ภายในเสี้ยววินาทีเดียว ท่าทีงกเงิ่นของลูกแกะก็เปลี่ยนไปเป็นพยัคฆ์ที่ปราดเปรียว เขาร่ายนิ้วทั้งสิบลงบนผิวกระจกด้วยท่วงทีของนักมายากลผู้จัดเจน พลันบังเกิดเป็นเส้นแสงหลายเส้นไล่ไต่ขึ้นตามปลายนิ้ว เมื่อเขาโบกมือลูบไล้เส้นเหล่านั้นก็กลายเป็นคลื่น ภาพนี้ถูกขยายแล้วฉายลงบนจอภาพขนาดยักษ์ด้านหลังไปพร้อมๆ กัน ทันใดนั้นเขาก็เสกลาวาขึ้น (แบบในตะเกียงลาวาที่เป็นเครื่องแต่งห้อง) แล้วใช้นิ้วทั้งสิบเปลี่ยนแปลงรูปร่างและสีของก้อนลาวาที่ลองลอยอยู่อย่างอิสระในสภาพไร้แรงโน้มถ่วง ราวกับปฏิมากรที่กำลังรังสรรค์ศิลปะเหนือจริง

หลังจากนั่งฟังการบรรยายประกอบสไลด์ที่น่าเบื่อจากวิทยากรอื่นๆ มาแล้วหลายชั่วโมง การนำเสนอนี้เกินความคาดหมายของผู้ชมไปมาก เสียงฮือฮาแสดงความตื่นเต้นเริ่มดังขึ้น แต่หูและสมองของฮานไม่รับรู้ เขาก็กวาดมือทีหนึ่ง ลาวาหายวับไปเหมือนเป็นอากาศธาตุ บนจอถูกแทนที่ด้วยภาพถ่ายหลายใบ เขาสลับภาพไปมา เลื่อนไปที่โน่น ไปที่นี่ โยกย้ายมันราวกับเป็นภาพถ่ายจริงๆ ที่วางอยู่บนโต๊ะ เขาขยายและหดขนาดภาพแต่ละใบโดยใช้นิ้วชี้สองนิ้ว ตรึงที่มุมของภาพแล้วเลื่อนเข้าออกอย่างรวดเร็ว มีเสียงสะอึกอากาศ เสียงอุทาน และเสียงตบมือประปรายจากผู้ชม

ผู้คนตอบรับต่อการนำเสนอดีผิดคาด ฮานพยายามกล้ำกลืนรอยยิ้ม และกล่าวแก่ผู้เข้าร่วมสัมมนาว่า “สิ่งที่ท่านได้ชมนี้คือวิธีการใหม่ ที่คนรุ่นต่อไปจะใช้เพื่อการปฏิสัมพันธ์กับคอมพิวเตอร์ยุคใหม่ซึ่งปราศจากแป้นพิมพ์และเมาส์” เสียงตบมือดังกึกก้องขึ้นห้องประชุมราวกับเปิดสวิทช์  ผู้ร่วมสัมมนาบางคนถึงกับเป่าปากด้วยความพึงพอใจอย่างถึงขีดสุด

 

 

Jeff Han (2006) Ideas Worth Sharing

ความคลั่งไคล้

แต่การแสดงไม่จบ เขาดึงแป้นพิมพ์สองมิติออกมา มันค่อยๆ ไถลไปแล้วหยุดลงช้าๆ กลางจอภาพ “เดี๋ยวนี้หมดสมัยแล้วที่เราต้องยอมสยบต่ออุปกรณ์” ฮาน พิมพ์สัมผัสสิบนิ้วกับแป้นพิมพ์นั้น มันทำงานได้อย่างถูกต้อง “ถึงเวลาแล้วที่อุปกรณ์ต้องสยบต่อเรา” เมื่อกล่าวจบเขาก็เลื่อนแป้นพิมพ์ไปข้างๆ พรมนิ้วลงบนกระจก เกิดเป็นลูกกลมสีขาวเล็กๆ มันเพิ่มจำนวนขึ้นทุกครั้งที่นิ้วของเขาสัมผัสกับจอ ลูกบอลน้อยๆ กระโดดโลดเต้นอย่างเริงร่าในเขตที่เขาวาดเป็นคอกไว้

เขาพลิกผ่ามือหนึ่งครั้ง ลูกบอลหายวับไป แทนที่ด้วยภูมิทัศน์ของโลกจากอวกาศ เขาใช้ปลายนิ้วลากเพื่อหมุนโลกและเคลื่อนเข้าหาทวีปหนึ่ง และขยายภาพไปหยุดที่หุบเขาแห่งหนึ่ง เขาเคลื่อนมือไปตามเข็มนาฬิกาทันใดนั้นทิวทัศน์ก็เปลี่ยนมุมจากมุมมองของดาวเทียมเป็นมุมมองจากเครื่องบิน

การแสดงชุดสุดท้ายคือการวาดและควบคุมหุ่นเชิดโดยใช้นิ้วมือทั้งสิบ การนำเสนอทั้งหมดกินเวลาเพียงเก้านาที เมื่อไฟเปิดอีกครั้งและผู้ชมต่างพร้อมใจกันตบมือเสียงเสียงดังลั่นห้องประชุม บางคนถึงกับกรีดร้องอย่างคลุ้มคลั่งราวกับอยู่ในการแสดงดนตรีร็อก ฮาน ยืนมองดูอย่างตกตะลึง “นี่คือการตอบรับเลอเลิศสุดที่เคยพบ” ฮานคิด “นับเป็นบุญตาไม่น้อยแล้ว คุ้มกับการเกิดมาหนึ่งชาติ”

ความคลั่งไคล้แพร่กระจากออกนอกห้องประชุมเมื่อเท็ดนำคลิปวิดีโอนี้ใส่ในเว็บไซต์ ไม่นานคลิปนี้ก็ปรากฏในยูทูบ นักทำบล็อกทั้งหลายหลงใหลมันมาก บ้างก็นำคลิปไปใส่ในบล็อกของตน บ้างก็ใส่ลิงค์ที่ชี้ไปยังคลิปวิดีโอนี้ในยูทูบ ทำให้มันกลายเป็นคลิปวิดีโอนำเสนอทางเทคโนโลยีที่ได้รับความนิยมสูงสุดตลอดกาล

 

เขาชื่อฮาน แจฟเฟอร์สัน วาย ฮาน (Jefferson Y. Han) คือนักวิจัยแห่งสถาบันคณิตศาสตร์และวิทยาศาสตร์ คอร์เรนท์ (CIMS) สถาบันนี้เป็นศูนย์กลางการค้นคว้าวิจัยด้านคณิตศาสตร์และคอมพิวเตอร์สังกัดมหาวิทยาลัยนิวยอร์ก  เขาผู้พัฒนาหลักในงานวิจัยจอหลากสัมผัส นอกจากนั้นฮานยังทำวิจัยในโครงการอื่นๆ ด้วย เช่นหุ่นยนต์ที่เดินทางได้ด้วยตนเอง  การจดจำท่าทางการเคลื่อนไหว การสร้างภาพด้วยคอมพิวเตอร์ตามเวลาจริง และปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ ฮานเป็นบุตรหัวปีของชาวเกาหลีซึ่งย้ายถิ่นมาตั้งหลักแหล่งในสหรัฐฯ ยุคปีค.ศ. 1970 สมัยเด็กฮานชอบแกะเครื่องใช้อิเล็กทรอนิกส์ในบ้านออกเป็นชิ้นๆ “ทีวี เครื่องเล่นเทป หรืออะไรก็ได้ที่มีไฟกระพริบ” ปัจจุบันเขายังมีแผลเป็นน่าเกลียดซึ่งเกิดจากน้องสาวทำหัวแร้งร้อนๆ หล่นใส่เท้า แม้บิดาของเขาจะไม่ชอบใจนักที่มีเครื่องใช้อิเล็กทรอนิกส์ถูกแกะไว้เกลื่อนบ้าน แต่ก็ยังสนับสนุนความสนใจในเทคโนโลยีของเขา ฮานสามารถท่องสูตรคูณได้ก่อนเข้าชั้นอนุบาล ในค่ายฤดูร้อนเขาลอบต่อสายตรงกับรถกอล์ฟเพื่อออกขับเล่นในยามดึก ซ่อม Walkman ให้สหายชาวค่ายเพื่อแลกกับน้ำอัดลม เรียนไวโอลินเหมือนเด็กเอเชียฐานะดีทั่วไป และสร้างเครื่องยิงเลเซอร์ได้เมื่ออายุเพียงสิบสองปี

พ่อแม่ของเขาอดออมและทำงานหนักเพื่อส่งเขาเข้าเรียนที่เดลตัน โรงเรียนเอกชนหรูหราในเขตตะวันออกตอนเหนือของแมนฮัตตัน เมื่อจบแล้วก็ส่งให้เรียนที่มหาวิทยาลัยคอร์เนล ฮานเลือกเรียนสาขาวิทยาการคอมพิวเตอร์และวิศวกรรมอิเล็กทรอนิกส์ แต่ก็ลาออกกลางคันเพื่อไปทำงานกับบริษัท CU-SeeMee ซึ่งเป็นบริษัทที่เพิ่งก่อตั้ง บริษัทนี้ขายซอฟท์แวร์การประชุมวิดีโอทางไกลซึ่งเขาช่วยพัฒนาให้ระหว่างที่กำลังศึกษาอยู่ที่คอร์เนล

ปัจจุบันฮานก่อตั้งบริษัทชื่อ เพอร์สเปคตีฟพิกเซล เพื่อพัฒนาเทคโนโลยีจอหลากสัมผัสให้ก้าวหน้ายิ่งขึ้น และผลิตสินค้าขายให้กับกองทัพบกสหรัฐฯ และบริษัทที่ได้รับสัญญาว่าจ้างจากกองทัพเช่น ล็อกฮีต มาร์ติน และบริษัทเกี่ยวกับสื่อ เช่น พิกซาร์และซีบีเอส

 

สร้างเองใน 10 ขั้นตอน

จอหลากสัมผัสไม่ใช่เทคโนโลยีอวกาศ เราสามารถหาวัสดุพื้นๆ มาสร้างจอแบบนี้ขึ้นใช้งานเองได้ ไม่จำเป็นต้องใช้เครื่องมือประหลาดพิสดารในห้องทดลองปรมาณู  เครื่องมือช่างหรือเครื่องมือของนักสมัครเล่นทั่วๆ ไปก็ใช้ได้แล้ว จอหลากสัมผัสที่จะแนะนำวิธีสร้างนี้ ใช้หลักการตามที่ ฮาน บรรยายไว้ในรายงาน “วิธีสร้างจอหลากสัมผัสราคาถูก” ที่ตีพิมพ์ในวารสารของการประชุม ACM Symposium on Applied Computing ในปีค.ศ. 2005 (เครื่องต้นแบบที่ฮานนำเสนอในงานเท็ด 2006 ก็ใช้หลักการเดียวกันนี้)

 

ขั้นตอนที่ 1 : เข้าใจทฤษฏีจอหลากสัมผัส
ทฤษฏีจอหลากสัมผัสเรียบง่ายจนน่าแปลกใจ ตัวจอภาพสร้างจากแผ่นอะครีลิกใสธรรมดาๆ แล้วใช้เครื่องฉายภาพ ฉายภาพจากคอมพิวเตอร์ลงบนตัวรับภาพด้านหลังโดยตรง หรือจะฉายให้สะท้อนกับกระจกก่อนก็ได้ ส่วนการตรวจสอบว่านิ้วมือจิ้มที่ตำแหน่งใด ทำได้โดยใช้แสงอินฟราเรดจากหลอด LED (ความจริงควรเรียกว่า IED) หลายๆ ตัว ติดเรียงไว้จำนวนมากที่ขอบจอ เมื่อนิ้วแตะที่จุดใดกล้องอินฟราเรดจะรับภาพได้ การตรวจสอบนิ้วหลายนิ้วที่จิ้มลงหลายจุดพร้อมๆ กันทำได้ง่ายมาก เพราะกล้องอินฟราเรดรับภาพทั้งจอได้ในคราวเดียวกันอยู่แล้ว

 
หลักการของจอหลากสัมผัสอาศัยความจริงที่ว่าเมื่อนิ้วแตะลงบนแผ่นอะครีลิก จะเป็นผลให้แสงอินฟราเรดที่ส่องผ่านในแผ่นอะครีลิกเกิดการกระจายตัว

อุปกรณ์หลักๆ ที่ต้องใช้ในการสร้างจอหลากสัมผัสมีเพียง 4 อย่างคือ 1)ตัวจอภาพ (ที่เราจะสร้างขึ้นเองจากแผ่นอะครีลิก ไม้อัด และ LED แบบอินฟราเรด) 2)แผ่นรับภาพ 3)กล้องอินฟราเรดและ 4)คอมพิวเตอร์

 
กาวหรือสารสำหรับยึดจับต่างๆ ให้ใช้สีดำเพื่อลดการสะท้อนแสง

 

ขั้นตอนที่ 2 : ทำกรอบ
กรอบของจอภาพเป็นกรอบไม้ธรรมดาเหมือนกรอบรูป จะทำใหญ่เท่าใดก็ได้ตามใจชอบ ถ้าเป็น LED อินฟราเรดธรรมดาราคาถูก จอไม่ควรใหญ่เกิน 30 นิ้ว เพราะความแรงของแสงจาก LED จะเป็นตัวจำกัดขนาดของจอ

 

การประกอบจอภาพต้องอาศัยฝีมือช่างไม้นิดหน่อย ถ้าเคยทำกรอบรูปมาแล้วก็ง่าย อย่าเพิ่งแกะพลาสติกบางๆ ที่หุ้มแผ่นอะครีลิกออก ให้เก็บไว้กันแผ่นอะครีลิกเป็นรอย ไว้คอยแกะออกเมื่อทำเสร็จทุกอย่างแล้ว

 

ขั้นตอนที่ 3 : สร้างรางใส่หลอด
เราต้องติดตั้งหลอด LED จำนวน 88 ดวงไว้รอบๆ ขอบจอ (คือจะติดที่ขอบทั้งสี่ด้าน ด้านละ 22 ดวง) อาจจะยึด LED กับอะลูมิเนียมเส้นด้วยกาวตราช้างก็ได้

 
หลอด LED อินฟราเรดคือประเอกของงานนี้ LED ไม่ใช่หลอดไฟ จึงไม่มีไส้หลอด มันเป็นไดโอดที่สร้างจากสารกึ่งตัวนำ เป็นอุปกรณ์อิเล็กทรอนิกส์ที่ดาษดื่น หาซื้อได้ที่บ้านหม้อ ราคาหลอดละสามถึงห้าบาท สำหรับจอขนาด 30 นิ้วใช้ LED จำนวน 88 หลอดก็พอ (ยกตัวอย่างเช่นตัวนี้ http://www.es.co.th/Detail.asp?Prod=TSAL7400 เป็น GAAS/GAAIAS INFRARED EMITTING DIODE ถ้าซื้อจำนวน 150 หลอดจะตกหลอดละ 2.22 บาท)

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

ภาพนี้แสดงวิธีติดหลอด LED อินฟราเรด อย่าลืมใส่ตัวต้านทาน (ขนาดสัก 1K) ไว้ลดกระแสด้วย ไม่อย่างนั้นหลอดอาจจะชำรุดได้ ไฟที่จ่ายให้ LED ใช้แรงดันขนาด 5 โวลต์ก็พอ

 

ขั้นตอนที่ 4 : ขัดขอบอะครีลิก
เพื่อให้แสงอินฟราเรดเดินทางได้ดีขึ้น เราจำเป็นต้องขัดขอบทุกด้านของแผ่นอะครีลิกด้วยกระดาษทรายเบอร์ 200
 

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

 

ขั้นตอนที่ 5 : ประกอบจอ
เมื่อเตรียมทุกอย่างครบแล้วก็ถึงเวลานำมาประกอบเข้าด้วยกัน

นำแผ่นไม้ที่ตัดไว้ทำกรอบมาประกบเข้าด้วยกัน ใส่รางอะลูมีเนียม (ซึ่งมี LED ติดไว้แล้ว) สอดเป็นไส้ไว้ตรงกลาง เราจะใช้แผ่นอะครีลิกสองแผ่น แผ่นด้านบน (คือด้านที่จะใช้นิ้วจิ้ม) ต้องหนาหน่อยเพื่อความแข็งแรง ตรงกลางใส่กระดาษฝ้า หรือกระดาษไขที่ใช้เขียนแบบเพื่อทำหน้าที่เป็นตัวรับภาพคอมพิวเตอร์จากเครื่องฉายภาพ

 

ประกอบเสร็จดูด้านข้างจะเป็นเห็นว่ามีสภาพเหมือนแซนวิชแบบนี้

 

ขั้นตอนที่ 6 : ยำเว็บแคม
ดังที่เรียนให้ทราบไปแล้วในหัวข้อที่หนึ่งว่าเราจำเป็นต้องใช้กล้องอินฟราเรด ไม่จำเป็นต้องไปหาซื้อกล้องอินฟราเรดตัวเป็นแสน เราสามารถนำเว็บแคมเก่าๆ ที่ไม่ใช้แล้วมาดัดแปลงได้

 
แม้ตาคนจะมองไม่เห็นแสงอินฟราเรด แต่เว็บแคมจะไวต่อแสงอินฟราเรดมาก ผู้ผลิตจึงใส่แผ่นกรองแสงอินฟราเรดไว้ สิ่งที่เราต้องทำมีเพียงถอดแผ่นที่ว่านี้ออก ซึ่งทำได้โดยแกะเว็บแคมออกจนเห็นตัวรับภาพ (CCDs) จะเห็นว่ามีแผ่นสีเขียวสี่เหลี่ยมเล็กๆ มันคือแผ่นกรองแสงอินฟราเรด ให้ถอดออก เพียงเท่านี้กล้องก็จะรับแสงอินฟราเรดได้ 
เรื่องสำคัญอีกอย่างคือเราต้องการให้มันรับได้แค่อินฟราเรดเท่านั้น ไม่ต้องการให้รับแสงในย่านอื่นๆ เลย ซึ่งทำได้ง่ายอีกเช่นกัน วิธีทำคือให้นำแผ่นฟิล์มที่ใช้ถ่ายภาพ เอาเฉพาะส่วนที่เป็นสีดำมาตัดออกเป็นชิ้นสี่เหลี่ยม (ให้มีขนาดเท่ากับแผ่นกรองแสงอินฟราเรดที่ถอดออกไปก่อนหน้านี้) ใส่แทนที่แผ่นกรองแสงอินฟราเรด เพียงเท่านี้เว็บแคมเก่าๆ ก็จะกลายเป็นกล้องอินฟราเรดแล้ว

 

ขั้นตอนที่ 7 : ติดตั้งเครื่องฉายภาพ

นำเครื่องฉายภาพมายึดไว้กับผนังเหนือจอภาพที่เราสร้างขึ้น หากต้องการใช้วิธีฉายใส่กระจกที่อยู่ใต้โต๊ะแล้วสะท้อนภาพเข้าใต้โต๊ะ หรือจะติดเครื่องฉายภาพไว้ใต้โต๊ะก็ได้เหมือนกัน

ขั้นตอนที่ 8 : ขาตั้ง

นำเหล็กท่อหรือเหล็กฉากมาตัดแล้วเชื่อมเพื่อใช้เป็นฐานของจอภาพ

ให้ทำขาตั้งที่มีพื้นด้านบนลาดเอียงเล็กน้อยเหมือนโต๊ะเขียนแบบ  กะความสูงขนาดโต๊ะมาตรฐานให้พอทำงานสะดวก และที่สำคัญต้องให้มีระยะที่ภาพจากเครื่องฉายเต็มโต๊ะพอดี

ขั้นตอนที่ 9 : ซอฟต์แวร์
นอกจากฮาร์ดแวร์แล้วหัวใจสำคัญของจอหลากสัมผัสคือซอฟต์แวร์ที่จะตีความภาพตำแหน่งที่นิ้วแตะจอภาพไปเป็นพิกัด นอกจากนั้นซอฟท์แวร์ยังต้องรับรู้น้ำหนักและความเร็วในการกดด้วย ลองดูที่ http://www.fingerworks.com หากต้องการพัฒนาซอฟท์แวร์เองก็มีไลบรารีที่ช่วยให้การพัฒนาซอฟท์แวร์ทำได้ง่ายขึ้น ดาวน์โหลดซอฟท์แวร์ได้ที่ http://www.whitenoiseaudio.com/touchlib มีตัวอย่างโปรแกรมให้ทดสอบด้วย

ภาพตำแหน่งที่นิ้วแตะจอภาพ เป็นภาพที่ได้จากกล้องอินฟราเรด

 

ขั้นตอนที่ 10 : ถึงเวลาสนุก
ประกอบทุกอย่างเข้าที่ ต่อสายไฟเลี้ยงเข้าหลอด LED (ใช้เครื่องจ่ายไฟตรง  5V หรือ 9V ขนาด 300ma ก็พอ) เสียบเว็บแคมกับคอมพิวเตอร์ ฉายภาพขึ้นจอ รันโปรแกรม เพียงเท่านี้เราก็จะได้สนุกกับจอหลากสัมผัสที่ทำเองในบ้านราคาประหยัด

ถ้าไม่นับคอมพิวเตอร์กับเครื่องฉายภาพซึ่งแพงเอาเรื่อง ค่าวัสดุทั้งหมดที่ใช้เพื่อสร้างจอหลากสัมผัสจะอยู่ประมาณสี่ถึงแปดพันบาท (ขึ้นอยู่กับว่าเรามีวัสดุเหลือใช้อะไรอยู่บ้าง)  ใช้เวลาสร้างสองสามวันซึ่งส่วนมากจะหมดไปกับการเจาะรู ติดตั้งหลอด LED และการขัดขอบแผ่นอะครีลิก

 

Microsoft Surface

ปีนี้เป็นปีแห่งจอหลากสัมผัสอย่างแท้จริง มิได้มีแต่แอปเปิลเท่านั้น บริษัทคอมพิวเตอร์ชั้นนำหลายบริษัทกำลังหาทางนำเทคโนโลยีใหม่นี้มาบูรณาการกับสินค้าของตน บริษัทไมโครซอฟท์ถึงกับเปิดแผนกใหม่ ชื่อ Microsoft Surface เพื่อพัฒนาและวิจัยสินค้าที่ใช้จอหลากสัมผัส “เซอร์เฟสคอมพิวเตอร์” (Surface computer) เป็นคอมพิวเตอร์รูปทรงโต๊ะกาแฟ ผิวโต๊ะทำหน้าที่เป็นจอภาพขนาดใหญ่ ตรวจจับการเคลื่อนไหวของมือผู้ใช้ด้วยแสงอินฟราเรด ภายในมีกล้องห้าตัวสามารถตรวจจับการกดของนิ้วมือและสิ่งของพร้อมๆ กันได้ 52 จุด

เครื่องคอมพิวเตอร์ที่ซ่อนอยู่ใต้โต๊ะเป็นพีซีธรรมดา แต่เป็นรุ่นที่มีประสิทธิภาพสูงหน่อย คือใช้ซีพียู Core 2 Duo แรม 2GB และการ์ดจอใหม่ล่าสุด ระบบปฏิบัติการมีแกนหลักเหมือน Windows Vista ทีมงาน Microsoft Surface สร้างส่วน WPF (Windows Presentation Foundation) ขึ้นใหม่ให้เหมาะกับการใช้งานแบบจอหลากสัมผัส โครงการนี้มีชื่อรหัสว่ามิลาน ทำให้บางครั้งมีผู้เรียนคอมพิวเตอร์นี้ว่า Microsoft Milan (นอกเหนือจาก Table PC)

สิ่งที่น่าทึ่งของมิลานคือนอกจากจะปฏิสัมพันธ์กับการใช้นิ้วมือแล้ว มันยังปฏิสัมพันธ์กับอุปกรณ์ดิจิตอลพกพาได้ด้วย ในวิดีโอคลิปที่เว็บไซต์ http://www.microsoft.com/surface แสดงให้เห็นว่าเมื่อผู้ใช้วางกล้องถ่ายรูปดิจิตอลไว้บนโต๊ะ คอมพิวเตอร์จะรับรู้และแสดงภาพถ่ายในกล้องออกมาบนโต๊ะเหมือนภาพที่อัดไว้บนกระดาษจริงๆ ภาพถูกคลีออกเรียงซ้อนกันไว้ เมื่อมีผู้นำโทรศัพท์เคลื่อนที่หรือ PDA มาวาง ข้อมูลในรายชื่อการติดต่อก็จะแสดงออกมาบนโต๊ะ ผู้สาทิตยังแสดงวิธีโอนย้ายข้อมูลระหว่างอุปกรณ์ว่าทำได้ง่ายเพียงใช้ปลายนิ้วลากภาพถ่ายจากกล้องแล้วสะบัดค่อยๆ ภาพก็จะเลื่อนไปหาและถูกดูดเข้าไปในเครื่องรับโทรศัพท์

 

ใครลอกใคร

ถ้าดูในวิดีโอสาทิตการทำงานจอหลากสัมผัสของฮาน (www.perceptivepixel.com)  กับของไมโครซอฟท์ (www.microsoft.com/surface) จะเห็นว่าคล้ายคลึงกันมากจนน่าสงสัยว่าเลียนแบบกันหรือไม่ ไมโครซอฟท์อ้างว่าจัดตั้งและพัฒนา Surface มาตั้งแต่ปี 2001 แต่เก็บเป็นความลับสุดยอด และเพิ่งได้ฤกษ์เปิดตัวในปี 2007 นี้เอง ส่วนฮานออกแสดงเทคโนโลยีนี้ครั้งแรกในงานเท็ดปี 2006

ถ้าแอบดูอุปกรณ์ใต้โต๊ะของ Microsoft Surface จะพบว่าใช้เทคโนโลยีเช่นเดียวกับของฮานทุกอย่าง

 

ภาพแสดงอุปกรณ์ใต้โต๊ะคอมพิวเตอร์ Microsoft Surface 1)จอภาพทำจากแผ่นอะครีลิกใสใส่ฉากรับแสง 2)แหลงกำเนิดแสงอินฟาเรด 3)คอมพิวเตอร์ 4)เครื่องฉายภาพ (ที่เห็นลอยอยู่สี่ตัวคือกล้องอินฟราเรด)

ถ้าดูที่เว็บไซต์ของบริษัทฟิงเกอร์เวิร์ค (www.fingerworks.com) จะพบว่าบริษัทนี้ผลิตสินค้าที่ใช้เทคโนโลยีนี้มานานแล้ว จนปัจจบันบริษัทนี้ปิดกิจการไปแล้ว (แต่ยังคงเว็บไซต์ไว้ให้เราดาวน์โหลดซอฟต์แวร์ได้ฟรี)

 

ของดีที่ปลายนิ้ว
เทคโนโลยีจอหลากสัมผัสช่วยให้เราใช้คอมพิวเตอร์ได้สนุกมากขึ้น และเข้าถึงคอมพิวเตอร์ได้ในโอกาสและสถานที่ซึ่งแตกไปจากเดิม การปราศจากแป้นพิมพ์และเมาส์ทำให้ปฏิสัมพันธ์ระหว่างคนกับคอมพิวเตอร์กินความกว้างขึ้น ในอนาคตอันใกล้นี้อาจมีสินค้าไฮเทครูปแบบใหม่ๆ ที่ใช้เทคโนโลยีนี้ในลักษณะที่เราคาดไม่ถึง แอปเปิลนำหน้าไปก่อนแล้วกับ iPhone แต่ไมโครซอฟท์ย่อมไม่ยอมทิ้งห่างแน่ ต่อไปคำขวัญของไมโครซอฟท์ที่ว่า “คอมพิวเตอร์ทุกโต๊ะทุกบ้านวิ่งโปรแกรมของเรา” อาจเปลี่ยนเป็น “โต๊ะทุกตัวทุกบ้านกลายเป็นคอมพิวเตอร์” ก็ได้