Mondeemedia

สอน Flash บทเรียน 18: สร้าง Banner นำเสนอภาพ 6 (Mask Photo Flash Banner Presentaion)

2011-11-28T20:42:00.001-08:00

วันนี้ มนต์ มีเดีย จะขอนำเสนอวิธีการสร้างภาพต่าง ๆ ที่เราต้องการจะไปนำเสนอบน Website ของเราโดยโปรแกรม Flash ซึ่งจะเป็นการใช้คำสั่ง mask และก็เทคนิคพิเศษโดย Flash นะคะ ซึ่งไม่จำเป็นต้องใช้ Action Script เลยสำหรับในบทเรียนนี้ค่ะ คุณจะได้เรียนรู้วิธีการ Import ภาพเข้ามาใน flash และบน Stage ของเราค่ะ และจะได้เรียนรู้วิธีการ filter บนรูปภาพของเรานะคะ ถ้าพร้อมกันแล้วก็เราก็เริ่มกันเลยนะคะ

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

ขอบคุณภาพประกอบจาก Mytinyshops
ขั้นตอนที่ 1 : ขั้นตอนแรก จำเป็นที่สุดคือเราต้องเตรียมภาพสำคัญของเราที่จะนำมาสำหรับการนำเสนอก่อนนะคะ ภาพในบทเรียนนี้ Size width 420 px height 315 px ค่ะ หรือสามารถ Save ภาพจากใน Blog ได้เลยนะคะ

ขั้นตอนที่ 2 : เปิดโปรแกรม Flash File--> New--> Flash Document เลือกคำสั่ง modify --> document ตั้งค่าต่างๆ width: 420 px height : 315 px Frame rate : 33 แล้ว Save ตั้งชื่อว่า maskphoto.fla

ขั้นตอนที่ 3 : เปลี่ยนชื่อ Layer 1 เป็น photo โดยการดับเบิ้ลคลิ๊กที่ Layer 1 แล้วก็พิมพ์ชื่อใหม่ลงไป

ขั้นตอนที่ 4 : เลือกคำสั่ง File > Import to stage (Ctrl + R) และเลือกภาพจากที่เตรียมไว้จากขั้นตอนที่ 1 มาวางบน stage และภาพที่นำลงมาวางยังคงถูกเลือกอยู่ จากนั้นไปที่คำสั่ง Align Panel (Ctrl + K) และกำหนดตามคำสั่งดังต่อไปนี้ :

1. เลือกคำสั่ง Align/Distribute to stage เพื่อเปิดคำสั่งนี้

2. คลิกเลือกที่คำสั่ง Align horizontal center

3. คลิกเลือกที่คำสั่ง Align vertical center

ขั้นตอนที่ 5 : ขณะนี้ภาพที่เรากำหนด ก็ยังคงถูกเลือกอยู่ จากนั้นให้กด F8 key (Convert to Symbol) เพื่อเปลี่ยนภาพของเราให้เป็น Movie Symbol แล้วตั้งชื่อว่า photo_mc ตามภาพที่แสดง

ขั้นตอนที่ 6 : คลิกเลือกที่ frame 65 ของ Layer photo ให้กด F6 key

ขั้นตอนที่ 7 : กลับที่ frame ที่ 1 ของ Layer photo จากนั้นใช้คำสั่ง Selection Tool (V) และคลิก 1 ครั้งที่ ภาพ บน stage จากนั้นไปที่ Properties Panel (Ctrl + F3) ข้างใต้ stage จากนั้นเลือก Filters tab ซึ่งอยู่ข้างซ้าย จากนั้นคลิกที่เครื่องหมายบวก และเลือกคำสั่ง Blur filters จากนั้นก็กำหนดค่าตามภาพดังต่อไปนี้

ขั้นตอนที่ 8 : คลิกขวาระหว่างพื้นที่สีเทาระหว่าง frame 1 ถึง 65 บน timeline และเลือกคำสั่ง Create Motion Tween จากเมนูที่ปรากฏ

ขั้นตอนที่ 9 : สร้าง Layer ใหม่ บน Layer photo ตั้งชื่อ Layer ว่า mask

ขั้นตอนที่ 10 : คลิกเลือก Layer mask และวาด shape และวางไว้ที่ตำแหน่ง ที่แสดงให้ดูในภาพประกอบค่ะ

ขั้นตอนที่ 11 : คลิกเลือก frame 30 ของ Layer mask กด F6 key และขณะนี้ก็อยู่ที่ frame 30 ให้ลาก shape เหมือนกับ ภาพประกอบ

ขั้นตอนที่ 12 : คลิกเลือก frame 65 กด F6 key และขณะนี้เราอยู่ที่ Frame 65 และลาก Shape ให้
เหมือนภาพประกอบอีกครั้งค่ะ

ขั้นตอนที่ 13 : คลิกขวาบริเวณพื้นที่สีเทาระหว่าง frame 1 และ frame 30 และ frame 65 บน timeline เลือกคำสั่ง Create Shape Tween จากเมนูที่ปรากฏ

ขั้นตอนที่ 14 : เลือก Layer Mask แล้วคลิกขวาเลือกคำสั่ง Mask ตามภาพประกอบ

และแล้ว Banner ของเราก็เสร็จแล้วนะคะ ทดสอบรันดูได้ค่ะ เป็นไงค่ะไม่ยากเลยใช่ไหมค่ะ
หรือสามารถ Download File Master ได้ ที่นี่ เพื่อใช้ตรวจสอบความถูกต้องนะคะ

อย่าลืมนะคะว่า ไม่มีสมาธิในการทำก็ จบ ค่ะ

Well Done!!!

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

บทเรียนสอน Flash : Tthai Tutorail Flash

2011-11-16T01:57:00.001-08:00

บทเรียนช่วยสอน โปรแกรม Flash

Thai Flash Tutorail จัดทำขึ้นเพื่อเป็นการช่วยผู้ที่ต้องการเรียนรู้โปรแกรม Flash โดยการเรียบเรียงด้วยคำพูดง่ายๆ แล้วก็มีภาพประกอบให้ทำตามกันอย่างละเอียด สำหรับใครที่ต้องการตกแต่ง Website หรือต้องการจะทำ Banner, Menu จาก Flash เอง โดยไม่ต้องไปจ้างเสียเงินแพงๆๆ บทเรียนต่างๆ ที่ Monmedia จัดเตรียมไว้ คงมีประโยชน์สำหรับทุกคนค่ะ

หวังว่าคงได้ใช้ประโยชน์กันไม่มากก็น้อยนะคะ ถ้ามีปัญหาหรือสงสัยก็ ฝากข้อความไว้ตามกระทู้ต่างๆ ได้เลยค่ะ







สอน Flash บทเรียน 1: สร้างเมนูเลือกภาพด้วยตัวเลข (Image Listing By number)	เรียน ที่นี่


สอน Flash บทเรียน 2: สอนสร้าง Banner นำเสนอภาพ 1 Presentation Banner	เรียน ที่นี่

ภาพประกอบจาก http://www.mytinyshops.com/

สอน Flash บทเรียน 3: สร้าง Banner นำเสนอภาพ 2 (Attactive Banner)	เรียน ที่นี่

ภาพประกอบจาก http://www.alldecorate.com/

สอน Flash บทเรียน 4: สร้าง Banner นำเสนอภาพ 3 (Flash Photo Gallery)	เรียน ที่นี่

ภาพประกอบจาก http://www.mytinyshops.com/

สอน Flash บทเรียน 5: สร้าง Banner นำเสนอภาพ 4 (Flash Simple Photo Effect)	เรียน ที่นี่

ภาพประกอบจาก http://www.mytinyshops.com/

สอน Flash บทเรียน 6: สร้าง Banner นำเสนอภาพ 5 (Full Flash Banner)	เรียน ที่นี่

ภาพประกอบจาก http://www.monmedia.co.th/

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


สอน Flash บทเรียน 8: สร้าง ฟองสบู่ (Bubble) โปรแกรม Flash	เรียน ที่นี่


สอน Flash บทเรียน 9: สร้างตัวหนังสือหมุนบนแบนเนอร์ (Rotation Text Banner)	เรียน ที่นี่


สอน Flash บทเรียน 10: สร้างเมนูภาพเลื่อนโดย Flash (Scrolling Photo Menu Panel)	เรียน ที่นี่


สอน Flash บทเรียน 11: สร้างเมนู Flash ด้วย icon	เรียน ที่นี่


สอน Flash บทเรียน 12: สร้าง Animation ภาพในอนาคตด้วย Flash	เรียน ที่นี่


สอน Flash บทเรียน 13: สร้างเมนู Flash แบบที่ 1	เรียน ที่นี่


สอน Flash บทเรียน 14: สร้างเมนู Flash แบบที่ 2 (Advance And Modern Flash)	เรียน ที่นี่


สอน Flash บทเรียน 15: สร้างเมนู Flash แบบที่ 3 (Advanced drop down flash menu)	เรียน ที่นี่


สอน Flash บทเรียน 16: สร้างเมนู Flash แบบที่ 4 สร้างเมนูจากภาพให้น่าสนใจ (Advanced and attractive photo flash menu)	เรียน ที่นี่


สอน Flash บทเรียน 17: สร้างเมนู Flash แบบที่ 5 สร้างเมนูเป็นภาพลายน้ำ (Gradient Flash Button)	เรียน ที่นี่

สอน Flash บทเรียน 17: สร้างเมนู Flash แบบที่ 5 สร้างเมนูเป็นภาพลายน้ำ (Gradient Flash Button)

2011-11-12T01:07:00.002-08:00

สวัสดีค่ะ มนต์ มีเดีย ขอเสนอแนะวิธีการทำ Button Menu แบบง่ายๆกันนะคะ คุณเคยคิดที่อยากจะรู้วิธีการทำ Menu ใน Website ของคุณให้น่าสนใจไหมค่ะและในบทเรียนนี้จะเป็นอีกบทเรียนหนึ่งที่จะสอนให้คุณสร้าง Button Menu ให้ Website ของคุณดูดี ดูหรู ได้อย่างง่ายๆๆ ค่ะ บทเรียนนี้คุณจะได้เรียนรู้วิธีการสร้าง Button Menu Flash ด้วย RollOver and RollOut effect และมีการใช้ Action Script สั้นๆๆ ไม่กี่ประโยคก็สามารถทำให้สวยได้แล้วค่ะ งั้นเรามาเริ่มกันเลยดีกว่าไหมค่ะ

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

ขั้นตอนที่ 1 : เปิดโปรแกรม Flash File--> New--> Flash Document เลือกคำสั่ง modify --> document ตั้งค่าต่างๆ width: 200 px height : 100 px Frame rate : 25 แล้ว Save ตั้งชื่อว่า gradientmenu.fla

ขั้นตอนที่ 2 : ใช้คำสั่ง Rectangle Tool (R) และเลือกสีพื้นตามใจชอบค่ะ ส่วนสีเส้นต้องปิดโหมดนี้ไม่ให้ Active จากนั้นให้ไปที่ Color Mixer Panel (Shift+F9) แล้วเลือกเป็นแบบ Linear จากนั้นวาดสี่เหลี่ยมเพื่อเป็น Button Menu ของเรานะคะ ดูตัวอย่างได้จากภาพค่ะ

ขั้นตอนที่ 3 : ขณะนี้สี่เหลี่ยมที่วาดไว้ยังคงถูกเลือกอยู่ให้กด F8 Key เพื่อเป็นการใช้คำสั่ง (Convert to symbol) จากนั้นให้เลือกเป็น Movie Clip แล้วตั้งชื่อว่า Button_mc

ขั้นตอนที่ 4 : ดับเบิ้ลคลิ๊กที่ Movie Clip Button_mc ที่เราสร้างขึ้น หรือ คลิ๊กขวาเลือกคำสั่ง Edit in Place

ขั้นตอนที่ 5 : หลังจากคลิกที่ Frame 20 ของ Layer 1 แล้วกด F6 จากนั้นสร้าง Layer ใหม่ (Layer 2) ดูตามภาพประกอบ

ขั้นตอนที่ 6 : คลิกที่ Frame แรก ของ Layer 2 จากนั้นกด F9 เพื่อเปิด Action Script Panel และจากนั้นก็ใส่คำสั่ง ดังนี้

stop ();

ขั้นตอนที่ 7 : คลิกที่ Frame 2 ของ Layer 2 จากนั้นกด F6 key ต่อจากนั้นคลิกเลือกที่ Layer 1 แล้วกด Ctrl+C เพื่อทำการ copy จากนั้นคลิก Frame ที่ 2 ของ Layer 2 แล้วกด Ctrl+Shift+V (Paste in Place) เพื่อทำการวางที่สิ่ง Copy มา

ขั้นตอนที่ 8 : ถึงขั้นตอนนี้สี่เหลี่ยมก็ยังคงถูก ก๊อปปี้อยู่ และยังคงถูกเลือกอยู่ ให้กด F8 key (Convert to Symbol) เพื่อเปลี่ยนให้เป็น Movie Clip จากนั้น ตั้งชื่อให้ว่า Button1_mc ตามภาพประกอบ

ขั้นตอนที่ 9 : ใช้คำสั่ง Free Transform Tool (Q) คลิกที่จุดสีดำตรงกลางแล้วลากลงมาข้างล่างเพื่อกลับสี่เหลี่ยมด้านบนเป็นด้านล่าง และด้านล่างเป็นด้านบน

ขั้นตอนที่ 10 : คลิก Frame 10 ที่ Layer 2 และกด F6 key จากนั้นกด F9 เพื่อเปิด Action Script Panel และใส่ Script ดังนี้

stop ();

ขั้นตอนที่ 11 : กลับไปที่ Frame ที่ 2 ของ Layer 2 จากนั้นเลือกคลิกเลือกที่ สี่เหลี่ยม 1 ครั้ง แล้วไปที่ Properties Panel (Ctrl + F3) อยู่ข้างล่างใต้ Stage แล้วเลือกคำสั่ง Alpha ที่ Menu Color แล้วใส่ค่า 0% ลงไป ตามภาพ

ขั้นตอนที่ 12 : คลิกที่ Frame 20 Layer 2 กด F6 key

ขั้นตอนที่ 13 : จากนั้นกด F9 เพื่อเปิด Action Script Panel แล้วใส่คำสั่งดังนี้

gotoAndPlay (1);

ขั้นตอนที่ 14 : จากนั้นไปที่ Frame 20 ของ Layer 2 แล้วคลิกที่สี่เหลี่ยม 1 ครั้ง แล้วไปที่ และกำหนด Alpha ที่ Menu color แล้วกำหนดค่าเป็น 0% ซึ่งขั้นตอนนี้จะเหมือนขั้นตอน 10 Properties Panel (Ctrl+F3)

ขั้นตอนที่ 15 : กลับไปที่ Frame 2 ของ Layer 2 แล้วไปที่ Properties Panel (Ctrl+F3) ข้างใต้ Stage จากนั้นไปที่ Frame Label พิมพ์ชื่อ go1 ลงไป ตามภาพประกอบ

ขั้นตอนที่ 16 : จากนั้นคลิกที่ Frame 10 ของ Layer 2 แล้วไปที่ Properties Panel (Ctrl+F3) ข้างใต้ Stage จากนั้นไปที่ Frame Label พิมพ์ชื่อ go2 ลงไป

ตามภาพประกอบ

ขั้นตอนที่ 17 : กลับไปที่ Main Scene (Scene1) จากคลิกที่ Button 1 ครั้ง แล้วกด F9 เพื่อเปิด Action Script Panel และใส่คำสั่งดังนี้

on (rollOver) {
gotoAndPlay ("go1");
}

on (rollOut) {
gotoAndPlay ("go2");
}

on (release) {
getURL ("http://www.kcupdrawer,com", _self);
}

ขั้นตอนที่ 18 : สร้าง Layer ใหม่ และตั้งชื่อว่า Text จากนั้นใช้คำสั่ง Text Tool (A) แล้วพิมพ์ คำที่ต้องการเป็นเมนูดังภาพ

เสร็จแล้วค่ะเมื่อมาถึงขั้นตอนนี้ ทดสอบการรันด้วยการกด (Ctrl + Enter) เพื่อดูผลการรันนะคะ
ค่อยๆ ทำนะคะ เพราะมันค่อนข้างสับซ้อนนิดหน่อย ถ้าไม่เข้าใจอะไร comment ถามไว้ได้เลยค่ะ

