วันจันทร์ที่ 10 กันยายน พ.ศ. 2555

คู่มือการใช้ Flash CS5

คู่มือการใช้ Flash CS5

เครื่องมือ และสิ่งที่ควรรู้ใน Adobe Flash

                วิธีใช้ที่ท่านกำลังอ่านต่อไปนี้ เขียนขึ้นเป็นวิทยาทาน ที่เว็บไซต์ของ สว อิเฎล ไม่อนุญาตให้นำไปใช้ในเว็บไซต์อื่น และสื่อใด ๆ ที่มีโฆษณาหรือเพื่อการค้า
1.) เปิด Adobe Flash CS3 หรือ CS5 ขึ้นมา แล้วเลือก ActionScript3 เพื่อความทันสมัยและความเป็นอนาคต



2.) หน้าต่างเครื่องมือหลักที่ใช้ทำ Animation มี

2.1 Tool ด้านซ้ายมือ เป็นแถบเครื่องมอืเอาไว้วาดภาพ, สร้างรูปร่างต่าง ๆ, ลงสี, เลือก, หมุน, ย่อ, ขยาย
2.1.1 Selection Tool (หรือกดตัว V) คือลูกศรด้านซ้ายมือบนสุด เอาไว้เลือกวัตถุหรือภาพ โดยการคลิกลากคลุก
2.1.2 Free Transform Tool (หรือกดตัว Q) เมื่อเลือกวัตถุหรือภาพแล้ว สามารถใช้เครื่องมือนี้ในการย่อ ขนานขนาด หมุด หรือพลิกกลับด้าน
2.1.3 Rectangle (หรือกดตัว R) ไว้สร้างสี่เหลี่ยม
2.1.4 Circle (หรือกดตัว O) ไว้สร้างลงกลม
2.1.5 Brush (หรือกดตัว B) เป็นพู่กันวาดรูป
2.1.6 Paint Bucket (หรือกดตัว K) เอาไว้เทสีใส่ในพื้นที่ที่วาดขึ้นมาแล้ว
2.1.7 Eraser (หรือกดตัว E) ยางลบ
2.1.8 Fill Color เลือกสีที่ต้องการ
2.2 Timeline ส่วนบนสุดในรูปด้านล่าง ถ้าสังเกตุคำว่า fps ส่วนล่างของ Timeline จะสามารถแก้ตัวเลขได้ ตัวเลขยิ่งน้อย Animation จะยิ่งช้า, ตัวเลขยิ่งมาก จะยิ่งเร็ว
2.3 Properties ถ้าไม่ได้คลิก Object อะไรเลย การตั้งค่าจะเป็นการตั้งค่าหลักของ file เช่น ขนาดหน้าจอ และสีพื้นหลัง แต่ถ้าคลิกบนภาพที่วาก หรือ Symbol อื่น ๆ การตั้งค่าจะเป็นของวัตถุนั้น ๆ
2.4 Library เป็นแหล่งเก็บ Symbol ที่เราสร้าง คือ MovieClip Graphic และ Button รวมถึงไฟล์เพลงและวิดีโอ
3.) หากแถบเครื่องมือใดหายไป ให้กด Windows ที่ Menu Bar ด้านบน และเลือกสิ่งที่คิดว่าหายไป
วิธีการใช้ Motion Tween และ Classic Tween ใน Adobe Flash
1. ใช้แถบเครื่องมือทางด้านซ้ายมือของหน้าจอที่เห็น มาสร้างวัตถุอันหนึ่งบนพื้นที่ทำงาน (แถบเครื่องมืออาจอยู่ที่อื่น แล้วแต่ความถนัดของผู้ใช้ว่าจะวางมันที่ไหน แต่รูปที่อิเฎลเอามาลง เป็น Wordspace แบบ Classic)
2. ตอนนี้ อิเฎลก็จะกำหนดความยาวของ Animation ที่เราจะทำ
- เงยหน้ามอง Timeline ด้านบน
- แล้วเอา Mouse ไปคลิกที่ Frame ที่ 20 บนบรรทัดของ Layer ที่มีรูปที่วาดไว้
- กด F5 (หรือ คลิกขวา แล้วเลือก Insert Frame)
3. อิเฎลก็จะใส่ Tween ลงไปให้กับวัตถุที่สร้าง
- คลิกขวาที่พื้นที่สีเทา ใน Layer ที่เราทำงานอยู่
- ถ้าใช้ Adobe Flash CS5 ขึ้นไปให้เลือก Create Classic Tween
- ถ้าใช้ Version ต่ำกว่า CS5 ให้เลือก Create Motion Tween
4. จับวัตถุเคลื่อนที่
4.1 เคลื่อนที่ธรรมดา ไม่มีการหมุนหรือย่อขนาด
- ตอนนี้เนื้อที่ Layer บน Timeline เป็นสีม่วงแล้ว
- ไปที่ Frame สุดท้าย หรือ Frame ก่อนหน้านั้น (แล้วแต่)
- กด F6 เพื่อเพิ่ม Keyframe (หรือคลิกขวา แล้วเลือก Insert Keyframe)
- ก้มลงมามองที่พื้นที่ทำงาน
- ลากวัตถุที่เราสร้างไปที่อืน
- เสร็จแล้ว!! ลองกด Ctrl+Enter เพื่อเล่น Animation
4.2 เคลื่อนที่แบบมีการหมุน หรือ ย่อ ขยาย
เนื่องจากเวลาหมุนวัตถุ จะต้องมีแกนหมุน
เนื่องจากเวลาจะย่อ หรือขยาย ก็ต้องมีจุดอ้างอิง เช่น ย่อจากซ้ายไปขวา ให้ลากจุดอ้างอิงไปทางขวา เป็นต้น
- ตอนนี้เนื้อที่ Layer บน Timeline เป็นสีม่วงแล้ว
- ไปคลิกที่ Frame แรกของ Timeline
- มองที่ Tool Bar หรือแถบเครื่องมือ
- คลิกที่ Free Transform Tool (ตัวที่ 3 นับจากตัวแรก ดูตามรูปด้านล่าง)
- ตอนนี้หน้าตาวัตถุของเราจะดูเหมือนสามารถย่อ ขยายได้ แล้วมีจุดสีขาวตรงกลาง
- จุดสีขาวตรงกลางคือจุดอ้างอิง เพื่อที่จะหมุนหรือย่อ ขยาย ถ้าอิเฎลต้องการให้หมุนรอบมุมว้ายบน อิเฎลก็จะลากจุดสีขาวนั้นไปที่มุมซ้ายบน เป็นต้น
- เมื่อจุดสีขาวอยู่ในตำแหน่งที่ต้องการแล้ว ให้เงยหน้าดู Timeline
- ไปที่ Frame สุดท้าย หรือ Frame ก่อนหน้านั้น (แล้วแต่)
- กด F6 เพื่อเพิ่ม Keyframe (หรือคลิกขวา แล้วเลือก Insert Keyframe)
- ก้มลงมามองที่พื้นที่ทำงาน
- จับวัตถุหมุน ย่อ ขยาย หรือลากไปที่อื่นด้วยก็ได้
- เสร็จแล้ว!! ลองกด Ctrl+Enter เพื่อเล่น Animation
บทความนี้เขียนเป็นวิทยาทาน ไม่อนุญาติให้นำไปใช้เพื่อแสวงหาผลประโยชน์ใด ๆ รวมถึงเว็บไซต์ที่มีโฆษณา แม้ว่าผู้ที่คัดลอกจะไม่มีส่วนได้เสียกับเว็บไซต์นั้นก็ตาม
Motion Tween
Motion Tween ใน Adobe Flash CS5 จะเหมือนเอา Classic Tween (Motion Tween รุ่นเก่า) มารวมกับการเคลื่อนที่ของวัตถุตาม Guild Line เพราะเมื่อสร้าง Motion Tween แล้วจะมีเส้นสีเขียว บอกเส้นทางการเคลื่อนที่ของวัตถุ ซึ่งเราสามารถใช้ Mouse ดึง ดัด เส้นนั้นให้โค้งไปมาได้
ตอนนี้ ก็มาลองทำ Motion Tween ไปพร้อม ๆ กับอิเฎลเลย!! ต้องเป็น CS5 ขึ้นไปเท่านั้น Versionต่ำกว่าจะไม่มี
1. หลังจากข้อ 1 และข้อ 2 ข้างต้น อิเฎลก็จะใส่ Motion Tween ลงไป
- คลิกขวาที่พื้นที่สีเทา ใน Layer ที่เราทำงานอยู่
- ให้เลือก Create Motion Tween
- พื้นที่ของ Layer จะเป็นสีฟ้า
2. ไปที่ Motion Editor
ถ้าไม่เจอหน้าต่างนี้ ให้คลิก Window ที่ Menu Bar และเลือก “Motion Editor”
- จุด ดำ ๆ ที่เห็นที่ Timeline ในหน้าต่างของ Motion Editor คือ Keyframe ที่เราสร้างเอาไว้แล้ว
- เวลาจะเลื่อน ให้เลือนจุดดำบนบรรทัดของ X และ Y
- เวลาจะหมุน ให้เลือนจุดดำบนบรรทัดของ Rotation X และ Rotation Y
- เวลาจะย่อ หรือ ขยาย ให้เลือนจุดดำบนบรรทัดของ Scale X และ Scale Y
- เวลาจะบิด ให้เลือนจุดดำบนบรรทัดของ Skew X และ Skew Y
- นอกจากนี้ยังมี Color Effect ให้เล่นเกี่ยวกับสี
- และมีการทำ Blur Filter อีกด้วย
3. เมื่อตั้งค่าการเคลื่อนที่เสร็จเรียบร้อยแล้ว เราจะเห็นได้ว่า ตรงพื้นที่ที่เราทำงานจะมีเส้นสีเขียว โยงบอกทิศทางการเคลื่อนที่ และมีจุด ๆๆๆ อยู่บนเส้น จุดหนึ่งจุดที่เราเห็น หมายถึง Frame แต่ละ Frame เรายังสามารถเอา Mouse จับที่เส้นแล้วดึงให้โค้งไปมาตามต้องการ
วิธีการใช้ Shape Tween ใน Adobe Flash
                Shape Tween คือการเปลี่ยนแปลงรูปร่าง จากรูปร่างหนึ่งไปอีกรูปร่างหนึ่ง ลองคิดถึงตัว Upgrade ในเรื่อง Ben 10 ที่ตอนแรกมีรูปทรงของตัวเอง แต่สามารถแปลงให้เป็นรูปร่างของสิ่งของที่ตนจะเข้าไปควบคุม
