Sovoblog ๒

จาก entry ก่อนหน้านี้
ผมพูดถึงเรื่องการทำหน้าหนังสือพลิกไป-พลิกมาด้วย Open Source Flash สำเร็จรูป -
ที่ชื่อ Dynamic Page Flip ไปแล้ว
entry นี้เป็นเรื่องต่อเนื่องกับ entry ที่ว่าครับ ..แต่ไม่ได้พูดถึงเรื่องใหม่นะ
จริงๆ แล้วเป็นเรื่องเดิม (กับ entry ที่ว่า) เสียด้วยซ้ำไปครับ

สืบเนื่องจากมี comment หนึ่ง (ณ วันที่พิมพ์ entry นี้ มันมีแค่ comment เดียว )
มาโพสท์ไว้ว่าว่า ‘..ยากไปนิด..’
ทั้งๆ ที่โดยส่วนตัวผมแล้วผมมองว่าเป็นเรื่องที่ค่อนข้างจะเข้าใจได้ไม่ยากนักแล้วนะ..
(เพราะผมคิดเอาว่ามันเป็นเรื่องที่ไม่ต้องไปแตะ Flash เลย ก็สามารถใช้งานได้
และเรื่อง XML แม้จะเป็นเรื่องใหม่สำหรับหลายๆ คน แต่ถ้าในขั้นพื้นฐานก็เป็นสิ่งที่เข้าใจได้ไม่ยาก)

ซึ่งทั้งหมดทั้งมวลแล้ว ..ผมถือว่าเป็นความล้มเหลวของผมที่เขียนเรื่อง (ที่ผมคิดว่า) ง่าย แล้วมีคนไม่เข้าใจครับ
ฉะนั้น.. จึงพยายามเรียบเรียงใหม่ด้วยการเอาตัวอย่างมาว่ากันให้เห็นซะเลย
รอบนี้ถ้ายังจะไม่รู้เรื่องอีก.. ให้มันรู้ไปเอ้า!

เริ่มแรก.. ผมเตรียมไฟล์เพื่อนำมาใช้เป็นหน้าหนังสือตามนี้นะครับ

ไฟล์แต่ละไฟล์มีชื่อตามด้านมุมขวา-ล่างของรูปอยู่แล้วครับ
สังเกตุดีๆ ว่าไฟล์แต่ละไฟล์จะเป็นไฟล์นามสกุล .JPG ที่มีขนาด 200×250 pixel (ซึ่งเป็นขนาดของหน้าหนังสือหนึ่งหน้าในตัวอย่างนี้)
..เว้นอยู่ 3 ไฟล์!
หนึ่งคือไฟล์ SPREAD_F+G.JPG (รูปใหญ่ที่สุด) ที่เป็นไฟล์ .JPG ขนาด 400×250 pixel
(ขนาด 400×250 มีความกว้างเป็นสองเท่าของหน้าปกติที่มีขนาด 200×250
ซึ่งนั่นหมายความว่าหน้าหนังสือนี้เป็นหน้าคู่ 2 หน้าติดกันนั่นเองครับ
..ในที่นี้ผมทำไฟล์นี้ขึ้นมาเพื่อจะยกตัวอย่างให้เข้าใจถึงรูปแบบหน้าหนังสือแบบหน้าคู่ที่ไม่ต้องหั่นไฟล์แยกเป็นสองไฟล์)
และอีกสองไฟล์คือไฟล์ TRANSPARENT_I.SWF และ TRANSPARENT_J.SWF
ที่มีขนาดกว้าง x ยาวเท่ากับหน้าปกติหนึ่งหน้าทั่วไป ต่างกันตรงที่ไฟล์สองไฟล์นี้เป็นไฟล์นามสกุล .SWF
(ซึ่งก็คือไฟล์ Flash นั่นเอง ..ในที่นี้ผมพยายามเอาไฟล์ .SWF มาเป็นตัวอย่าง
เพื่อที่จะให้เห็นรูปแบบการทำหน้าโปร่งใส (Transparent) ประกอบกับการมีภาพเคลื่อนไหวภายในหน้าหนังสือ
ซึ่งทั้งสองคุณสมบัติที่ว่ามานั้น ..ไฟล์ .JPG ทำไม่ได้ครับ)

อ้อ ลืมบอก
ไฟล์ .SWF สองไฟล์ตามที่เห็นข้างบน ..จะเห็นว่ามีวงรีอยู่กลางทั้งสองภาพ
นั่นคือส่วนที่ผมทำเป็นส่วนโปร่งใสไว้นะครับ เดี๋ยวพอแสดงตัวอย่างให้ดูจะเห็นภาพครับผม

