โปรแกรมที่ใช้สร้างเว็บไซต์

 การสร้างเว็บด้วย flash

ก่อนอื่นเลย หลังจากหาแผ่นโปรแกรม Flash 8 มาติดตั้งเรียบร้อยแล้ว เรามาดูกันสักหน่อยว่า ตรงส่วนไหนของจอภาพเรียกว่าอะไร เอาไว้ทำอะไรกันก่อน เพราะเดี๋ยวผมอ้างอิงถึงจะได้นึกภาพตามทัน (ดังรูปที่ 1)

รูปที่ 1

เดากันออกคือ สเตจ (Stage) ผมขออนุญาตเรียกทับศัพท์นะครับ สเตจเป็นพื้นที่สำหรับการวางผลงานของเรานั้นเอง จะขีดจะเขียนจะพิมพ์อะไรก็ทำกันลงไปในสเตจนี้แหละ ที่ด้านข้างของสเตจเป็นพื้นที่เหมือนกระดาษทด สำหรับนำเอาอะไรที่ยังไม่ใช้ตอนนี้ไปวางไว้ โดยที่จะไม่โผล่ออกมาเป็นผลงาน นอกจากนี้แล้ว เรายังสามารถใช้พื้นที่ทดดังกล่าว เอาไว้สร้างเทคนิคอะไรต่างๆ ได้อีกทูลพาเนล (Tool Panel) เดาออกอีกนั่นแหละ คือปุ่มเครื่องมือที่เราเอาไว้เรียกใช้สำหรับการผลิตผลงานพาเนล (Panel) พูดได้ว่าเป็นที่บรรจุคำสั่ง เครื่องมือ วัตถุงาน การปรับแต่ง โดยพาเนลมีอยู่หลายพาเนลครับ แบ่งได้ตามลักษณะการใช้งานเช่น Color Panel ภายในนั้นก็จะมีคำสั่งเพื่อเอาไว้สำหรับปรับแต่งค่าสีให้กับงาน , Library Panel เก็บรวบรวมไฟล์ภาพ วัตถุที่เรานำมาประกอบการใส่งาน เพื่อเอาไว้สำหรับเลือกใช้งานกันต่อไปProperties Panel จัดเป็นพาเนลเหมือนกัน ค่าต่างๆ ของ Properties Inspector นี้เปลี่ยนไปตามสิ่งที่เราเลือกทำงานอยู่ เปลี่ยนไปตามเครื่องมือที่เลือก เช่น ถ้าเลือกเครื่องมือ Text Tool ตรงนี้ก็จะมีช่องให้เลือกฟอนต์ ขนาด สี , ถ้าเลือกเครื่องมือ Selection Tool จะมีช่องให้เราปรับขนาดของงาน จำนวนเฟรมเรต สีพื้นของงานไทม์ไลน์ (TimeLine) จริงๆ ก็เป็นพาเนลหมือนกัน ไทม์ไลน์เป็นสิ่งที่เราต้องเข้าไปเกี่ยวข้องตลอดเวลา เพราะการสร้างภาพเคลื่อนไหว จะต้องมีส่วนประกอบของจำนวนเฟรมเข้ามาเกี่ยวข้อง และมีเรื่องของเลเยอร์ (Layer) ซึ่งเป็นที่เก็บวัตถุในการสร้างงานแต่ละตัวไว้ เช่น เลเยอร์หนึ่งเก็บภาพแบ็กกราวนด์ เลเยอร์สองเก็บตัวหนังสือ การเลื่อนไปทำงานในแต่ละเฟรม สามารถใช้เพลย์เฮด (PlayHead) ที่อยู่ด้านบนของแถบแสดงหมายเลขเฟรม เป็นตามเลื่อน

เราจะเริ่มงานง่ายๆ ที่ยังไม่ซับซ้อน เพื่อให้เราได้คุ้นเคยกับการทำงานต่างๆ ของ Flash โดยผมขอนำท่านไปหัดสร้างแบนเนอร์กันก่อนครับ โดยแบนเนอร์ที่ผมจะสร้างนี้ เริ่มต้นจะค่อยแสดงภาพจากทางด้านซ้ายมือเข้ามา แล้วจึงค่อยโผล่ข้อความตามมาทีหลัง เราไปลงมือสร้างกันเลยดีกว่าสร้างงานใหม่ โดยการเลือกคำสั่ง File -> New -> เลือกเป็น Flash Document หลังจากที่ได้งานใหม่ขึ้นมาแล้ว มาปรับขนาดของงานแบนเนอร์ให้เป็นขนาด 750X150 พิกเซล โดยการคลิ้กที่ปุ่ม Size จาก Properties Panel (ดังรูปที่ 2)

รูปที่ 2

ต่อไปเราจะนำภาพแบ็กกราวนด์ที่ได้เตรียมไว้สำหรับมาทำแบนเนอร์เข้ามาในสเตจ (Stage) โดยการเลือกคำสั่ง File -> Import -> Import to Stage ลงมือเลือกไฟล์ภาพตามต้องการ (ดังรูปที่ 3) ภาพที่ถูกดึงเข้ามา จะอยู่บนสเตจทันที พร้อมๆ กันนนี้ชื่อไฟล์ภาพดังกล่าว จะไปปรากฏที่ Library Panel ออ..อย่าลืมขยับภาพที่นำเข้ามา ให้อยู่ภายในสเตจ เลือกใช้ Selection Tool คลิ้กไปที่ภาพดังกล่าว แล้วทำการขยับให้ตรง หรือจะไปกำหนดค่า X: และ Y: ให้เป็นศูนย์ทั้งคู่ก็ได้ ที่ Properties Panel

