แฟลร์ | การแสดงข้อมูลสำหรับเว็บ

Flare ทำให้ง่ายต่อการสร้างภาพข้อมูลแบบโต้ตอบ

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

Flare เป็นซอฟต์แวร์โอเพ่นซอร์สที่เผยแพร่ภายใต้ลิขสิทธิ์ BSD ซึ่งหมายความว่าสามารถปรับใช้และแก้ไขได้อย่างอิสระ (และแม้กระทั่งขายในราคา $$) การออกแบบของ Flare ได้รับการดัดแปลงมาจาก prefuse รุ่นก่อน ซึ่งเป็นชุดเครื่องมือสร้างภาพสำหรับ Java

การใช้งาน

ประกาศ

• 2010.10.07: การพัฒนา Flare ได้เปิดให้ชุมชนและแหล่งที่มาได้ย้ายจาก SourceForge เป็น บ้านใหม่บน GitHub. เปลวไฟ 2009.01.24 ยังคงเป็นรุ่นล่าสุดอย่างเป็นทางการและ (อย่างน้อยก็ในตอนนี้) บทแนะนำและเอกสารประกอบจะสะท้อนให้เห็น เวอร์ชันพัฒนาบน GitHub ขณะนี้มีการรองรับที่ดีขึ้นสำหรับ Flash Player 10 เช่นเดียวกับการแก้ไขและการเปลี่ยนแปลงเล็กน้อยอื่น ๆ อีกมากมาย
• 2009.01.24: เปลวไฟ 2009.01.24 ได้รับการปล่อยตัว นี่เป็นรุ่นบำรุงรักษาพร้อมการแก้ไขจุดบกพร่องและการอัปเดตจำนวนมาก ดู บันทึกประจำรุ่น สำหรับรายละเอียดเพิ่มเติม นี่เป็นแผนการเปิดตัวครั้งสุดท้ายสำหรับ Flash Player 9 — เวอร์ชันในอนาคตจะย้ายไปเป็นเวอร์ชัน 10
• 2008.07.30: เปลวไฟ 2008.07.29 ได้รับการปล่อยตัว นี่เป็นการเปิดตัวครั้งสำคัญที่มีฟีเจอร์ใหม่ๆ และการปรับปรุงสถาปัตยกรรมมากมาย ดู บันทึกประจำรุ่น .
• 2008.07.30: เปลวไฟ 2008.08.08 ได้รับการปล่อยตัว รุ่นนี้มีการสนับสนุนคำอธิบายที่ปรับปรุงแล้ว การเปลี่ยนชื่อ การแก้ไขจุดบกพร่อง และการปรับโครงสร้างใหม่เพื่อลดการเชื่อมต่อและรวมคลาสยูทิลิตี้ ดู บันทึกประจำรุ่น .

การกวดวิชา

บทช่วยสอนทีละขั้นตอนสำหรับการเรียนรู้ ActionScript และ Flare

เริ่มต้นใช้งาน

ขั้นตอนแรกคือการตั้งค่าเครื่องมือการพัฒนาของคุณ

1. ตั้งค่าสภาพแวดล้อมการพัฒนาแฟลชที่ใช้งานได้ มีสองวิธี เราขอแนะนำวิธีแรกเพื่อความเรียบง่าย แต่ผู้ใช้ขั้นสูงสามารถใช้แนวทางที่สองได้
   • ตัวเลือก 1 (ง่ายกว่า): ติดตั้ง Adobe Flex Builder.
     • นี่คือสภาพแวดล้อมการพัฒนาที่สมบูรณ์สำหรับแอปพลิเคชัน ActionScript/Flex สามารถใช้ได้กับทุกแพลตฟอร์มหลัก (Windows, Mac, Unix) ผู้ใช้ที่ใช้ Eclipse IDE อยู่แล้วยังสามารถติดตั้ง Flex Builder เป็นปลั๊กอิน Eclipse
     • ข้อแม้ในการใช้ Flex Builder คือซอฟต์แวร์เชิงพาณิชย์และจะใช้งานได้ในช่วงทดลองใช้ที่จำกัดเท่านั้น อย่างไรก็ตาม Adobe ให้สิทธิ์ใช้งาน Flex Builder ฟรีแก่นักศึกษา คณาจารย์ และเจ้าหน้าที่ของมหาวิทยาลัย
   • ตัวเลือก 2 (ซับซ้อนกว่า): ติดตั้ง Flex SDK . ฟรี
     • สิ่งนี้จะติดตั้งคอมไพเลอร์ ActionScript/Flex พื้นฐาน: mxmlc และ compc. จากนั้นคุณสามารถตั้งค่าสภาพแวดล้อมการสร้างของคุณเองได้ เช่น ใช้ make or ant สร้างระบบ Flare บรรจุด้วย a build.xml ไฟล์สำหรับใช้กับ มดอาปาเช่ สร้างระบบ เมื่อติดตั้งมดแล้ว ให้เปิด build.xml ในเท็กซ์เอดิเตอร์ เปลี่ยนสองสามบรรทัดแรกให้ชี้ไปที่Flex .ของคุณ SDK ติดตั้งแล้วใช้ ant เพื่อรวบรวมห้องสมุด เราใช้ประโยชน์จากงานมดของ Adobe Labs สำหรับการพัฒนาแบบยืดหยุ่น
     • ข้อดีของวิธีนี้คือ ซอฟต์แวร์ทั้งหมดนั้นฟรีและจะไม่หมดอายุสำหรับคุณ อย่างไรก็ตาม คุณจะสูญเสียคุณลักษณะต่างๆ เช่น การคอมไพล์อัตโนมัติ การจัดการโปรเจ็กต์ และการเติมข้อความอัตโนมัติโดย Flex Builder
2. ดาวน์โหลดไลบรารี่ prefuse Flare
   • การดาวน์โหลดเป็นไฟล์ zip ที่มีชุดของโปรเจ็กต์ไลบรารี ActionScript แตกไฟล์ลงในไดเร็กทอรีเวิร์กสเปซหลักของคุณ หากคุณใช้ Flex Builder ระหว่างบทช่วยสอน เราจะนำเข้าไฟล์เหล่านี้ไปยัง Flex Builder และใช้เพื่อสร้างการแสดงภาพ!
   • ซอฟต์แวร์นี้เป็นเวอร์ชันอัลฟ่าในปัจจุบัน ดังนั้นข้อบกพร่องและข้อจำกัดบางประการจึงเป็นไปตามที่คาดไว้ เราจะแก้ไขปัญหาโดยเร็วที่สุด และลิงก์ด้านบนจะชี้ไปที่เวอร์ชันล่าสุดเสมอ

ข้อมูลเบื้องต้นเกี่ยวกับ Flash และ ActionScript 3

Flash เป็นสภาพแวดล้อมที่ยอดเยี่ยมสำหรับกราฟิกแบบอินเทอร์แอกทีฟ และด้วยการเพิ่มภาษาโปรแกรม ActionScript 3 ล่าสุด ทำให้มีประสิทธิภาพและประสิทธิผลมากขึ้น แม้ว่าการแนะนำ AS3 แบบสมบูรณ์จะอยู่นอกเหนือขอบเขตของบทช่วยสอนนี้ ต่อไปนี้เป็นแหล่งข้อมูลบางส่วนที่คุณจะพบว่ามีประโยชน์:

• Adobe ให้ภาพรวมของ AS3 พร้อมลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม
• ActionScript ที่จำเป็น 3 โดย Colin Moock จากสำนักพิมพ์ O'Reilly เป็นหนังสือที่ยอดเยี่ยมที่จะช่วยให้คุณเริ่มต้นได้ คุณสามารถ เข้าถึงออนไลน์ได้ที่นี่ (บางสถาบัน เช่น มหาวิทยาลัย ให้เข้าฟรี)
• ข้อมูลอ้างอิง Adobe Flex API มีค่ามากสำหรับการทำความเข้าใจคลาสและวิธีการต่างๆ ที่มีอยู่ เราจะเน้นเฉพาะชั้นเรียนใน flash.* แพคเกจ

บทช่วยสอนนี้ถือว่ามีความคุ้นเคยกับไวยากรณ์และประเภทของ ActionScript ขั้นพื้นฐาน ตลอดจนแนวคิดของการเขียนโปรแกรมเชิงวัตถุ

ส่วนที่ 1: DisplayObjects

