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

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

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

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

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

How to

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

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


    จะมีเพิ่มเป็น 2 scene ละ
  3. ตั้งชื่อ scene ใหม่ว่า load (ตั้งชื่อ scene เก่าด้วยก็ดี จากตัวอย่างตั้งชื่องานว่า main)
    [คำแนะนำ : ควรตั้งชื่อให้สอดคล้องกับงาน จะได้จำง่าย ควรจะฝึกตั้งชื่อให้เป็นนิสัยด้วยนะ ^ ^]
  4. ลากซีน load ไว้ด้านบนสุด (เพราะต้องทำงานเป็นซีนแรก) โดยการคลิ๊กค้างลากไปบนสุด
    BeforeAfter
    (หมายเหตุ จะตั้งชื่อ load เป็น scene 1 ได้เลย จะได้ไม่ต้องสลับกัน กรณีที่งานยังไม่มีใน scene 1)
  5. เลือกที่ซีน load
  6. เพิ่มมาอีก 1 layer แล้วก็ตั้งชื่อว่า action กับ object ตามลำดับ
  7. ที่บริเวณ Layer object สร้างตัวอักษรโดยการกด  Text Tool(T) แล้วเลือก Text Type : แบบ Dynamic Text ตั้งชื่อ var : percent  (ใส่อะไรก็ได้ตรง xxx% เพราะจะใช้เป็นที่แสดงเปอร์เซนต์)
  8. วาดสี่เหลี่ยมขึ้นมา พร้อมกรอบ (ยังอยู่ที่ frame 1 / Layer : Object)
  9. กดที่บริเวณสีฟ้า(ไม่เอาขอบ) คลิกขวา convert to symbol -> movie clip ตั้งชื่อว่า loader
  10. คลิ๊กขวาที่บริเวณแถบกด Edit in place (หรือ doudle click ที่วัตถุนั้น)
  11. เลื่อนแถบเพื่อกดที่ frame ที่ 100 แล้วคลิ๊กขวาของเฟรมกด Convert to Keyframe (คััดลอกเฟรมที่แล้ว)
  12. กดที่ frame ที่ 1 ขยับบาร์ให้สั้นที่สุด (โดยการกดที่วัตถุ คลิกขวา -> free tranform bar (Q) )
  13. คลิ๊กขวาที่เฟรมที่ 1 เลือก Create shape tween (จะขึ้นแถบเฟรมเป็นสีเขียวแล้วลูกศรชี้ไปที่เฟรม 100)
  14. คลิ๊กขวาที่ frame ที่ 1 เลือก action แล้วใส่ว่า stop();

  15. กลับที่ stage หลัก (คลิ๊กซ้ายที่ scene ชื่อ load)
  16. จับ(คลิีกซ้าย)วัตถุแถบบาร์ แล้วตั้งชื่อ Instance Name : loader
  17. คลิกขวาเลือกที่ layer action เฟรมที่ 1
    [คำแนะนำ : ส่วนที่ใส่คำสั่ง ผมจะเพิ่ม layer ไว้สำหรับใส่ action โดยเฉพาะ ]
  18. Layer : action คลิ๊กขวา Insert Blank Keyframe ที่เฟรม 2 (จะได้ซาลาเปามาสองก้อน - -'')
  19. Insert Frame : object ให้เพิ่มมาถึงเฟรมที่ 2 (ให้ความยาวเฟรมเท่ากัน)
  20. เลือกที layer : action, 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) 
  21. เลือก layer : action, frame : 2 คลิ๊กขวากด action -> ใส่คำสั่งดังนี้
    actionscript for frame 2:
    gotoAndPlay(1);
  22. Test Movie (Ctrl+Enter)

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

คำเตือน : ถ้าเราไม่ได้ใส่อะไรใส่ซีน main ทำให้เครื่องโหลดเร็วเกินไปจนมองไม่เห็น ให้ใส่อะไรก็ได้ให้หนัก ๆ เครื่องไปก่อน เช่น เพลง ไฟล์วิดีโอ

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

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

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

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

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

edit @ 2 Sep 2009 17:58:21 by cartoonst

Comment

Comment:

Tweet

โอ้ว.... ขอบคุณคร้าบบบ

Hot! Hot! Hot!

#12 By LightVampire on 2009-09-03 18:03

-เม้นย้อนศร-
1. ตูนเม้าปากกา- เคยโดนดูดเหมียนกัน ว่าแต่ไฮโซแต้ๆ
2. cursorflash- เจ๋งอ่ะ เสียดายยังไม่เป็นflashเลยได้แต่ imageReady
3. เอนนี้ - แอบเก็บไว้ ก่อน สนใจ ทุกเรื่องของ flash ขอบคุงสำหรับความรู้ ซักวันคงได้ใช้ big smile

#11 By p.cobra on 2009-09-03 01:34

แจ่มแจ๋วbig smile

#10 By นายโยจิ^_^ on 2009-09-02 22:22

ว้าวว ความรู้ๆ
Hot! Hot!

#9 By AelitaX on 2009-09-02 20:49

เซียนๆๆ Hot! Hot!

#8 By Noar Wolkins on 2009-09-02 19:26

เทคนิคนี้น่าสน ๆ big smile Hot!

#7 By Daughter Of Sparda on 2009-09-02 18:50

โอ้

#6 By (^_^)/nana on 2009-09-02 14:01

โอ้ววว แหล่ม
ขว้าง ดาวให้ 5 ดวงเลย หึหึ
Hot! Hot! Hot! Hot! Hot!

#5 By Nai Cookies on 2009-09-02 10:26

มาเก็บของดีักันไปใ่ช่อีกระลอกแล้ว
555+
confused smile Hot! Hot! Hot!

#3 By PANTHONG on 2009-09-02 05:07

เทคนิคน่าสนใจอีกแล้ว ขอบคุณครับ Hot!

#2 By chubby on 2009-09-02 02:03

ว้าว ขอบคุณความรู้ดีๆ น๊ะน้องการ์ตูน ขยันแบบนี้ เอาไปเลย Hot! Hot! Hot! Hot! Hot!

ขยันแบบนี้ต่อไปเรื่อยๆ น๊ะจ้าาา

#1 By gol-a-khung on 2009-09-02 00:16