วิธีใช้ sIFR อย่างรวบรัด

Zafire06 · 30 เม.ย. 2009, 23:22 น.

sIFR เป็นวิธีการแนบฟอนต์ลงบนหน้าเว็บโดยความช่วยเหลือของ Flash และ Javascript
รายละเอียดแบบละเอียดสามารถเสาะหาได้ที่ URL ข้างล่างนี้
http://www.mikeindustries.com/blog/sifr/

เนื่องจากอันเก่ามันดูงงๆ ผมเลยจะมาเขียนใหม่ !
ไม่รู้จะยังงงเหมือนเดิมรึเปล่า

1 ดาวน์โหลดมาก่อน

โดยไปที่ http://www.mikeindustries.com/blog/sifr/ นั่นแหละครับ

เลื่อนๆ ลงมาหน่อยเดี๋ยวก็เจอ

iannnnn · 30 เม.ย. 2009, 23:23 น.

เยี่ยมสุด
เร็วๆ นี้จะเรียนเชิญบทความนี้ไปลงในหน้าบทความด้านหน้าเว็บเลยนะครับ

Zafire06 · 30 เม.ย. 2009, 23:25 น.

ตายแล้ว
สงสัยง่วงไปหน่อย
โพสต์ผิดหมวดเลย

iannnnn · 30 เม.ย. 2009, 23:26 น.

ไปนอนไป๊

蓝月 (lán yuè) · 30 เม.ย. 2009, 23:43 น.

น้องบอยยยยยยย

Zafire06 · 01 พ.ค. 2009, 10:57 น.

2 ปรับแต่งไฟล์แฟลชสำหรับใช้งาน

โดยเมื่อแตกซิปแล้ว จะมีไฟล์อยู่ไฟล์หนึ่งชื่อ sIFR.fla ซึ่งเป็นไฟล์สำหรับโปรแกรม Flash Professional
ให้เปิดไฟล์นี้ขึ้นมา
เสร็จแล้วก็ดับเบิ้ลคลิก จะขึ้นมาเป็นแบบนี้

อ้างอิง

(ภาพที่ 2.1) เพื่อนร่วมงานของคุณคนแรก

ดูที่ลูกศรสีแดงก่อน
ให้เปลี่ยนฟอนต์เป็นฟอนต์ที่ต้องการ
แต่ไม่ต้องไปเปลี่ยนขนาดตัวอักษรนะครับ
ปล่อยไว้งั้นแหละ มันไม่ทำอะไรเราหรอก

เสริมนิดหนึ่งคือ เราสามารถใช้เป็นตัวหนาและ/หรือตัวเอียงก็ได้นะครับ

ที่นี้มาดูที่ลูกศรสีน้ำเงินกันบ้าง
ตรงนี้สำคัญนะครับ เพราะจะทำให้เราสามารถใช้ภาษาไทยได้
กดเข้าไปตรงนั้นแหละครับ
เสร็จแล้วจะเจอหน้าต่างคล้ายๆ ข้างล่าง (ของผมคือ Flash CS3)

อ้างอิง

(ภาพที่ 2.2) ถ้าจะใช้ภาษาไทย อย่าลืมภาษาไทย

ให้เพิ่ม Thai (91 Glyphs) เข้าไปด้วย
(กด Ctrl ค้างไว้ แล้วคลิกที่ Thai (91 Glyphs) ที่ในภาพมีการเน้นส้มไว้)

ผมขอทำที่คั่นหน้าไว้ตรงนี้แล้วกัน
จะได้อ้างถึงทีหลังได้ง่ายๆ
ที่คั่นหน้า

เสร็จแล้วก็ให้เปิดไฟล์ customize_me.as ขึ้นมาครับ
จะเจอโค้ดประมาณนี้

โค้ด เลือกทั้งหมด

/*	sIFR v2.0.7
	Copyright 2004 - 2008 Mark Wubben and Mike Davidson. Prior contributions by Shaun Inman and Tomas Jogin.

	This software is licensed under the CC-GNU LGPL <http://creativecommons.org/licenses/LGPL/2.1/>
*/

