Nuchun's Atelier

บล็อกรีวิวเครื่องเขียน l สีมาร์คเกอร์ l อุปกรณ์วาดรูป พร้อมวิธีทำงานประดิษฐ์สนุกๆ ที่ทำได้ที่บ้าน

[Interactive CD] ตอนที่ 1 : ขั้นตอนการเตรียมงานก่อนทำซีดีรายงานประจำปี

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

ครั้งนี้จะมาทำโปรแกรม Adobe Animate หรือโปรแกรม Flash สมัยก่อนกันค่ะ โปรแกรมนี้จริงๆ ใช้เขียน Application ได้ ทำเว็บก็ได้ (แต่เดี๋ยวนี้ไม่ค่อยนิยมแล้ว) และทำเกมได้ค่ะ สาเหตุที่ต้องมาศึกษา ก็เพราะว่าที่บริษัทเปลี่ยน Format การแจกรายงานประจำปีจากหนังสือเล่มๆ เป็นซีดีด้วย ก็เลยได้มาลองทำโปรแกรมนี้ (หลังจากที่หนีมานาน ฮือ— T^T) ซึ่งการใช้งานมันยากเย็นเหลือเกินค่ะ สำหรับใครที่อยากทำพวก Interactive CD หรือโดนให้ทำซีดีรายงานประจำปีเพื่อแจกผู้ถือหุ้น Tutorial นี้น่าจะเป็นประโยชน์ค่ะ

การทำรายงานประจำปีนั้น ของที่บริษัทคือเริ่มจากอาร์ทเวิร์คตัวเล่ม แล้วนำ pdf ของเล่มนั้น มาจัดทำสารบัญใหม่ในซีดี ให้สามารถเลือกกดดูแต่ละเรื่องได้ค่ะ

ลำดับก่อนหลังการทำ CD Annual Report จากไฟล์ PDF 

  1. ออกแบบหน้าปกของตัวเล่มก่อน เพื่อกำหนดภาพรวม
  2. เมื่อตัดสินใจเรื่องปกแล้ว เขียน Storyboard ตรงส่วนของ Intro ให้ละเอียดที่สุด (เดี๋ยวเขียนวิธีให้อีกทีนะคะ)
  3. รวบรวมข้อมูลส่วนที่อยู่ใน Intro เช่น เว็บไซต์ที่จะต้องลิงค์ใน intro และอื่นๆ
  4. ตั้งโฟลเดอร์ที่จะใช้เก็บไฟล์ pdf
  5. ทำ Intro ใน Adobe Animate
  6. รอไฟล์หน้าสารบัญที่ไฟนอล แล้วนำมาทำหน้าสารบัญในซีดี <<< สิ่งสำคัญคือข้อความในสารบัญไม่ควรเปลี่ยนเลยนะคะ เลขหน้าหรือพื้นหลังจะเปลี่ยนไม่เป็นไร แต่คำไม่ควรเปลี่ยนแล้ว ถ้าเปลี่ยนจะต้องทำข้อความให้เป็นปุ่มใหม่สถานเดียว ซึ่งมันจะยุ่งยากนะ
  7. รอตัวเล่มเสร็จ ทำออกมาเป็นไฟล์ pdf (ทั้งแยกส่วนตามสารบัญและ pdf ทั้งเล่ม) แล้ว ลิงค์เข้ากับสารบัญของซีดี
  8. Write CD

การเขียน Storyboard

สิ่งสำคัญเวลาเขียน Storyboard ไม่ใช่รูปสวยๆ นะคะ แต่จุดสำคัญคือ

  • เราต้องการหน้าตาให้ออกมาเป็นยังไง
  • เคลื่อนไหวยังไง (เข้ามาหรือออกไปจากหน้าจออย่างไร)
  • ตรงไหนใช้ทำอะไร เช่น เป็นปุ่มให้คลิก ปุ่มปิด ลิงค์เข้าเว็บ

จะเขียนให้เราเข้าใจคนเดียวก็ไม่เป็นไรค่ะ (ถ้าเราทำคนเดียวนะ) แต่คิดออกมาให้จบ แต่ละ Scene ไม่งั้นจะทำงาน (และงม) ลำบากค่ะ

