Flash – Action Script 3 กับวันเวลาแบบไทยๆ

16/07/2013

Flash – Action Script 3.0 กับวันและเวลา

15/08/2013

Flash – Action Script 3 กับตำแหน่งและการเคลื่อนที่ของวัตถุขั้นพื้นฐาน

30/07/2013
empty image
empty image

ทำความเข้าใจเกี่ยวกับตำแหน่งและการเคลื่อนที่ของวัตถุแบบพื้นฐาน เอาง่ายๆเลย
– เปิดโปรแกรม
– เลือกชนิดงาน AS3
– สร้าง Symbol แบบ Movie Clip
– วาดอะไรไปซักอย่าง
– คลิกขวาที่ Symbol เลือก Properties

ติ๊กตรง Export for ActionScript

 

1. โหลดวัตถุ และกำหนดตำแหน่ง

ก่อนอื่น ดูตำแหน่งของวัตถุก่อน …

var myBall:mcBall=new mcBall();
myBall.x=100;
myBall.y=100;
addChild(myBall);

บรรทัด 1: สร้างตัวแปล myBall ชนิด mcBall ซึ่งก็คือ Symbol ของเรานั่นเองซึ่งเรา  Export มาแล้ว
บรรทัด 2: กำหนดตำแหน่งในแกน x
บรรทัด 3: กำหนดตำแหน่งในแกน y
บรรทัด 4: วางมันลงใน Stage

ลอง test movie ดู….

– ค่าปกติของตำแหน่งเมื่อโหลดขึ้น stage คือ (x,y) = (0,0)
– ตำแหน่งของวัตถุจะยึดเอา จุดศูนย์กลางของ Symbol เป็นจุดอ้างอิง

2. สร้างเหตุการณ์เพื่อกำหนดตำแหน่งของวัตถุ

2.1 เปลี่ยนตำแหน่งเมื่อเกิดเหตุกาณ์เมาส์คลิก

var myBall:mcBall=new mcBall();
addChild(myBall);
myBall.addEventListener(MouseEvent.CLICK, moveball);
function moveball(evt:MouseEvent):void {
myBall.x=300;
myBall.y=300;
}

บรรทัด 1: สร้างตัวแปล
บรรทัด 2: วางลงบน Stage
บรรทัด 3: กำหนดให้ myBall รอฟังเหตุการณ์ คลิกจากเมาส์ ถ้าคลิกให้ไปทำฟังก์ชัน moveball
บรรทัด 4: ฟังก์ชันชื่อ moveball รับเหตุการณ์จากเมาส์ และไม่มีการคืนค่า (void)
บรรทัด 5-6: กำหนดตำแหน่งของ myBall ให้ไปอยู่ที่ (X300 , Y300)

ลอง test movie ดู…
– สามารถดูคุณสมบัติของเหตุการณ์เกี่ยวกับเมาส์ทั้งหมดได้โดยเข้าไปที่
flash.events > MouseEvent > Properties

นอกจากนี้ยังไม่เหตุการณ์อีกมายมาย ซึ่งแล้วแต่ว่าเราต้องการให้เกิดอะไร ถึงจะทำอะไร…

2.2 เปลี่ยนตำแหน่งไปเรื่อยๆ

var myBall:mcBall=new mcBall();
addChild(myBall);
myBall.addEventListener(MouseEvent.CLICK, moveball);
function moveball(evt:MouseEvent):void {
myBall.x+=10;
myBall.y+=10;
}

เหมือนกัน 2.1 แต่ต่างตรงที่
myBall.x+=10;
myBall.y+=10;
คือ เมื่อถูกคลิก ตำแหน่งจะบวกเพิ่มไปครั้งละ 10 px

2.3 เปลี่ยนตำแหน่งแบบสุ่ม

var myBall:mcBall=new mcBall();
addChild(myBall);
myBall.addEventListener(MouseEvent.CLICK, moveball);
function moveball(evt:MouseEvent):void {
myBall.x=Math.random()*550;
myBall.y=Math.random()*400;
}

