จริงๆ แบนเนอร์ตัวนี้ดองไว้นาน พอสมควรแล้ว ไม่ได้เขียนสักที เป็นแบนเนอร์ที่ผมชอบไอเดียมาก แต่การทำอาจยุ่งยากสักเล็กน้อย
ลองคลิกที่ภาพเพื่อเข้าไปดูเลยครับ

ขั้นตอนการทำ

แบนเนอร์ตัวนี้มีสิ่งที่พิเศษกว่าแบนเนอร์ทั่วๆไปเล็กน้อยนั่นคือ มันใช้ข้อมูลเรื่องความสูงของ browser และ position ของ scrollY มาใช้ในการกำหนด animation ในตัวแบนเนอร์

ซึ่งโดยทั่วไปแล้ว แฟลช นั้นไม่สามารถที่จะรู้ได้เลยว่า browser ที่ตัวเองอยู่นั้นมี ขนาดเท่าไร หรือแม้แต่ถูกเลื่อน ไปเท่าใดแล้ว ยิ่งถ้าเป็นการดัก Event เมื่อ browser มีการเปลี่ยนแปลงขนาด นั้นยิ่งทำไม่ได้เลย

แต่ว่าเราสามารถใช้ ความรู้เพียงเล็กน้อย ในเรื่อง Javascript เพื่อที่จะส่ง ข้อมูลเหล่านั้นให้แฟลชได้ โดยผ่าน ExternalInterface ของแฟลช

การทำงานของ ExternalInterface จะมี 2 รูปแบบก็คือ

รูปแบบแรก

Flash เรียกใช้งานฟังก์ชันของจาวาสคริป

//ACTIONSCRIPT
import flash.external.*;
ExternalInterface.call("alert", "Alert from flash.");

รูปแบบที่สอง

แฟลชประกาศชื่อฟังก์ชัน และรอให้ javascript เรียกใช้ฟังก์ชันนั้น

สคริปที่แฟลช

//ACTIONSCRIPT
import flash.external.*;
ExternalInterface.addCallback("onWindowResize", null, onWindowResize);
function onWindowResize (h) {
  some_tf.text = "got height property from javascript :"+h;
}

ExternalInterface.addCallback นั้นใช้เพื่อบอกว่าเมื่อจาวาสคริป เรียกฟังก์ชันนี้ให้ทำงานฟังก์ชันอะไรต่อในแฟลช

Javascript

//JAVASCRIPT:
function onWindowResize () {
 var H = getInnerHieght();

 //ใน object tag ของ HTML
 //อย่าลืมตั้งชื่อ id ของ แฟลช ว่า "externaltest" ด้วย
 getSWFObject("externaltest").onWindowResize( H );
}

function  getSWFObject (flashID) {
   if (navigator.appName.indexOf('Microsoft') != -1) {
    return window[flashID];
   } else {
    return document[flashID];
   }
}
function getInnerHieght () {
    return document.body.offsetHeight;
}

window.onresize = onWindowResize;

จากโค้ดด้านบน ที่บรรทัดสุดท้ายเป็นการเริ่มต้นทำงานสคริปชุดนี้
โดยที่ เราจะบอกให้โปรแกรม ทำงานฟังก์ชัน onWindowResize ทันทีเมื่อ browser window มีการเปลี่ยนแปลงขนาด

เมื่อฟังก์ชัน onWindowResize เริ่มทำงาน
โปรแกรมจะอ่านค่าความสูงของวินโดวจากฟังก์ชัน getInnerHieght จากนั้น
สั่งให้แฟลชทำงานฟังก์ชันที่ได้ register ไว้ โดยผ่าน argument ความสูงเข้าไปในแฟลชโดยตรงเลย

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

ดาวน์โหลดตัวอย่างการใช้งาน externalinterface ที่นี่ครับ
externalinterface_source (269)

Share on Facebook