การทำ Bar Slider คล้ายกับการปรับ Volume ใน winamp

จัดทำโดย : Charoen

วันนี้เราจะทำ Bar Slider ลักษณะคล้าย Bar ปรับ Volume เสียงใน winamp กันครับลองอ่านดูเลยครับ

1. สร้างเอกสารใหม่ขึ้นมาขนาด 200x150 ดังรูป

2. ใช้เครื่องมือ text tool วาด textbox ขึ้นมา

3. คลิกที่ textbox ที่เราสร้างขึ้นมา แล้วไปที่ properties เลือกเป็นแบบ Dynamic Text และตั้งชื่อ instance name ว่า ratio

4. ใช้เครื่องมือ line tool วาดเส้น กว้าง 100 px ลงไป ดังรูป

5. คลิกขวาที่เส้นที่เราเพิ่งวาดลงไป แล้วเลือก convert to symbol

6. เลือก Type เป็นแบบ Movie Clip ตั้งชื่อว่า line และตรง Registration เลือกให้จุดสีดำอยู่กึ่งกลางด้านซ้าย ดังรูป

7. จากนั้นคลิกที่ movie clip ที่เราสร้างขึ้น แล้วไปที่ properties ตั้งชื่อ instance name ว่า line

8. ใช้เครื่องมือ Rectangle Tool วาดสี่เหลี่ยมลงไปดังรูป

9. คลิกขวาที่สี่เหลี่ยมที่เราสร้างขึ้น แล้วเลือก Convert to Symbol...

10. เลือกเป็น movie clip และตั้งชื่อว่า dragger แล้วเลือก Registration ให้อยู่ตรงกลาง

11. หลังจากนั้นคลิกที่ movie clip ที่เราสร้างขึ้น แล้วไปที่ properties ตั้งชื่อ instance ว่า dragger ดังรูป

12. นำ movie clip ที่สร้างขึ้นทั้งสอง วางไว้ด้วยกันดังรูป

13. นำเม้าส์ลากคลุม movie clip ทัี้งสองที่สร้างขึ้น แล้วคลิกขวา เลือก Convert to Symbol...

14. ตั้งชื่อว่า slider เลือก Type เป็น Movie Clip และเลือก Registration ให้อยู่กึ่งกลางด้านซ้าย

15. หลังจากนั้นคลิกที่ movie clip ที่ชื่อ slider ที่เพิ่งสร้างขึ้นมา แล้วไปที่ properties แล้วตั้งชื่อ instance ว่า mySlider

16. ดับเบิ้ลคลิ๊กที่ movie clip ชื่อ slider และคลิกขวาที่เฟรมแรกเลือก Actions

17. ใส่ action script ลงไปดังนี้

this.ratio=0 ;
dragger.onPress=function(){
this.startDrag(true,0,0,line._width,0);
this.onEnterFrame=function(){
ratio=Math.round(this._x) ;
}
}
dragger.onRelease=dragger.onreleaseOutside=stopDrag;

18. กลับไปที่ Scene 1 หลังจากนั้นคลิกขวาที่เฟรมแรก เลือก Actions

19. ใส่ action script ลงไปดังนี้

this.onEnterFrame=function(){
ratio.text=mySlider.ratio;
}

20. ทดสอบด้วยการกด Ctrl + Enter

บทความและรูปภาพจากเว็บไซต์ webthaidd.com