อนุบาลงาน ActionSctipt

[มังกร]

โอ้ว ขอบคุณมากเลยครับ น้องก่อ

พูดถึงเรื่องเสียงแล้ว ถามต่อเลยนะครับ

คือสมมติว่า มีเสียงอยู่สองไฟล์ใน Library
แล้วต้องการทำปุ่ม บอกว่า กดปุ่มนี้ เสียง1 เล่น  กดปุ่มนี้เสียงสองเล่น ละครับ

แล้วเราเขียนโค้ดคอนโทล อะไรเกี่ยวกับเสียงได้บ้างครับ ถามคนอื่นๆ ด้วยนะครับ ว่าใครเคยเขียนความคุมเสียง ในรูปแบบไหนบ้าง

อย่างเช่น สมมติมีไฟล์เสียงอยู่ไฟล์เดียว เราจะเขียนโค้ดให้เวลากดปุ่ม แล้วไปเล่นเสียงในวินาที ที่เท่าไรๆ ได้มั้ยครับ....

(ถามแบบนี้ให้ความรู้สึกแบบอนุบาลเลยใช่มั้ยละ )

[มังกร]

ตอนที่ดาใส่เสียงใน cai ด้วยความมั่ว
ดาก็เลยทำไฟล์เสียงเป็น stream แล้วตั้งคำสั่ง goto อ้ะ

อย่างปุ่มพอส ดาก็ใช้ stop ปุ่มเพลย์ ก็ใช้คำสั่ง play ให้มันเล่นต่อ
ส่วนปุ่มหยุดสี่เหลี่ยม ก็ใช้เป็น goto เฟรมแรก พอกดเพลย์ มันก็จะเล่นจากเริ่มต้น

อย่างงี้ถ้าจะให้เล่นแบบที่แจ๊กกี้ว่า ก็เป็นโกทูเฟรมนั้นๆเอา  อย่างงี้พอได้มั้ยอะ

ป.ล. มะพร้าวห้าวขายสวนมั้ยหว่าเนี่ย ไม่ได้สคริปต์เลย
ป.ล. อันนี้เป็นเวอร์ชั่นเตรียมอนุบาลเลยรึเปล่า 

[Sound]

จารย์ก่อหายไปไหน มาแจมแทนละกัน
ขอบคุณเรื่อง tweener ด้วยนะครับ ขอ tweenlite อีกตัวด้วยนะครับ แหะๆ

Sound

เริ่มจากแบบง่ายๆ โหลดภายนอกนะ

var my_sound:Sound = new Sound();
my_sound.onLoad = function(success:Boolean) {
  //ตรงนี้เป็นส่วนที่บอกว่า ระหว่างโหลด จะทำอะไรก็ว่าไป
//อย่างในที่นี้ ก็จะดึงค่าเวลาทั้งหมดของเพลงมาแสดง ( sound.duration = เวลาทั้งหมดของเพลง )
var totalSeconds:Number = this.duration/1000;
    trace(this.duration+" ms ("+Math.round(totalSeconds)+" seconds)");
    var minutes:Number = Math.floor(totalSeconds/60);
    var seconds = Math.floor(totalSeconds)%60;
    if (seconds<10) {
    seconds = "0"+seconds;
    }
    trace(minutes+":"+seconds); 
};
my_sound.loadSound("test.mp3", true);  //ไฟล์เพลงที่โหลดจากภายนอก

ในตัวอย่างถ้าลองดู
ในหน้าต่าง output จะแสดงค่าว่า เพลงที่โหลดนั้นมีความยาวเท่าไร
กี่ ms กี่วิ กี่นาที

เรื่องควบคุมเสียง ทำได้หลายอย่างครับ มีทั้ง ตำแหน่ง ปรับบาล้านซ้ายขวา ปรับโวลลุ่ม เล่นเป็นโมโน สเตอริโอด้วย setTransform()
อย่างอยากไปตำแหน่งไหนก็

my_sound.start(วินาทีที่ต้องการ)

เช่น อยากให้เล่นที่ วินาทีที่ 25

my_sound.start(25)

