เทคนิคการใช้ Flash ขั้นเซียน (ตอนที่ 2) จัดทำโดย : Warren Ernst : ศรัณย์ หงสกุล พิมพ์


เทคนิคการใช้ Flash ขั้นเซียน (ตอนที่ 2)
สร้างแบนเนอร์โฆษณา


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



                  ภาพที่ 1

..... ภาพที่ 1 : แบนเนอร์แบบ Movie ที่เซตให้เปลี่ยนข้อความไปทุกๆ 15 เฟรม ด้วยความที่เป็น Movie แบนเนอร์นี้จึงวนซ้ำได้เองโดยอัตโนมัติ.....

เริ่มแรก ให้คุณสร้าง Movie ขึ้นใหม่ (ไปที่ File > New) จากนั้นเลือกคำสั่ง Modify บนเมนู Movie ซึ่งในไดอะล็อกบ็อกซ์ Movie Properties ให้คุณกำหนดขนาดของ Movie ให้เท่ากับแบนเนอร์ที่ใช้ โดยปกติ แบนเนอร์ขนาดใหญ่จะใช้ 468 x 60 พิกเซล แบนเนอร์ขนาดปานกลางจะใช้ 230 x 33 พิกเซล และแบนเนอร์ขนาดเล็กสำหรับทำเป็นปุ่มด้านข้างเว็บเพจจะใช้ 120 x 30 พิกเซล ต่อไปให้คุณสร้างสัญลักษณ์ตัวใหม่ (Insert > New Symbol) พร้อมตั้งชื่อว่า “Banner” และกำหนดคุณสมบัติเป็น Movie Clip สงสัยไหมว่าทำไมถึงใช้ Movie Clip แทน Graphic ? สาเหตุก็เพราะ Movie clip สามารถเคลื่อนไหววนซ้ำไม่มีที่สิ้นสุด เหมือนภาพโฆษณาแอนิเมชันทั้งหลาย (แต่ขนาดเล็กกว่า)

ถัดมา คุณจะเห็นบริเวณที่ว่างปรากฏขึ้น ลองมาแสดงฝีมือกันเลย... โดยให้วาดรูปสี่เหลี่ยมลงไป (ใช้เครื่องมือวาดสี่เหลี่ยม) ให้มีขนาดพอดีกับขนาดของ Movie (เคล็ดลับ : วาดพื้นหลังด้วยเครื่องมือวาดสี่เหลี่ยม จากนั้นใช้เครื่องมือต่างๆ ในพาแนล Info เพื่อปรับขนาดพื้นหลังให้เท่ากับขนาดของ Movie แล้วใช้พาแนล Align เลื่อนพื้นหลังมาอยู่ตรงกลาง) พร้อมกันนี้ ให้คุณสร้างเฟรมในแบนเนอร์อย่างน้อย 60 เฟรมขึ้นไป โดยกำหนดให้เนื้อหาเปลี่ยนแปลงประมาณทุกๆ 15 เฟรม (บางที คุณอาจปรับตัวเลขดังกล่าวให้เร็วขึ้นหรือช้าลงตามใจชอบก็ได้) ซึ่งในเวลาต่อไป หากคุณต้องการเปลี่ยนเนื้อหาบนแบนเนอร์ ก็ให้จัดการที่สัญลักษณ์ “Banner” ได้ทันที

ตอนนี้ ให้คุณสร้างปุ่ม แต่เป็นปุ่มที่บรรจุแค่สัญลักษณ์ “Banner” ที่เพิ่งสร้างเสร็จเมื่อกี้ขึ้นมา โดยสร้างสัญลักษณ์ใหม่ที่มีชื่อว่า “Button” แล้วกำหนดคุณสมบัติให้เป็น Button คุณก็จะพบบริเวณว่าง และไทม์ไลน์ที่ว่างเปล่า ต่อไปให้เลือกเฟรมที่ชื่อ Up (ซึ่งมีคีย์เฟรมว่างไว้อยู่แล้ว) ลากสัญลักษณ์ “Banner” มาไว้บนบริเวณที่ว่าง ลากให้อยู่ตรงกลาง จากนั้นกลับมาที่ตัว Movie อีกครั้ง

