শিখা | ওয়েবের জন্য ডেটা ভিজ্যুয়ালাইজেশন

ফ্লেয়ার ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা সহজ করে তোলে

আপনার নিজের ভিজ্যুয়ালাইজেশন তৈরি করা শুরু করতে, ফ্লেয়ার ডাউনলোড করুন এবং নীচের টিউটোরিয়ালের মাধ্যমে কাজ করুন। আরো সাহায্য প্রয়োজন? পরিদর্শন সাহায্য ফোরাম (আপনার একটি প্রয়োজন হবে সোর্সফোর্জ পোস্টে লগইন করুন)।

Flare হল একটি BSD লাইসেন্সের অধীনে প্রকাশিত ওপেন সোর্স সফ্টওয়্যার, যার অর্থ এটি অবাধে স্থাপন এবং সংশোধন করা যেতে পারে (এবং এমনকি $$ এ বিক্রিও)। ফ্লেয়ারের নকশা তার পূর্বসূরি প্রিফিউজ থেকে অভিযোজিত হয়েছিল, যা জাভার জন্য একটি ভিজ্যুয়ালাইজেশন টুলকিট।

অ্যাপ্লিকেশন

ঘোষণা

• 2010.10.07: ফ্লেয়ার ডেভেলপমেন্ট সম্প্রদায়ের জন্য উন্মুক্ত করা হয়েছে এবং উত্সটি SourceForge থেকে সরানো হয়েছে GitHub-এ একটি নতুন বাড়ি. বিস্তার 2009.01.24 এটি এখনও শেষ অফিসিয়াল রিলিজ এবং (অন্তত এখন) টিউটোরিয়াল এবং ডকুমেন্টেশন এটি প্রতিফলিত করে। গিটহাবের বিকাশ সংস্করণ এখন Flash Player 10 এর জন্য আরও ভাল সমর্থনের পাশাপাশি অন্যান্য অনেক ছোট সংশোধন এবং পরিবর্তন রয়েছে।
• 2009.01.24: বিস্তারণ 2009.01.24 মুক্তি হয়েছে. এটি বেশ কয়েকটি বাগ সংশোধন এবং আপডেট সহ একটি রক্ষণাবেক্ষণ প্রকাশ। দেখুন অব্যাহতি পত্র আরো বিস্তারিত জানার জন্য. এটি ফ্ল্যাশ প্লেয়ার 9-এর জন্য প্রকাশিত সর্বশেষ পরিকল্পিত - ভবিষ্যতের সংস্করণগুলি 10 সংস্করণে স্থানান্তরিত হবে৷
• 2008.07.30: বিস্তারণ 2008.07.29 মুক্তি হয়েছে. এটি একটি প্রধান রিলিজ যা অনেক নতুন বৈশিষ্ট্য এবং স্থাপত্যের উন্নতির প্রবর্তন করে। দেখুন অব্যাহতি পত্র আরো বিস্তারিত জানার জন্য.
• 2008.07.30: বিস্তারণ 2008.08.08 মুক্তি হয়েছে. এই রিলিজে উন্নত কিংবদন্তি সমর্থন, নামযুক্ত ট্রানজিশন, বাগ ফিক্স এবং কাপলিং কমাতে এবং ইউটিলিটি ক্লাস একত্রিত করার জন্য একটি রিফ্যাক্টরিং অন্তর্ভুক্ত রয়েছে। দেখুন অব্যাহতি পত্র আরো বিস্তারিত জানার জন্য.

অভিভাবকসংবঁধীয়

অ্যাকশনস্ক্রিপ্ট এবং ফ্লেয়ার শেখার জন্য একটি ধাপে ধাপে টিউটোরিয়াল।

শুরু হচ্ছে

প্রথম ধাপ হল আপনার ডেভেলপমেন্ট টুল সেট আপ করা।

1. একটি ওয়ার্কিং ফ্ল্যাশ ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করুন। দুটি পন্থা আছে। আমরা সরলতার জন্য প্রথমটি সুপারিশ করি, তবে আরও উন্নত ব্যবহারকারীরা দ্বিতীয় পদ্ধতিটি ব্যবহার করতে স্বাগত জানাই।
   • বিকল্প 1 (সহজ): Adobe Flex Builder ইনস্টল করুন.
     • এটি অ্যাকশনস্ক্রিপ্ট/ফ্লেক্স অ্যাপ্লিকেশনগুলির জন্য একটি সম্পূর্ণ বিকাশের পরিবেশ। এটি সমস্ত প্রধান প্ল্যাটফর্মের জন্য উপলব্ধ (উইন্ডোজ, ম্যাক, ইউনিক্স)। যে ব্যবহারকারীরা ইতিমধ্যে Eclipse IDE ব্যবহার করছেন তারা Eclipse প্লাগ-ইন হিসাবে ফ্লেক্স বিল্ডার ইনস্টল করতে পারেন।
     • ফ্লেক্স বিল্ডার ব্যবহার করার সতর্কতা হল এটি বাণিজ্যিক সফ্টওয়্যার এবং শুধুমাত্র একটি সীমিত ট্রায়াল সময়ের জন্য কাজ করবে। যাইহোক, Adobe বিশ্ববিদ্যালয়ের ছাত্র, শিক্ষক এবং কর্মীদের বিনামূল্যে ফ্লেক্স বিল্ডার লাইসেন্স প্রদান করে।
   • বিকল্প 2 (আরও জটিল): বিনামূল্যে ফ্লেক্স SDK ইনস্টল করুন
     • এটি মৌলিক অ্যাকশনস্ক্রিপ্ট/ফ্লেক্স কম্পাইলার ইনস্টল করবে: mxmlc এবং compc. তারপরে আপনি আপনার নিজস্ব বিল্ড পরিবেশ সেটআপ করতে পারেন, উদাহরণস্বরূপ, ব্যবহার করে make or ant সিস্টেম নির্মাণ। বিস্তারণ একটি সঙ্গে প্যাকেজ করা হয় build.xml এর সাথে ব্যবহারের জন্য ফাইল অ্যাপাচি পিঁপড়া সিস্টেম নির্মাণ। একবার পিঁপড়া ইনস্টল করা হয়, শুধু খুলুন build.xml একটি টেক্সট এডিটরে ফাইল করুন, আপনার ফ্লেক্সের দিকে নির্দেশ করতে প্রথম কয়েকটি লাইন পরিবর্তন করুন SDK এর ইনস্টলেশন, এবং তারপর ব্যবহার করুন ant লাইব্রেরি কম্পাইল করতে। আমরা ফ্লেক্স ডেভেলপমেন্টের জন্য Adobe Labs এর পিঁপড়ার কাজগুলি ব্যবহার করি।
     • এই পদ্ধতির সুবিধা হল যে সমস্ত সফ্টওয়্যার বিনামূল্যে, এবং আপনার মেয়াদ শেষ হবে না। যাইহোক, আপনি স্বয়ংক্রিয় সংকলন, প্রকল্প পরিচালনা এবং ফ্লেক্স বিল্ডার দ্বারা প্রদত্ত স্বয়ংক্রিয়-সম্পূর্ণের মতো বৈশিষ্ট্যগুলি হারাবেন।
