ภาพเวกเตอร์ ดาวน์โหลดฟรี

วิธีทำเกมส์แบบง่ายๆ ผมจะมาสอนขั้นตอนการสร้างเกมเด็กๆ ก็คือเกมส์แต่งตัว นั้นเองนะครับ สิ่งที่ต้องเตรียมพร้อม ก่อนสร้างเกม ก็คือ

1. รูปภาพ หรือ เวกเตอร์ ที่แยกเป็นชิ้นๆ download
   

   

2. โปรแกรม Adobe Flash ผู้เขียนใช้ เวอร์ชั่น CS 5.5 (*แล้วแต่คนชอบนะครับไม่บังคับ)

เมื่อเตรียมเสร็จแล้วเรามาเริ่มกันเลยครับ

ขั้นตอนแรกให้เปิดโปรแกรม Adobe Flash แล้วสร้างใหม่ ให้เป็น Action Script 2.0 นะครับ

เมื่อสร้างไฟล์ใหม่แล้ว ให้ทำการ Import ไฟล์ รูปที่เราเตรียมไว้ เข้ามา ทีละชิ้น ให้ทำการ Import to Stage

ให้เลือกตัวก่อนเพระ ตัวจะเป็นรูปภาพ ที่อยู่ เลเยอร์ล่างสุด กดปุ่ม Open จากนั้น ภาพก็จะเข้าสู่โปรแกรมแฟลชทันที ดังภาพด้านล่างนี้.

จากนั้นให้ทำการ Modify>>convet to symbol เพื่อเปลี่ยน รูปภาพ ให้เป็น MovieClip

สร้างชื่อ mc เพื่อใช้งาน *ควรสร้างชื่อที่เราเข้าใจ ตาม รูปที่เราสร้าง

ใส่ ชื่อเสร็จก็กด ok เท่านี้ก็สำเร็จไปแล้ว 1 ชิ้นคือ MovieClip ตัว ของ เกมแต่งตัวที่เราจะสร้าง ยังเหลือ ชุดและ ทรงผม ที่เราจะต้องสร้าง MovieClip อีก นะครับ.

ให้ทำทุกๆ ชิ้น เหมือนเดิม เพียงแต่เปลี่ยน ชื่อ MovieClip ตามรูปภาพที่ เรา Import เข้ามา

เมือ นำเข้าไฟล์ พร้อมกับ สร้าง MovieClip เสร็จ ให้ทำการจัด ตำแหน่งของเสื้อผ้า กับ ตัวละครให้เหมาะสมเหมือนกับเรากำลังแต่ตัวให้กับ เกมของเราเลยนะครับ

จากรูป คงสงใสกันว่าจะแต่งตัวยังไง เมื่อ ชุดเสื้อผ้า มีแค่ชิ้นเดียว แล้วชิ้นอื่นๆ ละจะทำยังไง?

จาก นี้ เราจะเริ่มเจาะลึก เข้าไปใน ไอเท็ม แต่ละชิ้นกันเลยนะครับ ผมจะเริ่ม จากทรงผมก่อนนะครับ ให้คลิกเลือกที่ทรงผม แล้วใส่ เปิด properties โดนกด Ctrl + F3 หรือกดที่เมนู Window>>properties ให้ใส่ชื่อตัวแปรตามภาพ

ให้ทำแบบนี้ ครบทุกชิ้นแยกตามรูป ของ MovieClip เลยนะครับเช่น เสื้อ ก็ใส่ตัวแปรเป็น เสื้อ

เมื่อเสร็จหมดแล้ว ต่อไปจะเป็นการ นำไอเท็มชิ้นที่ 2 เข้ามาแล้วนะครับ ผมจะเริ่มที่ทรงผมก่อนนะครับ

ให้ ดับเบิ้ลคลิกที่ทรงผม เพื่อเข้า MovieClip อีกชั้นหนึ่ง หรือคลิกขวา เลือก Edit in Place จากนั้นให้สร้าง Frame ใหม่อีก 1 เฟรม เพื่อที่เราจะนำทรงผมอีกทรงเข้ามา

