[ฮาวทู] มาทำเกมแฟลชเล่นกันดีกว่า

posted on 11 Apr 2009 12:03 by momoshigi in Flash

วันนี้ว่างงานอีกเช่นเคย (ว่างไรนักหนาเมิง) ไม่มีไรทำเลยนั่งทำเกมแฟลชเล่น

เห็นว่ามันไม่อยากเท่าไหรฝเลยจะเอามาสอนให้ทำกันเล่นๆ หนุกๆ ไร้สาระ

แก้เซง เหอๆๆๆ ไปดูเหอะ

เตรียมตัวกันก่อน

สิ่งที่ต้องใช้ในการทำ

1.โปรแกรม Flash เวอร์ชั่นไรก็ได้ แนะนำ MX ขึ้นไป (ล้าสมัยจริงเลยเรา เด่วนี้เค้าใช้ CS3 หมดละ)

2.โปรแกรม Adobe PhotoShop หรืออะไรที่มันตัดรูปเป็นชิ้นๆ ได้

3. ศึกษาการใช้งานมาสักนิดนึง พอรู้จักเกี่ยวกับ Symbol สักนิดหน่อย เพราะผมจะไม่สอนมาก ขี้เกียจ

4. รุปสวยๆ ชักรูป (ผมใช้ขนาด 300 x 300 pixel )

5. ยาแก้ปวดหัวซักเม็ด เพราะคุณคงอ่านไม่ค่อยรุ้เรื่อง ผมยังไม่ค่อยรู้เรื่องเลย = =

6. อาจมีแก้ไขตอนหลังถ้าผิดครับ กะลังมึนๆ เยอะจัด

ps. ผมไม่อธิบายโค้ดระเอียดนักนะ ^^

ps2. โค้ดนี่ผมได้มาจากสมาชิกท่านหนึ่งใน THaiFlashDev นะครับ ขอโทดด้วยที่ขึ้นชื่อไม่ได้เพราะล้างคอม

ps3. เกมที่จะทำในวันนี้เป้นเกม jigsaw นะครับ ถ้าไม่สนใจปิดเอนทรี่ ไปได้เลย ถ้าคุณเก่งกว่าผมก็ไม่ต้อง
อ่านผมไม่ได้ว่าอะไรคุณ..

PART I : เตรียมรูปกันก่อน

สวัสดีครับเข้าเรื่องกันเลยดีกว่าขั้นตอนแรกครับเราจะมาตัดรูปกันโดยใช้ Adobe Photoshop

เปิดรูปขึ้นมาครับ และ crop ให้หรือ 300x300 pixel (ไม่สอนอีกแระ งกว่ะ = =)

ที่นี้เราจะแบ่งเป็นส่วนๆประมาณ 9 ส่วน

เปิดไม้บรรทัดขึ้นมาโดยกด Ctrl+R และลากกริดมาแบ่งเป็นช่องๆ

(ดึงมันจากไม้บรรทัดอ่ะ)

เว้นทีละ 100 pixel นะครับ

เสร้จละเปิดไฟลืใหม่ขนาด 100x100 pixel ขึ้นมา

กด ctrl+A เพื่อคลุมทั้งหมด และลาก Selection ไปไฟล์ภาพที่ทำกริดไว้

ที่นี้เล้งให้ตรงที่ร่างไว้ และ กอปมา

ทำซ้ำจนได้ ทั้ง 9 อัน เซฟเก็บเป็นชิ้นๆ

เสร็จละครับขั้นตอนการเตรียมรูปภาพ ใครมีวิธีที่ง่ายกว่านี้บอกด้วยนะครับ

PART II :เตรียมไฟล์ในFlash

เปิด Flash ขึ้นมาครับ ของผมใช้ Macremedia Flash 8 นะครับ (ตั้งแต่สมัยยังไม่โดนadobeซื้อ)

กำหนดขนาดเป็น 800 x 600 ครับ

สร้างไฟล์ใหม่ขึ้น import รูปของเราที่เป็นส่วนๆ ทั้งหมดไปแสดงบน Stage เลยครับ

(กดเมนู File >> Import >> Import to Satge.. ครับ หรือกด CTRL+R )

