สร้างเว็บเอฟเฟ็คต์ด้วยบิเฮฟวิเออร์ (Behaviors)
ลักษณะพิเศษอย่างหนึ่งของเว็บก็คือ ความสามารถในการตอบสนองกับผู้ใช้หรือที่เรียกว่า Interactive ด้วยคุณสมบัตินี้เมื่อผู้ใช้กระทำการบางอย่างในเว็บ เช่น เคลื่อนเมาส์ไปในบางบริเวณ หรือคลิกที่ปุ่ม ก็จะทำให้เกิดการเปลี่ยนแปลงบางอย่างเพื่อตอบสนองการกระทำเหล่านั้น คุณสมบัติเหล่านี้ช่วยเพิ่มความน่าสนใจให้กับเว็บได้ จึงไม่น่าแปลกใจที่จะเห็นเว็บต่างๆนำเอฟเฟ็คต์ Rollover หรือ Pop-up menu มาใช้กันมากขึ้น ซึ่งโดยปกติแล้ว การสร้างเอฟเฟ็คต์เหล่านี้ คุณจะต้องรู้วิธีการเขียนโปรแกรมด้วยภาษา JavaScript เพื่อควบคุมการทำงานของบราวเซอร์ แม้ว่าภาษานี้จะไม่ยากเกินไปนักเมื่อเทียบกับภาษาอื่นๆในการเขียนโปรแกรม แต่สำหรับเว็บดีไซน์เนอร์และผู้ทำเว็บโดยส่วนใหญ่ ก็อาจไม่มีเวลามากพอที่จะศึกษาภาษาเหล่านี้ เพื่อที่จะเขียนโค้ดขึ้นมาเอง Fireworks มีทางอออกให้คุณ ด้วยความเข้าใจเกี่ยวกับ Behaviors, Slices และ Hotspot คุณจะสามารถสร้างเอฟเฟ็คต์ต่างๆสำหรับเว็บได้อย่างรวดเร็ว โดยไม่จำเป็นต้องเขียนโค้ดเองแต่อย่างใด
รู้จักกับบิเฮฟวิเออร์ (Behaviors)
Fireworks ได้พัฒนาบิเฮฟวิเออร์ขึ้นมา เพื่อสร้างความสะดวกในการสร้างอินเตอร์แอคทีฟเอฟเฟ็คต์ต่างๆ บิเฮฟวิเออร์เป็นเสมือนโค้ดสำเร็จรูปที่คุณสามารถนำไปใช้ได้ทันที ด้วยการกำหนดออปชั่นในบิเฮฟวิเออร์ที่ต้องการ คุณก็จะได้เอฟเฟ็คต์พิเศษไปเพิ่มสีสันให้กับเว็บในเวลาอันสั้น
ก่อนอื่นคุณจะต้องทราบว่า บิเฮฟวิเออร์นั้นประกอบด้วย 2 ส่วนคือ อีเวนท์ (event) และ แอ็คชั่น (action) โดย อีเวนท์ คือเหตุการณ์ที่เป็นตัวกระตุ้นให้เกิดแอ็คชั่น ซึ่งอีเวนท์นั้นก็อาจจะเกิดจากการกระทำของผู้ใช้ เช่น การเคลื่อนที่ของเมาสหรือการคลิกที่ภาพ หรืออาจเป็นสิ่งที่เกิดขึ้นเอง เช่นเมื่อเว็บเพจดาวน์โหลดเสร็จ สำหรับ แอ็คชั่น นั้น ก็มีตั้งแต่การแสดงข้อความใน Status bar ของบราวเซอร์ ไปจนถึงการทำงานของป็อปอัพเมนู
ในไฟล์ HTML บิเฮฟวิเออร์นั้นจะถูกผูกไว้กับองค์ประกอบในเว็บเพจ เช่น ตัวอักษรหรือรูปภาพ สำหรับใน Fireworks บิเฮฟวิเออร์จะถูกยึดไว้กับ Fireworks Web objects ซึ่งก็คือสไลซ์หรือฮอทสปอตเท่านั้น นั่นหมายความว่าเราสามารถใช้สไลซ์หรือฮอทสปอตเป็นส่วนกำหนดอีเวนท์ได้ แต่สำหรับส่วนที่เป็นแอ็คชั่นจะต้องเป็นเฉพาะสไลซ์เท่านั้น เนื่องจากฮอทสปอตไม่สามารถใช้แสดงแอ็คชั่นได้
เลือกใช้ Behaviors
พาเนล Behaviors เป็นบริเวณหลักในการทำงานกับ Behaviors คุณสามารถเพิ่มและลบบิเฮฟวิเออร์ต่างๆได้ในพาเนลนี้ แต่ละบิเฮฟวิเออร์จะมีกรอบสำหรับกำหนดออปชั่นและค่าต่างๆโดยเฉพาะ ซึ่งคุณสามารถกำหนดบิเฮฟวิเออร์ ทั้งชนิดเดียวกันและต่างชนิดกันให้กับสไลซ์หรือฮอทสปอตได้อย่างไม่จำกัดจำนวน โดยที่พาเนล Behaviors จะแสดงรายการบิเฮฟวิเออร์ทั้งหมดที่นำไปใช้
คุณสามารถเปิดพาเนล Behaviors ได้จากคำสั่ง Window > Behaviors (Shift+F3) หรือคลิกที่แท็บ Behaviors ถ้าพาเนลนี้ปรากฏอยู่ในกลุ่มพาเนล ในการกำหนดบิเฮฟวิเออร์ ให้คลิกที่สไลซ์หรือฮอทสปอตก่อน แล้วจึงคลิกที่ปุ่ม Add behavior ซึ่งแสดงด้วยเครื่องหมายบวก เพื่อเลือกบิเฮฟวิเออร์ที่ต้องการจากรายการที่มีอยู่ จากนั้นจะปรากฏกรอบของบิเฮฟวิเออร์ขึ้นมา สำหรับกำหนดออปชั่นและค่าต่างๆ เมื่อคลิกปุ่ม OK พาเนล Behaviors จะแสดงรายการบิเฮฟวิเออร์ที่ได้นำไปใช้
เลือกบิเฮฟวิเออร์ที่ต้องการในพาเนล Behaviors
ใน Fireworks ประกอบบิเฮฟวิเออร์ 5 กลุ่มหลัก ดังต่อไปนี้
• Simple Rollover : สลับภาพแบบพื้นฐาน โดยจะสลับระหว่างภาพในเฟรมที่ 1 กับภาพในเฟรมที่ 2 ของเอกสาร เมื่อผู้ใช้นำเมาส์มาวางเหนือภาพ
• Swap Image : สลับภาพจากภาพหนึ่งไปเป็นอีกภาพหนึ่ง โดยอาจจะอยู่คนละที่กันก็ได้
• Set Nav Bar Image : สร้างเนวิเกชั่นบาร์ที่มีการแสดงภาพในสถานะต่างๆกัน
• Set Pop-up Menu : สร้างป็อปอัพเมนูสำหรับเว็บไซท์
• Set Text of Status Bar : แสดงข้อความในบริเวณ status bar ของบราวเซอร์
พาเนล Behaviors แสดง Events, Actions และ Info ของบิเฮฟวิเออร์ที่มีการนำไปใช้
นอกเหนือจากวิธีกำหนดบิเฮฟวิเออร์ในพาเนล Behaviors แล้ว คุณยังสามารถเพิ่มบิเฮฟวิเออร์ให้กับสไลซ์ได้อย่างรวดเร็ว ด้วยการคลิกที่สไลซ์ คุณจะเห็น บิเฮฟวิเออร์แฮนเดิล (Behavior handle) รูปวงกลมอยู่ตรงกลางสไลซ์ เมื่อคลิกที่จุดนี้ จะปรากฏเมนูให้คุณเลือกบิเฮฟวิเออร์ที่จะเพิ่มให้กับสไลซ์นั้นได้ทันที
คลิกที่บิเฮฟวิเออร์แฮนเดิล แล้วเลือกบิเฮฟวิเออร์ที่ต้องการ
สำหรับฮอทสปอต คุณก็สามารถคลิกที่ Hotspot handle เพื่อเพิ่มบิเฮฟวิเออร์ได้เช่นกัน เพียงแต่บิเฮฟวิเออร์ที่มีให้เลือกนั้นจะน้อยกว่าของสไลซ์
แก้ไขบิเฮฟวิเออร์
หลังจากที่คุณกำหนดบิเฮฟวิเออร์ให้กับสไลซ์หรือฮอทสปอตแล้ว คุณสามารถแก้ไขบิเฮฟวิเออร์ได้ทั้งส่วนของอีเวนท์และแอ็คชั่น สำหรับส่วนอีเวนท์ซึ่งมีค่าดีฟอลท์เป็น onMouseOver คุณสามารถเปลี่ยนอีเวนท์เป็นอย่างอื่นได้ด้วยการคลิกที่เมนู Events รูปสามเหลี่ยมชี้ลง ที่ตอนท้ายของคอลัมน์ Events เพื่อเลือกอีเวนท์ชนิดอื่น อีเวนท์ทั้งหมดที่มีให้เลือกได้แก่
• OnMouseOver : เมื่อผู้ใช้เลื่อนเมาส์มาอยู่เหนือภาพ
• OnMouseOut : เมื่อผู้ใช้เลื่อนเมาส์ออกจากบริเวณของภาพ
• OnClick : เมื่อผู้ใช้คลิกที่ภาพ
• OnLoad : เมื่อ มีการ ดาวน์โหลดข้อมูลในเว็บเพจจนครบ
เปลี่ยนอีเวนท์ใหม่ในคอลัมน์ Events
ถ้าคุณต้องการแก้ไขออปชั่นหรือค่าต่างๆของบิเฮฟวิเออร์ ให้คลิกเลือกบิเฮฟวิเออร์ แล้วกดปุ่ม Behavior properties รูปตัว i ทางด้านล่างของพาเนล หรือใช้วิธีดับเบิลคลิกที่ชื่อของแอ็คชั่นในคอลัมน์ Actions เลยก็ได้ จะปรากฏกรอบของบิเฮฟวิเออร์ขึ้นมาพร้อมให้ทำการแก้ไข
แต่ถ้าคุณต้องการลบบิเฮฟวิเออร์บางรายการออกไป ให้คุณคลิกเลือกบิเฮฟวิเออร์นั้นในพาเนล Behaviors แล้วคลิกที่ปุ่ม Remove behavior ซึ่งเป็นรูปเครื่องหมายลบ หรือคลิกที่ปุ่ม Remove action รูปถังขยะทางด้านล่างของพาเนลก็ได้เช่นกัน
