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

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

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

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;
}

http://www.webthaidd.com/flash/file_flash/flash64/slider.swf

ข้อความนี้ถูกเขียนใน Micromedie Flash คั่นหน้า ลิงก์ถาวร

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s