// true unlocks .swf for usage on local networks (and testing locally)
// false locks .swf so it may only be served from a domain below

allowlocal = true;

// fill in whatever domains you want this to work on... must be exact matches... asterisk means all

allowedDomains = new Array("*","www.yourdomain.com","yourdomain.com");

ก็ให้แก้ตามที่ต้องการเลยครับ
โดยสำหรับ allowlocal = true เนี่ย
คืออนุญาตให้ใช้บนเครื่องได้ (คล้ายๆ Local Host)
ส่วน allowedDomains เนี่ย
ก็ใส่เฉพาะโดเมนที่เราต้องการให้ใช้งานได้ครับ (* คืออนุญาตทุกที่)

ต่อไปก็ไปที่เมนู File > Export > Export Movie...
แล้วบันทึกเป็นชื่ออะไรก็ได้แล้วแต่คุณ สมมุติว่าชื่อ rehoneyfly.swf
จากนั้นมันจะเด้งหน้าต่างข้างล่างนี้ขึ้นมา
ต้อง Export เป็น Flash 6 นะครับ (รวมทั้ง Actionscript 1.0 ด้วย)

อ้างอิง
(ภาพที่ 2.3) ตรวจสอบดูให้ดีก่อน Export

และแล้ว ในที่สุด !
คุณก็จะได้ไฟล์แฟลชสำหรับใช้กับ sIFR

ซึ่งในที่นี้จะชื่อ rehoneyfly.swf
(น่าตื่นเต้นมั้กๆ

)

Zafire06 · 01 พ.ค. 2009, 11:54 น.

3 ทำงานกับ CSS

ในไฟล์ที่เราดาวน์โหลดมาจากเว็บของ sIFR นั้น
จะมีไฟล์ CSS แนบมาให้ 3 ไฟล์

ได้้แก่
all.css
sIFR-print.css
และ sIFR-screen.css

สำหรับ all.css ไม่มีอะไรเกี่ยวข้องกับการใช้งาน sIFR โดยตรงสักเท่าไหร่นัก
ดังนั้น ไม่ต้องไปยุ่งกับมันก็ได้

แต่สำหรับอีก 2 ไฟล์ที่เหลือ ค่อนข้างมีความสำคัญ
โดยให้คุณ

1. คัดลอกเอาโค้ดใน sIFR-print.css ไปใส่ไว้ไฟล์ CSS ที่ใช้กำหนดรูปแบบสำหรับการพิมพ์ออกทาง Printer ของคุณ
2. คัดลอกเอาโค้ดใน sIFR-screen.css ไปใส่ไว้ไฟล์ CSS ที่ใช่กำหนดรูปแบบสำหรับการแสดงผลทางหน้าจอของคุณ

ที่ทำทั้งสองอันนี้ เพื่อให้เวลาพิมพ์ออกทาง Printer จะได้ออกมาเป็นตัวอักษรนั่นเอง

อ้างอิง
(ภาพที่ 3.1) การกำหนดรูปแบบสำหรับการแสดงผลต่างอุปกรณ์

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

Zafire06 · 01 พ.ค. 2009, 11:59 น.

4 เพิ่ม Javascript สุดมหัศจรรย์ !

คุณจะต้องเรียกไฟล์ sifr.js (ที่อยู่ในไฟล์ที่ดาวน์โหลดมาในตอนแรก) ไว้ใน <head>...</head> ของทุกๆ หน้าเว็บที่คุณต้องการใช้ sIFR

ส่วนวิธีการก็คือเพิ่มบรรทัดนี้ลงไประหว่าง <head> และ </head>

โค้ด เลือกทั้งหมด

<script src="sifr.js" type="text/javascript"></script>

(โอ้ แน่นอนว่าคุณต้องกำหนดตำแหน่งของไฟล์ sifr.js บน Server ของคุณเองด้วย)

Zafire06 · 01 พ.ค. 2009, 12:10 น.

5 ใส่ Replace Statement

คุณอาจจะงงว่าอะไรคือ Replace Statement
มันก็คือโค้ดที่จะทำให้เราสามารถใช้ sIFR ได้นั่นเอง

