ফ্লাশ ইন্টারএকটিভিটি : বাটন তৈরী

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

প্রাথমিক একটি  বাটন তৈরী করে দেখা যাক।

আগেই জেনেছেন ফ্লাশে গ্রাফিক এবং মুভি ক্লিপ সিম্বলের কথা। বাটন আরেক ধরনের সিম্বল। সহজ একটি বাটন তৈরী করুন এভাবে;

.          একটি রেকট্যাঙ্গল (অথবা অন্যকিছু) তৈরী করুন।

.          সিলেকশন টুল ব্যবহার করে পুরো সেপ সিলেক্ট করুন।

.          সেপকে সিম্বলে পরিনত করার জন্য মেনু থেকে Modify – Convert to Symbol  কমান্ড দিন অথবা কিবোর্ডে F8 চাপ দিন।

.          বাটনের একটি নাম দিন।

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

আপনার সেপ-টি বাটন সিম্বলে পরিনত হবে। মুভি টেষ্ট করে বাটনের ওপর মাউস পয়েন্টার এনে দেখুন। ক্লিক করলে অবশ্য কোন কাজ হবে না। কারন ক্লিক করলে কি করবে সেটা এখনো বলা হয়নি।

বাটনের ওপর ডাবলক্লিক করে বাটনকে ওপন করুন। Up, Over, Down, Hit নামে ৪টি অবস্থা দেখতে পাবেন। প্রতিটি বাটনের ৪টি ষ্টেট। এর অর্থ পর্যায়ক্রমে, বাটনটি স্বাভাবিক অবস্থায় কেমন দেখানে, এর ওপর মাউস পয়েন্টার আনকে কেমন দেখাবে, মাউস চেপে ধরলে কেমন দেখাবে এবং কোন যায়গায় ক্লিক করলে বাটনটির কমান্ড কাজ করবে। এর প্রতিটিকে পৃথক পৃথকভাবে পরিবর্তন করা যায়। ফলে আপনি ইচ্ছে করলে স্বাভাবিক অবস্থায় এক রং, মাউস পয়েন্টার আনলে আরেক রং, মাউস চেপে ধরলে আরেক রং ব্যবহার করতে পারেন। এমনকি মাউসপয়েন্টার আনলে সেটা এনিমেট করবে এটা করার জন্য সেখানে মুভি সিম্বল ব্যবহার করতে পারেন।

চারটি ষ্টেটকে পৃথকভাবে তৈরী করার জন্য যা করতে হবে।

.          Over ফ্রেমে একটি কিফ্রেম ইনসার্ট করুন, Insert – Timeline - Keyframe

.          রং পরিবর্তন করুন (অথবা এনিমেট করুন, কিছূ লিখুন কিংবা ছবি যোগ করুন)।

.          Up ফ্রেমের জন্য সেখানে কিফ্রেম ইনসার্ট করে রং পরিবর্তন করুন। অথবা একে ৩ পিক্সেল ডানে, ৩ পিক্সেল নিচের দিকে সরিয়ে দিন।

.          Hit ষ্টেটের জন্য কিফ্রেম তৈরী করুন এবং মাউস ড্রাগ করে কতটুকু যায়গার মধ্যে ক্লিক করলে বাটনকি কাজ করবে সেটুকু সিলেক্ট করুন।

.          বাটন এডিট মোড থেকে মুল মুভিতে ফেরত যান (Ctrl-E)

মুল বাটন যতটুকু তারচেয়ে বড় অংশকে ষ্টেট হিসেবে ব্যবহার করা যায়। টেক্সটকে বাটন হিসেবে ব্যবহারের সময় অবশ্যই এদিকে দৃষ্টি দিন। অথবা টেক্সট এর ফাকা অংশে ক্লিক করলে বাটনটি একটিভ হবে না।

বাটনে শব্দ ব্যবহার

ধরুন বাটনের ওপর মাউস পয়েন্টার আনলে একটি শব্দ শোনাতে চান। এজন্য যা করতে হবে;

.          অল্প সময়ের সাউন্ড ফাইল ইমপোর্ট করুন লাইব্রেরিতে (File – Import – Import to library)

