شراره | تجسم داده ها برای وب

Flare ایجاد تجسم داده های تعاملی را آسان می کند

برای شروع ساختن تجسم های خود، دانلود فلر و از طریق آموزش زیر کار کنید. به کمک بیشتری نیاز دارید؟ بازدید کنید انجمن راهنما (شما به یک نیاز دارید SourceForge برای ارسال وارد شوید).

Flare یک نرم افزار منبع باز است که تحت مجوز BSD منتشر شده است، به این معنی که می توان آن را آزادانه استقرار و اصلاح کرد (و حتی به قیمت دلار فروخته شد). طراحی Flare از مقدمه قبلی خود، یک جعبه ابزار تجسم برای جاوا، اقتباس شده است.

اپلیکیشن‌ها

اطلاعیه ها

• 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 آزاد شده است. این نسخه شامل بهبود پشتیبانی افسانه‌ها، انتقال‌های نام‌گذاری شده، رفع اشکال، و یک refactoring برای کاهش جفت و ادغام کلاس‌های ابزار است. را ببینید یادداشت های انتشار برای جزئیات بیشتر.

آموزش

آموزش گام به گام یادگیری ActionScript و Flare.

شروع شدن

اولین قدم این است که ابزارهای توسعه خود را راه اندازی کنید.

1. یک محیط توسعه فلش کار راه اندازی کنید. دو رویکرد وجود دارد. ما اولین را برای سادگی توصیه می کنیم، اما کاربران پیشرفته تر می توانند از رویکرد دوم استفاده کنند.
   • گزینه 1 (ساده تر): Adobe Flex Builder را نصب کنید.
     • این یک محیط توسعه کامل برای برنامه های ActionScript/Flex است. این برای تمام سیستم عامل های اصلی (ویندوز، مک، یونیکس) در دسترس است. کاربرانی که قبلاً از Eclipse IDE استفاده می‌کنند، می‌توانند Flex Builder را به عنوان یک پلاگین Eclipse نیز نصب کنند.
     • اخطار استفاده از Flex Builder این است که نرم افزار تجاری است و فقط برای یک دوره آزمایشی محدود کار می کند. با این حال، Adobe مجوزهای Flex Builder را به دانشجویان، اساتید و کارکنان دانشگاه ارائه می دهد.
   • گزینه 2 (پیچیده تر): Flex SDK رایگان را نصب کنید
     • این کامپایلرهای اصلی ActionScript/Flex را نصب می کند: mxmlc و compc. سپس می توانید محیط ساخت خود را تنظیم کنید، برای مثال با استفاده از make or ant ساختن سیستم ها فلر با یک بسته بندی شده است build.xml فایل برای استفاده با مورچه آپاچی ساخت سیستم هنگامی که مورچه نصب شد، فقط آن را باز کنید build.xml فایل در یک ویرایشگر متن، اولین دو خط را تغییر دهید تا به Flex شما اشاره کند SDK نصب و سپس استفاده کنید ant برای جمع آوری کتابخانه ها ما از وظایف مورچه ای Adobe Labs برای توسعه Flex استفاده می کنیم.
     • مزیت این روش این است که تمام نرم افزار رایگان است و منقضی نمی شود. با این حال، ویژگی هایی مانند کامپایل خودکار، مدیریت پروژه، و تکمیل خودکار ارائه شده توسط Flex Builder را از دست می دهید.
2. کتابخانه های prefuse flare را دانلود کنید.
   • دانلود یک فایل فشرده حاوی مجموعه ای از پروژه های کتابخانه ActionScript است. اگر از Flex Builder استفاده می کنید، فایل ها را در دایرکتوری فضای کاری اصلی خود از حالت فشرده خارج کنید. در طول آموزش ما آنها را به Flex Builder وارد می کنیم و از آنها برای ساخت تجسم ها استفاده می کنیم!
   • این نرم افزار در حال حاضر یک نسخه آلفا است، و بنابراین باید انتظار برخی از اشکالات و محدودیت ها را داشت. ما در اسرع وقت مشکلات را برطرف خواهیم کرد و پیوند بالا همیشه به جدیدترین نسخه اشاره می کند.

مقدمه ای بر فلش و اکشن اسکریپت 3

Flash یک محیط عالی برای گرافیک های تعاملی است و با اضافه شدن اخیر زبان برنامه نویسی ActionScript 3، بسیار قدرتمندتر و کارآمدتر شده است. در حالی که معرفی کامل AS3 خارج از محدوده این آموزش است، در اینجا منابعی وجود دارد که برای شما مفید خواهد بود:

• Adobe یک نمای کلی از AS3 با پیوندهایی به منابع اضافی ارائه می دهد.
• اکشن اسکریپت ضروری 3 نوشته کالین موک از انتشارات اوریلی کتابی عالی برای کمک به شما برای شروع است. تو می توانی از اینجا به صورت آنلاین دسترسی داشته باشید (برخی از موسسات مانند دانشگاه ها دسترسی رایگان را فراهم می کنند).
• مرجع Adobe Flex API برای درک کلاس‌ها و روش‌های مختلف موجود بسیار ارزشمند است. ما فقط بر روی کلاس های موجود در دانشگاه متمرکز خواهیم بود flash.* بسته ها

این آموزش آشنایی اولیه با نحو و انواع ActionScript و همچنین مفاهیم برنامه نویسی شی گرا را فرض می کند.

قسمت 1: Display Objects

معرفی