เนื่องจากคุณกำหนดสัญลักษณ์ “Banner” ให้มีคุณสมบัติเป็น Movie ดังนั้น ปุ่มที่ประกอบด้วยสัญลักษณ์นี้จะเล่นแอนิเมชันโดยอัตโนมัติ ไม่ต้องพึ่งการกด หรือลากเมาส์ใดๆ ทั้งสิ้น เหมือนกับแบนเนอร์ทั่วไปที่เขาทำกัน ส่วนเรื่องการทำปุ่มให้กระโดดไปยังเว็บเพจที่ต้องการเมื่อถูกคลิ้ก เพียงแค่ย้อนกลับไปทำตามหัวข้อที่ผ่านมา จากนั้นคุณก็เซฟออกมาเป็นไฟล์ Flash (สกุล .SWF) และบรรจุลงในเว็บเพจที่ต้องการ เท่านี้คุณก็จะได้แบนเนอร์ที่กลั่นมาจากฝีมือของคุณเองแล้ว

สร้าง Preloader

ข้อดีที่สำคัญของ Movie ที่สร้างบน Flash ก็คือ ไฟล์มีขนาดเล็กและทำงานในแบบสตรีมมิงอย่างเป็นธรรมชาติ โดยตัว Movie จะเริ่มเล่นทันทีที่ส่วนประกอบแรกถูกดาวน์โหลดมาที่เว็บบราวเซอร์ แต่เรื่องนี้ก็ไม่ได้ช่วยอะไรคุณได้มาก โดยเฉพาะเมื่อ Movie ของคุณเต็มไปด้วยรูปภาพแสนสวย เสียงประกอบหวือหวาอลังการ หรือแม้แต่มีความยาวหลายร้อยเฟรม ในกรณีเช่นนี้ Flash จะเริ่มเล่นทันที แต่จะตามมาด้วยอาการตะกุกตะกัก ชะงักเรื่อยๆ เพราะส่วนประกอบใหญ่ๆ ที่กล่าวมาต้องใช้เวลาในการลำเลียงส่งนานพอสมควร วิธีแก้ไขที่ดีที่สุดน่าจะเป็นการสร้าง Movie เล็กน้อยๆ ให้คนดูมีกำลังใจรอจนกว่าจะดาวน์โหลดเสร็จ หรือที่เรียกว่า Preloader

Preloader ทำงานได้โดยใช้ Frame Actions ซึ่งเป็นการกำหนดปฏิกิริยาตอบสนองหรือการกระทำต่างๆ (Actions) เมื่อตัว Movie เล่นไปถึงเฟรมที่กำหนด ตัวเฟรม Actions มีไว้จัดการกับคีย์เฟรมที่ว่าง ดังนั้นแอ็กชันจึงไม่ยึดติดกับออบเจ็กต์หรือสัญลักษณ์ใดๆ ในเฟรม ตัว Preloader จะใช้ Frame Actions ตรวจดูว่า Movie ถูกดาวน์โหลดมาหมดหรือยัง ตั้งแต่เมื่อเริ่มเล่น Movie ถ้าดาวน์โหลดหมดแล้ว ตัว Preloader จะส่งไปยังตัวเนื้อหาที่เราต้องการแสดงทันที แต่หากมิเป็นเช่นนั้น Movie ก็จะกระโดดไปยังเฟรมแรกเพื่อเริ่มเล่นใหม่ตั้งแต่ต้น

เรามาดูวิธีทำกัน ให้สร้างไฟล์ใหม่แล้วเพิ่มเฟรมสัก 50 เฟรม จากนั้นให้ลองสร้างคีย์เฟรมในเฟรมที่ 21 และ 22 ซึ่งเป็นตำแหน่งที่เราจะจัดการกับ Frame Actions ต่อไป สร้างแอนิเมชันเล็กๆ สำหรับ 20 เฟรม พอให้ดูต่อเนื่องเมื่อวนซ้ำกลับมา (เคล็ดลับ : คุณสามารถทำ Symbol ชนิด Movie clip ขนาด 20 เฟรม แล้วเอามาใส่ในตัวไทม์ไลน์หลัก ในเฟรมที่ 1 ได้ถ้าต้องการ) ภาพเคลื่อนไหวเหล่านี้จะเป็นสิ่งที่ผู้ใช้จะเห็นในระหว่างรอการโหลด



                       ภาพที่ 2

..... ภาพที่ 2 : Flash ให้คุณสามารถสร้าง Actionscript เพียงแค่คลิ้กโค้ดที่คุณต้องการ ดังที่คุณเห็นตอนทำ Preloader .....

