Tag:flash

จุดด้อยข้อหนึ่งของ jQuery และ Javascript ก็คือยังไม่มีปลั๊กอินสำหรับแสดงแผนภูมิดีๆ. แต่ถ้าคุณต้องการใช้แผนภมูิที่มีความสามารถสูงๆและแสดงผลได้สวยงาม Flash ช่วยคุณได้(คาดว่าในอนาคต HTML5 คงแก้ไขจุดนี้ได้) ซึ่งก็มีบางเรื่องที่ Flash ทำได้ดีมากแต่ขณะเดียวกันก็ยังมีบางเรื่องที่ทำไม่ได้ดีเท่าที่ควร เรามาดูกันว่าแผนภูมิ Flash ที่น่าสนใจมีอะไรมั่ง

Fusion Charts

: Fusion Charts

Fusion Charts เป็นแผนภูมิแฟลชที่มีความสามารล้นเหลือ การแสดงผลสวยงามมากและยังปรับแต่งได้ค่อนข้างเยอะ แต่น่าเสียดายที่ของๆดีย่อมไม่ฟรี เจ้าแฟลชตัวนี้มีค่าตัวตั้งแต่ 2,000 กว่าบาทไปจนถึง 70,000 บาท(ถ้าเอาไปใช้ไนงานองค์กรนะ) แต่อย่างไรก็ดีเจ้าตัวนี้ยังเปิดของฟรีให้ใช้โดยมีข้อจำกัดต่างๆอยู่บ้าง ถ้าอยากรู้ว่ามันทำอะไรได้บ้างตามเข้าไปดูได้ที่นี่

Open Flash Chart

Open Flash Chart, ตอนนี้พัฒนาไปจนถึง รุ่นที่ 2 แล้ว, เราอาจจะพบเห็นแผนภูมิแฟลชตัวนี้ในหลายๆเว็บไซต์เพราะมันเป็นซอฟแวร์เสรีและฟรีนั่นเอง, โดยเจ้าโอเพ่นแฟลชชาร์ตนี้สามารถปรับแต่งได้แทบจะทุกอย่างเช่นเส้นแผนภูมิรูปแบบของแผนภูมิ นอกจากนี้ยังรองรับการพัฒนาแบบ server side เช่น Rubu, Java, PHP, .Net ช่วยให้เราพัฒนาระบบสวยงามและง่ายดายยิ่งขึ้น

XML/SWF Charts

ต่อมามาดูเจ้าแผนภูมิที่ผมว่าสวยที่สุดในกลุ่มแล้ว ชื่อของมันคือ XML/SWF Charts. ถ้าไม่เชื่อลองเข้ามาดู ทีนี่ จะเห็นได้เลยว่าผมไม่ได้พูดเกินจริงสักหน่อย.

XML/SWF Charts การทำงานของมันก็ตรงตัวตามชื่อเลย, คือแผนภูมิจะถูกวาดโดยแฟลชโดยมีการป้อนข้อมูลเป็น XML ดังนั้นเราจึงพัฒนากับโปรแกรมด้วยภาษาไหนๆก็ได้ตราบใดที่ภาษานั้นสามารถสร้างรูปแบบ XML ได้ (ว่าแต่มีด้วยเรอะภาษาที่ไม่สนับสนุน XML น่ะ?)

AnyChart

: AnyChart

AnyChart ถ้าคุณมองหาผลิตภัณฑ์ที่ดี ต้องการการซัพพอร์ต และพร้อมที่จะจ่ายเงินสำหรับผลิตภัณฑ์พวกนี้ เจ้าตัวนี้ล่ะคือตัวแรกๆที่ผมแนะนำ! หากยังไม่แน่ใจว่า AnyChart สามารถทำตามรูปแบบที่คุณต้องการได้หรือ แนะนำให้ไปดู ที่นี่ ก่อนแล้วค่อยตัดสินใจ

amCharts

amCharts เป็นอีกตัวที่ไม่ฟรี แต่ความสามารถก็ไม่ได้ดีกว่าแผนภูมิอื่นๆที่ต้องจ่ายเงินมากนัก แต่ยังก็ตาม amCharts ก็มีลูกค้าที่เป็นกลุ่มบริษัทใหญ่ๆอยู่เช่น Sony, Motorola, Merril Lynch,Procter and Gamble และอีกหลายๆชื่อ. ดูเหมือนผลิตภัณฑ์ตัวนี้จะเน้นหนักไปทางแผนภูมิการเงินและแผนภูมิประเภทหุ้นซะเป็นส่วนใหญ่.

Swiff Chart

swiff-chart

Swiff Chart เป็นแผนภูมิที่ปรับแต่งได้ประหลาดๆดี ปรับแต่งสีสันได้ค่อนข้างเยอะ และแน่นอนว่าไม่ฟรี! ใครสนใจก็ไปดูตัวอย่างได้ที่นี่

Google Visualization API