รูปที่ 3

ตามที่ตกลงกันไว้ เราจะสร้างภาพแบนเนอร์แบบค่อยๆ เผยโฉมออกมาจากทางด้านซ้าย เราจะข้ามมาดูกันที่ส่วนของไทม์ไลน์ (TimeLine) ดูกันนะครับ ไฟล์ภาพที่นำเข้ามาในสเตจ (Stage) จะถูกมองเป็น 1 เลเยอร์ (Layer) เพื่อให้ชื่อของเลเยอร์สื่อความหมายให้ดีขึ้น ผมก็จะดับเบิลคลิ้กตรงชื่อเลเยอร์ จากเดิมที่เป็น Layer 1 ผมเปลี่ยนเป็น Background และเพื่อให้ภาพจากแบนเนอร์ค่อยๆ เผยโฉมออกมา ผมจะอาศัยเทคนิคการบัง ที่เรารู้จักกันดีคือการสร้าง Mask ดังนั้นในงานจำเป็นต้องมีเลเยอร์เพิ่มขึ้นมาอีกหนึ่ง เพื่อสำหรับสร้าง Mask ผมก็คลิ้กมาที่ปุ่ม Insert Layer เลเยอร์ใหม่ที่ได้ก็จะมีลำดับอยู่เหนือเลเยอร์เก่า โดยชื่อของเลเยอร์ใหม่ที่ได้ ตามธรรมเนียมคือ Layer 2 ผมจะดับเบิลคลิ้กเพื่อเปลี่ยนชื่อเป็น Mask แทน (ดังรูปที่ 4 )

รูปที่ 4

เป็นอันว่าตอนนี้งานของเรามีอยู่ 2 เลเยอร์ การจะกำหนดค่าอะไรให้กับเลเยอร์ไหน เราจะต้องคลิ้กเลือกเลเยอร์นั้นให้ทำงานเสียก่อน สังเกตได้ไม่ยากว่าเลเยอร์ไหนถูกเลือกทำงานอยู่ ตรงชื่อเลเยอร์จะเป็นแถบสีเข้มกว่าชาวบ้านนั่นแหละเลือกทำงานที่เลเยอร์ mask แล้วทำการคลิ้กเลือกเครื่องมือวาดรูปสี่เหลี่ยม (Rectangle Tool) เลือกในช่อง Stroke color ให้เป็นแบบไม่มีสี และเลือกสีในช่อง Fill color เป็นสีดำก็ได้ นำมาวาดไว้ที่พื้นที่ทด ข้างๆ กับแบนเนอร์ วาดให้ได้ขนาดตามตัวอย่าง (ดังรูปที่ 5)

รูปที่ 5

มาทำงานที่ไทม์ไลน์กันต่อ ให้แดร็กเมาส์เลือกเฟรมที่ 10 ของทั้งสองเลเยอร์ให้ทำงาน (เฟรมที่ 10 ของทั้งสองเลเยอร์เป็นสีเข้ม) จากนั้นให้คลิ้กขวาเลือกคำสั่ง Insert Keyframe เข้าไป (ดังรูปที่ 6) ผมขออนุญาตอธิบายเรื่องคีย์เฟรม (Keyframe) นิดหน่อยครับ โดยปกติแล้ว ภาพเคลื่อนไหวจะแสดงภาพไล่เรียงตามลำดับเฟรมไปเรื่อยๆ เมื่อไหร่ก็ตามที่เราอยากให้ตรงตำแหน่งเฟรมไหน มีการเปลี่ยนค่าการทำงาน เช่นถ้าเป็นตัวหนังสือ พอมาถึงเฟรมที่ 10 ตัวหนังสือเป็นสีเขียว พอมาถึงเฟรมที่ 20 ให้ตัวหนังสือเป็นสีแดง เราจะต้องเพิ่มคีย์เฟรมเข้าไปในตำแหน่งเฟรมดังกล่าว แล้วไปกำหนดค่าตามต้องการ ดังนั้น ลูกเล่นของการสร้างภาพเคลื่อนไหวด้วย Flash จึงต้องมีการใช้คีย์เฟรมอยู่มาก (ซึ่งเราจะได้เห็นตัวอย่างไปเรื่อยๆ)

รูปที่ 6

ดูในช่องเฟรมบนไทม์ไลน์ เฟรมไหนที่มีการสร้างคีย์เฟรมอยู่ เราจะเห็นสัญลักษณ์เป็นเครื่องหมายวงกลมเข้ม ซึ่งในตอนนี้การกำหนดค่าของเราอยู่ที่เฟรมที่ 10 ให้คลิ้กเลือกทำงานเลเยอร์ mask คลิ้กเลือกเครื่องมือ Free Transform Tool เราจะสังเกตเห็นรูปสี่เหลี่ยมมีเครื่องหมายสี่เหลี่ยมเล็กๆ อยู่ล้อม 8 จุด ให้เราขยายสี่เหลี่ยมออกไปเล็กน้อย พอไปทับกับภาพแบ็กกราวนด์ (ดังรูปที่ 7)

                                                 รูปที่ 7