บทนำ

แฟลชจำลองฉากภาพ 2 มิติโดยใช้ a ฉากกราฟ. วัตถุที่มองเห็นถูกจัดระเบียบในลำดับชั้น โดยมีวัตถุย่อยที่กำหนดไว้ในพื้นที่พิกัดของพาเรนต์ คุณมักจะเห็นฉากนี้เรียกว่า แสดงรายการ ทั้งในเอกสารประกอบของ Adobe และในหนังสือเกี่ยวกับการเขียนโปรแกรม Flash
โหนดที่ด้านบนของรายการแสดงผลจะเป็น .เสมอ Stage วัตถุ. เวทีมักจะมีลูกคนเดียว นี้เรียกว่า rootและรายการภาพทั้งหมดอยู่ใต้รูท โดยปกติ รูทคือแอปพลิเคชัน Flash จริงของคุณ เราจะกลับมาที่นี่เร็ว ๆ นี้
รายการที่มองเห็นทั้งหมดที่สามารถเพิ่มลงในรายการที่แสดงได้คืออินสแตนซ์ของ DisplayObject ระดับ. คลาสย่อยของ DisplayObject ประกอบด้วย Bitmap (สำหรับภาพ) TextField (สำหรับพื้นที่ข้อความโต้ตอบ) และ Video (นึกถึงยูทูบ) อย่างไรก็ตาม กรณีที่พบบ่อยที่สุดคือ Sprite และ Shape ชั้นเรียน สำหรับการอ้างอิงส่วนใหญ่ของคลาสเหล่านี้สามารถพบได้ใน flash.display แพ็คเกจ (แม้ว่าในที่สุดคุณจะพบว่า flash.text แพ็คเกจการใช้งานด้วย)
พื้นที่ Sprite คลาสเป็นออบเจ็กต์ภาพทั่วไปที่มีประโยชน์ที่สุดซึ่งใช้โดย Flash Player สไปรต์เป็นออบเจ็กต์ที่มองเห็นได้ซึ่งมีทั้งเนื้อหาการวาดและสามารถทำหน้าที่เป็นคอนเทนเนอร์สำหรับโหนดย่อยในรายการที่แสดง ( Sprite คลาสย่อย the flash.display.DisplayObjectContainer ระดับ). ในทางตรงกันข้าม Shape คลาสสามารถมีเนื้อหารูปวาดได้ แต่ไม่สามารถเก็บโหนดย่อยได้ เป็นผลให้รูปร่างใช้หน่วยความจำน้อยลง แต่มีความยืดหยุ่นน้อยกว่ามาก เพื่อความง่าย เราจะเน้นที่ Sprites ในบทช่วยสอนนี้

สร้างแอปพลิเคชันใหม่

ขั้นแรก ให้สร้างแอปพลิเคชัน Flash ใหม่ ในการดำเนินการนี้ ให้เปิดโปรแกรมสร้างเฟล็กซ์ และตรวจสอบให้แน่ใจว่าคุณอยู่ในมุมมอง "การพัฒนาแบบยืดหยุ่น" (เข้าถึงได้โดยคลิกไอคอน "Fx" สีขาวดำที่มุมขวาบน)
ในบานหน้าต่าง "เนวิเกเตอร์" ทางด้านซ้าย ให้คลิกขวาที่จอแสดงผลและเลือก "ใหม่ > โครงการ ActionScript" ในกล่องโต้ตอบผลลัพธ์ ให้พิมพ์ "บทช่วยสอน" เป็นชื่อโครงการ จากนั้นคลิก "เสร็จสิ้น" นี้จะสร้างโครงการใหม่สำหรับคุณ
ตอนนี้คุณควรเห็นโฟลเดอร์ "บทช่วยสอน" ในบานหน้าต่าง "ตัวนำทาง" ภายในโฟลเดอร์นี้ คุณควรเห็นไฟล์ชื่อ “Tutorial.as” นี่คือไฟล์แอปพลิเคชันหลักของคุณ เปิดเลยถ้ายังไม่เปิด
ภายในไฟล์ คุณจะเห็นโครงนั่งร้านพื้นฐานสำหรับชั้นเรียนนี้:

แพ็คเกจ { นำเข้า flash.display.Sprite; การสอนคลาสสาธารณะขยาย Sprite { การสอนฟังก์ชันสาธารณะ () { } } }

สังเกตว่าคลาสนี้ขยาย Sprite ระดับ. เนื่องจากนี่คือคลาสแอปพลิเคชันหลักของเรา เมื่อเราเรียกใช้แอปพลิเคชัน อินสแตนซ์ของ Tutorial คลาสจะถูกเพิ่มโดยอัตโนมัติในรายการที่แสดงเป็นของมัน root (ลูกคนเดียวของ Stage).
โปรดสังเกตว่ามีการสร้างคอนสตรัคเตอร์โดยอัตโนมัติ ตัวสร้างนี้จะถูกเรียกเมื่อแอปพลิเคชันเปิดตัว สำหรับผู้ที่คุ้นเคยกับภาษาการเขียนโปรแกรมเช่น C, C++ หรือ Java ตัวสร้างสำหรับคลาสแอปพลิเคชันจะทำหน้าที่เหมือนกับ main ทำงานในภาษาอื่นๆ เหล่านั้น
ด้วยแอพพลิเคชั่นนั่งร้านใหม่นี้ เราสามารถเริ่มเล่นกับวัตถุที่มองเห็นได้ อย่างไรก็ตาม มีสิ่งหนึ่งที่เราต้องการทำก่อน เพิ่มบรรทัดใหม่โดยตรงเหนือการประกาศคลาส (”public class Tutorial…”) บรรทัดที่ระบุว่า:

[SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")]

บรรทัดนี้กำหนดการตั้งค่าเริ่มต้นสำหรับแอปพลิเคชันของคุณ (ซึ่งรวบรวมและบันทึกเป็นไฟล์ .swf ในไดเร็กทอรี "bin" ของโปรเจ็กต์ของคุณ) ด้านบน เรากำหนดขนาด สีพื้นหลัง และอัตราเฟรมเป้าหมาย (เป็นเฟรมต่อวินาที) สำหรับแอปพลิเคชันของเรา

สไปรท์

เช่นเดียวกับ DisplayObjects, Sprite รองรับคุณสมบัติด้านภาพจำนวนมากตั้งแต่แกะกล่อง ซึ่งรวมถึง x, y, scaleX, scaleY, rotationและ alpha คุณสมบัติ. สิ่งเหล่านี้จะเปลี่ยนตำแหน่ง ขนาด การวางแนว และความโปร่งใสของสไปรท์ตามลำดับ (และลูกๆ ของมันทั้งหมด! โปรดจำไว้ว่า เรากำลังใช้กราฟฉากที่นี่)
อย่างไรก็ตาม ค่าเหล่านี้ไม่ได้มีความหมายมากนัก เนื่องจากสไปรต์ไม่มีสิ่งใดตามค่าเริ่มต้น เราจะเริ่มด้วยการวาดเนื้อหาของเราเอง
สไปรท์ทุกตัวยังมี a graphics คุณสมบัติ. เราสามารถใช้สิ่งนี้เพื่อวาดกราฟิกสำหรับ Sprite. graphics คุณสมบัติเป็นตัวอย่างของ flash.display.Graphics คลาสซึ่งมีคำสั่งการวาดเวกเตอร์จำนวนหนึ่ง
ในตัวอย่างด้านล่าง เราทำหลายอย่าง

• ขั้นแรก เราสร้างใหม่ Sprite.
• ประการที่สอง เราใช้สไปรท์ graphics เพื่อวาดวงกลมด้วยการเติมสีเทาและโครงร่างสีดำ
  • beginFill กำหนดสีและรูปแบบการเติมปัจจุบัน อาร์กิวเมนต์แรกคือสี ในรูปแบบเลขฐานสิบหก และอาร์กิวเมนต์ที่สองคือค่าอัลฟ่า ซึ่งอยู่ในช่วงตั้งแต่ 0 เพื่อความโปร่งใสเต็มที่ถึง 1 สำหรับการทึบแสงทั้งหมด
  • lineStyle กำหนดสีและสไตล์ของเส้นขีดปัจจุบัน อาร์กิวเมนต์แรกคือความกว้างของเส้น อาร์กิวเมนต์ที่สองคือสี
  • drawCircle วาดวงกลมรัศมี 10 ที่จุด 0,0 ในพื้นที่พิกัดของสไปรต์ของเรา
• ประการที่สาม เราเพิ่มสไปรต์เป็นลูกของแอปพลิเคชันหลักของเรา (a Tutorial เทพดา).
• ประการที่สี่ เราตั้งค่า x และ y ตำแหน่งของสไปรท์ของเรา
• ประการที่ห้า เราเพิ่มเอาต์พุตการดีบัก trace พิมพ์สตริงไปที่คอนโซล ผลลัพธ์นี้จะแสดงขึ้นเมื่อเรียกใช้แอปในโหมด "ดีบัก" เท่านั้น

นี่คือรหัส:

แพ็คเกจ { นำเข้า flash.display.Sprite; [SWF (width="800", height="600", backgroundColor="#ffffff", frameRate="30")] การสอนคลาสสาธารณะขยาย Sprite { การสอนฟังก์ชันสาธารณะ () { var sprite:Sprite = new Sprite () ; sprite.graphics.beginFill(0xcccccc, 0.5); sprite.graphics.lineStyle(1, 0x000000); sprite.graphics.drawCircle(0, 0, 10); this.addChild(สไปรท์); สไปรท์.x = 50; sprite.y = 50; trace("สไปรท์ของเราอยู่ที่: "+sprite.x+", "+sprite.y); } } }

เรียกใช้แอปพลิเคชัน (คลิกขวาที่ "Tutorial.as" และเลือก "Run As> Flex Application") คุณควรเห็นวงกลมสีเทาที่มีโครงร่างสีดำที่มุมซ้ายบน โดยมีศูนย์กลางอยู่ที่จุด 50, 50 หากคุณเรียกใช้แอปพลิเคชันในโหมดแก้ไขข้อบกพร่อง (เลือก “Debug As > Flex Application”) คุณควรเห็นสตริง “ของเรา สไปรท์อยู่ที่: 50, 50” ในคอนโซลเอาต์พุต

สไปรท์ที่ซ้อนกัน

มาทำให้ฉากของเราน่าสนใจขึ้นหน่อย เริ่มต้นด้วยการย้ายโค้ดการสร้างสไปรท์ไปยังวิธีการใหม่ เราจะเพิ่มวิธีนี้ในชั้นเรียนของเรา:

 ฟังก์ชั่นส่วนตัว createCircle (x:Number, y:Number):Sprite { var sprite:Sprite = ใหม่ Sprite (); sprite.graphics.beginFill(0xcccccc, 0.5); sprite.graphics.lineStyle(1, 0x000000); sprite.graphics.drawCircle(0, 0, 10); สไปรท์.x = x; สไปรท์.y = y; กลับสไปรท์; }

ต่อไปเราจะแทนที่โค้ดในตัวสร้างของเรา ขั้นแรก เราสร้างสไปรต์ใหม่ที่เรียกว่าคอนเทนเนอร์ ซึ่งเราจะใช้เก็บคอลเล็กชันของแวดวง เราวางมันไว้ตรงกลางเวทีของเรา ประการที่สอง เราใช้การวนซ้ำเพื่อสร้างกลุ่มวงกลม ที่นี่ เราเรียงวงกลมสมมาตรรอบจุด 0,0 ของคอนเทนเนอร์หลัก ตัวสร้างใหม่ของเราตอนนี้มีลักษณะดังนี้:

 การสอนฟังก์ชันสาธารณะ () { คอนเทนเนอร์ var: สไปรท์ = สไปรท์ใหม่ (); คอนเทนเนอร์.x = 400; คอนเทนเนอร์.y = 300; this.addChild (คอนเทนเนอร์); สำหรับ (var i:int=0; i<10; ++i) { var x:Number = (i/5<1 ? 1 : -1) * (13 + 26 * (i%5)); container.addChild(createCircle(x, 0)); } }

เรียกใช้แอปพลิเคชันเวอร์ชันใหม่ คุณควรเห็นเส้นสิบวงกลมตรงกลางแอปพลิเคชัน
ขณะนี้เราสามารถแก้ไขคอนเทนเนอร์เพื่ออัปเดตแวดวงทั้งหมดภายในได้ ลองเล่นกับการตั้งค่าตัวแปรภาพที่แตกต่างกันบนสไปรต์คอนเทนเนอร์ ตัวอย่างเช่น แก้ไข x, y, scaleX, scaleY, rotationและ alpha สรรพคุณ

หัวข้ออื่น ๆ

คุณยังทำสิ่งต่างๆ ได้มากขึ้นด้วยตัวเลือกพื้นฐานที่ Flash มีให้ น่าเสียดายที่พวกเขามีเวลามากกว่าที่เรามีเวลาอยู่ที่นี่ สิ่งที่ควรสำรวจ ได้แก่ ตัวกรองภาพ (ดูที่ flash.filters แพ็คเกจ) ซึ่งช่วยให้คุณเพิ่มเอฟเฟกต์ภาพเพื่อแสดงวัตถุโดยใช้ filters ทรัพย์สินและตัวเลือกต่างๆ ที่มีอยู่ใน flash.display.Graphics รวมถึงรูปแบบการเติมและเส้น และกิจวัตรการวาด 2D อื่นๆ อีกมากมาย

ส่วนที่ 2: แอนิเมชั่น

ตอนนี้เราสามารถสร้างวัตถุที่มองเห็นได้ ได้เวลาเริ่มให้ชีวิตกับพวกมัน Flare รวมถึง flare.animate แพ็คเกจที่จะช่วยให้สิ่งนี้ง่ายขึ้น ขั้นแรก เราต้องนำเข้าไลบรารีแฟลร์เพื่อใช้ใน Flex Builder

การนำเข้าไลบรารี

ก่อนดำเนินการต่อ ตรวจสอบให้แน่ใจว่าคุณได้โหลดไลบรารี Flare เป็นโปรเจ็กต์ภายใน Flex Builder คุณควรคลายซิปไฟล์แฟลร์ลงในไดเร็กทอรีเวิร์กสเปซ Flex Builder หลักของคุณแล้ว ขั้นตอนต่อไปคือการนำเข้าในสภาพแวดล้อม Flex Builder:

• ตรวจสอบให้แน่ใจว่าคุณอยู่ในมุมมอง "การพัฒนาแบบยืดหยุ่น"
• คลิกขวาที่บานหน้าต่างเนวิเกเตอร์ทางด้านซ้าย
• เลือก “นำเข้า…” ในเมนูป๊อปอัป
• ในกล่องโต้ตอบ ให้เลือก "ทั่วไป > โครงการที่มีอยู่ในเวิร์กสเปซ" แล้วคลิกปุ่ม "ถัดไป"
• ใช้วิดเจ็ต “Select root directory” เพื่อไปยังไดเร็กทอรีเวิร์กสเปซ Flex Builder ของคุณ
• ตอนนี้คุณควรเห็นโปรเจ็กต์เปลวไฟแสดงอยู่ในแผง "โครงการ:"
• เลือกโครงการ "flare" และ "flare.demos" จากนั้นคลิกปุ่ม "เสร็จสิ้น"

ตอนนี้คุณควรเห็นโครงการแฟลร์ในบานหน้าต่างนาวิเกเตอร์ ขณะนี้ คุณสามารถเรียกดูซอร์สโค้ดสำหรับไลบรารีและการสาธิตแต่ละรายการได้

ภาพรวมของคลังแสงแฟลร์

นี่คือภาพรวมโดยย่อของชุดเครื่องมือแฟลร์ ข้างใน flare โครงการ ดูภายในโฟลเดอร์ "src/flare" คุณจะพบกับแพ็คเกจจำนวนมากที่มีคุณสมบัติที่แตกต่างกัน:

• analytics: ตัวดำเนินการคำนวณสถิติและวิเคราะห์ข้อมูล
• animate: เครื่องมือสร้างแอนิเมชั่น
• data: วิธีการอ่านและเขียนชุดข้อมูล
• display: DisplayObject ประเภทที่ขยายการให้บริการโดย flash.display
• flex: เสื้อคลุมสำหรับการฝังการแสดงภาพ Flare ในแอปพลิเคชันแบบยืดหยุ่น
• physics: เอ็นจิ้นฟิสิกส์สำหรับเอฟเฟกต์ทางกายภาพหรือเลย์เอาต์ที่บังคับทิศทาง
• query: ตัวประมวลผลการสืบค้นสำหรับวัตถุ ActionScript
• scale: คลาสสำหรับการจัดการมาตราส่วนข้อมูล เช่น มาตราส่วนเชิงเส้น บันทึก และเวลา
• util: ชุดคลาสยูทิลิตี้ที่มีฟังก์ชันที่จำเป็นโดยทั่วไป
• vis: ส่วนประกอบและตัวดำเนินการสร้างภาพแสงแฟลร์

นอกจากนี้ยังมี flare.demos โครงการซึ่งมีตัวอย่างมากมายเกี่ยวกับวิธีการสร้างส่วนประกอบ Flare

การนำเข้าไลบรารีภายในโครงการอื่น

หากต้องการใช้แสงแฟลร์ในโปรเจ็กต์ของคุณเอง คุณจะต้องอัปเดตการตั้งค่าโปรเจ็กต์ของคุณ นี่คือวิธีการ:

1. ในบานหน้าต่างนาวิเกเตอร์ ให้คลิกขวาที่โฟลเดอร์บนสุดของโปรเจ็กต์ “บทช่วยสอน”
2. คลิก "คุณสมบัติ" ในเมนูบริบท
3. ในกล่องโต้ตอบผลลัพธ์ คลิก "ActionScript Build Path" ในแผงด้านซ้าย (ควรเป็นรายการที่ 3 จากด้านบน)
4. คลิกแท็บ "เส้นทางห้องสมุด" ในแผงด้านขวา
5. คลิกปุ่ม “เพิ่มโครงการ”
6. ตอนนี้คุณควรเห็นรายการโครงการต่างๆ รวมทั้งการลุกเป็นไฟ
7. เลือก "flare" แล้วคลิก "OK"

คุณได้เพิ่มไลบรารี่แฟลร์ลงในโปรเจ็กต์ของคุณแล้ว และสามารถใช้คลาสใดก็ได้ที่มีให้
สิ่งหนึ่งที่ควรทราบเกี่ยวกับคอมไพเลอร์ Flex โดยค่าเริ่มต้น จะรวมเฉพาะคลาสที่คุณใช้จริงในแอปพลิเคชันของคุณเท่านั้น ดังนั้น แม้ว่าคุณจะนำเข้าไลบรารีขนาดใหญ่มาก ขนาดของไฟล์ .swf สุดท้ายของคุณก็ยังค่อนข้างเล็ก อย่างไรก็ตาม ระวังว่าสิ่งนี้อาจทำให้เกิดปัญหาได้ หากคุณใช้การสะท้อนเพื่อทำการโหลดคลาสแบบไดนามิกในแอปพลิเคชันของคุณ (คุณลักษณะขั้นสูงที่ไม่ครอบคลุมในบทช่วยสอนนี้)

แอนิเมชั่นพื้นฐาน: Tween, Sequence และ Parallel

ตกลง ตอนนี้เรามาเคลื่อนไหวกันเถอะ! NS flare.animate.Transition class เป็นคลาสพื้นฐานสำหรับแอนิเมชั่นทั้งหมด คลาสย่อยที่สำคัญของ Transition เป็น Tween, Sequenceและ Parallel การเปลี่ยนแปลง Tweens ใช้เพื่อทำให้คุณสมบัติของวัตถุชิ้นเดียวเคลื่อนไหว ลำดับใช้เพื่อเรียกใช้ชุดภาพเคลื่อนไหวตามลำดับ ทรานซิชันแบบขนานจะเรียกใช้คอลเลกชั่นของทรานซิชันพร้อมกัน มาเริ่มกันที่ทวีน

คุณสมบัติของวัตถุ Tweening

พื้นฐานของคลาส Tween นั้นเรียบง่าย: เรานำวัตถุ กำหนดชุดของค่าคุณสมบัติที่เราต้องการเปลี่ยนแปลงเมื่อเวลาผ่านไป และระบุระยะเวลาสำหรับการเปลี่ยนแปลงนั้น ใช้แอปพลิเคชันบทช่วยสอนจากส่วนที่ 1 มาหมุนวัตถุคอนเทนเนอร์กัน เพิ่มบรรทัดต่อไปนี้ที่ส่วนท้ายของตัวสร้างคลาส Tutorial:

 var tween:Tween = ใหม่ Tween (คอนเทนเนอร์, 3, {การหมุน:360}); ทวีต.play();

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

 นำเข้า Flare.animate.Tween;

(หมายเหตุ: ในบางครั้ง Flex Builder จะเพิ่มคำสั่งนำเข้าให้คุณโดยอัตโนมัติเมื่อคุณพิมพ์ชื่อคลาสใหม่ ถ้าไม่เช่นนั้น อีกวิธีหนึ่งคือการวางเคอร์เซอร์ข้อความไว้ที่ ปลาย ของชื่อคลาสใหม่และพิมพ์ "Ctrl-Space" - สิ่งนี้ควรสร้างการนำเข้าใหม่สำหรับชั้นเรียนของคุณ)
เรียกใช้แอปพลิเคชันของคุณตอนนี้ จุดควรหมุนเป็นวงกลมในช่วง 3 วินาที
นี่คือสิ่งที่ตัวสร้าง Tween กำลังทำ:

• อาร์กิวเมนต์แรกคืออ็อบเจ็กต์ที่มีค่าควรทวีขึ้น
• อาร์กิวเมนต์ที่สองคือความยาวของภาพเคลื่อนไหว หน่วยเป็นวินาที
• อาร์กิวเมนต์ที่สามคืออินสแตนซ์ Object ที่แสดงคุณสมบัติที่จะทำให้เคลื่อนไหวและค่าเป้าหมาย
  • ชื่อคุณสมบัติต้องตรงกับคุณสมบัติของวัตถุอินพุตทุกประการ
  • อนุญาตให้ซ้อนคุณสมบัติได้ แต่ต้องอยู่ในเครื่องหมายคำพูด ตัวอย่างเช่น, {“data.profit”:50} เป็นการป้อนข้อมูลทางกฎหมายหากวัตถุที่ป้อนมีคุณสมบัติที่ชื่อข้อมูลซึ่งมีคุณสมบัติที่ชื่อว่ากำไร

พื้นที่ play เมธอดแล้วรันแอนิเมชั่น NS play นอกจากนี้ยังสามารถเรียกเมธอดด้วยพารามิเตอร์บูลีนตัวเดียวที่ระบุว่าจะเรียกใช้แอนิเมชั่นย้อนกลับหรือไม่
คุณอาจสังเกตเห็นว่าแอนิเมชั่นการหมุนมีการเร่งความเร็วบ้าง ทั้งนี้เป็นเพราะการตั้งค่าเริ่มต้นสำหรับ Tween อินสแตนซ์คือการใช้แอนิเมชั่น "ช้าเข้าช้าๆ" คุณสามารถควบคุมพฤติกรรมเหล่านี้ได้โดยใช้ Easing ฟังก์ชั่น. ฟังก์ชันเหล่านี้ใช้อินพุตความคืบหน้าของแอนิเมชันปัจจุบันเป็นเศษส่วนระหว่าง 0 ถึง 1 จากนั้นจะส่งคืนเศษส่วนความคืบหน้าที่จัดการเพื่อเปลี่ยนจังหวะของแอนิเมชัน ซึ่งมักจะเป็นแบบที่ไม่ใช่เชิงเส้น
หากต้องการลบการค่อยๆ เปลี่ยน (เช่น ใช้ฟังก์ชันการค่อยๆ เปลี่ยนเชิงเส้น) ให้เขียนดังนี้ tween.easing = Easing.none. เพียงให้แน่ใจว่าคุณนำเข้า flare.animate.Easing คลาสที่ด้านบนของไฟล์
ลองทดสอบกับฟังก์ชันการค่อยๆ เปลี่ยนอื่นๆ ได้ตามสบาย ตัวอย่างเช่น ฟังก์ชันการค่อยๆ เปลี่ยนอาจเกี่ยวข้องกับการค่อยๆ เปลี่ยนใน (จัดการช่วงเริ่มต้นของภาพเคลื่อนไหวเท่านั้น) การค่อยๆ คลาย (จัดการส่วนท้ายของภาพเคลื่อนไหวเท่านั้น) หรือทั้งสองอย่าง ตัวอย่างเช่น ลองสิ่งนี้: tween.easing = Easing.easeOutBounce. สิ่งนี้จะทำให้การหมุนกระดอนในตอนท้าย
ก่อนดำเนินการต่อ ให้ลองทำภาพเคลื่อนไหวคุณสมบัติอื่นๆ ของคอนเทนเนอร์ เช่น ตำแหน่ง มาตราส่วน หรือค่าอัลฟ่า

คอมโพสิตแอนิเมชั่น

พื้นที่ Sequence และ Parallel คลาสช่วยให้คุณสามารถจัดกลุ่มแอนิเมชั่นเข้าด้วยกัน Sequence จะรันชุดของแอนิเมชั่นทีละชุด ตัวอย่างเช่น ลองสิ่งนี้:

 var t1:Tween = ใหม่ Tween(คอนเทนเนอร์, 1, {y:100}); var t2:Tween = ใหม่ Tween (คอนเทนเนอร์, 1, {scaleX:2}); var t3:Tween = ใหม่ Tween(คอนเทนเนอร์, 1, {y:300}); var t4:Tween = ใหม่ Tween (คอนเทนเนอร์, 1, {scaleX:1}); var seq:Sequence = ลำดับใหม่ ( new Parallel(t1, t2), new Parallel(t3, t4) ); seq.play();

คุณจะต้องเพิ่มคำสั่งนำเข้าใหม่ที่ด้านบนของไฟล์:

 นำเข้า Flare.animate.Parallel; นำเข้า flare.animate.Sequence;

สิ่งนี้สร้างสี่ทวีต: t1, t2, t3และ t4. จากนั้นจะสร้างทรานซิชันคู่ขนานที่รัน t1 และ t2 ด้วยกันและวิ่ง t3 และ t4 ด้วยกัน. จากนั้นทรานซิชันแบบคู่ขนานจะรันตามลำดับ ด้วยวิธีนี้ มันง่ายที่จะสร้างแอนิเมชั่นที่ซับซ้อนมากขึ้น
สำหรับแอนิเมชั่นคอมโพสิตขั้นสูง ให้ดูที่ FlareLogo และ flare.demos.Animation ชั้นเรียนใน flare.demos โครงการ

แอนิเมชั่นแบทช์พร้อมทรานซิชันเนอร์

การใช้ Tween, Parallelและ Sequence คลาสต่างๆ คุณสามารถสร้างทรานซิชันแบบเคลื่อนไหวได้ไม่จำกัดจำนวน อย่างไรก็ตาม เมื่อต้องจัดการกับคอลเลกชั่นวัตถุจำนวนมาก (โดยทั่วไปในการแสดงภาพ) อาจเป็นเรื่องยากที่จะจัดการกับ Tweens ชุดใหญ่ที่คล้ายกันด้วยตนเอง นอกจากนี้ ควรเรียกใช้รูทีนแยกต่างหากสำหรับการเข้ารหัสคุณสมบัติภาพ เช่น เลย์เอาต์ สี ขนาด รูปร่าง และไม่ต้องกังวลกับการจัดการแอนิเมชั่น บางทีคุณอาจต้องการทำให้การเปลี่ยนแปลงเคลื่อนไหวหรือบางทีคุณอาจต้องการการอัปเดตแบบคงที่ ไม่ว่าจะด้วยวิธีใด คุณควรจะสามารถใช้รหัสเดิมซ้ำเพื่อกำหนดค่าต่างๆ ได้
เพื่อแก้ไขข้อกังวลเหล่านี้ Flare ได้จัดเตรียม Transitioner ระดับ. ทรานซิชันเนอร์ทำให้กระบวนการสร้างแอนิเมชั่นสำหรับคอลเลกชั่นของอ็อบเจ็กต์ง่ายขึ้น คุณเพียงแค่นำวัตถุและตั้งค่าคุณสมบัติที่ต้องการทีละรายการ เบื้องหลัง ทรานซิชันเซอร์จะสร้างและนำทวีตที่จำเป็นมาใช้ซ้ำโดยอัตโนมัติเพื่อสร้างโมเดลแอนิเมชั่นแบบเต็ม นอกจากนี้ หากไม่ต้องการภาพเคลื่อนไหว คุณสามารถกำหนดค่าทรานซิชันเนอร์ให้ตั้งค่าคุณสมบัติแทนได้ทันที กล่าวโดยย่อ ทรานซิชันเซอร์ให้ชั้นของทิศทางโดยอ้อมสำหรับการอัปเดตคุณสมบัติของอ็อบเจ็กต์ – การอัปเดตเหล่านี้สามารถรวบรวมแล้วเคลื่อนไหว หรือนำไปใช้ได้ทันที
ต่อไปนี้คือตัวอย่างง่ายๆ ของการใช้ทรานซิชันเซอร์ในแอปบทช่วยสอนของเรา

 var t:Transitioner = ทรานซิชันเนอร์ใหม่(2); สำหรับ (var j:int=0; j

ตัวอย่างนี้ทำให้สไปรท์ทั้งหมดเคลื่อนไหวใน container สู่การสุ่มใหม่ y ตำแหน่งและตัวประกอบมาตราส่วนแนวตั้งแบบสุ่ม ก่อนอื่นเราสร้างใหม่ Transitioner ที่ควรสร้างภาพเคลื่อนไหว 2 วินาที จากนั้นเราวนดูสไปรต์ลูกแต่ละตัวและใช้ทรานซิชันเพื่อตั้งค่าคุณสมบัติเป็น Tween
The Transitioner's $ โอเปอเรเตอร์ระบุว่าเราต้องการตั้งค่าเป้าหมายสำหรับออบเจกต์อินพุต โดยค่าเริ่มต้น ไม่ว่าจะเป็น new Tween ถูกสร้างขึ้นหรือที่มีอยู่ Tween ถูกพบสำหรับรายการปัจจุบัน NS $ โอเปอเรเตอร์จะส่งกลับวัตถุที่จะตั้งค่าคุณสมบัติเป้าหมายของทวีต
นอกจากนี้ ทรานซิชันเซอร์ยังสามารถใช้สร้างทรานซิชันแบบคงที่ (ไม่เคลื่อนไหว) ได้ หากผู้เปลี่ยนผ่านของ immediate คุณสมบัติถูกตั้งค่าเป็น true จะไม่สร้าง Tweens ใหม่ ตัวดำเนินการ $ จะคืนค่าอินพุตแทน ซึ่งหมายความว่าคุณสามารถสร้างวิธีการที่อัปเดตค่าโดยใช้ตัวเปลี่ยน จากนั้นควบคุมในภายหลังว่าคุณต้องการอัปเดตค่าเหล่านั้นหรือไม่ มาตรฐาน "โหมดทันที" Transitioner ถูกดึงข้อมูลโดยใช้ static Transitioner.DEFAULT คุณสมบัติ. ด้วยวิธีนี้คุณไม่จำเป็นต้องจัดสรรใหม่ Transitioner เมื่อทำการอัพเดททันที
ทรานซิชันเนอร์ถูกใช้อย่างกว้างขวางทั่วทั้ง flare.vis ซึ่งช่วยให้นักออกแบบการแสดงภาพสามารถควบคุมได้ว่าการอัปเดตใดควรเป็นภาพเคลื่อนไหวและอย่างไร

ส่วนที่ 3: การสร้างภาพ

กำลังโหลดข้อมูล

การแสดงข้อมูลพื้นฐานสำหรับ Flare ใช้ประเภทข้อมูล Flash ในตัว: Object และ Array. ตัวอย่างเช่น ตารางข้อมูลสามารถแสดงเป็นอาร์เรย์ของออบเจ็กต์ ซึ่งแต่ละอ็อบเจ็กต์มีชื่อและค่าของฟิลด์ข้อมูลแต่ละฟิลด์ แม้ว่าการแสดงข้อมูลจะมีประสิทธิภาพมากขึ้น แต่วิธีการนี้ให้ความยืดหยุ่นมากที่สุดในขณะที่ยังใช้ประโยชน์จากข้อตกลงการพัฒนา Flash ที่มีอยู่ด้วย
ในการโหลดข้อมูลลงใน Flash Player มีหลายวิธี วิธีง่ายๆ คือการฝังข้อมูลของคุณลงในแอปพลิเคชันเอง ด้วยวิธีนี้ ข้อมูลจะถูกดาวน์โหลดไปพร้อมกับแอปพลิเคชัน ซึ่งเหมาะสำหรับชุดข้อมูลแบบคงที่ ตัวอย่างเช่น คุณสามารถใช้สัญลักษณ์วัตถุของ ActionScript เพื่อกำหนดชุดข้อมูลโดยตรงเป็นตัวแปร:

var data:Array = [ {id:"Q1", sales:10000, profit:2400}, {id:"Q2", sales:12000, profit:2900}, {id:"Q3", sales:15000, profit :3800}, {id:"Q4", ขาย:15500, กำไร:3900} ];

อย่างไรก็ตาม ในหลายกรณี คุณจะต้องการโหลดข้อมูลของคุณแบบไดนามิก ไม่ว่าจะจากภายในหน้าเว็บ (คุณสามารถใช้ JavaScript ในเบราว์เซอร์เพื่อส่งค่าไปยัง Flash) หรือจากเซิร์ฟเวอร์บนอินเทอร์เน็ต มีหลายวิธีในการทำเช่นนี้ และคุณควรเลือกสิ่งที่ดีที่สุดสำหรับแอปพลิเคชันเฉพาะของคุณ ตัวอย่างเช่น ActionScript ให้ประเภทข้อมูลเพิ่มเติมและไวยากรณ์สำหรับการทำงานกับ XML ข้อมูลโดยใช้ ECMAScript สำหรับ XML (E4X) มาตรฐาน
Flare ยังมียูทิลิตี้สำหรับการโหลดชุดข้อมูลภายนอกอีกด้วย รองรับการโหลดข้อมูลจากเซิร์ฟเวอร์ใด ๆ บนอินเทอร์เน็ตและแปลงข้อมูลนั้นเป็นวัตถุ ActionScript ภายใน รูปแบบไฟล์ที่รองรับในปัจจุบันคือข้อความที่คั่นด้วยแท็บ ("แท็บ" ซึ่งเป็นรูปแบบไฟล์มาตรฐานสำหรับการส่งออกข้อมูลจากเครื่องมือเช่น Excel) สัญกรณ์วัตถุ JavaScript (“json” ซึ่งเป็นรูปแบบข้อมูลทั่วไปสำหรับเว็บแอปพลิเคชัน) และ GraphML (“กราฟมล”, เอ XML รูปแบบสำหรับแสดงเครือข่ายที่มีโหนดและขอบ)
ข้อมูลระยะไกลถูกโหลดด้วยแสงแฟลร์โดยใช้ปุ่ม flare.data.DataSource ระดับ. ต่อไปนี้คือตัวอย่างการใช้เพื่อโหลดไฟล์ข้อมูลที่คั่นด้วยแท็บ:

var ds:DataSource = แหล่งข้อมูลใหม่ ( "http://flare.prefuse.org/data/test.tab.txt", "tab" ); ตัวโหลด var:URLLoader = ds.load(); loader.addEventListener (Event.COMPLETE, function (evt:Event):void { // function to handle data when loading is complete var ds:DataSet = loader.data as DataSet; // ตอนนี้ทำอะไรบางอย่างกับข้อมูล... } );

พื้นที่ DataSource ตัวสร้างมีสองอาร์กิวเมนต์ที่จำเป็น: URL ของชุดข้อมูลและสตริงที่ระบุรูปแบบไฟล์ ขณะนี้รูปแบบที่รองรับคือ “tab” (คั่นด้วยแท็บ), “json” (JavaScript Object Notation) และ “graphml” (GraphML)
สำหรับชุดข้อมูลที่สคีมา (ชื่อและประเภทข้อมูลของฟิลด์) อาจไม่ชัดเจน ยังมีอาร์กิวเมนต์ตัวสร้างทางเลือกที่สามซึ่งใช้ DataSchema พิมพ์. ดู flare.data.DataSchema และ flare.data.DataField ชั้นเรียนเพิ่มเติม สคีมามีประโยชน์ในการตรวจสอบให้แน่ใจว่ามีการตั้งชื่อค่าข้อมูลอย่างถูกต้อง (เช่น สำหรับไฟล์ที่คั่นด้วยแท็บที่ไม่มีแถวส่วนหัว) และแปลงเป็นประเภทข้อมูลที่เหมาะสม (เช่น สำหรับข้อมูล JSON ซึ่งค่าตัวเลขถูกห่อด้วยเครื่องหมายคำพูด)
ในการโหลดข้อมูลจริง ๆ จะเรียกวิธีการโหลด DataSource โดยส่งคืน a flash.net.URLLoader ตัวอย่าง. ตัวโหลดสามารถใช้เพื่อติดตามความคืบหน้าของการดาวน์โหลด (เช่น หากคุณต้องการให้แถบแสดงความคืบหน้า) และแจ้งเหตุการณ์เมื่อการดาวน์โหลดเสร็จสิ้น ในตัวอย่างข้างต้น เราได้เพิ่มตัวฟังเหตุการณ์เพื่อรับการแจ้งเตือนเมื่อการดาวน์โหลดเสร็จสิ้น NS DataSource จะแยกวิเคราะห์ข้อมูลที่ป้อนโดยอัตโนมัติ แมปลงในวัตถุ ActionScript และเก็บผลลัพธ์ไว้ใน a flare.data.DataSet วัตถุ. DataSet คลาสสามารถแสดงข้อมูลทั้งตารางและเครือข่าย (โหนด/ขอบ)

การสร้างและจัดการ Visual Objects

ตอนนี้เราต้องการแสดงภาพชุดข้อมูล ในการทำเช่นนี้ เราแมปบันทึกข้อมูลแต่ละรายการลงในรายการภาพ Flare จัดเตรียมชุดของวัตถุที่มองเห็นเพื่อแสดงข้อมูล นี่คือภาพรวมของคลาสพื้นฐานที่จัดทำโดย flare.vis.data บรรจุภัณฑ์

• DataSprite: คลาสพื้นฐานสำหรับสไปรต์ที่แสดงข้อมูลเป็นภาพ DataSprite เป็นคลาสย่อยของ Flash Player's Sprite ชั้นเรียน DataSprite รวมถึง a data คุณสมบัติที่เก็บข้อมูลทูเพิล (อ็อบเจ็กต์ ActionScript) และยังมีตัวแปรภาพเพิ่มเติมนอกเหนือจากที่ได้รับการสนับสนุนโดยสไปรท์พื้นฐาน ซึ่งรวมถึงฟิลด์สี รูปร่าง และขนาด และรองรับการตั้งค่าตำแหน่งในพิกัดเชิงขั้ว
• NodeSprite: DataSprite อินสแตนซ์ที่เป็นตัวแทนของโหนด นี่เป็นประเภทเริ่มต้นที่ใช้สำหรับการแสดงข้อมูลเป็นภาพ NodeSprite อินสแตนซ์สามารถเชื่อมต่อภายในเครือข่ายหรือโครงสร้างแบบต้นไม้โดย EdgeSprite ตัวอย่าง.
• EdgeSprite: DataSprite อินสแตนซ์ที่แสดงถึงขอบ หนึ่ง EdgeSprite เชื่อมต่อสอง NodeSprites. โหนดสามารถเข้าถึงได้ผ่านทาง source และ target สรรพคุณ EdgeSprites ใช้ในการสร้างกราฟและต้นไม้ ตลอดจนแสดงเส้นต่างๆ เช่น ในกราฟอนุกรมเวลา

โดยปกติ NodeSprites และ EdgeSprites จะถูกสร้างและจัดเก็บไว้ในไฟล์ flare.vis.data.Data คลาสซึ่งจัดการรายการภาพทั้งหมดสำหรับการแสดงภาพครั้งเดียว NS Data คลาสจัดเตรียมเมธอดสำหรับการสร้างออบเจ็กต์ภาพใหม่สำหรับข้อมูลทูเพิลและสำหรับการแสดงโครงสร้างกราฟ
พื้นที่ Data คลาสยังมีเมธอดสำหรับการสำรวจและปรับปรุงรายการข้อมูลที่มีอยู่ NS nodes และ edges คุณสมบัติส่งคืนรายการของโหนดและขอบที่อยู่ภายในข้อมูล แต่ละรายการเหล่านี้รวมถึงa visit วิธีที่อนุญาตให้คุณส่งผ่านฟังก์ชันที่จะถูกเรียกด้วยแต่ละโหนดหรือขอบ นอกจากนี้ setProperty และ setProperties วิธีช่วยให้คุณตั้งค่าคุณสมบัติสำหรับโหนดหรือขอบทั้งหมดในครั้งเดียว วิธีการเหล่านี้อาจเลือกใช้ a Transitioner เป็นอาร์กิวเมนต์ เพื่อให้คุณสามารถทำให้การอัปเดตคุณสมบัติเคลื่อนไหวได้
ตัวอย่างเช่น โค้ดต่อไปนี้ส่งผลให้เกิดแอนิเมชั่นความยาว XNUMX วินาที โดยที่สีของเส้นสำหรับโหนดทั้งหมดถูกตั้งค่าเป็นสีน้ำเงิน (โปรดทราบว่าสัญกรณ์ฐานสิบหกสำหรับ DataSprite ค่าสีรวมถึงช่องอัลฟาและช่องสีแดง เขียว น้ำเงิน)

data.nodes.setProperty("lineColor", 0xff0000bb, Transitioner ใหม่(1)).play();

รายการโหนดและขอบยังรองรับค่าคุณสมบัติเริ่มต้นโดยใช้ปุ่ม setDefault, setDefaults, removeDefaultและ clearDefaults วิธีการ ค่าเริ่มต้นจะถูกตั้งค่าบนโหนดหรือขอบที่สร้างขึ้นใหม่โดยใช้คลาสข้อมูล' addNode or addEdgeFor วิธีการ
พื้นที่ Tree คลาสเป็นคลาสย่อยของ Dataเชี่ยวชาญในการแสดงต้นไม้มากกว่ากราฟทั่วไป NS Data คลาสรองรับการสร้าง a . โดยอัตโนมัติ Tree ตัวอย่างโดยการคำนวณขยายต้นไม้ของกราฟทั่วไป วิธีการสร้าง spanning tree หลายวิธี ซึ่งรวมถึงอัลกอริธึมแบบกว้างก่อน ลึกก่อน และต่ำสุด สามารถส่งผ่านเป็นพารามิเตอร์ได้ การคำนวณเหล่านี้ดำเนินการโดยใช้ flare.analytics.graph.SpanningTree ชั้นเรียน
ในการสร้างวัตถุโหนดและขอบจริง ๆ เราใช้ addNode และ addEdgeFor วิธีการ

• addNode รับอินพุตข้อมูลทูเพิล (an Object) และสร้างใหม่ NodeSprite เพื่อให้เห็นภาพข้อมูลนั้น
• addEdgeFor ใช้เวลาสองที่มีอยู่ NodeSprites และเพิ่ม an EdgeSprite เชื่อมต่อพวกเขา วิธีการนี้ยังเป็นทางเลือกยกเว้น ทูเพิลข้อมูล (อีกครั้ง an Object แทนเขตข้อมูลใด ๆ ) สำหรับขอบ

นี่คือตัวอย่างง่ายๆ สำหรับการสร้าง NodeSprites สำหรับชุดข้อมูลแบบตาราง สมมติว่าเรามีอาร์เรย์ของวัตถุข้อมูล:

รายการ var:อาร์เรย์; // อาร์เรย์ของวัตถุข้อมูลที่เราโหลดไว้แล้ว var data:Data = new Data(); // ที่เก็บข้อมูลใหม่สำหรับแต่ละรายการ (var o: Object in list) { data.addNode (o); }

ผลที่ได้คือ Data วัตถุที่มีภาพ DataSprite (โหนดหรือขอบ) อินสแตนซ์
ในทางปฏิบัติ คุณไม่จำเป็นต้องใส่ข้อมูลที่แสดงเป็นภาพด้วยตนเองเสมอไป เพื่อสร้าง Data วัตถุสำหรับการแสดงภาพชุดข้อมูลที่โหลด คุณมักจะใช้วิธีอำนวยความสะดวกแทนได้ NS Data.fromArray() ฟังก์ชันสร้าง a Data อินสแตนซ์สำหรับข้อมูลตารางที่จัดเก็บเป็นอาร์เรย์ของวัตถุ ActionScript ในขณะที่ Data.fromDataSet() วิธีการสร้าง a . ในทำนองเดียวกัน Data อินสแตนซ์จากโหลด DataSet วัตถุ.

การสร้างภาพ

ตอนนี้ มารวมกันทั้งหมดเพื่อเริ่มสร้างภาพข้อมูล NS Visualization คลาสแสดงถึงการสร้างภาพข้อมูลเดี่ยว รวมถึงเครื่องหมายที่มองเห็นได้ (เก็บไว้ในa Data ตัวอย่าง) และแกน ในการสร้างการแสดงภาพ เราโหลดชุดข้อมูล เพิ่มข้อมูลลงในการแสดงภาพ และตั้งค่าตัวดำเนินการที่กำหนดวิธีการแสดงข้อมูลเป็นภาพ นี่คือตัวอย่าง ดูโค้ดก่อน จากนั้นอ่านต่อไปเพื่อทำความเข้าใจว่าแต่ละส่วนกำลังทำอะไร

แพ็คเกจ { นำเข้า Flare.data.DataSet; นำเข้า Flare.data.DataSource; นำเข้า Flare.scale.ScaleType; นำเข้า Flare.vis.Visualization; นำเข้า Flare.vis.data.Data; นำเข้า Flare.vis.operator.encoder.ColorEncoder; นำเข้า Flare.vis.operator.encoder.ShapeEncoder; นำเข้า flare.vis.operator.layout.AxisLayout; นำเข้า flash.display.Sprite; นำเข้า flash.events.Event; นำเข้า flash.geom.Rectangle; นำเข้า flash.net.URLLoader; [SWF (width="800", height="600", backgroundColor="#ffffff", frameRate="30")] การสอนคลาสสาธารณะจะขยาย Sprite { private var vis:Visualization; การสอนฟังก์ชันสาธารณะ () { loadData (); } ฟังก์ชั่นส่วนตัว loadData():void { var ds:DataSource = new DataSource( "http://flare.prefuse.org/data/homicides.tab.txt", "tab"); ตัวโหลด var:URLLoader = ds.load(); loader.addEventListener (Event.COMPLETE, function (evt:Event):void { var ds:DataSet = loader.data เป็น DataSet; visualize (Data.fromDataSet (ds)); }); } ฟังก์ชั่นส่วนตัว visualize(data:Data):void { vis = new Visualization(data); vis.bounds = สี่เหลี่ยมผืนผ้าใหม่ (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild(vis); vis.operators.add(ใหม่ AxisLayout("data.date", "data.age")); vis.operators.add (ColorEncoder ใหม่ ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (ShapeEncoder ใหม่ ("data.race")); vis.data.nodes.setProperties ({fillColor:0, lineWidth:2}); vis.update(); } } }

มาดูแต่ละวิธีกัน
ตัวสร้างนั้นง่าย: มันแค่เรียก loadData วิธี
พื้นที่ loadData วิธีสร้างแหล่งข้อมูลใหม่และโหลดโดยใช้วิธีการที่อธิบายไว้ก่อนหน้านี้ ในกรณีนี้ ชุดข้อมูลรายงานการฆาตกรรมในเขตลอสแองเจลิสในปี 2007 ซึ่งจัดเก็บไว้ในรูปแบบที่คั่นด้วยแท็บ เมื่อการโหลดเสร็จสิ้น ทูเพิลข้อมูลที่โหลดจะถูกเพิ่มลงใน a Data ตัวอย่างโดยใช้ fromDataSet วิธีอำนวยความสะดวก ภายใต้ประทุนนี้ส่งผลให้เกิดการสร้าง NodeSprites สำหรับการแสดงข้อมูลแต่ละรายการ ในที่สุด visualize เรียกว่าวิธีการ
พื้นที่ visualize วิธีการตั้งค่าการแสดงภาพ นี่คือสิ่งที่เกิดขึ้นในแต่ละขั้นตอน:

• ส่วนที่ 1: การเริ่มต้น
  • การสร้างภาพข้อมูลใหม่ถูกสร้างขึ้นสำหรับข้อมูล
  • เรากำหนดขอบเขตสำหรับการแสดงภาพ สิ่งนี้กำหนดพื้นที่เค้าโครง
  • เราตั้งค่า x และ y ตำแหน่งของการสร้างภาพข้อมูลของเราและเพิ่มการแสดงภาพไปยังรายการที่แสดง
• ส่วนที่ 2: การระบุการเข้ารหัสภาพ
  • เราใช้เค้าโครงแกน โดยวาง "วันที่" บนแกน x และ "อายุ" บนแกน y NS AxisLayout ตัวดำเนินการยังกำหนดค่าแกนสำหรับการแสดงภาพโดยอัตโนมัติ เราใช้ไวยากรณ์ “data.date” เพื่อระบุตัวแปรข้อมูล เนื่องจากอยู่ภายใน NodeSprite's data คุณสมบัติ
  • เราเพิ่มการเข้ารหัสสี เพื่อให้สีเส้นของโหนดแสดงถึงตัวแปร "สาเหตุ" (สาเหตุการตาย) นอกจากนี้เรายังบอกตัวเข้ารหัสสีว่าค่าของตัวแปร "สาเหตุ" แสดงถึงหมวดหมู่ (ScaleType.CATEGORIES). ตัวเข้ารหัสสีจะใช้ข้อมูลนี้ในการเลือกจานสีที่เหมาะสมโดยอัตโนมัติ ตามที่เราจะเห็นในเร็วๆ นี้ คุณสามารถจัดเตรียมจานสีของคุณเองได้
  • เราเพิ่มการเข้ารหัสรูปร่าง เพื่อให้รูปร่างของวัตถุแสดงถึง "เชื้อชาติ" ของเหยื่อ
  • เราตั้งค่าคุณสมบัติเริ่มต้น – เราตั้งค่าสีเติมของโหนดให้โปร่งใสเต็มที่ และตั้งค่าความกว้างของเส้นเป็น 2 พิกเซล
  • สุดท้ายเราเรียกว่า update กระบวนการ. สิ่งนี้จะรันโอเปอเรเตอร์ทั้งหมดตามลำดับ

กำลังอัปเดตการแสดงภาพ

เมื่อสร้างการแสดงภาพแล้ว เราอาจต้องการอัปเดต ตัวอย่างเช่น เราอาจต้องการเปลี่ยนการเข้ารหัสสีเพื่อแสดงภาพเพศของผู้คนแทน
ขั้นแรก ให้เพิ่มวิธีการใหม่ในชั้นเรียน:

 ฟังก์ชั่นส่วนตัว colorByGender():void { var color:ColorEncoder = ColorEncoder(vis.operators [1]); color.source = "data.sex"; color.palette = ColorPalette ใหม่ ([0xffff5555, 0xff8888ff]); vis.update(ทรานซิชันเนอร์ใหม่(2)).play(); }

วิธีนี้:

1. ดึงโอเปอเรเตอร์ตัวที่สอง (ตัวดำเนินการที่ดัชนี 1) และส่งไปที่a ColorEncoder
2. เปลี่ยน source คุณสมบัติสำหรับตัวเข้ารหัสสีเพื่อใช้ตัวแปร “data.sex”
3. ตั้งค่าจานสีใหม่ (ในกรณีนี้ สีแดงสำหรับผู้หญิง สีน้ำเงินสำหรับผู้ชาย – ลำดับสีตรงกับลำดับตัวอักษรของป้ายกำกับ)
4. ทำให้การเปลี่ยนแปลงเคลื่อนไหวโดยเรียกการอัพเดทด้วย a Transitioner กำหนดไว้สำหรับแอนิเมชั่นสองวินาที NS vis.update วิธีการส่งคืน Transitionerดังนั้นเราจึงสามารถเรียกค่าที่ส่งคืนของการอัพเดทได้ (หมายเหตุ: คุณสามารถละเว้น Transitioner และเพียงแค่ส่งเลข 2 เป็นอาร์กิวเมนต์ไปที่ update. ใหม่ Transitioner จะถูกสร้างขึ้นโดยอัตโนมัติและส่งคืน)

ตอนนี้เราจำเป็นต้องวางสายแอปพลิเคชันเพื่อให้เราสามารถเรียกใช้การอัปเดตแบบโต้ตอบได้ ให้เพิ่มโค้ดต่อไปนี้ใน Constructor:

 // เพิ่มปุ่ม var ป้ายกำกับที่คลิกได้: TextSprite = new TextSprite("Color by Gender"); addChild (ปุ่ม); ปุ่ม.x = 710; button.y = 50; button.buttonMode = จริง; button.addEventListener (MouseEvent.CLICK, ฟังก์ชั่น (evt: MouseEvent): โมฆะ { colorByGender (); } );

รหัสนี้:

1. สร้างป้ายกำกับข้อความใหม่ (TextSprite เป็นคลาสตัวช่วยจาก flare.display แพ็คเกจ)
2. เพิ่มป้ายกำกับให้กับแอปพลิเคชันและกำหนดตำแหน่ง
3. ชุดอุปกรณ์ buttonMode เป็นจริง (สิ่งนี้จะทำให้เคอร์เซอร์มือปรากฏขึ้นเมื่อคุณวางเมาส์เหนือฉลาก)
4. เพิ่มตัวฟังเหตุการณ์ที่ทริกเกอร์เมื่อมีการคลิกป้ายกำกับ เราเพิ่มฟังก์ชันเรียกกลับที่เรียก colorByGender วิธี

เพื่อให้โค้ดด้านบนใช้งานได้ เราจำเป็นต้องรวมคำสั่งนำเข้าเพิ่มเติมเหล่านี้ไว้ที่ด้านบนสุดของไฟล์:

 นำเข้า flash.events.MouseEvent; นำเข้า Flare.animate.Transitioner; นำเข้า flare.display.TextSprite; นำเข้า Flare.util.palette.ColorPalette;

ตอนนี้คุณควรจะสามารถคอมไพล์และเรียกใช้แอปพลิเคชันได้ การคลิกป้ายกำกับ "สีตามเพศ" จะทำให้การเปลี่ยนแปลงการเข้ารหัสสีเคลื่อนไหว

ขั้นตอนถัดไป

ตัวอย่างข้างต้นแสดงพื้นฐานของ Flash และไลบรารี Flare แต่ยังมีคุณลักษณะอื่นๆ อีกมากมายที่ยังไม่ครอบคลุม ต่อจากนี้ไป เราแนะนำให้ (ก) ตรวจสอบทั้ง Flash และ Flare API เอกสารประกอบเพื่อให้เข้าใจถึงคลาสที่มีอยู่ทั้งหมด และ (b) เจาะลึกการสาธิต Flare เพื่อดูว่าสามารถใช้หลักการเดียวกันนี้เพื่อสร้างการแสดงภาพอื่นๆ ได้อย่างไร หรือเจาะลึกซอร์สโค้ดของ Flare เพื่อเรียนรู้ว่าเกิดอะไรขึ้นภายใต้ประทุน
เพื่อช่วยในกระบวนการนี้ นี่คือภาพรวมทั่วไปของแพ็คเกจย่อยใน flare.vis:

• flare.vis.axis: จัดเตรียมแกน ฉลาก และเส้นตาราง
• flare.vis.controls: ตัวจัดการการโต้ตอบสำหรับการเลือก การซูม และอื่นๆ
• flare.vis.data: วัตถุภาพที่แสดงถึงองค์ประกอบข้อมูล
• flare.vis.data.render: ตัวแสดงผลแบบเสียบได้ซึ่งวาด DataSprites
• flare.vis.events: ประเภทเหตุการณ์ที่ใช้ในเฟรมเวิร์กแฟลร์
• flare.vis.legend: แสดงถึงตำนานในการอธิบายการเข้ารหัสด้วยภาพ
• flare.vis.operator: การสร้างบล็อคสำหรับการกำหนดการแสดงภาพ
• flare.vis.palette: จานสีสำหรับค่าสี รูปร่าง และขนาด
• flare.vis.util: คลาสยูทิลิตี้ทั่วไป

ตอนนี้คุณควรรู้เพียงพอที่จะทำความเข้าใจการสาธิตใน flare.demos บรรจุุภัณฑ์. อย่าลังเลที่จะเล่น แก้ไข คัดลอก วาง และสร้างจากการสาธิตเพื่อให้เข้าใจวิธีการทำงานของ Flash และ Flare มากขึ้น

การเชื่อมโยง

ดาวน์โหลด

เครื่องมือ

คำแนะนำด้านเทคนิคอื่น ๆ

ระบบขอใช้บริการ

ที่มา: https://blokt.com/tool/prefuse-flare