มาทำหนังสือพลิกไป~พลิกมากันเถอะ
จาก entry เรื่องโชว์หัดถ่าย Portrait ของผมก่อนหน้านี้ -
ผมได้ใช้การแสดงผลภาพที่ว่าในลักษณะคล้ายหนังสือ สามารถพลิกหน้าไป~มาได้
ลูกเล่นลักษณะที่พูดถึง มีมาค่อนข้างจะนานพอสมควรแล้วครับ
นัยหนึ่งหากพูดกันตรงๆ เป็นเรื่องของ Flash ซึ่งแน่นอนว่าคงต้องมีเรื่องของ ActionScript เข้ามาเกี่ยวอย่างแน่นอน
(ซึ่งสำหรับผมและเชื่อว่าคงอีกหลายๆ คน ..คงไม่ใช่เรื่องที่ง่ายสักเท่าไหร่นัก)
ทีนี้.. ผมเสาะแสวงไปเรื่อยๆ จนไปเจอว่า
ไอ้ Flash ที่ว่านี้มีเปิดให้โหลดกันฟรีๆ ครับ ..เป็น Open Source สำเร็จรูปพร้อมไฟล์ตัวอย่างประกอบ
การใส่ภาพหรือเนื้อหาลงไปในหน้าต่างๆ ไม่จำเป็นต้องแตะไฟล์ Flash (.FLA) ตัวที่ว่าแต่ประการใด 
แค่มีความเข้าใจในการสร้างไฟล์ภาพที่จะมาทำหน้าหนังสือแต่ละหน้า -
และมีความเข้าใจเรื่องของ XML กะติ๊ดเดียว.. ( ..อ้าว?
)
เลยคิดว่าถ้านำมาบอกเล่าผ่านบล็อก แล้วจะมีประโยชน์แก่สาธารณะ
(แต่.. ใจเย็นครับ สำหรับคนที่ไม่คุ้นหูหรือไม่เคยเกลือกกลั้วกับคำว่า XML มาก่อน
XML เบื้องต้น (โดยเฉพาะกับเรื่องที่จะพูดถึงนี้) เป็นเรื่องที่เข้าใจได้ค่อนข้างจะง่ายทีเดียวล่ะ)
ก่อนอื่นเลย ต้องขอแนะนำให้รู้จักกับพระเอกของเรื่องนี้ก่อน
มันมีชื่อว่า Dynamic Page Flip ..แต่น แตน แต๊~น
Dynamic PageFlip ประวัติโดยย่อหาอ่านเอาจากเว็บไซต์ของผู้พัฒนาเองนะครับ
เล่าโดยย่อคือ มันถูกพัฒนามาจาก PageFlip ของผู้พัฒนาที่ปล่อยเป็น Open Source อีกทีหนึ่ง
เพื่อเป็นการให้เกียรติแก่ผู้พัฒนา ผมไม่ขอทำ link ตรงไปยังไฟล์นะครับ -
อย่างไรแล้ว รบกวนผู้อ่านเข้าไปตาม link ของ Dynamic PageFlip
และ download ไฟล์เองจะดีกว่า
เวอร์ชั่นปัจจุบันที่ผมโหลดคือ V2.13 นะครับ
เข้าใจว่าถ้าคุณจะโหลดแล้วกลายเป็นเวอร์ชั่นใหม่กว่า (หรือมีเวอร์ชั่นใหม่กว่าให้โหลดแล้วอยากจะโหลด)
รายละเอียดบางส่วนอาจจะต่างกันบ้าง ซึ่งเข้าใจว่าคงไม่ต่างกันมากนัก ..แต่ถ้าต่างก็น่าจะประยุกต์ใช้ได้ มั๊ง

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

