بھڑک اٹھنا | ویب کے لیے ڈیٹا ویژولائزیشن

Flare انٹرایکٹو ڈیٹا ویژولائزیشن بنانا آسان بناتا ہے۔

اپنے تصورات بنانا شروع کرنے کے لیے، بھڑک اٹھنا ڈاؤن لوڈ کریں۔ اور نیچے دیے گئے ٹیوٹوریل کے ذریعے کام کریں۔ مزید مدد کی ضرورت ہے؟ کا دورہ کریں۔ مدد فورم (آپ کو ایک کی ضرورت ہوگی۔ SourceForge پوسٹ کرنے کے لیے لاگ ان کریں)۔

Flare ایک BSD لائسنس کے تحت جاری کردہ اوپن سورس سافٹ ویئر ہے، یعنی اسے آزادانہ طور پر تعینات اور تبدیل کیا جا سکتا ہے (اور یہاں تک کہ $$ میں بھی فروخت کیا جا سکتا ہے)۔ Flare کے ڈیزائن کو اس کے پیشرو پریفیوز سے ڈھالا گیا تھا، جاوا کے لیے ایک ویژولائزیشن ٹول کٹ۔

درخواستیں

اعلانات

• 2010.10.07: فلیئر ڈیولپمنٹ کو کمیونٹی کے لیے کھول دیا گیا ہے اور ماخذ SourceForge سے منتقل ہو گیا ہے۔ GitHub پر ایک نیا گھر. بھڑکنا 2009.01.24 ابھی بھی آخری سرکاری ریلیز ہے اور (کم از کم ابھی کے لیے) سبق اور دستاویزات اس کی عکاسی کرتے ہیں۔ GitHub پر ترقیاتی ورژن اب فلیش پلیئر 10 کے لیے بہتر سپورٹ کے ساتھ ساتھ بہت سی دیگر چھوٹی اصلاحات اور تبدیلیوں پر مشتمل ہے۔
• 2009.01.24: بھڑک اٹھنا 2009.01.24 رہا کردیاگیا. یہ کئی بگ فکسز اور اپ ڈیٹس کے ساتھ مینٹیننس ریلیز ہے۔ دیکھیں رہائشی نوٹ مزید تفصیلات کے لیے. یہ فلیش پلیئر 9 کے لیے جاری کردہ آخری منصوبہ ہے — مستقبل کے ورژن ورژن 10 میں منتقل ہو جائیں گے۔
• 2008.07.30: بھڑک اٹھنا 2008.07.29 رہا کردیاگیا. یہ ایک بڑی ریلیز ہے جس میں بہت سی نئی خصوصیات اور تعمیراتی اصلاحات متعارف کرائی گئی ہیں۔ دیکھیں رہائشی نوٹ مزید تفصیلات کے لئے.
• 2008.07.30: بھڑک اٹھنا 2008.08.08 رہا کردیاگیا. اس ریلیز میں بہتر لیجنڈ سپورٹ، نامزد ٹرانزیشنز، بگ فکسز، اور کپلنگ کو کم کرنے اور یوٹیلیٹی کلاسز کو مستحکم کرنے کے لیے ری فیکٹرنگ شامل ہے۔ دیکھیں رہائشی نوٹ مزید تفصیلات کے لئے.

ٹیوٹوریل

ایکشن اسکرپٹ اور فلیئر سیکھنے کے لیے مرحلہ وار ٹیوٹوریل۔

شروع

پہلا قدم اپنے ترقیاتی ٹولز کو ترتیب دینا ہے۔

1. کام کرنے والے فلیش ڈویلپمنٹ ماحول کو ترتیب دیں۔ دو نقطہ نظر ہیں۔ ہم سادگی کے لیے پہلی تجویز کرتے ہیں، لیکن زیادہ جدید صارفین کا دوسرا طریقہ استعمال کرنے کا خیرمقدم ہے۔
   • آپشن 1 (آسان): ایڈوب فلیکس بلڈر انسٹال کریں۔.
     • یہ ActionScript/Flex ایپلی کیشنز کے لیے مکمل ترقی کا ماحول ہے۔ یہ تمام بڑے پلیٹ فارمز (ونڈوز، میک، یونکس) کے لیے دستیاب ہے۔ وہ صارفین جو پہلے سے ہی Eclipse IDE استعمال کر رہے ہیں وہ Flex Builder کو Eclipse پلگ ان کے طور پر بھی انسٹال کر سکتے ہیں۔
     • Flex Builder کو استعمال کرنے کا انتباہ یہ ہے کہ یہ تجارتی سافٹ ویئر ہے اور صرف ایک محدود آزمائشی مدت کے لیے کام کرے گا۔ تاہم، Adobe یونیورسٹی کے طلباء، فیکلٹی، اور عملے کو مفت Flex Builder لائسنس فراہم کرتا ہے۔
   • آپشن 2 (زیادہ پیچیدہ): مفت Flex SDK انسٹال کریں۔
     • یہ بنیادی ActionScript/Flex compilers انسٹال کرے گا: mxmlc اور compc. اس کے بعد آپ اپنا تعمیراتی ماحول ترتیب دے سکتے ہیں، مثال کے طور پر، کا استعمال کرتے ہوئے make or ant نظام کی تعمیر. بھڑک اٹھنا a کے ساتھ پیک کیا گیا ہے۔ build.xml کے ساتھ استعمال کے لیے فائل اپاچی چیونٹی نظام کی تعمیر. ایک بار چیونٹی انسٹال ہو جائے تو بس کھولیں۔ build.xml ٹیکسٹ ایڈیٹر میں فائل کریں، اپنے فلیکس کی طرف اشارہ کرنے کے لیے پہلی دو لائنوں کو تبدیل کریں۔ SDK تنصیب، اور پھر استعمال کریں ant لائبریریوں کو مرتب کرنا۔ ہم Flex کی ترقی کے لیے Adobe Labs کے چیونٹی کے کاموں کا استعمال کرتے ہیں۔
     • اس نقطہ نظر کا فائدہ یہ ہے کہ تمام سافٹ ویئر مفت ہیں، اور آپ پر ختم نہیں ہوں گے۔ تاہم، آپ Flex Builder کی طرف سے فراہم کردہ خودکار تالیف، پراجیکٹ مینجمنٹ، اور خودکار تکمیل جیسی خصوصیات سے محروم ہو جاتے ہیں۔
2. پریفیوز فلیئر لائبریریوں کو ڈاؤن لوڈ کریں۔
   • ڈاؤن لوڈ ایک زپ فائل ہے جس میں ایکشن اسکرپٹ لائبریری پروجیکٹس کا ایک سیٹ ہے۔ اگر آپ Flex Builder استعمال کر رہے ہیں تو فائلوں کو اپنی بنیادی ورک اسپیس ڈائرکٹری میں ان زپ کریں۔ ٹیوٹوریل کے دوران ہم انہیں Flex Builder میں درآمد کریں گے اور تصورات کی تعمیر کے لیے استعمال کریں گے!
   • سافٹ ویئر فی الحال ایک الفا ورژن ہے، اور اس لیے کچھ کیڑے اور حدود متوقع ہیں۔ ہم جلد از جلد مسائل کو حل کریں گے، اور اوپر والا لنک ہمیشہ تازہ ترین ورژن کی طرف اشارہ کرے گا۔

فلیش اور ایکشن اسکرپٹ کا تعارف 3