فلش یک صحنه بصری دوبعدی را با استفاده از یک مدل سازی می کند صحنه نگار. اشیاء بصری در یک سلسله مراتب سازماندهی می شوند و اشیاء فرزند در فضای مختصات والد تعریف می شوند. شما اغلب این صحنه نگاره را می بینید که به آن اشاره می شود نمایش لیست هم در اسناد Adobe و هم در کتاب های برنامه نویسی فلش.
گره بالای لیست نمایشگر همیشه همان است Stage هدف - شی. صحنه همیشه یک و تنها یک فرزند دارد. به این می گویند root، و همه آیتم های بصری در زیر ریشه قرار دارند. به طور معمول، ریشه برنامه واقعی فلش شما است. به زودی به این موضوع باز خواهیم گشت
تمام موارد بصری که می توان به لیست نمایش اضافه کرد نمونه هایی از این هستند DisplayObject کلاس زیر کلاس های DisplayObject شامل Bitmap (برای تصاویر) TextField (برای مناطق متن تعاملی)، و Video (به یوتیوب فکر کنید). با این حال، رایج ترین نمونه ها عبارتند از Sprite و Shape کلاس ها. برای مرجع بیشتر این کلاس ها را می توان در flash.display بسته (اگرچه در نهایت احتمالاً آن را پیدا خواهید کرد flash.text بسته استفاده نیز).
La Sprite class مفیدترین شیء بصری عمومی است که توسط Flash Player استفاده می شود. اسپرایت ها اشیای بصری هستند که هم محتوای طراحی را دارند و هم می توانند به عنوان محفظه ای برای گره های فرعی در لیست نمایش استفاده کنند. Sprite کلاس زیر کلاس های flash.display.DisplayObjectContainer کلاس). در مقابل، Shape کلاس می تواند حاوی محتوای طراحی باشد، اما نمی تواند گره های فرعی را نگه دارد. در نتیجه، Shape ها حافظه کمتری مصرف می کنند، اما انعطاف پذیری بسیار کمتری دارند. برای سادگی، ما در این آموزش بر روی Sprites تمرکز خواهیم کرد.

ایجاد یک برنامه جدید

ابتدا بیایید یک برنامه فلش جدید ایجاد کنیم. برای انجام این کار، Flex Builder را باز کنید و مطمئن شوید که در منظر "Flex Development" قرار دارید (اغلب با کلیک کردن روی نماد سیاه و سفید "Fx" در سمت راست بالا به آن دسترسی خواهید داشت).
در قسمت "Navigator" در سمت چپ، روی صفحه نمایش کلیک راست کرده و "New > ActionScript Project" را انتخاب کنید. در گفتگوی حاصل، "Tutorial" را به عنوان نام پروژه تایپ کنید، سپس روی "Finish" کلیک کنید. این یک پروژه جدید برای شما ایجاد می کند.
اکنون باید یک پوشه "Tutorial" را در پنجره "Navigator" مشاهده کنید. در این پوشه، باید فایلی به نام "Tutorial.as" را مشاهده کنید. این فایل برنامه اصلی شماست. اگر قبلاً باز نشده است، آن را باز کنید.
در داخل فایل، داربست اصلی این کلاس را خواهید دید:

بسته { import flash.display.Sprite; public class Tutorial Sprite را گسترش می دهد { public function Tutorial() { } } }

