งานกลุ่ม vdo

I. การใส่ link ใน flash กรณีที่เป็น Text

II. การใส่ link ใน flash ให้กับ button

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

I. การใส่ link ใน flash กรณีที่เป็น Text

1. สร้างเอกสารใหม่ขึ้นมาขนาด 120x40

2. ใช้เครื่องมือ Text Tool เพื่อพิมตัวอักษรที่ต้องการ เช่น webthaidd ดังรูป

3. ใส่ link (http://www.webthaidd.com) ลงไปในส่วนของ properties ตรงช่องดังรูป

4. ทดสอบโดยการกด ctrl+enter แล้วคลิกที่ตัวหนังสือที่เราใส่ link

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

II. การใส่ link ใน flash ให้กับ button

1. สร้างเอกสารใหม่ขึ้นมาขนาด 120x40

2. ไปที่เมนู Window > Common Libraries > Buttons

3. เลือกปุ่มจาก Libray - buttons แล้วใส่ลงไปบน stage

4. คลิกขวา ที่ปุ่ม แล้วเลือก Actions

5. คลิกที่ Script Assist ด้านขวาบนของ หน้าต่าง Actions (Script Assist เป็นตัวช่วยเขียน action script)

6. ที่เมนูด้านซ้าย ให้ไปที่ Browser/Network > getURL

7. คลิกที่คำว่า getURL("") ; แล้วใส่ URL ลงไปในช่อง URL:

8. จะได้ดังรูป

9. กด ctrl + enter เพื่อทดสอบ

1. สร้างเอกสารใหม่ขึ้นมาขนาด 180x40

2. ใช้เครื่องมือ Text Tool สร้าง Text box ลงใน Stage

3. คลิกที่ text box แล้วเลือกเป็น dynamic text ใน properties โดยใส่คำว่า fulldate ลงไปในช่อง Var ดังรูป

4. สร้าง layer ขึ้นมาใหม่อีกหนึ่งเลเยอร์

5. คลิกที่เฟรมแรกของ layer ที่สร้างขึ้นมาใหม่ แล้วกด F9 หรือคลิกขวาแล้วเลือก Actions

6. ใส่ action script ลงไปดังนี้

months = new Array("January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
timedate = new Date();
this.onEnterFrame = function ()
{
todaydate = timedate.getDate();
month = timedate.getMonth();
monthname = months[month];
year = timedate.getFullYear();
fulldate = " "+todaydate+" "+monthname+" "+year;
};

7. กด ctrl+enter เพื่อทดสอบ

1. วาดรูปวงกลมขึ้นมา 1 รูป ตั้งชื่อ layer ว่า "graphic"

2. คลิกขวาที่ Layer "graphic" แล้วเลือก "Add Motion Guide"

3. จะมี layer ใหม่ขึ้นมาข้างบน layer "graphic" ชื่อว่า "Guide:graphic"

4. วาดเส้น path สำหรับ symbol ใน layer ใหม่ โดยใช้ pencil หรือ line tool

5. เลือกเฟรมที่ 50 ของ layer guide และกด "F5" เพื่อ insert frames.

6. หลังจากนั้น ไปที่ "Frame 1" ของ "graphic" layer และลาก symbol ไปยังจุดสุดท้ายของ path ที่เราวาดไว้ โดยขณะที่ลากนั้น คุณจะเห็น วงกลมเล็กๆ อยู่บน symbol ซึ่ง ต้องลากให้วงกลมเล็กๆนั้น อยู่ทับเส้น path

7. หลังจากนั้น ไปที่ "Frame 50" ของ "graphic" layer และกด F6 เพื่อ สร้าง keyframe ขึ้นมาใหม่

8. ต่อจากนั้น ลาก symbol ไปยัง อีกฝั่งหนึ่งของ path และ ต้องให้ วงกลมเล็กๆ อยู่บนเส้น path.

9. เลือกที่ เฟรม ระหว่าง เฟรม 1 ถึง 50 ของ "graphic" layer คลิกขวาแล้วเลือก Create motion tween

10. กด ctrl + enter เพื่อดูผลลัพธ์ เราจะได้ วงกลมวิ่งตามเส้น path ที่เราวาดไว้

คิดว่าทุกๆ คนที่เคยทำ Flash คงเคยจับมา ใส่ link จากโปรแกรม Dreamweaver กันมาบ้างใช่มั้ยครับ

แต่ทราบมั้ยครับว่าแท้ จริงแล้วเราสามารถที่จะทำ link จาก ที่เราทำ Flash ให้ไปยัง url ที่เราต้องการได้เลยเหมือนกัน

มาดูกันเลยดีกว่าครับว่ามีขั้นตอนการทำอย่างไร

การทำ ลิ้งค์ และ เมาส์ hover จาก Flash

1 .  สร้างรูปร่าง Button ที่ต้องการขึ้นมา

2. ใช้ Selection Tool (V) ลากคลุม Button ที่สร้างขึ้นมา แล้วกด F8 เพื่อ Convert to Symbol เลือก Button

3. เพื่อความสวยงามของภาพอาจ add filters เพิ่มได้ ตามใจชอบ

4.จากนั้น ดับเบิ้ลคลิ๊ก ที่ Button ที่เราสร้าเพื่อเข้าสู้ Button symbol

5. กด F6 เพื่อ Insert Key Framesที่ Over

6.จากนั้นกลับไปทำการเปลี่ยนแปลงอะไรที่ Button เพื่อเมื่อเมาส์ มา over แล้วจะเปลี่ยนแปลงตามต้องการ

7. จากนั้นเลือก Down คือเมื่อปล่อยเมาส์ จาก Button แล้วจะเป็นอย่างไร และ Hit พื้นที่ที่สามารถคลิกเมาส์ได้

8. จากนั้นออกมาด้านนอก กด Shift + F3 เพื่อเลือก ฟังชั่น Behaviors ขึ้นมา

9. เมื่อเราทำการเปิด Behaviors Panel ขึ้นมาแล้วให้เรา Click ไปที่เครื่องหมายบวก (+) แล้วเลือกไปที่ Web -> Go to Web Page ดังรูป

10. เมื่อเราเลือกไปที่ Go to Web page แล้วโปรแกรมจะทำการเปิดหน้าต่าง Go to URL ขึ้นมาให้เราทำการกำหนดค่าต่าง ๆ ได้ ดังรูป

11.  เมื่อเราได้ทำการกำหนดค่าต่าง ๆ เสร็จสิ้นแล้วก็ทำการกดที่ปุ่ม OK ของหน้าต่าง Go to URL ได้ทันที

จากนั้นทำการ Export Movie ของเราเพื่อนำไปใช้ภายใน web page เพื่อทำการทดสอบดูผล

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

*** ผมเลือกที่จะทำ เมฆลอยไปมาด้านหลังนะครับเนื่องจากว่า เข้าไจได้ง่ายและสมารถดัดแปลงใช้กับการ์ตูนได้อีกเยอะหลายแบบเช่น เครื่องบิน บิน เรือลอย รถวิ่ง ฯลฯ

ตอนที่ 3 ทำให้ภาพมีการเคลื่อนไหวอย่างง่ายๆ

1. เตรียมตัวการ์ตูน ที่ต้องการใช้

2. เพื่ม Layer ขึ้นมา 1 Layer

3. Insert Key Frames ขึ้นมาใน Frames ที่ 2 ของ Layer ที่ 2 เพื่อตัดภาพใน พื้นที่การทำก่อนจะไำด้วาดได้ง่ายขึ้นนะครับ

4. วาดรูปก้อนเมฆให้เต็มจอ

5. จากนั้น คลิ๊กขวาที่ Frames ที่ 2 ของ Layer ที่ 2 Create Motion Tween

6. จากนั้นเลือกความเร็วของเมฆ แล้ว Insert Key Frames ที่ Frames นั้น

7. เลื่อนกลับมาที่  Frames แรกของ Motion Tween (สังเกตุที่สีม่วง) ของ Layer 2

8. เลื่อนก้อนเมฆไปด้านหลังของ Stage

9. เลื่อนกลับมาที่  Frames สุดท้ายของ Motion Tween (สังเกตุที่สีม่วง) ของ Layer 2

10. เลื่อนก้อนเมฆไปด้านหน้าของ Stage

11. ทำแบบนี้อีก 2 -3 ครังสลับกันไปแล้วเลื่อนกลับมาให้เป็นเฟรมแรก จากนั้นเลื่อนรูปขึ้นมาที่บนสุดแล้ว Insert Frames ให้ไกลเท่า Key Frames Motion Tween  ของก้อนเมฆ

12. ตัวอย่างเมื่อทำเสร็จ

บทความนี้จะเป็นการทำ hover caption ใน Flash กันนะครับจะเป็นลักษณะเวลาเราเอาเมาส์ไปชี้ที่วัตถุก็ จะมีข้อความปรากฎขึ้นมาครับ

1. สร้างเอกสารใหม่ขึ้นมาขนาดใดก็ได้ ในที่นี้ขนาด 300x200

2. สร้างปุ่มขึ้นมา หรือไปที่เมนู windows > Common Libraries > Buttons ดังรูป

3. เลือกปุ่มที่ต้องการ แล้วลากลงไปยัง Stage

4. ตั้งชื่อ instance ใน properties ว่า button ดังรูป

5. สร้าง movieclip ขึ้นมา โดยไปที่เมนู Insert > New Symbol หรือกด Ctrl+F8

6. เลือก Type เป็น Movie clip และตั้งชื่อว่า caption

7. ใช้เครื่องมือ Text Tool วาด Textbox ลงไปดังรูป

8. ตั้งชื่อ Instance ใน properties ว่า desc ดังรูป

9. ตกแต่งให้สวยงาม โดยใส่พื้นหลังเข้าไป

10. นำไปวางข้างนอก Stage ดังรูป และตั้งชื่อ Instance ว่า cap

11. สร้างเลเยอร์ใหม่ขึ้นมา

12. ใส่ action ลงไปดังนี้

button.onRollOver = function() {
captionFN(true,"webthaidd.com",this);
this.onRollOut = function() {
captionFN(false);
};
};
captionFN = function (showCaption, captionText, bName) {
if (showCaption) {
_root.createEmptyMovieClip("hoverCaption", this.getNextHighestDepth());
cap.desc.text = captionText;
cap._width = 7*cap.desc.text.length;
cap._alpha = 75;
//
if ((bName._width+bName._x+cap._width)>Stage.width) {
xo = -2-cap._width;
yo = -17;
} else {
xo = 2;
yo = -17;
}
hoverCaption.onEnterFrame = function() {
cap._x = _root._xmouse+xo;
cap._y = _root._ymouse+yo;
cap._visible = true;
};
} else {
delete hoverCaption.onEnterFrame;
cap._visible = false;
}
};

13. กด ctrl+enter เพื่อทดสอบ