27 มกราคม 2012

FLASH GAME การสร้างเกมภาพระบายสี Color Book

เนื้อหาในส่วนนี้จะเป็นวีดีโอสอนการเขียนเกมภาพระบายสีโดยใช้โปรแกรม Adobe Flash และ Action Script 3 จัดทำในลักษณะของวีดีโอ จะได้เรียนรู้วีธีการสร้างและวิธีการเขียน ไม่เก่งการเขียนโปรแกรมก็เรียนรู้ได้ ไม่เคยเขียน Action Script ก็ทำตามได้ สรุป ใครๆ ก็สามารถทำได้ถ้าได้ดูและทำตาม

วีดีโอสอนการเขียนเกมภาพวาดระบายสี




ด้านล่างนี้คือโค้ดคำสั่ง Action Script 3.0 ที่ใช้ในโปรแกรมที่นำเสนอข้างต้น

var np:Number = 17;
var nc:Number = 10;
var color:Number = 0xffffff;
var cArray:Array = new Array(0xff0000,0x00ff00,0x0000ff,0xffff00,0x00ffff,
        0xff00ff,0x66ff66,0x666666,0x000000,0xffffff);
var colorchange:ColorTransform = new ColorTransform();
GameStart();
function GameStart() {
    btnNew.addEventListener(MouseEvent.CLICK, mcNew); 
    for (var ip:uint = 1; ip <= np; ip++) {
        colorchange.color = 0xffffff;
  //trace(this["p"+ip].name);
  this["p"+ip].transform.colorTransform = colorchange;
        this["p"+ip].addEventListener(MouseEvent.CLICK, mcPaint);
    }
    for (var ic:uint = 1; ic <= nc; ic++) {
        this["c"+ic].addEventListener(MouseEvent.CLICK,mcColor);
        colorchange.color = cArray[ic - 1];
        this["c"+ic].transform.colorTransform = colorchange;
    }
    colorchange.color = color;
    sc.transform.colorTransform = colorchange;
}
function mcNew(e:MouseEvent): void {
    for (var ip:uint = 1; ip <= np; ip++) {
        colorchange.color = 0xffffff;
  this["p"+ip].transform.colorTransform = colorchange;
   }
}
function mcColor(e:MouseEvent): void {
    var objName:String = e.target.name;
    color = cArray[uint(objName.substr(1,(objName.length)-1))-1];
    colorchange.color = color;
    sc.transform.colorTransform = colorchange;
}
function mcPaint(e:MouseEvent):void {
    colorchange.color = color;
    this[e.target.name].transform.colorTransform = colorchange;
}
เขียนเกมไม่ยากใช่ไหม