ลอง test movie ดู…
จะใช้เมธอด Math.random() เข้ามาช่วย โดยมันจะทำการสุ่มค่า 0 ถึง 1 แล้วเราก็เอามาคุณด้วยตัวเลขที่เรากำหนดโดยผลลัพธ์ที่ได้ มันไม่มีค่าไม่เกินนี้ ทำให้ตำแหน่งของวัตถุ myBall เนี่ย มันก็จะไม่เกินขนาดของ Stage

2.4 ค่อยๆ เคลื่อนที่เอง

 

var myBall:mcBall=new mcBall();
addChild(myBall);
myBall.addEventListener(Event.ENTER_FRAME, getball);
function getball(evt:Event):void {
 myBall.y+=5;
}

ลอง test movie ดู… จะเห็นว่า วัตถุจะค่อยๆ เคลื่อนที่ตกลงในแกน Y
บรรทัด 3: สร้างเหตุการณ์เมื่อเล่นเฟรมให้ไปทำ getball
บรรทัด 5: กำหนดให้ตำแหน่งของ myBall เพิ่มขึ้นเท่ากับ 5

3.เคลื่อนที่ตามเมาส์

จริงๆ มันน่าจะอยู่ในข้อ 2 นะ แต่แยกดีกว่า ฮ่าๆ

3.1 ตำแหน่งคงที่

ไฟล์เดิมนั่นแหละ

var myBall:mcBall=new mcBall();
addChild(myBall);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mousePosition);
function mousePosition(evt:MouseEvent) {
myBall.x=mouseX;
myBall.y=mouseY;
}

 

ตำแหน่งของเมาส์จะถูกเก็บในตัวแปล mouseX, mouseY ซึ่งเราสามารถเรียกใช้ได้เลย
ตัวอย่างนี้ใช้ MOUSE_MOVE คือเมื่อเมาส์ขยับ myBall จะเคลื่อนที่ตาม ลองเปลี่ยนเป็น CLICK เมื่อคลิกถึงจะมา หรือจะกำหนดเหตุการณ์อื่นๆ ก็แล้วแต่…

3.2 ค่อยๆ เคลื่อนที่มา

เอาไฟล์ด้านบนมาประยุกต์

var myBall:mcBall=new mcBall();
addChild(myBall);
myBall.addEventListener(Event.ENTER_FRAME, getball);
function getball(evt:Event):void {
myBall.x += (mouseX - myBall.x);
myBall.y += (mouseY - myBall.y);
}

เมื่อลอง test movie ดูจะเห็นว่าเหมือนกับ 3.1 เลย…
หลักการคือกำหนดให้ตำแหน่งของ myBall = ตำแหน่งเมาส์ลบด้วยตำแหน่งเดิม เช่น
ตำแหน่งเดิมคือ 0 ตำแหน่งเมาส์อยู่ที่ 250 (เอาแค่แกนใดแกนหนึ่ง) จะได้ 0 +=  250-0 = 250 คือเมื่อเล่นเฟรมวัตถุจะเคลื่อนที่มาอยู่ที่ 250 เลยทันที ซึ่งมันเร็วไป ลองเปลี่ยนให้เป็น โดยคุณด้วย 0.1
myBall.x += (mouseX – myBall.x)*0.1;
จากด้านบนสมมติตำแหน่งเดิมคือ 0 ตำแหน่งเมาส์อยู่ที่ 250 จะได้ 0 += (250-0)*0.1 = 25 คือเมื่อเล่นเฟรมวัตถุจะเคลื่อนที่จากตำแหน่ง 0 มาอยู่ที่ 25 จะเห็นว่ามันเคลื่อนที่มานิดเดียว จากนั้นก็จะวนลูบอยู่ตลอดที่เล่นเฟรม ก็จะเป็น 25 += (250-25)*0.1 = 22.5 รวมของเติม 25+22.5 = 47.5 วนลูบไปเรื่อยจนเมื่อตำแหน่งของวัตถุเท่ากับตำแหน่งของเมาส์ หรือ 250 += (250-250)*0.1 = 0 มันก็จะไม่เคลื่อนที่
นี่ก็เป็นตัวอย่างเบื้องต้นเท่านั้น มันมีอีกหลายวิธีเลยแหละ….