2. প্রিফিউজ ফ্লেয়ার লাইব্রেরি ডাউনলোড করুন।
   • ডাউনলোড হল একটি জিপ ফাইল যাতে অ্যাকশনস্ক্রিপ্ট লাইব্রেরি প্রকল্পগুলির একটি সেট রয়েছে৷ আপনি যদি ফ্লেক্স বিল্ডার ব্যবহার করেন তবে আপনার প্রাথমিক ওয়ার্কস্পেস ডিরেক্টরিতে ফাইলগুলি আনজিপ করুন। টিউটোরিয়াল চলাকালীন আমরা সেগুলিকে ফ্লেক্স বিল্ডারে আমদানি করব এবং ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহার করব!
   • সফ্টওয়্যারটি বর্তমানে একটি আলফা সংস্করণ, এবং তাই কিছু বাগ এবং সীমাবদ্ধতা প্রত্যাশিত৷ আমরা যত তাড়াতাড়ি সম্ভব সমস্যার সমাধান করব, এবং উপরের লিঙ্কটি সর্বদা সাম্প্রতিক সংস্করণের দিকে নির্দেশ করবে।

ফ্ল্যাশ এবং অ্যাকশনস্ক্রিপ্ট 3 পরিচিতি

ফ্ল্যাশ ইন্টারেক্টিভ গ্রাফিক্সের জন্য একটি দুর্দান্ত পরিবেশ এবং সাম্প্রতিক অ্যাকশনস্ক্রিপ্ট 3 প্রোগ্রামিং ভাষার সংযোজনের সাথে এটি অনেক বেশি শক্তিশালী এবং দক্ষ হয়ে উঠেছে। যদিও AS3-এর সম্পূর্ণ ভূমিকা এই টিউটোরিয়ালের সুযোগের বাইরে, এখানে কিছু সংস্থান রয়েছে যা আপনার কাজে লাগবে:

• অ্যাডোব অতিরিক্ত সংস্থানগুলির লিঙ্ক সহ AS3 এর একটি ওভারভিউ প্রদান করে।
• অপরিহার্য অ্যাকশনস্ক্রিপ্ট 3 O'Reilly প্রকাশনা থেকে কলিন মুক দ্বারা শুরু করা আপনাকে সাহায্য করার জন্য একটি দুর্দান্ত বই। তুমি পারবে এখানে অনলাইনে অ্যাক্সেস করুন (কিছু প্রতিষ্ঠান, যেমন বিশ্ববিদ্যালয়, বিনামূল্যে অ্যাক্সেস প্রদান করে)।
• Adobe Flex API রেফারেন্স উপলব্ধ বিভিন্ন ক্লাস এবং পদ্ধতি বোঝার জন্য অমূল্য। আমরা শুধুমাত্র ক্লাসের উপর ফোকাস করা হবে flash.* প্যাকেজ।

এই টিউটোরিয়ালটি অ্যাকশনস্ক্রিপ্ট সিনট্যাক্স এবং প্রকারের সাথে সাথে অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিংয়ের ধারণাগুলির সাথে একটি প্রাথমিক পরিচিতি অনুমান করে।

পার্ট 1: ডিসপ্লে অবজেক্টস

ভূমিকা

