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

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

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

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

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

 

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

 

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

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

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

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

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 ลองดูชิ้นงานได้เลยครับ

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" ขึ้นมาครับ(เฉพาะรันจากโปรแกรม)

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

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 ชิ้นครับ

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

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;// เพิ่มคะแนน
        }
}

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

action script 2.0 ทำ Web Gallory แบบง่ายๆ

action script 2.0 ทำ Web Gallory แบบง่ายๆ(Flash 8)

 

 

1.เตรียมรูปที่จะทำ slide show ในตัวอย่างเอา 4 รูปก่อน

 

2.ลากใส่ในชิ้นงานมันจะเข้าไปอยู่ใน library

 

3.เมนู modify > document หรือ กด ctrl + j ตั้งค่า Frame rate =1

 

4.มาที่คลิก frame  กด f6 เพื่อสร้ง frame เท่ากับจำนวนรูป slide

 

5.ใส่รูปลงในแต่ละ frame 1 รูป 1 เฟรม

ตอนนี้ ถ้ากด ctrl+enter จะสามารถดู slideshow ได้ แล้วแต่ไม่สามารถควบคุมได้ นะครับ

 

 

6.กด เพิ่ม layer ตามที่วงแดงไว้

 

7.วาดปุ่มซ้ายขวาเอาเมาส์คลุม ปุ่มซ้ายแล้วกด f8 เลือกเป็น button(เป็นปุ่ม)

 

8.วาดปุ่มขวาเอาเมาส์คลุม ปุ่มซ้ายแล้วกด f8 เลือกเป็น button(เป็นปุ่ม)

 

9. วางปุ่มให้เรียบร้อยตามต้องการ

 

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

 

11.ใส่ code ตามนี้ตัวอักษรใหญ่เล็ก สำคัญนะครับ

 

12.ใส่ action ที่ ปุ่มขวา

 

13. ใส่ code ตามนี้ตัวอักษรใหญ่เล็ก สำคัญนะครับ(ย้ำ)

 

14.กด ctrl+enter แสดงผลแล้วลองกดดูครับ

*หมายเหตุ อนาคตอาจจะต่อยอดทำ animation ในแต่ละ frame ต่อไปนะครับ เพื่อความ smooth

action script 3.0 ทำโปรแกรมคำนวณหาค่าร้อยละ

1 . สร้าง text box 3 อัน
percent1 ใส่ผลลัพท์ ตั้งเป็น dynamic text
num1 ใส่จำนวนเศษที่จะหา ตั้งเป็น input text
full1 ใส่ค่าจำนวนเต็ม ตั้งเป็น input text

2.สร้างปุ่ม ตั้ง ชื่อว่า btn1 (วาดรูปแล้วเมาส์คลุมกด f8)
*ทั้ง textbox และ ปุ่มตั้งชื่อใน instant name เหมือนกันด้วยนะครับ
3.เพิ่ม layer code แล้วใส่ code action script ดังนี้

//code start
btn1.addEventListener(MouseEvent.CLICK,atk);//ปุ่ม btn1 เมื่อคลิ๊ก CLICK แล้วจะไปเรียก function atk()

function atk(MouseEvent)
{
       percent1.text = String((int(num1.text) / int(full1.text))*100);//คำนวนแล้วแสดง percent1
       
}
//code end

ฟังก์ชั้น String() คือแปลงเป็น ตัวอักษร String
ฟังก์ชั้น Int() คือแปลงค่าเป็น ตัวเลข Integer

action script 2.0 กับ เกมปิงปอง

แบ่ง เป็น 3 ส่วนนะครับ
1 ไม้ปิงปองของเรา ควบคุมด้วย keyboard
2 ลูกปิงปองเด้งไปมา
3 ไม้ปิงปองของคอมตีแข่งกับเรา

1 code ไม้ของเรา
on(keyPress "<Left>" ){
this._x-=10
}
on(keyPress"<Right>"){
this._x+=10
}

2 code ไม้ของคอม

onClipEvent(load){
speed=10;
}
onClipEvent(enterFrame){
_root.p2._x+=speed;
if(_root.p2._x>550){
speed=(speed*-1)
}
if(_root.p2._x<20){
speed=(speed*-1)
}
}

3 code ของลูกปิงปอง

onClipEvent(load){
speed=10;
speedy=20;

}
onClipEvent(enterFrame){
_root.ball._x+=speed;
_root.ball._y+=speedy;  //บอลวิ่งเฉียงๆ

if(_root.ball._x>500){ //ชนเด้งกลับ
speed=-10;
}
if(_root.ball._x<20){//ชนเด้งกลับ
speed=10;
}

if(_root.ball._y>380){//ชนเด้งกลับ
speedy=-10;
}
if(_root.ball._y<20){//ชนเด้งกลับ
speedy=10;
}
if(_root.ball.hitTest(_root.p1)){//ชนกับไม้ของเรา หรือ mc ชื่อ p1
speedy=-10;
}
if(_root.ball.hitTest(_root.p2)){//ชนกับไม้ของคอม หรือ p2
speedy=10;
}
}
//end
ส่วนคะแนน ให้ตั้งเป็น textbox แล้วกำหนค่าไปคงไม่ยากเกินไปนะครับ
อาจจะเพิ่มให้ชนกำแพงด้านล่างแล้ว gameover ต่อไป

action script 2.0 บอลเด้งๆ

