Flash CAI Game Interactive website เกมส์ สื่อการสอน

สร้าง tag canvas กันก่อน กว้าง 800 สูง 400 pixel
<canvas id="myCanvas" width="800" height="400"></canvas>

ต่อมาใน tag script

ประกาศตัวแปร 3 ตัว canvas context และ imageObj
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

ใส่รูปใน imageObj เปลี่ยนชื่อไฟล์ ตามไฟล์งานของเรานะ
   imageObj.src = 'img.jpg';

ทำการวาดรูปโดยใช้คำสั่ง drawImage และเรียกโดย Onload

      imageObj.onload = function() {
        context.drawImage(imageObj, 400, 100);
      };

400 และ 100 เป็น พิกัด ที่จะวางรูป

ออกมาเป็นแบบนิ

code ทั้งหมดลอง copy ไปรันดูนะครับ

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="400"></canvas>

    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
   imageObj.src = 'img.jpg';
      imageObj.onload = function() {
        context.drawImage(imageObj, 400, 100);
      };

    </script>
</body>
</html>

วันพฤหัสบดีที่ 21 พฤศจิกายน พ.ศ. 2556

ได้รับเกียรติ เข้ารอบ 200 ผลงานที่เข้ารอบ CAI TABLET 2013

ได้มีโอกาสไปอบรมการทำสื่อ CAI เพื่อใช้บน Tablet OTPC ของนักเรียน

ทางวิทยากรได้คัดเลือก ผลงานเพื่อไปคักเลือกเอา 25 ผลงานที่ดีที่สุด

ถึงแม้ผมจะไม่ได้รางวัลใดๆ แต่ได้อยู่ใน 1 ใน 200 นอมีนี่ก้อดีใจแล้วครับ

หมายเลข 192 ครับ

ภาพงานตอนที่อบรมครับ ใช้ App inventor แบบ offline

ลูกเล่นเสริมที่วิทยากรไม่ได้สอนคือประมวลผลออกมาเป็น ดาว (แบบ angry bird)

สามดาวคิอดีมาก สองดาวคือดี ดาวเดียวคือพอใช้

ลองไป run บน มือถือ samsung ก็ได้ผลน่าพอใจครับ

รายละเอียดงานนี้ http://opectablet.com/home/

วันอาทิตย์ที่ 15 กันยายน พ.ศ. 2556

action script 2.0 สร้าง presentation slide show

1.รูปที่จะใช้ทำ present ซัก 4 รูป ใส่ลงไปใน library

2.ลากรูปแรกลงมา ทำ animation โดย คลิ๊กขวา >timeline effect >transition/transform>transform

3.set ค่าตามต้องการ แล้วลองกด update preview เพื่อดูตัวอย่างก่อน เมื่อพอใจแล้วกด ok

4.เพิ่ม Layer อีก Layer เพื่อใส่ปุ่ม

5. แล้ว เลือกรูปปุ่มไปที่ windows>common library>buttons

6.ตกแต่งให้สวยงาม

7.ตั้งชื่อ frame ที่ frame แรกของแต่ละรูป(ที่ property) เป็น front interrior back engine ตั้งให้สื่อกับรูปจะได้จำได้ง่ายๆ

8. คลิ๊กขวาที่ ปุ่มแรก เลือก action เพื่อใส่ code

8.1 ปุ่มที่ 1 ไป frame front

on(press){

gotoAndPlay("front");

}

8.2 ปุ่มที่ 2 ไป frame interior

on(press){

gotoAndPlay("interrior");

}

8.3 ปุ่มที่ 3 ไป frame back

on(press){

gotoAndPlay("back");

}

8.4 ปุ่มที่ 4 ไป frame engine

on(press){

gotoAndPlay("engine");

}

9.กด ctrl+enter ลองดูชิ้นงานได้เลยครับ

วันพุธที่ 11 กันยายน พ.ศ. 2556

action script 2.0 การเขียน function

การเขียน function

อธิบายง่ายๆ คือการเขียนชุดคำสั่งเพื่อนำมาใช้ต่อไปโดยอาจจะไม่ต้องเขียนซ้ำๆหลายๆครั้ง

1.สร้างปุ่มมาอันนึง

2.คลิ๊กขวาที่ frame1 (การเขียน function ต้องใส่ใน frame เท่านั้น) แล้วเลือก action

function fnx(){

trace("test function");

}

3.คลิ๊กขวาที่ปุ่มม่วงที่เราทำมาเมื่อกี้ action ใส่ code

on(press){

fnx();

}

4.กด ctrl+enter ดูครับ จะเด้งตัวหนังสือ "test function" ขึ้นมาครับ(เฉพาะรันจากโปรแกรม)

วันอาทิตย์ที่ 8 กันยายน พ.ศ. 2556

action sctipt 2.0 เกมเก็บขยะ Junkman

เกมส์เก็บขยะ ลดโลกร้อน

สื่อลดโลกร้อน ในนี้ผมใช้ flash 8 นะครับมันเล็กดี แต่ใช้ได้ถึง cs6 เลย

