এডোবি ফ্ল্যাশ ব্যবহার করে ওয়েবসাইট তৈরি করে ফেলুন - Graphic School

Blog

এডোবি ফ্ল্যাশ ব্যবহার করে ওয়েবসাইট তৈরি করে ফেলুন

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

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

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

  • ডকুমেন্ট তৈরী, মাপ এবং রং ঠিক করা  এবং সেভ করা
  • ফ্লাশ চালূ করুন এবং মেনু থেকে কমান্ড দিন এবং ActionScript 3.0  সিলেক্ট করুন;
    অথবা ষ্টার্ট আপ ডায়ালগ বক্স থেকে ActionScript 3.0 সিলেক্ট করুন।
  • ডকুমেন্ট এর মাপ এবং রং ঠিক করার জন্য মেনু থেকে  Modify – Documents কমান্ড দিন।
  • ওয়েব পেজের মাপ (পিক্সেলে) টাইপ করে দিন। সাধারণত পাশের দিকে (width) রাখা হয় ৯৬০ থেকে ৯৮০ পিক্সেল এর মধ্যে এবং উচ্চতা রাখা হয় সাইটে যা থাকবে তারসাথে মানানসই।
  • Background Color এর পাশে রঙের ওপর ক্লিক করুন এবং ওয়েবসাইটের ব্যাকগ্রাউন্ড হিসেবে যে রং ব্যবহার করতে চান সেটা সিলেক্ট করুন। এখানে রং সাদা রাখা হয়েছে।
  • ডকুমেন্ট সেভ করার জন্য মেনু থেকে File – Save কমান্ড দিন। একে working ফোল্ডারে সাইটের নামে ( উদাহরনে my_website) সেভ করুন।
  • গাইড ব্যবহার করুন

গাইড ব্যবহার করে খুব সহজে বিভিন্ন এলিমেন্টগুলো যায়গামত রাখা যাবে।

  • মেনু থেকে View – Rulers কমান্ড দিন। ওপরে এবং পাশের দিকে রুলার (স্কেল) পাওয়া যাবে।
  • ওপরের রুলারের ওপর ক্লিক করুন এবং ড্রাগ করে ডকুমেন্টের যেখানে হেডার রাখবেন অথবা হেডারের জন্য যতটুকু যায়গা ব্যবহার করবেন সেই যায়গা নির্দিষ্ট করুন। প্রয়োজনে একাধিক গাইড যোগ করে নিন। এরফলে ইমেজ ব্যবহারের সময় ইমেজের মাপের (পিক্সেল) সাথে মিল রেখে সেগুলো ব্যবহার সহজ হবে।
  • গাইডের সাথে মানানসই করে কিছু রাখার জন্য মেনু থেকে View – Snapping কমান্ড দিন এবং Snap to Guides এরপাশে টিক চিহ্ন নিশ্চিত করুন।

ব্রাকগ্রাউন্ড আকুন

নেভিগেশন বাটনগুলো যেখানে থাকে সেখানে সাধারণত একটি বার ব্যবহার করা হয় ব্যাকগ্রাউন্ড হিসেবে। নতুন কিছু যোগ করার সময় প্রতিটির জন্য পৃথক পৃথক লেয়ার তৈরী করে নেয়া সুবিধেজনক।

  • একটি লেয়ার তৈরী করুন।
  • রেকট্যাঙ্গল টুল সিলেক্ট করুন।
  • ফিল এর জন্য সঠিক রঙ সিলেক্ট করুন। ষ্ট্রোক (লাইন) এর জন্য কোন রঙ ব্যভহার না করাই ভাল।
  • ড্রাগ করে রেকট্যাঙ্গল আকুন।
  • যায়গামত বসান।
  • কোন পরিবর্তন করা প্রয়োজন হলে করে নিন।

হেডার তৈরী করুন

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

  • টাইমলাইনে নতুন একটি লেয়ার তৈরী করুন।
  • ইমেজ ফাইল ইমপোর্ট করার জন্য File – Import – Import to Stage কমান্ড দিন
  • ইমেজ ফাইলটি সিলেক্ট করুন।
  • সঠিক যায়গায় বসান।

ভেক্টর আর্ট ব্যবহার

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

  • টাইমলাইনে নতুন একটি লেয়ার তৈরী করুন।
  • ভেক্টর ইমেজ ইমপোর্ট করার জন্য File – Import – Import to Stage কমান্ড দিন
  • ইমেজ ফাইলটি সিলেক্ট করুন।
  • কোন অপশন পরিবর্তণ করতে চাইলে করে নিন।
  • সঠিক যায়গায় বসান।

বাটন তৈরী

বাটনের জন্য টেক্সট অথবা ইমেজ ব্যবহার করলে সেগুলো ইমপোর্ট করুন অথবা তৈরী করুন এবং যায়গামত বসান। বাটন একটিভ করা এবং এনিমেটেড বাটন তৈরীর জন্য একটি পৃথক টিউটোরিয়াল রয়েছে।

অবজেক্টকে একাধিকবার ব্যবহার

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

  • অবজেক্টটি সিলেক্ট করুন।
  • মেনু থেকে কমান্ড দিন Modify – Convert to Symbol
  • সিম্বল এর নাম দিন এবং ধরন সিলেক্ট করুন (গ্রাফিক, মুভি ক্লিক, বাটন ইত্যাদি)

গ্রাফিক সিম্বল এবং মুভি ক্লিপ সিম্বল তৈরীর জন্য পৃথক টিউটোরিয়াল রয়েছে।

