สิ่งที่เราจะทำกันปีนี้คือข้อความกลม ๆ หมุน ๆ แบบนี้(อ่านไม่ผิด ปีนี้แหละถูกแล้ว ดองเป็นปีแล้วค่อยอัพบทความที ^^)
ส่วนประกอบที่สำคัญ
- โปรแกรม Photoshop CS+ (ที่จริงจะเวอร์ชั่นไหนก็ได้นะ)
- โปรแกรม Adobe Flash 8,CS2,CS3 ได้หมด บทความนี้ใช้ CS3 ครับ
- ความตั้งใจ และใจเย็น ๆ อย่า งงกับบทความ ( อันนี้สำคัญ ฮ่า ๆ )
- มีทุกข้อที่กล่าวมา ^^
เริ่ม
1. ที่โปรแกรม Photoshop สร้างเอกสารใหม่ขึ้นมา กำหนดขนาดพื้นที่งานประมาณนี้ครับ
Width : 300 px
Height : 300 px
2. ใช้เครื่องมือ Ellipse Tool ( U ) เลือกเป็นแบบ Shape(ในภาพจุดที่ 1) แล้วเลือกลักษณะของ Shape เป็นวงกลม(ในภาพจุดที่ 2)
3. ทำการวาด Shape วงกลมลงไปบนพื้นที่งานจะได้ดังภาพครับ
4. ในขั้นตอนที่ 4 นี้เราจะมาทำให้วงกลมอยู่กึ่งกลางของพื้นที่งาน
4.1 กด Ctrl ค้างไว้แล้วคลิกเลือกเลเยอร์ Background ,Shape 1 (ในภาพจุดที่ 1)
4.2 คลิกเลือกที่ Move Tools(V) (ในภาพจุดที่ 2)
4.3 มองดูที่ properties ด้านบน
จากนั้นกดที่ Align vertical centers(ในภาพจุดที่ 3)
และกดที่ Align horizontal centers(ในภาพจุดที่ 4)Shape วงกลมของเราก็จะอยู่กึ่งกลางของพื้นที่งานแล้ว(ในภาพจุดที่ 5)
5. ในขั้นตอนนี้เราจะมาพิมพ์ข้อความกัน
5.1 ให้คลิกเลือกที่ Shape 1 ก่อนครับ(ในภาพจุดที่ 1)
5.2 จะสังเกตเห็นเส้น Path ปรากฏขึ้นรอบ ๆ วงกลมที่เราวาดไว้(ในภาพจุดที่ 2)
(ถ้าเห็นเส้น Path ขึ้นแบบในรูปตัวอย่างเป็นอันว่าใช้ได้ครับ)
5.3 คลิกเลือกที่เครื่องมือ Horizontal Type Tool(T)(ในภาพจุดที่ 3)
5.4 จากนั้นให้เลื่อนเคอร์เซอร์มาใกล้ ๆ เส้นขอบของวงกลมครับ
ตัวเคอร์เซอร์จะเปลี่ยนเป็น(ในภาพจุดที่ 4)
แล้วเริ่มพิมพ์ข้อความที่ต้องการได้เลย** ในขั้นตอนนี้ถ้าเราไม่คลิกให้เส้น Path ของ Shape 1 ปรากฏขึ้นมาก่อน ตัวเคอร์เซอร์จะไม่เปลี่ยนครับ และเราก็จะพิมพ์ข้อความรอบ ๆ วงกลมไม่ได้
6. ข้อความที่เราพิมพ์ จะพิมพ์เรียงไปตามแนวเส้น Path ของวงกลมดังรูปด้านล่างครับ
7. ขั้นตอนนี้จะทำการลบเลเยอร์ที่ไม่จำเป็นต้องใช้ออกไปครับ
7.1 กด Ctrl ค้างไว้แล้วคลิกเลือกเลเยอร์ Background ,Shape 1 (ในภาพจุดที่ 1)
7.2 แล้วกดปุ่มถังขยะ(ในภาพจุดที่ 2) เพื่อลบสองเลเยอร์นี้ทิ้งได้เลยครับ
ตอนนี้ก็จะเหลือแต่เลอร์ที่เราพิมพ์ข้อความไว้เท่านั้น
8. ในขั้นตอนนี้เราจะมาแปลงสภาพของข้อความที่ได้พิมพ์ไว้ให้เป็น Shape ครับ เพื่อนำไปใช้ในขั้นตอนถัด ๆ ไป
8.1 ให้เลือกที่เมนู Layer > Type > Convert to Shape (ในภาพจุดที่ 1,2,3) ตามลำดับ ตอนนี้ข้อความที่เราพิมพ์ไว้ก็จะเปลี่ยนเป็น Shape แล้ว
9. เมื่อทำการเปลี่ยนข้อความเป็น Shape เรียบร้อยแล้ว ก็ให้ทำการเซฟครับ
โดยตั้งชื่อไฟล์เป็น Text (หรือชื่ออะไรก็ได้ตามสะดวก) Format เป็น .psd
แล้วก็เซฟได้เล้ย จบขั้นตอนนี้ก็ปิดโปรแกรม Photoshop ไปได้เลย (ดังภาพ)
เข้าสู่ช่วงที่ 2 เราจะทำงานกันต่อบนโปรแกรม Flash ครับ
10. ที่โปรแกรม Flash ให้สร้างงานใหม่ขึ้นมา 1 งานกำหนด Properties คร่าว ๆ ดังนี้ครับ
Width : 300 px
Height : 300 px
Frame Rate : 24 fps (กำหนดให้เป็นสัก 24 เพื่อความนุ่มนวลเวลาโมชั่น)
11. เมื่อสร้างงานขึ้นมาแล้ว ต่อไปเราจะนำข้อความที่ได้พิมพ์ไว้แล้วใน Photoshop มาใช้กัน
ให้เข้าไปที่เมนู File > Import > Import to Library... (ในภาพจุดที่ 1,2,3 ตามลำดับ)
12. คลิกเลือกไฟล์ Text.psd ที่เราได้ทำการเซฟไว้ในขั้นตอนที่ 9 แล้วกด Open ได้เลย
13. ขั้นตอนการ Import ข้อความวงกลมเข้าสู่ Flash
13.1 ติ๊กเลือกข้อความวงกลม (ในภาพจุดที่ 1)
13.2 คลิกเลือกที่ Editable paths and layer styles (ในภาพจุดที่ 2)
13.3 คลิก OK ได้เลยตอนนี้ ข้อความวงกลมที่ทำไว้ก็จะเข้ามาอยู่ใน Library เราแล้ว
14. เมื่อทำการ Import ข้อความเข้ามาแล้ว ขั้นตอนต่อไปเราจะมาสร้าง Movie Clip กัน
14.1 ให้ไปที่เมนู Insert > New Symbol (Ctrl + F8) จะปรากฏไดอะล๊อกดังภาพ
14.2 ที่ช่อง Name ตั้งชื่อว่า Motion (ในภาพจุดที่ 1)
ที่ Type : เลือกเป็น Movie Clip(ในภาพจุดที่ 2)
14.3 แล้วกด OK ได้เลย
15. เมื่อทำกด OK แล้ว ตอนนี้เราจะมาทำงานอยู่ในส่วนของ Movie Clip ที่ได้ตั้งชื่อไว้ครับนั้นคือ "Motion" นั้นเอง (สังเกตในภาพจุดที่ 1)
15.1 ต่อไปให้เปิดหน้าต่าง Library ขึ้นมาครับ ถ้าใครไม่ขึ้นให้กด(Ctrl + L)
จากนั้นลาก Text.psd เข้ามาไว้ที่พื้นที่งานเลยครับ(ในภาพจุดที่ 2)เมื่อเราลากข้อความวงกลมเข้ามาในพื้นที่งานแล้ว ข้อความที่ลากเข้ามาอาจจะยังไม่อยู่กึ่งกลางของพื้นที่งาน เราจะมาทำให้มันอยู่กึ่งกลางกัน เพราะขั้นตอนนี้สำคัญมาก และมีผลต่อการหมุนของข้อความ เรียกง่าย ๆ ว่า ทำ/ปรับจุดหมุน นั้นเอง = ="
15.2 คลิกเลือกข้อความวงกลมบนพื้นที่งานก่อน จากนั้นเปิดหน้าต่าง Align ขึ้นมา
ถ้าไม่มีให้กด(Ctrl + K) หรือไปที่เมนู Window > Align
15.3 จากนั้นให้กดที่ Align/Distribute to stage(ในภาพจุดที่ 3)
(ถ้าปุ่ม Align/Distribute to stage นี้กดอยู่แล้วให้ทำขั้นตอน 15.4 เลย)
15.4 กดที่ Align Horizontal Center(ในภาพจุดที่ 4)
15.5 กดที่ Align Vertical Center(ในภาพจุดที่ 5)จบขั้นตอนนี้ข้อความวงกลมของเราก็จะอยู่กึ่งกลางแล้ว
16. เริ่มทำการสร้างโมชั่น #1
16.1 ที่ Timeline ให้คลิกขวาที่ Frame 1(ในภาพจุดที่ 1)
16.2 จากนั้นเลือกคำสั่ง Create Motion Tween
17. เริ่มทำการสร้างโมชั่น #2
17.1 คลิกขวาที่ Frame 30(ในภาพจุดที่ 1)
17.2 จากนั้นเลือกคำสั่ง Insert Keyframe(ในภาพจุดที่ 2)
18. ถ้าลักษณะบนไทม์ไลน์จะออกมาเป็นดังนี้ เป็นอันว่าใช้ได้
19. ขั้นตอนนี้เราจะทำให้ข้อความวงกลมหมุนได้
19.1 คลิกเลือกที่ Frame 2(ในภาพจุดที่ 1)(คลิกเลือกเฉย ๆ นะ)
19.2 มาดู Properties ด้านล่าง ที่ Rotate ให้เลือก CW ครับ(ในภาพจุดที่ 2)
(CW = หมุนตามเข็มนาฬิกา/CCW = หมุนทวนเข็มนาฬิกา)
19.3 ให้ลองกด Enter ดู จะเห็นว่าข้อความวงกลมหมุนได้แล้ว
20. ต่อไปทำให้การหมุนของข้อความมีความต่อเนื่อง ไม่สะดุด
20.1 คลิกเลือกที่เฟรมสุดท้ายของโมชั่นนั้นคือ Frame ที่ 30(ดังภาพในจุดที่ 1)
20.2 เปิดหน้าต่าง Action ขึ้นมา โดยไปที่เมนู Window > Actions หรือกด (F9)
20.3 ใส่สคริปไปดังนี้ gotoAndPlay(1); (ในภาพจุดที่ 3)
20.4 จากนั้นกดที่ Scene 1(ในภาพจุดที่ 4) เพื่อออกจากการทำงานในส่วนของ Movie Clip "Motion" และกลับสู่พื้นที่งานหลักของเรา
21. ให้ลาก Movie clip "Motion" ที่เราเพิ่งทำเสร็จ เข้ามาวางบนพื้นที่งานหลักของเราเลย
(ในภาพจุดที่ 1)
22. จากนั้นให้คลิกเลือกเครื่องมือ Free Tranform Tools(Q)(ในภาพจุดที่ 1)
แล้วทำการปรับ ย่อ/ขยาย/ดัด/หมุน ตัวอักษรวงกลมได้ตามต้องการเลยครับ
23. เมื่อเรียบร้อยแล้วให้ลองกด Ctrl + Enter เพื่อดูผลกรรมที่เราสร้างไว้ได้เลยครับ 
เพิ่มเติม
ถ้าข้อความวงกลมหมุนเร็วเกินไปให้ย้อนกลับไปที่ขั้นตอน 17.1 ครับ แล้วขยายปลายทางของโมชั่น จาก 30 ให้เป็นสัก 170 – 200 ก็ได้ครับ ยิ่งขยายเฟรมออกไปมาก การหมุนของข้อความก็จะช้าลงเรื่อย ๆ ครับ
Download .PSD & .SWF Source File : Circle Text Motion Tutorias
(.SWF สำหรับ Flash CS3 นะครับ ยังไม่ได้แปลงฟอแมตให้เปิดกับ Flash 8 ได้)
ปล.คลิกขยายรูปดูประกอบเอานะครับ ยังไม่ได้หาธีมมาเปลี่ยนให้มันกว้างพอดีกับรูปในบทความ T-T
