การทำจานระบายสีด้วยโปรแกรมแฟลช

คลิก...เพื่อใช้งานจานระบายสี.swf

บทเรียน...โปรแกรมแฟลช

คำชี้แจง : 
1.ศึกษาเนื้อหาบทเรียน 
2. ทำแบบทดสอบของแต่ละเรื่อง

(มีเนื้อหาทั้งหมด 4 เรื่อง)

--------------------------------------------------------------------------------

เนื้อหาบทเรียน

1.ทำความรู้จักกับโปรแกรมแฟลช
2.ส่วนประกอบของโปรแกรมแฟลช (FlashCS3)
3.เริ่มต้นวาดรูปและลงสี
4.การสร้างภาพเคลื่อนไหวอย่างง่าย

----------------------------------------------------------------------------------------------

แบบทดสอบ

1.แบบทดสอบ : ทำความรู้จักกับโปรแกรมแฟลช
2.แบบทดสอบ : ส่วนประกอบของโปรแกรมแฟลช (FlashCS3)
3.แบบทดสอบ : เริ่มต้นวาดรูปและลงสี
4.แบบทดสอบ : การสร้างภาพเคลื่อนไหวอย่างง่าย

การสร้างภาพเคลื่อนไหวอย่างง่าย

-------------------------------------------------------

ผลการเรียนรู้ที่คาดหวัง

1.สามารถนำเข้าภาพมายังพื้นที่ทำงานหรือเวที (Stage) ได้
2.รู้วิธีการเพิ่มคีย์เฟรม
3.รู้คำสั่งในการสร้างภาพเคลื่อนไหวแบบเส้นตรง
4.รู้วิธีการและคำสั่งทดสอบการเคลื่อนไหว

----------------------------------------------

Motion Tween 

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

การสร้างภาพเคลื่อนไหวแบบลอยในแนวเส้นตรง

ขั้นที่ 1 คลิกเลือกคีย์เฟรมจุดเริ่มต้น สร้างวัตถุ หรือเนื้อหาตามต้องการ

ขั้นที่ 2 คลิกขวาที่คีย์เฟรม คลิกเลือกเมนู Create Motion Tween

ขั้นที่ 3 กำหนดระยะห่างจากจุดแรกตามต้องการ เช่น ห่าง 15 เฟรม คลิกที่เฟรมที่ 15 แล้วเพิ่มคีย์เฟรม โดยกด F6 หรือคลิกเมนู Insert > Timeline > Keyframe

ขั้นที่ 4 ที่เฟรม 15 จับวัตถุที่ stage แล้วปรับเปลี่ยนคุณลักษณะ เช่น ย้ายไปอยู่ตำแหน่งขวาสุดของ Stage

ขั้นที่ 5 ทดสอบ Movie โดยกด Ctrl+ Enter หรือ คลิกเมนู Control > Test Movie จะได้ไฟล์ Movie เป็น .swf

-------------------------------------------------------------

Cr : http://www.acr.ac.th/acr/ACR_E-Learning/CAREER_COMPUTER/COMPUTER/M4/Flash/chapter4.html

       

แบบทดสอบ : เริ่มต้นวาดรูปและลงสี

เริ่มต้นวาดรูปและลงสี

----------------------------------------------------------------------------------

ผลการเรียนรู้ที่คาดหวัง

1.รู้จักเครื่องมือในการวาดภาพ

2.รู้จักส่วนประกอบของรูปวาด

----------------------------------------------------------------------------------

เริ่มต้นวาดรูปและลงสี