1.เริ่มแรกก็สร้างถังขยะมาก่อน ถังสีเขียวขยะทั่วไป ตั้งชื่อ(Instance Name)ว่า greenbin

2.สร้างถังสีแดง หมายถึงขยะมีพิษ ไว้ทิ้งพวก อุปกรณ์ อิเล็กทรอนิกส์ ไรงี้ ตั้งชื่อว่า redbin

3.ขยะชิ้นแรก คือ แบตเตอร์รี่ ตั้งชื่อว่า batt

4.หลอดไฟเสีย ตั้งชื่อว่า lightb

5.ก้างปลา ตั้งชื่อว่า fishb

6.จัดวางให้เรียนร้อย

6.1ด้านบนใส่ dynamictext ไว้ 2 อัน ไว้แสดงคะแนน(ตั้ง var เท่ากับ score) และข้อความเมื่อจบเกม(var เท่ากับ status)

part2 coding

7.คลิ๊กขวาที่ รูปหลอดไฟ เลือก action ใส่ code ดังนี้

on(press){

startDrag(this);
}//เมื่อกด จะลาก วัตถุนี้

on(release){
stopDrag(); //ปล่อย แล้วจะเลิกลาก
}

ลองกด ctrl+enter แล้วลองลากดู จะพบว่าสามารถลากได้ แต่ยังไม่สามารถใส่ถังขยะได้

8.เพิ่ม code ในส่วนon(release) ดังนี้ คลิ๊กขวาที่หลอดไฟแล้ว action ใหม่

on(release){

    stopDrag(); //ปล่อย แล้วจะเลิกลาก
    if(this.hitTest(_root.redbin)){//เอาไปชนกับ วัตถุชื่อ redbin
    this._visible=0;//หายไป
        }
     }

อธิบายนิดนึง :คำสั่ง hitTest ไว้ตรวจสอบการชนกันของวัตถุ

คำสั่ง this ใช้แทนการเรียกวัตถุชิ้นนี้โดยไม่ต้องเรียกชื่อ

_root เป็นตำแหน่งเอาไว้เรียกวัตถุจากชื่อ instance name ถ้าไม่ใส่โปรแกรมจะหาวัตถุไม่เจอ

9.ลองใหม่ ตอนนี้ ใส่ถังสีแดงได้แล้วแต่ไม่มีคะแนนขึ้นมา ฉะนั้นต้องเขียน code เพิ่ม

on(release){

    stopDrag(); //ปล่อย แล้วจะเลิกลาก
    if(this.hitTest(_root.redbin)){//เอาไปชนกับ วัตถุชื่อ redbin
    this._visible=0;//หายไป

_root.score=int(_root.score) +1;// เพิ่มคะแนน

}
}

อธิบายนิดนึง : เนื่องจากโปรแกรม flash จะเห็น textbox เป็นตัวอักษร เลยต้องทำการแปลงเป็นตัวเลขโดยใช้ int(_root.score) ก่อนที่จะ +1 แล้วนำไปแสดงผลอีกครั้ง
ลอง ctrl+enter ดู พบว่าใส่ได้แล้ว มีคะแนนขึ้นแล้ว
10.ลองทำกับ วัตถุแบตเตอร์กับ ก้างปลา ดู
แต่มีข้อแม้แบตเตอรี่ hittest กับ redbinก้างปลาต้อง hittest กับ greenbin นะครับ

11.ก๊อปปี้ขยะไว้เยอะๆเรียบร้อย

12.เสริม ทำก็ดีไม่ทำก็ได้ คลิ๊กขวาที่ถังขยะแดง แล้ว action ใส่ code

onClipEvent(enterFrame){
    if(_root.score == 15){
        _root.status = "mission complete";
    }
}

อันนี้จะแสดง ตัวหนังสือ mission complete เมื่อเก็บขยะหมด 15 ชิ้นครับ

ที่เหลือก็เสริม หน้าแรก วิธีการเล่นอื่นๆตามต้องการเลยครับ

วันพุธที่ 4 กันยายน พ.ศ. 2556

action script 2.0 ลากๆวางๆ drag and drop

1.สร้าง movieclip 1 อัน กดคลิ๊กขวา action

on(press){
    startDrag(this);
}//เมื่อกด จะลาก วัตถุนี้

on(release){
    stopDrag(); //ปล่อย แล้วจะเลิกลาก

    }
}

2. เพิ่มเติมเมื่อเอาไปชนกับวัตถุอื่นแล้วมีคะแนนขึ้นโดย ใส่ต่อจาก stopDrag();
2.1 สร้าง movie clip ชื่อ bin
2.2 สร้าง dynamic text ชื่อ score

on(release){
   stopDrag();
   if(this.hitTest(_root.bin)){//เอาไปชนกับ วัตถุชื่อ bin
   this._visible=0;//หายไป
   _root.score=int(_root.score) +1;// เพิ่มคะแนน
       }
}

ลองประยุกต์เป็นเกมเล็กๆได้นะครับ เช่นเก็บขยะลดโลกร้อน เป็นต้น