1. สร้างเอกสารใหม่ขึ้นมาขนาด 400x300 แล้ว save ไว้ที่ desktop

2. ให้หารูปอะไรก็ได้ขนาด 400x300 มาใส่ไว้ใน path เดียว กับ flash ที่สร้างขึ้นมา (ในที่นี้ flash ที่สร้างขึ้นมาอยู่ที่ desktop)
3. เปลี่ยนชื่อ layer1 ใน flash เป็น image loader

4. สร้าง movie clip เปล่าๆขึ้นมา โดยไปที่ เมนู Insert > New Symbol... หรือกด Ctrl+F8

5. ตั้งชื่อว่า empty movie clip แล้วเลือก Type เป็น Movie Clip

6. คลิกที่ Scene 1 หรือ ที่ เพื่อกลับไปยัง Scene 1

7. ไปที่เมนู Window > Library หรือกด Ctrl+L

8. ที่หน้าต่าง Library ลาก movieclip ที่สร้างขึ้นมาไปวางไว้ใน stage โดยให้วางไว้ที่มุมซ้ายบนของ stage

9. ไปที่ properties ของ movieclip แล้วตั้งชื่อ instance name ว่า imageLoader ดังรูป
10. สร้าง layer ขึ้นมาใหม่ ตั้งชื่อว่า text field

11. วาด textbox ลงไปใน stage โดยใช้เครื่องมือ Text Tool


12. ในช่อง properties ของ text field ให้เลือกเป็น Dynamic Text และ ตั้งชื่อ Instance name ว่า infoField ดังรูป

13. สร้าง layer ใหม่ขึ้นมา ตั้งชื่อว่า buttons

14. สร้าง ปุ่มขึ้นมา 3 ปุ่ม โดยไปที่ เมนู Insert > New Symbol หรือกด Ctrl+F8

15. ตั้งชื่อปุ่มที่ 1 ว่า button 1 และตั้งชื่อปุ่มที่ 2 และ 3 ว่า button 2, button 3 ตามลำดับ

16. วาดรูปปุ่ม ตามต้องการ

17. นำปุ่มทั้งสามปุ่มที่สร้างขึ้นมาวางไว้บน stage ดังรูป

18. ตั้งชื่อ instance name ให้ปุ่มแต่ละปุ่มว่า imgbtn1, imgbtn2, imgbtn3 ตามลำดับ



19. สร้าง layer ใหม่ขึ้นมา ตั้งชื่อว่า actions

20. คลิกขวาที่เฟรมแรกของ layer ที่ชื่อว่า action แล้วเลือก Actions

21. ใส่ Action Script ลงไปดังนี้
imgbtn1.onRelease = function() {
infoField._visible = true;
startLoading("picture1.jpg");
};
imgbtn2.onRelease = function() {
infoField._visible = true;
startLoading("picture2.jpg");
};
imgbtn3.onRelease = function() {
infoField._visible = true;
startLoading("picture3.jpg");
};
function startLoading(whichImage) {
loadMovie(whichImage, "imageLoader");
_root.onEnterFrame = function() {
infoLoaded = imageLoader.getBytesLoaded();
infoTotal = imageLoader.getBytesTotal();
percentage = Math.floor(infoLoaded/infoTotal*100);
infoField.text = percentage+"%";
if (percentage>=100) {
delete this.onEnterFrame;
infoField._visible = false;
}
};
}
22. กด Ctrl+enter เพื่อทดสอบ (ลองกดที่ตัวเลขดูครับ)
|