4. ลากวัตถุ

 

var myBall:mcBall=new mcBall();
addChild(myBall);
myBall.addEventListener(MouseEvent.MOUSE_DOWN, StartDrag);
myBall.addEventListener(MouseEvent.MOUSE_UP, StopDrag);
function StartDrag(evt:MouseEvent):void {
myBall.startDrag();
}
function StopDrag(evt:MouseEvent):void {
myBall.stopDrag();
}

 

บรรทัด 3: รอเหตุกาณ์ mouse_down หรือคลิกค้าง ก็ให้ทำ startDrag
บรรทัด 4: รอเหตุการณ์ mouse_up หรือปล่อยเมาส์ก็ให้ทำ stopDrag
ใช้เมธอด startDrag() เมื่อต้องการลากและ stopDrag() เมื่อต้องการหยุด ก็แค่นี้

5. สร้างวัตถุหลายๆ ชิ้น

ก็น่าจะต้องใช้ลูปวนวางวัตถุลงใน stage

 

for(var i:Number = 0; i < 10; i++){
var myBall:mcBall=new mcBall();
myBall.x=Math.random()*550;
myBall.y=Math.random()*400;
addChild(myBall);
}

 

บรรทัด 1: สร้างลูปโดยคำสั่ง for วน 10 รอบ
บรรทัด 3-4: สุ่มตำแหน่งด้วย ไม่งั้นออกมา 10 อันก็วางทับกัน ทำให้มองเห็นแค่อันเดียว

6. วางวัตถุหลายๆ ชิ้น พร้อมเคลื่อนที่

 

var BallArray:Array = new Array();
for(var i:Number = 0; i < 20; i++){
var myBall:mcBall=new mcBall();
myBall.x=Math.random()*550;
myBall.y=Math.random()*400;
BallArray.push(myBall); 
addChild(BallArray[i]);
}
stage.addEventListener(Event.ENTER_FRAME,fall); 
function fall(evt:Event):void {
 for(i=0;i<BallArray.length;i++){
 BallArray[i].y += 2;
 if(BallArray[i].y > 420){
        BallArray[i].y =0;
 }
}
}

 

บรรทัด 1: ประกาศตัวแปลอาเรย์เพื่อเก็บลูกบอล
บรรทัด 2-5: วนลูปสร้างวัตถุ 20 ชิ้นพร้อมทั้งสุ่มตำแหน่งแกน X และ Y
บรรทัด 6: เก็บวัตถุที่สร้างลงในอาเรย์
บรรทัด 7: ไล่วางวัตถุลงใน Stage จนครบ 20 ชิ้น
บรรทัด 11: วนลูป
บรรทัด 12: กำหนดให้วัตถุแต่ละขิ้นที่อยู่ในอาเรย์ มีตำแหน่งในแกน Y เพิ่มขึ้นที่ละ 2
บรรทัด 13-14: ถ้าตำแหน่งในแกน Y มากกว่า 420 ให้กำหนดตำแหน่งในแกน Y=0 หรือไปหล่นลงมาใหม่นั่นเอง
เอิ่ม..ผมว่าผมเขียนแปลกๆ แฮะ…
หมดแล้วมั้ง มีไรอีกอ่ะ…นี่เป็นแค่พื้นฐานเล็กๆ น้อยๆ ซึ่งสามารถเอาไปประยุกต์ใช้ได้หลายอย่างเลย เช่นฝนตก หิมะตก เดี๋ยวคงต้องมีแยกย่อยอีกแน่ๆ….Zzz