จากนั้น คลิ้กขวาที่เฟรม 21 และเลือกคำสั่ง Actions จากเมนูป๊อบอัพ แล้วคลิ้กปุ่ม “+” แล้วเลือกโค้ด If frame is Loaded จากเมนู Basic Actions แล้วกำหนดค่า Frane Number ไปเป็นเฟรมสุดท้ายของตัว Movie (คือเฟรมที่ 50) (สำหรับ Movie ที่มีหลาย Scenes ให้คุณตรวจสอบให้ดีก่อนว่าได้กำหนดซีนสุดท้ายในฟิลด์ Scene แล้ว) ถ้าสมมติ คุณใส่ลาเบลที่เฟรมสุดท้าย คุณก็สามารถอ้างถึงลาเบลในไดอะล็อกนี้แทนตัวเลขได้ ด้วยวิธีนี้ คุณจึงไม่ต้องมานั่งแก้หมายเลขทุกครั้งที่เพิ่มเฟรมเข้าไป จากนั้นคลิ้กที่ IfFrameLoaded ให้ขึ้นแถบสว่าง แล้วคลิ้กปุ่ม “+” เลือก Goto ในเมนู Basic Actions ซึ่งจะทำให้ตัวโปรแกรมเพิ่มโค้ด GotoandPlay ในรายการ ให้กำหนดในฟิลด์ Frame เป็น 23 (ภาพที่ 2)

ขั้นตอนสุดท้าย ขณะที่เปิดไดอะล็อกบ็อกซ์ Frame Actions ทิ้งไว้ ให้เลือกเฟรมที่ 22 บนไทม์ไลน์หลัก จากนั้นคลิ้กปุ่ม “+” แล้วเลือกโค้ด Goto ในเมนู Basic Actions แล้วกำหนดที่ฟิลด์ Frame เป็นเฟรมที่ 1 เอาล่ะ ทีนี้คุณก็สร้าง Movie ได้ตามปกติตั้งแต่เฟรมที่ 23 เป็นต้นไป

ก้าวต่อไป

วิธีที่ดีที่สุดในการนำคุณก้าวไปสู่มืออาชีพในการใช้ Flash คือการเรียนรู้การแก้ปัญหา และเรียนวิธีการเพิ่ม ฟีเจอร์ที่ต้องการในเวลาอันสั้น ซึ่งอยู่ในประเด็นพื้นฐาน “ที่ควรจะรู้” เป็นที่น่าดีใจที่มีเว็บเพจจำนวนมาก ให้โอกาสผู้ใช้ Flash มาร่วมแบ่งปันเคล็ดลับต่างๆ หรือแม้แต่ตัวอย่างของ Flash มาให้ศึกษา เพียงแค่คุณพิมพ์คำว่า “Flash tips” ในเสิร์ชเอนจิ้น ที่คุณชื่นชอบ หรือบางทีคุณอาจยังมองหาโปรแกรมอื่นๆ ที่สามารถสร้าง Movie ของ Flash ได้เหมือนกัน เพียงขอให้ทุ่มเทความสนใจ ความพยายามเพียงเล็กน้อย กับจินตนาการอันบรรเจิด ในไม่ช้าคุณจะต้องแปลกใจว่า คุณสามารถทำอะไรกับ Flash ได้มากกว่าที่เคยคิด

ข้อมูลจาก : http://www.arip.co.th
โดย Warren Ernst : ศรัณย์ หงสกุล

คุณอาจสนใจ
ของดีที่ซ่อนอยู่ใน Windows
เว็บไทยดีดี (15,280 - 28 ก.ค. 50)
เจาะลึกการใช้ Symbolism Tool และ Data Driven Graphic กับงานพิมพ์ และงานเว็บ (ตอนจบ)
ธนิศา ไชยภูริพัฒน์ (33,776 - 19 ม.ค. 51)
เทคนิคการทำไฟล์ config.inc.php
Mr.GuruZ (48,061 - 03 มิ.ย. 49)
แปลง VCD Karaoke เป็น MP3
เว็บไทยดีดี (17,755 - 22 ม.ค. 51)
การทำปุ่มควบคุมการเล่น movie ของ flash
Charoen (70,471 - 21 พ.ย. 50)
รู้ไว้ใช่ว่า ย่อหน้าต่างโปรแกรมทั้งหมดอย่างรวดเร็วด้วยปุ่ม Windows + M
เว็บไทยดีดี (13,641 - 29 ก.ย. 50)
การใส่ Comment ใน HTML
สายลม (88,253 - 04 มิ.ย. 49)
การใช้เครื่องมือกลุ่ม Formatting ในการวาดรูปต่าง ๆ
หมูขุน (12,749 - 04 ก.พ. 50)