อนุบาลงาน ActionSctipt

[จักรี]

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

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

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

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

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

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

[ดาเฉยๆ]

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

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

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

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

[ej_sing]

จารย์ก่อหายไปไหน มาแจมแทนละกัน
ขอบคุณเรื่อง 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 ทั่วไป


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








คำตอบ











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

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

[กากก่อเกรียนนู้บ]

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

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 ช่วงของเพลงครับ
http://www.27cstudio.com/korstudio/tutorials/flamp1/musicplayer_v2.swf

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


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

[จักรี]

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

[iannnnn]

แต่ก่อนใช้ 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 ช่วงของเพลงครับ
http://www.27cstudio.com/korstudio/tutorials/flamp1/musicplayer_v2.swf

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


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

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

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

[กากก่อเกรียนนู้บ]

เปิดใช้ 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"});

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

[apaiso]

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

[iannnnn]

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

[จักรี]

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

[กากก่อเกรียนนู้บ]

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

[kitty]

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

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

[ej_sing]

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

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

ศึกษาเรื่อง

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

ครับ