สอน Flash บทเรียน 1: สร้างเมนูเลือกภาพด้วยตัวเลข (Image Listing By number)

สวัสดีค่ะ วันนี้ Mondeemedia ขอแนะนำวิธีการสร้าง โปรแกรม Flash ง่ายๆ สำหรับการสร้างเมนูเลือกภาพ เวลาที่เรามีเยอะๆ แล้วอยากจะประหยัดพื้นที่บนหน้า Webpage ของเรากันนะคะ มาเริ่มกันเลยดีกว่าค่ะ


หน้าตาของไฟล์จะเป็นประมาณนี้ค่ะ ลองคลิกดูได้นะคะ คลิ๊กที่ตัวเลขภาพจะเปลี่ยนตามตัวเลขค่ะ







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



ขั้นตอนที่ 1: เปิดหน้าต่างใหม่ใน Flash 
ขั้นตอนที่ 2: เตรียมภาพขนาดตามที่เราต้องการ ในบทเรียนนี้ใช้ขนาด 250px X 200 px จำนวน 5 ภาพ หรือ Download ภาพที่นี่  เพื่อความรวดเร็วในการเรียนค่ะ
ขั้นตอนที่ 3: กลับไปที่โปรแกรม Flash เลือก File --> Import --> Import to Library เลือกภาพมาวางที่ Library (image1, image2, image3, ...) จะได้ดังภาพ

 ขั้นตอนที่ 4:  กด Ctrl+J บนคีย์บอร์ด (Document Properties) และกำหนดกว้าง 270 px สูง 240 px เลือกสีขาวของพื้น  Frame Rate = 28  และคลิ๊ก Ok

ขั้นตอนที่ 5: กด (V) Selection Tool  เลือก Image 1 จาก Library มาวางบน Stage 
ขั้นตอนที่ 6: ภาพที่ 1 ยังคงถูกเลือกอยู่ (Ctrl + K)  และทำตามขั้นตอนดังนี้ 
          1. คลิ๊กที่ Align / Distribute ให้เปิดทำงาน 
          2. คลิ๊กที่ Align horizontal Center ให้เปิดทำงาน
          3. คลิ๊กที่ Align Vertical Center ให้เปิดทำงาน

และขณะนี้ภาพที่ 1 ของคุณได้ถูกจัดตำแหน่งตรงกลางเป็นที่เรียบร้อยแล้ว 

ขั้นตอนที่ 7:  จากนั้นก็ให้เลือกที่ภาพ แล้วเลื่อนโดยใช้ลูกศรเลื่อนขึ้น นับไป 10 ครั้ง เพื่อว่าจะได้มีที่ว่างด้านล่างสำหรับพิมพ์ตัวเลขค่ะ  จะได้ดังภาพ

ขั้นตอนที่ 8 : ดับเบิ้ลคลิ๊กบน Layer 1 เปลี่ยนชื่อเป็น  image1  

ขั้นตอนที่ 9 : คลิ๊กบน Frame 1 ของ Layer imgae1 แล้วกด F9 (Action Script Panel) เพื่อเข้าไปพิมพ์ Code ดังนี้ 

ขั้นตอนที่ 10 : สร้าง Layer ใหม่เหนือ Layer image1 และตั้งชื่อให้ว่า  numbers จากนั้นกด (V) ย้าย Layer numbers ลงมาข้างล่างใต้ Layer image1  โดยใช้วิธีการ "ลากและวาง" ดูตามภาพประกอบค่ะ

ขั้นตอนที่ 11 :  เลือกที่ Layer numbers กด (T) Text Tool เพื่อจะพิมพ์ตัวเลข  และไปที่ Properties Panel (Ctrl + F3)  หลังจากนั้นทำตามขั้นตอนดังนี้ค่ะ
       1. เลือก Static Text Field 
       2. เลือก a Trebuchet Ms a font
       3. เลือกขนาด font = 17 
       4. เลือก สีตัวอักษร = สีดำ 
       5. Rendering Option เลือก Anti - alias for readability 