เสร็จแล้ว convert ทุกอันให้กลายเป็น MovieClip ครับโดยกดที่รูปแต่ละอัน ละ กด F8 เลือก Movieclip

ทำจนครบครับ เสร็จแล้วลบทุกอย่างในStageให้แกล้งเลยครับเราจะเริ่มกันละ แต่เรามาดู Library

ของเรากันก่อนว่ามีไฟล์ครบหรือยัง โดยกด CTR+L

ถ้าได้ตามนี้มาเริ่มกันเลยครับ

PART III :ลุยใน Flash เลย

สร้าง Layer ขึ้นมา 4 อัน ครับตามรูปเลย

ทำหน้าแรกกันเลยครับ หน้าแรกในที่นี้ผมจะทำแค่ปุ่ม START ครับ

ใครจะเพื่อก็ไม่ว่ากันครับผม

ทำปุ่ม Start กันเลยครับ

กด CTRL+F8 เพื่อทำ Symbol ใหม่ครับ เลือกเป็น Button ตั้งชื้อตามใจ

เสร็จแล้วมันจะไปอยู่ในLibrary ดับเบิ้ลคลิกมันขึ้นมาเลยครับ

จากรูปจะเห็นหน้าต่างเฟรมแปลกๆ ไปนะครับจะอธิบายให้ฟังครับ

เฟรม Up :จะเป็นรูปร่างของปุ่มปกติตอนยังไม่มีอะไรเกิดขึ้นครับ

เฟรม Over : จะเป็นรูปร่างของปุ่มตอนที่เอาเมาส์ไปชี้ใส่ครับ

เฟรม Dowm : จะเป็นรูปร่างของปุ่นที่เมาส์กำลังคลิกอยู่ครับ

เฟรม Hit : จะเป็นพื้นที่ทั้งหมดที่สามารถคลิกได้
(ถ้าปุ่มเราเป็นข้อความ ให้ทำสี่เหลี่ยมทับข้อความไปเลยขนาดพอดีๆ จะได้คลิกง่ายๆ)

ที่นี่ก้ทำกันตามบุญตามกรรมเลยครับ สู้ๆ

/me หลบรองเท้าจากหลายท่าน

หลังจากทำปุ่มเสร็จแล้วก็นำมันไปใส่ไว่ใน layer Object เฟรมแรกเลยครับ

แล้วตั้งชื่อปุ่ใใน properties เป็น start_btn

ตามรูปด้านล่างเลยครับผมเลยครับ

เฟรมที่2กันเลยครับกด F6 ที่เฟรมที่2 ของทุก Layer ครับ

แล้วลบปุ่ม Start ทิ้งไป

ให้ทำปุ้มขึ้นมาอีกอันนึงครับเป็นปุ่ม Check ว่าต่อเสร็จหรือไม่

เสร็จแล้วนำปุ่มไปไว้ใน Layer Common ในเฟรมที่2 ตั้งชื่อมันว่า check_btn

(ตัวเล็ก ตังใหญ่ดูดีดี นะครับ)

และ สร้าง ข้อความแสดงเวลาโดยกดที่รูปตัว A ตรง toolbar ด้านซ้ายมือ

กำหนดชนิดเป็น Dynamic Text ครับตั้งชื่อว่า time_txt

หน้าจอในเฟรมที่ 2 ครับ

ต่อไปข้ามไปทำคีย์เฟรมในเฟรมที่ี4 เลยครับ

เฟรมนี้จะเป็นเฟรมที่เราเล่นครับ

Layer common ล้อคไว้เลยก็ได้ครับ ติ้กตรงหลังเลเยอร์ครับ จะมีสองอันคือ

มองไม่เห้น กับ ล้อค ครับ

ที่นี้ลากรูปที่เป้น miniClipของเราลงมาต่อกันเลยครับ

วางไว้สักที่แหละครับ

เสร็จแล้วตั้งชื่อเหมือนปุมStart ครับ ดดยใช้ชื่อว่า piece0 ไปจนถึง piece8

เรียงเลขตามรูปด้านบนครับ

ทำจนครบ แล้วคลุมทั้ง 8 อัน แล้กอป มาอีกชุดหนึ่งครับ

