FW : [Preloader 1] ขยายบาร์ตามเฟรม %

posted on 31 Aug 2009 16:58 by cstproject in Programmer

Flash Workshop : [Preloader 1] ขยายบาร์ตามเฟรม % (เดี๋ยวกลับมา edit เต็มรอแปป)

Preloader คืออะไร???(อีกละ)

ใครเคยเห็นตัวแถบ loading มาแล้วบ้าง มันก็คือบาร์เอาไว้โหลดงานนั่นเอง

แต่เนื่องจากว่ามันมีหลายกรณี (ประยุกต์ได้หลากหลายตามความอาร์ทของตัวเอง) เดี๋ยวผมจะสอนทุกกรณีแล้วกันครับ

เอนทรี่นี้ ตูนจะสอนเป็นแถบโหลดง่าย ๆ ก่อน อย่างสี่เหลี่ยมค่อย ๆ ยืดจนเต็มแล้วกัน

ตัวอย่าง : (กด Ctrl+F5 เพื่อให้รีโหลดใหม่ มองไม่ทัน!!)

How to

(เลือกการสร้างงานแบบ Flash File (Actionscript 2.0) เปิดงานในแฟลซที่เตรียมไว้)
เพิ่ม Scene มาอีก 1 Scene (Scene = ฉาก)โดยการไปที่ Windows -> Other Panels -> Scene -> กดที่เครื่องหมายบวก

^^กดที่เครื่องหมายบวก

จะมีเพิ่มเป็น 2 scene ละ
ตั้งชื่อ scene ใหม่ว่า load (ตั้งชื่อ scene เก่าด้วยก็ดี จากตัวอย่างตั้งชื่องานว่า main)
[คำแนะนำ : ควรตั้งชื่อให้สอดคล้องกับงาน จะได้จำง่าย ควรจะฝึกตั้งชื่อให้เป็นนิสัยด้วยนะ ^ ^]
ลากซีน load ไว้ด้านบนสุด (เพราะต้องทำงานเป็นซีนแรก) โดยการคลิ๊กค้างลากไปบนสุด
BeforeAfter
เลือกที่ซีน load
เพิ่มมาอีก 1 layer แล้วก็ตั้งชื่อว่า action กับ object ตามลำดับ
ที่บริเวณ Layer object สร้างตัวอักษรแบบ Dynamic Text ตั้งชื่อ var : percent (ใส่อะไรก็ได้ตรง xxx% เพราะจะใช้เป็นที่แสดงเปอร์เซนต์)
วาดสี่เหลี่ยมขึ้นมา พร้อมกรอบ
กดที่บริเวณสีฟ้า(ไม่เอาขอบ) คลิกขวา convert to symbol -> movie clip ตั้งชื่อว่า loader
คลิ๊กขวาที่บริเวณแถบกด Edit in place (หรือ doudle click ที่วัตถุนั้น)
เลื่อนแถบเพื่อกดที่ frame ที่ 100 แล้วคลิ๊กขวาของเฟรมกด Convert to Keyframe (คััดลอกเฟรมที่แล้ว)
กดที่ frame ที่ 1 ขยับบาร์ให้สั้นที่สุด (โดยการ free tranform bar)
คลิ๊กขวาที่เฟรมที่ 1 เลือก Create shape tween (จะขึ้นแถบเฟรมเป็นสีเขียวแล้วลูกศรชี้ไปที่เฟรม 100)
คลิ๊กขวาที่ frame ที่ 1 เลือก action แล้วใส่ว่า stop();
กลับที่ stage หลัก (คลิ๊กซ้ายที่ scene ชื่อ load)
จับ(คลิีกซ้าย)วัตถุแถบบาร์ แล้วตั้งชื่อ Instance Name : loader
คลิกขวาเลือกที่ layer action เฟรมที่ 1
[คำแนะนำ : ส่วนที่ใส่คำสั่ง ผมจะเพิ่ม layer ไว้สำหรับใส่ action โดยเฉพาะ ]
Layer : action คลิ๊กขวา Insert Blank Keyframe ที่เฟรม 2 (จะได้ซาลาเปามาสองก้อน - -'')
Insert Frame : object ให้เพิ่มมาถึงเฟรมที่ 2 (ให้ความยาวเฟรมเท่ากัน)
เลือกที frame ที่ 1 คลิ๊กขวากด action -> ใส่คำสั่งดังนี้

actionscript for frame 1:
if (getBytesLoaded() == getBytesTotal()) {
    gotoAndPlay(3);
} else {
        //loadnumber (percent)
    loadnumber = Math.floor((getBytesLoaded()/getBytesTotal())*100);
        //use for mc percent
    _root.pointer.loadnum = loadnumber+"%";
      //use for loader 100 frames
    loader.gotoAndStop(loadnumber); //<------------- เราจะใช้คำสั่งนี้ทำงาน
      //use for loader bar (width 100 px)
    loading._width = Math.floor((getBytesLoaded()/getBytesTotal())*100);
       //use for percent text
    percent = loadnumber+"%";
}
(จริง ๆ ไม่ยาวหรอก แต่ preloader ตัวต่อไปจะได้ใช้คำสั่งเดียวกัน [หากินได้ทุกงาน =v="] )
รู้หรือไม่ : สัญลักษณ์นี้ // เรียกว่า comment ใช้เขียนอธิบายเฉยๆ ไม่มีผลกระทบต่อโปรแกรม ตัวอักษรใส่ในสัญลักษณ์จะเป็นสีเขียว

ความหมายโดยคร่าว ๆ (สำหรับ advance)
    เมื่อโหลดมาแล้วให้ตรวจสอบว่าโหลดมาครบหรือไม่
ถ้ายังให้โหลดไปเรื่อย ๆ โดยที่ percent มาจาก จำนวน byteที่โหลดอยู่ หารด้วย byte ทั้งหมด * 100 (ตามบัญญัติไตรยางศ์ =v=")
แล้วให้ตัว loader วิ่งตาม % (ถ้า % = 10 ก็เล่นที่เฟรม 10)
เลือกที frame ที่ 2 คลิ๊กขวากด action -> ใส่คำสั่งดังนี้
actionscript for frame 2:
gotoAndPlay(1);
Test Movie (Ctrl+Enter)

จะเห็นได้ว่ามันกลับไปซีน main เลยทำให้เราเห็นแถวโหลดไม่ทัน ต้องให้เครื่องทำการโหลดก่อนโดยการกด View -> Simulate Download (Ctrl+Enter ซ้ำ)

แล้วถ้ามันเร็วเกินไปล่ะ????

View -> Download Setting ->เลือกความเร็วเน็ตได้เลย
จะช้าหรือเร็วขึ้นอยู่ผลงานตัวเองนะครับ ^ ^

คราวหน้าจะสอน preloader แบบซ้อนกันบน movie clip นะครับ ^^

คำแนะนำ : เราสามารถเพิ่ม bg โดยการเพิ่มเลเยอร์ซ้อนไว้ล่างสุด และเปลี่ยนจากบาร์เป็นภาพเคลื่อนไหวใน mc ของ loader ได้แต่ต้องมีครบ 100 เฟรมนะ

เจอกันใหม่เอนทรี่หน้าครับ ^ ^/~~