فلیش انٹرایکٹو گرافکس کے لیے ایک بہترین ماحول ہے اور ActionScript 3 پروگرامنگ لینگویج کے حالیہ اضافے کے ساتھ، یہ بہت زیادہ طاقتور اور موثر ہو گیا ہے۔ اگرچہ AS3 کا مکمل تعارف اس ٹیوٹوریل کے دائرہ کار سے باہر ہے، یہاں کچھ وسائل ہیں جو آپ کو مفید پائیں گے:

• ایڈوب اضافی وسائل کے لنکس کے ساتھ AS3 کا جائزہ فراہم کرتا ہے۔
• ضروری ایکشن اسکرپٹ 3 O'Reilly پبلشنگ سے Colin Moock کی طرف سے شروع کرنے میں آپ کی مدد کرنے کے لیے ایک بہترین کتاب ہے۔ آپ کر سکتے ہیں۔ یہاں آن لائن اس تک رسائی حاصل کریں۔ (کچھ ادارے، جیسے یونیورسٹیاں، مفت رسائی فراہم کرتے ہیں)۔
• Adobe Flex API حوالہ مختلف کلاسز اور دستیاب طریقوں کو سمجھنے کے لیے انمول ہے۔ ہم صرف کلاسز پر توجہ مرکوز کریں گے۔ flash.* پیکیجز

یہ ٹیوٹوریل ایکشن اسکرپٹ نحو اور اقسام کے ساتھ ساتھ آبجیکٹ پر مبنی پروگرامنگ کے تصورات سے بنیادی واقفیت کا حامل ہے۔

حصہ 1: ڈسپلے آبجیکٹ

تعارف

فلیش ماڈلز کا استعمال کرتے ہوئے ایک 2D بصری منظر سین گراف. بصری اشیاء کو ایک درجہ بندی میں ترتیب دیا جاتا ہے، جس میں والدین کی کوآرڈینیٹ اسپیس میں بچوں کی اشیاء کی وضاحت کی جاتی ہے۔ آپ اکثر اس سینگراف کو دیکھیں گے جس کا حوالہ دیا جاتا ہے۔ ڈسپلے فہرست ایڈوب کی دستاویزات اور فلیش پروگرامنگ کی کتابوں دونوں میں۔
ڈسپلے لسٹ کے اوپری حصے میں نوڈ ہمیشہ ہوتا ہے۔ Stage چیز. اسٹیج میں ہمیشہ ایک اور صرف ایک بچہ ہوتا ہے۔ اسے کہا جاتا ہے۔ root، اور تمام بصری اشیاء جڑ کے نیچے ہیں۔ عام طور پر، روٹ آپ کی اصل فلیش ایپلی کیشن ہے۔ ہم جلد ہی اس پر واپس آئیں گے۔
تمام بصری آئٹمز جو ڈسپلے لسٹ میں شامل کی جا سکتی ہیں ان کی مثالیں ہیں۔ DisplayObject کلاس کے ذیلی طبقات DisplayObject شامل Bitmap (تصاویر کے لیے) TextField (انٹرایکٹو ٹیکسٹ ایریاز کے لیے)، اور Video (یوٹیوب کے بارے میں سوچیں)۔ تاہم، سب سے زیادہ عام مثالیں ہیں Sprite اور Shape کلاسز حوالہ کے لیے ان میں سے زیادہ تر کلاسز میں مل سکتی ہیں۔ flash.display پیکیج (اگرچہ آخر کار آپ کو ممکنہ طور پر مل جائے گا۔ flash.text استعمال کا پیکیج بھی)۔
۔ Sprite کلاس فلیش پلیئر کے ذریعہ استعمال ہونے والا سب سے مفید، عمومی بصری آبجیکٹ ہے۔ اسپرائٹس بصری اشیاء ہیں جو دونوں ڈرائنگ مواد پر مشتمل ہیں اور ڈسپلے لسٹ میں ذیلی نوڈس کے لیے کنٹینر کے طور پر کام کر سکتی ہیں ( Sprite کلاس ذیلی طبقات flash.display.DisplayObjectContainer کلاس)۔ اس کے برعکس، Shape کلاس ڈرائنگ مواد پر مشتمل ہوسکتی ہے، لیکن ذیلی نوڈس کو نہیں رکھ سکتی۔ نتیجے کے طور پر، شکلیں کم میموری استعمال کرتی ہیں، لیکن بہت کم لچکدار ہوتی ہیں۔ سادگی کے لیے، ہم اس ٹیوٹوریل میں Sprites پر توجہ مرکوز کریں گے۔

ایک نئی درخواست بنائیں

سب سے پہلے، آئیے ایک نئی فلیش ایپلی کیشن بنائیں۔ ایسا کرنے کے لیے، Flex Builder کھولیں اور یقینی بنائیں کہ آپ "Flex Development" کے تناظر میں ہیں (اکثر اوپری دائیں جانب سیاہ اور سفید "Fx" آئیکن پر کلک کرکے پہنچ جاتے ہیں)۔
بائیں طرف "نیویگیٹر" پین میں، ڈسپلے پر دائیں کلک کریں اور "نیا> ایکشن اسکرپٹ پروجیکٹ" کو منتخب کریں۔ نتیجہ خیز ڈائیلاگ میں، پروجیکٹ کے نام کے طور پر "ٹیوٹوریل" ٹائپ کریں، پھر "ختم" پر کلک کریں۔ یہ آپ کے لیے ایک نیا پروجیکٹ بنائے گا۔
اب آپ کو "نیویگیٹر" پین میں "ٹیوٹوریل" فولڈر دیکھنا چاہئے۔ اس فولڈر کے اندر، آپ کو "Tutorial.as" نام کی ایک فائل نظر آنی چاہیے۔ یہ آپ کی اہم درخواست فائل ہے۔ اسے کھولیں، اگر یہ پہلے ہی نہیں کھلا ہے۔
فائل کے اندر، آپ اس کلاس کے لیے بنیادی سہاروں کو دیکھیں گے:

