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