หรืออยากทำบาร์บอกตำแหน่งก็

var pos:Number = Math.round( ค่าตำแหน่งล่าสุดที่เพลงนั้นเล่น / เวลาของเพลงทั้งหมด * 100 )

ก็จะได้ pos = ตำแหน่งล่าสุดเป็นเปอเซ็นต์

เช่น

var my_interval:Number;
var my_sound:Sound = new Sound();
my_sound.loadSound("test.mp3", true);
my_interval = setInterval(updateProgressBar, 1000, my_sound);
function updateProgressBar(the_sound:Sound):Void {
    var pos:Number = Math.round(the_sound.position/the_sound.duration*100); 
    trace(pos+"%");
}

ในที่นี้เราใช้ setInterval เป็นตัวทำเหตุการณ์
คือทุกๆ 1 วินาที ระหว่างที่เล่น จะเรียกใช้ฟังชั่น updateProgressBar()
โดยส่งพารามิเตอร์เป็น object my_sound เข้าไปทำงานในฟังค์ชั่น

ในฟังค์ชั่น updateProgressBar ก็จะนำค่าต่างๆใน my_sound ที่ส่งเข้ามา
มาคำนวณค่าตำแหน่งที่เล่นไปออกมาแปลงเป็นเปอร์เซ็นต์
แล้วก็ output ค่า % ที่เล่นไปออกมา

โอ๊ยยย ไม่งงนะ 


ต่อด้วยการจะไปที่ไหนๆในตำแหน่งของเพลง แบบคลิกที่บาร์บอกตำแหน่ง
แล้วเพลงก็เล่นตรงนั้นเลย เหมือนๆ flash media player ทั่วไป


เขาทำกันยังไง .......... 








คำตอบ











จาร์ก่อครับ ....ฝากด้วย 

(เดี๋ยวผมไปมั่วในแบบของผมมาด้วย ช่วยๆกัน)
ปล. เอาง่ายๆนะครับ

[51-53 fps]

  เฮือก โดนโยนมาด้วย 

Tweenlite ผมไม่ได้ใช้อะครับ แต่หลักการเดียวกันเลยครับ เพียงแต่คนทำคนละคน
เจ้านี้เค้าเน้นขนาดไฟล์ที่เล็กลงครับ แต่ก็ทำอะไรได้น้อยลงเช่นกัน
ส่วนตัวผมชอบ Tweener ที่สุดแล้ว

