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

Post a comment or leave a trackback: Trackback URL.

ความเห็น

  • พิชญ  On มกราคม 23, 2009 at 12:44 am

    สุดยอดดด

  • Maxtrix  On พฤษภาคม 14, 2009 at 11:37 am

    ขอบคุณมากครับสำหรับความรู้

  • Natthapon  On เมษายน 21, 2010 at 3:25 pm

    กำลังฝึกas3 เลยได้ความรู้มากเลยครับ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: