Tutorial-Flash-11

     Flash Catalyst Webpage: কিভাবে ডিজাইন তৈরী করবেন

ফ্লাশ ক্যাটালিস্ট ব্যবহার করে ফটোশপ কিংবা ইলাষ্ট্রেটর ডিজাইন থেকে ফ্লাশ ওয়েব পেজ তৈরী করা যায় একথা বলা হয়েছে আগে। হয়ত লক্ষ্য করেছেন ফ্রিল্যান্সিং সাইটে ফটোশপ ডিজাইনের অনেক কাজ চাওয়া হয় যেখানে উল্লেখ করা থাকে কোডিং প্রয়োজন নেই। ডিজাইনকে সরাসরি ফ্লাশ ওয়েব পেজ করা যায় বলেই এটা করা হয়। অবশ্য অনেকে এই ডিজাইনের ভিত্তিতে কোড লিখে নেন।

ক্যাটালিস্টে ফ্লাশ ওয়েব সাইট তৈরীর জন্য ফটোশপ বা ইলাষ্ট্রেটরে ডিজাইন করার সময় কিছু নিয়ম মেনে ডিজাইন তৈরী করতে হয়। এখানে নিয়মগুলি  এবং ডিজাইন তৈরীর কিভাবে ক্যাটালিস্টে ইমপোর্ট করবেন উল্লেখ করা হচ্ছে।

.          ডিজাইনে নতুনত্ব আনুন

আপনি যেহেতু সরাসরি ডিজাইন ব্যবহার করবেন সেহেতু ইচ্ছেমত ইমেজ, ফটো, ড্রইং ইত্যাদি ব্যবহারের সুযোগ রয়েছে। বিভিন্ন ওয়েবসাইট দেখুন, সেখান থেকে কোন একটি মডেল হিসেবে বেছে নিন, তার অনুকরনে নিজের পছন্দমত ইমেজ-ড্রইং ইত্যাদি ব্যবহার করুন।

.          প্রতিটি অবজেক্ট আলাদাভাবে চেনার ব্যবস্থা রাখুন

ক্যাটালিস্ট যখন ডিজাইনের অবজেক্টগুলি ব্যবহার করা হবে তখন ক্যাটালিষ্টের প্রতিটি অবজেক্টকে পৃথকভাবে চেনার জন্য ব্যবস্থা রাখুন। আপনি ফটোশপে কাজ করার সময় একাধিক বাটনকে একই নামে ব্যবহার করতে পারেন অথবা নাম ছাড়াই ব্যবহার করতে পারেন। কিন্তু ক্যাটালিস্ট যেহেতু নাম ব্যবহার করে অবজেক্ট চেনে সেহেতু ডিজাইন তৈরীর সময় প্রত্যেকের পৃথক নাম দেয়া প্রয়োজন।

.          লেয়ারগুলিকে ঠিকভাবে সাজান

ওয়েবপেজে অবজেক্টগুলি যেভাবে থাকবে সেভাবে লেয়ারগুলি সাজিয়ে নিন। একাধিক পেজের ওয়েব পেজে কোন বিষয়গুলি সব পেজে থাকবে (বাটন, লোগো ইত্যাদি) সেগুলিকে একটি ফোল্ডার লেয়ার তৈরী করে সেখানে রাখুন। প্রতিটি পেজের জন্য পৃথক পৃথক লেয়ার ফোল্ডার তৈরী করে সেখানে অবজেক্টগুলি পৃথকভাবে রাখুন। এছাড়া হেডার, ফুটার, বডি ইত্যাদিকেও সহজে পৃথক করার জন্য লেয়ার ফোল্ডার ব্যবহার করুন।

.          বাটনের অবজেক্টকে পৃথক নাম দিন

মাল্টি ষ্টেট বাটন তৈরীর জন্য একাধিক ইমেজ ব্যবহার করলে পৃথকভাবে সেগুলির এমন নাম দিন যেন নাম দেখে সেগুলিকে পৃথক করা যায়।

ক্যাটালিষ্টে ডিজাইন ইমপোর্ট করা

আপনি কোন ফাইল ইমপোর্ট না করে ক্যাটালিস্টে ওয়েব সাইট তৈরী করতে পারেন। কিন্তু ক্যাটালিস্টের সত্যিকারের ক্ষমতা হচ্ছে ক্যাটালিস্ট ওপেন করার সময়ই ডিজাইন ওপেন করে তার ভিত্তিতে সাইট তৈরী করা।

