แฟลชทำอะไรได้มากกว่าที่คุณคิด ลองมาเปิดโลกทัศน์เกี่ยวกับแฟลชของคุณที่นี่
แล้วคุณจะพบว่าไอเดียของคุณบนโลกออนไลน์จะไม่ถูกปิดกั้นอีกต่อไป
Adobe Flash
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 สามารถอ่านได้ถูกต้องขึ้นมา
ก่อนจะคุยเรื่องไอเดียนี้ อยากให้ดูแผนภาพวิธีการทำงานคร่าวๆก่อน
100% fresh juice banner
Online Banner ► AS2 ► Adobe Flash ► Creative 03.Dec 6:13 pm by wissar5 Comments »
จริงๆ แบนเนอร์ตัวนี้ดองไว้นาน พอสมควรแล้ว ไม่ได้เขียนสักที เป็นแบนเนอร์ที่ผมชอบไอเดียมาก แต่การทำอาจยุ่งยากสักเล็กน้อย
ลองคลิกที่ภาพเพื่อเข้าไปดูเลยครับ
readmore »
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 »
Modify Papervision for Double Sized data from maya
AS3 ► Adobe Flash 24.Oct 1:03 am by wissarNo Comments »เวลาทำโมเดลพวกต้นไม้ที่เป็น Plane มาใส่ Papervision เรามักจะมองเห็นแค่ด้านเดียว ถึงแม้จะ Set ให้ Material นั้น แสดงผลสองด้าน ใน Maya แล้วก็ตาม
เรามาโมไฟล์ Collada.as กันเพื่อให้ใช้ Data Double Sized จาก Maya ได้กันเถอะ
เปิดไฟล์
org/papervision3d/object/Collada.as
//private function parseGeometry @ latest line
buildObject( semantics, instance, matrix ,(geometry.extra.technique.double_sided==1));
buildObject( semantics, instance, matrix ,(geometry.extra.technique.double_sided==1));
//private function buildObject @ first line
private funcction buildObject( semantics:Object, instance:DisplayObject3D, matrix:Matrix3D=null ,doubleSized:Boolean=false):void
private funcction buildObject( semantics:Object, instance:DisplayObject3D, matrix:Matrix3D=null ,doubleSized:Boolean=false):void
/* private function buildObject, find the following line
var face:Face3D = new Face3D( faceList, _materials.getMaterialByName(materialName), uvList );
before this line add the script */
_materials.getMaterialByName(materialName).oneSide = !doubleSized;
var face:Face3D = new Face3D( faceList, _materials.getMaterialByName(materialName), uvList );
before this line add the script */
_materials.getMaterialByName(materialName).oneSide = !doubleSized;
มีข้อควรระวังนิดหน่อยคือ ใน Maya มักมี Default ของ Obejct เป็น Double Sized อยู่แล้ว
ซึ่ง พอเอาเข้า Papervision พวก Collada Object ที่ซับซ้อน มักจะแสดงผล Material จากด้านหลัง แพลมออกมา
ทางที่ดี Object พวกนี้อย่าลืมเอา Double Sized ออกก่อน Export จะดีที่สุด
และเราควรเก็บเทคนิคนี้ไว้ เวลาใช้กับ Object พวก Plane เท่านั้น
หลังจาก 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)
เอาไปใช้แล้วได้เรื่องยังไงกลับมาบอกกันด้วยนะ อยากได้อะไรเพิ่มเติม หรือมีบักอะไร จะได้พัฒนาตัวต่อไป
พอดีช่วงนี้ผมมีโปรเจคที่ต้องทำงานกับเงิน และตัวเลขซะส่วนใหญ่ ก็เลยต้องเขียนคลาสใหม่ๆ มา Support งานส่วนนี้ โดยคลาสนี้ก็เป็น คลาสที่จะช่วยให้เราจัดการกับตัวเลขจำนวนเงินที่มีหน่วยเป็นบาทได้อย่างดี ทั้งแสดงคำอ่านภาษาไทย และตรวจสอบ รวมทั้งแก้ไขตัวเลขให้อีกต่างหาก ลองทดสอบกันได้เลยครับ
flash
ตอนนี้มี version เดียวคือ AS2 ดาวน์โหลดที่นี่เลยครับ
CashNumberUtils AS2 (359)
เป็นโปรแกรมเดียวกับตัวนี้ครับแต่เป็น Version AS3
http://www.lifeztream.com/blog/?p=76&language=th
เพิ่ม Feature Memory Usage และกราฟของ Memory เข้าไป
Usage
import com.lifeztream.debug.FPS;
//var fps:FPS = new FPS([iAlign:String = "left"]);
var fps:FPS = new FPS("left");
addChild(fps);
* version 1.3 - Auto-start when added to stage and auto-stop when it’s removed
* - Fix Bug from StageAlignments
* Minor Improve Coding Speed
* version 1.2 - Dispose unused bitmapData and variables for garbage collector to free up ram.
FPSMonitor Class AS3 (1220) version 1.3
สคริปสำหรับแสดง Frame Rate ของ Flash Movie ในขณะที่เล่นอยู่ สำหรับ Flash Developer ทั้ง Animator และ Programer สคริปนี้จะช่วยคุณเพิ่ม Performance ให้งานคุณได้อีกเยอะเลยทีเดียว
Featured
ซึ่งโดยปกติกราฟควรจะเป็นสีเขียว แต่ถ้าเมื่อไรแฟลชทำงานหนัก ก็จะเปลี่ยนเป็นสีเหลือง และสีแดงตามลำดับ
ในการทำงานของสคริปในแต่ละเฟรม
วันนี้นึกสนุกขึ้นมา อยากลองเขียนโปรแกรมแต่งรูปดูบ้าง
ปกติเวลาผมแต่งภาพใน Photoshop ผมก็จะใช้คำสั่งอยู่ไม่กี่อย่าง แต่คำสั่งใน Photoshop ที่ผมใช้บ่อยๆ ก็จะต่างกับชาวบ้านเขาเล็กน้อย
เพราะภาพบางภาพ จะเพิ่มลด Contrast ด้วยวิธีปกติไม่ได้ ผมจะต้องใช้สิ่งที่เรียกว่า Micro-Contrast เพิ่ม Contrast ให้กับภาพในจุดเล็กๆ บางจุด เพื่อทำให้ภาพทั้งภาพไม่เสียรายละเอียดไป
Recent Comments