অন্যান্য টিউটোরিয়াল অনুযায়ী ওয়েব পেজের যাবতীয় বিষয়গুলো যোগ করুন। আগামী টিউটোরিয়ালে ওয়েব পেজ পাবলিস করার বিষয়গুলো জানানো হবে।

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

কিভাবে টেক্সট ব্যবহার করবেন জেনে নিন।

  • এক লাইন টেক্সট তৈরী
  • টুলবক্স থেকে টেক্সট টুল সিলেক্ট করুন।
  • ফন্ট, ফন্টের আকার, রং ইত্যাদি সিলেক্ট করুন
  • যেখানে লেখা শুরু করতে চান সেখানে ক্লিক করুন।
  • টাইপ করতে শুরু করুন।

এভাবে টাইপ করতে শুরু করলে লেখার পরিমান বৃদ্ধির সাথেসাথে তা ক্রমাগত ডানদিকে সরতে থাকবে। এমনকি ষ্টেজের (মুল এলাকার) বাইরে গেলেও নিজে থেকে পরবর্তী লাইনে যাবে না। অবশ্য পরবর্তীতে টেক্সটবক্স পরিবর্তন করা যাবে।

পরবর্তী লাইনের জন্য এন্টার কি ব্যবহার করুন।

প্যারাগ্রাফ টেক্সট

  • নির্দিষ্ট এলাকার মধ্যে রাখার জন্য টেক্সট টুল সিলেক্ট করে ড্রাগ করে নির্দিস্ট এলাকা সিলেক্ট করুন। একটি বক্স পাওয়া যাবে।
  • বক্সের মধ্যে টাইপ করুন।

টেক্সট বক্স পরিবর্তন করা

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

  • সিলেকশন টুল সিলেক্ট করুন।
  • টেক্সট বক্সে ক্লিক করুন।
  • টেক্সট বক্সের চারিদিকের হ্যান্ডলার ব্যবহার করে বক্সকে বড়-ছোট করুন।
  • টেক্সট বক্সের ভেতরের যে কোন যায়গায় ক্লিক করে ড্রাগ করে বক্সকে সুবিধেজনক যায়গায় সরানো যাবে।

সিলেকশন টুল ব্যবহার করলে শুধুমাত্র বক্স পরিবর্তন হবে, ফ্রি ট্রান্সফরম টুল ব্যবহার করলে বক্সের সাথে টেক্সটও পরিবর্তন হবে।

দুটি টেক্সট বক্সকে যোগ করা

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

  • সিলেকশন টুল সিলেক্ট করুন।
  • যে টেক্সটবক্সে অতিরিক্ত টেক্সট রয়েছে সেটি সিলেক্ট করুন। একটি লাল রঙের চিহ্ন দেখা যাবে।
  • লাল চিহ্নে ক্লিক করুন।
  • যে টেক্সট বক্সে সাথে লিংক করতে চান তার ওপর ক্লিক করুন।
  • ফাকা যায়গায় ক্লিক করলে একই মাপের নতুন একটি টেক্সট বক্স তৈরী হবে এবং সেখানে বাকি লেখাটুকু পাওয়া যাবে।

ষ্টাইল টেক্সট ব্যবহার

টাইটেল কিংবা অন্যান্য লেখার জন্য অনেক সময় ছবির বা বিষয়ের সাথে মিল রেখে ষ্টাইল ফন্ট ব্যবহার করা হয়।

  • টেক্সট টুল সিলেক্ট করুন।
  • যে লেখাটুকু বিশেষ ফন্ট ব্যবহার করতে চান সেটুকু সিলেক্ট করুন।
  • প্রোপার্টি থেকে পছন্দের ফন্ট সিলেক্ট করুন।

যদি এমন কোন ফন্ট ব্যবহার করেন যা অন্যের কম্পিউটারে না থাকার সম্ভাবনা রয়েছে তাহলে ফন্টকে গ্রাফিক্সে পরিনত করে নিন।

  • টেক্সট সিলেক্ট করুন
  • মেনু থেকে Modify – Break apart কমান্ড দিন।
  • ব্রেক এপার্ট কমান্ড দেয়ার পর একদিকে যেমন ফন্টের সমস্যা দুর করা যাবে, অন্যদিকে একে ড্রইং অবজেক্টের মত পরিবর্তন করা যাবে।
  • ব্রেক করার পর ফন্ট হিসেবে এডিট করা যাবে না। লেখার সবকিছু ঠিক থাকার পর এই কমান্ড ব্যবহার করুন।
  • মুল লেখার জন্য সবসময়ই সব কম্পিউটারে ব্যবহৃত হয় এমন ফন্ট ব্যবহার করুন।

ইমেইল এবং ওয়েব লিংক ব্যবহার

সাধারণত ওয়েব পেজের কোথাও ইমেইল ঠিকানা দেয়া থাকে যেখানে ক্লিক করলে সরাসরি সেই ঠিকানায় ইমেইল পাঠানো যায়।

  • ইমেইল এড্রেস লেখা টেক্সটগুলো সিলেক্ট করুন।
  • মেনু থেকে Edit – Copy (Ctrl-C) কমান্ড দিয়ে কপি করুন।
  • Advanced Character ওপেন করুন
  • Link অংশে টাইপ করুন mail: এরপর এড্রেসটি পেষ্ট করুন।
    ইমেইল এড্রেস [email protected] হলে লেখা দেখা যাবে mail:[email protected]
  • এন্টার চাপ দিন।

একইভাবে যে কোন টেক্সট থেকে ওয়েব এড্রেস এর লিংক তৈরী করতে পারেন।

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

 

লিখেছেন

মোঃ রিয়াদ আহম্মেদ

Facebook Comment