.          ক্যাটালিস্ট ওপেন করুন।

.          ওয়েলকাম স্ক্রিনে Create New Project from Design File থেকে ইলাষ্ট্রেটর অথবা ফটোশপ ডিজাইন কোনটি ব্যবহার করবেন সিলেক্ট করুন।

.          ডিজাইন ফাইলটি ব্রাউজ করুন।

.          ওয়েব পেজের মাপ এবং ব্যাকগ্রাউন্ড রং ঠিক করে দিন।

.          নন-ভিজিবল লেয়ারগুলি বাদ দিতে চাইলে Import non-visible layer অংশে টিক চিহ্ন ব্যবহার করুন। ইচ্ছে করলে এডভান্সড বাটন থেকে নির্দিষ্ট লেয়ার সিলেক্ট করতে পারেন বা বাদ দিতে পারেন।

.          বাটনে ক্লিক করুন।

বেশি সংখ্যক বিটম্যাপ, ভেক্টর, পাথ ইত্যাদি অপটিমাইজ করার তথ্য দেখাতে পারে।

কোন ফন্ট না থাকলে সে বিষয়ে শতর্কতা মেসেজ দেখাতে পারে।

By Uzzal Malake

Tutorial-Flash-10

           ফ্লাশ ক্যাটালিষ্ট ব্যবহারের সুবিধেসমুহ

ওয়েব ডিজাইনের জন্য ব্যবহার করুন ফ্লাশ ক্যাটালিষ্ট, Flash Catalyst

অধিকাংশ জনপ্রিয় সফটঅয়্যার বহু বছর ধরে মানুষ ব্যবহার করছে। মাইক্রোসফট ওয়ার্ড কিং এডবি ফটোশপের কথা বিবেচনায় ধরলে ২৫-৩০ বছর ধরে এগুলি জনপ্রিয়তা লাভ করেছে। সে তুলনায় ফ্লাশ ক্যাটালিষ্ট নামের সফটঅয়্যারটি এখনো অনেকের অপরিচিত। যদিও ফ্লাশ নামটি পরিচিতি লাভ করেছে অনেক।

বিষয়টিকে অন্যভাবে দেখা যাক। ম্যাক্রোমিডিয়া তাদের ডিরেক্টর নামের অথরিং সফটঅয়্যার থেকে পৃথকভাবে একটি সফটঅয়্যার তৈরী করে নাম দেয় ফ্লাশ। বর্তমানে ফ্লাশ বহুবিধ কাজের সফটঅয়্যার। গেম, ইন্টারএকটিভ প্রেজেন্টেশন, ওয়েব পেজ, এনিমেশন সবকিছুই করা হয় এটা দিয়ে। এখন এখান থেকে আরেকটি সফটঅয়্যার পৃথক করেছে এর বর্তমান মালিক এডবি। ফ্লাশ ক্যাটালিষ্ট নামের এই সফটঅয়্যারের বর্তমান ভার্শন তাই ১.০

কি করা যায় ফ্লাশ ক্যাটালিষ্ট দিয়ে ?

ইন্টারএকটিভ ওয়েবসাইট তৈরী। এডবি মনে করছে একাজের জন্য ফ্লাশ ব্যবহার প্রয়োজন নেই। আসলে ক্যাটালিস্ট দিয়ে তৈরী ওয়েবসাইটকে বলা হচ্ছে ফ্লাশ ওয়েবসাইট, অথচ ফ্লাশ সফটঅয়্যার ব্যবহার করা হচ্ছে না।

আপনি মুল ডিজাইন তৈরী করলেন ফটোশপে, কিংবা ইলাষ্ট্রেটরে। একে আনলেন ক্যাটালিষ্টে। প্রয়োজনে আরো ছবি, টেক্সট, ভিডিও, ফ্লাশ এনিমেশন, ড্রইং ইত্যাদি যোগ করলেন। ডিজাইন এলিমেন্টকে ওয়েব সাইট এলিমেন্টে পরিনত করলেন, ইফেক্ট যোগ করলেন, এনিমেট করলেন। তারপর ওয়েব পেজে পরিনত করলেন। কোথাও কোড ব্যবহার করা প্রয়োজন নেই।

আর যদি ডাটাবেজ ব্যবহারের কারনে ওয়েবপেজে কোড ব্যবহার প্রয়োজন হয়ই, তাতেও সমস্যা নেই। ফ্লেক্স ব্যবহার করা যাবে ক্যাটালিষ্টের ভেতরে।

ক্যাটালিষ্টের কাজের ধরন এমন;

.          আপনি কি করতে চান সেটা ঠিক করুন।

.          সেজন্য যাকিছু ছবি, ভিডিও, শব্দ প্রয়োজন সেগুলি সংগ্রহ করুন। ফটোশপ, ইলাষ্ট্রেটর, ফায়ারওয়ার্কসে লেআউট তৈরী করুন।

.          ফ্লাশ ক্যাটালিষ্টে আনুন।

.          পেজ তৈরী করুন, যাকিছু পরিবর্তন করতে চান করে নিন।

.          ইন্টারএকটিভিটি যোগ করুন। ট্রানজিশন যোগ করুন।

.          টেষ্ট করুন এবং ওয়েব পেজ তৈরী করুন।

শুধু অনলাইনের জন্যই না, ডেস্কটপের জন্যও প্রেজেন্টেশন, এপ্লিকেশন ইত্যাদি তৈরী করা যাবে ফ্লাশ ক্যাটালিষ্ট ব্যবহার করে।

By Uzzal Malake

Tutorial-Flash-9

       ফ্লাশ মুভি থেকে ওয়েব পেজ, Flash web design

ফ্লাশ মুভি শব্দ শুনে ফ্লাশ ফরম্যাটের ভিডিও বলে ভুল করবেন না। আসলে ম্যাক্রোমিডিয়া যখন তাদের মাল্টিমিডিয়া অথরিং সফটঅয়্যার ডিরেক্টর এবং পরবর্তীতে ফ্লাশ তৈরী করে তখন এই সফটঅয়্যারে তৈরী প্রজেক্টএর নাম দেয়া হয় মুভি। অর্ধাত আপনি ডিরেক্টর বা ফ্লাশে যে কাজ করছেন সেটাই মুভি। অন্যদিকে ফ্লাশ ভিডিও কুইকটাইম, এভিআই এর মত আরেক ধরনের ধরনের ভিডিও।

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

.          মেনু থেকে File – Publish Setting কমান্ড দিন

আপনি কিভাবে আউটপুট পেতে চান সেটা ঠিক করার জন্য ডায়ালগ বক্স পাবেন। প্রথমে ফ্লাশ ফরম্যাট দেখে নেয়া যাক।

.          Flash ট্যাব সিলেক্ট করুন।

এখানে ফ্লাশ প্লেয়ার ভার্শনের উল্লেখ করে দিতে পারেন। সাধারনভাবে আপনি এটা পরিবর্তন করবেন না, তবে বিশেষ কারনে আগের কোন ভার্শন প্রয়োজন হতে পারে।

.          জেপেগ কোয়ালিটি : এখানে ছবির মান কেমন থাকবে সেটা ঠিক করে দিতে পারেন। মান যত ভাল রাখবেন ফাইলের সাইজ তত বেশি হবে, ধীরগতির ইন্টারনেটে তত বেশি সময় প্রয়োজন হবে।

.          অডিওর জন্য পছন্দমত সেটিং ব্যবহার করবেন।

.          এডভান্সড অংশে Protect from import বলে একটি অপশন রয়েছে। সাধারনত চুড়ান্ত কাজের জন্য এই সেটিং ব্যবহার করবেন। এরফলে আপনি একটি পাশওয়ার্ড দিয়ে দেবেন। সেই পাশওয়ার্ড ব্যবহার না করে কেউ একে ফ্লাশে ওপেন করে এডিট করতে পারবে না, তবে প্লে করতে পারবে।

.          নিতান্ত প্রয়োজন না হলে এর বাইরে অন্যকিছু পরিবর্তন না করাই ভাল।

এইচটিএমএল সেটিং

.          HTML ট্যাব সিলেক্ট করুন।

.          টেম্পলেট এর জন্য Flash Only ব্যবহার করুন।

.          এখানে কোন প্লাগইন ব্যবহার করা হয়েছে কিনা, করলে তার বদলী এইচটিএমএল ব্যবহার করতে হবে কিনা যাচাইয়ের জন্য Detect Flash Version টিক দিন।

.          অন্যান্যদের মধ্যে মুভি কি মাপে দেখা যাবে, কোয়ালিটি, নিজস্ব উইন্ডো ব্যবহার করবে কিনা, মনিটরের রেজ্যুলুশনের কারনে বড়ছোট করবে কিনা, এলাইনমেন্ট কি হবে (বামে অথবা মাঝখানে) ইত্যাদি ঠিক করে দিতে পারেন। তবে ফ্লাশ নিজে থেকেই সবচেয়ে ভাল সেটিং ধরে নেয় বলে ডিফল্ট সেটিং ব্যবহার করতে পারেন।

সবকিছু ঠিক করার পর Publish বাটনে ক্লিক করুন। যে ফোল্ডার উল্লেখ করা হয়েছে সেখানে এইচটিএমএল সহ ফ্লাশের প্রয়োজনীয় ফাইলগুলি পাওয়া যাবে। এখানে থাকা এইচটিএমএল ব্যবহার করে ব্রাউজারে ফ্লাশ ওয়েবপেজটি ওপেন করা যাবে।

By Uzzal Malake

Tutorial-Flash-8

      ফ্লাশ ক্যারেকটার এনিমেশন : বোন টুল ব্যবহার

থ্রিডি ক্যারেকটার এনিমেশনের জন্য বোন টুল একটি প্রচলিত পদ্ধতি। একটি হাত সরানোর পদ্ধতিকে উদাহরন হিসেবে ভাবতে পারেন। একটি হাত কোন বস্তুকে এক যায়গা থেকে তুলে আরেক যায়গায় রাখল। এজন্য বাহু থেকে আঙুল পর্যন্ত প্রতিটি অংশকে একের সাথে অন্যের মিল রেখে সরাতে হয়।  একটি একটি করে অংশগুলিকে সরানো যেমন কষ্টকর এবং সময়সাপেক্ষ, তেমনি ফলও খুব ভাল হয় না। এজন্য ইনভার্স কাইনেমেটিকস (Inverse Kinemetics, IK) নামে একটি পদ্ধতি ব্যবহার করা হয়। এই পদ্ধতিতে সত্যিকারের মানুষের হাত যেভাবে বিভিন্ন অংশ জোড়া দিয়ে তৈরী সেভাবে পৃথক পৃথক ড্রয়িংকে  (থ্রিডির ক্ষেত্রে মডেলকে) জোড়া দিয়ে আইকে-চেইন তৈরী করা হয়। এরপর এনিমেশনের জন্য আঙুলকে সরালে তারসাথে মিল রেখে এরসাথে সংযুক্ত অংশগুলি সরে। মুল অবজেক্টকে সংযুক্ত না করে বোন (Bone - হাড়) নামের একধরনের অবজেক্ট ব্যবহার করা হয় একাজে।

ফ্লাশের নতুন ভার্শনে ক্যারেকটার এনিমেশনের সুবিধের জন্য বোন টুল যোগ করা হয়েছে। ক্যারেকটার এনিমেশন বলতে শুধু মানুষের মত কিছু এনিমেট করতে হবে এমন কথা নেই, অন্য যেকোন কিছুকেই আইকে চেইন ব্যবহার করে সহজে এনিমেট করা যায়।

ফ্লাশের বোন কিভাবে ব্যবহার করতে হয় এখানে উদাহরনসহ উল্লেখ করা হচ্ছে;

.          ফ্লাশের বোন শুধুমাত্র মুভি ক্লিপ সিম্বলের সাথে কাজ করে, গ্রাফিক সিম্বলের সাথে কাজ করে না। কাজেই আপনার ড্রইংগুলি যদি মুভি ক্লিপ সিম্বল হিসেবে না থাকে তাহলে ক্লিক করে সেটা সিলেক্ট করুন, মেনু থেকে Modify – Convert to Symbol সিলেক্ট করুন, এবং মুভি ক্লিপ সিম্বল সিলেক্ট করে একটি নাম দিন।

   বোন তৈরী করার জন্য টুলবারে বোন টুল সিলেক্ট করে ড্রাগ করাই যথেষ্ট। যা লক্ষ্য রাখতে হয় তা হচ্ছে কোথায় শুরু হবে এবং কোথায় শেষ হবে। শরীরের হাড়ের সাথে তুলনা করে দেখুন, হাড়ের যেখানে যেখানে জোড়া রয়েছে সেই যায়গাগুলি থেকেই ঘুরানো যায়। কাজেই মানুষের হাতের বোন তৈরী করতে হলে আপনাকে শুরু করতে হবে বাহু এবং কাধের সংযোগ বিন্দু থেকে। সেখানে মাউস ক্লিক করে ড্রাগ করে কনুই পর্যন্ত আনুন এবং মাউস বাটন ছেড়ে দিন। একটি বোন তৈরী হবে।

.          তৈরী হওয়া বোনের শেষ প্রান্তে মাউস পয়েন্টার আনলে একটি যোগ (প্লাশ) চিহ্ন দেখা যাবে। তার অর্থ সেখানে ক্লিক করলে আরেকটি নতুন বোন তৈরী হবে। এখানে ক্লিক করে ড্রাগ করে হাতের কব্জি পর্যন্ত আনুন।

   সেখান থেকে কব্জির জন্য পরবর্তী বোন তৈরী করুন।

.          ড্রইং এর ডিটেইল অনুযায়ী আঙুল তৈরী করতে পারেন। সাধারনত টুডি এনিমেশনে এতটা ডিটেল ব্যবহার করা হয় না। সবগুলি আঙুলের জন্য একটি অংশ ব্যবহার করতে পারেন। প্রয়োজনে বিভিন্ন ভঙ্গির হাত ব্যবহার করতে পারেন।

.          সবগুলি বোন তৈরী করার পর লক্ষ্য করলে দেখবেন টাইমলাইনে বোনের জন্য একটি নতুন লেয়ার তৈরী হয়েছে (Armature).

.          বোন তৈরীর পর এনিমেট করার জন্য সিলেকশন টুল সিলেক্ট করুন।

বোনের শেষ অবজেক্ট (উদাহরনে আঙুলের অংশ) ক্লিক করে সরিয়ে দেখুন। সরানোর সাথে মিল রেখে বাকি অংশগুলি সরবে।

.          বোন তৈরী করার পর যে কোন বোন সিলেক্ট করে প্রোপার্টি প্যানেল থেকে তার নানারকম বৈশিস্ট পরিবর্তন করা যাবে। আপনি নিশ্চয়ই জানেন মানুষের হাটু উল্টোদিকে বাকানো যায় না, কিংবা মাথা পুরোপুরি উল্টোদিকে নেয়া যায় না। এধরনের নিয়ন্ত্রন আরোপ করে দিলে এনিমেশনের সময় সহজে কাজ করা যায়।

.          বোন সেট করার পর এনিমেশন তৈরীর জন্য যতদুর পর্যন্ত এনিমেশন করতে চান ততদুর পর্যন্ত (ধরুন ১২০ নম্বর ফ্রেম) সবগুলি ফ্রেম এক্সটেন্ড করুন (F5)।

.          শেষ ফ্রেমে কিফ্রেম তৈরী জন্য সেখানে টাইম ইন্ডিকেটর এনে রাইট ক্লিক করে Insert Pose সিলেক্ট করুন।

.          যে ফ্রেমে বিশেষ ভঙিতে এনিমেট করতে চান সেখানে এনে বোন অনুযায়ী অংশগুলি সরান। সেখানে কিফ্রেম তৈরী হবে।

.          এনিমেশন প্লে করে দেখুন।

.          বোন ব্যবহার করা এনিমেশনকে যদি ফ্লাশ প্লেয়ারে ব্যবহার উপযোগি করতে চান তাহলে বোন সিলেক্ট করে প্রোপার্টি প্যানেলে Option অংশে Runtime সিলেক্ট করে দিন। ফ্লাশের গেম তৈরীর সময় এই পদ্ধতি ব্যবহার করা হয়।

ক্যারেকটার এনিমেশনের সময় পুরো ক্যারেকটারে এভাবে বোন ব্যবহার করে তাকে সহজে হাটা, দৌড়ানো ইত্যদি কাজ করা যায়। ক্যারেকটার ছাড়াও কোন যন্ত্রপাতি কিংবা অবজেক্ট এনিমেশনের সময়ও বোন ব্যবহার করে কাজ সহজ করা যায়।

By Uzzal Malake