เมื่อดาวน์โหลดไฟล์ที่ว่านี้มาแล้ว -
extract ไฟล์ ก็จะได้ไฟล์ภายใน ตามภาพข้างบนครับ
ซึ่งไฟล์และโฟลเดอร์ที่เน้นสีแดงไว้ คือไฟล์ที่สำคัญสำหรับการใช้งาน
(..พูดถึงในแง่ของการไม่แก้ไขไฟล์ Flash (.FLA) นะครับ)
หากเครื่องคอมพ์ฯ ของคุณติดตั้งโปรแกรม Flash (8 ขึ้นไป) อยู่ เข้าใจว่าคงมี Flash Player อยู่ในตัวอยู่แล้ว -
สามารถลองทดสอบไฟล์ได้โดยการเปิดไฟล์ชื่อ pageflip_v213_dynamic_smart.swf กับ Flash Player ได้ทันที
แต่หากว่าไม่มี ก็สามารถคลิกขวาที่ไฟล์ เลือกเมนู Open with.. และลองเลือก Internet Explorer เพื่อเปิดไฟล์ได้
(..พูดถึงในกรณีที่ IE ในเครื่องของคุณมี Flash Player ฝังอยู่ในเบราเซอร์อยู่แล้วนะครับ)
..ส่วนสำหรับคนที่ติดตั้ง Flash MX 2004 และไม่อยากเปิดไฟล์ swf กับ IE
ก็คงต้องเปิดไฟล์ pageflip_v213_dynamic_smart_mx2004.fla เพื่อ Publish ให้ได้ไฟล์ swf ใหม่ออกมาก่อน
จากนั้นจึงนำไฟล์ดังกล่าวมาเปิดกับ Flash Player ตามปกติแทนครับ
เมื่อทดสอบเปิดไฟล์ ท่านน่าจะได้ผลลัพธ์ประมาณนี้..

ทดสอบโดยการพลิกหน้าไป~มา ได้ตามสะดวก..
อธิบายความสำคัญของไฟล์และโฟลเดอร์ที่ได้จากการโหลด/extract แต่ละส่วนก่อนนะครับ

- โฟลเดอร์ pages: ในที่นี้ใช้เก็บไฟล์ภาพที่จะใช้ทำหน้าเอกสารแต่ละหน้าครับ
จริง โฟลเดอร์นี้อาจจะไม่จำเป็น ซึ่งโดยสำคัญแล้วขึ้นอยู่กับการระบุ path ในไฟล์ XML เป็นหลัก
(ที่ผมอ้างถึงโฟลเดอร์นี้ก็เพราะตัวอย่างของไฟล์เก็บหน้าต่างๆ ไว้ในโฟลเดอร์นี้
อย่างไรก็ตาม คุณสามารถเปลี่ยนชื่อโฟลเดอร์ หรือลบโฟลเดอร์ทิ้งเลย
(ถ้าไม่ประสงค์จะเก็บไฟล์หน้าหนังสือไว้ในโฟลเดอร์นี้) ก็ได้)
ถ้าลองสำรวจไฟล์ตัวอย่างในโฟลเดอร์นี้ จะเห็นทั้งไฟล์นามสกุล .JPG และ .SWF
ซึ่งนั่นหมายถึง ไฟล์ที่จะนำมาทำหน้าหนังสือแต่ละหน้า สามารถใช้ไฟล์ได้ทั้งสองประเภท - โฟลเดอร์ XML: โฟลเดอร์นี้สำคัญครับ (ในกรณีที่คุณไม่ได้ไปแก้ path ในไฟล์ .FLA โดยตรง
ซึ่งสำหรับผู้ใช้ปกติที่ไม่ประสงค์จะแก้ ก็ไม่ควรเปลี่ยนชื่อโฟลเดอร์นี้และชื่อไฟล์ภายใน)
ภายในโฟลเดอร์นี้ประกอบด้วยไฟล์ภายในหนึ่งไฟล์ ชื่อ pages.xml
ซึ่งเป็นไฟล์สำคัญในการระบุให้ไฟล์ Flash (.SWF) ทราบว่าไฟล์ภาพไหนที่จะปรากฏในหน้าหนังสือหน้าไหน - ไฟล์ import_xml.as: เป็นไฟล์ ActionScript ที่ถูกแยกออกมานอกไฟล์ Flash
เข้าใจว่าคงถูกแยกออกมาเพื่อจุดประสงค์ในการเปิดโอกาสให้ผู้ใช้สามารถแก้ไขค่าต่างๆ ได้ตามชอบ
แต่ในที่นี้เป็นไฟล์ที่ไม่จำเป็นต้องแก้ไขนะครับ แต่ก็เป็นไฟล์ที่ขาดไม่ได้ด้วย - ไฟล์ pageflip_v213_dynamic_smart.swf: เป็นพระเอกของงานนี้ครับ ขาดไม่ได้
อธิบายถึงการทำงานโดยคร่าวๆ เพื่อให้เข้าใจนะครับ
ไฟล์ SWF จะทำงานโดยการไปอ่านไฟล์ XML/pages.xml
เพื่อทราบถึงรายละเอียดต่างๆ เช่น จำนวนหน้า ขนาดของหนังสือ ฯลฯ
จากนั้นก็จะโหลดหน้าต่างๆ ที่ทราบมาจากไฟล์ pages.xml มาแสดงผลในไฟล์ SWF นั่นเอง
..ผมจะเริ่มจากการพูดถึงไฟล์ XML กันก่อนเลยนะครับ
ในที่นี้ผมคงจะไม่เกริ่นนำว่า XML คืออะไร (..อยากทราบเพิ่มเติมหาอ่านใน Wiki ก็ได้)
ไฟล์ XML ที่ว่าอยู่ในโฟลเดอร์ชื่อ xml(ที่เน้นสีแดงรูปข้างบนนั่นแหละ)
ไฟล์ชื่อ pages.xml สามารถเปิดไฟล์นี้กับโปรแกรม Notepad หรือ Text Editor ตัวอื่นก็ได้
ตามสะดวก

