1. วันนี้เราจะทำา Bar Slider ลักษณะคล้าย Bar ปรับ Volume
เสียงใน winamp กันครับลองอ่านดูเลยครับ
1. สร้างเอกสารใหม่ขึ้นมาขนาด 200x150 ดังรูป
2. ใช้เครื่องมือ text tool วาด textbox ขึ้นมา
3. คลิกที่ textbox ที่เราสร้างขึ้นมา แล้วไปที่ properties เลือก
เป็นแบบ Dynamic Text และตั้งชื่อ instance name ว่า ratio
4. ใช้เครื่องมือ line tool วาดเส้น กว้าง 100 px ลงไป ดังรูป

2. 5. คลิกขวาที่เส้นที่เราเพิ่งวาดลงไป แล้วเลือก convert to
symbol
6. เลือก Type เป็นแบบ Movie Clip ตั้งชื่อว่า line และ
ตรง Registration เลือกให้จุดสีดำาอยู่กึ่งกลางด้านซ้าย ดังรูป
7. จากนั้นคลิกที่ movie clip ที่เราสร้างขึ้น แล้วไป
ที่ properties ตั้งชื่อ instance name ว่า line
8. ใช้เครื่องมือ Rectangle Tool วาดสี่เหลี่ยมลงไปดังรูป

3. 9. คลิกขวาที่สี่เหลี่ยมที่เราสร้างขึ้น แล้วเลือก Convert to
Symbol...
10. เลือกเป็น movie clip และตั้งชื่อว่า dragger แล้ว
เลือก Registration ให้อยู่ตรงกลาง

4. 11. หลังจากนั้นคลิกที่ movie clip ที่เราสร้างขึ้น แล้วไป
ที่ properties ตั้งชื่อ instance ว่า dragger ดังรูป
12. นำา movie clip ที่สร้างขึ้นทั้งสอง วางไว้ด้วยกันดังรูป
13. นำาเม้าส์ลากคลุม movie clip ทัีีี้งสองที่สร้างขึ้น แล้วคลิก
ขวา เลือก Convert to Symbol...

5. 14. ตั้งชื่อว่า slider เลือก Type เป็น Movie Clip และ
เลือก Registration ให้อยู่กึ่งกลางด้านซ้าย
15. หลังจากนั้นคลิกที่ movie clip ที่ชื่อ slider ที่เพิ่งสร้างขึ้น
มา แล้วไปที่ properties แล้วตั้งชื่อ instance ว่า mySlider
16. ดับเบิ้ลคลิ๊กที่ movie clip ชื่อ slider และคลิกขวาที่เฟรม
แรกเลือก Actions

6. 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=stopD
rag;
18. กลับไปที่ Scene 1 หลังจากนั้นคลิกขวาที่เฟรมแรก
เลือก Actions

7. 19. ใส่ action script ลงไปดังนี้
this.onEnterFrame=function(){
ratio.text=mySlider.ratio;
}
20. ทดสอบด้วยการกด Ctrl + Enter