Flash เป็นโปรแกรมที่ใช้สำหรับการสร้างกราฟิกและภาพแอนนิเมชั้นต่าง ๆ ที่เรียกว่า มูฟวี่ จึงจำเป็นต้องมีเครื่งอมือที่ใช้สำหรับสร้างและตกแต่งรูป ซึ่งทำให้สามารถสร้างการ์ตูน ที่เป็นลายเส้น สำหรับการแสดงภาพเคลื่อนไหวได้ด้วยวิธีการที่ง่ายไม่กี่ขั้นตอน ส่วนประกอบของรูปวาด รูปตัวการ์ตูนที่สร้างจากการวาดมักจะเรียกว่า "รูปลายเส้น" จะประกอบไปด้วยส่วนสำคัญ 2 ส่วนคือ พื้นรูป (Fill) เป็นส่วนประกอบที่อยู่ภายในรูปลายเส้นซึ่งสามารถจะกำหนดให้มีสีพื้น (Fill color) หรือไม่ให้มีสีพื้น (No color) ก็ได้ ในการลงสีพื้นสามารถเลือกได้ว่าจะลงแบบใด ระหว่างสีทึบ ไล่โทนสี และการนำภาพบิตแมพมาเป็นสีพื้น เส้น (Stroke) เป็นส่วนกรอบของรูปภาพ ที่มีหลากหลายลักษณะ ทำให้เกิดเป็นรูปทรงต่าง ๆ ขึ้นมา เช่น รูปสี่ เหลี่ยม วงกลม วงรีและอื่น ๆ เราสามารถปรับแต่งเส้นได้เช่นเดียวกับพื้นรูป เช่น สี ความหนา และลวดลายบนเส้น ตามปกติพื้นรูปและเส้นจะแยกกันคนละส่วนอิสระต่อกัน ทำให้สามารถวาดรูปที่มีแต่พื้นรูปไม่มีเส้น หรือวาดรูปที่มีแต่เส้นไม่มีพื้นรูปก็ได้ รวมทั้งสามารถที่จะแยกเส้นออกจากพื้นรูป เพื่อนำมาตกแต่ง แก้ไขใหม่ได้ เครื่องมือสำหรับวาดภาพ Cr : https://sites.google.com/site/elearningadobeflashcs5/reim-tn-wad-rup-laea-lng-si

ส่วนประกอบของโปรแกรมแฟลช (FlashCS3)

---------------------------------------------------------------------------------

ผลการเรียนรู้ที่คาดหวัง
1.บอกส่วนประกอบของหน้าต่างโปรแกรมแฟลชได้
2.บอกความหมายของแต่ละส่วนของหน้าต่างโปรแกรมแฟลชได้

---------------------------------------------------------------------------------

หน้าต่างโปรแกรมแฟลช

1. Menu Bar (เมนูบาร์) ซึ่งประกอบด้วยเมนูหลายอย่างที่จำเป็นในการสั่งงาน เช่น เมนู Window มีสำหรับแสดง และ ซ่อน เครื่องมือทุกชนิด หน้าต่างเครื่องมือที่หายไปเราสามารถมาสั่งเรียกเปิดที่นี่

2. Time Line (ไทม์ไลน์) มีไว้สำหรับควบคุมและกำหนดการนำเสนอผลงาน การเคลื่อนไหวต่างๆ โดยจะประกอบ ด้วยเฟรม (frame) ซึ่งจะสามารถบรรจุสิ่งต่างๆไม่ว่าจะเป็น ภาพ เสียง และอื่นๆ ลงไปเพื่อให้ในช่วง เวลานั้นประกอบด้วยอะไรบ้างที่ต้องการแสดงผล เวลาสร้างงานเราจะทำการ

คำสั่งในเมนูต่างๆที่สำคัญและใช้อยู่บ่อยๆมีดังนี้
- เมนู File
- เมนู Edit
- เมนู Modify
- เมนู Window

