สอน Flash บทเรียน 10: สร้างเมนูภาพเลื่อนโดย Flash (Scrolling Photo Menu Panel)

        มนต์มีเดียสวัสดีค่ะ สำหรับบทเรียนวันนี้เป็นบทเรียน
        ขั้น Advance นิดๆๆ นะคะแต่คิดว่าคงสนุกกันค่ะ เป็น
        การนำภาพที่มีหลายภาพมานำเสนอโดยสั่งให้เลื่อน
        ไปเลื่อนมาในพื้นที่ที่จำกัดค่ะ  จะทำเป็น Menu เพื่อ
        ทำ Link ก็ได้นะคะ    บทเรียนจะอธิบายวิธีการสร้าง
        ขั้นตอนแรก  จนถึงขั้นตอนสุดท้ายเลยค่ะ  ต้องค่อยๆ
        ทำตามนะคะ เพราะอาจจะมีผิดพลาดได้ค่ะ  อาจจะรัน
        ไม่ผ่าน แต่ถ้าไม่เข้าใจอย่างไรฝาก comment ไว้ได้
        เลยนะคะ  จะรีบกลับมาตอบให้ค่ะและบทเรียนนี้จะได้
        เรียนรู้เทคนคิและวิธีการต่าง ๆ ได้แก่  import photo
        ไปยัง Library การ Convert Symbol เป็น Button
        การสร้าง Effect บน Button การ Convert Layer
        เป็น  Mask   ว้าวๆๆๆๆๆๆๆ เยอะแยะมากมายเลยค่ะ
        ไปทำกันเลยดีกว่านะคะ

ผลงานตัวอย่างค่ะ

ภาพประกอบจาก www.mytinyshops.com

ขั้นตอนที่ 1 : เหนือสิ่งอื่นใดเราก็ต้องมีภาพกันก่อนนะคะ สามารถ Download ภาพได้ ที่นี่  (เป็นภาพเหมือนในตัวอย่างค่ะ เพื่อความสะดวกรวดเร็วในการเรียนนะคะ) หรือสามารถเตรียมภาพเหมือนตัวอย่างได้ที่ Size 140 x 140 px ค่ะ

ขั้นตอนที่ 2 : เปิดโปรแกรท Flash กด (Ctrl+F3) Document Properties กำหนดความกว้างและสูงให้กับ Flash ของเรานะคะ  width = 500 px height = 200 px background = สีขาว frame rate = 32 fps  แล้ว Save Project ตั้งชื่อว่า scrollingphoto.fla ค่ะ

ขั้นตอนที่ 3 : ดับเบิ้ลคลิ๊กที่ Layer 1 เปลี่ยนชื่อใหม่เป็น action

ขั้นตอนที่ 4 : เลือก File -> Import ->Import to library จากนั้นเลือก file ที่ภาพเราเตรียมไว้ขึ้นมาแสดงใน library

ขั้นตอนที่ 5 : กด (V) Selection Tool ลากภาพ s1 มาวางบน stage จากนั้นกด F8 (Convert Symbol) เปลี่ยนภาพ s1 เป็น button ตั้งชื่อ thumb1 ค่ะ

ขั้นตอนที่ 6 :  ดับเบิ้ลคลิ๊กที่ Thumb1 button กด (V) Selection Tool  แล้วเราจะเข้าไปอยู่ข้างในของ thumb1 นะคะ  ซึ่งสังเกตได้จากภาพประกอบ

ขั้นตอนที่ 7 :  เลือกที่ Over แล้วกด F6

ขั้นตอนที่ 8 :  สร้าง Layer ใหม่ เหนือ Layer1 จากนั้นเลือกที่ Over อีกครั้ง กด F6 ตามภาพประกอบ

ขั้นตอนที่ 9 :  ตอนนี้เรายังอยู่ frame Over นะคะ กด (R) Rectangle Tool และวาดสี่เหลี่ยมรอบรูป thumb1 ของเราค่ะ

 ขั้นตอนที่ 10 :  จากนั้นคลิ๊กที่ Scene1

