พักยาวๆๆๆๆ
การใส่แบบภาพ กับ Flash ไม่ใช่ใส่ภาพให้เป็น Background พร้อมกับใส่กรอบ
|
วันเสาร์ที่ 28 มีนาคม พ.ศ. 2558
วันพฤหัสบดีที่ 23 ตุลาคม พ.ศ. 2551
ใบความรู้ที่ 5 การทำ animation ต่างๆ
ในการทำ animation ต่างๆ เช่น การ์ตูน แน่นอนว่าจะต้องแบ่งเป็นตอนๆ หรือ ฉาก ใน flash ก็เช่นกัน เมื่อ animation ของมีความยาว หรือซับซ้อนมาก ก็แบ่งออกเป็นฉากๆได้ โดยใช้ Scene เพราะว่าใน flash player นั้นจะทำการเล่นเมื่อมีเฟรมไม่เกิน 16,000 เฟรม ถ้ามากกว่านี้ก็จะไม่เล่น และถ้า animation ของมีความยาวมากกว่า 16,000 เฟรมล่ะ จะทำยังไง Scene เป็นตัวเลือกหนึ่งในนั้น จะทดสอบเกี่ยวกับการใช้ Scene
1. สร้างเอกสารใหม่ขึ้นมา ขนาดใดก็ได้ (ในรูปขนาด 400x300)
2. ใช้เครื่องมือ text tool พิมพ์ลงไปใน stage ว่า Scene 1 ดังรูป
3. สร้าง layer ใหม่ขึ้นมาอีก 1 เลเยอร์ โดยคลิกที่ แล้วใช้เครื่องมือ Oval Tool วาดรูปวงกลมลงไปทางด้านซ้ายของ stage ดังรูป
4. คลิกขวาที่ keyframe ที่เฟรมแรก ของ layer 2 แล้วเลือก creation motion tween ดังรูป
5. คลิกขวาที่เฟรมที่ 20 แล้วเลือก Insert Keyframe ดังรูป
6. ลากวงกลมไปไว้ทางขวาดังรูป
7. คลิกขวาที่เฟรมที่ 20 ของ layer 1 แล้วเลือก Insert Frame ดังรูป
8. ตอนนี้ก็จะได้ animation อย่างง่าย อยู่ที่ Scene แรกแล้ว สังเกตได้จากตัวอย่างในรูป
9. ไปที่เมนู Insert > Scene เพื่อสร้าง Scene ใหม่ขึ้นมา จะพบกับ stage ที่ว่างเปล่า นั่นก็คือ Scene 2
10. ใน Scene 2 นั้นให้สร้าง animation ขึ้นมาใหม่ ตั้งแต่ข้อ 2 - 7 โดยเปลี่ยนจาก คำว่า Scene 1 เป็น Scene 2 และเปลี่ยนสีของวงกลมจากสีฟ้าเป็นสีอื่น ดังรูป
11. กด Ctrl + Enter เพื่อทดสอบดู
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','300','src','scene','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','scene' ); //end AC code
12. จะเห็นว่า เมื่อ animation ของ Scene 1 จบ จะต่อด้วย Scene 2 ทันที
13. สามารถสลับเปลี่ยน Scene ที่ต้องการแก้ไขได้โดยดูจากตัวอย่าง
14. สามารถเรียกหน้าต่าง Scene มาใช้งาน เพื่อความสะดวกในการสับเปลี่ยน Scene โดยไปที่ Window > Other Panels > Scene หรือกด Shift+F2
1. สร้างเอกสารใหม่ขึ้นมา ขนาดใดก็ได้ (ในรูปขนาด 400x300)
2. ใช้เครื่องมือ text tool พิมพ์ลงไปใน stage ว่า Scene 1 ดังรูป
3. สร้าง layer ใหม่ขึ้นมาอีก 1 เลเยอร์ โดยคลิกที่ แล้วใช้เครื่องมือ Oval Tool วาดรูปวงกลมลงไปทางด้านซ้ายของ stage ดังรูป
4. คลิกขวาที่ keyframe ที่เฟรมแรก ของ layer 2 แล้วเลือก creation motion tween ดังรูป
5. คลิกขวาที่เฟรมที่ 20 แล้วเลือก Insert Keyframe ดังรูป
6. ลากวงกลมไปไว้ทางขวาดังรูป
7. คลิกขวาที่เฟรมที่ 20 ของ layer 1 แล้วเลือก Insert Frame ดังรูป
8. ตอนนี้ก็จะได้ animation อย่างง่าย อยู่ที่ Scene แรกแล้ว สังเกตได้จากตัวอย่างในรูป
9. ไปที่เมนู Insert > Scene เพื่อสร้าง Scene ใหม่ขึ้นมา จะพบกับ stage ที่ว่างเปล่า นั่นก็คือ Scene 2
10. ใน Scene 2 นั้นให้สร้าง animation ขึ้นมาใหม่ ตั้งแต่ข้อ 2 - 7 โดยเปลี่ยนจาก คำว่า Scene 1 เป็น Scene 2 และเปลี่ยนสีของวงกลมจากสีฟ้าเป็นสีอื่น ดังรูป
11. กด Ctrl + Enter เพื่อทดสอบดู
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','300','src','scene','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','scene' ); //end AC code
12. จะเห็นว่า เมื่อ animation ของ Scene 1 จบ จะต่อด้วย Scene 2 ทันที
13. สามารถสลับเปลี่ยน Scene ที่ต้องการแก้ไขได้โดยดูจากตัวอย่าง
14. สามารถเรียกหน้าต่าง Scene มาใช้งาน เพื่อความสะดวกในการสับเปลี่ยน Scene โดยไปที่ Window > Other Panels > Scene หรือกด Shift+F2
ใบความรู้ที่ 4 อักษรวิ่ง
1. เลือก View > Grid สร้างเส้น Grid เพื่อช่วยให้การวัดและกะระยะ
2. สร้างข้อความที่ต้องการ Click mouse ปุ่ม Text Tool แล้วพิมพข้อความ
3. เปลี่ยนข้อความให้เป็น Movie Clip โดยเลือก Convert to Symbol แบบ Movie Clip เพื่อเปลี่ยนข้อความให้เป็นภาพเคลื่อนไหว
4. จากนั้นเลือก Frame 30 คลิกขวา Insert Keyframe เพื่อสร้างภาพเคลื่อนไหวขนาด 30 Frame
5. ให้ทำ Animation ที่เป็นข้อความวิ่งจากด้านขวาไปซ้าย
คลิกขวาที่ Frame 1 > Create Motion Tween แล้วทำการเลื่อนข้อความไปด้านขวามือ
(สังเกตว่า ยังอยู่ที่ Frame 1) คลิกที่ Frame 30 แล้วเลื่อนข้อความมาทางด้านซ้ายมือ
6. สร้าง Layer ใหม่ขึ้นมา แล้วสร้างสี่เหลี่ยนผืนผ้า ดังตัวอย่าง
Nikul Jaidee
ซึ่งสี่เหลี่ยมที่สร้างขึ้นมานี้จะเป็นช่องแสดงข้อความเมื่อทำการ Layer Mask
7. สร้าง Layer ใหม่ แล้วสร้างสี่เหลี่ยมโดยเจาะตรงกลางซึ่งสามารถมองทะลุผ่านได้ เพื่อทำเป็นกรอบของกล่องสี่เหลี่ยม
วิธีการสร้างกรอบของกล่องข้อความ
1. เลือกสี Fill เป็นการไล่สีแบบ Radial
2. สร้างรูปสี่เหลี่ยมขึ้นมา
3. ใช้ Free Transform Tool ทำการยืดรูปสี่เหลี่ยมเพื่อให้ไล่สีที่ต้องการ
4. สร้างวงกลมขึ้นมาแล้ว Selection Tool แยกเป็นครึ่งวงกลมขนาดเท่ากัน
5. สร้างรูปสี่เหลี่ยมขึ้นมาวางไว้ระหว่างวงกลม
6. ทำการลบสี่ภายในของรูปออก เพื่อเอาเฉพาะเส้นกรอบ
7. นำเส้นกรอบที่ได้ ไปวางบนสี่เหลี่ยมที่สร้างไว้ตอนแรก
8. จากนี้ลบพื้นที่ภายในเส้นกรอบออก จะได้กรอบของข้อความที่ต้องการ
9. กำหนดให้กับกรอบข้อความใน Layer 3 ให้เป็นแบบ Graphic โดยเลือก Insert Convert to Symbol แล้วเลือกแบบ Graphic ตั้งชื่อ Box
10. เลื่อนกรอบข้อความใน Layer 3 มาวางทับสี่เหลี่ยมที่อยู่ใน Layer 2 เพื่อให้แสดงเป็นกรอบของข้อความเมื่อมีการทำ Layer Mask
11. เลือกที่ Layer 2 จากนั้น Click mouse ขวาเลือก Mask เพื่อทำการบัง Layer ที่อยู่ใต้ Layer 2 และให้แสดงออกมาทางช่องสี่เหลี่ยมที่ถูกสร้างใน Layer 2 เท่านั้น
12. Ctrl + Enter
2. สร้างข้อความที่ต้องการ Click mouse ปุ่ม Text Tool แล้วพิมพข้อความ
3. เปลี่ยนข้อความให้เป็น Movie Clip โดยเลือก Convert to Symbol แบบ Movie Clip เพื่อเปลี่ยนข้อความให้เป็นภาพเคลื่อนไหว
4. จากนั้นเลือก Frame 30 คลิกขวา Insert Keyframe เพื่อสร้างภาพเคลื่อนไหวขนาด 30 Frame
5. ให้ทำ Animation ที่เป็นข้อความวิ่งจากด้านขวาไปซ้าย
คลิกขวาที่ Frame 1 > Create Motion Tween แล้วทำการเลื่อนข้อความไปด้านขวามือ
(สังเกตว่า ยังอยู่ที่ Frame 1) คลิกที่ Frame 30 แล้วเลื่อนข้อความมาทางด้านซ้ายมือ
6. สร้าง Layer ใหม่ขึ้นมา แล้วสร้างสี่เหลี่ยนผืนผ้า ดังตัวอย่าง
Nikul Jaidee
ซึ่งสี่เหลี่ยมที่สร้างขึ้นมานี้จะเป็นช่องแสดงข้อความเมื่อทำการ Layer Mask
7. สร้าง Layer ใหม่ แล้วสร้างสี่เหลี่ยมโดยเจาะตรงกลางซึ่งสามารถมองทะลุผ่านได้ เพื่อทำเป็นกรอบของกล่องสี่เหลี่ยม
วิธีการสร้างกรอบของกล่องข้อความ
1. เลือกสี Fill เป็นการไล่สีแบบ Radial
2. สร้างรูปสี่เหลี่ยมขึ้นมา
3. ใช้ Free Transform Tool ทำการยืดรูปสี่เหลี่ยมเพื่อให้ไล่สีที่ต้องการ
4. สร้างวงกลมขึ้นมาแล้ว Selection Tool แยกเป็นครึ่งวงกลมขนาดเท่ากัน
5. สร้างรูปสี่เหลี่ยมขึ้นมาวางไว้ระหว่างวงกลม
6. ทำการลบสี่ภายในของรูปออก เพื่อเอาเฉพาะเส้นกรอบ
7. นำเส้นกรอบที่ได้ ไปวางบนสี่เหลี่ยมที่สร้างไว้ตอนแรก
8. จากนี้ลบพื้นที่ภายในเส้นกรอบออก จะได้กรอบของข้อความที่ต้องการ
9. กำหนดให้กับกรอบข้อความใน Layer 3 ให้เป็นแบบ Graphic โดยเลือก Insert Convert to Symbol แล้วเลือกแบบ Graphic ตั้งชื่อ Box
10. เลื่อนกรอบข้อความใน Layer 3 มาวางทับสี่เหลี่ยมที่อยู่ใน Layer 2 เพื่อให้แสดงเป็นกรอบของข้อความเมื่อมีการทำ Layer Mask
11. เลือกที่ Layer 2 จากนั้น Click mouse ขวาเลือก Mask เพื่อทำการบัง Layer ที่อยู่ใต้ Layer 2 และให้แสดงออกมาทางช่องสี่เหลี่ยมที่ถูกสร้างใน Layer 2 เท่านั้น
12. Ctrl + Enter
ใบความรู้ที่ 3 การทำ Animation โดยใช้คำสั่ง Color จากหน้าต่าง Properties
การใช้ Color ในหน้าต่าง Properties เป็นการเพิ่มลูกเล่นให้กับภาพเคลื่อนไหว โดยใช้คำสั่ง Color มี 4 รูปแบบ คือ
1. Brightness คือการเพิ่มความสว่างหรือมืดให้กับวัตถุ
2. Tint คือการทำให้วัตถุเปลี่ยนสี
3. Alpha คือการทำให้วัตถุค่อย ๆ จางหายไป
4. Advanced คือการทำให้วัตถุเปลี่ยนสี โดยจะผสมสีเอาเอง
การทำ Animation โดยใช้คำสั่ง Color แบบ Brightness
1. ให้สร้าง Animation แบบ Tween
2. เลือก Frame 1 Click mouse ที่ Movie Clip
3. หน้าต่าง Properties เลือก Color แบบ Brigthness เพื่อปรับความสว่างให้วัตถุ
4. Frame 1 ให้สว่าง 100 % (สังเกตวัตถุจะหายไป)
5. Frane 20 ให้สว่างเท่าเดิม (ไม่ต้องปรับ)
6. Clrl+Enter
การทำ Animation โดยใช้คำสั่ง Color แบบ Tint
1. ให้สร้าง Animation แบบ Tween
2. เลือก Frame 1 Click mouse ที่ Movie Clip
3. หน้าต่าง Properties เลือก Color แบบ Tint เลือกแถบสีหรือกำหนดจากตัวเลขในค่าสี RGB ก็ได้
4. Clrl+Enter
1. Brightness คือการเพิ่มความสว่างหรือมืดให้กับวัตถุ
2. Tint คือการทำให้วัตถุเปลี่ยนสี
3. Alpha คือการทำให้วัตถุค่อย ๆ จางหายไป
4. Advanced คือการทำให้วัตถุเปลี่ยนสี โดยจะผสมสีเอาเอง
การทำ Animation โดยใช้คำสั่ง Color แบบ Brightness
1. ให้สร้าง Animation แบบ Tween
2. เลือก Frame 1 Click mouse ที่ Movie Clip
3. หน้าต่าง Properties เลือก Color แบบ Brigthness เพื่อปรับความสว่างให้วัตถุ
4. Frame 1 ให้สว่าง 100 % (สังเกตวัตถุจะหายไป)
5. Frane 20 ให้สว่างเท่าเดิม (ไม่ต้องปรับ)
6. Clrl+Enter
การทำ Animation โดยใช้คำสั่ง Color แบบ Tint
1. ให้สร้าง Animation แบบ Tween
2. เลือก Frame 1 Click mouse ที่ Movie Clip
3. หน้าต่าง Properties เลือก Color แบบ Tint เลือกแถบสีหรือกำหนดจากตัวเลขในค่าสี RGB ก็ได้
4. Clrl+Enter
ใบความรู้ที่ 1 การทำ Animation แบบการบิดพลิกวัตถุ
1. File > New
2. ใช้ เครื่องมือ Text Tool พิมพ์ข้อความขึ้นมา กำหนดสีและขนาดตามต้องการ
3. ทำการ Selection ที่ข้อความเลือก Modify > Break Apart เพื่อทำการแยกองค์ประกอบของข้อความ
4. ทำการกระจาย Layer ออก เพื่อแยกตัวหนังสือออกเป็น Layer ละ 1 ตัว โดยให้เลือก Modify > Distribute to Layers
5. สังเกตว่าข้อความจะถูกแยกออกเป็นตัวอักษรละ Layer จากนั้นให้ Click mouse ปุ่มขวาที่ Frame 20 ใน Layer ของตัวอักษรตัวแรก
6. Click mouse ขวาที่ Frame 1 ใน Layer แรกของตัวอักษร เลือก Create Motion Tween เพื่อสร้างการเคลื่อนไหวตั้งแต่ Frame 1 ถึง Frame 20
7. ให้ทำการ Insert Keyframe และ ) Create Motion Tween ในทุก ๆ Layer ของแต่ละตัวอักษร
8. กลับไปที่ Layer ของตัวอักษรตัวแรก ให้ Click mouse ที่ Frame 1 (สังเกตว่าจะมีกรอบสีฟ้าล้อมรอบตัวอักษร) แล้วเลือก Modify > Transform > Flip Horizontal เพื่อทำการกลับด้านของตัวอักษร
9. จากนั้น Click mouse ที่ Frame 1 ของ Layer ในตัวอักษรถัดมา และเลือก Modify > Transform > Flip Horizontal โดยจะทำกับ Frame 1 ของทุก Layer ที่มีตัวอักษร เมื่อทำเสร็จแล้วตัวอักษรทั้งหมดจะกลับด้านกัน
10. ทำการทดสอบ Animation โดยกดคีย์ Ctrl + Enter
2. ใช้ เครื่องมือ Text Tool พิมพ์ข้อความขึ้นมา กำหนดสีและขนาดตามต้องการ
3. ทำการ Selection ที่ข้อความเลือก Modify > Break Apart เพื่อทำการแยกองค์ประกอบของข้อความ
4. ทำการกระจาย Layer ออก เพื่อแยกตัวหนังสือออกเป็น Layer ละ 1 ตัว โดยให้เลือก Modify > Distribute to Layers
5. สังเกตว่าข้อความจะถูกแยกออกเป็นตัวอักษรละ Layer จากนั้นให้ Click mouse ปุ่มขวาที่ Frame 20 ใน Layer ของตัวอักษรตัวแรก
6. Click mouse ขวาที่ Frame 1 ใน Layer แรกของตัวอักษร เลือก Create Motion Tween เพื่อสร้างการเคลื่อนไหวตั้งแต่ Frame 1 ถึง Frame 20
7. ให้ทำการ Insert Keyframe และ ) Create Motion Tween ในทุก ๆ Layer ของแต่ละตัวอักษร
8. กลับไปที่ Layer ของตัวอักษรตัวแรก ให้ Click mouse ที่ Frame 1 (สังเกตว่าจะมีกรอบสีฟ้าล้อมรอบตัวอักษร) แล้วเลือก Modify > Transform > Flip Horizontal เพื่อทำการกลับด้านของตัวอักษร
9. จากนั้น Click mouse ที่ Frame 1 ของ Layer ในตัวอักษรถัดมา และเลือก Modify > Transform > Flip Horizontal โดยจะทำกับ Frame 1 ของทุก Layer ที่มีตัวอักษร เมื่อทำเสร็จแล้วตัวอักษรทั้งหมดจะกลับด้านกัน
10. ทำการทดสอบ Animation โดยกดคีย์ Ctrl + Enter
ใบความรู้ที่ 2 การทำ Animation แบบให้วัตถุหมุนรอบตัวเอง
1. สร้างภาพหรือ Import ภาพเข้ามาไว้ที่ Stage
2. ทำการ Selection ที่วัตถุ แล้วเลือกเมนู Insert > Convert to Symbol หรือ กด F8
3. จะปรากฏหน้าต่าง Convert to Symbol ขึ้นมาให้เลือกเป็น Movie Clip แล้ว Ok
4. Click mouse ที่ปุ่ม Free Transform Tool เพื่อทำการเปลี่ยนจุดหมุนของภาพ
5. ใช้เมาส์ลากจุดศูนย์กลางของวัตถุ เพื่อเปลี่ยนจุดหมุนของวัตถุตามต้องการ
6. Click mouse ขวาที่ Frame 20 เลือก Insert Keyframe จากนั้น Click mouse กลับไป Frame 1 เลือก Insert > Create Motion Tween เพื่อกำหนดการเคลื่อนไหวตั้งแต่ Frame 1 ถึง Frame 20
7. ที่หน้าต่าง Properties เพื่อกำหนดการหมุนให้ Movie Clip (สังเกตที่ TimeLine ว่ากำลังทำงานที่ Frame 1)
เลือก Tweening เป็น Motion เพื่อบอกว่าเป็นการเคลื่อนที่แบบไม่มีการเปลี่ยนแปลงรูปร่าง
เลือก Scale เพื่ออนุญาตให้ทำการหมุนวัตถุ
เลือก Rotate เลือก CCW วัตถุจะหมุนทวนเข็มนาฬิกา ถ้าเป็น CW เพื่อให้วัตถุหมุนตามเข็มนาฬิกา
Time เป็น 1 เพื่อเป็นการบอกว่าเป็นการหมุน 1 รอบ
8. ทำการทดสอบ Animation โดยกดคีย์ Ctrl + Enter
2. ทำการ Selection ที่วัตถุ แล้วเลือกเมนู Insert > Convert to Symbol หรือ กด F8
3. จะปรากฏหน้าต่าง Convert to Symbol ขึ้นมาให้เลือกเป็น Movie Clip แล้ว Ok
4. Click mouse ที่ปุ่ม Free Transform Tool เพื่อทำการเปลี่ยนจุดหมุนของภาพ
5. ใช้เมาส์ลากจุดศูนย์กลางของวัตถุ เพื่อเปลี่ยนจุดหมุนของวัตถุตามต้องการ
6. Click mouse ขวาที่ Frame 20 เลือก Insert Keyframe จากนั้น Click mouse กลับไป Frame 1 เลือก Insert > Create Motion Tween เพื่อกำหนดการเคลื่อนไหวตั้งแต่ Frame 1 ถึง Frame 20
7. ที่หน้าต่าง Properties เพื่อกำหนดการหมุนให้ Movie Clip (สังเกตที่ TimeLine ว่ากำลังทำงานที่ Frame 1)
เลือก Tweening เป็น Motion เพื่อบอกว่าเป็นการเคลื่อนที่แบบไม่มีการเปลี่ยนแปลงรูปร่าง
เลือก Scale เพื่ออนุญาตให้ทำการหมุนวัตถุ
เลือก Rotate เลือก CCW วัตถุจะหมุนทวนเข็มนาฬิกา ถ้าเป็น CW เพื่อให้วัตถุหมุนตามเข็มนาฬิกา
Time เป็น 1 เพื่อเป็นการบอกว่าเป็นการหมุน 1 รอบ
8. ทำการทดสอบ Animation โดยกดคีย์ Ctrl + Enter
วันอังคารที่ 2 กันยายน พ.ศ. 2551
สมัครสมาชิก:
บทความ (Atom)