หรือสามารถ Download File Master ได้ ที่นี่ เพื่อใช้ตรวจสอบความถูกต้องนะคะ

อย่าลืมนะคะว่า ไม่มีสมาธิในการทำก็ จบ ค่ะ

Have a nice day!!!

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

สอน Flash บทเรียน 16: สร้างเมนู Flash แบบที่ 4 สร้างเมนูจากภาพให้น่าสนใจ (ภาค 2)

2011-11-11T20:26:00.001-08:00

       มนต์ มีเดีย สวัสดีค่ะ กลับมาแล้วนะคะหลังจาก
       ห่างหายไปหลายเดือนเลยทีเดียวค่ะติดภารกิจ
       หลากหลายประการ สำหรับผู้ที่ติดตาม Blog นี้
       อยู่นะคะ ต่อไปจะมีการ Update ให้เรียนรู้กัน
       ต่อไปค่ะ

       สำหรับบทเรียนนี้จะเป็นการสร้าง Menu จาก Flash
       ให้น่าสนใจน่าคลิกมากขึ้น   ซึ่งในบทเรียนนี้ คุณจะ
       ได้เรียนรู้เรื่องดังต่อไปนี้
          1. วิธีการ Design เมนูจากภาพ
          2. วิธีการ Import ภาพต่าง ๆ เข้ามาวางบน Stage
          3. วิธีการ Convert ภาพต่าง ๆ เป็น Movie Clip
          4. วิธีการ Create Instant Name
          5. วิธีการ Animate Photo และ Text
          6. วิธีการ Create invisible Button
          7. วิธีการ Apply Flash Filter ของทุกภาพ
          8. วิธีการขยายภาพโดยใช้เครื่องมือ (Q) Free Transform Tool

ขั้นตอนที่ 27: ขณะนี้คุณก็ยังคงอยู่ที่ Frame 5 ของ Layer textline ใช้คำสั่ง Selection Tool (V) และคลิ๊กไปที่สี่เหลี่ยมที่เราเพิ่งจะย่อลงมา จากนั้นไปที่ Properties Panel (Ctrl+F3) ข้างล่างใต้ Stage ไปที่ด้านขวามือที่เมนู Color เลือกคำสั่ง Alpha แล้วลดระดับลงไปที่ 0% ตามภาพ

ขั้นตอนที่ 28: คลิกขวาบริเวณพื้นที่สีเทา ระหว่าง Frame 5 ถึง 15 บน timeline แล้วเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 29: สร้าง Layer ใหม่เหนือ Layer textline ตั้งชื่อว่า text

ขั้นตอนที่ 30: คลิกที่ Frame 10 บน Layer text แล้วกด A เพื่อใช้คำสั่ง Text Tool (A) และไปที่ Properties Panel (Ctrl + F3) ข้างล่างใต้ Stage จากนั้นให้กำหนดลักษณะตัวอักษรดังนี้

          1. เลือกคำสั่ง Static Text field
          2. เลือก Font ตามที่ใจชอบ
          3. เลือก Font size 12
          4. เลือกสีขาว ให้ Font
          5. เลือกคำสั่ง rendering option เลือกใช้คำสั่ง Anti alias for readability text

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

ขั้นตอนที่ 31: และขณะนี้ Layer text ก็กำลังถูกเลือกอยู่ ให้กด F8 key (Convert to Symbol) เพื่อเปลี่ยนเป็น movie clip

ขั้นตอนที่ 32: กด F6 key ที่ Frame 15 Layer text

ขั้นตอนที่ 33: กลับไปที่ Frame 10 ของ Layer text แล้วใช้คำสั่ง Selection Tool (V) คลิก 1 ครั้งที่ text จากนั้นให้ไปที่ Properties Panel (Ctrl+F3) ข้างล่างใต้ Stage คลิกที่ Menu Filter คลิกที่เครื่องหมายบวก แล้วเลือกคำสั่ง Blur แล้วกำหนดค่าตามดังนี้

ขั้นตอนที่ 34: คลิกที่ Properties button จากนั้นคลิกที่ Menu color อยู่ด้านขวาของ Properties Color เลือกคำสั่ง Alpha กำหนด 0% ตามภาพ

ขั้นตอนที่ 35: เลือกที่ Frame 10 ของ Layer text และขยับตัวอักษรของเราลงมานิดหนึ่ง

ขั้นตอนที่ 36: คลิกขวาบริเวณสีเทาระหว่าง Frame 10 และ 15 บน timeline เลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 37: กลับไปที่ Scene 1

ขั้นตอนที่ 38: สร้าง Layer ใหม่ เหนือ Layer photo และตั้งชื่อว่า invisible button

ขั้นตอนที่ 39: เลือกที่ Layer invisible button และใช้คำสั่ง Rectangle Tool (R) เพื่อจะวาดสี่เหลี่ยม จากนั้นให้กำหนดเลือกสีเส้นไม่ให้ Active และเลือกสีพื้นสีอะไรก็ได้ค่ะ จากนั้นก็วาดสี่เหลี่ยมลงไปทับที่รูปแรกตามภาพประกอบ

ขั้นตอนที่ 40: จากนั้นสี่เหลี่ยมที่เราวาดไว้ยังคงถูกเลือกอยู่ ให้กด F8 key (Convert to symbol) เปลี่ยนสี่เหลี่ยมให้เป็น Button Symbol ตั้งชื่อว่า bu1

ขั้นตอนที่ 41: ดับเบิ้ลคลิกที่ Invisible Button เพื่อเข้าไปข้างใน จากนั้น ลากจุดสีดำจาก Up ไปวางที่ Hit

ขั้นตอนที่ 42: กลับไปที่ Scene1

