My Projects
Same categories : Experiments, Adobe FlashHome »SEO ด้วยแฟลช ตอนที่ 2 Use Flash as StyleSheet
Experiments ► Adobe Flash 26.Jul 4:33 pm by wissar2 Comments »จากตอนแรกผมเขียนหลักการทำงานของ Search Engine Bot ไปคร่าวๆแล้ว
คราวนี้เมื่อเรารู้ว่า Search Engine Bot นั้นจะอ่านข้อมูลดิบๆในไฟล์ HTML ก่อนเสมอ และ Parse Content จากแฟลชทีหลังและมีขั้นตอนที่ยุ่งยาก
ผมเลยคิดวิธีขึ้นมาวิธีนึง ซึ่งตั้งชื่อให้เองว่า Style with Flash ซึ่งวิธีนี้ จะได้ผลเหมือนการใช้ StyleSheet ทั่วๆไปในเว็บไซท์เลย เพียงแต่เราจะใช้ Flash ในการแสดงผลเท่านั้น
จากโค้ดด้านบน จะเห็นว่า Code ของเรายังคงเป็น HTML ทั่วไปซึ่ง Google Bot สามารถอ่านได้ แต่เราจะใช้ javascript ในการวางแฟลชไปแทนที่ html เหล่านั้นในตอนแสดงผลเท่านั้น
ซึ่งจาก javascript ด้านบน ฟังก์ชัน drawFlash จะทำงานดังนี้
1. จะนำแฟลชไปวางในตำแหน่งของ div ใน id ที่กำหนด ซึ่งจากตัวอย่างก็คือ ID ที่ชื่อ flashstyle
2. นำ HTML ภายใน div ใส่ให้แฟลชอ่าน เป็นตัวแปร FlashVars แฟลชจะอ่าน code html พวกนี้เสมือน XML และแสดงผลในแบบที่ต้องการ
จากตัวอย่างเราสามารถประยุกต์ใช้ใน Website ของเราได้หลายอย่าง
ทั้ง Gallery Flash, Link, Header หรือ แม้แต่ VDO Clip
คราวนี้เราก็ไม่ต้องกังวลแล้วว่า Content ของเราที่ป็นแฟลช Search Engine Bot จะมองไม่เห็น
ข้อดีอีกข้อของวิธีนี้ก็คือ เมื่อมีการเปลี่ยนแปลง Style ในเว็บไซท์ เราไม่จำเป็นต้องแก้ไข HTML เลย เนื่องจากหากไซท์เราทำงานด้วยวิธีนี้ Content ทั้งส่วนข้อมูล และส่วนแสดงผล จะแยกจากกันแบบเด็ดขาด เรียกได้ว่ายืงปืนนัดเดียวได้นกสองตัวเลยครับ
ช่วงนี้มีงานที่ต้องทำ SEO หลายตัว และจะมีคำถามจากลูกค้าว่า SEO บนแฟลชเป็นไปได้ใหม คำตอบของผมก็คือ ได้ แต่ ไม่ง่าย
ซึ่งคำตอบตรงนั้น ก็นำให้ผมลองมาทบทวนหาวิธีในการทำให้ SEO บนแฟลชมันทำได้ง่ายๆไม่แพ้ HTML ดู
จากความรู้เก่าๆ ที่หลายๆคนคงจะได้รู้กันมาว่า Google นั้นมี Bot ที่อ่านข้อมูลทีเป็นข้อความใน swf ไฟล์ได้นานแล้ว แต่ว่าไม่ดีนัก เนื่องจากข้อมูลที่เราเห็นในแฟลช ส่วนใหญ่เป็นข้อมูลซึ่งถูกปรับเปลี่ยนจาก Code ให้อยู่ในรูปแบบที่เราอ่านรู้เรื่องแล้ว
ดังนั้น Google Bot จะได้รับข้อมูลดิบๆ ที่อ่านรู้เรื่องมั่ง ไม่รู้เรื่องมั่ง ไปเก็บ ทำให้ SEO บนแฟลชนั้นได้ผลไม่ดีเท่าที่ควร
ผมเลยมีไอเดียในการทำ SEO Tools ที่สามารถ Track File ทั้งหมดบน Flash Site ของเราแล้วมาแปลงเป็นข้อมูลดิบๆ ที่ Google Bot สามารถอ่านได้ถูกต้องขึ้นมา
ก่อนจะคุยเรื่องไอเดียนี้ อยากให้ดูแผนภาพวิธีการทำงานคร่าวๆก่อน
Dutchmill Topteen Idol
Works ► Websites ► My Projects ► Creative 21.Apr 11:58 pm by wissarNo Comments »
โหวตดาราที่คุณชื่นชอบ และหากนำรหัสจากกล่องดัชมิลล์มาโหวต จะได้รับคะแนนพิเศษ รวมทั้งมีสิทธ์ได้ชิงรางวัลใหญ่จาก ดัชมิลล์
นี่คือโจทก์ของงานนี้ ที่ Area80 จะต้องคิดวิธีการนำเสนอ
ให้แปลกใหม่และสนุกสนานกว่าการโหวตทั่วๆไป
งาน Production 15 วัน จาก Sanook.com กับทีมงานชุดแรกของ Area80
งานนี้ทีมงานช่วยกันตีโจทก์มาหลากหลายรูปแบบ
แต่สุดท้ายที่มาสรุปกันก็คือ “ทำไมเราไม่ลองให้คนเล่นเกมกระดานกันดูล่ะ”
Making of C-for-yourself 3D mini game
Works ► AS3 ► My Projects ► Adobe Flash 02.Nov 5:51 pm by wissar9 Comments »
Flash 3D mini game เกมส์เล็กๆ ที่ใช้เวลาทำไม่นาน แต่ดูแล้วอาจจะตกใจว่านี่เกมส์แฟลชเหรอนี่
ไม่ได้พูดเกินไป แต่เดี๋ยวนี้แฟลชทำเกมส์ 3D ได้แล้ว เกมส์นี้คืออะไร และขั้นตอนการทำเป็นอย่างไร อ่านต่อไปได้เลยครับ
readmore »
หลังจาก Papervision3D ได้สร้างความเป็นไปได้ในการทำเกมส์ 3 มิติบนแฟลชได้แล้ว ถึงเวลาที่ Web-Developer อย่างผมจะเริ่มทำเกมส์ 3D ตามความฝันซักที
เมื่อเดือนที่แล้ว ผมได้เริ่มต้นเขียน เกมส์และ Application บน AS3 อย่างจริงจัง รวมทั้งเกมส์ 3D ด้วย ก็เลยพบปัญหานิดหน่อยว่าระบบ Depth manager ของ Papervision และ Performance ของ ชุดคลาสนี้ยังต้องรอคอยการพัฒนาอีกพอสมควร แต่ถึงอย่างไร ผม และ Katopz ก็ได้เริ่มต้นมันแล้ว
เนื่องจากผมที่จะต้องคอยปั้นโมเดลจาก Maya มาใส่เกมส์แฟลชนั้นติดปัญหาเรื่อง ขนาด face มุมกล้อง รวมทั้ง texture อยู่พอสมควร ผมจึงเขียนโปรแกรมนี้ขึ้นมาเพื่อ Test Model ที่ขึ้นจาก Maya ว่ามันเข้ามาในแฟลชแล้วมีหน้าตายังไงบ้าง
โดยที่โปรแกรมนี้จะดูโมเดลนามสกุล *,dae ที่ export มาเป็นรูปแบบ xml ได้เท่านั้น
และเพราะว่าโปรแกรมนี้เป็น Flash9 ผมจึงยังหาโปรแกรมมาช่วย Compile เพื่อทำ Application ที่สมบูรณ์ยังไม่ได้ แต่ถึงยังไงขอให้เพื่อนๆวางมันไว้ในโฟลเดอร์โมเดลที่ต้องการจะเทสต์ หรือจะพิมพ์ Path เต็มๆ ลงไปเลยก็ได้ ตัว 1.0 ไดแล้วครับ
ทดลองใช้โปรแกรมที่นี่ครับ
http://www.lifeztream.com/work/daeviewer/
DAE Viewer 1.0 เสร็จแล้วครับ
การใช้งาน
Double click ไฟล์นามสกุล .dae จะเปิดโปรแกรมอัตโนมัติ, Drag-Drop ไฟล์นามสกุล DAE หรือ Browse จากโปรแกรมโดยตรง
การติดตั้ง
ดาวน์โหลด RUNTIME AIR APPLICATION จาก Adobe ลิงค์นี้ก่อนครับ
http://labs.adobe.com/downloads/air.html
ดาวน์โหลดตัวโปรแกรมที่นี่
สำหรับ Developer ที่ต้องการศึกษา Source Code ของ AS3 และ AIR Application ดาวน์โหลดที่นี่ครับ
DaeViewer1.0 source as3 with air application (1043)
เอาไปใช้แล้วได้เรื่องยังไงกลับมาบอกกันด้วยนะ อยากได้อะไรเพิ่มเติม หรือมีบักอะไร จะได้พัฒนาตัวต่อไป
มันเกิดจากความคิดชั่ววูบครับ ว่าอืม…. แบบว่า หน้าอก หน้าใจ หน้าท้องเราเนี่ย จริงๆมันดูไปก็คล้ายๆหน้าคนนะ หลังจากลูบๆคลำๆอยู่สักพัก ก็เลยลอง Sketch Application คร่าวๆ ดูว่าถ้าเกิดผมจะทำเว็บที่ให้แต่งหน้าตัวเอง แล้วนำมาทำเป็นเสื้อ ไอเดียอุบาทว์แบบนี้ จะมีใครมาทำเล่นแล้วเซพไปให้เพื่อนดู หรือแม้แต่คิดเลยเถิดไปถึงอยากจะให้ผมจัดทำให้ซักตัวมั๊ย
งานเก่าๆที่ยังพอเหลืออยู่จะทยอยอัพไว้ที่หัวข้อนี้ครับ
Mock up website กรุงเทพมหานครปี 2004
Mock up website Siam2you.com
CHIVASONE Bigapple
Production : DRAFT
Mockup : Majestic (15 pics story board)
IMAP 2005
Design&AS2 PC+Pocket PC
Production : Siam2you.com
เป็นงานล่าสุดที่เพิ่งทำเสร็จไป เมื่อประมาณเดือนกรกฏาคม เป็นเว็บไซท์รณรงค์ให้คนไทย เลิกกกลัว เลิกอาย ที่จะพกถุงยางอนามัย
งานชิ้นนี้ผมไม่ได้เป็นคนออกแบบ แต่ได้รับมอบหมายให้ดูแลระบบของเว็บไซท์ ตั้งแต่ Flash, HTML, Javascript ไปจนถึง Stat และ Backend
readmore »
เกมส์สนุกๆจาก 100community.com ซึ่งผมไม่รู้นึกสนุกอะไรขึ้นมา ทำเป็น pixel art ทั้งเกมส์เลย
Design เกมส์ก็ไม่มีอะไรมาก คุณจะเห็นแค่ว่ามันถึก ความถึกจะบดบังทุกสิ่งที่คุณเห็น ว่าไปนั่น
คลีนิคเคลียร์ ไม่เพียงแค่ต้องการที่จะเปิดตลาดของกลุ่มเป้าหมายใหม่ ซึ่งเป็นชายหนุ่ม
ที่สนใจในการดูแลตนเองเท่านั้น แต่ยังต้องการที่จะทำให้ภาพลักษณ์ของ แชมพูขจัดรังแคสำหรับ
ผู้ชายของตนเองนั้นมีความชัดเจนมากขึ้น โดยการเลือกใช้เว็บไซท์เป็นช่องทางหนึ่ง
ในการ Promote สินค้าตัวใหม่ แชมพูสูตรสำหรับผู้ชายตัวนี้
Recent Comments