ac 2.0 นี้เขียน code ใส่ movieclip ครับ


//code start
onClipEvent(load){//เมื่อ movieclip นี้เกิดขึ้นมา
speed=10;//กำหนดความเร็วแกน x
speedy=20;//กำหนดความเร็วแกน y
}

onClipEvent(enterFrame){
_root.ball._x+=speed;//ลูกบอลวิ่งเฉียง
_root.ball._y+=speedy;
//ชนขวาเด้งกลับ
if(_root.ball._x>500){
speed=-10;
} //ชนซ้ายเด้งกลับ
if(_root.ball._x<20){
speed=10;
}
//ชนล่างเด้งขึ้น
if(_root.ball._y>380){
speedy=-10;
}//ชนเพดานเด้งลง
if(_root.ball._y<20){
speedy=10;
}
}
//end

code นี้เคยใช้สอนนักเรียนชั้น ม.3 ในการเรียนพื้นฐานโปรแกรมมิ่งครับ

action script 3.0 การใช้ keyboard และ Hittest

เหมือนเดิมครับ แยก layer code กับ graphic ไว้ 2 layer
แล้วเขียน code ใน frame ของ layer as

movieclip ชื่อ mc1 ครับ
stage คือ ฉากรวมทั้งหมด

//code start
import flash.events.KeyboardEvent;

stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyPressed);//stage เตรียมรับค่าจาก kb

function onKeyPressed(KeyboardEvent)
{

switch (KeyboardEvent.keyCode)
{
case Keyboard.LEFT:
mc1.x-=10;
break;
case Keyboard.RIGHT:
mc1.x+=10;
break;
case 65: //a
mc1.x-=10;
break;
case 68: //d
mc1.x+=10;
break;
case 87: //w
mc1.y-=10;
break;
case 83: //s
mc1.y+=10;
break;
}
}
//code end


ตัวอย่างที่สอง Hittest หรือการตรวจจับการชน(คนละไฟล์กันนะ)
เป็นจุดเด่นของ โปรแกรม Flash ในการเขียนเกมส์หรือสื่อออนไลน์เลยละ
มี mc 2 ตัวนะรับ mc1 กับ mc2
mc2 ให้ทำ tween มาจะชน mc1

//code start
mc1.addEventListener(Event.ENTER_FRAME, circleHit);

function circleHit(event:Event):void {
if (mc1.hitTestObject(mc2)) { //ตรวจสอบการชน
trace("ahh!");
mc1.visible= false; //mc1 หายตัวไป
}
}
//code end

action script 3.0 กับ helloworld

1.สร้าง movieclip ชื่อว่า btn1 กด f8 แปลงเป็น button ซะ
2.สร้าง layer บน timeline ใหม่่ ตั้งชื่อว่า as แล้วเขียน code ใน frame
(เพื่อแยก layer ระหว่าง code กับ กราฟฟิก) 

//code btn1.addEventListener(MouseEvent.CLICK,atk);//ปุ่ม btn1 เื่เมื่อclick แล้วจะเรียกใช้ฟังชั้น atk 


function atk(MouseEvent)//ฟังชั่น atk
{

 var hello:String = "hello world"; //ประกาศตัวแปร แล้วใส่ text ว่า helloworld
 result1.text=""+hello+""; //
output trace(hello);//trace ดูต่าตัวแปรว่าถูกต้องไหม บรรทัดนี้ไม่ใส่ก็ได้ครับ

 }

ตัวอย่างที่2 ควบคุม mc ให้เล่นโดยใช้ gotoAndPlay
stop();
mc1.stop();
mc1.addEventListener(MouseEvent.CLICK,atk);

function atk(MouseEvent)
{
mc1.gotoAndPlay(2);
}

ประวัติธงชาติไทย

 presentation ประวัติธงชาติไทย

ใช้ในการเข้าค่ายพักแรมลูกเสือเนตรนารี

ตอนท้ายแทรกคลิป เพลงชาติไทย

โหลดไปชมได้ที่นี่ คลิ๊กเลย

ประวัติธงชาติไทย

ประวัติธงชาติไทย

app ดูดวงไพ่ยิปซี

 ดูดวงไพยิปซี
นำ code จาก entry นี้ครับ http://aoodi43.blogspot.com/2013/03/blog-post_9108.html

มา convert ด้วย dreamweaver cs5.5 เป้น apk ไฟล์

โหลดไปลองเล่นได้ ไฟล์ประมาณ 6 เมก คลิ๊กเลย

ทดสอบด้วย galaxy note

 ดูดวงไพ่ยิปซี ออนเวบ

มี 2 version นะครับ

facebook version
กับ javascript version

facebook version คลิ๊กเลย
js version คลิ๊กเลย

 ผลงานสื่อการสอน CAI (2555)
รางวัลชมเชย CAI AWARD 2555

อันนี้เนื่องจากไปอบรมมาแล้ววิทยากรจะนำผลงานจากศูนย์ต่างๆ เข้าประกวดจากทั่วประเทศ

สร้างจาก power point 2010
โดยใช้ action++trigger

เนื้อหาบทเรียน

แบบฝึกหัดในรูปแบบ มินิเกมส์

-จุดประสงค์การเรียนรู้ตามหลักสูตร
-animation
-แบบทดสอบก่อนเรียน,หลังเรียน
-แบบทดสอบแบบ external link
-มีเสียงพากย์
-สรุปบทเรียน