ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
 
 

หน้า: [1]   ลงล่าง
  พิมพ์  
{สอน Flash} การทำ ProgressBar+ปุ่ม Play  (อ่าน 5717 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
Bggaro
ลูกเสือสำรอง

ออฟไลน์ ออฟไลน์

กระทู้: 76

"จงตื่นขึ้นมา จิตวิญญาณนั่น"


« เมื่อ: พฤษภาคม 08, 2010, 01:40 »



ขอทำความดีบ้างล่ะกันครับ...
จะมาสอนทำ  ProgressBar และ ปุ่ม Play สำหรับ Flash กันนะครับ สำหรับคนที่ยังทำไม่เป็น
แต่ถ้าจะลองทำ แอนิเมชั่น ยาวๆ ก็ควรจะทำไว้นะครับ..**

เวอร์ชั่นที่ผมจะมาสอนนี้เป็น Flash CS4 นะครับ แต่สามารถทำได้กับแฟลช ตั้งแต่เวอร์ชั่น 2004 ขึ้นมา ใครใช้ เวอร์ชั่นเก่าก็ไม่ต้องห่วงครับ แต่อาจต้องงมนิดหนึง

ว่าแล้วก็มาเริ่มกันเลยครับ...

1. เริ่มแรกก็เปิดงานที่เรา อาจทำเสร็จเรียบร้อยแล้วขึ้นมาแก้ไข // หรือถ้าจะเริ่มงานใหม่ก็ได้เช่นกัน ...จริงๆการทำ ProgressBar และ ปุ่ม Play ก็ควรจะทำตั้งแต่ก่อนสร้างงานอยู่แล้วล่ะครับ


2. ดูตามภาพบนนะครับ จะเป็นงานตัวอย่างที่ทำทำไว้ก่อนแล้ว โดยตัวงานหลักๆ จะมี 2 เลเยอร์ด้วยกัน คือ บอล และ พื้น ส่วนเลเยอร์บนสุด ให้เราสร้างขึ้นมาเพิ่มครับ สำหรับใส่ Code AS2.0 นั่นเอง ลองสังเกตภาพนี้นะครับ ที่เฟรมแรก ของเลเยอร์บอล  จะไว้สำหรับทำปุ่ม Play นะครับ ส่วนของเลเยอร์พื้น ก็ไม่มีอะไรครับ
แค่พื้นหลังธรรมดา

3. มาดูรูปที่ 2 กันครับ ภาพนี้ผมขยายทามไลน์ ให้ใหญ่ขึ้นจะได้ดูชัดๆ...โดยจะมีตัวเลขบอกเอาไง้ด้วย สำหรับ เฟรมที่เราจะเขียน Code กัน
มือใหม่ อาจจะยังงงกันอยู่...แต่ก็ต้องพยายามมั่วเอาล่ะครับ เดี๋ยวจะสรุปให้ตอนท้ายอีกทีครับ
-ขอให้เข้าใจตามนี้นะครับ จากรูปด้านบนนี้ เฟรมที่ 3 - 22 คืองานที่ทำเสร็จแล้วครับ แล้วเราต้องการจะเพิ่ม ProgressBar และ ปุ่ม Play ทีหลัง
- โดย เราจะต้องทำการดึง งานของเรา ออกไปอีก เพื่อเว้นว่างไว้ 2 เฟรม คือ เฟรม 1 สำหรับทำ ProgressBar และ เฟรม 2 สำหรับทำ ปุ่ม Play

4.ในหมายเลข 1 ให้เราใส่ Code ตามภาพครับ //วีธีการก็คือคลิกที่เฟรม แรกของเลเยอร์ AS2.0 แล้วกดปุ่ม F9 จะมีหน้าต่างสำหรับเขียน Code โผล่ขึ้นมาครับ
เมื่อเขียนเสร็จก็กดปิดได้เลย

5. ต่อไป ก็ให้เรา เขียน Code เช่นเดียวกัน ตามภาพนี้ ในหมายเลข 2 และ 3 ครับ ซึ่งก็คือ เฟรมที่ 2 และ 22 ครับ
6. มาดูเลยเยอร์ บอล กันบ้างครับ หมายเลข 4 เราจะใส่ ตัว ProgressBar ลงไปครับ มาดูขั้นตอนกัน


7. ให้กดปุ่ม Ctrl+F7 เราก็จะพบหน้าต่างตามภาพครับ ให้คลิกลาก ProgressBar ออกมา จัดไว้ในหมายเลข 4 นะครับ (อย่าใส่ผิดเลยอร์ผิดเฟรมล่ะ)

8. เราจะได้ตามภาพนี้ล่ะครับ ให้เราคลิกเลือก ProgressBar สังเกตว่ามันจะขึ้นกรอบสีน้ำเงิน

9. ให้ดูที่ หน้าต่าง Properties นะครับ แล้วใส่ลงไปตามภาพ ถ้าเป็น Flash CS3-CS4 จะเหมือนในภาพครับ ถ้าเป็น Flash จะอยู่ ตรงบริเวณทามไลน์ ด้านล่าง

10. ก็ถือว่าเสร็จขึ้นตอนการทำ ProgressBar ครับ //ลองทดสอบดูด้วการ กด Ctrl+Enter 2 ครั้ง ต่อเนื่องกันนะครับ แล้วต้องตั้งความเร็วเน็ตในการทดสอบเป้น 56K ดูจะได้เห้นผลชัดๆ ถ้ายังงง เดี๋ยวจะมาอธิบายให้ทีหลังนะครับ แต่ที่แน่ๆ ทำให้เสร็จแล้วอัพขึ้นเว็บเลยครับ จะได้เห็นชัดๆ
ต่อไปก็มาทำ ปุ่ม Play กันครับ

11.ที่หมายเลข 5 นะครับ (เลเยอร์ บอล เฟรมที่ 2) ผมทำการวาดรูปดาว และพิมพ์ข้อความ ว่า Play ลงไป ดูตามภาพนะครับ

12. เมื่อพิมพ์เสร็จแล้วให้คลิกที่ข้อความ แล้วกด F8 ครับ จะพบหน้าต่างตามภาพ ให้ตั้งค่าตามนั้น แล้วกด OK ข้อความของเราก็จะเปลี่ยนเป็นซิมโบนชนิดกราฟิก




13. ทำเหมือนเดิมครับ คลิกเลือก ที่ข้อความ Play ให้ขึ้นกรอบสีน้ำเงิน และ กด F8 ตังค่าเป็นแบบปุ่มกด เราก็จะได้ซิมโบนปุ่ม Play แล้วล่ะครับ

- ลองสังเกตดูที่ไลบราลี่ เราจะได้ตามภาพนะครับ

14. ต่อมาก็ ใส่ Code ครับ คลิกเลือกที่ ปุ่ม Play แล้วกด F9 (อยากให้กดแล้วไปเริ่มเล่น ที่เฟรมไหนก็แก้ได้เลยครับ) *ในการทำปุ่ม Replay ก็ทำเช่นเดียวกันครับ

15.ทีนี้ให้ดับเบิลคลิกเข้าไปในปุ่ม Play ครับ ให้เราสร้างเลเยอร์ขึ้นมาอีก 1 ครับ ในเลเยอร์บนให้ กด F6 ขึ้นมาเป้น 3 คีย์เฟรม //จะได้เหมือนภาพ


16.คลิกเลือกเลเยอร์บน เฟรมที่ 2 แล้วคลิกที่ข้อความ Play ของเรา ..ซึ่งตรงนี้ให้เราลองเปลี่ยนสี ดูนะครับ เปลี่ยนที่ Properties ได้เลย(ต้องมีคน งง)


17. ที่เลเยอร์ ล่าง ให้เราทำการวาดรูปสี่เหลี่ยมแบบไร้ขอบขึ้นมานะครับ ให้ล้อม ข้อความ Play ของเราเอาไว้

18. ทำให้ภาพสี่เหลี่ยม ที่เราวาดขึ้นมาโปร่งใสซะ //โดยการคลิกเลือกรูปสี่เหลี่ยมแล้วไป ตรง Properties ตามภาพ เปลี่ยน จาก 100% เป็น 0 ซะ

แต่นี้ก็น่าจะเสร็จหมดแล้วครับ


ลองๆดูละกันครับ...เดี๋ยวมามาเพิ่มเติมให้อีกทีหลัง..
อ้างถึง
เครดิตคือตัวผมเองครับ นั่ง ทำ ตั้งแต่เช้า...อากาศที่สุรินทร์ ร้อน จริงๆครับ



10 การ์ตูนแอนิเมชั่นที่ดีที่สุด
การ์ตูนเคลื่อนไหวตอนใหม่ อัพ 3ตอน มาเลยครับฮ่าๆ
การ์ตูนเคลื่อนไหว
การ์ตูนอนิเมชั่นFlash8สุดยอดรวบรวมมาให้ชมเยอะที่สุด !!!
{สอน Flash} การทำ ProgressBar+ปุ่ม Play
สำหรับคนที่ทำเอนิเมชั่น ต้องรู้ว่า "FPS" คืออะไร ใครไม่รู้ ที่นี้มีคำตอบ...
แข่งทำอนิเมชั่น "แบบง่ายๆ" แข่งกันแบบเล่นๆ (ใครอยากส่งส่งมา)
Animation แนว Zombie ครับ
ห้องรวมงานครับ~+-= ของนายเอ๊ดดี้น่ะครับ ^^=~+.~=
วาดรูปกานเตอะ
ถึงคนทำก้างทั้งหลาย
การ์ตูนอนิเมชั่นทั้งหมด


Like (+3)     No (-0)

« แก้ไขครั้งสุดท้าย: พฤศจิกายน 29, 2012, 11:05 โดย นายโอมนะจ๊อด »
Tags:
huMan19
บุคคลทั่วไป
« ตอบ #1 เมื่อ: พฤษภาคม 08, 2010, 02:00 »

ปุ่มอันนี้ไว้สำหรับ Flash Cs น่ะครับ

เดี๋ยวผมเอาแบบ Flash8 มาให้น่ะครับ

ของผมเป็นแบบ TUT น่ะครับ

เดี๋ยวซักครู่ผมเอามาลง แปปน่ะครับ^^

Like (+)     No (-)

Bggaro
ลูกเสือสำรอง

ออฟไลน์ ออฟไลน์

กระทู้: 76

"จงตื่นขึ้นมา จิตวิญญาณนั่น"


« ตอบ #2 เมื่อ: พฤษภาคม 08, 2010, 06:58 »

วิธีการก็ไม่ต่างกันนะครับ ใช้ได้เหมือนๆกัน
เพราะใช้ AS2.0 เหมือนกัน //แต่วีธีการสร้างปุ่มของผม จะ ลึกนิดหน่อย เผื่อขจัดปัญหาเล็กน้อยบางอย่างด้วย ครับ

Like (+3)     No (-0)

Poppuchan
ลูกเสือสำรอง

ออฟไลน์ ออฟไลน์

กระทู้: 384


มาด่าศิลชัยกันเถอะ!


« ตอบ #3 เมื่อ: พฤษภาคม 08, 2010, 07:13 »

โอ้วววว  Roll Eyes Roll Eyes  ขโมยวิชาด่วน!!!!!

ขอบคุณมากนะครับคุณBggaro และคุณเอ็ดดี้

ตอนนี้ได้flash cs3และ8มาครอบครองแล้ว ต้องศึกษาเยอะๆ!?

ขอขอบคุณอีกครั้ง! =jj =jj

Like (+29)     No (-0)

Bggaro
ลูกเสือสำรอง

ออฟไลน์ ออฟไลน์

กระทู้: 76

"จงตื่นขึ้นมา จิตวิญญาณนั่น"


« ตอบ #4 เมื่อ: พฤษภาคม 08, 2010, 07:56 »

Flash CS3 มีบั๊ก นะครับ Flash 8 ยังคงดีที่สุด ..ส่วน CS4 ก็ถือว่าใช้ได้ดีทีเดียว ครับ จากที่ผมใช้อยู่อ่ะนะ...ตอนนี้กะลังโหลด CS5 มาลองอยู่ครับ

Like (+3)     No (-0)

sawaddeekhrab
ลูกเสือสำรอง

ออฟไลน์ ออฟไลน์

กระทู้: 60


.....เกิดมาเพื่อสิ่งนี้.....


« ตอบ #5 เมื่อ: พฤษภาคม 22, 2010, 11:10 »

อื้มๆ จากที่ใช้มา 8 เสถียร แต่ cs4 ลูกเล่นเก๋าๆ โดยเฉพาะ bone tool และ ไอ้ที่สามาดหันได้ 3 มิติ อ่ะ เมพเจงๆ

Like (+4)     No (-0)

หน้า: [1]   ขึ้นบน
  พิมพ์  
 
กระโดดไป:  

Powered by SMF 1.1.11 | SMF © 2006-2009, Simple Machines LLC
Sitemap
เว็บหรอยกูดอตคอม เว็บการ์ตูนที่หล่อที่สุดในโลก
การ์ตูน การ์ตูนหรอยกู ชุมชนคนวาดการ์ตูน สังคมคนวาดการ์ตูนออนไลน์