สอน Flash บทเรียน 7: สร้าง Flash Header อย่างง่ายๆ

มนต์ มีเดีย สวัสดีค่ะ  สำหรับบทเรียนในวันนี้ จะเป็นการสร้าง Flash Header อย่างง่ายๆ สำหรับใครที่คิดไม่ออกว่าจะทำ Header ของ Website ของเราแบบไหนดี  ลองพิจารณาแบบเก๋ๆ นี้ก็ได้นะคะ ไม่ยากอย่างที่คิด   สามารถเพิ่มความเก๋ใน Website ของเราไม่เบาเลยทีเดียว

บทเรียนนี้จะเป็นการสร้าง Flash Header โดยไม่ใช้ Action Script Code แต่จะได้เรียนรู้วิธีการใช้ Color Mixer Panel (การผสมสีของวัตถุ)  และวิธีการ Design Animation ค่ะ

ถ้าพร้อมแล้ว เริ่มกันดีเลยดีกว่านะคะ

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



ขัั้นตอนที่ 1:  เปิด โปรแกรม Flash แล้วกด (Ctrl+J) Document Properties แล้วกำหนดค่าความกว้างและสูงให้ Flash Header ของเรานะคะ  width = 430 px  Height = 148 px Frame Rate = 32 fps.

ขัั้นตอนที่ 2: กด (R) Rectangle Tool  และกำหนดที่ Colors Portion ของ Tools Panel กำหนดเส้น Stroke ไม่ต้องให้มีสี   ส่วนสีพื้นเลือกสีอะไรก็ได้นะคะ   จากนั้นวาดสี่เหลี่ยมขนาด กว้าง 140px  สูง 140px ดูได้จากภาพประกอบ

ขัั้นตอนที่ 3:  เลือกที่สี่เหลี่ยมที่วาดไว้  จากนั้นให้ไปที่ Color Mixer Panel อยู่ด้านขวาของโปรแกรมหรือถ้าไม่โชว์ ให้กด (Shift+F9) และให้กำหนดตามรายละเอียดด้านล่างค่ะ :
   1. คลิ๊กสามเหลี่ยมชี้ลงด้านบนของ Color
   2. คลิ๊กที่ Menu Type เลือก Liner
   3. คลิ๊กเลือกสามเหลี่ยมเล็กข้างซ้าย  และกำหนดสี #f69715   และกำหนด Alpha Properties ตั้งค่า
       100%
   4. คลิ๊กเลือกสามเหลี่ยมเล็กข้างขวา  และกำหนดสี #feda3b   และกำหนด Alpha Properties ตั้งค่า
       100%

และขณะนี้  ภาพที่ Stage ของเราจะมีลักษณะดังนี้ค่ะ

ขัั้นตอนที่ 4: ขั้นตอนนี้เป็น Trick เล็กๆ สำหรับบทเรียนนี้ค่ะ กด (Q) Free Transform และให้ Rotate (หมุน) สี่เหลี่ยมที่ Stage ตามภาพประกอบเลยค่ะ

ขัั้นตอนที่ 5: กด (V) Selection Tool และคลิ๊ก 1 ครั้งที่สี่เหลี่ยม และหลังจากนั้น กด (Ctrl+F3) Properties Panel ซึ่งจะโชว์อยู่ด้านล่างของ Stage ไปที่ Menu width กำหนดค่า 430 px และไปที่ Menu Height กำหนดค่า 148 px

ขัั้นตอนที่ 6: กด (K) Align Panel และกำหนดค่าต่างๆ ตามตัวอย่างภาพประกอบค่ะ

และขณะนี้คุณได้ Background ของสี่เหลี่ยมที่สร้างขึ้นเรียบร้อยแล้วค่ะ

ขัั้นตอนที่ 7: ดับเบิ้ลคลิ๊กที่ Layer 1 และตั้งชื่อว่า background

ขัั้นตอนที่ 8: สร้าง Layer ใหม่เหนือ Layer background และตั้งชื่อว่า text จากนั้นเลือก Layer text จากนั้นกด (A) Text Tool เลือก Font ตัวอักษรและ Size ของตัวอักษรที่ต้องการ และจากนั้นพิมพ์ข้อความลงไปบนตำแหน่งตรงกลาง ของ background ดูตัวอย่างภาพประกอบค่ะ