พูดถึง Library ที่ใกล้เคียงก็มีอีกเจ้านึงครับ รู้สึกจะชื่อ gTween [ http://www.gskinner.com/libraries/gtween/ ]
ตัวนี้ค่อนข้างมาแรงครับ เพราะมันทำงานเร็วกว่า Tweener ซะอีก

เอาเป็นว่า ถ้าเราทดสอบการใส่ Tween เค้าไปที่วัตถุ 1500 ชิ้น
TweenLite นี่แหละครับ ที่เร็วที่สุด รองมาก็ gTween แล้วโหล่สุดก็ Tweener

ทดสอบได้ที่เว็บ http://blog.greensock.com/tweening-speed-test/
มีทั้ง AS2 และ AS3 ครับ
แล้วจะเห็นว่า AS3 ทำงานเร็วกว่า ที่ Tweening Engine เดียวกัน

ผมทดสอบตัว TweenLite ตั้งที่จำนวนวัตถุ 1500 ชิ้นเท่ากัน
AS2 - ความเร็วจับได้ที่ 12-15 fps ในขณะที่
AS3 - ความเร็วได้ที่ 51-53 fps

เพราะฉะนั้น.. มาใช้ AS3 กันเถอะครับ 

(เรื่องเสียงเดี๋ยวผมขออนุญาตเบิ้ลโพสต์นะครับ จะได้อ่าน+หาง่าย)

*หมายเหตุ - fps หรือ frames per second มักใช้เป็นหน่วยวัดความเร็วในการแสดงผล ตัวเลขยิ่งมาก ยิ่งแสดงว่าทำงานได้เร็ว

เรื่องการโดดข้ามเพลง ไปยังช่วงเวลาที่กำหนด โดยเลื่อนบาร์
จะใช้การคำนวณตำแหน่งของบาร์ ให้เป็นตัวเลขอัตราส่วนครับ
แล้วเอาตัวเลขนั้น ไปคำนวณกับความยาวเพลงอีกทีนึง

ขออธิบายด้วยหลักการคำนวณธรรมดาๆ ก่อนนะครับ

สมมติว่า คะแนนสอบวิชาหนึ่ง มีคะแนนเต็ม 200 คะแนน
นาย ก. ได้คะแนน 125 คะแนน คิดเป็นอัตราส่วน 0.625 ของคะแนนเต็ม (125/200 = 0.625)
นาย ข. ได้คะแนน 75 คะแนน คิดเป็นอัตราส่วน 0.375 ของคะแนนเต็ม (75/200 = 0.375)

ในทางกลับกัน เราก็สามารถกล่าวว่า
นาย ก. ได้คะแนนเป็น 0.625 ของคะแนนเต็ม ดังนั้น นาย ก. ได้คะแนน 125 คะแนน (0.625*200 = 125)
นาย ข. ได้คะแนนเป็น 0.375 ของคะแนนเต็ม ดังนั้น นาย ข. ได้คะแนน 75 คะแนน (0.375*200 = 75)

-----------------
เอาการคำนวณเรื่องอัตราส่วนนี้ มาใช้กับเรื่องเสียงครับ

สมมติว่า รางของแถบเลื่อน มีความยาว 200 px
1. ตอนนี้ ลากบาร์ไปอยู่ที่ตำแหน่ง 125 px ก็จะคิดเป็นอัตราส่วน 0.625 ของความยาวทั้งหมด
2. เอา 0.625 ไปคูณกับความยาวเพลงทั้งหมด เช่น สมมติว่า เพลงยาว 3 นาที
  3 นาที = 180 วินาที = 180000 มิลลิวินาที
  0.625*180000 = มิลลิวินาทีที่ 112500  = วินาทีที่ 112.5
3. เอาไปใส่กับคำสั่ง start ของ Sound เช่น
  my_sound.start(112.5);

ก็จะได้แถบเลื่อนเพลง หรือ Seek bar ครับผม

ถ้าเอาโค้ดจากของน้าแอ๊ดมาดัดแปลงเพิ่ม จะได้แบบนี้

var my_sound:Sound = new Sound();
my_sound.onLoad = function(success:Boolean) {
  //ตรงนี้เป็นส่วนที่บอกว่า ระหว่างโหลด จะทำอะไรก็ว่าไป
//อย่างในที่นี้ ก็จะดึงค่าเวลาทั้งหมดของเพลงมาแสดง ( sound.duration = เวลาทั้งหมดของเพลง )
    var totalSeconds:Number = this.duration/1000;
    trace(this.duration+" ms ("+Math.round(totalSeconds)+" seconds)");
    var minutes:Number = Math.floor(totalSeconds/60);
    var seconds = Math.floor(totalSeconds)%60;
    if (seconds<10) {
        seconds = "0"+seconds;
    }
    trace(minutes+":"+seconds);
};
my_sound.loadSound("test.mp3", true);  //ไฟล์เพลงที่โหลดจากภายนอก

//ฟังก์ชั่นสำหรับเลื่อนเล่นเพลงไปยังจุดที่กำหนด
function Seek(ratio:Number){
  var seekSecond = my_sound.duration*ratio/1000; //เอา ความยาวเพลง*อัตราส่วนระหว่างจุดพิกัดบาร์และความยาวของรางเลื่อน/1000
  /// หาร 1000 เพื่อแปลงเป็นวินาที เนื่องจาก my_sound.duration จะได้ค่าออกมาเป็น มิลลิวินาที
  /// 1 วินาที = 1000 มิลลิวินาที

  my_sound.start(seekSecond);
}

แล้วถ้าเอาหลายๆ อย่างมารวมกัน จะได้ออกมาเป็นตัว Music Player แบบนี้ครับ

- เพลงโหลดเสร็จแล้วกดปุ่ม Play นะครับ (กดก่อนเพลงเสร็จเจอบั๊กไม่รู้ด้วยเน้อ)
- เพลงโหลดเสร็จแล้ว กดที่แถบสีเทา จะเป็นการ Seek ช่วงของเพลงครับ
<a href="http://www.27cstudio.com/korstudio/tutorials/flamp1/musicplayer_v2.swf" target="_blank">http://www.27cstudio.com/korstudio/tutorials/flamp1/musicplayer_v2.swf</a>

ตัวนี้ใช้ ActionScript 3 เขียนครับผม


ส่วนเวอร์ชั่นเก่า (ActionScript 1.0) มีให้โหลดตามนี้ครับ
musicplayer_v2.5.zip
ตัวนี้เก่ามาก บั๊กชุกชุม ใครโหลดไปแล้ว ผมฝากแก้ด้วยนะครับ 

[มังกร]

โอ้วขอบคุณทั้งอาจารย์ดาห์ อาจารย์ก่อ และอาจารย์น้าแอด  มากๆเลยครับเดี๋ยวผมจะไปลองทำดูบ้าง

[มังกร]

แต่ก่อนใช้ MC Tween ก็ว่าไม่งงนะ
พอมาจับ Tweener มันทำอะไรได้เยอะก็จริง แต่งงมากๆ
แล้วนี่อะไรกัน มีตัวอื่นอีกเรอะ

เรื่องการโดดข้ามเพลง ไปยังช่วงเวลาที่กำหนด โดยเลื่อนบาร์
จะใช้การคำนวณตำแหน่งของบาร์ ให้เป็นตัวเลขอัตราส่วนครับ
แล้วเอาตัวเลขนั้น ไปคำนวณกับความยาวเพลงอีกทีนึง

ขออธิบายด้วยหลักการคำนวณธรรมดาๆ ก่อนนะครับ

สมมติว่า คะแนนสอบวิชาหนึ่ง มีคะแนนเต็ม 200 คะแนน
นาย ก. ได้คะแนน 125 คะแนน คิดเป็นอัตราส่วน 0.625 ของคะแนนเต็ม (125/200 = 0.625)
นาย ข. ได้คะแนน 75 คะแนน คิดเป็นอัตราส่วน 0.375 ของคะแนนเต็ม (75/200 = 0.375)

ในทางกลับกัน เราก็สามารถกล่าวว่า
นาย ก. ได้คะแนนเป็น 0.625 ของคะแนนเต็ม ดังนั้น นาย ก. ได้คะแนน 125 คะแนน (0.625*200 = 125)
นาย ข. ได้คะแนนเป็น 0.375 ของคะแนนเต็ม ดังนั้น นาย ข. ได้คะแนน 75 คะแนน (0.375*200 = 75)

-----------------
เอาการคำนวณเรื่องอัตราส่วนนี้ มาใช้กับเรื่องเสียงครับ

สมมติว่า รางของแถบเลื่อน มีความยาว 200 px
1. ตอนนี้ ลากบาร์ไปอยู่ที่ตำแหน่ง 125 px ก็จะคิดเป็นอัตราส่วน 0.625 ของความยาวทั้งหมด
2. เอา 0.625 ไปคูณกับความยาวเพลงทั้งหมด เช่น สมมติว่า เพลงยาว 3 นาที
  3 นาที = 180 วินาที = 180000 มิลลิวินาที
  0.625*180000 = มิลลิวินาทีที่ 112500  = วินาทีที่ 112.5
3. เอาไปใส่กับคำสั่ง start ของ Sound เช่น
  my_sound.start(112.5);

ก็จะได้แถบเลื่อนเพลง หรือ Seek bar ครับผม

ถ้าเอาโค้ดจากของน้าแอ๊ดมาดัดแปลงเพิ่ม จะได้แบบนี้

แล้วถ้าเอาหลายๆ อย่างมารวมกัน จะได้ออกมาเป็นตัว Music Player แบบนี้ครับ

- เพลงโหลดเสร็จแล้วกดปุ่ม Play นะครับ (กดก่อนเพลงเสร็จเจอบั๊กไม่รู้ด้วยเน้อ)
- เพลงโหลดเสร็จแล้ว กดที่แถบสีเทา จะเป็นการ Seek ช่วงของเพลงครับ
<a href="http://www.27cstudio.com/korstudio/tutorials/flamp1/musicplayer_v2.swf" target="_blank">http://www.27cstudio.com/korstudio/tutorials/flamp1/musicplayer_v2.swf</a>

ตัวนี้ใช้ ActionScript 3 เขียนครับผม


ส่วนเวอร์ชั่นเก่า (ActionScript 1.0) มีให้โหลดตามนี้ครับ
musicplayer_v2.5.zip
ตัวนี้เก่ามาก บั๊กชุกชุม ใครโหลดไปแล้ว ผมฝากแก้ด้วยนะครับ 

อึ้ง ทึ่ง เสียว งง 

ขอบคุณอ.ก่อ มากครับ ถามอีกเรื่องครับ ถ้าจะtweener สีนี่แก้ตรงไหนบ้างครับ

[AS3.0]

เปิดใช้ Color Transform Shortcut ก่อนครับ

โค้ด:

import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

แล้วจะเลือกเปลี่ยนอะไรบ้าง ผมแนะนำไปดู Document ที่นี่เลยครับ
http://hosted.zeh.com.br/tweener/docs/en-us/

แล้วคลิกที่ เมนู
Special Properties > ColorShortcuts

มันจะมี Property ที่เราสามารถเอาไปใช้ได้ตามสะดวกเยอะแยะเต็มไปหมดเลยครับ

ตัวอย่าง

AS3.0

โค้ด:

import caurina.transitions.Tweener;
import caurina.transitions.properties.ColorShortcuts;
ColorShortcuts.init();

//สร้าง MovieClip สี่เหลี่ยมสีดำ ขนาด 100x100 pixel
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x000000);
mc.graphics.drawRect(0,0,100,100);
mc.graphics.endFill();