บทความนี้เขียนเป็นวิทยาทาน ไม่อนุญาติให้นำไปใช้เพื่อแสวงหาผลประโยชน์ใด ๆ รวมถึงเว็บไซต์ที่มีโฆษณา แม้ว่าผู้ที่คัดลอกจะไม่มีส่วนได้เสียกับเว็บไซต์นั้นก็ตาม
1. อิเฎลต้องสร้าง Keyframe ไว้ 2 ที่ สำหรับ 2 รูป ถ้าใครอยากแปลง 3 ร่าง ก็สร้างไป 3 Keyframe
- เอา Mouse คลิกที่ Timeline ว่าอยากให้ Animation ยาวเท่าไร แบบในรูป ถ้าอิเฎลต้องการให้ Animation ยาว 20 Frame ก็คลิกที่ Frame ที่ 20
- กด F5 เพื่อให้ความยาวของ Frame ยืดออกไป
- คลิกตรงพื้นที่ Frame สีขาวบน Layer ในส่วนที่ต้องการสร้าง Keyframe
- สร้าง Keyframe ด้วย F6 (กรณีนี้ใช้ F6 หรือ F7 ก็ได้ เพราะยังเป็น Blank Keyframe อยู่ แต่ถ้าเคยวาดอะไรลงไปแล้ว ต้องกด F7 เพื่อสร้าง Blank Keyframe)
- อาจสร้าง 1, 2, 3 Keyframe ก็ได้ แต่ Keyframe ไม่ควรติดกัน เพราะจะทำให้ไม่เห็นการเปลี่ยนแปลง
2. วาด หรือสร้างรูปเลขาคณิตลงไปในแต่ละ Keyrame
- ในกรณีตัวอย่างที่เอามาให้ดู มี Keyframe ที่ Frame ที่ 1 และ 20
- คลิกที่ Frame ที่ 1 แล้ววาดรูป 5 เหลี่ยมลงไปในพื้นที่ทำงาน
- คลิกที่ Frame ที่ 20 แล้ววาดรูป 4 เหลี่ยมลงไปในพื้นที่ทำงาน
- เอา Mouse ลาก Highlight พื้นที่ Frame บน Layer นั้น ๆ ทั้งหมด
- คลิกขวา
- เลือก Create Shape Tween
- ตอนนี้จะเห็นได้ว่า พื้นที่ Frame จะกลายเป็นสีเขียว และระหว่าง Keyframe จะมีการเปลี่ยนแปลงรูปร่างจาก 5 เหลี่ยมเป็น 4 เหลี่ยม
- ถ้าพอใจแล้วก็ถือว่า เสร็จ แต่ถ้ายังไม่พอใจ ก็ดูต่อข้อ 3
3. ถ้าอิเฎลต้องการควบคุมการเปลี่ยนแปลงรูปร่าง ต้องมีการสร้างจุดอ้างอิง เช่น มุมขวาของ 5 เหลี่ยม จะกลายเป็นมุมขวาของ 4 เหลี่ยม เป็นต้น
- คลิกที่ Keyframe แรกใน Layer
- กด Ctrl+Shift+H เพื่อสร้างจุดอ้างอิง หรือ Command+Shift+H สำหรับเครื่อง Mac (อาจใช้ Modify บน Menu Bar แล้วเลือก Shape เลือก Add Shape Hint)
- จะเห็น a อยู่ในวงกลมเล็ก ๆ สีแดง อยู่ตรงกลางของรูปทรงที่เราสร้าง
- ลาก a ไปวางที่มุมใดมุมหนึ่งของรูปทรงใน Keyframe แรก
- กด Ctrl+Shift+H อีกครั้ง เพื่อสร้างจุดต่อไป ทำซ้ำไปจนครบทุกมุม หรือด้านที่ต้องการให้กลายเป็นมุม (จุดต่อไปจะชื่อ b, c, d, e, …)
- จากนั้นไปคลิกที่ Keyframe ที่ 2 จะเห็นว่าจุดอ้างอิงที่เราสร้าง จะกองอยู่รวมกันตรงกลางของวัตถุ
- ให้ลากจุดต่าง ๆ ไปไวเตามมุมหรือตามด้านที่ต้องการ
- เมื่อทำสำเร็จแล้ว จุดเหล่านี้จะเปลี่ยนจากสีแดงเป็นสีเขียว
- ให้ลองกด Ctrl+Enter เพื่อแสดงผล


ไม่มีความคิดเห็น:

แสดงความคิดเห็น