สำหรับบทเรียนนี้ใช้ font : Dse RatBuRaNa ขนาด 83 px และใช้สีดำ กับขาวของตัวหนังสือค่ะ

ขัั้นตอนที่ 9: สร้าง Layer ใหม่เหนือ Layer text และตั้งชื่อว่า animation

ขัั้นตอนที่ 10: กด (R) Rectangle Tool อีกครั้งค่ะ  ที่ Color Portion ของ Tool Panel ให้กำหนด Stroke แบบไม่ให้มีสี  และสีพื้นกำหนดสีอะไรก็ได้ตามใจชอบ  และวาดสี่เหลี่ยมลงไป ความกว้าง 50px ความสูง 300px  ดูตามภาพประกอบค่ะ

ขัั้นตอนที่ 11: หลังจากนั้น กด (V) Selection Tool และคลิ๊กที่สี่เหลี่ยมทำลักษณะเหมือนภาพประกอบ
ค่ะ

 

ขัั้นตอนที่ 12: เลือกที่สี่เหลี่ยมที่วาดไว้  จากนั้นให้ไปที่ Color Mixer Panel อยู่ด้านขวาของโปรแกรมหรือถ้าไม่โชว์ ให้กด (Shift+F9) และให้กำหนดตามรายละเอียดด้านล่างค่ะ :
   1. คลิ๊กสามเหลี่ยมชี้ลงด้านบนของ Color
   2. คลิ๊กที่ Menu Type เลือก Liner
   3. คลิ๊กเลือกสามเหลี่ยมเล็กข้างซ้าย  และกำหนดสี #f69715   และกำหนด Alpha Properties ตั้งค่า
       100%
   4. คลิ๊กเลือกสามเหลี่ยมเล็กข้างขวา  และกำหนดสี #feda3b   และกำหนด Alpha Properties ตั้งค่า
       100%

ขัั้นตอนที่ 13: กด F8 (Convert to Symbol) เปลี่ยนสี่เหลี่ยมที่เราวาดให้เป็น Movie Clip

ขัั้นตอนที่ 14: กด (Q) Free Transform Tool  จากนั้นเลื่อนจุดตรงกลางไปที่ท้ายของรูป

ขัั้นตอนที่ 15: เลือกที่ Shape ที่สร้างไว้ กด Ctrl+C (Copy) จากนั้นกด Ctrl+Shift+V (Paste in Place)  ตามภาพด้านล่างค่ะ

 

ทำไปจครบรอบตามให้เหมือนตามภาพตัวอย่างประกอบนะคะ

ขัั้นตอนที่ 16: กด (V) Selection Tool และคลิ๊ก 1 ครั้ง บน animation Layer จากนั้นคลิ๊กเลือก shape ทั้งหมด

จากนั้นกด F8 (Convert to Symbol) เปลี่ยน shapes ทั้งหมดเป็น Movie Clip ตั้งชื่อว่า shape_mc2

ขัั้นตอนที่ 17: กด (V) Selection Tool คลิ๊กเลือกไปที่ Movie Clip shape_mc แล้วไปที่ Properties Panel (กด Ctrl+F3) ข้างล่าง Stage ไปที่ Menu color กำหนดเป็น Alpha 25% ตามภาพประกอบค่ะ

ขัั้นตอนที่ 18: หลังจากนั้น วางตำแหน่งของ Shapes เหมือนภาพประกอบค่ะ

ขัั้นตอนที่ 19: คลิ๊ก Frame 600 ของ Layer animation กด F6 จากนั้นกลับไป Frame แรก แล้วไปที่ Properties Panel (กด Ctrl+F3) ซึ่งข้างล่างใต้ Stage
เมนู Tween เลือกคำสั่ง motion
เมนู Ease ตั้งค่า  0
เมนู Rolate เลือก คำสั่ง CW

ดูการตั้งค่าตามภาพประกอบนะคะ

ขัั้นตอนที่ 20:  คลิ๊กที่ Frame 600 ของ Layer text และ background และกด F5


ถึงตรงนี้ขั้นตอนต่างๆ เสร็จแล้วนะคะ  ลองกด Ctrl+Enter รันผลดูนะคะ  สวยถูกใจใช่ไหมค่ะ ^O^


สามารถ Download File Master  ที่นี่  (เพื่อตรวจสอบความถูกต้องนะคะ)



Happy Happy ลั่นล๊าๆๆๆ ค่ะ


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