เพิ่งเห็นเว็บไซต์หนังสือพิมพ์ไทยรัฐออนไลน์โฉมใหม่ เป็นที่น่าตื่นตาตื่นใจกับผู้ใช้อินเตอร์เน็ตในบ้านเรามากเลยทีเดียว ทำได้ดีทั้งในด้านการนำเสนอข้อมูล และการออกแบบเว็บไซต์ตามเทรนการออกแบบเว็บไซต์สมัยใหม่ และที่สำคัญยังเห็นการนำเทคนิค sIFR มาใช้ด้วย

sIFR ย่อมาจาก Scalable Inman Flash Replacement ซึ่งก็คือเทคนิคการแทนที่การแสดงผล Font บนหน้าเว็บที่เป็น HTML ธรรมดาด้วย Font สวยๆ ตามต้องการ โดยใช้ JavaScript กับ Flash เข้ามาช่วย

มีรายละเอียดและการใช้งานเป็นภาษาไทยอยู่แล้ว สามารถอ่านเพิ่มเติมได้ตามนี้ครับ..

• ใช้ font สวยๆ บนเว็บไซต์ ด้วย sIFR
• sIFR คืออะไร
• ฝัง sIFR ลงบนเว็บเพจ

สำหรับคนที่ยังนึกไม่ออกว่าพื้นหลังโปร่งใส หรือ Transparency Background นั้นคืออะไรให้ดูรูปด้านบนนี้ครับ ถ้าเราวาดรูปลิงในโปรแกรม Flash เมื่อ Publish ออกมาเป็นไฟล์ .swf แล้วนำไปวางบนหน้าเว็บเพจ มันจะมีพื้นหลังที่เป็นกรอบสีขาวติดมาด้วยแบบรูปด้านขวา แต่ถ้าเราไม่ต้องการให้เป็นเช่นนี้ ก็ต้องกำหนดค่าเว็บเพจนั้นแสดงผลไฟล์ Flash โดยให้มีพื้นหลังเป็นแบบโปร่งใส หรือ Transparency แบบรูปด้านซ้ายครับ

วิธีทำ สามารถทำได้ 3 วิธี ดังนี้

วิธีที่ 1 – ตั้งค่า Publish Settings ในโปรแกรม Flash

1. เลือกเมนู Flie >> Publish Settings… (หรือกด Ctrl+Shift+F12)
2. จะมีหน้าต่าง Publish Settings ขึ้นมาให้เลือกแถบ HTML
3. ในช่อง Window Mode ให้เลือก “Transparency Windowless” แล้วกดปุ่ม OK
4. เมื่อตั้งค่าเรียบร้อยแล้วก็ Publishไฟล์ HTML และ SWF ออกมาได้เลยครับ

.

.

วิธีที่ 2 – ตั้งค่าในการแสดงผลไฟล์ Flash ในโปรแกรม Dreamweaver

1. ใส่ไฟล์ Flash ลงในหน้าเว็บเพจโปรแกรม Dreamweaver ตามปกติ
2. คลิ๊กขวาบนไฟล์ Flash แล้วเลือก Parameters…
3. จะมีหน้าต่าง Parameter ขึ้นมา ในฝั่ง Parameter ให้ใส่ว่า “wmode” ส่วนฝั่ง Value ให้ใส่ว่า “transparent”
4. คลิ๊กปุ่ม OK แค่นี้ก็เสร็จแล้วครับ

.

.

วิธีที่ 3 – แก้โค้ด HTML เองเลย
ต้องเข้าไปแก้โดยการเพิ่มโค้ด 2 ที่ดังนี้ครับ

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400">
<param name="movie" value="flashmovie.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="flashmovie.swf" width="550" height="400" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>

.

.

Thanks :
ขอขอบคุณ “ปิง” สำหรับภาพประกอบรูปลิงครับ

วิทยาลัยนานาชาติ มหาวิทยาลัยศิลปากร เป็นสถาบันที่เปิดสอนหลักสูตรนานาชาติร่วมกับสถาบันจากต่างประเทศ ในส่วนของ Header จึงได้สื่อถึงข้อดังกล่าว โดยใช้สถานที่สำคัญของแต่ละประเทศ ได้แก่ หอไอเฟล ฝรั่งเศษ และหอนาฬิกาบิ๊กเบน สหาราชอาณาจักร ตั้งอยู่ในซุ้มประตูของมหาวิทยาลัยศิลปากร โดยมีโลโก้, ชื่อวิทยาลัย, Motto, และที่อยู่เว็บไซต์ อยู่ทางด้านบนซ้าย

Navigation Bar ประกอบไปด้วยหัวข้อหลัก 6 หัวข้อ วางอยู่บนแถบสีแดง ซึ่งเป็นสีประจำวิทยาลัยนานาชาติ เมื่อนำเมาส์ Over บนหัวข้อ จะมีข้อความปรากฏขึ้นบนกำแพงแสดงรายละเอียดเนื้อหาย่อยภายในหัวข้อหลักนั้นๆ

[kml_flashembed movie="http://www.donuzz.com/images/49008_suic/main3_donuzz.swf" height="319" width="425" /]

?

หน้าแรกของเว็บ

?

เมื่อเข้าสู่หัวข้อหลักใดๆ แล้ว จะมี Navigation ทางด้านซ้ายเพื่อให้เลือกหัวข้อของเนื้อหาย่อย

Hua Hin [interactive] Guide Map
Software Package for Design Il

>> ลองใช้งานจริงที่นี่เลยครับ < <

?

โปรแกรมที่ใช้พัฒนา : Macromedia Flash MX 2004, Adobe Illustrator CS

แผนที่นำเที่ยวเมืองหัวหินแสดงที่ตั้งของสถานที่สำคัญต่างๆ ในเมืองหัวหิน

• โรงแรม, ที่พัก
• ร้านอาหาร, ที่กิน
• สถานที่น่าสนใจ
• ร้านค้า, ที่ซื้อของ
• สถานีรถ, คิวรถ
• ธนาคาร
• สถานที่สำคัญทางราชการ
• ชื่อถนน, ซอย

สามารถเลื่อนแผนที่โดยกดปุ่มลูกศรได้ 4 ทิศทาง และยังสามารถซูม เข้า-ออก ได้ 3 ระดับ
เมื่อนำเมาส์ไปวางบนจุดที่สนใจ จะมีข้อมูลของสถานที่นั้นๆ แสดงขึ้นมา

?

?

ภาพตัวอย่าง