จากนั้นให้ Convert ภาพที่เตรียมไว้ที่ Library  ให้เป็น Button แล้วกำหนดกรอบให้ด้วย  ตามขั้นตอนที่กล่าวมาแล้วค่ะ


ขั้นตอนที่ 11 : สร้าง Layer ใหม่เหนือ Layer action และตั้งชื่อให้ Layer นี้ว่า panel

ขั้นตอนที่ 12 : เลือกที่ Layer panel แล้วคลิ๊กเลือกเมนู Insert ->New Symbol หรือกด (Ctrl+F8) กำหนดให้เป็น Movie Clip ตั้งชื่อว่า panel

ขั้นตอนที่ 13 :  จากนั้นดับเบิ้ลคลิ๊กที่ panel ที่ Library เพื่อเข้าไปข้างในของ panel movie clip จากนั้นให้ทำการลากภาพ  thumb1 - thumb9 ที่เราได้ Convert ภาพ s1-s9 ไว้แล้วมาวางเรียงต่อกันนะคะ (ตามภาพ)

ขั้นตอนที่ 14 : จากนั้นให้กด (Ctrl+A) Select All แล้วกำหนดค่า width, height , x , y ตามภาพเลยนะคะ 

ขั้นตอนที่ 15 :  กด (Ctrl+K) Align Panel จากนั้นกำหนดตำแหน่งของ thumb ตามภาพค่ะ

ขั้นตอนที่ 16 :  หลังจากกำหนดค่าต่างๆ ใน movie clip แล้ว ให้คลิ๊กกลับไปที่ Scence1 ค่ะ

ขั้นตอนที่ 17 :  เลือก Layer panel จาก Library มาวางบน Stage

 

จะได้การวางภาพ แบบนี้ค่ะ

ขั้นตอนที่ 18 :  สร้าง Layer ใหม่เหนือ Layer panel ตั้งชื่อว่า stroke

ขั้นตอนที่ 19 :  คลิ๊กเลือก Layer Stroke กด (R) Rectangle Tool แล้ววาดสี่เหลี่ยมขนาด
450 x 150 px วาดไปบน stage ตามภาพประกอบค่ะ

ขั้นตอนที่ 20 : จากนั้นคลิ๊กเลือกเฉพาะสี่เหลี่ยมเฉพาะพื้นที่ที่เป็นสีขาวเท่านั้นนะคะ   คลิ๊กขวาเลือกคำสั่ง Distribute to Layers

ขั้นตอนที่ 21 :  เปลี่ยนชื่อ Layer 3 เป็นชื่อ mask

ขั้นตอนที่ 22 :  เลือก panel movie แล้วไปที่ Properties panel หรือ กด (Ctrl+F3) ไปที่ Instance Name ให้ตั้งชื่อว่า panel ตามรูปค่ะ

ขั้นตอนที่ 23 :  จากนั้นคลิ๊กที่ Layer action ที่ Frame 1 กด (F9) actions script panel  พิมพ์ code ทั้งนี้ลงไปค่ะ

panel.onRollOver = panelOver;

function panelOver() {

          this.onEnterFrame = scrollPanel;

          delete this.onRollOver;

}

var b = stroke.getBounds(_root);

function scrollPanel() {

          if(_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.yMax) {

                   this.onRollOver = panelOver;

                   delete this.onEnterFrame;

          }

         

          if(panel._x >= 15) {

                   panel._x = 15;

          }

         

          if(panel._x <= -924) {

                   panel._x = -924;

          }

         

          var xdist = _xmouse - 250;

         

          panel._x += Math.round(-xdist / 7);

}

เสร็จเรียบร้อยทั้งหมดทุกขั้นตอนแล้วนะคะ ค่อยๆ ทำตามขั้นตอนนะคะ เพราะอาจจะพลาดได้ แล้วรันไม่ได้ตามใจเรานะคะ   ถ้าท่านใดมีปัญหาก็ comment ถามไว้ได้เลยนะคะ   

แล้วสามารถ Download File Master ได้ที่นี่ ค่ะ  เพื่อนำไปตรวจสอบความถูกต้องนะคะ

Have a nice day !!! ค่ะ

เรียบเรียงโดย