ทีนี้ผมจะสมมุติว่าอิง path ของไฟล์หน้าหนังสือทั้งหมดรวมถึงไฟล์ PREPAGE.JPG ที่จะทำหน้าที่ไม่ใช่หน้าหนังสือจริง -
ไว้ในโฟลเดอร์ที่ชื่อ pages เช่นเดียวกับที่ไฟล์ที่โหลดจากต้นฉบับเก็บไว้นะครับ
จะได้เข้าใจตรงกันได้ไม่ยาก

ผมขอเกริ่นถึงภาษา XML สักนิดละกันนะครับ จะได้ง่ายต่อการทำความเข้าใจต่อไป
ในที่นี้ขอเกริ่นเฉพาะประเด็นที่เกี่ยวกับเรื่องนี้เท่านั้นละกันครับ อย่างย่อที่สุด
(ขืนพล่ามมากๆ จะกลายเป็น entry เรื่อง XML ไป)

• สิ่งที่อยู่ในวงเล็บ < > (รวมถึงตัววงเล็บเองด้วย) 1 วงเล็บ เรียกว่า 1 tag
  ตัวอย่างเช่น <family> นับเป็น tag 1 อัน
  ชื่อว่า tag family
• tag มีสองอย่างใหญ่ๆ คือ tag เปิดและ tag ปิด
  tag ทุก tag จะต้องมีเป็นคู่ คือ ทั้ง tag เปิดและ tag ปิด เสมอ
  ตัวอย่างเช่น <family> </family>
  โดย tag แรก คือ tag เปิด เขียนลักษณะปกติ
  ส่วน tag หลัง คือ tag ปิด สังเกตว่า tag ปิดมีเครื่องหมาย / อยู่หน้าชื่อ tag ด้วย
• จริงๆ มี tag อีกประเภทหนึ่ง ลักษณะประมาณนี้ <family />
  สังเกตว่ามีเครื่องหมาย / อยู่หลังชื่อ tag เลย และไม่มี tag ปิด
  tag ลักษณะนี้หมายถึง tag ที่ปิดตัวเองเสร็จสรรพในตัว
  ใช้เขียนแทน <family></family>ได้ในกรณีไม่มีข้อมูลแทรกตรงกลางระหว่าง tag เปิดและ tag ปิด
• tag สามารถเขียนซ้อนคั่นกลางกันได้ เพื่ออธิบายข้อมูลที่เป็นลำดับลงไป
  ตัวอย่างเช่น <family><member /></family>
  สังเกตว่ามี tag member คั่นกลางระหว่าง tag เปิดและปิดของ family
• สิ่งที่อยู่ระหว่าง tag เปิดและ tag ปิด (รวมถึงตัว tag ที่เปิดและปิดนั้นด้วย)
  เราเรียกทั้งหมดนั้น 1 ชุดว่า element
  ตัวอย่างเช่น <family><member /></family>
  เราเรียก tag เปิดและ tag ปิด (สีแดง) ว่า tag family หนึ่งคู่
  (โดยปกติ ถ้าพูดถึง tag จะหมายถึง tag หนึ่งคู่ นอกจากจะเจาะจงว่า tag เปิดหรือปิด จึงหมายถึง tag 1 อัน)
  แต่ถ้าเรารวมทั้งสีแดงและสีน้ำเงินทั้งหมด นั่นคือ element family หนึ่งอัน
• tag เปิด (หรือ tag ที่ปิดตัวเองเสร็จสรรพ) สามารถระบุข้อมูลเพิ่มเติมลักษณะนี้ได้..
  <family name=”พาลธมิตรกุล”>
  สังเกตว่ามี name=”พาลธมิตรกุล” เพิ่มขึ้นมาใน tag เปิด family
  ในที่นี้ เราเรียก name ว่าเป็น attribute และ พาลธมิตรกุล เป็นค่าของ attribute ที่ชื่อ name
  ใน 1 tag สามารถกำหนด attribute กี่อันก็ได้ แต่ต้องไม่มีชื่อ attribute ซ้ำกันใน tag เดียวกัน
  เช่น <family name=”พาลธมิตรกุล” address=”พื้นที่ทับซ้อนชุมชนมัฆวาน”>
• ลำดับของ attribute ไม่เป็นประเด็นนะครับ จะกำหนดอะไรก่อน อะไรหลังก็ได้
  เช่น <family name=”พาลธมิตรกุล” address=”พื้นที่ทับซ้อนชุมชนรักทวาร”>
  มีค่าไม่ต่างกับ <family address=”พื้นที่ทับซ้อนชุมชนรักทวาร” name=”พาลธมิตรกุล”>
  (จริงๆ ลำดับก่อนหลังของ element ชื่อเดียวกันในจุดเดียวกันก็ไม่ถือว่าเป็นประเด็นครับสำหรับ XML ทั่วไป
  แต่ในกรณีของ Dynamic Page Flip มันเป็นประเด็น เพราะต้องลำดับหน้าด้วยลำดับ element)