توجه داشته باشید که این کلاس را گسترش می دهد Sprite کلاس از آنجایی که این کلاس برنامه اصلی ما است، وقتی برنامه را اجرا می کنیم نمونه ای از آن را اجرا می کنیم Tutorial کلاس به صورت خودکار به لیست نمایشگر اضافه می شود root (تک و تنها فرزند Stage).
همچنین توجه داشته باشید که یک سازنده به طور خودکار ایجاد شده است. این سازنده هنگام راه اندازی برنامه فراخوانی می شود. برای کسانی که با زبان های برنامه نویسی مانند C، C++ یا جاوا آشنا هستند، سازنده کلاس برنامه بسیار شبیه به یک main در آن زبان های دیگر کار می کند.
با قرار دادن این داربست برنامه جدید، می توانیم بازی با اشیاء بصری را شروع کنیم. با این حال، یک چیز وجود دارد که ما می خواهیم ابتدا انجام دهیم. یک خط جدید مستقیماً بالای اعلان کلاس اضافه کنید ("public class Tutorial…”) خطی که می گوید:

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

این خط تنظیمات پیش فرض را برای برنامه شما تعریف می کند (که به عنوان یک فایل .swf در فهرست "bin" پروژه شما کامپایل و ذخیره می شود). در بالا، اندازه، رنگ پس‌زمینه و نرخ فریم هدف (بر حسب فریم در ثانیه) را برای برنامه‌مان تنظیم می‌کنیم.

جن

مثل همه DisplayObjects, Sprite از تعدادی ویژگی بصری مستقیماً خارج از جعبه پشتیبانی می کند. این شامل x, y, scaleX, scaleY, rotationو alpha خواص اینها به ترتیب موقعیت، اندازه، جهت و شفافیت یک جن را تغییر می دهند (و همه فرزندان آن! به یاد داشته باشید، ما در اینجا از یک صحنه نگار استفاده می کنیم).
با این حال، این مقادیر هنوز معنی زیادی ندارند، زیرا sprites به طور پیش فرض حاوی چیزی نیستند. ما با ترسیم محتوای خود شروع می کنیم.
هر Sprite همچنین دارای یک graphics ویژگی. ما می توانیم از این برای ترسیم گرافیک برای Sprite. graphics اموال نمونه ای از flash.display.Graphics کلاس، که تعدادی دستور ترسیم برداری را ارائه می دهد.
در مثال زیر، ما چند کار را انجام می دهیم.

• ابتدا یک جدید ایجاد می کنیم Sprite.
• دوم، ما از sprite استفاده می کنیم graphics برای کشیدن یک دایره با پر کردن خاکستری و طرح سیاه.
  • beginFill رنگ و سبک پر کردن فعلی را تنظیم می کند. آرگومان اول رنگ با نماد هگز و آرگومان دوم مقدار آلفا است که از 0 برای کاملا شفاف تا 1 برای کاملاً مات متغیر است.
  • lineStyle رنگ و سبک استروک فعلی را تنظیم می کند. آرگومان اول عرض خط و آرگومان دوم رنگ است.
  • drawCircle دایره ای به شعاع 10 در نقطه 0,0 در فضای مختصات جن ما رسم می کند.
• سوم، ما sprite را به عنوان فرزند برنامه اصلی خود اضافه می کنیم (a Tutorial جن).
• چهارم، ما تنظیم می کنیم x و y موقعیت جن ما
• پنجم، ما مقداری خروجی اشکال زدایی اضافه می کنیم. trace یک رشته را روی کنسول چاپ می کند. این خروجی فقط هنگام اجرای برنامه در حالت "اشکال زدایی" نشان داده می شود.

کد اینجاست:

بسته { import flash.display.Sprite; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Tutorial گسترش Sprite { public function Tutorial() { 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; trace("Sprite ما در: "+sprite.x+", "+sprite.y); } }

برنامه را اجرا کنید (روی "Tutorial.as" راست کلیک کرده و "Run As > Flex Application" را انتخاب کنید). باید یک دایره خاکستری با طرح کلی سیاه در گوشه سمت چپ بالا، در مرکز نقطه 50، 50 ببینید. اگر برنامه را در حالت اشکال زدایی اجرا کنید («Debug As > Flex Application» را انتخاب کنید)، باید رشته «our» را نیز ببینید. sprite در 50، 50 اینچ در کنسول خروجی است.

جن های تو در تو

حالا بیایید صحنه خود را کمی جالب تر کنیم. بیایید با انتقال کد تولید Sprite خود به یک روش جدید شروع کنیم. این متد را به کلاس خود اضافه می کنیم:

 تابع خصوصی 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; بازگشت جن }

در مرحله بعد، کد را در سازنده خود جایگزین می کنیم. ابتدا یک sprite جدید به نام container ایجاد می کنیم که از آن برای نگهداری مجموعه ای از دایره ها استفاده می کنیم. ما آن را در مرکز صحنه خود قرار می دهیم. دوم، ما از یک حلقه برای ایجاد یک دسته دایره استفاده می کنیم. در اینجا، دایره ها را به طور متقارن در اطراف نقطه 0,0 ظرف اصلی ردیف می کنیم. سازنده جدید ما اکنون به شکل زیر است:

 عملکرد عمومی Tutorial() { var container:Sprite = new Sprite(); container.x = 400; container.y = 300; this.addChild(container); for (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 کلاس، از جمله سبک های پر و خط، و بسیاری از روال های ترسیم دو بعدی دیگر.

قسمت دوم: انیمیشن

اکنون که می‌توانیم اشیاء بصری بسازیم، زمان آن فرا رسیده است که به آن‌ها زندگی بدهیم. شعله ور شدن شامل flare.animate بسته ای برای کمک به آسان کردن این کار ابتدا باید کتابخانه های flare را برای استفاده در Flex Builder وارد کنیم.

وارد کردن کتابخانه ها

قبل از ادامه، مطمئن شوید که کتابخانه های flare را به عنوان پروژه در Flex Builder بارگذاری کرده اید. شما باید فایل های flare را در فهرست اصلی فضای کاری Flex Builder خود از حالت فشرده خارج کرده باشید. مرحله بعدی وارد کردن آنها به محیط Flex Builder است:

• مطمئن شوید که در دیدگاه «توسعه فلکس» هستید.
• روی پنجره ناوبری در سمت چپ کلیک راست کنید.
• "Import…" را در منوی باز شده انتخاب کنید.
• در کادر گفتگو، «General > Existing Projects into Workspace» را انتخاب کنید و روی دکمه «Next» کلیک کنید.
• از ویجت های "Select root directory" برای پیمایش به فهرست فضای کاری Flex Builder خود استفاده کنید
• اکنون باید پروژه های flare فهرست شده در پانل "Projects:" را ببینید.
• پروژه های “flare” و “flare.demos” را انتخاب کنید و سپس روی دکمه “Finish” کلیک کنید.

اکنون باید پروژه های شعله ور شدن را در قسمت Navigator ببینید. اکنون می توانید کد منبع را برای هر یک از کتابخانه ها و دموها مرور کنید.

نمای کلی کتابخانه شعله ور

در اینجا یک نمای کلی از جعبه ابزار شعله ور وجود دارد. درون flare پروژه، به داخل پوشه "src/flare" نگاه کنید. تعدادی بسته را خواهید دید که دارای ویژگی های مختلف هستند:

• analytics: عملگرهایی برای محاسبه آمار و تجزیه و تحلیل داده ها
• animate: ابزاری برای ایجاد انیمیشن
• data: روش هایی برای خواندن و نوشتن مجموعه داده ها
• display: DisplayObject انواعی که موارد ارائه شده توسط flash.display
• flex: پوششی برای تعبیه تجسم های Flare در برنامه های Flex
• physics: یک موتور فیزیک برای جلوه‌های فیزیکی یا طرح‌بندی نیرو محور
• query: یک پردازشگر پرس و جو برای اشیاء ActionScript
• scale: کلاس هایی برای مدیریت مقیاس های داده ها، مانند مقیاس های خطی، گزارش و زمانی
• util: مجموعه ای از کلاس های کاربردی که توابع معمولاً مورد نیاز را ارائه می کنند
• vis: اجزاء و عملگرهای تجسم شعله ور

همچنین وجود دارد flare.demos پروژه، که تعدادی مثال از نحوه ایجاد اجزای Flare ارائه می دهد.

وارد کردن یک کتابخانه در یک پروژه دیگر

برای استفاده از flare در پروژه های خود، باید تنظیمات پروژه خود را به روز کنید. در اینجا نحوه انجام این کار آمده است:

1. در پنجره Navigator، روی پوشه بالای پروژه "Tutorial" کلیک راست کنید
2. در منوی زمینه روی "Properties" کلیک کنید
3. در گفتگوی به دست آمده، روی «ActionScript Build Path» در پانل سمت چپ کلیک کنید (این مورد باید سومین مورد از بالا باشد)
4. روی تب “Library path” در پنل سمت راست کلیک کنید
5. روی دکمه "افزودن پروژه" کلیک کنید
6. اکنون باید لیستی از پروژه ها، از جمله flare را ببینید.
7. “flare” را انتخاب کرده و سپس روی “OK” کلیک کنید.

اکنون کتابخانه های flare را به پروژه خود اضافه کرده اید و می توانید از هر یک از کلاس هایی که ارائه می دهد استفاده کنید.
یک نکته در مورد کامپایلر Flex - به طور پیش فرض، فقط شامل کلاس هایی است که شما واقعاً در برنامه خود استفاده می کنید. بنابراین حتی اگر یک کتابخانه بسیار بزرگ وارد کنید، اندازه فایل .swf نهایی شما همچنان می‌تواند بسیار کوچک باشد. با این حال، مراقب باشید که اگر از بازتاب برای بارگذاری کلاس پویا در برنامه خود استفاده می کنید، ممکن است مشکلاتی ایجاد کند (ویژگی پیشرفته تری که در این آموزش پوشش داده نشده است).

انیمیشن پایه: Tween، Sequence و Parallel

خوب، حالا بیایید انیمیشن کنیم! را flare.animate.Transition class کلاس پایه برای همه انیمیشن ها است. زیر کلاس های مهم از Transition هستند Tween, Sequenceو Parallel انتقال Tweens برای متحرک سازی ویژگی های یک شی منفرد استفاده می شود. Sequence ها برای اجرای یک سری انیمیشن ها به ترتیب استفاده می شوند. انتقال های موازی مجموعه ای از انتقال ها را به طور همزمان اجرا می کنند. بیایید با Tween شروع کنیم.

Tweening Object Properties

اصول کلاس Tween ساده است: ما یک شی را می گیریم، مجموعه ای از مقادیر ویژگی را می دهیم که می خواهیم در طول زمان تغییر دهیم، و مدت زمان آن تغییر را مشخص می کنیم. با استفاده از برنامه Tutorial از قسمت 1، اجازه دهید شی ظرف را بچرخانیم. خط زیر را به انتهای سازنده کلاس Tutorial اضافه کنید:

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

همچنین، مطمئن شوید که یک دستور import جدید در بالای کلاس خود دارید، تا کامپایلر بداند در مورد چه چیزی صحبت می کنید. این را به لیست واردات اضافه کنید:

 واردات flare.animate.Tween;

(توجه: گاهی اوقات Flex Builder هنگام تایپ نام کلاس جدید به طور خودکار یک دستور import را برای شما اضافه می کند. در غیر این صورت، روش دیگر قرار دادن مکان نما متن در پایان از نام کلاس جدید و نوع "Ctrl-Space" - این باید یک import جدید برای کلاس ایجاد کند.)
اکنون برنامه خود را اجرا کنید - نقاط باید در یک دوره 3 ثانیه ای به صورت دایره ای بچرخند.
این چیزی است که سازنده Tween انجام می دهد:

• آرگومان اول شیئی است که مقادیر آن باید توئین شود
• آرگومان دوم طول انیمیشن، بر حسب ثانیه است
• آرگومان سوم یک نمونه Object است که ویژگی‌های متحرک و مقادیر هدف آنها را فهرست می‌کند.
  • نام ویژگی ها باید دقیقاً با ویژگی های شی ورودی مطابقت داشته باشد.
  • ویژگی های تودرتو مجاز هستند، اما باید در گیومه قرار گیرند. مثلا، {“data.profit”:50} اگر شی ورودی دارای خاصیتی به نام داده باشد که به نوبه خود دارای خاصیتی به نام profit باشد، یک ورودی قانونی است.

La play متد سپس انیمیشن را اجرا می کند. در play متد را می‌توان با یک پارامتر بولی که نشان می‌دهد انیمیشن به صورت معکوس اجرا شود یا نه فراخوانی کرد.
ممکن است متوجه شده باشید که انیمیشن چرخشی مقداری شتاب را نشان می دهد. این به این دلیل است که تنظیمات پیش فرض برای Tween برای مثال استفاده از انیمیشن "آهسته در آهسته" است. شما می توانید این رفتارها را با استفاده از Easing کارکرد. این توابع پیشرفت انیمیشن فعلی را به عنوان کسری بین 0 و 1 به عنوان ورودی می گیرند. سپس یک کسر پیشرفت دستکاری شده را برای تغییر سرعت انیمیشن، اغلب به صورت غیر خطی، برمی گردانند.
برای حذف آسان کردن (یعنی استفاده از تابع آسان‌سازی خطی) می‌توانید بنویسید: tween.easing = Easing.none. فقط مطمئن شوید که وارد کنید flare.animate.Easing کلاس در بالای فایل
با خیال راحت با سایر عملکردهای تسهیل کننده آزمایش کنید. به عنوان مثال، توابع آسان‌سازی ممکن است شامل آسان‌سازی (دستکاری در شروع انیمیشن)، آسان‌سازی (تنها دستکاری انتهای انیمیشن) یا هر دو باشد. به عنوان مثال، این را امتحان کنید: tween.easing = Easing.easeOutBounce. این باید چرخش را در انتها جهش کند.
قبل از حرکت، سعی کنید سایر خصوصیات ظرف را متحرک کنید، مانند موقعیت، مقیاس یا مقادیر آلفا.

انیمیشن های ترکیبی

La Sequence و Parallel کلاس ها به شما امکان می دهند انیمیشن ها را با هم گروه بندی کنید. Sequence مجموعه ای از انیمیشن ها را یکی پس از دیگری اجرا می کند. به عنوان مثال، این را امتحان کنید:

 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; import flare.animate.Sequence;

این چهار توئین ایجاد می کند: t1, t2, t3و t4. سپس دو انتقال موازی ایجاد می کند که اجرا می شوند t1 و t2 با هم و اجرا t3 و t4 با یکدیگر. سپس انتقال های موازی یکی پس از دیگری در یک دنباله اجرا می شوند. به این ترتیب ساخت انیمیشن های پیچیده تر آسان است.
برای انیمیشن های کامپوزیت پیشرفته تر، نگاهی به FlareLogo و flare.demos.Animation کلاس ها در flare.demos پروژه.

انیمیشن دسته ای با Transitioners

با استفاده از Tween, Parallelو Sequence کلاس‌ها، می‌توانید هر تعداد انتقال متحرک را انجام دهید. با این حال، هنگامی که با مجموعه‌های بزرگی از اشیاء (که در تجسم رایج است) سروکار دارید، رسیدگی دستی به مجموعه‌ای بزرگ از توئین‌ها می‌تواند دردسرساز باشد. علاوه بر این، اجرای روال های جداگانه برای رمزگذاری ویژگی های بصری مانند طرح، رنگ، اندازه، شکل باید آسان باشد و نگران مدیریت انیمیشن نباشید. شاید بخواهید تغییرات را متحرک کنید یا شاید بخواهید یک به روز رسانی ثابت. در هر صورت، باید بتوانید از همان کد برای تخصیص مقادیر مجدد استفاده کنید.
برای رسیدگی به این نگرانی ها، Flare ارائه می دهد Transitioner کلاس انتقال دهنده ها فرآیند ایجاد انیمیشن برای مجموعه ای از اشیاء را ساده می کنند. شما به سادگی یک شی را می گیرید و ویژگی های مورد نظر را یک به یک تنظیم می کنید. در پشت صحنه، انتقال دهنده به طور خودکار توئین های لازم را برای مدل سازی کامل انیمیشن تولید و دوباره استفاده می کند. علاوه بر این، اگر انیمیشن مورد نظر نباشد، انتقال دهنده را می توان پیکربندی کرد تا در عوض مقادیر ویژگی را بلافاصله تنظیم کند. به طور خلاصه، انتقال دهنده یک لایه غیرمستقیم برای به روز رسانی ویژگی های شی فراهم می کند - این به روز رسانی ها را می توان جمع آوری کرد و سپس متحرک کرد، یا بلافاصله اعمال کرد.
در اینجا یک مثال ساده از استفاده از یک انتقال دهنده در برنامه آموزشی ما آورده شده است.

 var t:Transitioner = new Transitioner(2); برای (var j:int=0; j

این مثال تمام اسپرایت های موجود را متحرک می کند container به یک تصادفی جدید y موقعیت و ضریب مقیاس عمودی تصادفی. ابتدا یک جدید ایجاد می کنیم Transitioner که باید یک انیمیشن 2 ثانیه ای ایجاد کند. سپس از طریق هر فرزند sprite حلقه می زنیم و از transitioner برای تنظیم خصوصیات روی Tween استفاده می کنیم.
انتقال دهنده $ عملگر نشان می دهد که می خواهیم یک مقدار هدف برای شی ورودی تعیین کنیم. به طور پیش فرض، یا جدید Tween ایجاد شده یا موجود است Tween برای مورد فعلی یافت می شود. را $ سپس اپراتور یک شی را برمی گرداند که بر اساس آن ویژگی هدف tween را تنظیم می کند.
علاوه بر این، انتقال دهنده ها می توانند برای ایجاد انتقال های ایستا (غیر متحرک) استفاده شوند. اگر یک انتقال دهنده است immediate ویژگی true تنظیم شده است، Tween جدیدی ایجاد نمی کند. در عوض، عملگر $ به سادگی مقدار ورودی را برمی گرداند. این بدان معناست که می‌توانید روش‌هایی ایجاد کنید که مقادیر را با استفاده از یک انتقال‌دهنده به‌روزرسانی کنند و بعداً کنترل کنید که آیا می‌خواهید این مقادیر به‌روزرسانی شوند یا نه. استاندارد "حالت فوری" Transitioner با استفاده از استاتیک بازیابی می شود Transitioner.DEFAULT ویژگی. به این ترتیب شما نیازی به اختصاص یک جدید ندارید Transitioner هنگام انجام به روز رسانی فوری
انتقال دهنده ها به طور گسترده در سراسر استفاده می شوند flare.vis بسته، به طراحان تجسم اجازه می دهد تا کنترل کنند کدام به روز رسانی باید متحرک و چگونه باشد.

بخش 3: تجسم

در حال بارگیری داده ها

نمایش داده های پایه برای Flare به سادگی از انواع داده های Flash داخلی استفاده می کند: Object و Array. به عنوان مثال، یک جدول از داده ها را می توان فقط به عنوان آرایه ای از اشیاء نشان داد که هر شی شامل نام ها و مقادیر هر فیلد داده است. در حالی که نمایش کارآمدتر امکان پذیر است، این رویکرد بیشترین انعطاف پذیری را فراهم می کند و در عین حال از مزایای قراردادهای توسعه فلش موجود نیز بهره می برد.
برای بارگذاری داده ها در فلش پلیر، چندین روش وجود دارد. یک روش ساده این است که داده های خود را در خود برنامه جاسازی کنید. به این ترتیب، داده ها همراه با برنامه دانلود می شوند، که برای مجموعه داده های ایستا خوب است. برای مثال، می‌توانید از نماد شیء ActionScript برای تعریف مجموعه داده‌ها به‌طور مستقیم به عنوان یک متغیر استفاده کنید:

var data: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} ];

با این حال، در بسیاری از موارد می خواهید داده های خود را به صورت پویا بارگذاری کنید، یا از داخل یک صفحه وب (می توانید از جاوا اسکریپت در مرورگر برای انتقال مقادیر به Flash استفاده کنید)، یا از یک سرور در اینترنت. روش های زیادی برای انجام این کار وجود دارد و شما باید هر چیزی را که برای برنامه خاص خود بهترین کار را انجام می دهد انتخاب کنید. به عنوان مثال، ActionScript انواع داده ها و نحو اضافی را برای کار با آن فراهم می کند XML داده ها با استفاده از ECMAScript برای XML استاندارد (E4X).
Flare همچنین برخی از ابزارهای کاربردی را برای بارگیری مجموعه داده های خارجی ارائه می دهد. از بارگیری داده ها از هر سرور در اینترنت و تبدیل آن داده ها به اشیاء اکشن اسکریپت داخلی پشتیبانی می کند. فرمت‌های فایلی که در حال حاضر پشتیبانی می‌شوند، متن‌های جدا شده با برگه هستند ("tab"، یک فرمت فایل استاندارد برای صادرات داده‌ها از ابزارهایی مانند اکسل)، نشانه گذاری شی جاوا اسکریپت ("json"، یک فرمت داده رایج برای برنامه های کاربردی وب)، و GraphML ("graphml"، an XML فرمت برای نمایش شبکه ها با گره ها و لبه ها).
داده های راه دور با استفاده از فلر بارگیری می شوند flare.data.DataSource کلاس در اینجا نمونه ای از استفاده از آن برای بارگیری یک فایل داده جدا شده با برگه آورده شده است:

var ds:DataSource = new DataSource( "http://flare.prefuse.org/data/test.tab.txt", "tab" ); var loader:URLLoader = ds.load(); loader.addEventListener(Event.COMPLETE, function(evt:Event):void { // تابعی برای مدیریت داده ها پس از بارگیری کامل var ds:DataSet = loader.data به عنوان DataSet؛ // اکنون کاری با داده ها انجام دهید... } )

La DataSource سازنده دو آرگومان لازم دارد: url مجموعه داده و رشته ای که فرمت فایل را نشان می دهد. در حال حاضر فرمت‌های پشتیبانی‌شده عبارتند از «tab» (جداشده با تب)، «json» (نشان‌گذاری شی جاوا اسکریپت)، و «graphml» (GraphML).
برای مجموعه داده هایی که طرح واره آنها (نام و نوع داده فیلدها) ممکن است نامشخص باشد، یک آرگومان سازنده اختیاری سوم نیز وجود دارد که یک DataSchema نوع را ببینید flare.data.DataSchema و flare.data.DataField کلاس های بیشتر طرحواره می تواند برای اطمینان از نامگذاری صحیح مقادیر داده ها مفید باشد (مثلاً برای یک فایل جدا شده از برگه که ردیف سرصفحه ندارد) و به انواع داده های مناسب تبدیل شده است (مثلاً برای داده های JSON که در آن مقادیر عددی در گیومه پیچیده شده است).
برای بارگذاری واقعی داده ها، روش بارگذاری DataSource فراخوانی می شود که a را برمی گرداند flash.net.URLLoader نمونه، مثال. لودر را می توان برای ردیابی پیشرفت دانلود استفاده کرد (به عنوان مثال، اگر می خواهید یک نوار پیشرفت ارائه دهید) و یک رویداد اعلان پس از اتمام دانلود ارائه می دهد. در مثال بالا، ما یک شنونده رویداد اضافه می کنیم تا پس از اتمام دانلود به او اطلاع داده شود. در DataSource به طور خودکار داده های ورودی را تجزیه می کند، آن ها را در اشیاء ActionScript ترسیم می کند و نتایج را در یک ذخیره می کند flare.data.DataSet هدف - شی. DataSet کلاس می تواند داده های جدول و شبکه (گره/لبه) را نمایش دهد.

ایجاد و مدیریت اشیاء بصری

اکنون می خواهیم یک مجموعه داده را تجسم کنیم. برای انجام این کار، سوابق داده های فردی را در آیتم های بصری نگاشت می کنیم. Flare مجموعه ای از اشیاء بصری را برای نمایش داده ها فراهم می کند. در اینجا یک نمای کلی از کلاس های پایه ارائه شده توسط flare.vis.data بسته.

• DataSprite: کلاس پایه برای اسپرایت هایی که داده ها را به صورت بصری نشان می دهند. DataSprite یک زیر کلاس از Flash Player است Sprite کلاس. DataSprite شامل یک data ویژگی که در آن تاپل داده (یک شی اکشن اسکریپت) ذخیره می شود و همچنین متغیرهای بصری اضافی فراتر از آنهایی که توسط sprites های اصلی پشتیبانی می شوند، از جمله فیلدهای رنگ، شکل، و اندازه و پشتیبانی برای تنظیم موقعیت ها در مختصات قطبی را فراهم می کند.
• NodeSprite: DataSprite نمونه ای که یک گره را نشان می دهد. این نوع پیش فرض است که برای تجسم داده ها استفاده می شود. NodeSprite نمونه ها را می توان در داخل شبکه یا ساختارهای درختی توسط EdgeSprite مصادیق
• EdgeSprite: DataSprite نمونه ای که یک لبه را نشان می دهد. یک EdgeSprite دو را به هم وصل می کند NodeSprites. گره ها از طریق source و target خواص. EdgeSprites برای ایجاد نمودارها و درختان، و همچنین برای نمایش خطوط، مانند نمودارهای سری زمانی استفاده می شود.

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

data.nodes.setProperty("lineColor", 0xff0000bb, new Transitioner(1)).play();

لیست گره ها و لبه ها نیز از مقادیر ویژگی پیش فرض با استفاده از setDefault, setDefaults, removeDefaultو clearDefaults مواد و روش ها. مقادیر پیش‌فرض روی گره یا لبه‌ای که جدیداً با استفاده از کلاس Data ایجاد شده است تنظیم می‌شود. addNode or addEdgeFor مواد و روشها.
La Tree کلاس یک زیر کلاس از Data، برای نشان دادن یک درخت به جای یک نمودار عمومی تخصصی است. را Data کلاس از ایجاد خودکار a پشتیبانی می کند Tree به عنوان مثال با محاسبه درخت های پوشا یک نمودار کلی. تعدادی از روش‌های ایجاد درخت پوشا - از جمله الگوریتم‌های درخت پوشا به عرض، اول، و حداقل درخت پوشا - می‌توانند به عنوان یک پارامتر ارسال شوند. این محاسبات با استفاده از flare.analytics.graph.SpanningTree کلاس.
برای ایجاد واقعی اشیاء گره و لبه ها، از عبارت استفاده می کنیم addNode و addEdgeFor مواد و روشها.

• addNode یک تاپل داده ورودی (an Object) و جدید ایجاد می کند NodeSprite برای تجسم آن داده ها
• addEdgeFor دو موجود می گیرد NodeSprites و یک را اضافه می کند EdgeSprite اتصال آنها این روش همچنین به صورت اختیاری یک تاپل داده (دوباره، an Object نشان دهنده هر فیلد داده) برای لبه.

در اینجا یک مثال ساده برای ایجاد وجود دارد NodeSprites برای یک مجموعه داده جدولی، با فرض اینکه آرایه ای از اشیاء داده داریم:

var list:Array; // آرایه ای از اشیاء داده که قبلاً بارگذاری کرده ایم var data:Data = new Data(); // یک محفظه داده جدید برای هر (var o: Object in list) { data.addNode(o); }

نتیجه یک است Data شی پر از بصری DataSprite (گره ها یا لبه ها) نمونه ها.
در عمل، همیشه نیازی نیست که داده های تجسمی شده را به صورت دستی پر کنید. برای ایجاد یک Data برای تجسم مجموعه داده های بارگذاری شده، اغلب می توانید از یک روش راحت استفاده کنید. در Data.fromArray() تابع a ایجاد می کند Data به عنوان مثال برای داده های جدولی ذخیره شده به عنوان آرایه ای از اشیاء ActionScript، در حالی که Data.fromDataSet() روش به طور مشابه یک را ایجاد می کند Data نمونه از یک بارگذاری شده DataSet هدف - شی.

ساخت یک تجسم

حالا بیایید همه اینها را کنار هم بگذاریم تا تجسم سازی را شروع کنیم. در Visualization کلاس یک تجسم واحد را نشان می دهد، از جمله علائم بصری (ذخیره شده در a Data نمونه) و محورها. برای ایجاد یک تجسم، یک مجموعه داده را بارگذاری می کنیم، داده ها را به تصویرسازی اضافه می کنیم و اپراتورهایی را تنظیم می کنیم که نحوه تجسم داده ها را تعیین می کنند. به عنوان مثال. ابتدا به کد نگاه کنید، سپس بخوانید تا بفهمید هر قسمت چه کاری انجام می دهد.

بسته { import 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. import flare.vis.operator.layout.AxisLayout; import flash.display.Sprite; واردات flash.events.Event; import flash.geom.Rectangle; import flash.net.URLLloader; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Tutorial extensions Sprite { private var vis:Visualization; عمومی تابع Tutorial() { loadData(); } تابع خصوصی loadData():void { var ds:DataSource = new DataSource( "http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader:URLLoader = ds.load(); loader.addEventListener(Event.COMPLETE, function(evt:Event):void { var ds:DataSet = loader.data as DataSet; visualize(Data.fromDataSet(ds)); }); } private function 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(); } }

بیایید به هر روش نگاه کنیم.
سازنده ساده است: فقط the را فراخوانی می کند loadData روش.
La loadData متد یک منبع داده جدید ایجاد می کند و آن را با استفاده از روش هایی که قبلا توضیح داده شد بارگذاری می کند. در این مورد، مجموعه داده‌ها قتل‌ها در شهرستان لس‌آنجلس در سال 2007 گزارش شده‌اند که در قالب جداشده با برگه‌ها ذخیره شده‌اند. وقتی بارگذاری کامل شد، تاپل های داده بارگذاری شده به a اضافه می شوند Data به عنوان مثال با استفاده از fromDataSet روش راحتی در زیر کاپوت، این منجر به ایجاد NodeSprites برای تجسم هر آیتم داده در نهایت، visualize روش نامیده می شود.
La visualize روش تجسم را تنظیم می کند. در اینجا آنچه در هر مرحله اتفاق می افتد آمده است:

• بخش 1: مقداردهی اولیه
  • یک تجسم جدید برای داده ها ایجاد می شود
  • ما حد و مرزهای تجسم را تعیین می کنیم. این منطقه طرح را تعیین می کند.
  • ما تنظیم می کنیم x و y موقعیت تجسم ما و افزودن تجسم به لیست نمایش.
• بخش 2: تعیین رمزگذاری های بصری
  • ما از یک طرح‌بندی محور استفاده می‌کنیم و «تاریخ» را روی محور x و «سن» را روی محور y قرار می‌دهیم. را AxisLayout اپراتور همچنین به طور خودکار محورها را برای تجسم پیکربندی می کند. ما از نحو "data.date" برای نشان دادن متغیرهای داده استفاده می کنیم، زیرا آنها در داخل NodeSprite's data ویژگی.
  • ما یک رمزگذاری رنگ اضافه می کنیم، به طوری که رنگ خط یک گره نشان دهنده متغیر "علت" (علت مرگ) است. ما همچنین به رمزگذار رنگ می گوییم که مقادیر متغیر "cause" نشان دهنده دسته ها هستند (ScaleType.CATEGORIES). رمزگذار رنگ از این اطلاعات برای انتخاب خودکار پالت رنگ مناسب استفاده می کند. همانطور که به زودی خواهیم دید، شما همچنین می توانید پالت رنگ خود را ارائه دهید.
  • ما یک رمزگذاری شکل اضافه می کنیم، به طوری که شکل یک شی نشان دهنده "نژاد" یک قربانی است.
  • ما خصوصیات پیش‌فرض را تنظیم می‌کنیم - رنگ پر کردن گره‌ها را روی شفاف کامل قرار می‌دهیم و عرض خط را روی 2 پیکسل تنظیم می‌کنیم.
  • در نهایت، ما به update روش. این همه عملگرها را به ترتیب اجرا می کند.

به روز رسانی یک تجسم

هنگامی که تصویرسازی ایجاد شد، ممکن است بخواهیم آن را به روز کنیم. برای مثال، شاید بخواهیم رمزگذاری رنگ را تغییر دهیم تا به جای آن جنسیت افراد را تجسم کنیم.
ابتدا یک متد جدید به کلاس اضافه می کنیم:

 تابع خصوصی colorByGender(): void { var color:ColorEncoder = ColorEncoder(vis.operators[1]); color.source = "data.sex"; color.palette = رنگ پالت جدید ([0xffff5555, 0xff8888ff]); vis.update(new Transitioner(2)).play(); }

این روش:

1. عملگر دوم (عملگر در شاخص 1) را بازیابی می کند و آن را به a می فرستد ColorEncoder
2. تغییر می دهد source ویژگی برای رمزگذار رنگ برای استفاده از متغیر "data.sex".
3. یک پالت رنگ جدید را تنظیم می کند (در این مورد، قرمز برای زنان، آبی برای مردان - ترتیب رنگ با ترتیب حروف الفبای برچسب ها مطابقت دارد)
4. با فراخوانی به روز رسانی با a تغییر را متحرک می کند Transitioner برای یک انیمیشن دو ثانیه ای تنظیم کنید. در vis.update متد را برمی گرداند Transitioner، بنابراین می توانیم play را بر اساس مقدار بازگشتی به روز رسانی فراخوانی کنیم. (توجه: شما همچنین می توانید حذف کنید Transitioner و فقط عدد 2 را به عنوان آرگومان به آن ارسال کنید update. جدید Transitioner به طور خودکار ایجاد می شود و برگردانده می شود.)

اکنون باید برنامه را سیم کشی کنیم تا بتوانیم به صورت تعاملی به روز رسانی را راه اندازی کنیم. برای این کار کد زیر را به سازنده اضافه کنید:

 // افزودن یک برچسب قابل کلیک var button:TextSprite = new TextSprite("رنگ بر اساس جنسیت"); addChild (دکمه)؛ button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void { 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 را نشان می‌دهند، اما ویژگی‌های بسیار بیشتری وجود دارد که هنوز پوشش داده نشده است. در ادامه، توصیه می کنیم (الف) هم فلش و هم فلر را بازرسی کنید API مستندسازی برای درک همه کلاس‌های موجود، و (ب) کاوش در دموهای 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