ชุดทางด้านขวาให้เปลี่ยนชื่อเป็น slot0 จนถึง slot8

ทำจนครบแล้วคลิกคลุมทั้ง 8 อันทางด้านขวา แล้วดูตรง properties ครับ

ให้ปรับเป็น alpha ครับ เลือกเป็น 0%

ที่นี้เราจะมาทำช่ิองให้ไว้ใส่จิ้กซอร์ครับ

เปิดไม้บรรทัดขึ้นมาครับ กด Ctr+Alt+Shift+R

แล้วลากกริดแบ่งเป็นช่องตามรูป

(ทำนอกSatge ก็ได้ครับ แบ่งเป้นช่องละ 100 x 100 pixel)

เอาละลงมือวาดสี่เหลี่ยมลงไปในกริดให้เป็นตาราง 9x9 ช่อง ครับ

มาแค่เส้นนะครับถ้าอยากจะทำ BG เพื่ม แตาผมไม่ทำครับ เพราะฉะนั้น ใช้ลง สีขาวไป

วาดเสร็จก็ลากกริดไปเก็บครับรกหูรกตา

คลิกคลุมตาราง 9x9 ทำเป้น Symbol แบบ Graphic ครับ

ชื่อตามใจ

เสร้จแล้วนำไปวางใน layer ฺBG ย้ำๆๆๆ

ในเฟรมที่4 ใต้พวกรูปที่ใต่ชื่อว่า slot0 ถึง slot8 อ่ะครับ

ปรับ alpha ขึ้นมาซัก 10 - 20% ก็อได้จะได้มองเห็น

จากนั้นพอวางเสดก็ล็อคมันเลยไม่ไปยุ่งกะมันละ

ต่อไปครับเฟรมสุดท้ายที่ต้องทำ

ทำคีย์เฟรมที่6 ใน layer สามอันบน layer BG ไม่ต้อง

แล้วลบทุกอย่างใน Stage ทิ้งให้หมด

โล่งๆ เลย

เราจะทำกันใน layer object นะครับ อันอื่นล็อคไปก่อนได้

พิพม์ข้อความ Static Text ว่า "

คุณใช้เวลาในการทำทัั้งหมด"

และ สร้างไดนามิดเทก มาแสดงเวลา โดยตั้งชื่อว่า score_txt พิมพ์ 0 ใส่ไปสามสี้ตัว

เสร้จแล้วทำข้อความ Static เขียนว่า วินาทีต่อไปช้างหลัง

ขั้นตอนสอนสุดท้ายทำปุ่มเขียน่า Replay ครับ ตั้งชื่อว่า replay_btn

ทุกอย่างจะรวมเป้นอย่างนี้

จบครับ หรือใส่โค็ดดูต่อป่ะ

PART IV : กอปโค้ดไปลงเถอะขี้เกียจแล้ว

ใน part นี้เราจะยุ่งแค่ layerAction นะครับ อันอื่ล็อคถาวรมันเลย

ps. เราจะใส่โค้ดในส่วนเฟรมนะครับ

วิธีใส่ให้กดที่เฟรมที่ต้องการแล้วกด F9

เฟรม1
http://www.onefinedays.co.cc/frame1.txt

เฟรม2
http://www.onefinedays.co.cc/frame2.txt

เฟรม4
http://www.onefinedays.co.cc/frame4.txt

เฟรม6
http://www.onefinedays.co.cc/frame6.txt

กอปลงไปกอปเสร็จกด CTRL+ENTER เพื่อดูผลงาน

ถ้าจะเอา SWF มาใช้ก็ saveไฟล์ก่อน พอกด CTRL+ENTER

มันจะมี SWF มาให้เองตรงที่เราเซฟ fla ไว้

http://www.onefinedays.co.cc/Untitled-1.swf

http://www.onefinedays.co.cc/Untitled-1.fla

โหลดไปลองในเครื่องได้แจก

ps. เมื่อกี้ลองเล่นในเน้ตดูมันกด check ไม่ได้เด่วลองดูแปป

edit @ 11 Apr 2009 14:36:53 by ::MomoKung::

Tags: flash, games, how to10 Comments