ขั้นตอนที่ 43: ใช้คำสั่ง Selection Tool (V) คลิกที่ Invisible Button 1 ครั้ง จากนั้นกด F9 (Action Script Panel แล้วก็ใส่คำสั่งนี้ลงไปค่ะ

on (rollOver) {
_root.mouse_over_Photo1_mc = true;
}

on (rollOut) {
_root.mouse_over_Photo1_mc = fstartlse;
}

on (release){
getURL("http://www.mytinyshops.com/");

}

ขั้นตอนที่ 44: สร้าง Layer ใหม่เหนือ Layer Invisible Button ตั้งชื่อว่า action

จากนั้นเลือกที่ Frame 1 ของ Layer action และพิมพ์ Action Script ข้างล่างนี้ลงไปค่ะ

_root.Photo1_mc.onEnterFrame = function() {
if (mouse_over_Photo1_mc) {
_root.Photo1_mc.nextFrame();
} else {
_root.Photo1_mc.prevFrame();
}
};

สอน Flash บทเรียน 16: สร้างเมนู Flash แบบที่ 4 สร้างเมนูจากภาพให้น่าสนใจ (Advanced and attractive photo flash menu)

2011-11-11T20:22:00.000-08:00

       มนต์ มีเดีย สวัสดีค่ะ กลับมาแล้วนะคะหลังจาก
       ห่างหายไปหลายเดือนเลยทีเดียวค่ะติดภารกิจ
       หลากหลายประการ สำหรับผู้ที่ติดตาม Blog นี้
       อยู่นะคะ ต่อไปจะมีการ Update ให้เรียนรู้กัน
       ต่อไปค่ะ

       สำหรับบทเรียนนี้จะเป็นการสร้าง Menu จาก Flash
       ให้น่าสนใจน่าคลิกมากขึ้น   ซึ่งในบทเรียนนี้ คุณจะ
       ได้เรียนรู้เรื่องดังต่อไปนี้
          1. วิธีการ Design เมนูจากภาพ
          2. วิธีการ Import ภาพต่าง ๆ เข้ามาวางบน Stage
          3. วิธีการ Convert ภาพต่าง ๆ เป็น Movie Clip
          4. วิธีการ Create Instant Name
          5. วิธีการ Animate Photo และ Text
          6. วิธีการ Create invisible Button
          7. วิธีการ Apply Flash Filter ของทุกภาพ
          8. วิธีการขยายภาพโดยใช้เครื่องมือ (Q) Free Transform Tool

ตัวอย่างผลงานสำหรับบทเรียนวันนี้ค่ะ

ขั้นตอนที่ 1 : เปิดโปรแกรม Flash   File--> New--> Flash Document และสามารถ Download photos ที่ใช้บทเรียนนี้ได้ ที่นี่ ค่ะ

ขั้นตอนที่ 2 : เลือกคำสั่ง modify --> document ตั้งค่าต่าง ๆ width: 450px height : 150px background : สีขาว Frame rate : 52 แล้ว Save ตั้งชื่อว่า advanceattractive.fla

ขั้นตอนที่ 3 : ดับเบิ้ลคลิ๊กที่ Layer 1 เปลี่ยนชื่อใหม่ว่า photo1

ขั้นตอนที่ 4 : เลือกเมนู File > Import > Import to Library แล้วเลือกภาพที่เราเตรียมไว้จาก Folder ที่เราเก็บเลือกภาพทั้งหมดโดยการกด Shift และ Click พร้อมกัน จากนั้นคลิก Open จากนั้นให้เปิดหน้าต่าง Library (Ctrl + L) คุณจะได้เห็นภาพที่ Import เข้ามาแล้ว 3 ภาพใน Library

ขั้นตอนที่ 5 : ใช้ Selection Tool (กด V) เลือกภาพจาก Library มาวางบน stage ตามตำแหน่งที่เราต้องการดังภาพตัวอย่าง

ขั้นตอนที่ 6 : ใช้คำสั่ง Selection Tool (กด V) และเลือกภาพที่ 1 ใน เมนูของเรา

ขั้นตอนที่ 7 : ขณะนี้ภาพที่ 1 ของเรากำลังถูกเลือกอยู่ กด F8 เพื่อเปลี่ยนเป็น Movie Clip และตั้งชื่อ photo1_mc ให้ดังภาพตัวอย่างค่ะ

ขั้นตอนที่ 8 : Movie Clip ของเรายังคงถูกเลือกอยู่ ให้ไปตั้งค่าการทำงานที่ Properties Panel ใต้ Stage ให้กำหนดชื่อ Instance name ให้กับ Movie Clip ของเราที่ด้านซ้ายว่า “Photo1_mc”

ขั้นตอนที่ 9 : ดับเบิ้ลคลิ๊กที่ Movie Clip บน Stage และให้เลือก Selection Tool (V) ซึ่งหลังจากดับเบิ้ลคลิ๊กแล้วเราจะเข้าไปอยู่ข้างในของ Movie Clip สังเกตได้จากภาพตัวอย่างค่ะ

ขั้นตอนที่ 10 : ให้ทำการดับเบิ้ลคลิ๊กเพื่อเปลี่ยนชื่อ Layer1 เป็นชื่อใหม่ว่า image1

ขั้นตอนที่ 11 : จากนั้นเลือกที่ภาพที่ 1 อีกครั้ง กด F8 (Convert to Symbol) เปลี่ยน ภาพเป็น Movie Clip อีกครั้งหนึ่ง แล้วตั้งชื่อว่า photo1_mc_inside

ขั้นตอนที่ 12 : คลิก frame15 และกด F6 และในขณะนี้เราอยู่ที่ frame 15 จากนั้นเราจะใช้คำสั่ง Free Transform Tool (Q) และคลิกไปที่ภาพแล้วทำการขยายภาพให้ใหญ่ขึ้นตามภาพตัวอย่าง

ขั้นตอนที่ 13 : หลังจากนั้น ใช้คำสั่ง Selection Tool (V) และคลิก 1 ครั้งที่ภาพที่เราได้ขยายแล้ว ต่อจากนั้นไปที่ Properties Panel (Ctrl+F3) ข้างล่างใต้ Stage ข้างซ้าย ให้คลิกที่เมนู Filter คลิก 1 ครั้ง จากนั้นให้คลิกที่เครื่องหมายบวก (+) เลือกหาคำสั่ง Adjust Color แล้วกำหนดตามภาพตัวอย่างค่ะ

ขั้นตอนที่ 14 : คลิกขวาระหว่าง Frame1 และ Frame15 บนพื้นสีเทาๆ จากนั้นเลือกคำสั่ง Create Motion Tween จากเมนูที่ปรากฏค่ะ

ขั้นตอนที่ 15 : คลิกที่ Frame7 และกด F6 key. จากนั้นเราจะยังอยู่ที่ Frame 7 แล้วให้กด F6 Key 2 ครั้งค่ะ

ขั้นตอนที่ 16 : จากนั้นกลับไปที่ Frame 7 และใช้คำสั่ง Selection Tool (V) จากนั้นเลื่อนภาพไปข้างขวาเล็กน้อย

ขั้นตอนที่ 17 : แล้วเลือก Frame 8 และเลื่อนภาพกลับไปทางซ้ายเล็กน้อย

ขั้นตอนที่ 18 : เลือก Frame 9 แล้วเลื่อนภาพไปด้านบนเล็กน้อย

ขั้นตอนที่ 19 : สร้าง Layer ใหม่เหนือ Layer image1 ตั้งชื่อว่า Mask ค่ะ

ขั้นตอนที่ 20 : เลือกที่ Frame 1 ของ Layer mask ใช้คำสั่ง Rectangle Tool ( R) และให้ไปกำหนดในสี ในเมนู Tool Panel ให้กำหนด สีของ Stroke ไม่ให้ Active โดยเลือกที่ไอคอนดินสอ จากนั้นในช่องสี่เหลี่ยมเล็กๆ ให้เลือกสีพื้นเป็นสีแดง เพื่อเป็นสีพื้นในการวาดสี่เหลี่ยม หลังจากเลือกเรียบร้อยแล้วก็ให้วาดสี่เหลี่ยมที่ Frame1

ขั้นตอนที่ 21 : เลือกที่ Layer mask และเปลี่ยนเป็น mask โดยการคลิกขวาบน Layer Mask แล้วเลือกคำสั่ง Mask ดูจากภาพตัวอย่าง

ขั้นตอนที่ 22 : สร้าง Layer ใหม่เหนือ Layer mask แล้วตั้งชื่อว่า textline

ขั้นตอนที่ 23 : คลิก Frame 5 ของ Layer text จากนั้นกด F6 key. และในขณะที่เราอยู่ Frame 5 ใช้คำสั่ง Rectangle Tool (R) ใน Color Tool Panel ให้กำหนด Stroke สีเส้น ไม่ใช้ และกำหนดสีพื้นเป็นสี #96E12F แล้ววาดสี่เหลี่ยม Size 150 x 80 px ไปที่ข้างใต้ของรูปที 1 ดูจากภาพตัวอย่างค่ะ

ขั้นตอนที่ 24 : ในขณะที่เลือกสี่เหลี่ยมอยู่ให้กด F8 เพื่อเปลี่ยน Movie Clip ตั้งชื่อว่า TextLine_mc

ขั้นตอนที่ 25 : คลิกที่ Frame 15 กด F6 key

ขั้นตอนที่ 26 : กลับไปที่ Frame 5 ที่ Layer textline กด (Q) เพื่อใช้คำสั่ง Free Transform Tool จากนั้นกด Alt ที่แป้นคีย์บอร์ดค้างไว้แล้วลากสี่เหลี่ยมลงมา

มีต่อ ภาค 2 ค่ะ (ยังไม่จบ) Click here

สอน Flash บทเรียน 15: สร้างเมนู Flash แบบที่ 3 (Advanced drop down flash menu)

2011-06-29T03:14:00.004-07:00

มนต์มีเดีย สวัสดีค่ะ บทเรียนจะเป็นการสอนในเรื่องการทำเมนู
แบบเป็นชั้นๆ โดยมีการใช้ Action Script Code และมีการใช้
เทคนิคพิเศษเล็กน้อยนะคะ บทเรียนนี้คุณจะได้เรียนรู้
    1. วิธีการ Design Drop Down Menu flash
    2. วิธีการเปลี่ยนสีสำหรับ Drop Down เมนู
3. วิธีการสร้าง invisible button
    4. วิธีการใช้ reverse effect
    5. วิธีการประยุกต์ใช้ action script code บนเมนู

ผลงานตัวอย่างสำหรับวันนี้ค่ะ

ขั้นตอนที่ 1 : เปิดโปรแกรม Flash   File--> New--> Flash Document

ขั้นตอนที่ 2 : เลือกคำสั่ง modify --> document ตั้งค่าต่าง ๆ width: 250 px height :250 px background : สีขาว Frame rate : 28 แล้ว Save ตั้งชื่อว่า advancedropdownmenu.fla

ขั้นตอนที่ 3 : กด (R) ไปที่ colors part ของ tool panel และปิดในส่วนของคำสั่ง stroke และเลือกสีของพื้นเป็นสี #161616

หลังจากนั้น คลิ๊กบน corner radius icon และกำหนดให้มุม radius = 4 point ดูภาพประกอบเลยค่ะ

แล้ววาดสี่เหลี่ยมขนาด 80 x 50 px คุณสามารถกด (V) selection tool สำหรับจัดกรอบสี่เหลี่ยมจัดตำแหน่งที่เราต้องการได้ค่ะ

ขั้นตอนที่ 4 : คลิ๊กที่สี่เหลี่ยมที่เราวาด กด F8 (Convert to symbol) เพื่อเปลี่ยนสี่เหลี่ยมให้เป็น movie clip symbol ตั้งชื่อว่า menu

ขั้นตอนที่ 5 : ดับเบิ้ลคลิ๊ก movie clip เข้าไปข้างในซึ่งเรารู้ได้ว่าเราอยู่ข้างในแล้วจากภาพประกอบนี้เลยค่ะ

ขั้นตอนที่ 6 : ขณะนี้รูปสี่เหลี่ยมของเราถูกเลือกอยู่ให้กด F8 (convert to symbol) เปลี่ยนสี่เหลี่ยมให้เป็น button ตั้งชื่อว่า button ดูตามภาพประกอบเลยค่ะ

ขั้นตอนที่ 7 : จากนั้นดับเบิ้ลคลิ๊กที่ Layer 1 เปลี่ยนชื่อเป็น button

ขั้นตอนที่ 8 : จากนั้นคลิ๊ก frame 2 ของ layer button กด f6 ถึงเวลาที่เราจะทำ 3 เมนูย่อยของเราแล้วนะคะ

ขั้นตอนที่ 9 : กด (R) rectangle และไปที่ color part tools ปิดคำสั่ง stroke color และเลือกสีของพื้นเป็นสี #ff9933

ขั้นตอนที่ 10 : จากนั้นวาดสี่เหลี่ยมที่ 1 ลงไป

ขั้นตอนที่ 11 : จากนั้นวาดสี่เหลี่ยมที่เราวาด กด F8 (Convert to symbol) เปลี่ยนสี่เหลี่ยมให้เป็น button ตั้งชื่อว่า sublink

ขั้นตอนที่ 12 : ดับเบิ้ลคลิ๊กเข้าไปใน sublink

ขั้นตอนที่ 13 : คลิ๊กที่คำสั่ง Over กด F6

ขั้นตอนที่ 14 : จากนั้นสี่เหลี่ยมยังคงถูกเลือกอยู่ให้กด F8 (convert to symbol) เปลี่ยนสี่เหลี่ยมให้เป็น movie clip ตั้งชื่อว่า symbol1

ขั้นตอนที่ 15 : ดับเบิ้ลคลิ๊ก Movie Clip Symbol1 เพื่อเข้าไปข้างใน

ขั้นตอนที่ 16 : จากนั้นคลิ๊กที่สี่เหลี่ยม กด F8 (Convert To Symbol) เปลี่ยนสี่เหลี่ยมให้เป็น Movie Clip อีกครั้งตั้งชื่อว่า Symbol2

ขั้นตอนที่ 17 : คลิ๊กที่ Frame 10 กด F6 กด (V) Selection Tool และคลิ๊ก 1 ครั้งบน Movie Clip ที่สร้างมาใหม่จากนั้นกด (Ctrl + F3) เพื่อไป Properties Panel อยู่ข้างใต้ Stage ให้ไปที่คำสั่ง color menu เลือกคำสั่ง tint และเลือกสี #FFFF33

ขั้นตอนที่ 18 : คลิ๊กขวาบริเวณพื้นที่สีเทาระหว่าง Frame 1 กับ Frame 10 เลือกคำสั่ง Create Motion Tween จากนั้นคลิ๊ก Frame 10 กด F6 5 ครั้ง

จากนั้นกลับไป Frame 12,14 กด Delete

ขั้นตอนที่ 19 : สร้างเลเยอร์ใหม่เหนือเลเยอร์ 1 (layer 2) จากนั้นคลิ๊ก Frame 15 กด F6

ขั้นตอนที่ 20 : คลิ๊ก F15 กด (N) Line Tool แล้วกลับไปที่ Properties Panel (Ctrl+F3) จากนั้นกำหนดค่าต่าง ๆ ดังนี้
     1. เลือกสี Stroke #000000
     2. เลือกเส้นแบบ Solid ความหนา 1
     3. แล้วคลิ๊กให้เครื่องหมายถูกทำงานที่คำสั่ง stroke hinting

จากนั้นวาดเส้นที่ส่วนล่างของ button

ขั้นตอนที่ 21 : ถึงเวลาที่ต้องใช้คำสั่ง reverse effect และขณะนั้นเราอยู่ frame 15 กด F6 และจากนั้น กด (E) Eraser Tool และทำการลบเส้นทีละนิดๆ กด F6 1 ครั้ง คลิ๊กลบเส้น 1 ครั้ง จนเส้นหมด

ขั้นตอนที่ 22 : จากนั้นกด (V) Selection Tool และเลือกทุก Frame คลิ๊กขวาเลือกคำสั่ง Reserve Frame

ขั้นตอนที่ 23 : เลือก Frame สุดท้ายของ Layer 2 กด F9 Action Script Panel แล้วพิมพ์คำสั่งนี้ลงไป

ขั้นตอนที่ 24 : กลับไปที่ scene ก่อนหน้า คลิ๊กที่ sublink

ขั้นตอนที่ 25 : คลิ๊กขวาบนคำสั่ง hit แล้วเลือก Insert Frame

ขั้นตอนที่ 26 : กลับไป scene ก่อนหน้า คลิ๊กที่ Menu

ขั้นตอนที่ 27 : กด (V) Selection Tool และคลิ๊กที่ button 1 ครั้ง จากนั้นไปที่ Action Script Panel
หรือกด (Ctrl + F3) แล้วใส่ค่าลงไป

on(release) {
getURL("http://www.mytinyshops.com");
}

ขั้นตอนที่ 28 : จากนั้นกด (V) Selection Tool แล้วกด Alt + Shift key แล้วทำการ copy สี่เหลี่ยมออกมา 2 ครั้ง

ขั้นตอนที่ 29 : ถึงเวลาของการใส่ตัวอักษรแล้วสร้าง Layer ใหม่เหนือ Layer button ตั้งชื่อว่า text

ขั้นตอนที่ 30 : คลิ๊กบน Frame ที่ 1 ของ Layer text กด (A) Text Tool และไปที่ Properties Panel กด (Ctrl + F3) ใต้ Stage จากนั้นทำตามขั้นตอนดังนี้
     1. เลือก Static Text Field
     2. เลือก Font
     3. เลือกขนาด Font 14 px
     4. เลือกสีให้ตัวอักษร
     5. เลือกคำสั่ง anti-alias font readability

ขั้นตอนที่ 31 : คลิ๊ก Frame 2 ของ Layer 2 แล้วกด F6 กด (V) Selection Tool จากนั้นดับเบิ้ลคลิ๊กบน Text และไปที่ Properties Panel (Ctrl+F3) จากนั้นเปลี่ยนสีตัวหนังสือเป็น #CCFF00

ขั้นตอนที่ 32 : กด (V) Selection Tool จากนั้นกด Alt+Shift ทำการคลิ๊ก Copy Text ลากลงมาวางที่ Button ให้ครบทุกอันค่ะ

ขั้นตอนที่ 33 : หลังจากนั้น ดับเบิ้ลคลิ๊กทุกๆ คำใน subbuttons เปลี่ยนสีตัวอักษร เปลี่ยนคำที่เราต้องการลงไปค่ะ เปลี่ยนเป็นสีดำ

ขั้นตอนที่ 34 : สร้าง Layer ใหม่บน Layer text ตั้งชื่อ action

ขั้นตอนที่ 35 : คลิ๊กบน Frame 1 ของ Layer Action กด F9 action script code panel ในคำสั่ง stop();

ขั้นตอนที่ 36 : สร้าง Layer ใหม่บน Layer action จากนั้นใช้เมาส์ลาก Layer ลงมาข้างล่างใต้ Layer Button ตั้งชื่อว่า invisible button

ขั้นตอนที่ 37 : คลิ๊กบน Frame ที่ 2 ของ Layer invisible button แล้วกด F6 Key

ขั้นตอนที่ 38 : ขณะนี้เรายังคงอยู่บน Frame 2 บน Layer invisible button กด (R) Rectangle Tool
จากนั้นไปกำหนด ปิดไม่ใช้ Stroke และสีพื้นเลือกสีอะไรก็ได้ค่ะ แล้ววาดลงไปที่ Stage นะคะ

ขั้นตอนที่ 39 : คลิ๊กเลือกที่สี่เหลี่ยมที่เราเพิ่งวาดนะคะ กด F8 (Convert To Symbol) เปลี่ยนสี่เหลี่ยมให้เป็น Button แล้วตั้งชื่อว่า invisible button

ขั้นตอนที่ 40 : ดับเบิ้ลคลิ๊กเข้าไปในข้างใน invisible button

ขั้นตอนที่ 41 : กด (V) Selection Tool ย้าย Key Frame จาก Up ไปที่ Hit

ขั้นตอนที่ 42 : กลับไปที่ scene ก่อนหน้า

ขั้นตอนที่ 43 : กด (V) Selection Tool และคลิ๊ก 1 ครั้งที่ invisible button ที่ stage จากนั้นกด F9 (Action Script Code Panel) พิมพ์ code ทั้งหมดนี้ลงไป

on (rollOver) {
gotoAndStop(1);
}

ขั้นตอนที่ 44 : กลับไปที่ Frame 1 ของ Layer Button จากนั้นกด (V) Selection Tool แล้วคลิ๊กเลือกที่ button จากนั้นใช้ Code ลงไปที่ action script code panel

on(rollOver) {
restartAll();
gotoAndStop(2);
}

เสร็จแล้วค่ะ กด Ctrl + Run ดูนะคะ สามารถ Download File Master ได้ที่นี่ ค่ะ (เพื่อนำไปตรวจสอบค่ะ)

ขอให้สนุกนะคะ

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

สอน Flash บทเรียน 14: สร้างเมนู Flash แบบที่ 2 (Advance And Modern Flash)

2011-06-15T21:13:00.001-07:00

               มนต์ มีเดีย สวัสดีค่ะ บทเรียนวันนี้ คุณจะได้
               เรียนรู้วิธีการสร้าง Flash Menu แบบทันสมัย
               แล้วมีการใส่ action script code แล้วสามารถ
               นำไปใช้บน website ของเรานะคะ เพื่อเพิ่ม
               ความหรูหรา คุณจะได้เรียนรู้วิธีการ Design
               menu แบบ Modern วิธีการใช้ instance name
               สำหรับ action script code ด้วยค่ะ พร้อมแล้ว
               เราเริ่มกันเลยค่ะ !!!

ตัวอย่างผลงานสำหรับวันนี้

ขั้นตอนที่ 1 : เปิดโปรแกรม Flash กด (Ctrl+J) Properties Document กำหนดความกว้างและสูงของ Flash width = 360 px height = 105 px Background = สีขาว Frame rate = 28 fps. จากนั้นคลิ๊ก OK

ขั้นตอนที่ 2 : กด (N) Line Tool กำหนดที่ Properties Panel (กด Ctrl+F3) ใต้ Stage กำหนดค่าต่างๆ ดังนี้
            1. ใส่สีเส้น Stroke
            2. เลือก Solid 1
    3. เปิด Stroke hinting โดยการคลิ๊กเครื่องหมายถูก ที่หน้าเมนู

จากนั้นวาดเส้นลงไปเหมือนภาพตัวอย่างค่ะ

ขั้นตอนที่ 3 : กด (R) Rectangle Tool ใน colors panel ของTool Panel Block Stroke โดยการคลิ๊กที่รูปไอคอนดินสอเล็ก ๆ แล้วเข้าไปคลิ๊กปิดให้เป็นกากบาทสีแดงในสี่เหลี่ยมเล็กของเส้นค่ะ

และเลือกสีของพื้นสี่เหลี่ยม จากนั้นวาดสี่เหลี่ยมลงไปที่ข้างล่างของทุก Button ขนาด 120 x 4 px ดูตามภาพ

ขั้นตอนที่ 4 : กด (T) Text Tool แล้วไปที่ Properties Panel กด (Ctrl+F3) ใต้ Stage แล้วกำหนดตามรายละเอียดดังนี้
   1. เลือกคำสั่ง Static Text Field
   2. เลือก Font Veranda
   3. Size 16
   4. เลือกสี #333333
   5. เลือกการ Render = Anto_alias for readabity

จากกนั้นพิมพ์คำของ Menu ลงไปค่ะ

ขั้นตอนที่ 5 : หลังจากนั้นเลือกตัวอักษรสองตัวสุดท้าย กำหนดให้ไม่ต้องหนา ค่ะ

ขั้นตอนที่ 6 : กด (V) Selection Tool และคลิ๊กที่ text HOME และสี่เหลี่ยมด้านล่างของกล่อง 1 ครั้งกด F8 (Convert To Symbol) ให้เป็น Movie Clip ตั้งชื่อว่า home_mc

ขั้นตอนที่ 7 : และไปที่ Properties Panel Stage ด้านล่างไปที่เมนู instance name ใส่ชื่อว่า home_mc ตามภาพประกอบค่ะ

ขั้นตอนที่ 8 : ดับเบิ้ลคลิ๊กที่ Movie Clip ของ home_mc กด (V) Selection Tool ตามภาพค่ะ ซึ่งเราจะเข้าไปข้างใน

ขั้นตอนที่ 9 : กด (V) Selection Tool เลือกเฉพาะคำว่า HOME กด (Ctrl+x) Cut Tool สร้าง Layer ใหม่เหนือ Layer 1 แล้วกด (Ctrl + Shift +V) (Past in Place)

ขั้นตอนที่ 10 : กลับไป Layer 1 ดับเบิ้ลคลิ๊กเปลี่ยนชื่อเป็น Rectangle และดับเบิ้ลคลิ๊กที่ Layer 2 เปลี่ยนชื่อเป็น Text

ขั้นตอนที่ 11 : คลิ๊กกลับมาที่ Layer rectangle กด F8 (Convert To Symbol) เป็น Movie Clip ตั้งชื่อว่า rectangle_mc

ขั้นตอนที่ 12 : คลิ๊ก Frame 10 ของ Layer rectangle กด F6 จากนั้นกด Q (Free transform) กด Alt + คลิ๊ก Mouse ลากสี่เหลี่ยมจากจุดดำตรงกลางให้เต็มกรอบ

ขั้นตอนที่ 13 : คลิ๊กขวาบริเวณสีเทาระหว่าง Frame 1 กับ Frame 10 บน Timeline เลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 14 : กด (V) Selection Tool และคลิ๊ก Text Layer กด F8 (Convert To Symbol) Text HOME ให้เป็น Movie Clip ตั้งชื่อว่า text_mc

ขั้นตอนที่ 15 : คลิ๊ก Frame 10 ของ Layer text กด F6 จากนั้นกด (Q) Free Transform แล้วขยายตัวหนังสือให้ใหญ่ขึ้น แล้วขยับ Text HOME ขึ้นไปข้างบน

ขั้นตอนที่ 16 : จากนั้นกด (V) Selection Tool แล้วคลิ๊กที่ตัวหนังสือ 1 ครั้ง ไปที่ Properties Tool กด (Ctrl + F3) ใต้ Stage กำหนด Menu Color เลือกคำสั่ง Tint เลือกสีขาว และใส่ค่า 10% ดูตามภาพประกอบ

ขั้นตอนที่ 17 : คลิ๊กขวาบริเวณสีเทาระหว่าง Frame 1 และ 10 บน Timeline ของ Layer text จากนั้นเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 18 : กลับไปที่ Main Scene (Scene 1)

ขั้นตอนที่ 19 : ดับเบิ้ลคลิ๊กที่ Layer 1 ตั้งชื่อใหม่ว่า menu จากนั้นสร้าง Layer ใหม่บน Layer Menu ตั้งชื่อว่า invisible button

ขั้นตอนที่ 20 : สร้าง invisible button layer และสร้าง invisible button บน Menu HOME

ขั้นตอนที่ 21 : กด (V) Section Tool คลิ๊กเลือกที่ invisible button 1 ครั้ง กด F9 (Action Script Panel) จากนั้นใส่ Code ลงไป

on (rollOver) {
_root.mouse_over_home_mc = true;
}
on (rollOut) {
_root.mouse_over_home_mc = fstartlse;
}
on (release){
getURL("http://www.monmedia.co.th/");
}

ขั้นตอนที่ 22 : สร้าง Layer ใหม่เหนือ Layer invisible button ตั้งชื่อ action

ขั้นตอนที่ 23 : คลิ๊กที่ Frame 1 ของ Layer Action กด F9 (action script panel) ใส่ code ลงไป

_root.home_mc.onEnterFrame = function() {
if (mouse_over_home_mc) {
_root.home_mc.nextFrame();
} else {
_root.home_mc.prevFrame();
}
};

_root.services_mc.onEnterFrame = function() {
if (mouse_over_services_mc) {
_root.services_mc.nextFrame();
} else {
_root.services_mc.prevFrame();
}
};

_root.contact_mc.onEnterFrame = function() {
if (mouse_over_contact_mc) {
_root.contact_mc.nextFrame();
} else {
_root.contact_mc.prevFrame();
}
};

สอน Flash บทเรียน 13: สร้างเมนู Flash แบบที่ 1

2011-06-10T01:46:00.001-07:00

              มนต์ มีเดีย สวัสดีค่ะ บทเรียนวันนี้จะเป็นบทเรียน
    ในการสร้าง Menu Flash สำหรับใครๆ หลายคนที่
              กำลังหาวิธีจัดการ Website ของคุณให้ Menu
             ดูหรูหรา บทเรียนสร้าง Menu Flash สีส้มดำ วันนี้
             คงจะช่วยคุณได้นะคะ   ซึ่งวันนี้ในบทเรียนเราจะได้
             มีการใช้ Action Script ด้วยค่ะ และเราจะได้เรียน
                1. วิธีการ Design Menuในโปรแกรม Flash
                2. วิธีการ Animate
                3. วิธีการใส่ Action Script Menu
             ถ้าเราพร้อมแล้วก็ไปทำกันได้เลยค่ะ !!!

ตัวอย่างผลงานสำหรับวันนี้ค่ะ

ขั้นตอนที่ 1 : เปิดโปรแกรม Flash กด (Ctrl+J) Properties Document กำหนดความกว้างและสูงของ Flash width = 420 px height = 50 px Background = #FFCC00 Frame rate = 28 fps. จากนั้นคลิ๊ก OK

ขั้นตอนที่ 2 : เลือก View --> Rulers เพื่อกำหนดไม้บรรทัดมาใช้เป็นเกณฑ์ในการทำงานของเรานะคะ จากนั้นเลื่อนเส้นที่ไม้บรรทัดในแนวตั้ง เลื่อนมาที่จุดที่ 0 ของไม้บรรทัด ตามภาพประกอบ

ขั้นตอนที่ 3 : กด (N) Line Tool ไปที่ Properties Panel กด (Ctrl+F3) ก็ได้นะคะ ที่ใต้ Stage ปรับค่าต่าง ๆ ตามภาพประกอบค่ะ
1. เลือก Stroke สี #/FF9900
2. กำหนดค่าความหนาของเส้น Stroke = 1

จากนั้นวาดเส้นลงไปที่จุด 140 ของไม้บรรทัด ตามภาพประกอบ

วาดอีกเส้นที่ตำแหน่งจุด 280

ขั้นตอนที่ 4 : กด (A) Text Tool แล้วไปที่ Properties Panel หรือกด (Ctrl + F3) ข้างล่างใต้ Stage
จากนั้นปรับค่าต่างๆ ตามรายละเอียดค่ะ
    1. เลือกตัวอักษร
    2. เลือกลักษณะ Font Century Gothic
    3. เลือกสีของ Font #9999999
    4. เลือกขนาดของ Font = 18
    5. เลือกวิธีการ Render เป็น anti-alias for readability

จากนั้นพิมพ์เลข 01 ที่มุมทางซ้ายของเมนูที่ 1 ตามภาพประกอบค่ะ

ขั้นตอนที่ 5 : กด (A) Selection Tool แล้วเลือก Properties Panel หรือกด (Ctrl+F3) ที่ใต้ Stage ปรับค่าตามรายละเอียดอีกครั้งค่ะ
     1. เลือก Static text field
     2. เลือก Font ตัวหนังสือที่ใช้ Frank ting Gothic Book
     3. เลือกขนาดอง Font 12
     4. เลือกสีขาวเป็นสีของ Font สีขาว
     5. เลือกวิธีการ Render เป็นแบบ Anti-alias for readability

ขั้นตอนที่ 6 : หลังจากนั้นพิมพ์คำว่า HOME หรือคำอื่นที่เราต้องการลงไปนะคะ

แล้วทำตามขั้นตอนเดิมทั้งหมดพิมพ์เลข 02 03 แล้วหัวข้อเมนูของเราลงไปให้ครบทุกเมนูค่ะ

ขั้นตอนที่ 7 : กด (V) Selection Tool แล้วคลิ๊กเลือกที่เลข 01 และคำว่า HOME ให้ถูกเลือกพร้อมกัน

จากนั้นกด F8 (Convert to Symbol) เพื่อเปลี่ยนตัวเลขและตัวหนังสือให้เป็น Movie Clip ตั้งชื่อว่า home_mc

ขั้นตอนที่ 8 : คลิ๊กเลือกที่ movie clip home_mc ที่ Stage แล้วจากนั้นไปที่ Properties Panel หรือกด (Ctrl + F3) ที่ใต้ stage ตรง Menu Instance name ให้ตั้งชื่อว่า home_mc

ขั้นตอนที่ 9 : ดับเบิ้ลคลิ๊กเข้าไปข้างใน home_mc กด (V) Selection Tool

ขั้นตอนที่ 10 : กด (V) Selection Tool จากนั้นเลือกที่ตัวเลข 01 กด (Ctrl+X) Cut Tool แล้วสร้าง Layer ใหม่เหนือ Layer 1 ตั้งชื่อว่า number เลือกที่ Layer number แล้วกด Ctrl+Shift + V (Paste in Place)

ขั้นตอนที่ 11: คลิ๊กที่ Layer 1 เปลี่ยนชื่อ Layer เป็น Text

ขั้นตอนที่ 12 : คลิ๊กที่ตัว text HOME ที่ Stage แล้วกด F8 (Convert To Symbol) เปลี่ยน Text ให้เป็น Movie Clip ตั้งชื่อว่า text1_mc

ขั้นตอนที่ 13 : คลิ๊กที่ Frame 5 และ 10 ของ Layer text กด F6 ขณะนี้เรายังคงคลิ๊กอยู่ที่ Frame 10 กด (V) Selection Tool คลิ๊กที่ Text 1 ครั้ง แล้วไปที่ Properties Panel หรือกด (Ctrl+F3) ที่ใต้ของ Stage แล้วกำหนดที่เมนู Color เลือกคำสั่ง Tint เลือกสีดำแล้วกำหนด 100% ตามภาพประกอบ

ขั้นตอนที่ 14: กลับไปที่ Frame 5 แล้วคลิ๊กที่ Text ย้ายไปข้างขวาด้วยลูกศรบนแป้นคีย์บอร์ด

ขั้นตอนที่ 15 : กด (V) Selection Tool จากนั้นเลือก Layer Number คลิ๊กเลือกที่ตัวเลขบน Stage กด F8 (Convert To Symbol) เปลี่ยนตัวเลขเป็น Movie Clip ตั้งชื่อว่า number01_mc

ขั้นตอนที่ 16 : คลิ๊กที่ Frame 5 และ 10 ของ Layer number กด F6 จากนั้นคลิ๊กเลือก Frame 5 แล้วเลื่อนตัวหนังสือลงมาข้างล่างโดยใช้ลูกศรเลื่อนลงดูตามภาพประกอบนะคะจะได้เข้าใจค่ะ

ขั้นตอนที่ 17: คลิ๊กขวาบนพื้นที่สีเทา ระหว่าง Frame 1 กับ 5 และ Frame 5 กับ 10 บน Layer number เลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 18 : สร้าง Layer ใหม่เหนือ Layer number ตั้งชื่อว่า Rectangle

ขั้นตอนที่ 19 : คลิ๊กบน Frame 8 ของ Layer Rectangle กด F6 จากนั้นกด (R) Rectangle Tool วาดสี่เหลี่ยมขนาด 140 x 6 px ลงไปที่บริเวณส่วนบนของ Menu ดังภาพประกอบค่ะ

สี่เหลี่ยมของเรายังคงถูกเลือกอยู่นะค่ะ ให้กด F8 (Convert To Symbol) เปลี่ยนสี่เหลี่ยมให้เป็น Movie Clip ตั้งชื่อว่า WhiteRectangle_mc ตามภาพประกอบ

ขั้นตอนที่ 20: กด (V) Selection Tool คลิ๊กเลือกที่ Layer Rectangle แล้วย้าย Layer นี้ลงไปอยู่ใต้ Layer Text ตามภาพประกอบค่ะ

ขั้นตอนที่ 21 : คลิ๊กเลือก Frame 13 ของ Layer Rectangle กด F6 หลังจากนั้นกด (Q) Free Transform แล้วกด Alt + คลิ๊กเมาส์ลากจุดสีดำตรงกลางของสี่เหลี่ยมลากลงให้เต็มกรอบเมนูค่ะ

ขั้นตอนที่ 22 : กลับไปที่ Frame 8 กด (V) Selection Tool แล้วคลิ๊กสี่เหลี่ยมสีขาว 1 ครั้ง แล้วไปที่ Properties Panel หรือกด (Ctrl+F3) ที่ใต้ Stage ที่เมนู Color เลือกคำสั่ง Alpha และใส่ 0% ลงไป

ขั้นตอนที่ 23: คลิ๊กขวาบริเวณพื้นที่สีเทาระหว่าง Frame 8 กับ 13 เลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 24 : คลิ๊กเลือก Frame 13 ของ Layer text และ number กด F5

ขั้นตอนที่ 25 : คลิ๊กที่ Scene 1 เพื่อกลับไปออกไปที่ Main Menu

ขั้นตอนที่ 26 : ดับเบิ้ลคลิ๊กที่ Layer 1 เปลี่ยนชื่อเป็น menu จากนั้นสร้าง Layer ใหม่เหนือ Layer Menu ตั้งชื่อว่า invisible button

ขั้นตอนที่ 27 : เลือก Layer invisible button กด(R) Rectangle Tool วาดสี่เหลี่ยมลงไปที่เมนู HOME แล้วกด F8 (Convert To Symbol) เพื่อเปลี่ยนสีเหลี่ยมเป็น Button ตั้งชื่อว่า invisiblebutton จากนั้นดับเบิ้ลคลิ๊กเข้าไปข้างใน แล้วเลื่อนจุดจาก UP ไป ที่ HIT

จากนั้นคลิ๊กที่ scence1 ออกมาที่ main menu จะได้ดังภาพ

ขั้นตอนที่ 28 : กด (V) Selection Tool คลิ๊กที่ invisible button ที่ Stage จากนั้นกด F9 เข้า Action Script Panel แล้วพิมพ์ code ลงไปดังนี้

on (rollOver) {
_root.mouse_over_home_mc = true;
} on (rollOut) {
_root.mouse_over_home_mc = fstartlse;
}
on (release){
getURL("http://www.monmedia.co.th/");
}

ขั้นตอนที่ 29 : หลังจากนั้นเพิ่ม Layer ใหม่เหนือ Layer invisible button ตั้งชื่อว่า action คลิ๊กที่ Frame 1 ของ Layer action แล้วกด F9 เข้าไปที่ Action Script Panel แล้วพิมพ์ code นี้ลงไปค่ะ

_root.home_mc.onEnterFrame = function() {
if (mouse_over_home_mc) {
_root.home_mc.nextFrame();
} else {
_root.home_mc.prevFrame();
}
};

_root.services_mc.onEnterFrame = function() {
if (mouse_over_services_mc) {
_root.services_mc.nextFrame();
} else {
_root.services_mc.prevFrame();
}
};

_root.contactus_mc.onEnterFrame = function() {
if (mouse_over_contactus_mc) {
_root.contactus_mc.nextFrame();
} else {
_root.contactus_mc.prevFrame();
}
};

เมื่อมาถึงขั้นตอนนี้เราได้ทำการเสร็จแล้วนะคะ 1 Menu ถ้าลองรันดู กด (Ctrl+Enter) จะเห็นเลยค่ะ แต่เราต้องให้ครบทุก Menu ก่อนนะคะอย่าลืม ทำตามขั้นตอนตั้งที่ 9 - 29 ใหม่อีกครั้งนะคะ กับทุก Menu ค่ะ

ต้องใจเย็นๆ นิดหนึ่งๆ นะคะเวลาทำเพราะอาจจะทำให้รันไม่ผ่าน แต่ถ้าอย่างไรติดปัญหาอย่างไรก็ฝาก comment ถามไว้ได้เลยนะคะ

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

"ถ้าไม่มีสมาธิ ก็จบ... ข่าว"

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

สอน Flash บทเรียน 12: สร้าง Animation ภาพในอนาคตด้วย Flash

2011-06-07T07:14:00.001-07:00

              มนต์ มีเดีย สวัสดีค่ะ บทเรียนวันนี้จะเป็นการอธิบาย
              วิธีการสร้าง Create Future Photo Animation คือ
              การนำภาพมาทำการเคลื่อนไหวให้ดูเหมือนภาพใน
              อนาคตจะใช้ Trick พิเศษกับการใช้คำสั่ง Mask
และไม่ต้องใช้คำสั่ง Action Script Code ค่ะ
              สำหรับในบทเรียนนี้และ Animation ภาพนี้ เรา
              สามารถใช้ได้กับทุก Website Bannerหรือสำหรับ
การนำเสนอเป็น Presentation และบทเรียนนี้จะ
              ได้เรียนรู้การ animate รูปภาพ การสร้าง Mask
              Layer วิธีการทำ Flash Filters บนรูปภาพ
             การใช้ Selection Tool โดยกด (V) สำหรับ
   ตัดชิ้นงานบางส่วนค่ะ
                    ถ้าพร้อมกันแล้วเราเริ่มกันได้เลยดีกว่านะคะ!!

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

ขั้นตอนที่ 1 : เตรียมภาพสำหรับใช้นำมาเป็น Background ที่เราต้องการหรือสามารถ Download ภาพเหมือนในตัวอย่างได้ ที่นี่

ขั้นตอนที่ 2 : เปิดโปรแกรม Flash จากนั้นกด (Ctrl+J) Document Properties และกำหนดค่าความกว้างและความสูงให้กับ Flash ของเรานะคะ กำหนด width = 450 px height = 315 px   background = สีขาว frame rate = 38 fps แล้วคลิ๊ก Ok

ขั้นตอนที่ 3 : ดับเบิ้ลคลิ๊กที่ Layer 1 ทำการเปลี่ยนชื่อเป็น Background

ขั้นตอนที่ 4 : คลิ๊ก File -> Import --> Import to stage เลือกภาพที่เราเตรียมไว้มาวางใน Library
จากนั้น bg1 มาวางบน Stage

จากนั้นกำหนดตำแหน่งให้ภาพนี้ด้วยการกด (K) Align Properties แล้วทำตามภาพประกอบค่ะ

ขั้นตอนที่ 5 : เลือกภาพบน Stage กด F8 (Convert to symbol) Convert ภาพเป็น movie clip ตั้งชื่อว่า photo_mc

ขั้นตอนที่ 6 : คลิ๊ก Frame 70 บน Layer1 กด F6

ขั้นตอนที่ 7 : กลับไปที่ Frame 1 ของ Layer 1 กด (V) Selection Tool และไปที่ Properties Panel (Ctrl+F3) ใต้ Stage เลือกที่ Tap Filter จากนั้นเลือกหาคำสั่ง Blur แล้วกำหนดค่าตามภาพประกอบค่ะ

ขั้นตอนที่ 8 : คลิ๊กขวาบนพื้นสีเทาบน Timeline ระหว่าง Frame 1 กับ Frame 70 แล้วเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 9 : เลือก Frame 70 กด (Ctrl+C) Copy แล้วสร้าง Layer ใหม่เหนือ Layer Background ตั้งชื่อว่า Photo 1

ขั้นตอนที่ 10 : คลิ๊กเลือก Frame 1 บน Layer Photo1 จากนั้นกด (Ctrl+Shift+V) (Paste In Pace)

ขั้นตอนที่ 11 : คลิ๊ก Frame 70 บน Layer Photo1 กด F6

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

ขั้นตอนที่ 13 : คลิ๊กเลือก Layer mask กด (R) Rectangle Tool จากนั้นวาดสี่เหลี่ยมลงไปทับภาพ
ดูตัวอย่างภาพประกอบค่ะ

ขั้นตอนที่ 14 : คลิ๊ก Frame 25 และ 45 และ 70 และกด F6

ขั้นตอนที่ 15 : คลิ๊กที่ Frame 45 ของ Layer mask แล้วกด (V) Selection Tool แล้วใช้เมาส์ลากไปบนเส้นตรงจากซ้ายไปขวา เพื่อทำ ลายเส้นให้กับภาพ แล้วกด Delete ที่คีย์บอร์ด

แล้วทำแบบเดิมที่ Frame ที่ 25 ด้วยค่ะ

ขั้นตอนที่ 16 : จากนั้นคลิ๊กวาบนพื้นสีเทา ระหว่าง Frame 1 กับ Frame 25 , Frame 25 กับ Frame 45 , Frame 45 กับ Frame 70 บน Timeline แล้วเลือกคำสั่ง Create Shape Tween

ขั้นตอนที่ 17 : คลิ๊กขวาที่ Layer mask แล้วเลือกคำสั่ง mask

เสร็จแล้วค่ะ ลองรันดูนะคะ กด (Ctrl + Enter) เป็นไงบ้างค่ะบทเรียนนี้ง่ายไหม?? ฝากคำถามได้นะคะที่ Comment แล้วจะมาตอบให้ค่ะ

สามารถ Download File Master ได้ ที่นี่ ค่ะ

ความสุขอยู่ที่ใดน๊า คำตอบคือ อยู่ที่ใจค่ะ (ง่ายมากๆๆ) อิ..อิ...

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

สอน Flash บทเรียน 11: สร้างเมนู Flash ด้วย icon

2011-06-06T21:00:00.001-07:00

    มนต์มีเดีย สวัสดีค่ะสำหรับบทเรียนจะสอนคุณสร้างเมนู
    จาก Icon สวยๆ และการใส่ action script code เมนูนี้
    สามารถใช้ได้กับทุก Website และบทเรียนนี้คุณจะได้
    เรียนรู้
       1. วิธีการใช้ instance name
   2. วิธีการ convert icon เป็น button และ movie clip
       3. วิธีการใช้ action script code เพื่อให้มีประสิทธิภาพ

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

ขั้นตอนที่ 1: เปิดโปรแกรม Flash กด (Ctrl+J) Document Properties แล้วตั้งค่าความกว้างและสูงของ Flash width = 300 px height = 100 px frame rate = 30 fps Background = สีขาว (ตามภาพประกอบเลยนะคะ) แล้ว Save Project นี้ ชื่อว่า iconmenu.fla

ขั้นตอนที่ 2 : สร้าง Layer ใหม่ตั้งชื่อว่า Layer icon หลังจากนั้น สร้าง 4 icons ที่เราต้องการใช้เป็นเมนูใน Website ของเรานะคะ หรือจะทำ Download icon สวยๆ จาก Internet มาก็ได้ค่ะ

ขั้นตอนที่ 3 : เลือกรูป icon1 กด F8 ที่แป้นคีย์บอร์ดเพื่อทำการ Convert To Symbol เปลี่ยน icon ของเราเป็น Movie Clip ตั้งชื่อว่า icon1 (ตามภาพประกอบค่ะ)

ขั้นตอนที่ 4 : เลือกที่ Movie Clip icon1 ไปที่ Properties Panel หรือกด (Ctrl+F3) ตรง Bar instance name ให้ใส่ชื่อ icon1 ลงไปด้วยค่ะ

ขั้นตอนที่ 5 : ดับเบิ้ลคลิ๊กบน Movie Clip ของ Stage เราจะเข้าไปอยู่ใน Movie Clip icon1

ขั้นตอนที่ 6 : เลือกเฉพาะส่วนของวงกลม จากนั้นกด (Ctrl+J) Cut Tool เพื่อลบวงกลม และ Copy ไว้ค่ะ

ขั้นตอนที่ 7 : สร้าง Layer ใหม่ บน Layer 1 เป็น Layer 2 กด Ctrl+Shift+V (Paste in Place)

ขั้นตอนที่ 8 : ส่วนของวงกลมของ icon ได้ถูก copy มาวางที่ Layer 2 เรียบร้อยแล้วนะคะ จากนั้นให้เลือกวงกลม แล้วกด F8 (Convert To Symbol) ให้เป็น Movie Clip ตั้งชื่อว่า PartOfIcon1

ขั้นตอนที่ 9 : คลิ๊กที่ Frame 10 ของ Layer 2 แล้วกด F6

ขั้นตอนที่ 10 : กด (Q) Free Transform กด Shift ที่แป้นคีย์บอร์ด แล้วคลิ๊กวงกลมขยายออกเล็กน้อย

ขั้นตอนที่ 11 : คลิ๊กที่ Frame 10 ของ Layer 2 แล้วกด (F9) Action Script Panel แล้วพิมพ์
stop(); ลงไปค่ะ (ตามภาพประกอบ)

ขั้นตอนที่ 12 : คลิ๊ก Frame 1 บน Layer 2 เปิด Properties Panel หรือ กด (Ctrl+F3) เมนู Tween เลือกคำสั่ง Motion แล้วตรงเมนู Rotate เลือกคำสั่ง CW ค่ะ

ขั้นตอนที่ 13 : เลือก Frame 1 ที่ Layer 1 ให้กด F6 ทั้งหมด 10 ครั้ง

ขั้นตอนที่ 14 : คลิ๊ก Frame 2, 4, 6, 8 แล้วกด Delete ที่แป้นคีย์บอร์ดนะคะ เพื่อให้ icon ของเรากระพริบเวลา รันค่ะ (ตามภาพประกอบ)

ขั้นตอนที่ 15 : คลิ๊ก Scene1 เพื่อกลับออกมาที่ Main Scene จากนั้นสร้าง Layer ใหม่บน Layer icon ตั้งชื่อว่า InvisibleButtons

ขั้นตอนที่ 16 : จากนั้นกด (R) Rectangle Tool วาดสี่เหลี่ยมลงไปทับ icon1 แล้วกด F8 (Convert To Symbol) เปลี่ยนสี่เหลี่ยมให้เป็น Button ตั้งชื่อว่า InvisibleButton1

จากนั้นดับเบิ้ลคลิ๊กเข้าไปใน InvisibleButton1 เลื่อนจุดจากตำแหน่ง Up ไปที่ Hit ตามภาพประกอบ

ขั้นตอนที่ 17 : กลับออกมาที่ Main Scene โดยคลิ๊กที่ Scene1

จากนั้นคลิ๊กที่ Button InvisibleButton1 ที่ Stage แล้ว กด F9 (Action Script Panel) พิมพ์ Code นี้ลงไปค่ะ

on (rollOver) {

_root.mouse_over_icon1 = true;
}

on (rollOut) {
_root.mouse_over_icon1 = fstartlse;
}
on (release){
getURL("http://www.monmedia.co.th/", "blank");
}

หรือดูตามภาพประกอบนะคะ

ขั้นตอนที่ 18 : สร้าง Layer ใหม่ เหนือ Layer InvisibleButton ตั้งชื่อว่า action script

แล้วคลิ๊กที่ Frame1 Layer action script กด F9 อีกครั้งค่ะเพื่อเข้าไปที่ Action Script Panel แล้วพิมพ์ Code นี้ลงไปค่ะ

_root.icon1.onEnterFrame = function() {

if (mouse_over_icon1) {
_root.icon1.nextFrame();
} else {
_root.icon1.prevFrame();
}
};

_root.icon2.onEnterFrame = function() {
if (mouse_over_icon2) {
_root.icon2.nextFrame();
} else {
_root.icon2.prevFrame();
}
};

_root.icon3.onEnterFrame = function() {
if (mouse_over_icon3) {
_root.icon3.nextFrame();
} else {
_root.icon3.prevFrame();
}
};

_root.icon4.onEnterFrame = function() {
if (mouse_over_icon4) {
_root.icon4.nextFrame();
} else {
_root.icon4.prevFrame();
}
};

เนื่องจากเรามีทั้งหมด 4 icons นะคะ ก็เลยให้ใส่ไปเลยค่ะ คำสั่งทั้งหมดใน Frame นี้นะคะ

จากนั้นให้ทำทุกขั้นตอนใหม่ตั้งแต่ต้นจนจบค่ะ กับทุก iconค่ะ ในส่วนของขั้นตอนที่ต้องตั้งชื่อ icon เราต้องตั้งชื่อให้สอดคล้องกับ icon นั้นนะคะ รวมทั้งการใส่ script ด้วยค่ะ เดี๋ยวจะรันกันไม่ออกนะคะ

เอาละค่ะ !!! เราเสร็จแล้วนะคะถ้าทำได้ครบ ก็ให้ Run ดูค่ะ กด (Ctrl+Enter) เป็นการรันดูค่ะ

ส่วน File Master Download ได้ ที่นี่ เลยค่ะ

มีความสุขทุกวันกันมากๆๆ นะคะ

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

สอน Flash บทเรียน 10: สร้างเมนูภาพเลื่อนโดย Flash (Scrolling Photo Menu Panel)

2011-06-05T00:02:00.001-07:00

        มนต์มีเดียสวัสดีค่ะ สำหรับบทเรียนวันนี้เป็นบทเรียน
        ขั้น Advance นิดๆๆ นะคะแต่คิดว่าคงสนุกกันค่ะ เป็น
        การนำภาพที่มีหลายภาพมานำเสนอโดยสั่งให้เลื่อน
        ไปเลื่อนมาในพื้นที่ที่จำกัดค่ะ จะทำเป็น Menu เพื่อ
        ทำ Link ก็ได้นะคะ    บทเรียนจะอธิบายวิธีการสร้าง
        ขั้นตอนแรก จนถึงขั้นตอนสุดท้ายเลยค่ะ ต้องค่อยๆ
        ทำตามนะคะ เพราะอาจจะมีผิดพลาดได้ค่ะ อาจจะรัน
        ไม่ผ่าน แต่ถ้าไม่เข้าใจอย่างไรฝาก comment ไว้ได้
        เลยนะคะ จะรีบกลับมาตอบให้ค่ะและบทเรียนนี้จะได้
        เรียนรู้เทคนคิและวิธีการต่าง ๆ ได้แก่ import photo
        ไปยัง Library การ Convert Symbol เป็น Button
        การสร้าง Effect บน Button การ Convert Layer
      เป็น Mask   ว้าวๆๆๆๆๆๆๆ เยอะแยะมากมายเลยค่ะ
        ไปทำกันเลยดีกว่านะคะ

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

ภาพประกอบจาก www.mytinyshops.com

ขั้นตอนที่ 1 : เหนือสิ่งอื่นใดเราก็ต้องมีภาพกันก่อนนะคะ สามารถ Download ภาพได้ ที่นี่ (เป็นภาพเหมือนในตัวอย่างค่ะ เพื่อความสะดวกรวดเร็วในการเรียนนะคะ) หรือสามารถเตรียมภาพเหมือนตัวอย่างได้ที่ Size 140 x 140 px ค่ะ

ขั้นตอนที่ 2 : เปิดโปรแกรท Flash กด (Ctrl+F3) Document Properties กำหนดความกว้างและสูงให้กับ Flash ของเรานะคะ width = 500 px height = 200 px background = สีขาว frame rate = 32 fps แล้ว Save Project ตั้งชื่อว่า scrollingphoto.fla ค่ะ

ขั้นตอนที่ 3 : ดับเบิ้ลคลิ๊กที่ Layer 1 เปลี่ยนชื่อใหม่เป็น action

ขั้นตอนที่ 4 : เลือก File -> Import ->Import to library จากนั้นเลือก file ที่ภาพเราเตรียมไว้ขึ้นมาแสดงใน library

ขั้นตอนที่ 5 : กด (V) Selection Tool ลากภาพ s1 มาวางบน stage จากนั้นกด F8 (Convert Symbol) เปลี่ยนภาพ s1 เป็น button ตั้งชื่อ thumb1 ค่ะ

ขั้นตอนที่ 6 : ดับเบิ้ลคลิ๊กที่ Thumb1 button กด (V) Selection Tool แล้วเราจะเข้าไปอยู่ข้างในของ thumb1 นะคะ ซึ่งสังเกตได้จากภาพประกอบ

ขั้นตอนที่ 7 : เลือกที่ Over แล้วกด F6

ขั้นตอนที่ 8 : สร้าง Layer ใหม่ เหนือ Layer1 จากนั้นเลือกที่ Over อีกครั้ง กด F6 ตามภาพประกอบ

ขั้นตอนที่ 9 : ตอนนี้เรายังอยู่ frame Over นะคะ กด (R) Rectangle Tool และวาดสี่เหลี่ยมรอบรูป thumb1 ของเราค่ะ

ขั้นตอนที่ 10 : จากนั้นคลิ๊กที่ Scene1

จากนั้นให้ Convert ภาพที่เตรียมไว้ที่ Library ให้เป็น Button แล้วกำหนดกรอบให้ด้วย ตามขั้นตอนที่กล่าวมาแล้วค่ะ

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

ขั้นตอนที่ 12 : เลือกที่ Layer panel แล้วคลิ๊กเลือกเมนู Insert ->New Symbol หรือกด (Ctrl+F8) กำหนดให้เป็น Movie Clip ตั้งชื่อว่า panel

ขั้นตอนที่ 13 : จากนั้นดับเบิ้ลคลิ๊กที่ panel ที่ Library เพื่อเข้าไปข้างในของ panel movie clip จากนั้นให้ทำการลากภาพ thumb1 - thumb9 ที่เราได้ Convert ภาพ s1-s9 ไว้แล้วมาวางเรียงต่อกันนะคะ (ตามภาพ)

ขั้นตอนที่ 14 : จากนั้นให้กด (Ctrl+A) Select All แล้วกำหนดค่า width, height , x , y ตามภาพเลยนะคะ

ขั้นตอนที่ 15 : กด (Ctrl+K) Align Panel จากนั้นกำหนดตำแหน่งของ thumb ตามภาพค่ะ

ขั้นตอนที่ 16 : หลังจากกำหนดค่าต่างๆ ใน movie clip แล้ว ให้คลิ๊กกลับไปที่ Scence1 ค่ะ

ขั้นตอนที่ 17 : เลือก Layer panel จาก Library มาวางบน Stage

จะได้การวางภาพ แบบนี้ค่ะ

ขั้นตอนที่ 18 : สร้าง Layer ใหม่เหนือ Layer panel ตั้งชื่อว่า stroke

ขั้นตอนที่ 19 : คลิ๊กเลือก Layer Stroke กด (R) Rectangle Tool แล้ววาดสี่เหลี่ยมขนาด
450 x 150 px วาดไปบน stage ตามภาพประกอบค่ะ

ขั้นตอนที่ 20 : จากนั้นคลิ๊กเลือกเฉพาะสี่เหลี่ยมเฉพาะพื้นที่ที่เป็นสีขาวเท่านั้นนะคะ คลิ๊กขวาเลือกคำสั่ง Distribute to Layers

ขั้นตอนที่ 21 : เปลี่ยนชื่อ Layer 3 เป็นชื่อ mask

ขั้นตอนที่ 22 : เลือก panel movie แล้วไปที่ Properties panel หรือ กด (Ctrl+F3) ไปที่ Instance Name ให้ตั้งชื่อว่า panel ตามรูปค่ะ

ขั้นตอนที่ 23 : จากนั้นคลิ๊กที่ Layer action ที่ Frame 1 กด (F9) actions script panel พิมพ์ code ทั้งนี้ลงไปค่ะ

panel.onRollOver = panelOver;

function panelOver() {

this.onEnterFrame = scrollPanel;

delete this.onRollOver;

}

var b = stroke.getBounds(_root);

function scrollPanel() {

if(_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.yMax) {

this.onRollOver = panelOver;

delete this.onEnterFrame;

}

if(panel._x >= 15) {

panel._x = 15;

}

if(panel._x <= -924) {

panel._x = -924;

}

var xdist = _xmouse - 250;

panel._x += Math.round(-xdist / 7);

}

เสร็จเรียบร้อยทั้งหมดทุกขั้นตอนแล้วนะคะ ค่อยๆ ทำตามขั้นตอนนะคะ เพราะอาจจะพลาดได้ แล้วรันไม่ได้ตามใจเรานะคะ ถ้าท่านใดมีปัญหาก็ comment ถามไว้ได้เลยนะคะ

แล้วสามารถ Download File Master ได้ที่นี่ ค่ะ เพื่อนำไปตรวจสอบความถูกต้องนะคะ

Have a nice day !!! ค่ะ

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

สอน Flash บทเรียน 9: สร้างตัวหนังสือหมุนบนแบนเนอร์ (Rotation Text Banner)

2011-06-03T23:32:00.001-07:00

มนต์ มีเดีย สวัสดีค่ะ สำหรับบทเรียนวันนี้จะเป็นการอธิบายการสร้างตัวหนังสือหมุนบนแบนเนอร์โดยใช้โปรแกรม Flash กันนะคะ ซึ่งไม่ต้องใช้ Action Script Code แต่อย่างใด ซึ่งคุณสามารถใช้ตัวหนังสือหมุนนี้ไปวางบน Banner หรือ Presentation ต่างๆ เพื่อดึงดูดความสนใจจากผู้เข้ามาชม Website ของเราได้นะคะ และในบทเรียนนี้คุณจะได้เรียนรู้วิธีการขยายตัวหนังสือโดยใช้คำสั่ง Free Transform Tool (Q) การเรียนรู้วิธีการ Convert Symbol เป็น Movie Clip และอีกหลายๆ อย่างมากมายค่ะ ถ้าพร้อมแล้วเราเริ่มกันเลยดีกันกว่านะคะ

ตัวอย่างสำหรับบทเรียนวันนี้ค่ะ

ขั้นตอนที่ 1: เปิดโปรแกรม Flash และกด (Ctrl+J) Document Properties กำหนดค่าความกว้างและสูงให้ Flash ของเราก่อนนะคะ width = 430 px height = 148 px frame rate = 34 fps background = สีส้ม ตามภาพประกอบค่ะ

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

ขั้นตอนที่ 3: เลือก Text หรือข้อความที่เราพิมพ์ลงไปบน Stage กด F8 (Convert to Symbol) แล้วเปลี่ยนตัวหนังสือให้เป็น Movie Clip และกำหนดค่า Registration ตามภาพประกอบนะคะ

ขั้นตอนที่ 4: ดับเบิ้ลคลิ๊กที่ Layer 1 แล้วเปลี่ยนชื่อให้เป็น text1

ขั้นตอนที่ 5: คลิ๊ก Frame 10,40 และ 50 แล้วกด F6

จากนั้นคลิ๊กที่ Frame ที่ 50 กด (Q) Free Transform แล้วลากที่มุมด้านบนซ้ายของตัวอักษรขยายให้ใหญ่เต็ม Stage ตามภาพ

ขั้นตอนที่ 6: กด (V) Selection Tool และคลิ๊กที่ text บน Stage1 ครั้ง ที่เราเพิ่งขยายไปนะคะ หลังจากนั้น กด (Ctrl+F3) Properties Panel ไปที่ Menu color เลือกคำสั่ง Alpha ใส่ค่า 0% ลงไป

ขั้นตอนที่ 7: คลิ๊กเลือก Frame 40 แล้วกลับไปอีกครั้งที่ Properties Panel กด (Ctrl+F3) ไปที่ Menu Tween เลือกคำสั่ง motion กำหนด Rotate เป็น CW ตามภาพค่ะ

ขั้นตอนที่ 8: กลับไปที่ Frame 1 แล้วทำตามขั้นตอนที่ 5 , 6 และ 7 ค่ะ

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

ขั้นตอนที่ 10: หลังจากนั้น คลิ๊ก Frame 45 บน Layer text2 กด F6 กด (A) Text Tool อีกครั้ง แล้วพิมพ์ตัวอักษรที่ต้องการลงไปค่ะ

ขั้นตอนที่ 11: คลิํกเลือกที่ตัวหนังสือที่เราเพิ่งจะพิมพ์ลงไปที่ Stage แล้วกด F8 (Convert To Symbol) เปลี่ยนตัวหนังสือของเราให้เป็น Movie Clip ตั้งชื่อว่า text2_mc แล้วกำหนดค่า Registration ตามภาพประกอบ

ขั้นตอนที่ 12: คลิ๊ก Frame 55, 95 และ 105 บน Layer text2 แล้วกด F6

ขั้นตอนที่ 13: คลิ๊ก Frame 105 ทำตามขั้นตอนที่ 5 และ 6

ขั้นตอนที่ 14: คลิ๊ก Frame 95 ทำตามขั้นตอนที่ 7

ขั้นตอนที่ 15: กลับไปที่ Frame 45 ทำตามขั้นตอนที่ 5 , 6 และ 7

เพียงเท่านี้ก็สำเร็จแล้วนะคะ ลองกด Ctrl+ Enter เพื่อรันดูผลรันค่ะ ตัวหนังสือของเราจะหมุนแล้ว

สามารถ Download File Master ได้ ที่นี่ เพื่อใช้สำหรับตรวจสอบความถูกต้องของ Flash นะคะ

Have a nice Day !!

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

สอน Flash บทเรียน 8: สร้าง ฟองสบู่ (Bubble) โปรแกรม Flash

2011-06-02T05:35:00.001-07:00

สวัสดีค่ะสำหรับวันนี้ มนต์ มีเดีย จะขอแนะนำบทเรียนที่น่าสนใจอีกบทเรียนหนึ่งค่ะ นั่นคือการสร้างฟองสบู่ ฟองอากาศ หรือ Bubble นะคะ สำหรับใครที่กำลังอยากได้ไปวางใน Ad หรือ Banner ใน Website หรือว่า Blog สำหรับบทเรียนวันนี้คงมีประโยชน์ไม่น้อยเลยนะคะ ซึ่งในบทเรียนนี้เราจะได้เรียนรู้วิธีการสร้าง วงกลม การผสมสี และการสร้าง Guide Motion งั้นเพื่อเป็นการไม่เสียเวลาเรามาเริ่มกันเลยดีกว่านะคะ

ผลงานตัวอย่างสำหรับวันนี้ค่ะ

ขั้นตอนที่ 1 : เตรียมภาพสำหรับ Background กันไว้ก่อนเลยนะคะ หรือสามารถ Download ที่นี่ เพื่อความสะดวกและรวดเร็วในการเรียน

จากนั้นกด Ctrl + J Document Properties กำหนดค่าความกว้างและสูงให้ Flash ของเรานะคะ width =300 px height = 200 px Background = สีดำ Frame Rage = 28 fps

ขั้นตอนที่ 2 : กด (O) Over Tool ที่ Properties Panel หรือกด (Ctrl + F3) จะเห็นอยู่ข้างล่าง Stage จากนั้น กำหนดค่าต่างๆ ตามขั้นตอนดังต่อไปนี้
                 1. กำหนดค่าสีของ Stroke เป็น #021E3E
                 2. กำหนดค่าสีอะไรก็ได้ที่ Fill Color
                 3. เลือกลักษณะเส้นแบบ Solid และเลือกขนาดเส้นเท่ากับ 1

วาดวงกลมขนาด 20 x 20 px ลงไปบน Stage

ขั้นตอนที่ 3 : กด (V) Selection Tool และเลือกที่สีพื้นเท่านั้นนะคะ ตรง Stroke หรือขอบของวงกลมที่เราวาดไว้ไม่ต้องเลือกค่ะ   จากนั้นเปิด Color Mixer Panel (ถาดผสมสี) ถ้าไม่ Show ก็ไป Set ค่าได้ที่เมนู Window --> Color Mixer และให้ทำตามขั้นตอนดังนี้

             1. คลิ๊กเลือกสีด้านในของวงกลมเท่านั้น
             2. เลือกคำสั่ง Linear
             3. คลิ๊กที่สามเหลี่ยมข้างซ้ายบนบาร์สี และกำหนดสี #FFFFFF กำหนด Alpha Property
                 กำหนดค่า 3%
             4. คลิ๊กที่สามเหลี่ยมข้างขวาบนบาร์สี และกำหนดสี #0066cc แต่กำหนด Alpha Property
                 กำหนดค่า 0% (Completely Transparent)

และขณะนี้ภาพที่ Stage เป็นดังนี้ค่ะ (ดูภาพประกอบตามเลยนะคะ)

ขั้นตอนที่ 4 : ใช้เครื่องมือวาดภาพในโปรแกรม Flash วาดเงาให้วงกลมหรือฟองสบู่ของเรานะคะ

ขั้นตอนที่ 5 : กด F8 (Convert Symbol) กำหนดวงกลมของเราให้เป็น Graphic Symbol ตั้งชื่อว่า bubble_gd

ขั้นตอนที่ 6 : ดับเบิ้ลคลิ๊กที่ Layer 1 เพื่อเปลี่ยนชื่อให้เป็น bubble

ขั้นตอนที่ 7 : คลิ๊กเลือกที่ Layer bubble คลิ๊กขวาเลือกคำสั่ง Add Motion Guide

ขั้นตอนที่ 8 : จากนั้นคลิ๊กเลือกที่ Layer Guide แล้วกด (Y) Pencil Tool และวาดเส้นเป็นไกด์ให้ bubble หรือฟองสบู่ ตามภาพประกอบ

ขั้นตอนที่ 9 : ไปที่ Frame 150 ของ Layer Guide และกด F5

ขั้นตอนที่ 10 : กลับไปที่ Frame 1 ของ Layer bubble แล้วคลิ๊กที่ bubble ที่ Stage ลากไปวางบนจุดเริ่มต้นของเส้น Guide Line (ดูตามภาพประกอบค่ะ)

ขั้นตอนที่ 11 : คลิ๊ก Frame 150 ของ Layer bubble แล้วกด F6 จากนั้นเลื่อน bubble ไปวางที่ตำแหน่งบนสุดของเส้น Guide Line (ดูตามภาพประกอบ)

ขั้นตอนที่ 12 : คลิ๊กขวาบริเวณพื้นที่สีเทาระหว่าง Frame 1 และ Frame 150 บน Timeline เลือกคำสั่ง Create Motion Tween (ดูตามภาพประกอบ)

ถึงขั้นตอนนี้ ฟองสบู่ของเราก็ทำงานแล้วนะคะ ยังไงก็สามารถ กด Ctrl+Enter เพื่่อลองรันดูก่อนได้นะคะ

ขั้นตอนที่ 13 : เพิ่ม Layer ใหม่เอาไว้ใต้ Layer bubble ตั้งชื่อว่า background แล้วเลือก File --> Import -> Import Library (Ctrl+R) เลือกภาพที่เรา Download มาแสดงใน Library แล้วลากจาก Library มาวางบน Stage กำหนด Align ให้อยู่ตรงกลางของ Stage จากนั้น ให้ทำสร้าง Layer ใหม่แล้วเลือก bubble จาก library มาทำตามขั้นตอนทั้งหมดหลาย bubble นะคะ

เป็นอย่างไรกันบ้างค่ะ ไม่ยากเลยใช่ไหมค่ะถ้าถึงขั้นตอนนี้

Ctrl+Enter ลองรันดูค่ะ สวยหรือเปล่า

สามารถ Download File Master ได้ ที่นี่ เพื่อใช้ในการตรวจสอบความถูกต้องในการจัดทำค่ะ

ธรรมะสวัสดีค่ะ

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

หน้าแรก

2011-06-01T23:54:00.000-07:00

การโพสต์นี้เป็นการยืนยันความเป็นเจ้าของไซต์ของฉันและไซต์นี้เป็นไปตามนโยบายโปรแกรมของ Google AdSense และข้อกำหนดในการให้บริการ ca-pub-2475982722254560

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

2011-06-01T05:06:00.001-07:00

มนต์ มีเดีย สวัสดีค่ะ สำหรับบทเรียนในวันนี้ จะเป็นการสร้าง 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 ลั่นล๊าๆๆๆ ค่ะ

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

สอน Flash บทเรียน 6: สร้าง Banner นำเสนอภาพ 5 (Full Flash Banner)

2011-05-31T01:27:00.002-07:00

บทเรียนนี้ก็เป็นอีกบทเรียนหนึ่งที่สามารถสร้าง Banner โดยไม่ต้องใช้คำสั่ง Action Script ในการสร้างค่ะ และบทเรียนนี้จะได้เรียนรู้การจัดเรียงรูปภาพกับ Back gourd ได้เรียนรู้วิธีการใช้ Free Transform Tool นั่นคือการกด (Q) ที่แป้นคีย์บอร์ดนั่นเอง และการเปลี่ยน Layer ให้เป็น Layer Mask วิธีง่ายๆ แค่นี้ ก็จะได้ Banner เก๋ๆๆ ไปวางบน Website ของเราแล้วค่ะ

มนต์ มีเดีย ขอให้ทุกท่านมีความสนุกนะคะ

ตัวอย่างผลงานบทเรียนวันนี้ค่ะ

ภาพประกอบจาก www.monmedia.co.th

ขั้นตอนที่ 1 : เตรียมภาพสำหรับการทำ Banner หรือสามารถ Download ที่นี่ (เพื่อความสะดวกและรวดเร็วในการจัดทำค่ะ)

ขั้นตอนที่ 2 : เปิดโปรแกรม Flash ขึ้นมา กด (Ctrl+J) Document Properties กำหนดกว้างและสูงให้ Banner ของเราค่ะ width = 430 px height = 180 px frame rate =22 fps background = สีขาว

ขั้นตอนที่ 3 : ดับเบิ้ลคลิ๊ก Layer 1 เปลี่ยนชื่อเป็น image1

ขั้นตอนที่ 4 : เลือก File --> Import --> Import Library (Ctrl+R) เลือกภาพจากที่เก็บมาที่ Library จากนั้นเลือก img1 มาวางบน stage และกำหนดกึ่งกลางให้กับภาพ

ขั้นตอนที่ 5 : คลิ๊ก Frame 80 ของ Layer image1 กด F5

ขั้นตอนที่ 6 : เพิ่ม Layer ใหม่ ตั้งชื่อ Line 1 แล้ววาดสี่เหลี่ยมขนาด กว้าง 10px สูง 20px ลงไปบนภาพ แล้วให้จัด Align ให้อยู่ตรงกลางข้างขวา ตามภาพตัวอย่างค่ะ

กด (R) Rectangle Tool กำหนด Stroke ให้ไม่มีหรือไม่ทำงาน เลือกสีพื้นอะไรก็ได้ตามใจชอบ

แล้ววาดสี่เหลี่ยมขนาด กว้าง 10px สูง 20px ลงไปบนภาพ แล้วให้จัด Align ให้อยู่ตรงกลางข้างขวา ตามภาพตัวอย่างค่ะ

ขั้นตอนที่ 7 : คลิ๊กบน Frame 10 กด F6 บน Layer Line 1 แล้วกด (Q) แล้วลากสี่เหลี่ยมไปด้านหน้าตามภาพประกอบค่ะ

ขั้นตอนที่ 8 : คลิ๊ก Frame 20 และกด F6 จากนั้น กด (Q) และลากสี่เหลี่ยม

ขั้นตอนที่ 9 : คลิ๊ก Frame 1 บน Layer Line1 และ Frame 10 แล้วไปกำหนดค่าที่ Properties Panel ที่เมนู Tween เลือก Shape

ขั้นตอนที่ 10 : คลิ๊กที่ Layer Line1 และคลิ๊กขวาเลือกคำสั่ง mask

ขั้นตอนที่ 11 : เลือก Layer Line1 และสร้าง Layer ใหม่ ตั้งชื่อว่า image2

ขั้นตอนที่ 12 : คลิ๊ก Frame 60 กด F6 แล้วกด (Ctrl+R) Rectangel Tool แล้วเลือก img2 มาวางบน Stage

ขั้นตอนที่ 13 : คลิ๊ก Frame 160 ของ Layer imgae2 แล้วกด F5

ขั้นตอนที่ 14 : สร้าง Layer ใหม่ตั้งชื่อว่า Line2 และทำตามขั้นตอน 6-10 แต่การ animation สี่เหลี่ยมนั้นให้ย้ายไปมา อาจจะเริ่มต้นจากบนซ้าย หรือล่างซ้าย ตามภาพประกอบ

ขั้นตอนที่ 15 : จากนั้นให้ทำภาพให้ครบตามขั้นตอนทั้งหมดแล้วกด Ctrl+Enter เพื่อ Run ดูผลงานของ Flash ที่สร้างไว้ค่ะ

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

Have a nice day !

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

สอน Flash บทเรียน 5: สร้าง Banner นำเสนอภาพ 4 (Flash Simple Photo Effect)

2011-05-29T22:04:00.001-07:00

สวัสดีค่ะ ในบทเรียนนี้จะเป็นบทเรียนที่ มนต์ มีเดีย จะแนะนำวิธีการสร้าง Banner Presentation บน Flash site อีกวิธีหนึ่งที่ไม่ต้องเขียน Action Script นะคะ วิธีง่ายแบบนี้ไม่ลองทำไปใช้บน Website ของคุณได้ไง จริงมะ...

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

ภาพประกอบจาก www.mytinyshops.com

มาเริ่มกันเลยดีกว่าค่ะ ^O^

ขั้นตอนที่ 1: เตรียมภาพตามขนาดที่เราต้องการจะนำไปใช้ใน Website นะคะ หรือสามารถ Download File ที่เหมือนใน Blog นี้ได้จาก ที่นี่ เพื่อความรวดเร็วในการเรียนค่ะ

ขั้นตอนที่ 2: เปิดโปรแกรม Flash ขึ้นมา กด (Ctrl+J) Document Properties กำหนดกว้างและสูงให้ Banner ของเราค่ะ width = 600 px height = 90 px frame rate =20 fps background = สีเหลือง

ขั้นตอนที่ 3 : เลือก File --> Import --> Import to library เลือกภาพที่เรา Save ไว้ โดยการกด Ctrl+Click Mouse เลือกภาพทั้งหมดให้เข้ามาที่ Library

ขั้นตอนที่ 4 : เลือกภาพ img1 มาวางบน Stage

ขั้นตอนที่ 5 : กด F8 เพื่อ Convert ภาพเป็น Movie Clip ตั้งชื่อว่า image1

ขั้นตอนที่ 6 : กำหนดตำแหน่งภาพให้อยู่ตรงกลางของ Stage โดยกด Ctrl+K คำสั่ง Align แล้วกำหนดตามภาพประกอบเลยค่ะ

ขั้นตอนที่ 7 : ดับเบิ้ลคลิ๊ก Layer 1 เพื่อเปลี่ยนชื่อเป็น image1

ขั้นตอนที่ 8 : คลิ๊ก Frame 20 ของ Layer image1 กด F5

ขั้นตอนที่ 9 : เพิ่ม Layer ใหม่บน Layer image1 แล้วตั้งชื่อว่า mask

ขั้นตอนที่ 10 : กด (R) Rectangle Tool สร้างสี่เหลี่ยมขนาด กว้าง 600px สูง 2 px ไม่มีขอบ เลือกสีอะไรก็ได้นะคะตามใจชอบแต่ในตัวอย่างเลือกสีขาวค่ะ วาดไปตรงกลางของภาพนะคะ ซึ่งการกำหนดคำสั่งสี่เหลี่ยมดูได้จากภาพประกอบ แล้วในส่วนของการจัดกึ่งกลางของภาพสามารถทำตามขั้นตอนที่ 6 ได้ค่ะ

ขั้นตอนที่ 11 : กด F8 เพื่อ Convert สี่เหลี่ยมที่เราสร้างให้เป็น Movie Clip และตั้งชื่อว่า retangle1_mc

ขั้นตอนที่ 12 : คลิ๊ก Frameที่ 20 ของ Layer mask กด F6

ขั้นตอนที่ 13 : คลิ๊กเลือกที่สี่เหลี่ยม กด (Q) Free Transform Tool จากนั้นค่อยๆ ขยายสี่เหลี่ยมโดยการคลิกที่ปุ่มสี่ดำตรงกลางของสี่เหลี่ยมลากให้สี่เหลี่ยมมีขนาดใหญ่เต็มของภาพค่ะ

ขั้นตอนที่ 14 : กลับไป Frame 1 ของ Layer mask กด Ctrl+F3 Properties Panel ที่เมนู Tween ให้เลือกคำสั่ง Motion และเมนู Ease ให้พิมพ์ -100 ลงไปค่ะ

ขั้นตอนที่ 15 : เลือก Layer mask แล้วคลิ๊กขวาเลือกคำสั่ง mask

ขั้นตอนที่ 16 : กลับมาที่ Layer image1 ก่อนนะคะ คลิ๊กที่ Frame 45 แล้วกด F5 อีกครั้งค่ะ เพื่อเลื่อนเวลาของ Timeline ให้แสดงนานขึ้นค่ะ

ขั้นตอนที่ 17 : สร้าง Layer ใหม่เหนือ Layer mask ตั้งชื่อว่า image2

ขั้นตอนที่ 18 : เลือก Frame 46 กด F6 เลือกภาพ img2 จาก Library มาวางบน Stage

ขั้นตอนที่ 19 : กด F8 เพื่อ Convert เป็น Movie Clip ตั้งชื่อ image2

ขั้นตอนที่ 20 : เลือก Frame 60 กด F5

ขั้นตอนที่ 21 : เพิ่ม Layer image2 ตั้งชื่อ mask เลือก Frame 45 กด F6

ขั้นตอนที่ 22 : จากนั้นให้ทำตามขั้นตอนที่ 10-16 ค่ะ เพียงแต่เปลี่ยนชื่อ เปลี่ยน Frame ให้เหมาะสมนะคะ

ขั้นตอนที่ 23 : ขณะนี้เราได้ทำ Animate 2 ภาพเรียบร้อยแล้ว ให้ทำต่อไปจนครบทุกภาพที่เราเตรียมไว้ตามขั้นตอนทั้งหมดนะคะ

ขั้นตอนที่ 24 : กด Ctrl + Enter เพื่อรันดู Banner Presentation สวยๆ ของเราค่ะ

และสามารถ Download File Master ได้ ที่นี่ เพื่อตรวจสอบความถูกต้องของชิ้นงานค่ะ

เท่านี้ก็เรียบร้อยแล้วค่ะ ขอให้มีความสุขกันมากๆ นะคะ

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

สอน Flash บทเรียน 4: สร้าง Banner นำเสนอภาพ 3 (Flash Photo Gallery)

2011-05-29T01:48:00.002-07:00

สำหรับบทเรียนนี้ มนต์ มีเดีย ขอนำเสนอการสร้าง Banner นำเสนอภาพแบบไม่ต้องเขียน Action Script และสำหรับบทเรียนจะได้เรียนรู้วิธีการ Import Picture เข้ามาใน Flash และวิธีการ Convert ภาพ เป็น Movie Clip เรียนรู้การใช้ Blur Filter ลองทำตามกันดูนะคะ ก็เป็นอีกวิธีหนึ่งที่ง่ายๆ ไม่ยากอะไรเลยค่ะ

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

การบูรผลไม้

ภาพประกอบจาก www.mytinyshops.com

ขั้นตอนที่ 1 : เปิดโปรแกรม Flash ขึ้นมา กด (Ctrl+J) Document Properties กำหนดกว้างและสูงให้ Banner ของเราค่ะ width = 300 px height = 225 px frame rate =30 fps background = สีขาว

ขั้นตอนที่ 2 : สามารถ Download File ที่นี่ (ภาพเหมือนในตัวอย่างค่ะ) เพื่อความสะดวกและรวดเร็วในการเรียนค่ะ

ขั้นตอนที่ 3 : เลือก File --> Import --> Import to library

จากนั้นเลือกภาพ img1 ลากมาวางบน stage

ขั้นตอนที่ 4 : ภาพ img1 ถูกเลือกอยู่ที่ stage กด (Ctrl+K) และคลิ๊กกำหนดภาพ img1 เพื่อกำหนดตำแหน่งตามภาพค่ะ

ขั้นตอนที่ 5 : กด F8 เพื่อ Convert ภาพเป็น Movie Clip และตั้งชื่อว่า image1

ขั้นตอนที่ 6 : คลิ๊ก Frame 10 ของ Layer 1 กด F6 แล้วคลิ๊กกลับไป Frame 1 และ กด (Q) Free Transform และย่อภาพลงให้เล็กไปกลางจอ Stage

ขั้นตอนที่ 7 : ขณะนี้ภาพ image1 ยังคงถูกเลือกอยู่ กด (Ctrl + F3) Properties Panel คลิ๊กเลือก Filter แล้วคลิ๊กเลือกเครื่องหมาย + เลือกคำสั่ง Blur และกำหนดค่าความเบลอตามภาพ

ขั้นตอนที่ 8 : คลิ๊กบน Frame 1 และ กด Ctrl + F3 ตรงเมนู Tween ให้เลือกคำสั่ง Motion

จากนั้นคลิ๊กบน Frame 30 แล้วกด F6

ขั้นตอนที่ 9 : คลิ๊ก Frame 45 และกด F6 จากนั้นกด (Q) Free Transform และย่อภาพให้เล็กลง เหมือนกับภาพที่เราทำไว้ในขั้นตอนที่ 6 ไงค่ะ

ขั้นตอนที่ 10 : คลิ๊ก Frame 30 และเลือกพื้นที่สีเทาคลิ๊กขวาเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 11 : เพิ่ม Layer ใหม่ คลิ๊ก Frame 30 แล้วกด F6

จากนั้นเลือกภาพ img2 มาวางบน Stage แล้วทำตามขั้นตอนที่ 4 ( กำหนดตำแหน่งภาพ )

แล้วกด F8 Covert เป็น Movie Clip ตั้งชื่อ image2

ขั้นตอนที่ 12 : คลิ๊ก Frame 40 กด F6

ขั้นตอนที่ 13 : คลิ๊กที่ Frame 30 แล้วให้ทำตามขั้นตอน 6 และ 7 ค่ะ

ขั้นตอนที่ 14 : จากนั้นให้คลิ๊กขวาบน Timeline ระหว่าง Frame 30 กับ Frame 40 แล้วเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 15 : จากนั้นคลิ๊ก Frame 60 กด F6

ตอนนี้เราทำ animate ภาพเสร็จ 2 ภาพแล้วนะคะ ให้ทำตามขั้นตอนกับภาพทั้งหมดที่เราเตรียมไว้ หลังจากเสร็จแล้วให้กด Ctrl + Enter เพื่อรัน Banner ของเราค่ะ เพียงเท่านี้เราก็ได้ Banner อีก Style กับสินค้าสวยๆ ของเราแล้วนะคะ

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

ขอให้มีความสุขกันถ้วนหน้าทุกท่านค่ะ

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

สอน Flash บทเรียน 3: สร้าง Banner นำเสนอภาพ 2 (Attactive Banner)

2011-05-28T04:10:00.001-07:00

สวัสดีตอนเย็นของวันเสาร์ ที่ 28/5/2554 นะคะ วันนี้เขียน Blog ช้าไปหน่อยค่ะ มัวแต่ไป Shopping แล้วก็กลับทำงานบ้านนิดหน่อยค่ะ แต่ไม่เป็นไรนะคะยังไง มนต์ มีเดีย มีบทเรียนดีๆและง่ายๆ มานำเสนอ ให้ลองได้ทำกันค่ะ ซึ่งวันนี้จะขอแนะนำวิธีการทำ Banner นำเสนอภาพอีกรูปหนึ่งที่ดู หรู หรา ไม่เบาเลยทีเดียวนะค่ะ สำหรับใครที่กำลังหาไอเดีย เอาไปทำ Banner เพื่อไปใช้ใน Website ของตัวเอง อาจจะเป็น Flash Banner หรือ Flash Header สวยๆ ก็ได้เลยนะคะ เอาละเรามาเริ่มกันเลยดีกว่าอย่ารอช้า...

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

ภาพประกอบจาก www.alldecorate.com

ขั้นตอนที่ 1: ก่อนอื่นเลยก็ต้องเตรียมภาพสวยๆ ของเราก่อนนะคะ เพื่อจะนำมาทำ Animate หรือสามารถ Download ภาพที่นี่ เป็นภาพที่เหมือนในบทเรียนนี้ค่ะ เพื่อความสะดวกและรวดเร็วค่ะ

ขั้นตอนที่ 2: เปิดโปรแกรม Flash แล้ว กด (Ctrl+J) Document Properties เพื่อกำหนดค่า ความกว้าง สูง และ Frame Rate (ความช้าเร็วของ Banner ของเรากันก่อนนะคะ) width = 400 px height = 200 px background = สีขาว frame rate = 36 (ดูตามภาพประกอบ) จากนั้น Save Project ตั้งชื่อ attactivebanner.fla

ขั้นตอนที่ 3 : เลือก File -> Import --> Import Library เป็นการเลือกภาพที่เราเตรียมไว้จากที่เก็บภาพ แล้วเลือกภาพทั้งหมด โดยการกด Shift + Click เพื่อเลือกภาพทั้งหมด แล้วคลิ๊ก Open เท่านี้ภาพก็จะมาปรากฏที่ Library แล้วค่ะ หรือถ้าใคร Library ไม่แสดงให้กด Crtl+L นะคะ

ขั้นตอนที่ 4 : กด (V) Selection Tool ลากภาพ img 1 จาก Library มาวางบน Stage

ขั้นตอนที่ 5 : คลิ๊กที่ภาพ img 1 บน Stage คลิ๊กจัดตำแหน่งรูปภาพให้วางพอดีกับ Stage ตามรูป

จากนั้น กด Ctrl + B (Break Apart)

ขั้นตอนที่ 6 : ดับเบิ้ลคลิ๊กที่ Layer 1 เปลี่ยนชื่อ Layer เป็น image1

ขั้นตอนที่ 7 : เลือก Frame 2 บน Layer image1 แล้ว กด F6

ขั้นตอนที่ 8 : กด (E) Eraser Tool เลือกยางลบ และเลือกหัวยางลบเป็นรูป วงกลมขนาดใหญ่สุดค่ะ

ขั้นตอนที่ 9 : จากนั้นเริ่มลบภาพ โดยเริ่มจากมุมบนซ้าย ดูได้ตามภาพประกอบนะคะ

ขั้นตอนที่ 10 : กด F6 ที่แป้นคีย์บอร์ดอีกครั้งหนึ่ง ที่ Frame 3 บน Layer image1

แล้วลบภาพให้มากขึ้นกว่าเดิม ขั้นตอนนี้อาจจะต้องใช้ศิลปะในการลบสักหน่อยนะคะ เพื่อจะได้ Flash Banner สวย ๆ (ดูตามภาพประกอบค่ะ) หลังจากนั้นให้กด F6 แล้วลบภาพไปจนหมดภาพนะคะ

ขั้นตอนที่ 11 : หลังจากลบภาพหมดแล้ว กด (V) Selection Tool แล้วเลือก Frame ทั้งหมดบน Timeline ของ Layer image1 แล้วคลิกขวา เลือกคำสั่ง Reverse Frame ค่ะ (ดูตามภาพประกอบ)

ขั้นตอนที่ 12: คลิ๊ก Frame 80 ของ Layer image1 และกด F5 จะได้ดังภาพ

ขั้นตอนที่ 13: คลิ๊กปุ่ม Lock Layer image1 แล้วสร้าง Layer ใหม่เหนือ Layer image1 ตั้งชื่อว่า image2

ขั้นตอนที่ 14: คลิ๊ก Frame ที่ 60 บน Layer image2 แล้วกด F6 จากนั้นกด (V) Selection Tool และลาก img2 จาก Library มาวางบน Stage

ขั้นตอนที่ 15: คลิ๊กเลือก img2 บน Stage แล้วกด Ctrl+B (Break Apart) กับภาพนี้ เหมือนขั้นตอนที่ทำกับภาพที่ img1 ค่ะ

ขั้นตอนที่ 16: ทำตามขั้นตอนที่ 8 , 9 , 10 และ 11 ค่ะ

ขั้นตอนที่ 17: จากนั้นทำทุกภาพที่เตรียมให้ครบ ตามขั้นตอนนะคะ

ขั้นตอนที่ 18: ขั้นตอนสุดท้ายให้กด Ctrl + Enter เพื่อ Run ดู Banner ที่เราได้สร้างไว้นะคะ

สามารถ Download File Master สำหรับตรวจดูความถูกต้องได้ ที่นี่ ค่ะ

หวังว่าทุกท่านคงได้ Flash Banner สวยๆ ไปวางบน Website หรูๆ แล้วนะคะ ถ้าท่านใดมีคำถาม หรือข้อสงสัยอะไร Log in แล้ว ฝาก Comment ไว้ได้เลยคะ หรือถ้า Blog มีอะไรผิดพลาด แจ้งได้เลยนะคะที่ Comment

มนต์ มีเดีย ขอบคุณทุกท่านที่ติดตาม Blog ของเรานะคะ

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

สอน Flash บทเรียน 2: สอนสร้าง Banner นำเสนอภาพ 1 Presentation Banner

2011-05-26T20:58:00.001-07:00

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

ตัวอย่าง Flash Banner ที่สำเร็จแล้ว (ขออนุญาติใช้ภาพสินค้าของตัวเองนะคะ อิอิ. ทำเองกันกะมือโปรโมทนิสสหนึ่งค่ะ)

ภาพประกอบจาก http://www.mytinyshops.com/

ขั้นตอนที่ 1: ก่อนอื่นเลยก็ต้องเตรียมภาพสำหรับที่จะทำ Banner กันก่อนนะคะ จะใช้ Size อะไรก็ปรับตามความเหมาะสมของขนาด Banner ที่จะใช้ได้ค่ะ หรือถ้าความรวดเร็วในการทดลองเรียนบทเรียนนี้ ก็ Download ที่นี่ ได้เลยค่ะ (ภาพเหมือนในตัวอย่างนะคะ)

ขั้นตอนที่ 2: ต้องเปิดโปรแกรม Flash ขึ้นมาก่อนนะคะ จากนั้นกด Ctrl + J (Document Properties) เพื่อกำหนดความกว้างและความสูงของ Banner ของเรานะคะ กว้าง = 240 px สูง = 361 px Frame rate = 32 Backgroud color = สีขาว (ตามรูปเลยค่ะ)

ขั้นตอนที่ 3: เลือก File --> Import --> Import to Library (เป็นการเลือกภาพเข้ามาใน Library) ให้เลือกภาพที่จาก file ที่เราเตรียมไว้หรือที่ Download มานะคะ (img1,img2,...) แล้วกด OK

ขั้นตอนที่ 4: กด (V) Selection Tool และลากภาพที่ 1 จาก Library ภาพ img1 มาวางบน Stage

ขั้นตอนที่ 5: ขณะภาพ img1 ยังคงถูกเลือกหรือ Select อยู่ ให้กด Ctrl+K และทำตามขั้นตอนดังนี้

1. คลิ๊กที่ Align/Distribute ให้เปิดทำงาน

2. คลิ๊กที่ Align/horizontal Center ให้เปิดทำงาน

3. คลิ๊กที่ Align/Vertical ให้เปิดทำงาน

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

ขั้นตอนที่ 6: ภาพที่ 1 ก็ยังคงถูกเลือกอยู่ กด F8 (Covert to Symbol) เพื่อเปลี่ยนภาพให้เป็น Movie Clip และตั้งชื่อ Movie Clip ว่า Photo1_mc

ขั้นตอนที่ 7: ดับเบิ้ลคลิ๊กเปลี่ยนชื่อที่ Layer 1 เป็น image1

ขั้นตอนที่ 8: คลิ๊ก Frame 40 ของ Layer image 1 กด F6

ขั้นตอนที่ 9: สร้าง Layer ใหม่เหนือ Layer image1 ตั้งชื่อว่า image2

ขั้นตอนที่ 10: คลิ๊กเลือก Frame 20 ของ Layer image2 จากนั้นกด F6 แล้วเลือกภาพ img2 จาก Library มาวางที่ Stage แล้วให้ทำตามขั้นตอนที่ 5 และ 6

ขั้นตอนที่ 11: คลิ๊ก Frame 40,80 แล้วกด F6 ของ Layer image2 แล้วให้กลับไปคลิ๊กที่ Frame 20 กด (V) Selection Tool แล้วคลิ๊ก 1 ครั้งที่ภาพ image2 ที่ Stage หลังจากนั้นกด (Ctrl+F3) Properties Panel ใต้ Stage ด้านขวาจะเห็น Color Menu ให้เลือกคำสั่ง Alpha และกำหนด 0%

ขั้นตอนที่ 12: จากนั้นคลิกขวาบริเวณไหนก็ได้บนพื้นเทาระหว่าง Frame ที่ 20 และ 40 บน Time line และเลือกคำสั่ง Create Motion Tween

ขั้นตอนที่ 13: สร้าง Layer ใหม่ เหนือ Layer image 2 ตั้งชื่อว่า image3

ขั้นตอนที่ 14: คลิ๊ก Frame 60 กด F6 จากนั้นลากภาพ img3 จาก Library มาวางบน Stage แล้วทำตามขั้นตอนที่ 5 และ 6 แล้วให้ไปที่ Frame 80,120 กด F6

ขั้นตอนที่ 15: คลิ๊ก Frame 60 แล้วทำตามขั้นตอนที่ 11

ขั้นตอนที่ 16: คลิ๊กขวาระหว่าง Frame 60 และ 80 เลือก Create Motion Tween

ขั้นตอนที่ 17: ให้ทำตามขั้นตอนกับภาพที่เหลือให้ครบทั้ง 5 ภาพที่เตรียมไว้

ขั้นตอนที่ 18: เมื่อทำภาพสุดท้ายเสร็จแล้ว กลับไปคลิ๊กที่ Frame ที่ 1 ของ Layer 1 จากนั้นกด (Ctrl+C ) เพื่อทำการ Copy

ขั้นตอนที่ 19: สร้าง Layer ใหม่เหนือ Layer image5 และตั้งชื่อ image1 อีกครั้ง จากนั้นคลิ๊กที่ Frame 180 กด F6 แล้วกด (Ctrl+Shift+V) Paste in Place เพื่อทำการวางสิ่งที่ Copy มาค่ะ

ขั้นตอนที่ 20: คลิ๊ก Frame 200 ของ Layer image 1 ข้างบนสุด กด F6

ขั้นตอนที่ 21: คลิ๊กขวาบริเวณพื้นที่สีเทาระหว่าง Frame 180 และ Frame 200 แล้วเลือก Create Motion Tween

เป็นอันเสร็จเรียบร้อยแล้วค่ะ สามารถกด Ctrl+Enter (Run) เพื่อดูผลได้เลยค่ะ ถ้าทำตามบทเรียนนี้จะได้ Banner นำเสนอภาพสวยๆ ไปติดบน Website แล้วนะคะ ไม่ยากเลยใช่ไหมค่ะ หรือถ้าติดปัญหาอะไรตรงไหนก็ Comment ได้เลยค่ะ

สำหรับ File Master ไปตรวจสอบความถูกต้อง คลิ๊ก ที่นี่ ได้เลยค่ะ

ขอให้ทุกท่านสนุกกับผลงานค่ะ ^O^

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

สอน Flash บทเรียน 1: สร้างเมนูเลือกภาพด้วยตัวเลข (Image Listing By number)

2011-05-26T01:32:00.002-07:00

สวัสดีค่ะ วันนี้ Mondeemedia ขอแนะนำวิธีการสร้าง โปรแกรม Flash ง่ายๆ สำหรับการสร้างเมนูเลือกภาพ เวลาที่เรามีเยอะๆ แล้วอยากจะประหยัดพื้นที่บนหน้า Webpage ของเรากันนะคะ มาเริ่มกันเลยดีกว่าค่ะ

หน้าตาของไฟล์จะเป็นประมาณนี้ค่ะ ลองคลิกดูได้นะคะ คลิ๊กที่ตัวเลขภาพจะเปลี่ยนตามตัวเลขค่ะ

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

ขั้นตอนที่ 1: เปิดหน้าต่างใหม่ใน Flash
ขั้นตอนที่ 2: เตรียมภาพขนาดตามที่เราต้องการ ในบทเรียนนี้ใช้ขนาด 250px X 200 px จำนวน 5 ภาพ หรือ Download ภาพที่นี่ เพื่อความรวดเร็วในการเรียนค่ะ
ขั้นตอนที่ 3: กลับไปที่โปรแกรม Flash เลือก File --> Import --> Import to Library เลือกภาพมาวางที่ Library (image1, image2, image3, ...) จะได้ดังภาพ

ขั้นตอนที่ 4: กด Ctrl+J บนคีย์บอร์ด (Document Properties) และกำหนดกว้าง 270 px สูง 240 px เลือกสีขาวของพื้น Frame Rate = 28 และคลิ๊ก Ok

ขั้นตอนที่ 5: กด (V) Selection Tool เลือก Image 1 จาก Library มาวางบน Stage
ขั้นตอนที่ 6: ภาพที่ 1 ยังคงถูกเลือกอยู่ (Ctrl + K) และทำตามขั้นตอนดังนี้
      1. คลิ๊กที่ Align / Distribute ให้เปิดทำงาน
          2. คลิ๊กที่ Align horizontal Center ให้เปิดทำงาน
          3. คลิ๊กที่ Align Vertical Center ให้เปิดทำงาน

และขณะนี้ภาพที่ 1 ของคุณได้ถูกจัดตำแหน่งตรงกลางเป็นที่เรียบร้อยแล้ว

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

ขั้นตอนที่ 8 : ดับเบิ้ลคลิ๊กบน Layer 1 เปลี่ยนชื่อเป็น image1

ขั้นตอนที่ 9 : คลิ๊กบน Frame 1 ของ Layer imgae1 แล้วกด F9 (Action Script Panel) เพื่อเข้าไปพิมพ์ Code ดังนี้

ขั้นตอนที่ 10 : สร้าง Layer ใหม่เหนือ Layer image1 และตั้งชื่อให้ว่า numbers จากนั้นกด (V) ย้าย Layer numbers ลงมาข้างล่างใต้ Layer image1 โดยใช้วิธีการ "ลากและวาง" ดูตามภาพประกอบค่ะ

ขั้นตอนที่ 11 : เลือกที่ Layer numbers กด (T) Text Tool เพื่อจะพิมพ์ตัวเลข และไปที่ Properties Panel (Ctrl + F3) หลังจากนั้นทำตามขั้นตอนดังนี้ค่ะ
       1. เลือก Static Text Field
       2. เลือก a Trebuchet Ms a font
       3. เลือกขนาด font = 17
       4. เลือก สีตัวอักษร = สีดำ
       5. Rendering Option เลือก Anti - alias for readability

หลังจากนั้นพิมพ์ใต้ภาพ 1 2 3 4 5 ตามภาพตัวอย่าง

ขั้นตอนที่ 12: กด (V) ใช้ Selection Tool เลือกตัวเลข 1 (ตามภาพ)

หลังจากนั้นกด F8 (Convert to Symbol) เพื่อทำการเปลี่ยนตัวเลข 1 ให้เป็นสัญลักษณ์ Button ตั้งชื่อว่า number1 กด ok ดูได้ตามภาพค่ะ

ขั้นตอนที่ 13 : ตัวเลข 1 ที่เป็น Button แล้วยังคงถูกเลือกอยู่ จากนั้นกด F9 (Action Script Panel) แล้วพิมพ์ Code ตามภาพค่ะ

ขั้นตอนที่ 14 : กด (V) Selection Tool เลือกตัวเลข 2 หลังจากนั้นกด F8 (Convert to Symbol) แล้วเปลี่ยนตัวเลข 2 ให้เป็นสัญลักษณ์ Button ตั้งชื่อว่า number 2 ดูตามภาพตัวอย่าง

ขั้นตอนที่ 15 : และเลข 2 ที่เปลี่ยนเป็น Button แล้ว ถูกเลือกอยู่ กด F9 (Action Script Panel) แล้วพิมพ์ Code ตามภาพนี้ลงไปค่ะ

และหลังจากนี้ให้ทำทุกตัวเลข ตามขั้นตอนที่ 14 และ 15 โดยให้เปลี่ยนเป็นสัญลักษณ์ Button และใส่ Code ที่ Action Script Panel

number 3:
on (release) {
gotoAndPlay(3);
}

number 4:
on (release) {
gotoAndPlay(4);
}

number 5:
on (release) {
gotoAndPlay(5);
}

ขั้นตอนที่ 16: คลิ๊ก Frame 5 ของ Layer Numbers และกด F5
ขั้นตอนที่ 17: สร้างเลเยอร์ใหม่เหนือเลเยอร์ image1 และเปลี่ยนชื่อว่า image2
ขั้นตอนที่ 18: คลิ๊ก Frame 2 ของเลเยอร์ image2 กด F6 จากนั้นไปลาก image2 จาก Library มาวางที่ Stage ให้ตำแหน่งเดียวกันกับภาพ image1 ของ Layer image1
ขั้นตอนที่ 19: ภาพที่ 2 วางให้ตรงตำแหน่งเดียวกับภาพที่ 1
ขั้นตอนที่ 20: กด (V) Selection Tool และคลิ๊ก Frame 2 ของ Layer image2 จากนั้นกด F9 (Action Script Panel) ให้พิมพ์ Code ดังนี้

Stop();

ขั้นตอนที่ 21: ให้ทำตามขั้นตอนตามสองภาพที่ทำมาก่อนหน้านี้   โดยการเพิ่ม Layer ใหม่ โดย
Layer image3 วางภาพบน Frame 3 , Layer image4 วางภาพบน Frame 4 และ Layer image5 วางภาพบน Frame 5 โดยให้ทุกภาพวางตำแหน่งเดียวกันเท่ากันค่ะ

หลังจากเสร็จเรียบร้อยแล้ว ให้กด Ctrl + Enter เพื่อเป็นการ Run ดูผลนะคะ (แค่นี้ก็เสร็จเรียบร้อยแล้วค่ะ)

หรือสามารถ Download File Master ไป Run ดูเอาเองได้ ที่นี่ ค่ะ

และทั้งหมดนี้ก็เป็นวิธีการสอน Flash บทเรียนที่ 1 ของมนต์มีเดีย ค่ะ ถ้าอย่างไรไม่เข้าใจ Post สอบถามได้เลยนะคะ   แล้วพบกันใหม่บทเรียนหน้าค่ะ

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

set outlook 2003 เปิด file image ได้

2011-02-21T20:16:00.000-08:00

วิธีการ Set Outlook 2003 ให้เปิด File ที่แนบมาแบบ Html ได้นะครับ โดยไม่ต้องคลิกขวาแล้ว Download ให้เสียเวลาครับ

outlook 2003 : Tools>options>security>change automatic download settings>Don't download pictures..... ปล.. ใน ms outlook จะแสดงรูปได้ จะขึ้นอยู่กับผู้ส่งว่า Insert> Picture หรือ แนบไฟล์ ครับ

มนต์มีเดีย ยินดีต้อนรับทุกท่านครับ..

2011-02-06T04:35:00.000-08:00

สวัสดีครับทุกท่าน....

ขอต้อนรับทุกท่านเข้า Blog แห่งนี้ ผมได้เปิด Blog เพราะว่าผมอยากจะใช้ Blog ในการเขียน หรือบอกเล่าวิธีการทำงานของผมครับ ซึ่งเกี่ยวข้องกับโปรแกรม กราฟฟิคต่างๆ ที่ผมมีความรู้อยู่นะครับ

ผมหวังว่าจะมีประโยชน์สำหรับทุกท่านไม่มากก็น้อยครับ

doB..