วิธีง่ายๆในการสร้าง Progress Bar ใน Flash/Flex by

31
Jul
0

วันนี้มาแสดงวิธีง่ายๆในการสร้าง Progress Bar ใน Flash/Flex นะครับ
ขั้นแรก ก็เตรียม MovieClip หรือรูป ให้เรียบร้อยก่อนดังภาพ

hp_bar เป็น MovieClip ด้านนอกคลุมไส้ใน

bar เป็นไส้ในที่ใช้ในการเลื่อนในหลอด Progress

จากนั้นก็ใช้โค้ดดังนี้ครับ

import flash.events.Event;
hp.addEventListener(Event.CHANGE,updateData);
hp_max.addEventListener(Event.CHANGE,updateData);

function updateData(e:Event):void{
hp_bar.bar.x = 0 + (hp_bar.bar.width*((Number(hp.text)/Number(hp_max.text))-1));
}

ซึ่งโค้ดจะทำการเลื่อนไส้ด้านใน ตามอัตราส่วนของค่าและค่าสูงสุด

แค่นี้แหละครับง่ายดาย ก็จะได้ Progress Bar ดีๆแล้ว ถ้าอยากให้เลื่อนตามเวลาก็ให้ updateData ทำงานทุกเฟรมจนเสร็จเท่านั้นเองแหละครับ

ตัวอย่างเมื่อหลอดถูกปรับ

ตัวอย่างเมื่อหลอดถูกปรับ

ทดสอบตัวอย่างได้ที่นี่ครับ https://dl.dropboxusercontent.com/u/3612889/Lvup%20Monthly%20Blog/2014-07/battle_effect_hp_tester.swf

Enjoy this article?

Consider subscribing to our RSS feed!

ไม่มีความเห็น

ยังไม่มีความเห็น

ใส่ความเห็น

RSS feed for comments on this post

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน