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

ফ্লাশ ক্যাটালিষ্টে ফটোশপ ডিজাইন ব্যবহার করে কিভাবে ওয়েব পেজ তৈরী করা হয় দেখানো হচ্ছে এই টিউটোরিয়ালে। এজন্য উদাহরনের ডিজাইনটি লক্ষ্য করুন। এখানে অত্যন্ত সরল একটি ডিজাইন ব্যবহার করা হয়েছে। হেডারের জন্য একটি ইমেজ, ব্যাকগ্রাউন্ডের জন্য একটি ইমেজ, সাইটের টাইটেল, স্লোগান, আর্টিকেলের জন্য একটি টাইটেল এবং আর্টিকেলের বডি টেক্সট রয়েছে এতে। এছাড়া রয়েছে দুটি বাটন মুলত দুটি পেজে যাওয়ার জন্য। আগের টিউটোরিয়ালঅনুযায়ী ডিজাইনটি ক্যাটালিষ্টে ইমপোর্ট করুন। ক্যাটালিষ্টে আপনার প্রথম কাজ ওয়েব সাইটের বিভিন্ন পেজ তৈরী। ঠিকভাবে ডিজাইন করলে বিভিন্ন পেজের সবকিছু সেখানেই থাকার কথা। . নতুন পেজ তৈরীর জন্য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 কমান্ড দিয়ে সার্ভারে আপলোড করার জন্য অথবা ডেস্কটপে ব্যবহারযোগ্য ভার্শন তৈরী করা যাবে। এবিষয়ে এবং এনিমেশনসহ অন্যান্য বিষয়গুলি আগামীতে।

Share on Google Plus

About K. M. Emrul Hasan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.