มาทำหนังสือพลิกไป~พลิกมากันเถอะ

จาก entry เรื่องโชว์หัดถ่าย Portrait ของผมก่อนหน้านี้ -
ผมได้ใช้การแสดงผลภาพที่ว่าในลักษณะคล้ายหนังสือ สามารถพลิกหน้าไป~มาได้

ลูกเล่นลักษณะที่พูดถึง มีมาค่อนข้างจะนานพอสมควรแล้วครับ
นัยหนึ่งหากพูดกันตรงๆ เป็นเรื่องของ Flash ซึ่งแน่นอนว่าคงต้องมีเรื่องของ ActionScript เข้ามาเกี่ยวอย่างแน่นอน
(ซึ่งสำหรับผมและเชื่อว่าคงอีกหลายๆ คน ..คงไม่ใช่เรื่องที่ง่ายสักเท่าไหร่นัก)

ทีนี้.. ผมเสาะแสวงไปเรื่อยๆ จนไปเจอว่า
ไอ้ Flash ที่ว่านี้มีเปิดให้โหลดกันฟรีๆ ครับ ..เป็น Open Source สำเร็จรูปพร้อมไฟล์ตัวอย่างประกอบ
การใส่ภาพหรือเนื้อหาลงไปในหน้าต่างๆ ไม่จำเป็นต้องแตะไฟล์ Flash (.FLA) ตัวที่ว่าแต่ประการใด :#p04:
แค่มีความเข้าใจในการสร้างไฟล์ภาพที่จะมาทำหน้าหนังสือแต่ละหน้า -
และมีความเข้าใจเรื่องของ XML กะติ๊ดเดียว.. ( ..อ้าว? :#p07: )

เลยคิดว่าถ้านำมาบอกเล่าผ่านบล็อก แล้วจะมีประโยชน์แก่สาธารณะ

(แต่.. ใจเย็นครับ สำหรับคนที่ไม่คุ้นหูหรือไม่เคยเกลือกกลั้วกับคำว่า 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 ตัวอื่นก็ได้
ตามสะดวก

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

ที่ยึบยั่บ~ยึ่บยั่บเต็มไปหมดนี้
จริงๆ แล้วแบ่งส่วนประกอบใหญ่ออกได้เป็นสองส่วน อธิบายตามนี้ครับ


ส่วนแรก ..กำหนดลักษณะโดยรวมของหนังสือ

ประกอบด้วยลักษณะประมาณภาพข้างบนครับ
โดยที่รายละเอียดแต่ละส่วน มีดังนี้

(* หมายถึง ควรอย่างยิ่งที่จะต้องระบุค่าใดค่าหนึ่ง)

  • *width: ระบุความกว้างของแต่ละหน้าของหนังสือ
  • มีหน่วยเป็น pixel
    จากภาพตัวอย่างข้างบน ระบุว่าหน้าหนังสือมีความกว้าง width=”300″ ซึ่งหมายถึง 300 pixels

  • *height: ระบุความสูงของแต่ละหน้าของหนังสือ รายละเอียดไม่ต่างจาก width
    เช่น height=”400″ ก็คือ หนังสือนี้มีความสูงของหน้า 400 pixels
  • hcover: เป็นการระบุว่าหน้าปกของหนังสือนั้นๆ เป็นปกแข็งใช่หรือไม่
    ค่าที่ระบุมีได้สองค่าเท่านั้นคือ hcover=”true” (ใช่) หรือ hcover=”false” (ไม่ใช่)
    หากไม่ระบุค่านี้ ค่าเริ่มต้นจะเป็น false นั่นก็คือปกอ่อน
  • transparency: เป็นการระบุว่าหนังสือเล่มนี้จะมีการแสดงผล transparent (โปร่งใส)หรือไม่
    ซึ่งจริงๆ แล้ว การทำหน้าหนังสือโปร่งใสคล้ายพลาสติกใสซึ่งมองทะลุถึงอีกหน้าหนึ่ง นั้น -
    เป็นเรื่องของการสร้างไฟล์หน้าหนังสือเป็นไฟล์ .SWF ด้วยโปรแกรม Flash เอง
    (โดยปกติ ไฟล์ .JPG ไม่สามารถทำภาพโปร่งใสหรือ transparent ได้อยู่แล้ว)
    สามารถระบุค่าได้สองค่าคือ transparency=”true” หรือ transparency=”flase” เช่นกัน
    โดย default ของ transparency หากไม่ระบุ คือ false
    (เท่าที่ผมทดสอบดู ผมรู้สึกว่าจะพบปัญหาอยู่พอสมควรเมื่อกำหนด transparency=”false”
    อย่างไรก็ดี ถ้าไม่ได้ใช้ไฟล์ .SWF ที่โปร่งใสโดยระบุ transparency=”false” ก็ไม่ต้องซีเรียสหรอกครับ
    โดยเฉพาะการใช้เฉพาะไฟล์ .JPG อย่างเดียวยิ่งไม่ต้องคิดอะไรมากเลยครับ ไม่เกี่ยวกัน)
  • prepage: ระบุ path ของไฟล์ที่ใช้ในการแสดงผลาก่อนหน้าแรก
    ถ้าลองเปิด sources ที่โหลดมาจากต้นฉบับ จะเห็นหน้าที่ปรากฏก่อนหน้าแรก แต่ไม่สามารถพลิกได้เหมือนหน้าหนังสือ
    เช่น จากตัวอย่างกำหนดไว้เป็น prepage=”pages/prepage.swf”

    ตามกรอบสีแดงข้างบนครับ, prepage จะหมายถึง path ของไฟล์ที่จะใช้แสดงผลส่วนกรอบสีแดงดังกล่าว
    ขนาดที่เหมาะสมของไฟล์ก็คือขนาดเท่ากับ width และ height ของหน้าหนังสือหนึ่งหน้านั่นเอง
    ตรงนี้ถ้าไม่ประสงค์ให้มีก็ลบออกได้เลยครับ ไม่ส่งผลกระทบใดๆ

ส่วนที่สอง ..กำหนดรายละเอียดของหน้าแต่ละหน้า

ส่วนที่สอง จะถูกครอบอยู่ภายในส่วนแรกที่กล่าวถึงครับ ..สังเกตุได้จากส่วนตัวอักษรสีเทาจางในภาพ

..แต่ละหน้า ถูกระบุเริ่มต้นรายละเอียดด้วย <page
และสิ้นสุดรายละเอียดแต่ละหน้าด้วย />
โดยรายละเอียดภายในคือการกำหนด path และคุณสมบัติภายในของแต่ละหน้า

ซึ่งรายละเอียดแต่ละส่วนที่สามารถกำหนดได้ มีดังนี้

(* หมายถึง ควรอย่างยิ่งที่จะต้องระบุค่าใดค่าหนึ่ง)

  • *src: เป็นส่วนที่ระบุ path ของไฟล์หน้าแต่ละหน้า ซึ่งต้องระบุในทุกหน้า
    โดย path ที่อิง จะอิงจากจุดของไฟล์ .SWF เป็นหลัก
    จากตัวอย่าง จะเห็นว่าอิง path ที่ src=”pages/page1.jpg”
    (นี่แหละครับที่ผมบอกว่าทำไมโฟลเดอร์ชื่อ pages ถึงไม่สำคัญเท่าไหร่
    เพราะถ้าเรากำหนด path ของโฟลเดอร์อื่นที่ไม่ใช่ชื่อ pages เราก็ไม่จำเป็นที่จะต้องเก็บไฟล์ไว้ในโฟลเดอร์นี้ก็ได้
    ซึ่งก็หมายถึง จะลบก็ได้..ถ้าคุณอยากจะเปลี่ยน)
  • preLoad: ระบุว่าหน้าดังกล่าวจะให้มีการโหลดให้เสร็จก่อนการแสดงผลหนังสือหรือไม่
    กรณีที่ว่านี่หมายถึงในกรณีที่เป็นการแสดงผลไฟล์ที่มีการโหลดจากที่อื่น -
    ที่ต้องใช้เวลามากกว่าการดึงไฟล์มาแสดงผลจากเครื่องตัวเอง
    ค่าที่ระบุได้คือ preLoad=”true” หมายถึงการโหลดหน้านั้นๆ ตั้งแต่เริ่มต้นให้เสร็จจึงแสดงผล
    หรือ preLoad=”false” หมายถึงการเปิดหน้าหนังสือได้เลย แต่หน้าหนังสือนั้นๆ อาจจะ delay
    (ซึ่งจากการทดลองใช้งานของผมแล้ว ไม่ว่าจะ local หรือโหลดระยะไกล
    ผมแนะนำว่าควรจะกำหนด preload=”true” ในทุกๆ หน้าครับผม ปัญหาในการแสดงผลจะมีน้อยกว่า)

    สำหรับค่า default ของ preload ถ้าไม่ได้กำหนดจะเป็น false
  • canTear: เป็นลูกเล่นที่ระบุว่าหน้าหนังสือนั้นๆ สามารถถูกฉีกทิ้งได้หรือไม่
    โดยการลากเมาส์เปิดหน้าหนังสือนั้นๆ ในลักษณะฝืนมุมการเปิดคล้ายๆ จะฉีกนั่นแหละ
    การฉีกในที่นี้ไม่ได้หมายถึงว่า เมื่อถูกฉีกไปแล้วหน้านั้นจะหายไปเลยในการแสดงผลครั้งต่อไปนะครับ
    เพียงแต่ว่ามันจะหายไปในการแสดงผลครั้งนั้นๆ เท่านั้น ..พอเปิดดูใหม่ มันก็กลับมาไฉไลเหมือนเดิม
    ค่าที่ระบุได้ก็คือ canTear=”true” หมายถึงหน้านั้นสามารถถูกฉีกได้
    และ canTear=”false” หมายถึงหน้านั้นไม่สามารถถูกฉีกได้
    ส่วนค่า default ในกรณีไม่กำหนดคือ false ครับ คือฉีกไม่ได้
    (..แนะนำนิดนึงครับ
    ต้องอย่าลืมว่าหน้าที่ถูกฉีกไปนั้น ..จะมีลักษณะเหมือนกับหนังสือที่ถูกฉีกจริงๆ
    ในแง่ของหน้าที่อยู่ติดกัน (ตรงข้ามแผ่นหน้ากระดาษเดียวกัน) ก็จะถูกฉีกไปพร้อมๆ กันด้วย
    พอนึกภาพออกนะครับ..)
  • afterTear: การส่งค่าไปยังฟังก์ชั่นที่กำหนดในไฟล์ Flash นั้นๆ
    ในที่นี้ผมขอไม่พูดถึงนะครับ เพราะเป็นเรื่องที่ต้องเกี่ยวข้องกับการแก้ไขไฟล์ Flash (.FLA)
  • isSpread: การระบุว่าหน้าดังกล่าวเป็นหน้าคู่ที่มีเนื้อหาต่อเนื่องหรือไม่
    ตรงนี้พูดเฉยๆ อาจจะงงครับ แนะนำให้ลองเปิดไฟล์ตัวอย่างที่อยู่ในโฟลเดอร์ pages ชื่อ spread.swf ดู
    จะเห็นว่าไฟล์ดังกล่าวมีขนาดเท่ากับหน้าหนังสือ 2 หน้าต่อกันโดยไม่ได้ถูกหั่นออกจากกัน
    (เทียบกับไฟล์ตัวอย่างชื่อ page1.jpg และ page2.jpg
    ที่ภาพมีความต่อเนื่องเป็นหน้าคู่กัน แต่ไฟล์ถูกหั่นแยกออกจากกัน กรณีนี้ไม่เข้าข่าย isSpread)

    ซึ่งในที่นี้กรณีขี้เกียจหั่นไฟล์หน้าคู่แบบเดียวกับ spread.swf สามารถกำหนด isSpread=”true” ได้
    โดยระบุ src ไฟล์เดียวกัน และระบุ isSpread=”true” ในทั้งสองหน้า
    (อีกค่าหนึ่งที่สามารถระบุได้
    คือสามารถกำหนด isSpread=”false” ก็ได้ครับ ซึ่งหมายถึงไม่ได้ต่อหน้าคู่
    ซึ่ง default ของ isSpread ในกรณีไม่ได้ระบุก็คือ false อยู่แล้ว เป็นปกติเหมือนหน้าเดี่ยวที่เห็นๆ กัน
    ดังนั้น ถ้าไม่ได้ทำหน้าคู่ก็ไม่จำเป็นต้องระบุ isSpread ก็ได้ครับ)

รายละเอียดนอกเหนือจากนี้ที่ควรทราบ
ก็เช่นว่า

- ความกว้าง 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 นะครับผม

15 thoughts on “มาทำหนังสือพลิกไป~พลิกมากันเถอะ

  1. โฮ้ว…

    เหมือนจะ งงๆ นิดๆ เลยค่ะ TT

    พึ่งลองศึกษาแฟลช ดูเหมือน เวิคร์ชอปนี้จะยากไปนิด T^T

    แต่จะพยายามค่ะ ขอบคุณมากเลยนะค่า ^^

  2. ตอบคุณ kao-ami

    จริงๆ ความคิดเห็นส่วนตัวแล้ว ผมว่าค่อนข้างจะไม่ยากนะครับ
    (จริงๆ ถ้าไม่ชำนาญ flash ก็ไม่ค่อยเป็นประเด็นครับ เพราะว่าจากตัวอย่างนี้ผมไม่ได้แก้ไข flash)
    อาจจะติดเรื่องของ XML บ้าง เพราะเป็นเรื่องใหม่สำหรับหลายๆ คน
    (แต่ก็เป็นเรื่องที่เข้าใจค่อนข้างจะไม่ยาก และก็เป็นเรื่องพื้นฐานด้วย)

    ลองศึกษาดูละกันนะครับ
    ยังไงถ้าติดขัดปัญหาตรงไหน ..สอบถามได้ ถ้าตอบได้จะช่วยตอบครับผม :#p10:

  3. สุดยอดเลยคะ

    แล้วถ้าเราจะเปลี่ยนขนาดหน้าหนังสื้อ เราจะกำหนดตรงไหนคะ
    เพราะลองเปลี่ยนใร xml แล้ว มันเปลี่ยนอยู่ แต่ไม่สมบูรณ์คะ
    ยังไงก็รบกวนด้วยนะคะ

  4. ตอบคุณ tippy

    เปลี่ยนตรง attributes width=”___” และ height=”___” ใน element ชื่อ content ครับ (root element)
    ดูจากภาพประกอบ

    ค่าเดิมคือ width=”300″ และ height=”400″ ลองเปลี่ยนให้ขนาดต่างจากเดิม
    (ขนาดของหน้าหนังสือที่ทำก็ควรจะเปลี่ยนตามไปด้วยนะครับ เปลี่ยนตัวเลขเฉยๆ มันแสดงผลไม่สมบูรณ์)

  5. ขอบคุณมากนะคะ คุณเจ้าของบล็อกที่นำสิ่งดีดีมาแบ่งปัน
    การแก้ไขทำได้ไม่ยาก
    แต่ติดปัญหาตอนที่แทรกไฟล์ DPF.swf ในโปรแกรม dream cs4 (Ctrl+Alt+F)มันไม่แสดงผลอะไรทั้งสิ้น
    ก็เรยไม่แน่ใจว่ามันต้องมีขั้นตอนอะไรก่อนรึเปล่า พอดีไม่มีพื้นฐานเรื่องโปรแกรม flash เรยคะ
    เป็นมือใหม่หัดแก้ไขเว็ปไซต์ ยังไงก็ต้องขอคำแนะนำด้วยนะคะ

  6. ตอบคุณ r_muey

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

    ทดสอบเหมือนๆ กัน ดูผลคู่กันไป ..เช่น

    - ข้อสันนิษฐานว่าการแทรก flash ลงไปใน dreamweaver (หน้าเว็บของคุณ) มีปัญหา
    ก็ลองทดสอบการแทรก flash แบบเดียวกันโดยใช้ตัวต้นฉบับที่ยังไม่ได้แก้ไข ..แทรกลงไปดูครับ
    ถ้าแทรกเหมือนกันเป๊ะ แล้วดูไม่ได้เหมือนกัน ..น่าจะผิดที่การแทรกมีปัญหาอะไรสักอย่าง
    ถ้าตัวต้นฉบับแสดงผลได้ แต่ตัวที่แก้ไขดูไม่ได้ ..อันนี้อาจจะมีปัญหาที่การแก้ไข dpf

    - ข้อสันนิษฐานว่าการแก้ไข dpf ผิดพลาด/มีปัญหา
    ก็เหมือนเดิมครับ ..ทดสอบด้วยการดับเบิ้ลคลิกเปิดไฟล์ dpf.swf เฉยๆ ของทั้งสองตัว
    กรณีที่มี flash player ..สามารถดับเบิ้ลคลิกได้เลย
    แต่ถ้าไม่มี อาจใช้การเปิดเว็บเบราว์เซอร์ (เช่น Internet Explorer, Firefox, Chrome ฯลฯ) ขึ้นมา
    แล้วลากไฟล์ dpf.swf ไปวางในหน้าต่างเว็บเบราว์เซอร์ ..แล้วดูผล
    ถ้าแสดงผลได้ถูกต้องทั้งคู่ ..ต้องย้อนไปดูข้อแรกครับว่าเหมือนกันเป๊ะจริงๆ หรือเปล่า?
    หรือถ้าตัวต้นฉบับแสดงได้ ..ตัวแก้ไขไม่ได้ ก็น่าจะเป็นตามข้อสันนิษฐาน
    หรือถ้ามันไม่ได้ทั้งคู่เลย (และไม่มีการแก้ไขตัวต้นฉบับเลยจริงๆ มายังไงทดสอบยังงั้นเลย)
    ..อาจเป็นที่ flash player (..โดยเฉพาะถ้าเปิดเว็บเบราว์เซอร์แล้วลากไฟล์มาเปิด)

    - ข้อสันนิษฐานว่า flash player ในเว็บเบราว์เซอร์มีอะไรผิดสักอย่าง
    ให้ใช้เว็บเบราว์เซอร์ยี่ห้อนั้น ..เข้าไปที่เว็บ get.adobe.com/flashplayer ครับ
    แล้วทำตามขั้นตอนที่ปรากฎ ..เพื่ออัพเดทเวอร์ชั่นของ flash player ให้เป็นรุ่นล่าสุด
    (เจตนาของผมจริงๆ คือให้แน่ใจว่า flash player ติดตั้งแล้วจริงๆ)
    เมื่อติดตั้งเสร็จแล้ว ..ให้ลองทดสอบตามข้อก่อนหน้าอีกรอบ ..โดยเจาะจงใช้เว็บเบราว์เซอร์เปิดไฟล์
    ถึงขั้นตอนนี้ อย่างน้อยที่สุดไฟล์ dpf ต้นฉบับที่ไม่ได้แก้ไข ..น่าจะเปิดได้แล้วนะครับ (ถ้ามันไม่ได้มาตั้งแต่ต้น)
    ถ้าต้นฉบับได้ ..แต่ตัวแก้ไขยังไม่ได้ ก็แปลว่าผิดพลาดที่การแก้ไขไฟล์ dpf ของคุณ
    แต่ถ้าได้ทั้งคู่ ..ก็แปลว่าเว็บเบราว์เซอร์ไม่มี flash player ตั้งแต่แรกครับ
    (ถ้ายังไม่ได้ทั้งคู่ ..เบื้องต้นผมคงแนะนำได้เท่านี้ครับ)

    เบื้องต้น ..ถ้าทดสอบแล้วผลเป็นไปตามคำแนะนำข้อไหน
    นั่นก็คือสาเหตุของปัญหาที่ถูกตีกรอบให้แคบลงมาครับ ..หวังว่าคุณคงจะเจอสาเหตุ

  7. :#p05:ขอแบบเปิดหน้าหนังสือเฉยๆแบบเพิ่มหน้าได้หน่อยครับ

  8. ตอบคุณ number14

    ขอรายละเอียดมากกว่านี้หน่อยได้ไหมครับ?
    ไม่เข้าใจคำถามจริงๆ

  9. :#p03: โหลดไม่ได้เลย หาลิงค์โหลไม่เจอเลยค่ะ รบกวนช่วยส่งลิงค์โหลดให้ในเมล์ได้ไหมค่ะ ?

  10. ตอบคุณ sisaza

    เข้าใจว่าปัจจุบันหน้าเว็บที่ว่าไม่มีอยู่แล้วครับ
    อย่างไรก็ตาม อาจลองใช้ Sovo Dynamic Page Flip Plus แทนได้ครับ
    คุณสมบัติเดิมเหมือน Dynamic Page Flip ทุกประการ (เพราะพัฒนาต่อมาจากตัวนั้น..แต่เพิ่มลูกเล่นอื่นๆ เข้าไป)
    ลองดู ที่นี่ ครับ

  11. ขอบคุณมาก ๆ เลยค่ะ . จะพยายามเรียนรู้อย่างเต็มที่เลยค่ะ .

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">