پیکیج { امپورٹ flash.display.Sprite; پبلک کلاس ٹیوٹوریل میں توسیع اسپرائٹ { پبلک فنکشن ٹیوٹوریل() { } }

نوٹ کریں کہ یہ کلاس توسیع کرتی ہے۔ Sprite کلاس کیونکہ یہ ہماری بنیادی ایپلی کیشن کلاس ہے، جب ہم ایپلی کیشن کو چلاتے ہیں تو اس کی مثال Tutorial کلاس خود بخود ڈسپلے لسٹ میں شامل ہو جائے گی۔ root (کا واحد اور اکلوتا بچہ Stage).
یہ بھی نوٹ کریں کہ ایک کنسٹرکٹر خود بخود بن گیا ہے۔ ایپلیکیشن لانچ ہونے پر اس کنسٹرکٹر کو بلایا جائے گا۔ پروگرامنگ زبانوں جیسے کہ C، C++، یا Java سے واقف ان لوگوں کے لیے، ایپلی کیشن کلاس کا کنسٹرکٹر اس طرح کام کرتا ہے جیسے main ان دوسری زبانوں میں فنکشن۔
اس نئی ایپلی کیشن کے سہاروں کے ساتھ، ہم بصری اشیاء کے ساتھ کھیلنا شروع کر سکتے ہیں۔ تاہم، ایک چیز ہے جو ہم سب سے پہلے کرنا چاہتے ہیں۔ کلاس ڈیکلریشن کے اوپر ایک نئی لائن شامل کریں ("public class Tutorial…") لائن جو کہتی ہے:

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

یہ لائن آپ کی ایپلیکیشن کے لیے ڈیفالٹ سیٹنگز کی وضاحت کرتی ہے (جو آپ کے پروجیکٹ کی "بن" ڈائرکٹری میں .swf فائل کے طور پر مرتب اور محفوظ کی جاتی ہے)۔ اوپر، ہم نے اپنی درخواست کے لیے سائز، پس منظر کا رنگ، اور ہدف فریم کی شرح (فریم فی سیکنڈ میں) مقرر کی ہے۔

sprites کے

سب کی طرح DisplayObjects, Sprite باکس کے بالکل باہر متعدد بصری خصوصیات کی حمایت کرتا ہے۔ اس میں شامل ہیں۔ x, y, scaleX, scaleY, rotation، اور alpha خواص یہ بالترتیب ایک سپرائٹ کی پوزیشن، سائز، واقفیت، اور شفافیت کو تبدیل کرتے ہیں (اور اس کے تمام بچے! یاد رکھیں، ہم یہاں ایک سین گراف استعمال کر رہے ہیں)۔
تاہم، ان اقدار کا ابھی زیادہ مطلب نہیں ہے، کیونکہ اسپرائٹس میں پہلے سے طے شدہ طور پر کچھ نہیں ہوتا ہے۔ ہم اپنا مواد خود تیار کرکے شروع کریں گے۔
ہر سپرائٹ میں بھی ایک ہوتا ہے۔ 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")] پبلک کلاس ٹیوٹوریل اسپرائٹ { پبلک فنکشن ٹیوٹوریل () { var sprite:Sprite = new Sprite() میں توسیع کرتا ہے۔ ; sprite.graphics.beginFill(0xcccccc, 0.5); sprite.graphics.lineStyle(1, 0x000000)؛ sprite.graphics.drawCircle(0, 0, 10); this.addChild(sprite); sprite.x = 50; sprite.y = 50; ٹریس ("ہمارا سپرائٹ اس پر ہے: "+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 = new Sprite(); sprite.graphics.beginFill(0xcccccc, 0.5); sprite.graphics.lineStyle(1, 0x000000)؛ sprite.graphics.drawCircle(0, 0, 10); sprite.x = x; sprite.y = y؛ سپرائٹ واپس; }

اگلا، ہم اپنے کنسٹرکٹر میں کوڈ کو تبدیل کرتے ہیں۔ سب سے پہلے، ہم کنٹینر کے نام سے ایک نیا سپرائٹ بناتے ہیں جسے ہم حلقوں کا مجموعہ رکھنے کے لیے استعمال کریں گے۔ ہم اسے اپنے اسٹیج کے بیچ میں رکھتے ہیں۔ دوسرا، ہم دائروں کا ایک گروپ بنانے کے لیے ایک لوپ کا استعمال کرتے ہیں۔ یہاں، ہم پیرنٹ کنٹینر کے 0,0 پوائنٹ کے ارد گرد دائروں کو ہم آہنگی سے ترتیب دیتے ہیں۔ ہمارا نیا کنسٹرکٹر اب اس طرح لگتا ہے:

 عوامی فنکشن ٹیوٹوریل () { var کنٹینر: سپرائٹ = نیا سپرائٹ ()؛ کنٹینر.x = 400؛ container.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.filters پیکیج)، جو آپ کو ان کا استعمال کرتے ہوئے اشیاء کو ظاہر کرنے کے لیے بصری اثرات شامل کرنے کی اجازت دیتا ہے۔ filters پراپرٹی، اور میں دستیاب مختلف اختیارات flash.display.Graphics کلاس، بشمول فل اور لائن اسٹائل، اور بہت سے 2D ڈرائنگ کے معمولات۔

حصہ 2: متحرک تصاویر

اب جب کہ ہم بصری اشیاء بنا سکتے ہیں، اب وقت آگیا ہے کہ انہیں کچھ زندگی دینا شروع کر دیں۔ بھڑک اٹھنا شامل ہے۔ flare.animate اس کو آسان بنانے میں مدد کے لیے پیکج۔ سب سے پہلے، ہمیں فلیکس بلڈر میں استعمال کے لیے فلیئر لائبریریوں کو درآمد کرنے کی ضرورت ہے۔

لائبریریاں درآمد کرنا

آگے بڑھنے سے پہلے، اس بات کو یقینی بنائیں کہ آپ کے پاس فلیکس بلڈر کے اندر پروجیکٹ کے طور پر فلیئر لائبریریاں بھری ہوئی ہیں۔ آپ کو فلیئر فائلز کو اپنی مین فلیکس بلڈر ورک اسپیس ڈائرکٹری میں پہلے ہی ان زپ کر دینا چاہیے تھا۔ اگلا مرحلہ انہیں Flex Builder ماحول میں درآمد کرنا ہے:

• یقینی بنائیں کہ آپ "فلیکس ڈویلپمنٹ" کے تناظر میں ہیں۔
• بائیں جانب نیویگیٹر پین پر دائیں کلک کریں۔
• پاپ اپ مینو میں "درآمد کریں..." کو منتخب کریں۔
• ڈائیلاگ میں، "General > Existing Projects into Workspace" کو منتخب کریں اور "Next" بٹن پر کلک کریں۔
• اپنی فلیکس بلڈر ورک اسپیس ڈائرکٹری میں جانے کے لیے "روٹ ڈائرکٹری منتخب کریں" ویجٹس کا استعمال کریں۔
• اب آپ کو "پروجیکٹس:" پینل میں درج فلیئر پروجیکٹس کو دیکھنا چاہیے۔
• "flare" اور "flare.demos" پروجیکٹس کو منتخب کریں اور پھر "Finish" بٹن پر کلک کریں۔

اب آپ کو نیویگیٹر پین میں بھڑک اٹھنے والے پروجیکٹس کو دیکھنا چاہئے۔ اب آپ لائبریری اور ڈیمو دونوں کے لیے سورس کوڈ کو براؤز کر سکتے ہیں۔

فلیئر لائبریری کا جائزہ

یہاں فلیئر ٹول کٹ کا ایک فوری جائزہ ہے۔ کے اندر flare پروجیکٹ، "src/flare" فولڈر کے اندر دیکھیں۔ آپ کو مختلف خصوصیات فراہم کرنے والے متعدد پیکجز ملیں گے:

• analytics: شماریات کی کمپیوٹنگ اور ڈیٹا کا تجزیہ کرنے والے آپریٹرز
• animate: متحرک تصاویر بنانے کے اوزار
• data: ڈیٹا سیٹ پڑھنے اور لکھنے کے طریقے
• display: DisplayObject وہ قسمیں جو ان کے ذریعہ فراہم کردہ توسیع کرتی ہیں۔ flash.display
• flex: فلیکس ایپلی کیشنز میں فلیئر ویژولائزیشن کو سرایت کرنے کے لیے ایک ریپر
• physics: فزیکل ایفیکٹس یا فورس ڈائریکٹڈ لے آؤٹ کے لیے فزکس انجن
• query: ایکشن اسکرپٹ آبجیکٹ کے لیے ایک استفسار پروسیسر
• scale: ڈیٹا اسکیلز کو سنبھالنے کے لیے کلاسز، جیسے لکیری، لاگ، اور ٹائم اسکیلز
• util: یوٹیلیٹی کلاسز کا ایک سیٹ جو عام طور پر مطلوبہ افعال فراہم کرتا ہے۔
• vis: فلیئر ویژولائزیشن کے اجزاء اور آپریٹرز

یہ بھی ہے flare.demos پروجیکٹ، جو کہ Flare اجزاء بنانے کے طریقے کی متعدد مثالیں فراہم کرتا ہے۔

کسی دوسرے پروجیکٹ کے اندر لائبریری درآمد کرنا

اپنے پراجیکٹس میں بھڑک اٹھنے کا استعمال کرنے کے لیے، آپ کو اپنے پروجیکٹ کی ترتیبات کو اپ ڈیٹ کرنے کی ضرورت ہوگی۔ ایسا کرنے کا طریقہ یہاں ہے:

1. نیویگیٹر پین میں، "ٹیوٹوریل" پروجیکٹ کے اوپری فولڈر پر دائیں کلک کریں۔
2. سیاق و سباق کے مینو میں "پراپرٹیز" پر کلک کریں۔
3. نتیجے میں آنے والے ڈائیلاگ میں، بائیں پینل میں "ActionScript Build Path" پر کلک کریں (یہ اوپر سے 3rd آئٹم ہونا چاہیے)
4. دائیں پینل میں "لائبریری پاتھ" ٹیب پر کلک کریں۔
5. "پروجیکٹ شامل کریں" کے بٹن پر کلک کریں۔
6. اب آپ کو پراجیکٹس کی فہرست دیکھنا چاہئے، بشمول بھڑک اٹھنا۔
7. "بھڑکنا" کو منتخب کریں اور پھر "ٹھیک ہے" پر کلک کریں

اب آپ نے اپنے پروجیکٹ میں فلیئر لائبریریوں کو شامل کر لیا ہے، اور آپ اس کی فراہم کردہ کلاسوں میں سے کسی کو بھی استعمال کر سکتے ہیں۔
Flex کمپائلر کے بارے میں ایک بات نوٹ کرنے کے لیے - بطور ڈیفالٹ، اس میں صرف وہ کلاسز شامل ہوتی ہیں جنہیں آپ اپنی ایپلیکیشن میں استعمال کرتے ہیں۔ لہذا اگر آپ ایک بہت بڑی لائبریری درآمد کرتے ہیں، تو آپ کی حتمی .swf فائل کا سائز اب بھی کافی چھوٹا ہوسکتا ہے۔ تاہم، ہوشیار رہیں کہ اگر آپ اپنی ایپلیکیشن میں متحرک کلاس لوڈنگ کو انجام دینے کے لیے عکاسی کا استعمال کرتے ہیں تو اس سے مسائل پیدا ہو سکتے ہیں (ایک زیادہ جدید خصوصیت جس کا اس ٹیوٹوریل میں احاطہ نہیں کیا گیا ہے)۔

بنیادی حرکت پذیری: درمیان، ترتیب، اور متوازی

ٹھیک ہے، اب ہم متحرک کرتے ہیں! دی flare.animate.Transition کلاس تمام متحرک تصاویر کے لیے بیس کلاس ہے۔ کے اہم ذیلی طبقات Transition ہیں Tween, Sequence، اور Parallel ٹرانزیشنز Tweens کا استعمال کسی ایک شے کی خصوصیات کو متحرک کرنے کے لیے کیا جاتا ہے۔ ترتیب میں متحرک تصاویر کی ایک سیریز کو چلانے کے لیے ترتیب کا استعمال کیا جاتا ہے۔ متوازی ٹرانزیشنز ایک ساتھ ٹرانزیشن کا مجموعہ چلاتی ہیں۔ چلو Tween کے ساتھ شروع کرتے ہیں.

Tweening آبجیکٹ پراپرٹیز

Tween کلاس کی بنیادی باتیں آسان ہیں: ہم ایک چیز لیتے ہیں، پراپرٹی کی اقدار کا ایک سیٹ دیتے ہیں جسے ہم وقت کے ساتھ تبدیل کرنا چاہتے ہیں، اور اس تبدیلی کے لیے وقت کا دورانیہ بتاتے ہیں۔ حصہ 1 سے ٹیوٹوریل ایپلیکیشن کا استعمال کرتے ہوئے، آئیے کنٹینر آبجیکٹ کو گھمائیں۔ ٹیوٹوریل کلاس کنسٹرکٹر کے آخر میں درج ذیل لائن شامل کریں:

 var tween: tween = new tween(container, 3, {rotation:360}); tween.play();

اس کے علاوہ، اس بات کو یقینی بنائیں کہ آپ کے پاس اپنی کلاس کے سب سے اوپر ایک نیا درآمدی بیان ہے، تاکہ مرتب کرنے والے کو معلوم ہو کہ آپ کس کے بارے میں بات کر رہے ہیں۔ اسے درآمدات کی فہرست میں شامل کریں:

 flare.animate.Tween درآمد کریں؛

(نوٹ: بعض اوقات فلیکس بلڈر خود بخود آپ کے لیے ایک امپورٹ سٹیٹمنٹ شامل کر دے گا جب آپ نیا کلاس کا نام ٹائپ کرتے ہیں۔ اگر نہیں، تو ایک اور تکنیک یہ ہے کہ ٹیکسٹ کرسر کو آخر کلاس کا نیا نام اور ٹائپ کریں "Ctrl-Space" - اس سے آپ کے لیے کلاس کے لیے ایک نئی امپورٹ بننا چاہیے۔)
اب اپنی ایپلیکیشن چلائیں- پوائنٹس کو 3 سیکنڈ کی مدت میں دائرے میں گھومنا چاہیے۔
یہاں یہ ہے کہ Tween کنسٹرکٹر کیا کر رہا ہے:

• پہلی دلیل وہ چیز ہے جس کی قدروں کو جوڑنا چاہیے۔
• دوسری دلیل حرکت پذیری کی لمبائی ہے، سیکنڈوں میں
• تیسری دلیل ایک آبجیکٹ مثال ہے جس میں خصوصیات کو متحرک کرنے اور ان کی ہدف کی اقدار کی فہرست دی گئی ہے۔
  • پراپرٹی کے ناموں کو ان پٹ آبجیکٹ کی خصوصیات سے بالکل مماثل ہونا چاہیے۔
  • نیسٹڈ پراپرٹیز کی اجازت ہے، لیکن اقتباسات میں منسلک ہونا ضروری ہے۔ مثال کے طور پر، {“data.profit”:50} ایک قانونی ان پٹ ہے اگر ان پٹ آبجیکٹ کے پاس ڈیٹا نام کی پراپرٹی ہے جس کے نتیجے میں منافع نام کی پراپرٹی ہوتی ہے۔

۔ play طریقہ پھر حرکت پذیری چلاتا ہے۔ دی play طریقہ کو ایک واحد بولین پیرامیٹر کے ساتھ بھی بلایا جا سکتا ہے جو یہ بتاتا ہے کہ اینیمیشن کو ریورس میں چلانا ہے یا نہیں۔
آپ نے محسوس کیا ہوگا کہ گردش کی حرکت پذیری کچھ سرعت دکھاتی ہے۔ اس کی وجہ یہ ہے کہ پہلے سے طے شدہ ترتیب Tween مثال کے طور پر "سلو ان سلو آؤٹ" اینیمیشن استعمال کرنا ہے۔ آپ ان رویوں کو استعمال کرکے کنٹرول کرسکتے ہیں۔ Easing افعال. یہ فنکشنز 0 اور 1 کے درمیان ایک حصہ کے طور پر موجودہ حرکت پذیری کی پیشرفت کو ان پٹ کے طور پر لیتے ہیں۔ پھر وہ حرکت پذیری کی رفتار کو تبدیل کرنے کے لیے جوڑ توڑ کے پیش رفت کا حصہ واپس کرتے ہیں، اکثر غیر لکیری انداز میں۔
آسانی کو دور کرنے کے لیے (یعنی ایک لکیری آسانی کا فنکشن استعمال کریں) آپ لکھ سکتے ہیں: tween.easing = Easing.none. بس یقینی بنائیں کہ آپ درآمد کرتے ہیں۔ flare.animate.Easing کلاس فائل کے اوپری حصے میں۔
دیگر آسان افعال کے ساتھ تجربہ کرنے کے لئے آزاد محسوس کریں۔ مثال کے طور پر، نرمی کے افعال میں آسانی شامل ہوسکتی ہے (صرف حرکت پذیری کے آغاز میں ہیرا پھیری)، نرمی (صرف حرکت پذیری کے اختتام میں ہیرا پھیری)، یا دونوں۔ مثال کے طور پر، اسے آزمائیں: tween.easing = Easing.easeOutBounce. اس سے گردش کو آخر میں اچھالنا چاہئے۔
آگے بڑھنے سے پہلے، کنٹینر کی دیگر خصوصیات کو متحرک کرنے کی کوشش کریں، جیسے کہ پوزیشن، اسکیل یا الفا ویلیوز۔

جامع متحرک تصاویر

۔ Sequence اور Parallel کلاسز آپ کو متحرک تصاویر کو ایک ساتھ گروپ کرنے کی اجازت دیتی ہیں۔ تسلسل ایک کے بعد ایک متحرک تصاویر کا سیٹ چلاتا ہے۔ مثال کے طور پر، اسے آزمائیں:

 var t1: Tween = new Tween(container, 1, {y:100}); var t2: Tween = new Tween(container, 1, {scaleX:2}); var t3: Tween = new Tween(container, 1, {y:300}); var t4: Tween = new Tween(container, 1, {scaleX:1}); var seq:Sequence = new 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 کلاسز، آپ کسی بھی تعداد میں متحرک ٹرانزیشن کر سکتے ہیں۔ تاہم، جب اشیاء کے بڑے ذخیرے (تصویر میں عام) سے نمٹتے ہیں تو اسی طرح کے بڑے ٹوئینز کو دستی طور پر سنبھالنا ایک تکلیف دہ ہو سکتا ہے۔ مزید برآں، بصری خصوصیات جیسے لے آؤٹ، رنگ، سائز، شکل کو انکوڈنگ کرنے کے لیے الگ الگ روٹینز چلانا آسان ہونا چاہیے اور اینیمیشن کو سنبھالنے کے بارے میں فکر کرنے کی ضرورت نہیں ہے۔ شاید آپ تبدیلیوں کو متحرک کرنا چاہتے ہیں یا شاید آپ ایک جامد اپ ڈیٹ چاہتے ہیں۔ کسی بھی طرح سے، آپ کو اقدار تفویض کرنے کے لیے اسی کوڈ کو دوبارہ استعمال کرنے کے قابل ہونا چاہیے۔
ان خدشات کو دور کرنے کے لیے، Flare فراہم کرتا ہے۔ Transitioner کلاس ٹرانزیشنرز اشیاء کے مجموعے کے لیے متحرک تصاویر بنانے کے عمل کو آسان بناتے ہیں۔ آپ آسانی سے ایک چیز لیں اور مطلوبہ خصوصیات کو ایک ایک کرکے سیٹ کریں۔ پردے کے پیچھے، ٹرانزیشنر خود بخود مکمل اینیمیشن کو ماڈل کرنے کے لیے ضروری ٹوئینز تیار کرے گا اور دوبارہ استعمال کرے گا۔ مزید برآں، اگر اینیمیشن مطلوبہ نہیں ہے، تو ٹرانزیشنر کو فوری طور پر پراپرٹی ویلیوز سیٹ کرنے کے لیے کنفیگر کیا جا سکتا ہے۔ مختصراً، ٹرانزیشنر آبجیکٹ کی خصوصیات کو اپ ڈیٹ کرنے کے لیے انڈائریکشن کی ایک پرت فراہم کرتا ہے - ان اپڈیٹس کو اکٹھا کیا جا سکتا ہے اور پھر انیمیٹ کیا جا سکتا ہے، یا فوری طور پر لاگو کیا جا سکتا ہے۔
ہماری ٹیوٹوریل ایپ میں ٹرانزیشنر استعمال کرنے کی ایک سادہ سی مثال یہ ہے۔

 var t:Transitioner = نیا عبوری(2)؛ کے لیے (var j:int=0; j

یہ مثال تمام اسپرائٹس کو متحرک کرتی ہے۔ container ایک نئے بے ترتیب پر y پوزیشن اور بے ترتیب عمودی پیمانے کا عنصر۔ ہم سب سے پہلے ایک نیا بناتے ہیں۔ Transitioner جس میں 2 سیکنڈ کی حرکت پذیری بننی چاہیے۔ اس کے بعد ہم ہر چائلڈ اسپرائٹ کو لوپ کرتے ہیں اور پراپرٹیز کو Tween پر سیٹ کرنے کے لیے ٹرانزیشنر کا استعمال کرتے ہیں۔
عبوری کا $ آپریٹر اشارہ کرتا ہے کہ ہم ان پٹ آبجیکٹ کے لیے ٹارگٹ ویلیو سیٹ کرنا چاہتے ہیں۔ بطور ڈیفالٹ، یا تو نیا Tween بنایا گیا ہے، یا ایک موجودہ ہے۔ Tween موجودہ شے کے لیے پایا جاتا ہے۔ دی $ آپریٹر پھر ایک آبجیکٹ واپس کرتا ہے جس پر ٹوین کی ٹارگٹ پراپرٹی سیٹ کرنا ہے۔
مزید برآں، ٹرانزیشنرز کو جامد (غیر متحرک) ٹرانزیشن بنانے کے لیے استعمال کیا جا سکتا ہے۔ اگر کسی عبوری کا immediate پراپرٹی کو درست پر سیٹ کیا گیا ہے، یہ نئے ٹوئینز نہیں بنائے گا۔ اس کے بجائے، $آپریٹر صرف ان پٹ ویلیو واپس کر دے گا۔ اس کا مطلب ہے کہ آپ ایسے طریقے بنا سکتے ہیں جو ایک ٹرانزیشنر کا استعمال کرتے ہوئے اقدار کو اپ ڈیٹ کر سکتے ہیں، اور پھر بعد میں کنٹرول کر سکتے ہیں کہ آیا آپ ان اقدار کو اپ ڈیٹ کرنا چاہتے ہیں یا نہیں۔ معیاری "فوری موڈ" Transitioner جامد کا استعمال کرتے ہوئے بازیافت کیا جاتا ہے۔ Transitioner.DEFAULT جائیداد اس طرح آپ کو نیا مختص کرنے کی ضرورت نہیں ہے۔ Transitioner جب فوری اپ ڈیٹس انجام دیتے ہیں۔
ٹرانزیشنرز بڑے پیمانے پر استعمال ہوتے ہیں۔ flare.vis پیکیج، ویژولائزیشن ڈیزائنرز کو یہ کنٹرول کرنے کی اجازت دیتا ہے کہ کون سے اپ ڈیٹس کو متحرک کیا جانا چاہیے اور کیسے۔

حصہ 3: تصورات

ڈیٹا لوڈ ہو رہا ہے

Flare کے لیے بنیادی ڈیٹا کی نمائندگی آسانی سے بلٹ ان فلیش ڈیٹا کی اقسام کا استعمال کرتی ہے: Object اور Array. مثال کے طور پر، ڈیٹا کی ایک میز کو صرف اشیاء کی ایک صف کے طور پر پیش کیا جا سکتا ہے، جس میں ہر شے ہر ڈیٹا فیلڈ کے نام اور اقدار پر مشتمل ہوتی ہے۔ اگرچہ زیادہ موثر نمائندگی ممکن ہے، یہ نقطہ نظر موجودہ فلیش ڈویلپمنٹ کنونشنز سے فائدہ اٹھاتے ہوئے سب سے زیادہ لچک فراہم کرتا ہے۔
فلیش پلیئر میں ڈیٹا لوڈ کرنے کے لیے، کئی طریقے ہیں۔ ایک آسان طریقہ یہ ہے کہ آپ اپنے ڈیٹا کو ایپلی کیشن میں ہی سرایت کریں۔ اس طرح، ڈیٹا ایپلیکیشن کے ساتھ ڈاؤن لوڈ ہو جاتا ہے، جو کہ جامد ڈیٹا سیٹس کے لیے ٹھیک ہے۔ مثال کے طور پر، آپ ڈیٹا سیٹ کو براہ راست متغیر کے طور پر بیان کرنے کے لیے ActionScript کے آبجیکٹ اشارے کا استعمال کر سکتے ہیں:

var ڈیٹا:Array = [ {id:"Q1", sales:10000, profit:2400}, {id:"Q2", sales:12000, profit:2900}, {id:"Q3", sales:15000, profit :3800}, {id:"Q4", sales:15500, profit:3900} ];

تاہم، بہت سے معاملات میں آپ اپنا ڈیٹا متحرک طور پر لوڈ کرنا چاہیں گے، یا تو ویب صفحہ کے اندر سے (آپ براؤزر میں جاوا اسکرپٹ کو فلیش میں اقدار منتقل کرنے کے لیے استعمال کر سکتے ہیں) یا انٹرنیٹ پر موجود کسی سرور سے۔ ایسا کرنے کے بہت سے طریقے ہیں اور آپ کو اپنی مخصوص ایپلیکیشن کے لیے بہترین کام کرنے والے کو منتخب کرنا چاہیے۔ مثال کے طور پر، ایکشن اسکرپٹ کے ساتھ کام کرنے کے لیے اضافی ڈیٹا کی اقسام اور نحو فراہم کرتا ہے۔ XML کے لیے ECMAScript کا استعمال کرتے ہوئے ڈیٹا XML (E4X) معیاری۔
Flare بیرونی ڈیٹا سیٹ لوڈ کرنے کے لیے کچھ یوٹیلیٹیز بھی فراہم کرتا ہے۔ یہ انٹرنیٹ پر کسی بھی سرور سے ڈیٹا لوڈ کرنے اور اس ڈیٹا کو اندرونی ایکشن اسکرپٹ آبجیکٹ میں تبدیل کرنے کی حمایت کرتا ہے۔ فی الحال تعاون یافتہ فائل فارمیٹس ٹیب سے الگ کردہ ٹیکسٹ ہیں ("ٹیب"، ایکسل جیسے ٹولز سے ڈیٹا ایکسپورٹ کرنے کے لیے ایک معیاری فائل فارمیٹ)، جاوا اسکرپٹ آبجیکٹ کی اطلاع ("json"، ویب ایپلیکیشنز کے لیے ایک عام ڈیٹا فارمیٹ)، اور گراف ایم ایل ("گراف ایم ایل"، ایک 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 { // ڈیٹا کو ہینڈل کرنے کے لیے فنکشن لوڈنگ مکمل ہونے کے بعد var ds:DataSet = loader.data بطور DataSet؛ // اب ڈیٹا کے ساتھ کچھ کریں... } );

۔ DataSource کنسٹرکٹر کے پاس دو مطلوبہ دلائل ہیں: ڈیٹا سیٹ کا یو آر ایل، اور فائل فارمیٹ کی نشاندہی کرنے والی ایک تار۔ ابھی تعاون یافتہ فارمیٹس ہیں "ٹیب" (ٹیب سے الگ کردہ)، "json" (جاوا اسکرپٹ آبجیکٹ نوٹیشن)، اور "graphml" (GraphML)۔
ڈیٹا سیٹس کے لیے جن کا سکیما (فیلڈز کے نام اور ڈیٹا کی قسمیں) غیر واضح ہو سکتی ہیں، وہاں ایک تیسرا، اختیاری کنسٹرکٹر دلیل بھی ہے جو DataSchema قسم دیکھیں flare.data.DataSchema اور flare.data.DataField مزید کے لیے کلاسز۔ اسکیما اس بات کو یقینی بنانے کے لیے مددگار ثابت ہو سکتا ہے کہ ڈیٹا کی قدروں کا صحیح نام رکھا گیا ہے (مثال کے طور پر، ایک ٹیب کی حد بندی فائل کے لیے جس میں ہیڈر کی قطار موجود نہیں ہے) اور ڈیٹا کی مناسب اقسام میں تبدیل ہو سکتی ہے (مثال کے طور پر، JSON ڈیٹا کے لیے جس میں عددی قدروں کو کوٹس میں لپیٹ دیا گیا تھا)۔
اصل میں ڈیٹا لوڈ کرنے کے لیے، ڈیٹا سورس لوڈ کا طریقہ کہا جاتا ہے، واپسی a flash.net.URLLoader مثال. لوڈر کو ڈاؤن لوڈ کی پیشرفت کو ٹریک کرنے کے لیے استعمال کیا جا سکتا ہے (مثال کے طور پر، اگر آپ پروگریس بار فراہم کرنا چاہتے ہیں) اور ڈاؤن لوڈ مکمل ہونے پر ایک اطلاع کا واقعہ فراہم کرتا ہے۔ اوپر کی مثال میں، ہم ایک ایونٹ سننے والے کو شامل کرتے ہیں تاکہ ڈاؤن لوڈ مکمل ہونے پر مطلع کیا جائے۔ دی DataSource ان پٹ ڈیٹا کو خود بخود پارس کرے گا، اسے ایکشن اسکرپٹ آبجیکٹ میں میپ کرے گا، اور نتائج کو ایک میں اسٹور کرے گا۔ flare.data.DataSet چیز. DataSet کلاس ٹیبل اور نیٹ ورک (نوڈ/ایج) ڈیٹا دونوں کی نمائندگی کرسکتا ہے۔

بصری اشیاء کی تخلیق اور انتظام

اب ہم ڈیٹا سیٹ کا تصور کرنا چاہیں گے۔ ایسا کرنے کے لیے، ہم انفرادی ڈیٹا ریکارڈز کو بصری اشیاء میں نقشہ بناتے ہیں۔ Flare ڈیٹا کی نمائندگی کرنے کے لیے بصری اشیاء کا ایک سیٹ فراہم کرتا ہے۔ یہاں کی طرف سے فراہم کردہ بنیادی کلاسوں کا ایک جائزہ ہے۔ flare.vis.data پیکیج.

• DataSprite: اسپرائٹس کے لیے بیس کلاس جو بصری طور پر ڈیٹا کی نمائندگی کرتی ہے۔ DataSprite فلیش پلیئر کی ذیلی کلاس ہے۔ Sprite کلاس. DataSprite ایک میں شامل ہے data وہ پراپرٹی جہاں ڈیٹا ٹوپل (ایک ایکشن اسکرپٹ آبجیکٹ) کو اسٹور کیا جاتا ہے اور وہ بنیادی اسپرائٹس کے تعاون سے اضافی بصری متغیرات بھی فراہم کرتا ہے، بشمول رنگ، شکل اور سائز کے فیلڈز، اور پولر کوآرڈینیٹس میں پوزیشنیں ترتیب دینے کے لیے معاونت۔
• NodeSprite: DataSprite مثال کے طور پر نوڈ کی نمائندگی کرتا ہے۔ یہ ڈیفالٹ قسم ہے جو ڈیٹا کو دیکھنے کے لیے استعمال ہوتی ہے۔ NodeSprite مثالوں کو نیٹ ورک یا درختوں کے ڈھانچے کے ذریعے منسلک کیا جاسکتا ہے۔ EdgeSprite مثال کے طور پر.
• EdgeSprite: DataSprite مثال کے طور پر ایک کنارے کی نمائندگی کرتا ہے۔ ایک EdgeSprite دو کو جوڑتا ہے۔ NodeSprites. نوڈس کے ذریعے قابل رسائی ہیں۔ source اور target خواص. EdgeSprites گراف اور درخت بنانے کے ساتھ ساتھ لائنوں کی نمائندگی کرنے کے لیے استعمال کیا جاتا ہے، جیسے کہ ٹائم سیریز گرافس میں۔

عام طور پر، NodeSprites اور EdgeSprites کو میں بنایا اور محفوظ کیا جاتا ہے۔ flare.vis.data.Data کلاس، جو ایک ہی تصور کے لیے تمام بصری اشیاء کا انتظام کرتی ہے۔ دی Data کلاس ڈیٹا ٹیپلس کے لیے نئی بصری اشیاء بنانے اور گراف ڈھانچے کی نمائندگی کرنے کے طریقے فراہم کرتا ہے۔
۔ Data کلاس موجود ڈیٹا آئٹمز کو عبور کرنے اور اپ ڈیٹ کرنے کے طریقے بھی فراہم کرتا ہے۔ دی nodes اور edges خصوصیات ڈیٹا کے اندر موجود نوڈس اور کناروں کی فہرستیں واپس کرتی ہیں۔ ان فہرستوں میں سے ہر ایک میں شامل ہے۔ visit طریقہ جو آپ کو ایک فنکشن میں گزرنے کی اجازت دیتا ہے جسے پھر ہر نوڈ یا کنارے کے ساتھ بلایا جائے گا۔ اس کے علاوہ، setProperty اور setProperties طریقے آپ کو ایک ساتھ تمام نوڈس یا کناروں کے لیے پراپرٹی ویلیوز سیٹ کرنے کی اجازت دیتے ہیں۔ یہ طریقے اختیاری طور پر ایک لیتے ہیں۔ Transitioner ایک دلیل کے طور پر، تاکہ آپ پراپرٹی اپ ڈیٹ کو متحرک کر سکیں۔
مثال کے طور پر، درج ذیل کوڈ کے نتیجے میں ایک سیکنڈ کی حرکت پذیری ہوتی ہے جس میں تمام نوڈس کے لیے لائن کا رنگ نیلے پر سیٹ ہوتا ہے۔ (نوٹ کریں کہ ہیکس نوٹیشن برائے DataSprite رنگ کی قدروں میں الفا کے ساتھ ساتھ سرخ، سبز، نیلے چینلز شامل ہیں)۔

data.nodes.setProperty("lineColor", 0xff0000bb, نیا ٹرانزیشنر(1)).play();

نوڈ اور ایج لسٹیں بھی ڈیفالٹ پراپرٹی ویلیوز کو سپورٹ کرتی ہیں۔ setDefault, setDefaults, removeDefault، اور clearDefaults طریقے ڈیٹا کلاس کا استعمال کرتے ہوئے نئے بنائے گئے نوڈ یا کنارے پر پہلے سے طے شدہ اقدار سیٹ کی جائیں گی۔ addNode or addEdgeFor طریقوں
۔ Tree کلاس کا ذیلی طبقہ ہے۔ Data، عام گراف کی بجائے درخت کی نمائندگی کرنے کے لیے خصوصی۔ دی Data کلاس a کی خودکار تخلیق کی حمایت کرتا ہے۔ Tree مثال کے طور پر ایک عام گراف کے پھیلے ہوئے درختوں کی کمپیوٹنگ کے ذریعے۔ پیرامیٹر کے طور پر پھیلے ہوئے درختوں کی تخلیق کے متعدد طریقے—بشمول چوڑائی-پہلی، گہرائی-پہلی، اور کم از کم پھیلے ہوئے درخت کے الگورتھم— کو پاس کیا جا سکتا ہے۔ یہ حسابات کا استعمال کرتے ہوئے کئے جاتے ہیں۔ flare.analytics.graph.SpanningTree کلاس.
اصل میں نوڈ اور ایجز آبجیکٹ بنانے کے لیے، ہم استعمال کرتے ہیں۔ addNode اور addEdgeFor طریقوں

• addNode ایک ان پٹ ڈیٹا ٹیپل لیتا ہے (ایک Object) اور ایک نیا تخلیق کرتا ہے۔ NodeSprite اس ڈیٹا کو دیکھنے کے لیے۔
• addEdgeFor دو موجودہ لیتا ہے NodeSprites اور ایک شامل کرتا ہے۔ EdgeSprite ان کو جوڑ رہا ہے. یہ طریقہ اختیاری طور پر ڈیٹا ٹیپل کو چھوڑ دیتا ہے (دوبارہ، ایک Object کسی بھی ڈیٹا فیلڈز کی نمائندگی کرنا) کنارے کے لیے۔

یہاں بنانے کے لئے ایک سادہ مثال ہے NodeSprites ٹیبلر ڈیٹا سیٹ کے لیے، یہ فرض کرتے ہوئے کہ ہمارے پاس ڈیٹا آبجیکٹ کی ایک صف ہے:

var فہرست: صف؛ // ڈیٹا آبجیکٹ کی ایک صف جو ہم نے پہلے ہی var ڈیٹا کو لوڈ کیا ہے: Data = new Data(); // ہر ایک کے لیے ایک نیا ڈیٹا کنٹینر (var o: فہرست میں آبجیکٹ) { data.addNode(o); }

نتیجہ ایک ہے Data بصری کے ساتھ آباد آبجیکٹ DataSprite (نوڈس یا کناروں) کی مثالیں۔
عملی طور پر، آپ کو ہمیشہ بصری ڈیٹا کو دستی طور پر آباد کرنے کی ضرورت نہیں ہے۔ تخلیق کرنا a Data ایک بھری ہوئی ڈیٹا سیٹ کو دیکھنے کے لیے اعتراض، آپ اکثر اس کے بجائے سہولت کا طریقہ استعمال کر سکتے ہیں۔ دی Data.fromArray() فنکشن تخلیق کرتا ہے a Data ایکشن اسکرپٹ آبجیکٹ کی ایک صف کے طور پر ذخیرہ شدہ ٹیبلر ڈیٹا کی مثال، جبکہ Data.fromDataSet() طریقہ اسی طرح تخلیق کرتا ہے a Data ایک بھری ہوئی سے مثال DataSet اعتراض

ایک تصور کی تعمیر

آئیے اب تصورات بنانا شروع کرنے کے لیے ان سب کو ایک ساتھ رکھیں۔ دی 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.geom.Rectangle درآمد کریں؛ Flash.net.URLLoader درآمد کریں؛ [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] پبلک کلاس ٹیوٹوریل Sprite { private var vis:visualization; عوامی فنکشن ٹیوٹوریل () { لوڈ ڈیٹا ()؛ } نجی فنکشن 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(new AxisLayout("data.date", "data.age"))؛ vis.operators.add(new ColorEncoder("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES))؛ vis.operators.add(new 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-axis پر اور "عمر" کو y-axis پر رکھتے ہیں۔ دی AxisLayout آپریٹر خود بخود تصور کے لیے محور کو بھی ترتیب دیتا ہے۔ ڈیٹا متغیرات کو ظاہر کرنے کے لیے ہم نحو "data.date" کا استعمال کرتے ہیں، کیونکہ وہ NodeSpriteکی data جائیداد.
  • ہم ایک کلر انکوڈنگ شامل کرتے ہیں، تاکہ نوڈ کی لائن کا رنگ "وجہ" (موت کی وجہ) متغیر کی نمائندگی کرے۔ ہم کلر انکوڈر کو یہ بھی بتاتے ہیں کہ "وجہ" متغیر کی اقدار زمرہ جات کی نمائندگی کرتی ہیں (ScaleType.CATEGORIES)۔ رنگ انکوڈر اس معلومات کو خودکار طور پر ایک مناسب رنگ پیلیٹ چننے کے لیے استعمال کرے گا۔ جیسا کہ ہم جلد ہی دیکھیں گے، آپ اپنا رنگ پیلیٹ بھی فراہم کر سکتے ہیں۔
  • ہم شکل کی انکوڈنگ شامل کرتے ہیں، تاکہ کسی چیز کی شکل شکار کی "نسل" کی نمائندگی کرے۔
  • ہم پہلے سے طے شدہ خصوصیات سیٹ کرتے ہیں - ہم نوڈس کے فل کلر کو مکمل شفاف پر سیٹ کرتے ہیں، اور لائن کی چوڑائی کو 2 پکسلز پر سیٹ کرتے ہیں۔
  • آخر میں، ہم کال کرتے ہیں update طریقہ یہ تمام آپریٹرز کو ترتیب سے چلاتا ہے۔

ایک تصور کو اپ ڈیٹ کرنا

ایک بار ویژولائزیشن بن جانے کے بعد، ہم اسے اپ ڈیٹ کرنا چاہیں گے۔ مثال کے طور پر، ہو سکتا ہے کہ ہم لوگوں کی جنس کو دیکھنے کے لیے رنگین انکوڈنگ کو تبدیل کرنا چاہیں۔
سب سے پہلے، کلاس میں ایک نیا طریقہ شامل کریں:

 نجی فنکشن colorByGender(): void { var color:ColorEncoder = ColorEncoder(vis.operators[1])؛ color.source = "data.sex"؛ color.palette = new ColorPalette([0xffff5555, 0xff8888ff])؛ vis.update(نیا ٹرانزیشنر(2)).play(); }

یہ طریقہ:

1. دوسرے آپریٹر کو بازیافت کرتا ہے (انڈیکس 1 پر آپریٹر) اور اسے a پر کاسٹ کرتا ہے۔ ColorEncoder
2. کو تبدیل کرتا ہے۔ source "data.sex" متغیر استعمال کرنے کے لیے کلر انکوڈر کے لیے پراپرٹی
3. ایک نیا رنگ پیلیٹ سیٹ کرتا ہے (اس صورت میں، خواتین کے لیے سرخ، مردوں کے لیے نیلا - رنگ کی ترتیب لیبل کے حروف تہجی کی ترتیب سے ملتی ہے)
4. a کے ساتھ اپ ڈیٹ کال کرکے تبدیلی کو متحرک کرتا ہے۔ Transitioner دو سیکنڈ اینیمیشن کے لیے سیٹ کریں۔ دی vis.update طریقہ واپس کرتا ہے Transitioner، لہذا ہم اپ ڈیٹ کی واپسی کی قیمت پر پلے کو کال کرسکتے ہیں۔ (نوٹ: آپ اسے بھی چھوڑ سکتے ہیں۔ Transitioner اور صرف نمبر 2 کو دلیل کے طور پر پاس کریں۔ update. ایک نیا Transitioner خود بخود بن جائے گا اور واپس آ جائے گا۔)

اب ہمیں ایپلیکیشن کو وائر اپ کرنے کی ضرورت ہے تاکہ ہم انٹرایکٹو طور پر اپ ڈیٹ کو متحرک کرسکیں۔ ایسا کرنے کے لیے، کنسٹرکٹر میں درج ذیل کوڈ شامل کریں:

 // کلک کرنے کے قابل لیبل var بٹن شامل کریں: TextSprite = new TextSprite("رنگ کے لحاظ سے صنف")؛ addChild(بٹن)؛ button.x = 710; button.y = 50; button.buttonMode = سچ؛ button.addEventListener(MouseEvent.CLICK، function(evt:MouseEvent):void { colorByGender(); } );

یہ کوڈ:

1. ایک نیا ٹیکسٹ لیبل بناتا ہے (TextSprite کی طرف سے ایک مددگار طبقہ ہے۔ flare.display پیکیج)
2. ایپلیکیشن میں لیبل جوڑتا ہے اور اس کی پوزیشن سیٹ کرتا ہے۔
3. سیٹ buttonMode to true (یہ ایک ہاتھ کا کرسر ظاہر کرتا ہے جب آپ لیبل پر ماؤس کرتے ہیں)
4. ایک واقعہ سننے والا شامل کرتا ہے جو لیبل پر کلک کرنے پر متحرک ہوتا ہے۔ ہم ایک کال بیک فنکشن شامل کرتے ہیں جو کال کرتا ہے۔ colorByGender طریقہ.

مندرجہ بالا کوڈ کے کام کرنے کے لیے، ہمیں فائل کے اوپری حصے میں یہ اضافی درآمدی بیانات شامل کرنے کی ضرورت ہوگی:

 Flash.events.MouseEvent درآمد کریں flare.animate.Transitioner درآمد کریں؛ flare.display.TextSprite درآمد کریں؛ flare.util.palette.ColorPalette درآمد کریں؛

اب آپ کو ایپلی کیشن کو مرتب کرنے اور چلانے کے قابل ہونا چاہئے۔ "صنف کے لحاظ سے رنگ" لیبل پر کلک کرنے سے رنگین انکوڈنگ میں تبدیلی کو متحرک کرنا چاہیے۔

اگلے مراحل

مندرجہ بالا مثالیں فلیش اور فلیئر لائبریری کی بنیادی باتوں کو ظاہر کرتی ہیں، لیکن اس کے علاوہ اور بھی بہت سی خصوصیات ہیں جن کا احاطہ کرنا ابھی باقی ہے۔ آگے بڑھتے ہوئے، ہم تجویز کرتے ہیں کہ (a) فلیش اور فلیئر دونوں کا معائنہ کریں۔ API تمام دستیاب کلاسوں کا احساس حاصل کرنے کے لیے دستاویزات، اور (b) Flare demos کو کھود کر یہ دیکھنے کے لیے کہ یہاں دکھائے گئے ایک ہی اصول کو متعدد دیگر تصورات کی تعمیر کے لیے کیسے استعمال کیا جا سکتا ہے۔ یا، ابھی تک بہتر، یہ جاننے کے لیے فلیئر سورس کوڈ کو کھودیں کہ ہڈ کے نیچے کیا ہو رہا ہے۔
اس عمل میں مدد کے لیے، یہاں ذیلی پیکجز کا عمومی جائزہ ہے۔ 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 پیکج فلیش اور فلیئر کیسے کام کرتے ہیں اس کی بہتر تفہیم حاصل کرنے کے لیے ڈیمو کے ساتھ کھیلنے، اس میں ترمیم کرنے، کاپی کرنے، پیسٹ کرنے اور ان کو بنانے کے لیے آزاد محسوس کریں۔

روابط

ڈاؤن لوڈز

آلات

دیگر ٹیک گائیڈز

معاونت

ماخذ: https://blokt.com/tool/prefuse-flare