• กฎของไวยากรณ์ XML ที่สำคัญอื่นๆ ก็เช่น..
  เอกสาร XML 1 ไฟล์ มี element หลักได้แค่อันเดียวเท่านั้น
  แต่ใน element หลักนั้นจะมี element ยิบย่อยเท่าไหร่ก็ได้
  (เราเรียก element อันนอกสุดอันเดียวที่ครอบข้อมูลทั้งหมดนั้นว่า root element)
  นอกจากนี้ ชื่อของ tag และ attribute ต้องเป็นภาษาปะกิตหรือตัวเลข หรือสัญลักษณ์บางอย่างเท่านั้น
  (ต้องขึ้นต้นชื่อด้วยภาษาปะกิตเท่านั้น)
  ตัวอย่างเช่น <family /> <member /> หรือ <hello123 /> เป็นต้น

ยกตัวอย่างข้อมูล XML เล่นๆ สักหนึ่งชุดละกันครับ

หากอ่านข้อมูลดังกล่าวด้วยตาเปล่า ..อาจจะแปลข้อมูลได้ว่า -
เป็นข้อมูลของครอบครัวครอบครัวหนึ่ง (เพราะครอบด้วย tag family)
โดยชื่อตระกูลและที่อยู่ของครอบครัวนี้ถูกระบุใน attribute ชื่อ name และ address ใน tag ชื่อfamily
..ภายในครอบครัวนี้ ประกอบด้วยสมาชิก (แปลจาก tag ชื่อ member)
จากตัวอย่างมี element member อยู่ 4 element ด้วยกัน แปลคร่าวๆ ว่าข้อมูลนี้ระบุว่าครอบครัวนี้มีสมาชิกอยู่ 4 คน
ในแต่ละ element ที่ชื่อ member ระบุชื่อสมาชิกแต่ละคนด้วย attribute ชื่อ name
(attrbute ชื่อ name ใน element ชื่อ family และ member -
แม้จะเขียนเหมือนกัน แต่ก็ให้ค่าต่างกันตาม tag ที่มันอยู่)
นอกจากนี้ หากสังเกตจะเห็นว่า สมาชิกสองคนแรกมี attribute ชื่อ status อธิบายสถานะในครอบครัวเพิ่มเติมด้วย
(แต่สมาชิกอีกสองคนไม่มี ..ซึ่งจริงๆ สำหรับการเขียน XML เบื้องต้นถือว่าถูกต้องตามหลักไวยากรณ์ XML)

เข้าใจคร่าวๆ ตามนี้ก็โอเคครับ..
เริ่มเข้าเนื้อหาจริงได้

ส่วนในเรื่องของ transparent หรือว่าการโปร่งใสของหน้าหนังสือ
ในที่นี้ไม่ต้องกำหนดอะไรเพิ่มเติมครับ เพราะว่ากำหนดตั้งแต่ attribute ชื่อ transparency=”true” ใน root element แล้ว
ถ้าไฟล์หน้าหนังสือที่ใช้มีส่วนไหนโปร่งใส มันก็แสดงผลโปร่งใสให้เองโดยไม่ต้องระบุอะไรเพิ่มเติมนอกจาก URL ครับผม

อ่ะ.. ทีนี้ผมก็จะทำตัวอย่างหนังสือชุดใหญ่เป็นตัวอย่างทั้งหมดละกันครับ
มีทั้ง canTear=”true”, isSpread=”true” และ transparency
ในที่นี้ผมระบุให้สามารถฉีกหน้าที่ 4 D.JPGได้นะครับ
(แน่นอนครับว่าหน้าที่ 3 (C.JPG) ก็ต้องถูกฉีกได้เช่นกัน)

อ้อ ตัวอย่างหลังสุดนี่ผมกำหนดให้เป็นปกแข็ง (hcover=”true” ) ด้วยครับ
แล้วก็ไม่กำหนด prePage ด้วย ..เผื่อจะได้เห็นความต่างทั้งสองกรณี

เอ้อ..

ป.ล.

ผมลืมบอกว่าไฟล์ Dynamic Page Flip ที่ผมใช้มันต่างกับต้นฉบับอยู่หน่อยนึงตรงเมนูพลิกหน้าหนังสือด้านล่าง
จริงๆ การใช้งานไม่ได้ต่างกันครับ ..แค่ผมจัดเรียงตกแต่งให้มันดูดีขึ้นหน่อยนึงแค่นั้นเอง
สามารถอ้างอิงใช้งานกับไฟล์ต้นฉบับที่โหลดมาจากผู้พัฒนา Source ได้ครับ