3. Layer (เลเยอร์) คือชั้นๆต่างๆที่จะทำให้เราทำงานเป็นระบบมากขึ้น เราสามารถแยกวัตถุต่างๆ ออกจากกันให้เป็นอิสระในการแสดงผลได้ ซึ่งทำให้สะดวกและง่ายต่อการทำงาน โดยที่เลเยอร์วัตถุที่อยู่ ด้านบนนั้นจะทับวัตถุเลเยอร์ด้านล่าง หากต้องการสลับบน-ล่าง ก็เพียงให้เราคลิกค้างไว้ที่แถบเลเยอร์ แล้วลากขึ้นหรือลง

นอกจากนั้นแล้วในการทำงานกับเลเยอร์ที่ดีควรจะทำการตั้งชื่อของเลเยอร์นั้นๆไว้เพื่อให้เราสามารถกลับ
มาแก้ไขสิ่งต่างๆในเลเยอร์นั้นได้ง่ายและสะดวก ไม่เช่นนั้นแล้วหากทำงานที่ต้องมีเลเยอร์มากๆ เราจะต้องหาจนปวดหัว และการตั้งชื่อเลเยอร์ก็ควรจะสื่อกับวัตถุหรืองานต่างๆที่อยู่ในเลเยอร์นั้น เช่น เลเยอร์นั้นเป็นส่วนของพื้นหลัง เราก็ควรจะตั้งชื่อว่า background หรือ bg เป็นต้น

4. Tool Bar แถบเครื่องมือ กลุ่มเครื่องมือสร้างงานและจัดการวัตถุ ประกอบด้วยปุ่มเครื่องมือย่อยต่างๆ โดยแบ่งเครื่องมือเป็นหมวดๆ ได้ 5 กลุ่ม 
   - เครื่องมือเลือกวัตถุ (Selection) 
   - เครื่องมือวาดภาพ (Drawing) 
   - เครื่องมือจัดแต่งวัตถุ (Modify)
   - เครื่องมือควบคุมมุมมอง (View) 
   - เครื่องมือควบคุมสี (Color)

5. Panel (พาเนล) หน้าต่างที่ทำหน้าที่แสดง พาเนลย่อย ของโปรแกรม โดยในแต่ละ พาเนลย่อย ก็จะ ประกอบด้วยรายละอียดของการควบคุมการแสดงการปรับแต่งไว้ในตัว เช่น swatches ก็จะมีสีต่างๆ มากมายให้เลือกใช้ในการปรับแต่งสี

   

6. Stage (สเตจ) คือพื้นที่ที่เรากำหนดขอบเขตขนาดของการทำงาน ซึ่งเราสามารถตั้งค่าหรือปรับได้ที่ Properties โดยกดที่ปุ่มที่มีค่า 550x400 จะได้หน้าต่างขึ้นมา

ในหน้าต่างนี้เราสามารถตั้งชื่อของงาน ระบุเนื้อหารายละเอียด ความกว้างและสูง สีพื้นหลัง frame rate ได้ตามความเหมาะสมกับงาน โดยก่อนเริ่มทำงานควรจะวางแผนในการกำหนดขนาดไว้ก่อนจะดี เพราะหากมาแก้ไขขนาดภายหลังจะทำให้ยุ่งยากในการปรับตำแหน่งของวัตถุต่าง

7. Properties ไว้สำหรับกำหนดคุณสมบัติให้กับพื้นที่การทำงานและสิ่งต่างๆที่เราจะใช้งาน หากว่าเราต้องการปรับปรุง เปลี่ยนแปลง แก้ไขวัตถุไหนก็นำเมาส์ไปคลิกที่วัตถุนั้น ค่าที่ส่วน Propertiesก็ จะเปลี่ยนแปลงไป ตามวัตถุนั้น เช่น คลิกที่ตัวอักษร ก็จะสามารถเปลี่ยนเรื่องฟ้อนท์ , สี . ขนาด และอื่นๆ

--------------------------------------------------------------------------------

Cr: http://www.istylebox.com/flash%20tut/basic%20program.html
--------------------------------------------------------------------------------

แบบทดสอบ : ทำความรู้จักกับโปรแกรมแฟลชCS3