ก่อนอื่นเริ่มที่หน้าตามันก่อน
หน้าตาของมันก็จะเป็นประมาณนี้

อ้างอิงif(typeof sIFR == "function"){
sIFR.replaceElement("h1", named({sFlashSrc: "./rehoneyfly.swf", sColor: "#000", sCase: "upper"}));
};

นี่คือตัวอย่างเฉยๆ

ส่วนการเขียนนั้น เป็นประมาณนี้

อ้างอิงif(typeof sIFR == "function"){
sIFR.replaceElement("Element ที่จะแก้ฟอนต์", named({ชื่ออาร์กิวเมนต์1: "ค่าอาร์กิวเมนต์ที่ต้องการ1", ชื่ออาร์กิวเมนต์2: "ค่าอาร์กิวเมนต์ที่ต้องการ2"}));
};

เริ่มที่ Element ที่จะแก้ฟอนต์ ก่อน
ตรงนี้จะอ้างอิงจาก CSS
นั่นคือเป็นการอ้างถึง Element ในแบบเดียวกับที่ CSS ทำ

เช่น
ถ้าต้องการแก้ฟอนต์ของ h1
ก็เขียนลงไปว่า "h1"
ถ้าต้องการแก้ฟอนต์ของ h1.myclass
ก็เขียนลงไปว่า "h1.myclass"
เป็นต้น

ส่วนอาร์กิวเมนต์นั้น
อาร์กิวเมนต์เป็นตัวคอยกำหนดคุณลักษณะต่างๆ ของตัวหนังสือที่ใช้ sIFR ของเรา
ซึ่งมีอยู่หลายตัวด้วยกัน ดังต่อไปนี้