.          বাটনের Over ষ্টেট ফ্রেম সিলেক্ট করুন।

.          প্রোপার্টি প্যানেলে Sound অংশ থেকে সাউন্ড ফাইলটি সিলেক্ট করে দিন।

.          মুভি টেষ্ট করে দেখুন।

সাউন্ড ব্যবহারের আগেই তাকে লাইব্রেরীতে আনতে হবে। ইমপোর্ট না করে সাউন্ড ব্যবহার করা যাবে না।

অদৃশ্য বাটন তৈরী

অদৃশ্য বাটন অনেক ধরনের কাজে ব্যবহার করা হয়। আপনার ফ্লাশ মুভিতে হয় একটি দৃশ্য রয়েছে যার বিভিন্ন বস্তুর ওপর ক্লিক করলে বিভিন্ন কাজ হবে। ব্যবহারকারী সরাসরি ছবির ওপর ক্লিক করবেন (হয়ত ছবিতে একটি বই রয়েছে তার ওপর) এবং কাজ হবে।

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

একাধিক বাটন তৈরী করা

সাধারনভাবে আপনার একাধিক বাটন প্রয়োজন হতে পারে। এবং আপনি সেগুলিকে একই ধরনের তৈরী করতে চান। এজন্য একটি বাটন তৈরী করুন এবং লাইব্রেরী প্যানেলে অথবা ষ্টেজে বাটনের ওপর রাইট-ক্লিক করে Duplicate সিলেক্ট করুন।

নতুন বাটনের জন্য নাম দিয়ে দিন।

Duplicate কমান্ড দিয়ে তৈরী বাটনের পরিবর্তন

.          বাটনের ওপর ডাবল-ক্লিক করুন।

.          যে কাজ করবে সেই অনুযায়ী পরিবর্তন করার করে নিন।

বাটনের জন্য কোড ব্যবহার

বাটনে ক্লিক করবে বলার জন্য কোড (ফ্লাশ একশনস্ক্রিপ্ট) ব্যবহার করতে হয়। খুব সরল থেকে জটিল প্রোগ্রামিং সব ধরনের কাজে একশনস্ক্রিপ্ট ব্যবহার করা যায়। নতুন ভার্শনের ফ্লাশে একশনস্ক্রিপ্ট ১, ২ এবং ৩ এই তিনটি ভার্শনে থাকে এবং এদের সবগুলি ব্যবহার করা যায়।

বাটনে একশনস্ক্রিপ্ট যোগ করার সাধারন নিয়মটি জেনে নিন। উদাহরন হিসেবে এই বাটনে ক্লিক করলে ২৫ নম্বর ফ্রেমে গিয়ে মুভি থেমে থাকবে।

.          মেনু থেকে Windows – Code snippet সিলেক্ট করুন। কোড স্নিপেট প্যানেল ওপেন হবে।

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

.          Code snippet প্যানেলে Timeline Nevigation ওপেন করুন এবং Click to Go To Frame and Stop কমান্ডে ডাবল-ক্লিক করুন।
বাটনের ইনস্ট্যান্স নাম না থাকার একটি মেসেজ দিতে পারে। ওকে ক্লিক করে মেসেজটি সরিয়ে দিন।

.          নির্দিষ্ট ফ্রেমে যাওয়ার কোড লেখা হয়ে যাবে। ডিফল্ট ফ্রেম ৫ এর জন্য কমান্ডটি তৈরী, ৫ এর বদলে ২৫ (অথবা আপনার প্রয়োজনীয় ফ্রেম) টাইপ করে দিন।

.          মুভি টেষ্ট করুন। বাটনে ক্লিক করলে ২৫ নম্বর ফ্রেমে থেমে থাকার কথা।

এই পদ্ধতিতে একাধিক বাটনের ভিন্ন ভিন্ন কাজের জন্য ভিন্ন ভিন্ন কোড যোগ করে ইন্টারএকটিভ মুভি তৈরী করুন।

ফ্লাশ ওয়েব সাইট ডিজাইন
টেক্সট ব্যবহার

ড্রইং
মোশান টুইন এবং সেপ টুইন
মাস্ক ব্যবহার
এনিমেটেড মুভি ক্লিপ
বোন টুল ব্যবহার