ফ্ল্যাশ মডেল ব্যবহার করে একটি 2D ভিজ্যুয়াল দৃশ্য দৃশ্যচিত্র. ভিজ্যুয়াল অবজেক্টগুলি একটি ক্রমানুসারে সংগঠিত হয়, যার মধ্যে শিশু বস্তুগুলি পিতামাতার স্থানাঙ্কের জায়গায় সংজ্ঞায়িত করা হয়। আপনি প্রায়ই এই সিনগ্রাফ হিসাবে উল্লেখ দেখতে পাবেন প্রদর্শন তালিকা Adobe এর ডকুমেন্টেশন এবং ফ্ল্যাশ প্রোগ্রামিং এর বই উভয়েই।
ডিসপ্লে লিস্টের উপরের নোডটি সবসময় থাকে Stage বস্তু মঞ্চে সর্বদা একটি এবং একমাত্র সন্তান থাকে। এই বলা হয় root, এবং সমস্ত ভিজ্যুয়াল আইটেম মূলের নীচে। সাধারণত, রুট হল আপনার আসল ফ্ল্যাশ অ্যাপ্লিকেশন। আমরা শীঘ্রই এই ফিরে আসব.
প্রদর্শন তালিকায় যোগ করা যেতে পারে যে সমস্ত চাক্ষুষ আইটেম এর উদাহরণ DisplayObject ক্লাস এর উপশ্রেণী DisplayObject অন্তর্ভুক্ত করা Bitmap (ছবির জন্য), TextField (ইন্টারেক্টিভ টেক্সট এলাকার জন্য), এবং Video (ইউটিউব মনে করুন)। সবচেয়ে সাধারণ উদাহরণ, যাইহোক, হয় Sprite এবং Shape ক্লাস রেফারেন্সের জন্য এই ক্লাসের অধিকাংশ পাওয়া যাবে flash.display প্যাকেজ (যদিও শেষ পর্যন্ত আপনি সম্ভবত এটি খুঁজে পাবেন flash.text ব্যবহারের প্যাকেজও)।
সার্জারির Sprite ক্লাস হল ফ্ল্যাশ প্লেয়ার দ্বারা ব্যবহৃত সবচেয়ে দরকারী, সাধারণ ভিজ্যুয়াল অবজেক্ট। স্প্রাইটস হল ভিজ্যুয়াল অবজেক্ট যাতে উভয়ই অঙ্কন বিষয়বস্তু থাকে এবং প্রদর্শন তালিকার সাব-নোডগুলির জন্য একটি ধারক হিসাবে কাজ করতে পারে ( Sprite শ্রেণী উপশ্রেণী flash.display.DisplayObjectContainer ক্লাস)। বিপরীতে, Shape ক্লাস অঙ্কন বিষয়বস্তু থাকতে পারে, কিন্তু সাব-নোড ধরে রাখতে পারে না। ফলস্বরূপ, আকারগুলি কম মেমরি ব্যবহার করে, তবে অনেক কম নমনীয়। সরলতার জন্য, আমরা এই টিউটোরিয়ালে Sprites-এর উপর ফোকাস করব।

একটি নতুন অ্যাপ্লিকেশন তৈরি করুন

প্রথমে একটি নতুন ফ্ল্যাশ অ্যাপ্লিকেশন তৈরি করা যাক। এটি করার জন্য, ফ্লেক্স বিল্ডার খুলুন এবং নিশ্চিত করুন যে আপনি "ফ্লেক্স ডেভেলপমেন্ট" পরিপ্রেক্ষিতে আছেন (প্রায়শই উপরের ডানদিকে কালো এবং সাদা "Fx" আইকনে ক্লিক করে পৌঁছান)।
বাম দিকের "নেভিগেটর" প্যানেলে, ডিসপ্লেতে ডান ক্লিক করুন এবং "নতুন > অ্যাকশনস্ক্রিপ্ট প্রকল্প" নির্বাচন করুন। ফলস্বরূপ ডায়ালগে, প্রকল্পের নাম হিসাবে "টিউটোরিয়াল" টাইপ করুন, তারপর "সমাপ্তি" এ ক্লিক করুন। এটি আপনার জন্য একটি নতুন প্রকল্প তৈরি করবে।
আপনার এখন "নেভিগেটর" প্যানে একটি "টিউটোরিয়াল" ফোল্ডার দেখতে হবে। এই ফোল্ডারের মধ্যে, আপনি "Tutorial.as" নামে একটি ফাইল দেখতে পাবেন। এটি আপনার প্রধান অ্যাপ্লিকেশন ফাইল। এটি খুলুন, যদি এটি ইতিমধ্যে খোলা না হয়।
ফাইলের ভিতরে, আপনি এই শ্রেণীর জন্য মৌলিক ভারা দেখতে পাবেন:

প্যাকেজ { import flash.display.Sprite; পাবলিক ক্লাস টিউটোরিয়াল স্প্রাইট { পাবলিক ফাংশন টিউটোরিয়াল() { } } } প্রসারিত করে

এই ক্লাস প্রসারিত যে লক্ষ্য করুন Sprite ক্লাস কারণ এটি আমাদের প্রধান অ্যাপ্লিকেশন ক্লাস, যখন আমরা অ্যাপ্লিকেশনটি চালাই Tutorial ক্লাস স্বয়ংক্রিয়ভাবে ডিসপ্লে তালিকায় যুক্ত হয়ে যাবে root (এর একমাত্র সন্তান Stage).
এছাড়াও লক্ষ্য করুন যে একটি কনস্ট্রাক্টর স্বয়ংক্রিয়ভাবে তৈরি হয়েছে। অ্যাপ্লিকেশন চালু হলে এই কন্সট্রাক্টরকে কল করা হবে। যারা সি, সি++ বা জাভা প্রোগ্রামিং ভাষার সাথে পরিচিত তাদের জন্য অ্যাপ্লিকেশন ক্লাসের কনস্ট্রাক্টর অনেকটা একটির মতো কাজ করে 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 ব্যাসার্ধের একটি বৃত্ত আঁকে।
• তৃতীয়ত, আমরা স্প্রাইটকে আমাদের মূল অ্যাপ্লিকেশনের একটি শিশু হিসাবে যুক্ত করি (ক Tutorial পরী)।
• চতুর্থ, আমরা সেট x এবং y আমাদের পরী অবস্থান.
• পঞ্চম, আমরা কিছু ডিবাগিং আউটপুট যোগ করি। trace কনসোলে একটি স্ট্রিং প্রিন্ট করে। এই আউটপুটটি শুধুমাত্র "ডিবাগ" মোডে অ্যাপ চালানোর সময় দেখায়।

কোডটি এখানে:

