การทำ Background โปร่งใส ให้ไฟล์ Flash (SWF)

by Donuzz on September 12th, 2007

เมื่อหลายสัปดาห์ก่อนพลอยมาถามเรื่องวิธีการทำให้พื้นหลังของไฟล์ Flash เป็นแบบโปร่งใสเวลาแสดงผลบนหน้าเว็บเพจ ก็เลยช่วยกันหาวิธีทำจนได้มาดังนี้ครับ

Flash Transparency Background - การทำ Background โปร่งใส่

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

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


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

Flash Transparency Background - การทำ Background โปร่งใส่

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

.

.

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

Flash Transparency Background - การทำ Background โปร่งใส่

Flash Transparency Background - การทำ Background โปร่งใส่

  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 :
ขอขอบคุณ “ปิง” สำหรับภาพประกอบรูปลิงครับ

From → Web Design

19 Comments
  1. โอ้.. thanksหลาย เคยอ่านเจอเหมือนกัน แตดัน่ลืมไปแล้ว ดีๆทบทวนความรู้

  2. _PinGTwO_ permalink

    ขอบใจที่ให้เครดิต และความรู้นะพลอยรุ่ง O_O

  3. เคยประสบกับปัญหานี่เช่นกัน :S
    ขอบคุณที่มาชี้ทางสว่างให้ :)

  4. โดนัทเป็นคนหามาให้เราแท้ๆ ขอบคุณคับ

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

  5. ขอบคุณมากโดเราก็ลืมไปแล้วเหมือนกัน – -.

    ตอบนะ…
    ลองอีกรอบ….ไม่รู้ทำไมโพสไม่ติดหว่า
    < = มากกว่า &lt_;
    > = น้อยกว่า &gt_;
    เอา _ ออกเวลาพิมพ์นะ

  6. โอย post ไปที่นึงแล้วมัน fail อ่ะ ต้องพิมพ์ใหม่เลย
    หวัดดีคับคุณ blue rabbit ผมแวะมาเยี่ยมบ้าง
    คุณ blue rabbit เขียนเก่งดี น่าชื่นชมอ่ะ >__

  7. อ่ะ ทำไมผมพิมตั้งยาว มันขึ้นให้แค่นั่นหล่ะ T_T

  8. taiko – ขอบคุณนะครับ
    ช่วงนี้รู้สึกว่า wordpress จะมีปัญหามากเลย

    1. Comment แล้ว Fail

    2. ถ้าพิมพ์เครื่องหมาย “น้อยกว่า” ใน Comment ข้อความหลังเครื่องหมายจะหายไปหมดเลยครับ

  9. โฮ T_T เพราะแบบนี้นี่เอง
    งั้นผมกลับมาพิมพ์ใหม่ -3-
    งวดนี้จะไม่มีเครื่องหมายต้องห้าม
    สำหรับ flash นี่ผมไม่ได้จับมานานมากๆ
    เมื่อสามสี่วันก่อนต้องเขียน as ให้ที่ทำงาน
    ตั้งใจจะให้มัน แสดง code html งงอยู่ตั้งนานว่าทำไง
    เพราะ assign ค่าใส่ตัวแปรตรง ๆ แต่พอมัน render ขึ้น
    มันrender เป็น html ซะงั้น
    ผมว่าblog คุณ blue rabbit สวยดีนะ ชอบสี+simplicityอ่ะ
    เห็นคุณเขียนเกี่ยวกับ social network ซึ่งผมก็สนใจเหมือนกัน
    เลยขอถือโอกาสแนะนำหนังสือ ชื่อ linked
    เขียนโดยใครไม่รู้จำชื่อไม่ได้ ลองดู หน้าปกจากblogผมเอา (ทางล่าง ๆ
    ถ้าไม่เห็นก็กด refresh เอาเพราะมันจะ random อ่ะคับ)
    ผมว่าเล่มนี้ดีมาก ๆ เลยนะ คุณน่าจะชอบ หาอ่านได้ที่ kino kuniya
    ที่ central world นะคับ ลองหาดูนะ

  10. เดี๋ยวจะลองไปหาอ่านดูครับ
    ขอบคุณที่แนะนำมานะครับ :)

  11. โหเยี่ยมจริงๆ

  12. โอ้ เยี่ยม วันหลัง ใช้ Flash ทำเว็บ จะได้เอาไปใช้บ้าง ขอบคุณจ้า

  13. kenzephyro permalink

    good !

  14. cookki permalink

    ขอบคุณมากมายเลยค่ะ หาวิธีแก้ไขมานานแล้ว

  15. pook permalink

    ขอความรู้ด้วยค่ะ ถ้าต้องการใส่โลโก้แบบคมชัดโดยทำจาก Illustrator หรือ Photoshop ลงในเวบเพจ ไม่ทราบวาต้องตั้งค่าที่ตรงไหนค่ะจึงจะสามารถนำไปใส่ในเวบเพจได้ ทำได้หรือไม้ค่ะในกรณีเช่นนี้ หรือเค้าทำกันยังไงค่ะในกรณีที่ต้องการใส่ลงในเสบเพจให้ไม่มีพื้นขาว แนะนำด้วยค่ะะะะะ

    ขอบคุณค่ะ

  16. ตอบไปทาง e-mail แล้วนะครับ

  17. tom permalink

    ผมลองใส่แล้วรันดูในFirefox มันไม่ขึ้นครับพอจะมีวิธีแก้ไหมครับ

  18. ขอบคุณมากนะครับพี่ ขอบคุณมากๆคับ ผมทำได้แล้วววว เจ๋งไปเลยยย

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS