Tutorial-Flash-14

         ভিডিও এবং অন্যান্য মিডিয়া যোগ করা

Flash Catalyst: ওয়েব পেজে অডিও, ভিডিও এবং অন্যান্য বিষয় যোগ করা

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

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

এছাড়া ইমেজ যোগ করা কিংবা ভিডিও যোগ করা যায় সহজেই।

ইমেজ ইমপোর্ট করা

.          যে পেজে ইমেজ ব্যবহার করতে চান সেই পেজ সিলেক্ট করুন।

.          মেনু থেকে File – Import - Image কমান্ড দিন।

.          ইমেজ ফাইলটি ব্রাউজ করে সিলেক্ট করুন এবং ডাবল ক্লিক করুন। জেপেগ, জিফ, পিং ইত্যাদি ফরম্যাট ব্যবহার করা যাবে।

.          আর্টবোডে আনার পর ড্রাগ করে যেখানে রাখতে চান সেখানে নিয়ে যান।

.          প্রোপার্টি ইন্সপেক্টর থেকে প্রোপার্টি পরিবর্তন করুন।

ভিডিও ইমেজ ইমপোর্ট করা

.          যে পেজে ইমেজ ব্যবহার করতে চান সেই পেজ সিলেক্ট করুন।

.          মেনু থেকে File – Import – Video/Sound File কমান্ড দিন।

.          ইমেজ ফাইলটি ব্রাউজ করে সিলেক্ট করুন এবং ডাবল ক্লিক করুন। FLV, F4V ইত্যাদি ফরম্যাট ব্যবহার করা যাবে।

.          আর্টবোডে আনার পর ড্রাগ করে যেখানে রাখতে চান সেখানে নিয়ে যান।

.          প্রোপার্টি ইন্সপেক্টর থেকে প্রোপার্টি পরিবর্তন করুন।

.          Ctrl + Enter চাপ দিয়ে প্রিভিউ দেখে নিন।

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

একবার ইমপোর্ট করার পর অন্য পেজে ব্যবহার করা প্রয়োজন হলে লাইব্রেরী থেকে ড্রাগ করে ব্যবহার করা যাবে।

একই কমান্ড ব্যবহার করে অডিও  ফাইল ব্যবহার করতে পারেন। অডিওর জন্য এমপিথ্রি ফরম্যাট ব্যবহার করতে পারেন।

ফ্লাশ সুইফ (SWF) ইমপোর্ট করা

.          যে পেজে ইমেজ ব্যবহার করতে চান সেই পেজ সিলেক্ট করুন।

.          মেনু থেকে File – Import - SWF কমান্ড দিন।

.          ইমেজ ফাইলটি ব্রাউজ করে সিলেক্ট করুন এবং ডাবল ক্লিক করুন।

.          আর্টবোডে আনার পর ড্রাগ করে যেখানে রাখতে চান সেখানে নিয়ে যান।

.          প্রোপার্টি ইন্সপেক্টর থেকে প্রোপার্টি পরিবর্তন করুন।

By Uzzal Malake

Tutorial-Flash-13

ওয়েব এনিমেশন

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

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

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

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

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

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

.          টাইমলাইনে State Transition ওপেন করুন

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

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

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

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

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

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

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

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

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

.          টাইমলাইনের নিচের দিকে Add Action ক্লিক করুন এবং ট্রানজিশন সিলেক্ট করুন।

এখানে Rotate 3D সিলেক্ট করা হয়েছে।

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

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

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

·        সেভ করুন।

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

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

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

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

By Uzzal Malake

Tutorial-Flash-12

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

Flash Catalyst : ফটোশপ ডিজাইন থেকে ওয়েব পেজ তৈরী

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

আগের টিউটোরিয়াল অনুযায়ী ডিজাইনটি ক্যাটালিষ্টে ইমপোর্ট করুন।

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

.          নতুন পেজ তৈরীর জন্য Duplicate State বাটনে ক্লিক করুন। Page2 নামে নতুন পেজ তৈরী হবে। যতগলি পেজ ব্যবহার করবেন ততগুলি পেজ তৈরী করে নিন। এখানে দুটি পেজ ব্যবহার করা হচ্ছে।

.          প্রতিটি পেজের জন্য ডাবল-ক্লি করে নাম পরিবর্তন করে নিন।

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

.          প্রতিটি পেজের জন্য যাকিছু বাদ দেয়া প্রয়োজন সেগুলি এই পদ্ধতিতে বাদ দিন।

বাটন তৈরী

বাটনের জন্য যে ইমেজ/টেক্সট ইত্যাদি তৈরী করেছেন তাকে বাটন হিসেবে ব্যবহার করা পরবর্তী কাজ।

.          সিলেক্ট টুল ব্যবহার করে বাটনের ইমেজ এবং টেক্সট সিলেক্ট করুন। লেয়ার প্যানেল থেকে অথবা মুল ডিজাইনে সিলেক্ট করার কাজ করা যাবে।

.          Convert Artwork to Component অংশে Choose Component থেকে বাটন সিলেক্ট করুন। লেয়ার প্যানেলে বাটন নামে আরেকটি অবজেক্ট পাওয়া যাবে।

.          ডাবল ক্লিক করে বাটনের নাম পরিবর্তন করুন।

বাটনের স্টেট ঠিক করা

একটি বাটনের ৪টি ষ্টেট থাকে। সাধারন (Up), ওপরে মাউস আনার সময় (Over), মাউস চেপে ধরলে (Down) এবং বাটনটি ইন-একটিভ থাকলে (Disable)। ৪টি ষ্টেটের জন্য চার ধরনের ইমেজ ব্যবহার করতে পারেন।

বাটনের ষ্টেট পরিবর্তনের জন্য যা করবেন;

.          বাটন সিলেক্ট করুন এবং Modify – Edit Component কমান্ড সিলেক্ট করুন।

.          যে ষ্টেটের পরিবর্তন করবেন সেটি ক্লিক করুন।

.          বাটনের যে অবস্থা ব্যবহার করতে চান পরিবর্তন করে সেই অবস্থা আনুন।

Filter control ব্যবহার করে ড্রপস্যাডো বা অন্যান্য ফিল্টার ব্যবহার করতে পারেন। অথবা বিভিন্ন ষ্টেটের জন্য ভিন্ন ভিন্ন সাইজ ব্যবহার করতে পারেন।

.          কাজ শেষে Modify – Exit Editing কমান্ড দিন।

বিভিন্ন ষ্টেটের জন্য নতুন ইমেজ ব্যবহার

কোন বিশেষ ষ্টেটের জন্য অন্য ইমেজ ইমপোর্ট করে ব্যবহার করতে পারেন।

.          বাটনটি সিলেক্ট করে Modify – Edit Component কমান্ড দিন।

.          যে ষ্টেটের পরিবর্তন করবেন সেটি সিলেক্ট করুন।

.          বাটনের যে অংশ বাদ দিতে চান সেটি মুছে দিন।

.          File – Import – Image কমান্ড দিন।

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

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

File – Run Project কমান্ড দিয়ে প্রোজেক্ট পরীক্ষা করতে পারেন।

.          কাজ শেষে Modify – Exit Editing কমান্ড দিন।

বাটনের ইন্টারএকটিভি যোগ করা

উদাহরনের প্রোজেক্টে About Us বাটণে ক্লিক করলে About পেজে যাওয়ার কথা। এজন্য যা করবেন;

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

.          ইন্টারএকশন প্যানেলে Add Interaction বাটন ক্লিক করুন। একটি প্যানেল ওপেন হবে।

.          বাটনটি কখন কাজ করবে সিলেক্ট করুন। সবচেয়ে সাধারন হচ্ছে OnClick যেখানে বাটনের ওপর ক্লিক করলে কাজ হবে। অন্যান্য সময়ও বকাজ করার ব্যবস্থা রাখতে পারেন।

.          ড্রপ ডাউন লিষ্ট থেকে কি কাজ করবে সেটা সিলেক্ট করুন। একই ক্যাটালিষ্ট প্রোজেক্টে এক পেজ থেকে অন্য পেজে পাওয়ার জন্য Play Transition to state সিলেক্ট করুন।

ট্রানজিশন ব্যবহার পদ্ধতি সম্পর্কে পরে জানানো হবে।

.          Choose State  থেকে কোন পেজে যাবে সেই পেজ সিলেক্ট করুন। ব্যবহার করলে সেই পেজের এড্রেস ব্যবহার করুন।

সাধারনত কোন বাটনের ওপর মাউস পয়েন্টার আনলে আঙুলের ছবি দেখা যায়। Appearance প্যানেল ওপেন করে Hand cursor ক্লিক করুন। প্রতিটি বাটনের জন্য এই কাজ পৃথকভাবে করে নিতে হবে।

এই পদ্ধতিতে Home এবং About Us দুটি বাটনের জন্য এমন ব্যবস্থা করুন যেন Home বাটনে ক্লিক করলে Home পেজে যায় এবং About Us বাটনে ক্লিক করলে About পেজে যায়।

আপনার ওয়েব পেজ তৈরী। মেনু থেকে File – Run Project কমান্ড দিন। পেজটি ব্রাউজারে ওপন হবে।

File – Publisg to SWF/AIR  কমান্ড দিয়ে সার্ভারে আপলোড করার জন্য অথবা ডেস্কটপে ব্যবহারযোগ্য ভার্শন তৈরী করা যাবে।

By Uzzal Malake