সূত্র: অনলাইন প্রোগ্রাম
অনেক প্রোগ্রাম আছে যেখানে আপনি সম্পাদনা করতে পারেন, মন্টেজ তৈরি করতে পারেন বা এমনকি তৈরি করতে পারেন অ্যানিমেশন, প্রতিবার এমন অনেক সফ্টওয়্যার রয়েছে যা এই ধরণের ইন্টারেক্টিভ প্রকল্প যুক্ত করে। এই পোস্টে আমরা আপনাকে শুধুমাত্র অ্যানিমেশন জগতের সাথে পরিচয় করিয়ে দিতে যাচ্ছি না, আমরা আপনাকে একটি নতুন বন্ধুর সাথেও পরিচয় করিয়ে দিতে যাচ্ছি।
আপনি ভাল করেই জানেন, কম্পিউটার জগত ওয়েব পেজ বা অনলাইন মিডিয়ার বিকাশের জন্য কমান্ড এবং দরকারী টুলে পূর্ণ, যা বর্তমানে সহাবস্থান করছে। আমাদের সাথে থাকুন এবং এই নতুন টিউটোরিয়ালে কম্পিউটিং এবং ইন্টারঅ্যাক্টিভিটি সহ আপনার স্তর বাড়ানোর আরেকটি উপায় আবিষ্কার করুন।
অ্যানিমেশন কি?
সূত্র: সকল গেমার
আমরা চাই আপনি সম্পূর্ণরূপে টিউটোরিয়ালটিতে প্রবেশ করুন, তবে এর জন্য আপনাকে অ্যানিমেশনের জগতে প্রবেশ করতে হবে বা গ্রাফিক ডিজাইনের ক্ষেত্রে যা উদ্বিগ্ন, বিশ্বের ইন্টারেক্টিভ নকশা.
অ্যানিমেশনগুলিও অডিওভিজ্যুয়াল জগতের অংশ, আসলে সেগুলি কিছুই হবে না যদি না হয় কারণ সেগুলিতে একটি অডিও এবং একটি চলমান চিত্র প্রবর্তিত হয়৷ এই কারণে, যখন আমরা "অ্যানিমেশন" এর কথা বলি, তখন আমরা যা "কার্টুন" নামে পরিচিত তা উল্লেখ করি।
উপরে সংক্ষিপ্ত হিসাবে, অ্যানিমেশন কোন কিছুতে নড়াচড়া দেওয়ার ক্ষমতা থেকে উদ্ভূত হয়, এই ক্ষেত্রে কার্টুন। কিন্তু এই সমস্ত আন্দোলন কিভাবে অর্জিত হয়?আচ্ছা, নিঃসন্দেহে, এগুলো আমরা যাকে বলি, তা থেকে উদ্ভূত হয়, অঙ্কন বা ফটোগ্রাফের ক্রম যে ক্রমাগত আদেশের মাধ্যমে, একের পর এক, তারা আমাদের চোখের সামনে একটি বিশ্বাসযোগ্য আন্দোলন তৈরি করতে পরিচালনা করে, যা নিজেদেরকে ঘৃণা করে এবং ভিজ্যুয়াল বিভ্রমের খেলায় প্রবেশ করে।
পূর্বে, প্রথম অ্যানিমেশনগুলি কাগজের শীটগুলিতে ডিজাইন করা হয়েছিল, তাদের প্রতিটিতে, অ্যানিমেটেড চরিত্রটি ধাপে ধাপে আঁকা হয়েছিল এবং একবার শীটটির শেষের দিকে পৌঁছে গেলে, এটিতে গতিবিধির প্রভাব অর্জনের জন্য একে একে দ্রুত পাস করা হয়েছিল। অঙ্কন
অ্যানিমেশন প্রকার
অ্যানিমেশন বিভিন্ন ধরনের আছে:
কার্টুন বা ঐতিহ্যবাহী অ্যানিমেশন
এই শৈলী ফ্রেম দ্বারা নায়ক ফ্রেম আন্দোলন প্রদান গঠিত. শুরুতে, যখন পর্যাপ্ত অডিওভিজ্যুয়াল উপায় ছিল না, তখন সেগুলি প্রতিটি ফ্রেমের অঙ্কন এবং পেইন্টিংয়ের মাধ্যমে (ব্যাকগ্রাউন্ড, স্টেজ বা অ্যানিমেশনের পটভূমি সহ), পরে ফিল্ম টেপ হিসাবে আমরা যা জানি তার উপর চিত্রায়িত করা হয়েছিল।
গতি থামাও
স্টপ মোশন হল একটি অ্যানিমেশন কৌশল যার কার্টুনের সাথে কোন সম্পর্ক নেই। তদ্ব্যতীত, এর মূল উদ্দেশ্য হল বস্তুর গতিবিধি অনুকরণ করা যা বাস্তবে সম্পূর্ণ স্থির এবং এটি দুটি পর্যায়ে বিভক্ত: কাদামাটির অ্যানিমেশন বা ক্লেমোশন এবং অনমনীয় বস্তুর অ্যানিমেশন।
পিক্সেলেশন
পিক্সেলেশন হল একটি কৌশল যা স্টপ মোশন থেকে আসে এবং এতে এমন বস্তুর সাথে কাজ করা হয় যা পুতুল বা মডেল নয়, বরং সাধারণ বস্তু বা মানুষ। বস্তুগুলি একাধিকবার ছবি তোলা হয় এবং প্রতিটি ফ্রেমের সাথে সামান্য স্থানান্তরিত হয়।
রোটোস্কোপি
এটি অন্য অঙ্কনের সরাসরি অঙ্কন নিয়ে গঠিত, যেমন অন্য অঙ্কন বা একজন প্রকৃত ব্যক্তির আঁকার ট্রেসিং। এটি মোক্যাপের একটি অগ্রদূত হিসাবে বিবেচিত হয়, অর্থাৎ, মোশন ক্যাপচার যা সিনেমা জগতে ডিজিটাল চরিত্রগুলিকে পুনরায় তৈরি করতে ব্যবহৃত হয়।
কাটআউট বা কাট আউট অ্যানিমেশন দ্বারা অ্যানিমেশন
এটি এমন একটি কৌশল যা কাটিং পরিসংখ্যান নিয়ে গঠিত, এই পরিসংখ্যানগুলি কাগজে বা ফটোগ্রাফে উপস্থাপন করা যেতে পারে। অক্ষরের বডি কাটআউটের উপর ভিত্তি করে তৈরি করা হয়েছে এবং উল্লিখিত কাটআউটগুলির প্রতিস্থাপন থেকে নড়াচড়া এবং অ্যানিমেশন তৈরি হয়।
3D অ্যানিমেশন
3D অ্যানিমেশন একটি সম্পাদক প্রোগ্রাম থেকে উদ্ভূত হয়, যা সিমুলেশন এবং অ্যানিমেশনগুলি সম্পাদন করার অনুমতি দেয়। এই দুটি ভেরিয়েন্টের মধ্যে, ভাল আলো, ক্যামেরার মুভমেন্ট এবং বিশেষ প্রভাবের সংস্পর্শে আসে।
বর্তমানে অন্যান্য কৌশলও রয়েছে যেমন: কাচের উপর চিত্রকর্ম, বালির অ্যানিমেশন, গুজার পর্দা এবং সেলুলয়েডে চিত্রকর্ম।
CSS কি?
সূত্র: রোজারিও সেশন স্টুডিও ওয়েব ডিজাইন
এখন যেহেতু আপনি অ্যানিমেশনের জগত সম্পর্কে আরও কিছু জানেন, এখন আমাদের CSS সংক্ষিপ্ত শব্দের জগতে আপনাকে পরিচয় করিয়ে দেওয়ার সময়।
ব্রিদিং সিএসএস, "ক্যাসকেডিং স্টাইল শীট" পড়ুন। এটি এমন একটি ভাষা দ্বারা গঠিত যা ডিজাইন সেক্টরে এবং ওয়েব পৃষ্ঠাগুলির উপস্থাপনায় ব্যবহৃত হয়, আরও ভাল, এগুলি একটি সিরিজ এবং কমান্ড যা একটি ওয়েব পেজ উপস্থাপনের দায়িত্বে থাকে কারণ আমরা এটিকে প্রথমবার দেখতে পাই এটি ইতিমধ্যে তৈরি করা হয়েছে। টুলের সাথে একসাথে কাজ করে এইচটিএমএল (পৃষ্ঠার মূল বিষয়বস্তু থেকে সংগঠিত)।
এর নাম এটিতে থাকা শীটের সংখ্যা দ্বারা নির্ধারিত হয় এবং তাদের মধ্যে একটি অন্যদের থেকে বৈশিষ্ট্য বা বৈশিষ্ট্য উত্তরাধিকার সূত্রে প্রাপ্ত হয়। অর্থাৎ, আপনি একটি সাধারণ ব্লগ টেমপ্লেটের সাথে কাজ করতে পারেন, কিন্তু যখন আপনি একটি সাইটের চেহারা কাস্টমাইজ করতে চান তখন আপনাকে CSS প্রয়োগ করতে হবে যেটি একসাথে একটি ভাল CMS আপনাকে আপনার সামগ্রীর নাগাল বাড়াতে সাহায্য করবে৷
সিএসএস কিসের জন্য?
CSS এর মাধ্যমে, আপনি আপনার পৃষ্ঠাটি সংগঠিত করতে পারেন, অর্থাৎ, আপনি আপনার ওয়েব পৃষ্ঠাটিকে বলতে পারেন কিভাবে আপনি সমস্ত তথ্য সনাক্ত করতে চান যাতে দর্শক একই সময়ে পরিচালনা করা সহজ এবং দরকারী। এখানে কিছু উপাদানের সমস্ত কমান্ড লিখুন যা ওয়েব পৃষ্ঠার শৈলী বা ডিজাইনের অংশ, উদাহরণস্বরূপ, ফন্ট, রং, আকার ইত্যাদি
সাধারণত, যাতে আপনি এই টুলটি সম্পর্কে আরও ভালভাবে বুঝতে পারেন, ডিজিটাল বিপণন বিশেষজ্ঞরাই এটি সম্পর্কে প্রথম বুঝতে পারেন কারণ তারাই এগুলি পরিচালনা করে।
CSS এ অ্যানিমেট করুন
ঠিক আছে, এখন আপনি অ্যানিমেশন এবং CSS এর জগত সম্পর্কে কিছুটা জানেন। এটা টিউটোরিয়াল শুরু করার সময়.
CSS অ্যানিমেশন আপনাকে একটি CSS শৈলী এবং অন্যটির মধ্যে রূপান্তরকে অ্যানিমেট করতে দেয়। এই অ্যানিমেশন দুটি উপাদান গঠিত: a শৈলী যা CSS অ্যানিমেশন এবং এর একটি সেট বর্ণনা করে ফ্রেম যা এর প্রাথমিক এবং চূড়ান্ত অবস্থার পাশাপাশি সম্ভাব্য মধ্যবর্তী পয়েন্টগুলি নির্দেশ করে।
এই অ্যানিমেশনগুলির প্রতিটির সুবিধার একটি সিরিজ রয়েছে:
- সাধারণ অ্যানিমেশনের জন্য এর ব্যবহার খুবই সহজ, আপনি জাভাস্ক্রিপ্ট সম্পর্কে জ্ঞান না থাকলেও এটি করতে পারেন।
- অ্যানিমেশন সঠিকভাবে প্রদর্শন করে, এমনকি কম-পাওয়ার কম্পিউটারেও।
- একটি ব্রাউজার দ্বারা নিয়ন্ত্রিত হচ্ছে, এটি এর কার্যকারিতা এবং কার্যকারিতা অপ্টিমাইজ করার অনুমতি দেয়, এইভাবে ফ্রিকোয়েন্সি হ্রাস করে এবং ট্যাবগুলিকে এমনভাবে কার্যকর করে যাতে সেগুলি দৃশ্যমান হয় না৷
অ্যানিমেশন সেটিংস
একটি অ্যানিমেশন শুরু করতে, প্রথমে আমাদের এটি কনফিগার করতে হবে। এটি করতে, আমরা সম্পত্তিতে যাব অ্যানিমেশন এবং এর উপ-সম্পত্তিতে। এই টুলটি আমাদের অ্যানিমেশনের ছন্দ এবং সময়কাল উভয়ই কনফিগার করার অনুমতি দেবে এবং এমনকি এর ক্রমও নয়।
উপ-বৈশিষ্ট্যগুলি হল:
অ্যানিমেশন - বিলম্ব
উপাদানটি লোড হওয়ার মুহূর্ত এবং অ্যানিমেশন সিকোয়েন্সের শুরুর মধ্যে বিলম্বের সময়।
অ্যানিমেশন - দিকনির্দেশ
অ্যানিমেশনটি সিকোয়েন্সের শেষে স্টার্ট ফ্রেমে ফিরে যাওয়া উচিত কিনা বা এটি শেষ পর্যন্ত পৌঁছালে এটি শুরু থেকে শুরু হওয়া উচিত কিনা তা নির্দেশ করে।
অ্যানিমেশন - সময়কাল
অ্যানিমেশনটি তার চক্রটি সম্পূর্ণ করতে কত সময় নেয় তা নির্দেশ করে (সময়কাল)
অ্যানিমেশন - পুনরাবৃত্তি - গণনা
এটি যতবার পুনরাবৃত্তি হয়। আমরা নির্দেশ করতে পারি অসীম অনির্দিষ্টকালের জন্য অ্যানিমেশন পুনরাবৃত্তি করতে।
অ্যানিমেশন - নাম
এটি অ্যানিমেশনের প্রতিটি ফ্রেমের বর্ণনা করে এমন নাম নির্দিষ্ট করতে ব্যবহৃত হয়।
অ্যানিমেশন - খেলা - রাষ্ট্র
আপনাকে অ্যানিমেশন ক্রম বিরাম দিতে এবং পুনরায় শুরু করতে সক্ষম হতে দেয়।
অ্যানিমেশন- টাইমিং- ফাংশন
এটি অ্যানিমেশনের ছন্দ নির্দেশ করে, অর্থাৎ অ্যানিমেশন ফ্রেমগুলি কীভাবে দেখানো হয়, এর জন্য, ত্বরণ বক্ররেখাগুলি প্রতিষ্ঠিত হয়।
অ্যানিমেশন - ফিল - মোড
অ্যানিমেশন শেষ হওয়ার পরে বৈশিষ্ট্যগুলির কী মান থাকবে তা নির্দিষ্ট করে।
ফ্রেম সহ ক্রম সেট আপ করুন
একবার আমরা সময়, নামকরণ ইত্যাদি নির্ধারণ করেছি। এটা আমাদের অ্যানিমেশন একটি চেহারা বা অনুভূতি অফার করার সময়.
এটি করার জন্য, আমরা দুটি নতুন ফ্রেম স্থাপন করব এবং নিয়মটি ব্যবহার করব @কীফ্রেম. এটির সাথে, প্রতিটি ফ্রেম বর্ণনা করে যে অ্যানিমেশন সিকোয়েন্সের সময় প্রতিটি উপাদান কীভাবে পাওয়া যায়।
নির্দেশ করতে সময় এবং ছন্দ, ফ্রেম ব্যবহার করে শতকরা হার এবং সঙ্গে সঙ্গে থেকে এবং থেকেএর জন্য ধন্যবাদ, আমরা নির্দেশ করতে পারি কখন শুরুটি 0% দিয়ে এবং শেষটি 100% দিয়ে হয়।
ফ্রেম এবং টেক্সট অ্যানিমেশন
আরও ফ্রেম যুক্ত করতে এবং সেগুলিকে পাঠ্যের সাথে অ্যানিমেট করতে, আপনাকে হেডার ফন্টের একটি বড় আকার প্রয়োগ করতে হবে যাতে হেডারটি নির্দিষ্ট সময়ের জন্য চলার সাথে সাথে বৃদ্ধি পায় এবং তারপরে তার আসল আকারে হ্রাস পায়। এর জন্য আমরা নিম্নলিখিত কোড স্থাপন করতে যাচ্ছি:
75% ফন্ট - আকার: 300%; margn - বাম: 25%; প্রস্থ: 150%;
এই কোডের সাহায্যে, আমরা ব্রাউজারকে পরামর্শ দিই যে অনুক্রমের 75%, শিরোনামের একটি বাম মার্জিন 25% এবং 200% প্রস্থ সহ 150% এর আকার রয়েছে।
অ্যানিমেশন পুনরাবৃত্তি
একটি অ্যানিমেশন পুনরাবৃত্তি করতে, নিম্নলিখিত বৈশিষ্ট্য ব্যবহার করা প্রয়োজন অ্যানিমেশন - পুনরাবৃত্তি - গণনা এবং আমাদের অবশ্যই নির্দেশ করতে হবে যে আমরা এটি কতবার পুনরাবৃত্তি করতে চাই। আমরাও ব্যবহার করতে পারি অসীম যাতে এটি সর্বদা পুনরাবৃত্তি হয়।
উপসংহার
আপনি যেমন দেখেছেন, CSS-এ আপনি অ্যানিমেটেড প্রজেক্ট তৈরি করতে পারেন এবং আমাদের দেওয়া ধাপগুলি অনুসরণ করে আপনি এটিতে প্রবেশ করতে পারেন। আপনি যদি অনুসন্ধান চালিয়ে যান এবং নিজেকে অবহিত করেন তবে আপনি আবিষ্কার করবেন যে আমাদের কাছে অনেকগুলি বিকল্প রয়েছে।
আপনি ইতিমধ্যে সাহস করেছেন?