อย่าง Intro ตามวิดีโอนี้ เกิดจาก Storyboard ด้านล่างนี้ค่ะ

การจัดโฟลเดอร์ใน CD

ก่อนอื่นจะเริ่มลงมือทำ Flash และเขียน Script กัน เราควรจะจัดโฟลเดอร์ที่เก็บไฟล์ (ที่จะลิงค์ใน Adobe Animate) ให้เป็นระบบก่อนค่ะ เพราะการทำงานของ Adobe Animate นั้นเกี่ยวข้องกับการดึงไฟล์จากที่เก็บไฟล์โดยตรง ดังนั้นเราควรจัดระบบให้เรียบร้อยก่อนจะเริ่มสร้างตัว Adobe Animate ออกมา

โครงสร้างโฟลเดอร์ จันแนะนำอย่างนี้ค่ะ

  • PDF : เก็บไฟล์เล่ม pdf แบบทั้งเล่ม
  • Content เก็บไฟล์ PDF ที่แยกเป็นส่วนๆ ข้างในแยกเป็น 2 Folder คือ
    • ENSplit เก็บ pdf ฉบับภาษาอังกฤษที่แยกหน้าตามสารบัญ
    • THSplit เก็บ pdf ฉบับภาษาไทย ที่แยกหน้าตามสารบัญ

ถ้าเกิดเราทำตัวเล่มไปพร้อมๆ กัน แล้วไฟล์ยังไม่เสร็จก็ไม่เป็นไรนะคะ แต่ว่าอยากให้ตั้งโฟลเดอร์รอไว้ก่อน จะได้เขียน Script รอไปก่อนได้นะ

ลงมือกับ Adobe Animate

เมื่อเปิดโปรแกรม Adobe Animate CC ขึ้นมาแล้ว กดที่ File > New Document จะขึ้นหน้าตาแบบนี้ค่ะ ตรงแถบด้านซ้ายมือเลือก ActionScript 3.0 แล้ว กรอกขนาดหน้าจอลงไป เป็นขนาด Width : 1920 px Height : 1080 px ค่านี้เป็นค่าของหน้าจอ Widescreen ที่นิยมใช้ในปัจจุบันค่ะ กรอกเรียบร้อยแล้วกด OK

เมื่อเข้าไปแล้วจะเห็นกระดาษสีขาวบนจออยู่ตรงกลางหนึ่งแผ่น อย่างแรกเลยก็ปรับตำแหน่งเครื่องมือต่างๆ ตามภาพก่อนก็ดีค่ะ เพราะบางครั้งมันจะยุ่งยากเวลาทำงานจริงๆ ถ้า Tools ต่างๆ อยู่ไม่ถูกที่ถูกทาง (เดี๋ยวดูรูปประกอบจะงงด้วยแหละ) เช็ค Window บนแถบด้านบน ว่าติ๊กเหมือนในภาพหรือเปล่า ถ้ายังไม่มีตัวไหนก็ติ๊กเลยค่ะ ที่สำคัญๆ ก็จะมี Tools ให้เอาไว้ทางซ้ายมือ Timeline กับ Action ให้อยู่ด้านล่าง เพราะเราต้องใช้พื้นที่แนวนอนเยอะค่ะ แล้วก็เอาแถบ Properties ไว้ทางขวามือ

ใน Annual Report ที่จันทำจะมี 3 ส่วนใหญ่ๆ คือ

  1. Intro : ส่วนวิบวับที่บอกข้อมูลต่างๆ ของบริษัท มีให้เลือกว่าจะเข้าสารบัญภาษาไทยหรืออังกฤษ
  2. สารบัญภาษาไทย : หัวข้อเนื้อหาต่างๆ ให้เลือกกดดูตามเนื้อหา
  3. สารบัญภาษาอังกฤษ

3 ส่วนนี้ก็คือเราต้องทำ 3 Scenes ค่ะ นี่คือขั้นตอนทั้งหมดของการเตรียมงานก่อนการลงมือค่ะ เดี๋ยวครั้งหน้าเรามาเริ่มทำ Intro กันค่ะ

*********************
ทั้งหมดเป็นการเขียนและวาดโดยจันเอง
ใครจะก๊อปไปไว้ไหน เครดิต www.nuchun.com ด้วยนะคะ
ขอบคุณค่ะ