Flash Catalyst: ওয়েব এনিমেশন তৈরী

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

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

অর্থাত অবস্থান পরিবর্তন, আকার পরিবর্তন, ঘুরানো (টুডি এবং থ্রিডি), ট্রান্সপারেন্সি পরিবর্তন এনিমেশনের এই মৌলিক কাজগুলি করা যাবে ক্যাটালিষ্টে।

টিউটোরিয়াল সহজ রাখার জন্য দুই পেজ বিশিষ্ট একটি প্রোজক্ট তৈরী করা হয়েছে। Photo gallery নামের এই প্রোজেক্টে দুটি পেজে (Tiger এবং lion) একটি করে ইমেজ রয়েছে। নির্দিস্ট ইমেজ (পেজ) দেখার জন্য দুটি ছোট আকারের ইমেজ (thumbnail) রয়েছে যা বাটন হিসেবে ব্যবহার করা হবে। আগের টিউটোরিয়াল অনুযায়ী দুটি পেজ এবং তাদের জন্য বাটনদুটিকে একটিভ করে নিন।

এনিমেশনের (ট্রানজিশন) এর যা করবেন;

.          টাইমলাইনে State Transition ওপেন করুন
একটি পেজ থেকে আরেক পেজে যাওয়ার দুটি অবস্থা দেখা যাবে। আরো বেশি পেজ থাকলে সেগুলির নামও পাওয়া যাবে এখানে। যে কাজের জন্য ট্রানজিশন ব্যবহার করতে চান সেটি সিলেক্ট করে ট্রানজিশন ইফেক্ট প্রয়োগ করবেন।

ক্যাটালিষ্টের টাইমলাইন ফ্লাশ কিংবা আফটার ইফেক্টস এর টাইমলাইন থেকে আলাদা। এর ৩টি অংশ। বামদিকের অংশে যেখান থেকে ট্রানজিশন শুরু হবে (Begining State), ডানদিকে ট্রানজিশনের পর যেখানে যাবে (End State)। এবং মাঝখানে ট্রানজিশন ইফেক্ট, সময় ইত্যাদি।

ডিফল্ট এখানে ফেড-ইন, ফেড আউট ট্রানজিশন পাওয়া যাবে। যদি এগুলিকেই ব্যবহার করতে চান তাহলে;

.          ফেড-ইন ট্রানজিশনের ডানদিকে বাকানো অংশ ড্রাগ করে সময় বাড়িয়ে নিন।

.          ফেড-আউট ট্রানজিশনের সময় বাড়িয়ে নিন একইভাবে।

.          ফেড-ইন (অথবা ফেড আউট) কে ড্রাগ করে ডানদিকে নির্দিষ্ট দুরত্বে সরিয়ে নিন (ছবির মত)।

.          প্লে বাটণে ক্লিক করে প্রিভিউ দেখে নিন।

নির্দিষ্ট ট্রানজিশন ব্যবহার

.          যে অবজেক্ট এনিমেট করবেন সেটি সিলেক্ট করুন। সবগুলি অবজেক্টের নাম টাইমলাইনে দেখা যাবে। অথবা আর্টবোর্ড থেকেও সিলেক্ট করা যাবে।

.          টাইমলাইনের নিচের দিকে Add Action ক্লিক করুন এবং ট্রানজিশন সিলেক্ট করুন।
এখানে Rotate 3D সিলেক্ট করা হয়েছে।

.          ডানদিকের প্রোপার্টিজ প্যানেল থেকে শুরু এবং শেষের অবস্থান, ট্রানজিশনের সময় ইত্যাদি ঠিক করে নিন।

.          প্লে করে দেখুন।

·        প্রতিটি পেজের যে অবজেক্টগুলি এনিমেট করতে চান সেগুলি একই পদ্ধতিতে এনিমেট করুন।

·        সেভ করুন।

·        মেনু থেকে File – Run Project কমান্ড দিয়ে ব্রাউজারে প্রিভিউ দেখে নিন।

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

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

ফ্লাশ এনিমেশনের জন্য ফ্লাশ টিউটোরিয়াল দেখুন।

অন্যান্য ক্যাটালিষ্ট টিউটোরিয়াল

• ওয়েব ডিজাইনের জন্য ফ্লাশ ক্যাটালিষ্ট
• কিভাবে ডিজাইন তৈরী করবেন
• ফটোশপ ডিজাইন থেকে ওয়েব পেজ তৈরী