เมื่อเปิดไฟล์ขึ้น จะได้ตัวอย่างเป็นดังนี้

ที่ยึบยั่บ~ยึ่บยั่บเต็มไปหมดนี้
จริงๆ แล้วแบ่งส่วนประกอบใหญ่ออกได้เป็นสองส่วน อธิบายตามนี้ครับ
| ส่วนแรก ..กำหนดลักษณะโดยรวมของหนังสือ
ประกอบด้วยลักษณะประมาณภาพข้างบนครับ (* หมายถึง ควรอย่างยิ่งที่จะต้องระบุค่าใดค่าหนึ่ง)
มีหน่วยเป็น pixel |
| ส่วนที่สอง ..กำหนดรายละเอียดของหน้าแต่ละหน้า
ส่วนที่สอง จะถูกครอบอยู่ภายในส่วนแรกที่กล่าวถึงครับ ..สังเกตุได้จากส่วนตัวอักษรสีเทาจางในภาพ ..แต่ละหน้า ถูกระบุเริ่มต้นรายละเอียดด้วย <page ซึ่งรายละเอียดแต่ละส่วนที่สามารถกำหนดได้ มีดังนี้ (* หมายถึง ควรอย่างยิ่งที่จะต้องระบุค่าใดค่าหนึ่ง)
|
รายละเอียดนอกเหนือจากนี้ที่ควรทราบ
ก็เช่นว่า
- ความกว้าง x ยาวของหน้าต่างๆ ของหนังสือ
ควรเท่ากัน และควรเท่ากับที่ระบุในส่วนแรกของไฟล์ XML นะครับ เพื่อความถูกต้องสมบูรณ์ในการแสดงผล
(ทั้งนี้ ในกรณีของหน้าคู่แบบ isSpread=”true”
ควรจะมีขนาดความกว้างเท่ากับสองเท่าของความกว้างของหน้าปกติ และความสูงเท่ากับหน้าปกติ ครับ)
- หน้าของหนังสือทั้งหมด ควรมีจำนวนหน้าเป็นจำนวนคู่เสมอ
(พอนึกออกใช่ไหมครับว่าหน้าหนังสือจะมีจำนวนคู่เสมอ
แม้บางหน้าหนังสือจะไม่มีข้อความ อย่างน้อยที่สุดก็ควรจะกำหนดให้ครบ ..เช่นเอาหน้าสีขาวเปล่าๆ ใส่เข้าไปให้ครบคู่)
- การกำหนด isSpread ที่เหมาะสม ต้องเริ่มต้นทำที่หน้าเลขคู่เสมอ และสิ้นสุดที่หน้าเลขคี่ถัดไปเสมอ
(ไม่งั้น มันจะไม่ปรากฏผลต่อเนื่องเป็นหน้าคู่)
- การใช้ไฟล์ภาพ JPG หรือไฟล์ SWF ที่มีขนาดไฟล์ใหญ่มาแสดงผลเป็นหน้าหนังสือหลายๆ ไฟล์
อาจไม่ส่งผลต่อการเปิดดูไฟล์ในเครื่องตัวเองเวลาทดสอบ หรือเก็บไว้ดูในเครื่องตัวเองคนเดียว
แต่จะเห็นผลเวลาอัพโหลดขึ้นเว็บเพื่อแสดงผลครับ (ว่ามันหนืด~ได้ใจขนาดไหน..)
ฉะนั้น ..ลดขนาดไฟล์แต่ละหน้าเข้าไว้นะครับ
ทีนี้เมื่อเข้าใจวิธีกำหนดหน้าผ่านไฟล์ XML แล้ว
ที่เหลือก็แค่การสร้างไฟล์ภาพ (หน้าหนังสือ) ผ่านโปรแกรมแก้ไขภาพ หรือโปรแกรม Flash
โดยกำหนดขนาดความกว้าง x ยาวของหน้าตามที่อธิบายไปก่อนหน้านี้
ทำหน้าออกมาให้ครบ และจึงไประบุ path และคุณสมบัติอื่นผ่าน XML อีกทีหนึ่ง
ก็จบครับ
(ในส่วนของการสร้างไฟล์ภาพใดๆ ผมไม่อธิบายนะครับ)
คิดว่าผมอธิบายรายละเอียดครบแล้วนะ สำหรับการใช้งานเบื้องต้น
เดี๋ยวเอาไว้ entry หน้า ผมจะมาแงะ Source ไฟล์ .FLA -
เพื่อเพิ่มเติมเทคนิคบางอย่างที่นอกเหนือจากไฟล์ต้นฉบับมี ครับผม
อ้อ.. เกริ่นทิ้งไว้เพิ่มเติม
มันมีอีกประเด็นหนึ่ง ตรงที่ว่า ..ถ้าสมมุติเราตั้งโจทย์ว่าอยากจะทำไฟล์หนังสือลักษณะนี้ -
โดยเป็นลักษณะของไฟล์ EXE (Projector) เพื่อนำไปเปิดโดยเน้นการใช้งานแบบ Standalone
(EXE (Projector) คือไฟล์ที่ผนวกระหว่าง Flash Player และไฟล์ SWF หนึ่งไฟล์ -
เป็นไฟล์เดียวกันเพื่อสะดวกแก่การนำไปเปิดกับเครื่องที่ไม่จำเป็นต้องมี Flash Player (หรือมี แต่เป็นเวอร์ชั่นที่ต่างกัน) ได้)
ตัวอย่างของประเด็นที่ว่า เช่น การทำหนังสือขึ้นมาสักเล่ม แล้วประสงค์จะให้คนอื่นโหลดไปดูที่เครื่องตัวเอง
ประเด็นที่ว่านี้คือ จากที่อธิบายมาทั้งหมดใน entry นี้
คงเป็นเรื่องที่หลีกเลี่ยงไม่ได้ที่จะต้องผนวกไฟล์ต่างๆ ที่จำเป็น แต่ไม่ได้ถูกแพ็คไปด้วย
ซึ่งบานตะไทเลยครับ ไหนจะไฟล์ actionScript, XML แล้วไหนจะหน้าหนังสือแต่ละหน้าอีก
ซึ่งการทำ EXE (Projector) แก้ปัญหานี้ได้ไม่ดีนักครับ เพราะมันไม่ได้ถูกแพ็ครวมไปด้วย
ปัญหาลักษณะนี้อาจแก้ขัดได้ด้วยวิธีแพ็คไฟล์แบบทั่วไป เช่น บีบอัดเป็นไฟล์ ZIP
เมื่อผู้ใช้โหลดไฟล์ ZIP มา ก็ extract ไฟล์ออกมาเป็นปกติ
แต่ปัญหาเรื่องไฟล์ปลายทางรกรุงรังก็ยังคงไม่ได้ถูกแก้ไขไปสักเท่าไหร่
ถ้าปัญหาลักษณะที่ว่านี้ คือปัญหาที่ผู้อ่านคิดว่าเป็นประเด็น
เอาไว้โอกาสถัดไป~ถัดไป จะมาพูดกันถึงวิธีรวมไฟล์ลักษณะแยกๆ เหล่านี้เป็นไฟล์เดียวในการเรียกใช้โดยสะดวกครับ
เพิ่มเติม! (29 กรกฎาคม 2551)
ผมเขียน entry ใหม่ แต่เป็นเรื่องเดียวกับเรื่อง entry นี้ เพียงแต่ขยายความพร้อมตัวอย่างประกอบพรึ่บพรั่บ!
อย่างไรแล้วหากใครสนใจ..แต่ยังไม่เข้าใจ อ่านต่อได้ที่ http://blog.sovoboys.net/?p=84 นะครับผม