หลังจากนั้นพิมพ์ใต้ภาพ  1 2 3 4 5  ตามภาพตัวอย่าง

ขั้นตอนที่ 12:  กด (V) ใช้ Selection Tool เลือกตัวเลข 1 (ตามภาพ)

หลังจากนั้นกด F8 (Convert to Symbol) เพื่อทำการเปลี่ยนตัวเลข 1 ให้เป็นสัญลักษณ์ Button  ตั้งชื่อว่า number1 กด ok  ดูได้ตามภาพค่ะ

ขั้นตอนที่ 13 :  ตัวเลข 1 ที่เป็น Button แล้วยังคงถูกเลือกอยู่  จากนั้นกด F9 (Action Script Panel) แล้วพิมพ์ Code ตามภาพค่ะ

ขั้นตอนที่ 14 : กด (V) Selection Tool เลือกตัวเลข 2 หลังจากนั้นกด  F8 (Convert to Symbol) แล้วเปลี่ยนตัวเลข 2 ให้เป็นสัญลักษณ์ Button ตั้งชื่อว่า  number 2 ดูตามภาพตัวอย่าง 

ขั้นตอนที่ 15 : และเลข 2 ที่เปลี่ยนเป็น Button แล้ว ถูกเลือกอยู่ กด F9 (Action Script Panel) แล้วพิมพ์ Code ตามภาพนี้ลงไปค่ะ

และหลังจากนี้ให้ทำทุกตัวเลข ตามขั้นตอนที่ 14 และ 15 โดยให้เปลี่ยนเป็นสัญลักษณ์ Button และใส่ Code ที่  Action Script Panel 

number 3:
on (release) {
gotoAndPlay(3);
}

number 4:
on (release) {
gotoAndPlay(4);
}

number 5:
on (release) {
gotoAndPlay(5);
}

ขั้นตอนที่ 16: คลิ๊ก Frame 5 ของ Layer Numbers และกด F5 
ขั้นตอนที่ 17: สร้างเลเยอร์ใหม่เหนือเลเยอร์ image1 และเปลี่ยนชื่อว่า image2 
ขั้นตอนที่ 18: คลิ๊ก Frame 2 ของเลเยอร์ image2 กด F6 จากนั้นไปลาก image2 จาก Library มาวางที่ Stage ให้ตำแหน่งเดียวกันกับภาพ image1 ของ Layer image1 
ขั้นตอนที่ 19: ภาพที่ 2 วางให้ตรงตำแหน่งเดียวกับภาพที่ 1 
ขั้นตอนที่ 20: กด (V)  Selection Tool  และคลิ๊ก Frame 2 ของ Layer image2 จากนั้นกด F9 (Action Script Panel)  ให้พิมพ์ Code ดังนี้ 


Stop();


ขั้นตอนที่ 21:  ให้ทำตามขั้นตอนตามสองภาพที่ทำมาก่อนหน้านี้   โดยการเพิ่ม Layer ใหม่  โดย 
Layer image3  วางภาพบน Frame 3  , Layer image4 วางภาพบน Frame 4  และ Layer image5 วางภาพบน Frame 5 โดยให้ทุกภาพวางตำแหน่งเดียวกันเท่ากันค่ะ  


หลังจากเสร็จเรียบร้อยแล้ว ให้กด Ctrl + Enter เพื่อเป็นการ Run ดูผลนะคะ  (แค่นี้ก็เสร็จเรียบร้อยแล้วค่ะ)




หรือสามารถ Download File Master ไป  Run ดูเอาเองได้ ที่นี่  ค่ะ 


และทั้งหมดนี้ก็เป็นวิธีการสอน Flash บทเรียนที่ 1 ของมนต์มีเดีย ค่ะ  ถ้าอย่างไรไม่เข้าใจ Post สอบถามได้เลยนะคะ   แล้วพบกันใหม่บทเรียนหน้าค่ะ


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