18 ความคิดเห็น:

  1. คือว่าลองทำแล้วมัน error ค่ะ แฮๆ
    TypeError: Error #1010: A term is undefined and has no properties.
    at _fla::MainTimeline/GameStart()
    at _fla::MainTimeline/frame1()
    ขึ้นมาแบบนี้อะค่ะ คือเพิ่งเคยทำขอคำแนะนำหน่อยนะค่ะ ขอบคุณค่ะ ^ ^

    ตอบลบ
  2. เกิดจากเราไม่ได้ตั้งชื่อตรง instant name บางตัว ไล่ดูดีๆครับ

    ตอบลบ
  3. แฮๆ จริงๆด้วย ขอบพระคุณมากนะค่ะ ทำได้แล้วคร้าาา

    ตอบลบ
  4. http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts

    ตอบลบ
  5. เฮียเกษมครับ คือผมจะรบกวนให้พี่ช่วยดูอะไรนิดหน่อยน่ะครับ
    คือผมลองทำตามที่เฮียสอนในคลิ๊ปแล้ว แต่ผมไม่ทราบว่าผมผิดตรงส่วนไหนหรือเปล่า
    ทำไมการแสดงผลมันถึงไม่ขึ้นตามที่ตั้งไว้น่ะครับ
    http://img814.imageshack.us/img814/4162/51406025.jpg

    ตอบลบ
    คำตอบ
    1. ไม่ระบุชื่อ11 กุมภาพันธ์ 2555, 16:52

      ไม่รู็ว่าผิดโครดตรงไหนเเต่มันทำไม่ได้อ่ะก็ทำตามทุกย่างเเล้วนะ

      ลบ
    2. บางทีคำสั่งไม่ผิด แต่ผิดที่การตั้งชื่อ symbol ไม่ตรงกับคำสั่งก็ได้

      ลบ
  6. ดู Error ที่ Flash ว่ามีข้อความอย่างไร ถึงจะตอบถูกว่าผิดที่ไหน
    ถ้าให้เดาตอนนี้ ก็บอกได้ว่า กำหนด instance name ของออปเจกต์ไม่ถูกหรือไม่ได้กำหนด

    ตอบลบ
  7. ไม่ระบุชื่อ2 มีนาคม 2555, 21:53

    ทำไมรันออกมาแล้ว ขอบเส้นของรูปที่วาดไม่ขึ้นอ่ะครับ แต่สีใช้ได้ครับ ^^

    ตอบลบ
  8. เมื่อเราวาดรูปเส้นกับสีภายใน เมื่อเรานำมาสร้าง symbol ใน วีดีโอ จะเลือกเฉพาะสีด้านใน เท่านั้นในการนำมาสร้างเป็น symbol แล้วเส้นส่วนหนึ่งจะถูกสีทับ ดังนั้น เราต้องกำหนด ขนาดของเส้นให้มากกว่า 1 point จากตัวอย่างในวีดีโอ กำหนดไว้ 3 point เพราะจะโดนสีภายในทับไปส่วนหนึ่ง

    วิธีแก้ เพิ่มขนาดของเส้นในการวาดภาพให้มากขึ้น

    ตอบลบ
  9. ขอ Adobe Flash Cs4 หน่อยครับ

    ขอบคุณครับ

    ตอบลบ
  10. ให้ไม่ได้หรอก จะเป็นการละเมิดลิขสิทธิ์

    ตอบลบ
  11. พี่ครับพอดีทำงานรูปเดียวแล้วทำได้สำเร็จ แต่พอผมจะทำงานหลายๆรูปในชิ้นเดียวกับ error ครับผมแบบว่า ผมจะทำ A-Z ทำตัว A ได้ตามปกติ แต่พอทำตัว B แล้วลองตรวจสอบดูกับ error ครับผม ผมใน Scene ของใครของมันครับ ตอนยังไม่ได้ใส่ โค้สก็ลิ้งค์ไก้ปกติ แต่พอใส่ โค้สให้ตัว B กับ error หมดเลย หรือผมต้องเปลี่ยน จากตัว p1 เป็นตัวอื่นหรือเปล่าครับ ขอบคุณมากเลยครับ

    ตอบลบ
    คำตอบ
    1. ความคิดเห็นนี้ถูกผู้เขียนนำออก

      ลบ
    2. ให้ลองสร้าง Symbol ซ้อน Symbol
      เพื่อเก็บรูปแต่ละรูปไว้ใน Symbol
      เช่นรูปที่ 1 สร้าง symbol แล้วใส่ symbol รูปไว้ในนั้น แล้วตั้งชื่อ p1...pn
      ส่วนรูปที่ 2 ก็สร้าง symbol เช่นกัน แล้วสร้าง symbol รูปใส่ไว้ แล้วตั้งชื่อเป็น p1....pn เหมืนเดิมได้
      แต่เวลาเขียนโปรแกรมต้องต้องมีการอ้าง symbol หลักก่อน p1
      ในวีดีโอ อื่นของผม จะมีวิธีการอ้าง sysbol ซ้อนกัน symbol.p1 .... ศึกษาแล้วนำมาประยุกต์ใช้ดู

      หรือใช้วิธีแบบที่คุณคิดไว้ก็ได้ คือสร้าง p1...pn ไว้สำหรับรูปที่ 1 , a1...an รูปที่ 2 ก็ได้

      ลบ
    3. พี่ครับผมขอโค้ส การอ้าง symbolหลัก หน่อยครับ
      ผมทำ วิธีแบบที่คุณคิดไว้ก็ได้ คือสร้าง p1...pn ไว้สำหรับรูปที่ 1 , a1...an รูปที่ 2 ก็ได้
      แต่ติดตรงที่ อ้าง symbol ไม่เป็นครับ ถ้าตามที่ผมเข้าใจ จะเป็นแบบนี้
      btn1.addEventListener(MouseEvent.CLICK,openbtn1);
      function openbtn1(e:MouseEvent):void
      {
      gotoAndStop(1,"Scene 2");
      }
      คือกดปุ่มแล้วไปเล่นที่ ซีนอื่น แต่มันก็ error

      ขอบคุณครับ ลองทำตามที่พี่สอนแล้วแต่ไม่รู้เรื่องการเขียนโค้สอ้างนี้หล่ะครับ

      ลบ
    4. หรือขอวีดีโอ การอ้าง sysbol ซ้อนกัน symbol คือผมหาไม่เจอครับ

      ลบ
  12. พี่ครับผมขอโค้ส การอ้าง symbolหลัก หน่อยครับ
    ผมทำ วิธีแบบที่คุณคิดไว้ก็ได้ คือสร้าง p1...pn ไว้สำหรับรูปที่ 1 , a1...an รูปที่ 2 ก็ได้
    แต่ติดตรงที่ อ้าง symbol ไม่เป็นครับ ถ้าตามที่ผมเข้าใจ จะเป็นแบบนี้
    btn1.addEventListener(MouseEvent.CLICK,openbtn1);
    function openbtn1(e:MouseEvent):void
    {
    gotoAndStop(1,"Scene 2");
    }
    คือกดปุ่มแล้วไปเล่นที่ ซีนอื่น แต่มันก็ error

    ขอบคุณครับ ลองทำตามที่พี่สอนแล้วแต่ไม่รู้เรื่องการเขียนโค้สอ้างนี้หล่ะครับ

    ตอบลบ

"What you will become after reading this article ?"

Copyright(c) 2007 - 2012 by Kasem Kamolchaipisit.