จาก นั้นให้มาเลือกทำงานที่ Frame ที่ 2 ที่เราเพิ่มสร้างเสร็จ สังเกตุว่าทรงผมจะหายไป เพราะทรงผมทรงแรก อยู่ที่ Frame 1 เมื่อเรามาอยู่ที่ Frame 2 เราจึงไม่เห็นแต่ถ้ากลับไป ยัง Frame ที่ 1 ก็เหมือนปกติ

เมื่อมาอยู่ที่ Frame 2 ให้ทำการ Import ทรงผม ทรงที่ 2 เหมือนตอนที่เรา นำทรงผมทรงที่ 1 เข้ามาแต่จะแต่กต่าง ตรงเราไม่ตำเป็นต้อง สร้าง MovieClip อีก

เมื่อนำทรงผมทรงที่ 2 เข้ามาก็จัดตำแหน่งให้ ถูกต้อง สวยงาม

จากนั้นให้เราสร้าง Layer ใหม่ขึ้มมาอีก 1 Layer โดยการที่เมนู Insert>>Timeline>>Layer

ให้มาทำงานที่ Layer(เลเยอร์) ใหม่ที่เราสร้างเสร็จ ให้เปิด Actions โดยการกด F9 หรือ กดเมนู Window>>Actions

ต่อไปให้ พิมพ์ Code ลงไปว่า stop(); ในพื้นที่ว่าง

เสร็จแล้วก็ทำแบบนี้กับ ไอเทม ทุกชิ้นเลยครับ

เมื่อทำเสร็จให้กลับมาที่ Scene1 ที่เริ่มต้น

ให้สร้าง Layer ขึ้มใหม่อีก 1 Layer บนสุด แล้วเปลี่ยนชื่อเลเยอร์ว่า Button

ขั้น ตอนต่อไป จะเป็นการสร้าง ปุ่มควบคุม ให้ทำการ เลือกปุ่ม โดยกด Window>>Common Libraries>>Buttom จากนั้นก็เลือก ปุ่มที่ชอบ ผมจะเลือก ปุ่มแบบ Classic ละกันนะครับ

จัดตำแหน่งปุ่มให้สวยงาม

เสร็จแล้วใช้เครื่องมือสร้างตัวหนังสือ T บอกบนปุ่มไว้ เพื่อควบคุมไอเท็ม ชิ้นไหน

ทำแบบนี้ครบทุกๆชิ้น เลยนะครับ มีไอเท็มกี่ชิ้นก็ ทำให้ครบ

ต่อไปเราจะใส่ Action บนปุ่มนะครับ ให้เลือก ที่ละปุ่ม แล้วเปิด หน้าต่าง Action ขึ้นมา โดยกด F9 ให้พิมพ์ Code นี้ลงไป

on (release) {
    ทรงผม.nextFrame();

}

*คำว่า ทรงผม คือตัวแปรที่เราใส่ไว้ตอนแรกนะครับ ถ้ายังไม่ทราบ ให้ย้อนกลับไปดูที่การสร้างตัวแปร

ให้ใส่ Code ลงไปบนปุ่มให้ครบทุกปุ้มโดยเปลี่ยน ตัวแปร ตามปุ่มเลยนะครับ เช่น

สำหรับปุ่มเปลี่ยนเสื้อก็

on (release) {
    เสื้อ.nextFrame();

}

สำหรับปุ่มเปลี่ยนกางเกงก็

on (release) {
    กางเกง.nextFrame();

}

ใส่ให้ครบทุกปุ่มนะครับ

จากนั้นให้กลับเข้าไปยัง ไอเท็ม เพื่อใส่ Code เพิ่ม ผมจะอธิบาย แค่ ทรงผมนะครับ เพราะ Code จะเหมือนกันหมด

ดับเบิ้ลคลิกเข้าไปที่ทรงผม เลเยอร์แรกเฟรมสุดท้าย ให้สร้าง มาอีก 1 เฟรม แล้วใส่ Code ไปอีกว่า

gotoAndStop(1);

ดังรูปตัวอย่าง

ทำแบบนี้ครบทุกๆ ไอเท็มเลยนะครับ

เมื่อเสร็จแล้ว ก็ SAVE ทดสอบเกมส์ได้เลยครับ โดย กด Ctrl+Enter

ไม่เข้าใจก็โหลดไฟล์ ตัวอย่าง ไปดูได้ที่ ลิงค์ นี้ครับ ไฟล์ตัวอย่าง