ของอีกฟรีๆอีกตัวจากยักษ์ใหญ่แห่งโลกออนไลน์ Google นั่นเอง ฟังก์ชั่นที่เด่นๆของมันก็คือเรื่อง Time line เจ้าตัวนี้สามารถจัดการเรื่อง Time line ได้อย่างง่ายๆ โดยเราสามารถเปลี่ยนไปดูแผนภูมิในอาทิตย์หรือ เดือนก่อนได้สะดวกและรวดเร็ว การพัฒนาก็เป็นไปอย่าง่ายโดยการป้อนข้อมูลที่อยู่ในรูปแบบ XML ถึงจะไม่สามารถปรับแต่งความสวยงามได้เท่าไหร่นักแต่รูปแบบที่ได้ก็ถือว่าอยู่ในระดับสวยงามล่ะน่า ใครสนใจเชิญดูได้ที่ Google Visualization API.

ขอขอบคุณข้อมูลจาก Reynoldsftw

พอดีมีเรื่องต้องทำการอัปโหลดด้วย flash เห็นว่าใช้สะดวกดีก็เลยมาแนะนำกันครับ

เริ่มจากไปโหลด source ตัว flash upload มาก่อน โหลดที่นี่

ตามตัวอย่างจะเห็นเป็น asp แต่ไม่เป็นไร เรามาเขียนใส่ PHP ก็ได้.. โดยแค่มี parameter ที่ Flash Upload มันต้องการก็พอ

เริ่มจากสร้าง web page มาอันนึง ในที่นี้จะใช้ชื่อ upload.php ละกัน

<html>
<head>
   <script language="javascript">
    function UploadComplete(){
    window.location = 'uploadcomplete.php';
   }
   </script>
</head>
  <body>
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

   codebase="http://pdownload.macromedia.com/pub/shockwave/

   cabs/flash/swflash.cab#version=9,0,0,0"
  width="600"  height="370"   id="fileUpload"  align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
 <param name="movie" value="FlashFileUpload.swf" />
 <param name="quality" value="high" />
 <param name="wmode" value="transparent">
 <param name="flashvars" value='&completeFunction=

   UploadComplete()&fileTypes=*.gif%3b+*.png%3b+*.jpg%3b+

   *.jpeg&fileTypeDescription=Images&totalUploadSize=2097152

   &fileSizeLimit=524288&uploadPage=uploadprocess.php'>   src="FlashFileUpload.swf" flashvars='&completeFunction= 
   UploadComplete()&fileTypes=*.gif%3b+*.png%3b+*.jpg%3b+
   *.jpeg&fileTypeDescription=Images&totalUploadSize=2097152
    &fileSizeLimit=524288&uploadPage=uploadprocess.php' 
   quality="high" wmode="transparent" width="600" height="370" 
   name="fileUpload" align="middle" allowScriptAccess="sameDomain" 
   type="application/x-shockwave-flash" pluginspage="http://www.
   macromedia.com/go/getflashplayer" />
 </object>
</body>
</html>

อธิบาย

completeFunction เป็น javascript function เพื่อเรียกไปยังหน้าเว็ปที่เราต้องการจะไปเมื่ออัปโหลดเสร็จแล้ว ในที่นี้คือ uploadcomplete.php
fileTypes ชนิดของไฟล์ที่เราจำกัดให้อัปขึ้นไปได้ โดยเช็ตเป็น '*.gif%3b+*.png%3b+*.jpg%3b+*.jpeg' (ในรูปแบบurl encoded)
fileTypeDescription แสดงรายละเอียดชนิดของไฟล์ที่ตัว dialog
totalUploadSize ขนาดไฟล์โดยรวมทั้งหมด
fileSizeLimit จำกัดขนาดไฟล์ที่อัปขึ้นไป
uploadPage หน้าเพจ php ที่ทำประมวลผลเพื่ออัปโหลดไฟล์. ในตัวอย่างเป็น uploadprocess.php

ถัดมาก็สร้างไฟล์ uploadprocess.php

 
 session_start ();
 $uploaddir = dirname ( $_SERVER['SCRIPT_FILENAME'] ) .

  "/UploadfolderTest/";

 if ( count ( $_FILES ) > 0 ) {
     $arrfile = pos($_FILES); 
     $uploadfile = $uploaddir . basename ( $arrfile['name'] );
     $_SESSION['filelist'][] = $arrfile['name'];
      if ( move_uploaded_file ( $arrfile['tmp_name'], $uploadfile ) )

          echo "UploadComplete();";

    }
 }
 ?>

ถัดมาสร้างไฟล์ uploadcomplete.php เพื่อตรวจสอบว่ามีไฟล์ชื่อว่าอะไรถูกอัพไปมั่ง

 
 session_start ();
 
    print_r ( $_SESSION['filelist'], true );
 
 session_destroy();
 ?>

เรียบร้อยแล้วครับ ง่ายมั้ยครับกับการทำ upload หลายๆไฟล์ด้วยแฟลช ใครมีวิธีง่ายๆกว่านี้ก็แนะนำหน่อยนะครับ

แนะนำ Flash Chart 7 แบบ สุดเจ๋ง!!!

Fusion Charts

Open Flash Chart

XML/SWF Charts

AnyChart

amCharts

Swiff Chart

Google Visualization API

วิธีอัปโหลดไฟล์หลายๆอันด้วยแฟลชแบบง่ายๆ

Main Menu

Articles

Who's Online