1. sFlashSrc คือ ตำแหน่งที่อยู่ของไฟล์แฟลชที่เราได้จากขั้นตอนที่ 2
2. sColor คือ สีตัวอักษร (ในรูปแบบ #000000)
3. sLinkColor คือ สีตัวอักษรของลิงก์ (ในรูปแบบ #000000)
4. sHoverColor คือ สีตัวอักษรของลิงก์ตอนเอาเคอร์เซอร์ไปวางทับ (ในรูปแบบ #000000)
5. sBgColor คือ สีพื้นหลัง (พิมพ์มาตั้งสามอันแล้ว อันนี้เดาเอาเองแล้วกัน

)
6. nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft กำหนดค่า Padding เป็น px (แต่ไม่ต้องพิมพ์หน่วยลงไปด้วย)
7. sFlashVars ค่าอื่นๆ เพิ่มเติม

สามารถใช้อะไรต่อไปนี้ได้ (แต่ละอันจะคั่นด้วย &)
7.1 textalign=center จัดให้อยู่กลาง
7.2 offsetLeft=5 ผลักข้อความไปทางขวา 5 px -- แน่นอนว่าคุณสามารถเปลี่ยนตัวเลขได้
7.3 offsetRight=5 เดาเอาเอง

7.4 underline=true เพิ่มขีดเส้นใต้ตอนลิงก์โดนเมาส์ทับ
8. sCase กำหนดว่าจะเปลี่ยนเป็นตัวพิมพ์เล็ก/ใหญ่ ใช้ค่า upper สำหรับการเปลี่ยนเป็นตัวพิมพ์ใหญ่ทั้งหมด และ lower สำหรับการเปลี่ยนเป็นตัวพิมพ์เล็กทั้งหมด
9. sWmode ใช้ค่า transparent ถ้าต้องการให้พื้นหลังโปร่ง และ opaque ถ้าต้องการให้พื้นหลังทึบ แต่เค้าไม่แน่นำให้ใช้ เพราะบางเบราว์เซอร์จะมีปัญหากับการ Render แฟลชที่พื้นหลังโปร่ง

มาดูตัวอย่างที่แตกต่างกันอีกทีหนึ่ง

อ้างอิงif(typeof sIFR == "function"){
sIFR.replaceElement("div#titling", named({sFlashSrc: "rehoneyfly.swf", sColor: "#333333", sLinkColor: "#444444", sHoverColor: "#555555"}));
};

เมื่อรู้ Pattern เราก็เขียนออกมาเรื่อยๆ
เราก็จะได้ Replace Statement มาในที่สุด

(อย่างน้อยผมก็หวังว่าจะเป็นอย่างนั้น

)

คำถามต่อมาคือ
เมื่อได้ไอ้ Replace Statement ออกมาแล้ว
จะเอามันไปไว้ไหน

มีสองตัวเลือกให้คุณเลือก

วิธีแรก ใส่ไว้ในไฟล์ sifr.js

และ วิธีที่สอง ใส่ไว้ใน body
วิธีนี้ต้องชี้แจงกันหน่อย
คุณสามารถจะใส่ไว้ที่ไหนก็ได้ระหว่าง <body> และ </body>

เช่น

อ้างอิง<body>
...
<script type="text/javascript">
if(typeof sIFR == "function"){
sIFR.replaceElement("div#titling", named({sFlashSrc: "rehoneyfly.swf", sColor: "#333333", sLinkColor: "#444444", sHoverColor: "#555555"}));
};
</script>
...
</body>

ส่วนจะำไว้ตรงไหนระหว่างสองที่นี้นั้น
... พิจารณาเอาเองครับ

蓝月 (lán yuè) · 01 พ.ค. 2009, 13:17 น.

ปาดดดด

(เอ๊ะปาดได้ป่าวเนี่ย)

Zafire06 · 01 พ.ค. 2009, 13:50 น.

6 ทำงานกับ CSS อีกรอบ

ให้คุณเปิดไฟล์ CSS ที่ใช้สำหรับการแสดงผลบนหน้าจอออกมาแก้ (ดูขั้นตอนที่ 3)
โดยในที่นี้ สมมุติว่าคุณจะแก้ฟอนต์แค่ใน h1 เพียงอย่างเดียว

คุณก็ต้องเติมโค้ดลักษณะนี้ลงไปในไฟล์ CSS นั้น

อ้างอิง.sIFR-hasFlash h1 {
visibility: hidden;
/* ตรงนี้จะเพิ่มอะไรอย่างอื่น */
}

ส่วนจะเพิ่มอะไรนั้น
เราสามารถเพิ่มบางอย่าง เช่น การกำหนดขนาดตัวอักษร
เป็นต้น

แน่นอนว่าคุณสามารถจะแก้ฟอนต์สำหรับหลายๆ Element พร้อมกันได้ เช่น h1, h2, div#myid เป็นต้น โดยการเขียน Replace Statement มารองรับ ประกอบกับการแก้ CSS ตามแบบข้างบนนี้

Zafire06 · 01 พ.ค. 2009, 14:09 น.

7 นอน

พอแล้วครับ ผมง่วง

@srakrn · 01 พ.ค. 2009, 14:26 น.

^
^
^
วรรณยุกต์ลอยนี่ครับ

Zafire06 · 01 พ.ค. 2009, 14:28 น.

14 แก้สระลอย

โอ้ แน่นอน อย่างที่ผมเคยสัญญาเอาไว้
ผมจะสาธิตวิธีการแก้สระลอยใน sIFR

เราต้องไปแก้ตั้งแต่ขั้นตอนที่สองเลยครับ

อย่าเพิ่งตกใจไป
แก้เพียงแค่นิดเดียวเท่านั้น (จริงๆ

)

กลับไปดูที่ที่คั่นหน้าสีม่วง
ที่ภาพที่ 2.2

อ้างอิง
(ภาพที่ 14.1) แก้นิดหน่อย

ในช่องที่ลูกศรสีส้มชี้ไปหา
ให้ Copy ตัวอักษรจากไฟล์แฟลชข้างล่างนี้

http://img3.f0nt.com/flash/743bbe0810708a51d1795d754063053e.swf

ไปไว้ในช่องนั้น

แต่ !!
อย่าเพิ่งดีใจและ Export ไฟล์ทันควันเลยนะครับ

ให้เปิดไฟล์ dont_customize_me.as มาก่อน
เปิดมาแล้วในนำโค้ดนี้ไปไว้ปลายสุดของไฟล์เลย

โค้ด เลือกทั้งหมด

function reType(target) {

// วรรณยุกต์
var reAccent = new String(mbchr(0x0E48)+mbchr(0x0E49)+mbchr(0x0E4A)+mbchr(0x0E4B)+mbchr(0x0E4C));
var reAccentLowLeft = new String(mbchr(0xF705)+mbchr(0xF706)+mbchr(0xF707)+mbchr(0xF708)+mbchr(0xF709));
var reAccentLowRight = new String(mbchr(0xF70A)+mbchr(0xF70B)+mbchr(0xF70C)+mbchr(0xF70D)+mbchr(0xF70E));
var reAccentUpperLeft = new String(mbchr(0xF713)+mbchr(0xF714)+mbchr(0xF715)+mbchr(0xF716)+mbchr(0xF717));

// สระที่อยู่ด้านบน
var reVowelUpper = new String(mbchr(0x0E34)+mbchr(0x0E35)+mbchr(0x0E36)+mbchr(0x0E37)+mbchr(0x0E31)+mbchr(0x0E4D)+mbchr(0x0E47));
var reVowelUpperLeft = new String(mbchr(0xF701)+mbchr(0xF702)+mbchr(0xF703)+mbchr(0xF704)+mbchr(0xF710)+mbchr(0xF711)+mbchr(0xF712));

// สระที่อยู่ด้านล่าง
var reVowelLow = new String(mbchr(0x0E38)+mbchr(0x0E39)+mbchr(0x0E3A));
var reVowelLower = new String(mbchr(0xF718)+mbchr(0xF719)+mbchr(0xF71A));

// ญ หญิง
var reYoying = new String(mbchr(0x0E0D));
var reYoyingNoBase = new String(mbchr(0xF70F));

// ฐ ฐาน
var reThothan = new String(mbchr(0x0E10));
var reThothanNoBase = new String(mbchr(0xF700));

// ตัวอักษรพิเศษ ยาวบนกับยาวล่าง
var reAlphabetLongTail = new String(mbchr(0x0E1B)+mbchr(0x0E1D)+mbchr(0x0E1F));
var reAlphabetLongBase = new String(mbchr(0x0E0E)+mbchr(0x0E0F));

// สระอำ
var reSaraAm = new String(mbchr(0x0E33));
var reSaraAmLeft = new String(mbchr(0xF711)+mbchr(0x0E32));

// กำหนด resultString
var resultString:String = "";

// ทำ Loop เพื่อพิจารณาตัวอักษรทีละตัว
for (var i = 0; i < target.length; i++) {

	var char = target.charAt(i);
	//var charCode = target.charCodeAt(i);
	
	var isBeforeVowelLow = (reVowelLow.indexOf(target.charAt(i+1)) > -1) && (i+1 < target.length);
	// มี ญ หญิง ?
	var hasYoying = (reYoying == char);
	// มี ฐ ฐาน ?
	var hasThothan = (reThothan == char);
	// มีสระอำ ?
	var hasAm = (reSaraAm == char);
	// ตำแหน่งวรรณยุกต์
	var atAccent = reAccent.indexOf(char);
	// ตำแหน่งสระบน
	var atVowelUpper = reVowelUpper.indexOf(char);
	// ตำแหน่งสระล่าง
	var atVowelLow = reVowelLow.indexOf(char);
	// อยู่หน้าสระล่าง ?
	var isBeforeVowelLow = (reVowelLow.indexOf(target.charAt(i+1)) > -1) && (i+1 < target.length);
	// ตามหลัง ปฝฟ ?
	var isAfterLongTail = (reAlphabetLongTail.indexOf(target.charAt(i-1)) > -1) && (i >= 1);
	// ตามหลัง ปฝฟ สองตัว ?
	var isDoubleAfterLongTail = (reAlphabetLongTail.indexOf(target.charAt(i-2)) > -1) && (i > 1);
	// อยู่ก่อนหน้าสระอำ ?
	var isBeforeAm = (reSaraAm.indexOf(target.charAt(i+1)) > -1) && (i+1 < target.length);
	// อยู่หลังสระบน ?
	var isAfterVowelUpper = (reVowelUpper.indexOf(target.charAt(i-1)) > -1) && (i > 0);
	// อยู่หลังสระล่าง ?
	var isAfterVowelLow = (reVowelLow.indexOf(target.charAt(i-1)) > -1) && (i > 0);
	// อยู่หลังฐานยาว ?
	var isAfterLongBase = (reAlphabetLongBase.indexOf(target.charAt(i-1)) > -1) && (i > 0);
	// อยู่หลังวรรณยุกต์ ?
	var isAfterAccent = (reAccent.indexOf(target.charAt(i-1)) > -1) && (i > 0);
	// ขึ้นบรรทัดใหม่ ?
	var isNewLine = (char == newline);
	
	// ญ หญิง
	if (!isNewLine && hasYoying && isBeforeVowelLow) { // MAJ
		resultString += reYoyingNoBase;
	}
	// ฐ ฐาน
	else if (!isNewLine && hasThothan && isBeforeVowelLow) { // MAJ
		resultString += reThothanNoBase;
	}
	// สระอำ
	else if (!isNewLine && hasAm && (isAfterLongTail || (isDoubleAfterLongTail && isAfterAccent))) { // MAJ
		resultString += reSaraAmLeft;
	}
	// วรรณยุกต์
	else if (!isNewLine && (atAccent > -1)) { // MAJ
		var addedVar = new String();
		// ล่างซ้าย
		if ((isAfterLongTail && !isBeforeAm) || (isDoubleAfterLongTail && isAfterVowelLow)) {
			var addedVar = reAccentLowLeft.charAt(atAccent);
		}
		// บนขวา
		else if ((!isDoubleAfterLongTail && isAfterVowelUpper) || (!isAfterLongTail && isBeforeAm)) {
			var addedVar = char;
		}
		// บนซ้าย
		else if ((isDoubleAfterLongTail && isAfterVowelUpper) || (isAfterLongTail && isBeforeAm)) {
			var addedVar = reAccentUpperLeft.charAt(atAccent);
		}
		// ล่างขวา
		else {
			var addedVar = reAccentLowRight.charAt(atAccent);
		}
		resultString += addedVar;
	}
	// สระบนหลบซ้าย
	else if (!isNewLine && (atVowelUpper > -1) && (isAfterLongTail || isDoubleAfterLongTail)) { // MAJ
		var vowelVar = reVowelUpperLeft.charAt(atVowelUpper);
		resultString += vowelVar;
	}
	// สระล่างกว่า
	else if (!isNewline && (atVowelLow > -1) && isAfterLongBase) { // MAJ
		var lowVar = reVowelLower.charAt(atVowelLow);
		resultString += lowVar;
	}
	// นอกเหนือจากนี้ถือว่า ...
	else { // MAJ
		resultString += char;
	}
}
	
return resultString;

}

จากนั้น หาบรรทัดที่ 101
จะเจอโค้ดเขียนว่า

โค้ด เลือกทั้งหมด

holder.txtF.htmlText = txt;
ให้เปลี่ยนเป็น

โค้ด เลือกทั้งหมด

holder.txtF.htmlText = reType(txt);

จากนั้นก็ Export ออกมาตามขั้นตอนปกติ

เท่านี้ เราก็จะได้ไฟล์แฟลชอันใหม่ไฉไลกว่าเดิม
ที่สระไม่ลอยแล้วครับ !

Zafire06 · 01 พ.ค. 2009, 14:40 น.

29 ทางเลือกอื่น

คุณมีทางเลือกอื่นนะครับ !

1 sIFR lite
คล้ายๆ sIFR แต่เบากว่า

2 FaceLift Image Replacement (FLIR)
เป็นการแทนที่ตัวอักษรด้วยภาพ
โดยจะสร้างมาจากทางฝั่งเซอร์เวอร์ (อาศัย GD Library)

3 Cufón
เป็นการแทนที่ตัวอักษรด้วย SVG และ VML
(คืออะไรเนี่ย

)

4 typeface.js
ใช้ Javascript เข้าช่วย (อีกแล้ว)

5 CSS 3 Font Face
รอไปก่อน

และอื่นๆ ที่ผมยังไม่รู้จัก