//สร้าง tween ที่ค่อยๆ เปลี่ยนสีดำเป็นสีแดง ในเวลา 1 วินาที
Tweener.addTween(mc, {_color:0xFF0000, time:1, transition:"easeoutexpo"});

-------------
ส่วนที่บาร์เลื่อนแถบเสียงนั่น.. 
งงตรงไหนถามได้นะครับ ผมก็ว่ารีบเขียนไปหน่อย 

อยุธยายังไม่ไร้คนดี ขอบคุณครับ

[มังกร]

เลยไปทางสระบุรีก็มีอีกคนนะครับ

[มังกร]

ขยับเข้ามาแถวรังสิตก็จะมีอีกคนครับ

ต้องกดปุ่มแดงหรือเปล่าครับ เวลานี้? 

รบกวนสอนเราบ้างนะค่ะ คือ เวลาที่เรากดปุ่มใดก็ตาม  แล้วให้ไฟล์ของเดิมย้อนกลับก่อนอัตโนมัติเลย  แล้วค่อยไปเล่นไฟล์หรือโหลดไฟล์ที่เราต้องการอะค่ะ?  จะเขียน as ควบคุมมูฟวี่ยังไงหรอค่ะ

 การทำงานเหมือนเวปนี้อะค่ะ  http://www.thunderfuel.com/ << ลองดูตัวอย่างนะค่ะ

 

รบกวนสอนเราบ้างนะค่ะ คือ เวลาที่เรากดปุ่มใดก็ตาม  แล้วให้ไฟล์ของเดิมย้อนกลับก่อนอัตโนมัติเลย  แล้วค่อยไปเล่นไฟล์หรือโหลดไฟล์ที่เราต้องการอะค่ะ?  จะเขียน as ควบคุมมูฟวี่ยังไงหรอค่ะ

 การทำงานเหมือนเวปนี้อะค่ะ  http://www.thunderfuel.com/ << ลองดูตัวอย่างนะค่ะ

 

ศึกษาเรื่อง

gotoAndPlay();
gotoAndStop();
loadMovie();

ครับ