প্যাকেজ { import 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 এর কেন্দ্রে। আপনি যদি ডিবাগ মোডে অ্যাপ্লিকেশনটি চালান ("ডিবাগ এজ > ফ্লেক্স অ্যাপ্লিকেশন" নির্বাচন করুন), তবে আপনাকে "আমাদের স্ট্রিং" দেখতে হবে আউটপুট কনসোলে sprite আছে: 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; कंटेनर.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 এই সহজ করতে সাহায্য করার জন্য প্যাকেজ. প্রথমত, আমাদের ফ্লেক্স বিল্ডারে ব্যবহারের জন্য ফ্লেয়ার লাইব্রেরি আমদানি করতে হবে।

লাইব্রেরি আমদানি করা

এগিয়ে যাওয়ার আগে, নিশ্চিত করুন যে আপনার ফ্লেক্স বিল্ডারের মধ্যে প্রজেক্ট হিসাবে ফ্লেয়ার লাইব্রেরিগুলি লোড হয়েছে। আপনার প্রধান ফ্লেক্স বিল্ডার ওয়ার্কস্পেস ডিরেক্টরিতে ফ্লেয়ার ফাইলগুলিকে ইতিমধ্যেই আনজিপ করা উচিত। পরবর্তী ধাপ হল সেগুলিকে ফ্লেক্স বিল্ডার পরিবেশে আমদানি করা:

• নিশ্চিত করুন যে আপনি "ফ্লেক্স ডেভেলপমেন্ট" পরিপ্রেক্ষিতে আছেন।
• বাম দিকের নেভিগেটর প্যানে ডান ক্লিক করুন।
• পপআপ মেনুতে "আমদানি করুন..." নির্বাচন করুন।
• ডায়ালগে, "সাধারণ > কার্যক্ষেত্রে বিদ্যমান প্রকল্প" নির্বাচন করুন এবং "পরবর্তী" বোতামে ক্লিক করুন।
• আপনার ফ্লেক্স বিল্ডার ওয়ার্কস্পেস ডিরেক্টরিতে নেভিগেট করতে "মূল ডিরেক্টরি নির্বাচন করুন" উইজেটগুলি ব্যবহার করুন
• আপনি এখন "প্রকল্প:" প্যানেলে তালিকাভুক্ত ফ্লেয়ার প্রকল্পগুলি দেখতে পাবেন।
• "flare" এবং "flare.demos" প্রজেক্ট নির্বাচন করুন এবং তারপর "Finish" বোতামে ক্লিক করুন।

আপনার এখন নেভিগেটর ফলকে ফ্লেয়ার প্রকল্পগুলি দেখতে হবে। আপনি এখন লাইব্রেরি এবং ডেমো উভয়ের জন্য সোর্স কোড ব্রাউজ করতে পারেন।

ফ্লেয়ার লাইব্রেরির ওভারভিউ

এখানে ফ্লেয়ার টুলকিটের একটি দ্রুত ওভারভিউ। ভিতরে flare প্রকল্প, "src/flare" ফোল্ডারের ভিতরে দেখুন। আপনি বিভিন্ন বৈশিষ্ট্য প্রদানকারী বেশ কয়েকটি প্যাকেজ পাবেন:

• analytics: পরিসংখ্যান কম্পিউটিং এবং ডেটা বিশ্লেষণের জন্য অপারেটর
• animate: অ্যানিমেশন তৈরির টুল
• data: ডেটা সেট পড়া এবং লেখার পদ্ধতি
• display: DisplayObject প্রদত্ত প্রসারিত যে ধরনের flash.display
• flex: ফ্লেক্স অ্যাপ্লিকেশনে ফ্লেয়ার ভিজ্যুয়ালাইজেশন এম্বেড করার জন্য একটি মোড়ক
• physics: শারীরিক প্রভাব বা বল-নির্দেশিত বিন্যাসের জন্য একটি পদার্থবিদ্যা ইঞ্জিন
• query: অ্যাকশনস্ক্রিপ্ট অবজেক্টের জন্য একটি ক্যোয়ারী প্রসেসর
• scale: ডেটা স্কেল পরিচালনার জন্য ক্লাস, যেমন লিনিয়ার, লগ, এবং টাইম স্কেল
• util: ইউটিলিটি ক্লাসের একটি সেট যা সাধারণত প্রয়োজনীয় ফাংশন প্রদান করে
• vis: বিস্তারিত ভিজ্যুয়ালাইজেশন উপাদান এবং অপারেটর

এছাড়াও আছে flare.demos প্রজেক্ট, যা ফ্লেয়ার উপাদানগুলি কীভাবে তৈরি করতে হয় তার বেশ কয়েকটি উদাহরণ প্রদান করে।

অন্য প্রকল্পের মধ্যে একটি লাইব্রেরি আমদানি করা হচ্ছে

আপনার নিজের প্রজেক্টে ফ্লেয়ার ব্যবহার করতে, আপনাকে আপনার প্রোজেক্ট সেটিংস আপডেট করতে হবে। এটি কীভাবে করবেন তা এখানে:

1. নেভিগেটর প্যানে, "টিউটোরিয়াল" প্রকল্পের উপরের ফোল্ডারে ডান ক্লিক করুন
2. প্রসঙ্গ মেনুতে "বৈশিষ্ট্য" ক্লিক করুন
3. ফলস্বরূপ সংলাপে, বাম প্যানেলে "অ্যাকশনস্ক্রিপ্ট বিল্ড পাথ" এ ক্লিক করুন (এটি উপরের দিক থেকে 3য় আইটেম হওয়া উচিত)
4. ডান প্যানেলে "লাইব্রেরি পাথ" ট্যাবে ক্লিক করুন
5. "প্রজেক্ট যোগ করুন" বোতামে ক্লিক করুন
6. আপনি এখন প্রজেক্টের একটি তালিকা দেখতে পাবেন, ফ্লেয়ার সহ।
7. "ফ্লেয়ার" নির্বাচন করুন এবং তারপরে "ঠিক আছে" ক্লিক করুন

আপনি এখন আপনার প্রজেক্টে ফ্লেয়ার লাইব্রেরি যোগ করেছেন, এবং এটি যে কোনো ক্লাস ব্যবহার করতে পারেন।
ফ্লেক্স কম্পাইলার সম্পর্কে একটি বিষয় লক্ষ্য করুন - ডিফল্টরূপে, এটি শুধুমাত্র সেই ক্লাসগুলিকে অন্তর্ভুক্ত করে যা আপনি আসলে আপনার অ্যাপ্লিকেশনে ব্যবহার করেন। সুতরাং আপনি একটি খুব বড় লাইব্রেরি আমদানি করলেও, আপনার চূড়ান্ত .swf ফাইলের আকার এখনও বেশ ছোট হতে পারে। যাইহোক, সতর্ক থাকুন যে আপনি যদি আপনার অ্যাপ্লিকেশনে গতিশীল ক্লাস লোডিং সঞ্চালনের জন্য প্রতিফলন ব্যবহার করেন তবে এটি সমস্যার কারণ হতে পারে (একটি আরও উন্নত বৈশিষ্ট্য এই টিউটোরিয়ালে কভার করা হয়নি)।

বেসিক অ্যানিমেশন: টুইন, সিকোয়েন্স এবং প্যারালাল

ঠিক আছে, এখন এর অ্যানিমেট করা যাক! দ্য flare.animate.Transition ক্লাস হল সমস্ত অ্যানিমেশনের জন্য বেস ক্লাস। এর গুরুত্বপূর্ণ উপশ্রেণী Transition হয় Tween, Sequence, এবং Parallel রূপান্তর Tweens একটি একক বস্তুর বৈশিষ্ট্য অ্যানিমেট ব্যবহার করা হয়. ক্রমানুসারে অ্যানিমেশনের একটি সিরিজ চালানোর জন্য সিকোয়েন্স ব্যবহার করা হয়। সমান্তরাল ট্রানজিশন একই সাথে ট্রানজিশনের একটি সংগ্রহ চালায়। এর Tween দিয়ে শুরু করা যাক.

Tweening অবজেক্ট বৈশিষ্ট্য

টুইন ক্লাসের মূল বিষয়গুলি সহজ: আমরা একটি বস্তু নিই, আমরা সময়ের সাথে সাথে পরিবর্তন করতে চাই এমন সম্পত্তির মানগুলির একটি সেট দিই এবং সেই পরিবর্তনের জন্য সময়কাল নির্দিষ্ট করি। পার্ট 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 = নতুন সিকোয়েন্স( নতুন সমান্তরাল(t1, t2), নতুন সমান্তরাল(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 ক্লাস, আপনি যেকোনো সংখ্যক অ্যানিমেটেড ট্রানজিশন করতে পারেন। যাইহোক, বস্তুর বৃহৎ সংগ্রহের সাথে কাজ করার সময় (ভিজ্যুয়ালাইজেশনে সাধারণ) একই রকম বড় টুইনের সেট ম্যানুয়ালি পরিচালনা করা একটি ব্যথা হতে পারে। উপরন্তু, লেআউট, রঙ, আকার, আকৃতির মত ভিজ্যুয়াল বৈশিষ্ট্য এনকোড করার জন্য পৃথক রুটিন চালানো সহজ হওয়া উচিত এবং অ্যানিমেশন পরিচালনার বিষয়ে চিন্তা করতে হবে না। সম্ভবত আপনি পরিবর্তনগুলি অ্যানিমেট করতে চান বা সম্ভবত আপনি একটি স্ট্যাটিক আপডেট চান। যেভাবেই হোক, আপনি মান নির্ধারণের জন্য একই কোড পুনরায় ব্যবহার করতে সক্ষম হবেন।
এই উদ্বেগ মোকাবেলা করার জন্য, ফ্লেয়ার প্রদান করে Transitioner ক্লাস স্থানান্তরকারীরা বস্তুর সংগ্রহের জন্য অ্যানিমেশন তৈরির প্রক্রিয়াকে সহজ করে তোলে। আপনি কেবল একটি বস্তু নিন এবং পছন্দসই বৈশিষ্ট্যগুলি একের পর এক সেট করুন। পর্দার আড়ালে, ট্রানজিনার স্বয়ংক্রিয়ভাবে পূর্ণ অ্যানিমেশন মডেল করার জন্য প্রয়োজনীয় টুইনগুলি তৈরি করবে এবং পুনরায় ব্যবহার করবে। তদ্ব্যতীত, অ্যানিমেশন পছন্দ না হলে, ট্রানজিনারকে অবিলম্বে সম্পত্তির মান সেট করার জন্য কনফিগার করা যেতে পারে। সংক্ষেপে, ট্রানজিনার অবজেক্টের বৈশিষ্ট্যগুলি আপডেট করার জন্য পরোক্ষের একটি স্তর সরবরাহ করে - এই আপডেটগুলি সংগ্রহ করা যেতে পারে এবং তারপর অ্যানিমেট করা যেতে পারে বা অবিলম্বে প্রয়োগ করা যেতে পারে।
আমাদের টিউটোরিয়াল অ্যাপে একটি ট্রানজিনার ব্যবহার করার একটি সহজ উদাহরণ এখানে।

 var t:Transitioner = নতুন ট্রানজিনার(2); জন্য (var j:int=0; j

এই উদাহরণটি সমস্ত স্প্রাইটকে অ্যানিমেট করে container একটি নতুন এলোমেলো করতে y অবস্থান এবং এলোমেলো উল্লম্ব স্কেল ফ্যাক্টর। আমরা প্রথমে একটি নতুন তৈরি করি Transitioner এটি একটি 2-সেকেন্ডের অ্যানিমেশন তৈরি করা উচিত। তারপরে আমরা প্রতিটি চাইল্ড স্প্রাইটের মধ্য দিয়ে লুপ করি এবং ট্রানজিনার ব্যবহার করে বৈশিষ্ট্যগুলিকে টুইনে সেট করি।
ট্রানজিনার এর $ অপারেটর নির্দেশ করে যে আমরা ইনপুট বস্তুর জন্য একটি লক্ষ্য মান সেট করতে চাই। ডিফল্টরূপে, হয় একটি নতুন Tween তৈরি করা হয়, বা বিদ্যমান Tween বর্তমান আইটেম জন্য পাওয়া যায়. দ্য $ অপারেটর তারপর একটি বস্তু ফেরত দেয় যার উপর টুইন এর লক্ষ্য সম্পত্তি সেট করতে হবে।
তদ্ব্যতীত, ট্রানজিনারগুলি স্ট্যাটিক (অ-অ্যানিমেটেড) রূপান্তর তৈরি করতে ব্যবহার করা যেতে পারে। যদি একজন ট্রানজিশনার হয় immediate সম্পত্তি সত্য সেট করা হয়েছে, এটি নতুন Tweens তৈরি করবে না। পরিবর্তে, $ অপারেটর কেবল ইনপুট মান ফেরত দেবে। এর মানে হল আপনি এমন পদ্ধতিগুলি তৈরি করতে পারেন যা একটি ট্রানজিনার ব্যবহার করে মানগুলি আপডেট করে এবং তারপরে আপনি সেই মানগুলি আপডেট করতে চান কিনা তা নিয়ন্ত্রণ করতে পারেন। স্ট্যান্ডার্ড "তাৎক্ষণিক-মোড" Transitioner স্ট্যাটিক ব্যবহার করে পুনরুদ্ধার করা হয় Transitioner.DEFAULT সম্পত্তি এই ভাবে আপনাকে একটি নতুন বরাদ্দ করতে হবে না Transitioner অবিলম্বে আপডেট করার সময়।
ট্রানজিশনারগুলি সর্বত্র ব্যাপকভাবে ব্যবহৃত হয় flare.vis প্যাকেজ, ভিজ্যুয়ালাইজেশন ডিজাইনারদের কোন আপডেটগুলি অ্যানিমেটেড করা উচিত এবং কীভাবে তা নিয়ন্ত্রণ করতে দেয়৷

পার্ট 3: ভিজ্যুয়ালাইজেশন

তথ্য প্রস্তুত হচ্ছে

ফ্লেয়ারের জন্য মৌলিক ডেটা উপস্থাপনা কেবল অন্তর্নির্মিত ফ্ল্যাশ ডেটা প্রকারগুলি ব্যবহার করে: Object এবং Array. উদাহরণস্বরূপ, ডেটার একটি টেবিলকে শুধুমাত্র অবজেক্টের একটি অ্যারে হিসাবে উপস্থাপন করা যেতে পারে, যা প্রতিটি অবজেক্টে প্রতিটি ডেটা ক্ষেত্রের নাম এবং মান রয়েছে। যদিও আরও দক্ষ উপস্থাপনা সম্ভব, এই পদ্ধতিটি বিদ্যমান ফ্ল্যাশ ডেভেলপমেন্ট কনভেনশনগুলির সুবিধা নেওয়ার সাথে সাথে সবচেয়ে নমনীয়তা প্রদান করে।
ফ্ল্যাশ প্লেয়ারে ডেটা লোড করার জন্য, বেশ কয়েকটি পদ্ধতি রয়েছে। একটি সহজ পদ্ধতি হল অ্যাপ্লিকেশনের মধ্যেই আপনার ডেটা এম্বেড করা। এইভাবে, অ্যাপ্লিকেশনের সাথে ডেটা ডাউনলোড করা হয়, যা স্ট্যাটিক ডেটা সেটের জন্য ভাল। উদাহরণস্বরূপ, আপনি সরাসরি একটি পরিবর্তনশীল হিসাবে ডেটা সেট সংজ্ঞায়িত করতে ActionScript এর অবজেক্ট নোটেশন ব্যবহার করতে পারেন:

var ডেটা: অ্যারে = [ {id:"Q1", sales:10000, profit:2400}, {id:"Q2", sales:12000, profit:2900}, {id:"Q3", বিক্রয়:15000, লাভ :3800}, {id:"Q4", বিক্রয়:15500, লাভ:3900} ];

যাইহোক, অনেক ক্ষেত্রে আপনি আপনার ডেটা গতিশীলভাবে লোড করতে চান, হয় একটি ওয়েব পৃষ্ঠার মধ্যে থেকে (আপনি ব্রাউজারে জাভাস্ক্রিপ্ট ব্যবহার করে মানগুলি ফ্ল্যাশে পাঠাতে পারেন), অথবা ইন্টারনেটের সার্ভার থেকে। এটি করার জন্য অনেক পন্থা রয়েছে এবং আপনার নির্দিষ্ট অ্যাপ্লিকেশনের জন্য যেটি সবচেয়ে ভাল কাজ করে তা বেছে নেওয়া উচিত। উদাহরণস্বরূপ, অ্যাকশনস্ক্রিপ্ট অতিরিক্ত ডেটা প্রকার এবং সিনট্যাক্সের সাথে কাজ করার জন্য প্রদান করে এক্সএমএল এর জন্য ECMAScript ব্যবহার করে ডেটা এক্সএমএল (E4X) স্ট্যান্ডার্ড।
ফ্লেয়ার বাহ্যিক ডেটা সেট লোড করার জন্য কিছু ইউটিলিটিও প্রদান করে। এটি ইন্টারনেটের যেকোনো সার্ভার থেকে ডেটা লোড করা এবং সেই ডেটাকে অভ্যন্তরীণ অ্যাকশনস্ক্রিপ্ট অবজেক্টে রূপান্তর করতে সহায়তা করে। বর্তমানে সমর্থিত ফাইল ফরম্যাট হল ট্যাব-ডিলিমিটেড টেক্সট ("ট্যাব", এক্সেলের মতো টুল থেকে ডেটা এক্সপোর্ট করার জন্য একটি স্ট্যান্ডার্ড ফাইল ফরম্যাট), জাভাস্ক্রিপ্ট অবজেক্ট উল্লেখ ("json", ওয়েব অ্যাপ্লিকেশনের জন্য একটি সাধারণ ডেটা বিন্যাস), এবং গ্রাফএমএল ("গ্রাফএমএল", একটি এক্সএমএল নোড এবং প্রান্ত সহ নেটওয়ার্ক প্রতিনিধিত্বের জন্য বিন্যাস)।
দূরবর্তী ডেটা ব্যবহার করে বিস্তারণ দ্বারা লোড করা হয় flare.data.DataSource ক্লাস এখানে একটি ট্যাব-সীমাবদ্ধ ডেটা ফাইল লোড করতে এটি ব্যবহার করার একটি উদাহরণ রয়েছে:

var ds:DataSource = নতুন ডেটাসোর্স( "http://flare.prefuse.org/data/test.tab.txt", "ট্যাব" ); var লোডার:URLLoader = ds.load(); loader.addEventListener(Event.COMPLETE, function(evt:Event):void { // ফাংশন ডেটা পরিচালনা করার জন্য একবার লোডিং সম্পূর্ণ হলে var ds:DataSet = loader.data হিসাবে DataSet; // এখন ডেটা দিয়ে কিছু করুন... } );

সার্জারির DataSource কনস্ট্রাক্টরের দুটি প্রয়োজনীয় আর্গুমেন্ট রয়েছে: ডেটা সেটের url এবং ফাইল ফর্ম্যাট নির্দেশ করে একটি স্ট্রিং। এই মুহূর্তে সমর্থিত ফরম্যাটগুলো হল "ট্যাব" (ট্যাব-ডিলিমিটেড), "json" (জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন), এবং "গ্রাফএমএল" (গ্রাফএমএল)।
ডেটা সেটগুলির জন্য যার স্কিমা (ক্ষেত্রগুলির নাম এবং ডেটা প্রকারগুলি) অস্পষ্ট হতে পারে, সেখানে একটি তৃতীয়, ঐচ্ছিক কনস্ট্রাক্টর আর্গুমেন্টও রয়েছে যা একটি DataSchema প্রকার দেখুন flare.data.DataSchema এবং flare.data.DataField আরো জন্য ক্লাস। ডেটা মানগুলি সঠিকভাবে নামকরণ করা হয়েছে তা নিশ্চিত করার জন্য স্কিমা সহায়ক হতে পারে (যেমন, একটি ট্যাব সীমাবদ্ধ ফাইলের জন্য একটি শিরোনাম সারি অনুপস্থিত) এবং সঠিক ডেটা প্রকারে রূপান্তরিত করা হয়েছে (যেমন, JSON ডেটার জন্য যেখানে সংখ্যাসূচক মানগুলি উদ্ধৃতিতে মোড়ানো ছিল)।
প্রকৃতপক্ষে ডেটা লোড করার জন্য, ডেটাসোর্স লোড পদ্ধতিকে বলা হয়, একটি রিটার্নিং flash.net.URLLoader দৃষ্টান্ত. লোডারটি ডাউনলোডের অগ্রগতি ট্র্যাক করতে ব্যবহার করা যেতে পারে (যেমন, আপনি যদি একটি অগ্রগতি বার প্রদান করতে চান) এবং ডাউনলোড সম্পূর্ণ হলে একটি বিজ্ঞপ্তি ইভেন্ট প্রদান করে। উপরের উদাহরণে, আমরা একটি ইভেন্ট শ্রোতা যোগ করি যাতে ডাউনলোড সম্পূর্ণ হয়ে যায়। দ্য DataSource স্বয়ংক্রিয়ভাবে ইনপুট ডেটা পার্স করবে, এটিকে অ্যাকশনস্ক্রিপ্ট অবজেক্টে ম্যাপ করবে এবং ফলাফলগুলি একটি flare.data.DataSet অবজেক্ট দ্য DataSet ক্লাস টেবিল এবং নেটওয়ার্ক (নোড/এজ) উভয় ডেটা উপস্থাপন করতে পারে।

ভিজ্যুয়াল অবজেক্ট তৈরি এবং পরিচালনা করা

এখন আমরা একটি ডেটা সেট কল্পনা করতে চাই। এটি করার জন্য, আমরা ভিজ্যুয়াল আইটেমগুলিতে পৃথক ডেটা রেকর্ড ম্যাপ করি। ফ্লেয়ার ডেটা উপস্থাপন করার জন্য ভিজ্যুয়াল বস্তুর একটি সেট প্রদান করে। এখানে দ্বারা প্রদত্ত মৌলিক ক্লাসগুলির একটি ওভারভিউ 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 ডেটা লোড করেছি: ডেটা = নতুন ডেটা(); // প্রতিটির জন্য একটি নতুন ডেটা ধারক (var o:তালিকায় অবজেক্ট) { data.addNode(o); }

ফলাফল ক Data চাক্ষুষ দ্বারা জনবহুল বস্তু DataSprite (নোড বা প্রান্ত) উদাহরণ।
অনুশীলনে, আপনাকে সবসময় ভিজ্যুয়ালাইজড ডেটা ম্যানুয়ালি পূরণ করতে হবে না। তৈরি করা a Data একটি লোড করা ডেটা সেট কল্পনা করার জন্য বস্তু, আপনি প্রায়শই পরিবর্তে একটি সুবিধার পদ্ধতি ব্যবহার করতে পারেন। দ্য Data.fromArray() ফাংশন একটি তৈরি করে Data অ্যাকশনস্ক্রিপ্ট অবজেক্টের অ্যারে হিসাবে সংরক্ষিত ট্যাবুলার ডেটার জন্য উদাহরণ, যখন Data.fromDataSet() পদ্ধতি একইভাবে একটি তৈরি করে Data একটি লোড থেকে উদাহরণ DataSet অবজেক্ট।

একটি ভিজ্যুয়ালাইজেশন নির্মাণ

এখন ভিজ্যুয়ালাইজেশন তৈরি শুরু করতে এই সব একসাথে করা যাক। দ্য Visualization ক্লাস একটি একক ভিজ্যুয়ালাইজেশন প্রতিনিধিত্ব করে, ভিজ্যুয়াল মার্ক সহ (এ সংরক্ষিত 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")] পাবলিক ক্লাস টিউটোরিয়াল স্প্রাইট { ব্যক্তিগত var ভিস: ভিজ্যুয়ালাইজেশনকে প্রসারিত করে; পাবলিক ফাংশন টিউটোরিয়াল() { loadData(); } ব্যক্তিগত ফাংশন loadData():void { var ds:DataSource = new DataSource( "http://flare.prefuse.org/data/homicides.tab.txt", "ট্যাব"); var লোডার:URLLoader = ds.load(); loader.addEventListener(Event.COMPLETE, function(evt:Event):void { var ds:DataSet = loader.data as 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-অক্ষে "বয়স" স্থাপন করি। দ্য AxisLayout অপারেটর স্বয়ংক্রিয়ভাবে ভিজ্যুয়ালাইজেশনের জন্য অক্ষগুলিকে কনফিগার করে। ডেটা ভেরিয়েবলগুলি বোঝাতে আমরা সিনট্যাক্স "data.date" ব্যবহার করি, কারণ সেগুলি NodeSpriteএর 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 একটি দুই সেকেন্ড অ্যানিমেশন জন্য সেট. দ্য vis.update পদ্ধতি ফেরত দেয় Transitioner, তাই আমরা আপডেটের রিটার্ন মানের উপর প্লে কল করতে পারি। (দ্রষ্টব্য: আপনি বাদ দিতে পারেন Transitioner এবং শুধু একটি যুক্তি হিসাবে 2 নম্বর পাস update। একটি নতুন Transitioner স্বয়ংক্রিয়ভাবে তৈরি হবে এবং ফিরে আসবে।)

এখন আমাদের অ্যাপ্লিকেশনটি ওয়্যার আপ করতে হবে যাতে আমরা ইন্টারেক্টিভভাবে আপডেটটি ট্রিগার করতে পারি। এটি করতে, কনস্ট্রাক্টরে নিম্নলিখিত কোড যোগ করুন:

 // একটি ক্লিকযোগ্য লেবেল var বোতাম যোগ করুন: TextSprite = নতুন 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 সত্যে (আপনি যখন লেবেলের উপর মাউস করেন তখন এটি একটি হ্যান্ড কার্সার দেখায়)
4. একটি ইভেন্ট শ্রোতা যোগ করে যা লেবেলটি ক্লিক করার সময় ট্রিগার হয়৷ আমরা একটি কলব্যাক ফাংশন যোগ করুন যা কল করে colorByGender পদ্ধতি।

উপরের কোডটি কাজ করার জন্য, আমাদের ফাইলের শীর্ষে এই অতিরিক্ত আমদানি বিবৃতিগুলি অন্তর্ভুক্ত করতে হবে:

 Flash.events.MouseEvent আমদানি করুন; flare.animate.Transitioner আমদানি করুন; flare.display.TextSprite আমদানি করুন; flare.util.palette.ColorPalette আমদানি করুন;

এখন আপনি কম্পাইল এবং অ্যাপ্লিকেশন চালাতে সক্ষম হওয়া উচিত। "লিঙ্গ অনুসারে রঙ" লেবেলে ক্লিক করলে রঙ এনকোডিং-এর পরিবর্তন অ্যানিমেট করা উচিত।

পরবর্তী পদক্ষেপ

উপরের উদাহরণগুলি ফ্ল্যাশ এবং ফ্লেয়ার লাইব্রেরির মূল বিষয়গুলি দেখায়, তবে আরও অনেক বৈশিষ্ট্য রয়েছে যা এখনও কভার করা বাকি আছে। এগিয়ে গিয়ে, আমরা সুপারিশ করি (ক) ফ্ল্যাশ এবং ফ্লেয়ার উভয়ই পরিদর্শন করুন এপিআই সমস্ত উপলব্ধ ক্লাসের ধারণা পেতে ডকুমেন্টেশন, এবং (খ) ফ্লেয়ার ডেমোগুলির মাধ্যমে খনন করে দেখুন যে এখানে দেখানো একই নীতিগুলি অন্যান্য অনেকগুলি ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহার করা যেতে পারে। অথবা, আরও ভাল, হুডের নীচে কী ঘটছে তা শিখতে ফ্লেয়ার সোর্স কোডটি খনন করুন।
এই প্রক্রিয়ায় সাহায্য করার জন্য, এখানে সাব-প্যাকেজগুলির একটি সাধারণ ওভারভিউ রয়েছে৷ 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