ഇന്ന് നമുക്ക് അസാധാരണമായ ഒരു അഡോബ് ഇല്ലസ്ട്രേറ്റർ പാഠമുണ്ട്. കാരണം ഇത്തവണ ഞങ്ങൾ ഒരു സ്റ്റാറ്റിക് ചിത്രമല്ല, മറിച്ച് ഒരു യഥാർത്ഥ ആനിമേഷൻ ഉണ്ടാക്കും. സങ്കൽപ്പിക്കുക, നിങ്ങൾക്ക് അഡോബ് ഇല്ലസ്‌ട്രേറ്റർ ഉപയോഗിച്ച് കാർട്ടൂണുകൾ വരയ്ക്കാനും കഴിയും :)

ഇതിനായി നമുക്ക് ഒന്നും ആവശ്യമില്ല. ലെയറുകളുടെ ശരിയായ ഓർഗനൈസേഷനും അവസാന ജോലിയുടെ കയറ്റുമതിയും swf ഫോർമാറ്റിലേക്ക്, അവിടെ ഓരോ ലെയറും ഒരു ആനിമേഷൻ ഫ്രെയിമായി പരിവർത്തനം ചെയ്യപ്പെടുന്നു. ഇന്നത്തെ ട്യൂട്ടോറിയലിൽ ഞങ്ങൾ ഒരു റെട്രോ മൂവിയുടെ ശൈലിയിൽ ഒരു കൗണ്ട്ഡൗൺ ആനിമേഷൻ വരയ്ക്കും. ഔട്ട്പുട്ട് ഇതേ കൗണ്ട്ഡൗൺ ഉള്ള ഒരു ഫ്ലാഷ് വീഡിയോ ആയിരിക്കണം.

ഭാവിയിലെ ആനിമേഷനായി ആവശ്യമായ എല്ലാ ഘടകങ്ങളും വരയ്ക്കുക എന്നതാണ് നിങ്ങൾ ആദ്യം ചെയ്യേണ്ടത്. ഇത് ചെയ്യുന്നതിന്, ഒരു പ്രത്യേക ഡോക്യുമെന്റിൽ, ഞാൻ ഒരു ഫിലിം ഫ്രെയിമിന്റെ രണ്ട് സ്ഥാനങ്ങൾ ഉണ്ടാക്കി, റഫറൻസിനായി ഒരു സർക്കിൾ, അത് പ്രത്യേക സെക്ടറുകളായി മുറിച്ചിരിക്കുന്നു, ഒരു ടെക്സ്ചറും ലംബമായ സ്ക്രാച്ചും പുരാതന കാലത്തെ പ്രഭാവം ചേർക്കാൻ, അതുപോലെ എല്ലാ അക്കങ്ങളും ലിഖിതങ്ങൾ.

നമ്മുടെ കാർട്ടൂണിന്റെ എല്ലാ ഭാഗങ്ങളും തയ്യാറായിക്കഴിഞ്ഞാൽ, നമുക്ക് ആനിമേഷൻ സൃഷ്ടിക്കാൻ തുടങ്ങാം. സൗകര്യാർത്ഥം, ഒരു പുതിയ പ്രമാണത്തിൽ ഇത് ചെയ്യുന്നതാണ് നല്ലത്. ഈ സാഹചര്യത്തിൽ, ഞങ്ങളുടെ പാളികൾ ആനിമേഷൻ ഫ്രെയിമുകളുടെ പങ്ക് വഹിക്കും. ആദ്യ ലെയറിൽ തന്നെ നിങ്ങൾ ഒരു ഫിലിം ഫ്രെയിം പകർത്തേണ്ടതുണ്ട്. നിങ്ങളുടെ ജോലി സ്ഥലത്തിന്റെ മധ്യത്തിൽ വയ്ക്കുക.

ഇപ്പോൾ രണ്ടാമത്തെ പാളി സൃഷ്ടിച്ച് അതിലേക്ക് ഒരു ഫിലിം ഫ്രെയിം പകർത്തുക, അതിൽ അരികുകളിലുടനീളം ദ്വാരങ്ങൾ ഒരു ഓഫ്സെറ്റ് ഉപയോഗിച്ച് നിർമ്മിക്കുന്നു. അതും മധ്യഭാഗത്ത് സ്ഥാപിക്കേണ്ടതുണ്ട്.

ഈ രണ്ട് ലെയറുകളിൽ നിന്ന് നിങ്ങൾക്ക് ഇതിനകം തന്നെ ചലിക്കുന്ന ഫിലിമിന്റെ ആനിമേഷൻ ലഭിക്കും. എന്നാൽ പിന്നീട് നമുക്ക് കൂടുതൽ പാളികൾ ആവശ്യമായി വരും. അതിനാൽ ആദ്യത്തെ രണ്ട് ലെയറുകൾ തിരഞ്ഞെടുക്കുക, പാനൽ ഓപ്ഷനുകളിലേക്ക് പോയി ലെയറുകളുടെ ഒരു പകർപ്പ് ഉണ്ടാക്കുക.

സമാനമായ രീതിയിൽ, അതിന്റെ ചലനത്തെ നിർവചിക്കുന്ന ഫിലിം ഫ്രെയിമുകളുടെ 12 പാളികൾ ഞങ്ങൾ ശേഖരിക്കേണ്ടതുണ്ട്.

ഇപ്പോൾ നമുക്ക് ഒരു കൂട്ടം പാളികൾ ഉണ്ട്, അവയെല്ലാം ദൃശ്യമാണ്. മുകളിലെ പാളികൾ താഴ്ന്നവയെ തടയുന്നു എന്ന അർത്ഥത്തിൽ, അത് ജോലിക്ക് പൂർണ്ണമായും സൗകര്യപ്രദമല്ല. അതിനാൽ, ലെയറിന്റെ പേരിന്റെ ഇടതുവശത്തുള്ള ഐക്കണിൽ ക്ലിക്കുചെയ്തുകൊണ്ട് നിങ്ങൾക്ക് ചില ലെയറുകൾ ഓഫ് ചെയ്യാം. എല്ലാ ലെയറുകളും ഒരേസമയം ഓഫാക്കാനോ ഓണാക്കാനോ, കണ്ണ് ഐക്കണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ Alt കീ അമർത്തിപ്പിടിക്കുക. ലെയറുകൾ ഓണും ഓഫും ചെയ്യുന്നതിലൂടെ, ഞങ്ങളുടെ ഭാവി ആനിമേഷന്റെ ഒരു പ്രത്യേക ഫ്രെയിമിൽ എന്താണ് സ്ഥിതിചെയ്യുന്നതെന്ന് നിങ്ങൾക്ക് കൃത്യമായി കാണാൻ കഴിയും. ഇപ്പോൾ, ഫിലിമിന്റെ ചലനത്തിന് നേരിയ ഇളക്കം ചേർക്കുന്നതിന്, ഫലമായുണ്ടാകുന്ന ഫ്രെയിമുകൾ വ്യത്യസ്ത ദിശകളിലേക്ക് ചെറുതായി നീക്കേണ്ടതുണ്ട്. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ ഇപ്പോൾ പ്രവർത്തിക്കാൻ പോകുന്ന ലെയർ മാത്രം ഓണാക്കുക, തുടർന്ന് ഫ്രെയിമിനെ ഏതെങ്കിലും ദിശയിലേക്ക് രണ്ട് പിക്സലുകൾ നീക്കുക.

നിങ്ങൾ എല്ലാ ലെയറുകളിലും പോയി ഒരു ചെറിയ ഷിഫ്റ്റ് ചേർത്തുകഴിഞ്ഞാൽ, നിങ്ങൾക്ക് ചലിക്കുന്ന സർക്കിളിന്റെ ആനിമേഷൻ സൃഷ്ടിക്കാൻ തുടങ്ങാം. ഇത് ചെയ്യുന്നതിന്, കാർട്ടൂൺ ഭാഗങ്ങൾ ഉപയോഗിച്ച് പ്രമാണത്തിൽ നിന്ന് സെക്ടറുകൾ അടങ്ങുന്ന സർക്കിൾ പകർത്തി ഫിലിം ഫ്രെയിമിന്റെ മുകളിലുള്ള ആദ്യ പാളിയിൽ സ്ഥാപിക്കുക.

നിങ്ങൾ സർക്കിൾ തിരഞ്ഞെടുത്തത് മാറ്റുകയാണെങ്കിൽ, അത് ഒറ്റ മുഴുവനായി കാണപ്പെടും. ഇതാണ് നമുക്ക് വേണ്ടത്.

എന്നാൽ ഇത് വ്യക്തിഗത മേഖലകൾ ഉൾക്കൊള്ളുന്നതിനാൽ, അവയുടെ നിറം മാറ്റുന്നതിലൂടെ നിങ്ങൾക്ക് വളരെ വേഗത്തിലും എളുപ്പത്തിലും ആനിമേഷൻ സൃഷ്ടിക്കാൻ കഴിയും. ഇത് ചെയ്യുന്നതിന്, ഈ സർക്കിൾ രണ്ടാമത്തെ ലെയറിലേക്ക് പകർത്തി ആദ്യ സെക്ടർ ഭാരം കുറഞ്ഞതാക്കുക. ഞങ്ങളുടെ ഫിലിം നീങ്ങുമ്പോൾ കുലുങ്ങുന്നുവെന്ന് നിങ്ങൾ ഓർക്കുന്നു, അതിനാൽ ഫ്രെയിമിന്റെ മധ്യഭാഗത്ത് കൃത്യമായി സർക്കിൾ സ്ഥാപിക്കേണ്ട ആവശ്യമില്ല. ഇത് കണ്ണുകൊണ്ട് സ്ഥാപിക്കുക.

സമാനമായ രീതിയിൽ, നിങ്ങൾ ഓരോ അടുത്ത ലെയറിലേക്കും സർക്കിൾ പകർത്തേണ്ടതുണ്ട്, അതേസമയം മുൻ സമയത്തേക്കാൾ ഇളം നിറത്തിൽ ഒരു സെക്ടർ കൂടുതൽ പെയിന്റ് ചെയ്യുന്നു. ഈ 12 ലെയറുകളും ചേർന്ന് ഒരു ഫില്ലിംഗ് സർക്കിളുമായി ചലിക്കുന്ന ഫിലിമിന്റെ ഒരു ആനിമേഷൻ രൂപപ്പെടുത്തുന്നു.

അടുത്തതായി നമ്മുടെ ലെയറുകളിലേക്ക് ടെക്സ്ചർ ചേർക്കേണ്ടതുണ്ട്. ആദ്യ ലെയർ ഓണാക്കി യഥാർത്ഥ ഫയലിൽ നിന്ന് സ്പെയർ പാർട്സ് ഉപയോഗിച്ച് ടെക്സ്ചർ പകർത്തുക.

തുടർന്ന് അടുത്ത ലെയറുകൾ ഓരോന്നായി ഓണാക്കി അതേ ടെക്സ്ചർ അവിടെ പകർത്തുക. ഓരോ ഫ്രെയിമിലും ഇത് വ്യത്യസ്തമായി കാണുന്നതിന്, അത് 90 ഡിഗ്രി തിരിക്കുക. നിങ്ങൾ ഊഹിച്ചതുപോലെ, എല്ലാ 12 ഫ്രെയിമുകളിലേക്കും ഞങ്ങൾ ടെക്സ്ചർ ചേർക്കേണ്ടതുണ്ട്.

നിങ്ങൾ ഇതിനകം പകർത്തുന്നതിൽ മടുത്തുവെങ്കിൽ, എനിക്ക് നിങ്ങളെ പ്രസാദിപ്പിക്കാൻ കഴിയും - വളരെ കുറച്ച് മാത്രമേ അവശേഷിക്കുന്നുള്ളൂ. ഏറ്റവും കഠിനമായ ഭാഗം അവസാനിച്ചു. ലംബമായ പോറലുകൾ ചേർക്കുക മാത്രമാണ് അവശേഷിക്കുന്നത്, അത്രമാത്രം. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ വീണ്ടും യഥാർത്ഥ സ്ക്രാച്ച് പകർത്തി നിരവധി ലെയറുകളിൽ ഒരു ഏകപക്ഷീയമായ സ്ഥലത്ത് സ്ഥാപിക്കുക. എന്റെ കാര്യത്തിൽ, പോറലുകൾ രണ്ട് പാളികളിൽ മാത്രമേ ദൃശ്യമാകൂ.

ഇപ്പോൾ ഫിലിം ആനിമേഷനുമൊത്തുള്ള പ്രധാന സൈക്കിൾ തയ്യാറായിക്കഴിഞ്ഞു, അക്കങ്ങൾ ചേർക്കുന്നത് മാത്രമാണ് അവശേഷിക്കുന്നത്. ഞങ്ങളുടെ കൗണ്ട്‌ഡൗൺ 3-ൽ നിന്ന് 1-ലേക്ക് പോകുന്നതിനാൽ Go!!! എന്ന വാക്ക് കൂടിച്ചേർന്നതിനാൽ, ഞങ്ങൾക്ക് കൂടുതൽ പാളികൾ ആവശ്യമാണ്. 12 അല്ല, 48 വരെ. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾ ഫിലിം ആനിമേഷൻ ഉപയോഗിച്ച് റെഡിമെയ്ഡ് ലെയറുകളുടെ മൂന്ന് പകർപ്പുകൾ കൂടി നിർമ്മിക്കേണ്ടതുണ്ട്.

പിന്നെ എല്ലാം ലളിതമാണ്. ആദ്യത്തെ ലെയർ ഓണാക്കി മൂന്ന് നമ്പർ അവിടെ ഇടുക.

തുടർന്ന് സർക്കിൾ ആനിമേഷൻ അവസാനിക്കുന്നത് വരെ നിങ്ങൾ ഈ ചിത്രം അടുത്ത ലെയറുകളിലേക്ക് പകർത്തേണ്ടതുണ്ട്. നിങ്ങൾ ലെയറുകളുടെ അടുത്ത പകർപ്പിൽ എത്തുമ്പോൾ, സർക്കിൾ വീണ്ടും പൂർണ്ണമായി പൂരിപ്പിക്കപ്പെടും, നിങ്ങൾ നമ്പർ രണ്ട് ഇടേണ്ടതുണ്ട്. അതുപോലെ, നമ്പർ വൺ ആവശ്യമുള്ള ലെയറുകളിലേക്ക് പകർത്തുക. Go!!! ലിഖിതത്തിനായുള്ള അവസാന ലെയറുകളിൽ നിങ്ങൾ എത്തുമ്പോൾ, ലിഖിതം ആവശ്യമുള്ള ലെയറിലേക്ക് പകർത്തുന്നതിന് മുമ്പ് സർക്കിൾ ഇല്ലാതാക്കുക.

ആനിമേഷനും അത്രമാത്രം. ഇവിടെ പ്രധാന കാര്യം ആശയക്കുഴപ്പത്തിലാകരുത്. നിങ്ങൾക്ക് ലെയറുകൾക്ക് സൗകര്യപ്രദമായ ചില പേരുകൾ നൽകാം, പക്ഷേ ഞാൻ ഒരു മടിയനായിരുന്നു :) കൂടാതെ, നിങ്ങളുടെ ജോലി പൂർത്തിയാക്കുമ്പോൾ, ഐ ഐക്കണിൽ ക്ലിക്കുചെയ്ത് എല്ലാ ലെയറുകളും വീണ്ടും ഓണാക്കുന്നത് ഉറപ്പാക്കുക.

എക്‌സ്‌പോർട്ട് ക്രമീകരണ വിൻഡോയിൽ, എക്‌സ്‌പോർട്ട് ഇതായി സജ്ജീകരിക്കുന്നത് ഉറപ്പാക്കുക: AI ലെയറുകൾ SWF ഫ്രെയിമുകളിലേക്ക്. ഈ ഓപ്ഷനാണ് ഇല്ലസ്ട്രേറ്റർ ലെയറുകൾ ആനിമേഷൻ ഫ്രെയിമുകളാക്കി മാറ്റുന്നത്. അടുത്തതായി, വിപുലമായ ബട്ടൺ ക്ലിക്ക് ചെയ്യുക.

അധിക ക്രമീകരണങ്ങൾ തുറക്കും. ഇവിടെ നിങ്ങൾ ഫ്രെയിം റേറ്റ് സജ്ജീകരിക്കേണ്ടതുണ്ട്. എനിക്ക് സെക്കൻഡിൽ 12 ഫ്രെയിമുകൾ ഉണ്ട്. ചാക്രിക ആനിമേഷന്റെ ഉത്തരവാദിത്തം ലൂപ്പിംഗ് ചെക്ക്ബോക്സാണ്. ഇതിന് നന്ദി, വീഡിയോ ഒരു സർക്കിളിൽ പ്ലേ ചെയ്യും. ഒപ്പം ലെയർ ഓർഡർ: ബോട്ടം അപ്പ് ഓപ്ഷൻ പാനലിൽ താഴെ നിന്ന് മുകളിലേക്ക് ഇല്ലസ്ട്രേറ്റർ ലെയറുകൾ പുനർനിർമ്മിക്കുന്നു. ഞങ്ങൾ ഞങ്ങളുടെ ആനിമേഷൻ നിർമ്മിച്ചത് ഇങ്ങനെയാണ്.

ഞങ്ങളുടെ ആനിമേഷൻ ഉള്ള ഒരു ഫ്ലാഷ് വീഡിയോ ആണ് ഔട്ട്പുട്ട്.

അഡോബ് ഇല്ലസ്‌ട്രേറ്ററിൽ ലളിതമായ ആനിമേഷൻ നിർമ്മിക്കുന്നത് ഒറ്റനോട്ടത്തിൽ തോന്നുന്നത്ര ബുദ്ധിമുട്ടുള്ള കാര്യമല്ലെന്ന് ഇപ്പോൾ നിങ്ങൾ കാണുന്നു.

എന്നാൽ ദൈർഘ്യമേറിയ വീഡിയോകളോ സംവേദനാത്മക ആപ്ലിക്കേഷനുകളോ സൃഷ്ടിക്കുന്നതിന്, അഡോബ് ഫ്ലാഷ് അല്ലെങ്കിൽ മറ്റ് ഫ്ലാഷ് എഡിറ്ററുകൾ ഉപയോഗിക്കുന്നതാണ് നല്ലത്. ഉദാഹരണത്തിന്, ഞാൻ എന്റെ ജോലിയിൽ നിന്ന് കുഴിച്ചെടുത്ത ഒരു പഴയ മാക്രോമീഡിയ ഫ്ലാഷിൽ ഈ പൂച്ചയെ ഉണ്ടാക്കി.

കൂടാതെ, അടുത്തിടെ HTML5, CSS3 എന്നിവ ആനിമേഷൻ സൃഷ്ടിക്കാൻ കൂടുതലായി ഉപയോഗിക്കുന്നു. ഈ കോഡിനെ ആധുനിക ബ്രൗസറുകൾ പിന്തുണയ്ക്കുന്നു, കൂടാതെ ഒരു ഫ്ലാഷ് പ്ലേയറിന്റെ ഉപയോഗം ആവശ്യമില്ല.

പ്രത്യേകിച്ച് ബ്ലോഗിനായി റോമൻ അല്ലെങ്കിൽ ഡകാസ്കാസ്

ഞങ്ങളുടെ വാർത്താക്കുറിപ്പ് സബ്‌സ്‌ക്രൈബുചെയ്യുക, അതിനാൽ നിങ്ങൾക്ക് പുതിയതൊന്നും നഷ്‌ടമാകില്ല:

വെബ് ഗ്രാഫിക്സ് ഒപ്റ്റിമൈസേഷൻ

ഗ്രാഫിക് വിവരങ്ങൾ ടെക്സ്റ്റ് വിവരങ്ങളേക്കാൾ വളരെ സാവധാനത്തിൽ കൈമാറ്റം ചെയ്യപ്പെടുന്നു, കൂടാതെ ചിത്രങ്ങളുടെ ലോഡിംഗ് സമയം അവയുടെ ഗ്രാഫിക് ഫയലുകളുടെ വലുപ്പത്തിന് ആനുപാതികമാണ്. അതിനാൽ, വെബ് പേജുകൾ വേഗത്തിൽ ലോഡുചെയ്യുന്നതിന് അവയിൽ ഉൾച്ചേർത്ത ഗ്രാഫിക് ഇമേജുകളുടെ ഒരു ചെറിയ വലുപ്പം ആവശ്യമാണ്, അത് അവയുടെ ഒപ്റ്റിമൈസേഷനിലൂടെ നേടുന്നു. ഇമേജ് ഒപ്റ്റിമൈസേഷൻ അതിന്റെ പരിവർത്തനമായി മനസ്സിലാക്കപ്പെടുന്നു, ഈ സാഹചര്യത്തിൽ ആവശ്യമായ ഇമേജ് ഗുണനിലവാരം നിലനിർത്തുമ്പോൾ ഏറ്റവും കുറഞ്ഞ ഫയൽ വലുപ്പം ഉറപ്പാക്കുന്നു, ഇത് പ്രാഥമികമായി ഗ്രാഫിക് ചിത്രങ്ങളിലെ നിറങ്ങളുടെ എണ്ണം കുറയ്ക്കുന്നതിലൂടെയും കംപ്രസ് ചെയ്തതും പ്രത്യേക ഫയൽ ഫോർമാറ്റുകൾ ഉപയോഗിച്ചും വ്യക്തിഗത കംപ്രഷൻ പാരാമീറ്ററുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിലൂടെയും നേടിയെടുക്കുന്നു. ചിത്ര ശകലങ്ങൾ.

വൈവിധ്യമാർന്ന പ്രിവ്യൂ രീതികൾ ഉപയോഗിച്ച് ഒപ്റ്റിമൈസേഷൻ പ്രക്രിയ വേഗത്തിലും കാര്യക്ഷമവുമാക്കുന്ന ബിൽറ്റ്-ഇൻ ഇമേജ് ഒപ്റ്റിമൈസേഷൻ ടൂളുകൾ ഇല്ലസ്ട്രേറ്ററിനുണ്ട്. ഒപ്റ്റിമൈസ് ചെയ്ത ചിത്രം തത്സമയം എങ്ങനെയായിരിക്കുമെന്നതിനെക്കുറിച്ചുള്ള കൃത്യമായ ആശയം പ്രിവ്യൂ നൽകുന്നു, ഇത് ഒപ്റ്റിമൈസേഷൻ ഫലം വിലയിരുത്തുന്നതിനും ശരിയായ ക്രമീകരണങ്ങൾ വിജയകരമായി തിരഞ്ഞെടുക്കുന്നതിനും നിങ്ങളെ സഹായിക്കുന്നു. കൂടാതെ, നിങ്ങൾക്ക് ഇല്ലസ്ട്രേറ്ററിൽ നേരിട്ട് സൃഷ്ടിച്ച രണ്ട് ചിത്രങ്ങളും ഒപ്റ്റിമൈസ് ചെയ്യാൻ കഴിയും, ഉദാഹരണത്തിന്, ഒരു വെബ് സൈറ്റിൽ സ്ഥാപിക്കേണ്ട ഫോട്ടോഗ്രാഫുകൾ.

ഫയൽ മെനുവിൽ നിന്നുള്ള അതേ പേരിലുള്ള കമാൻഡ് ഉപയോഗിച്ച് വിളിക്കപ്പെടുന്ന വെബ് വിൻഡോയിൽ ഒപ്റ്റിമൈസേഷൻ പാരാമീറ്ററുകൾ സജ്ജീകരിച്ചിരിക്കുന്നു. നാല് പ്രിവ്യൂ മോഡുകളിൽ ഒന്ന് ഉപയോഗിക്കാൻ പ്രോഗ്രാം നിങ്ങളെ വാഗ്ദാനം ചെയ്യുന്നു, എന്നാൽ ഒപ്റ്റിമൈസേഷന്റെ ഗുണനിലവാരം വിലയിരുത്തുന്നതിന് ഏറ്റവും അനുയോജ്യമായത് രണ്ടാണ്:

• 2-അപ്പ് (രണ്ട് ഓപ്ഷനുകൾ) നിർദ്ദിഷ്ട ക്രമീകരണങ്ങൾക്ക് അനുസൃതമായി യഥാർത്ഥവും ഒപ്റ്റിമൈസ് ചെയ്തതുമായ ചിത്രം ഒരേസമയം കാണൽ (ചിത്രം 1);
• 4-അപ്പ് (നാല് ഓപ്ഷനുകൾ) ഈ മോഡിൽ, ഒറിജിനൽ ഇമേജും ഒപ്റ്റിമൈസ് ചെയ്ത ഒന്നിന്റെ മൂന്ന് പതിപ്പുകളും പ്രദർശിപ്പിക്കുന്നതിന് വ്യൂപോർട്ട് നാല് വിൻഡോകളായി (ചിത്രം 2) തിരിച്ചിരിക്കുന്നു: സെറ്റ് ഒപ്റ്റിമൈസേഷൻ മൂല്യങ്ങളെ അടിസ്ഥാനമാക്കിയാണ് ആദ്യ പതിപ്പ് സൃഷ്ടിക്കുന്നത്, കൂടാതെ മറ്റ് രണ്ടെണ്ണം നിലവിലെ ഒപ്റ്റിമൈസേഷൻ ക്രമീകരണങ്ങളുടെ വ്യതിയാനങ്ങളാണ്.

വ്യത്യസ്ത ഒപ്റ്റിമൈസേഷൻ ക്രമീകരണങ്ങളും അവയുടെ തുടർന്നുള്ള വിഷ്വൽ താരതമ്യവും ഉപയോഗിച്ച് ചിത്രങ്ങൾ സംരക്ഷിക്കേണ്ടതിന്റെ ആവശ്യകത ഇല്ലാതാക്കുന്നതിനാൽ, മികച്ച ഒപ്റ്റിമൈസേഷൻ ഓപ്ഷൻ കണ്ടെത്തുന്നതിനുള്ള സമയം ഗണ്യമായി ലാഭിക്കാൻ രണ്ട് മോഡുകളും നിങ്ങളെ അനുവദിക്കുന്നു. കൂടാതെ, ഒപ്റ്റിമൈസ് ചെയ്ത ചിത്രത്തിന്റെ ഗുണനിലവാരം മാത്രമല്ല, വ്യത്യസ്ത കണക്ഷൻ ഓപ്ഷനുകൾക്ക് കീഴിൽ അതിന്റെ വലുപ്പവും ലോഡിംഗ് സമയവും വിലയിരുത്താൻ കഴിയും. താരതമ്യത്തിനായി, ഏറ്റവും സൗകര്യപ്രദമായ മോഡ് 4-അപ്പ് (നാല് ഓപ്ഷനുകൾ) ആണ്, ഇത് ചിത്രത്തിന്റെ ഗുണനിലവാരത്തിലും അതിന്റെ വലുപ്പത്തിലും കംപ്രഷൻ അല്ലെങ്കിൽ പാലറ്റ് കുറയ്ക്കലിന്റെ പ്രഭാവം ദൃശ്യപരമായി വിലയിരുത്താനും ആത്യന്തികമായി മികച്ച ഒപ്റ്റിമൈസേഷൻ പാരാമീറ്ററുകൾ നിർണ്ണയിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.

GIF, JPG, PNG-8, PNG-24 ഫോർമാറ്റുകളിൽ മാത്രമല്ല, SWF, SVG എന്നിവയിലും വെബ് ഗ്രാഫിക്സ് ഒപ്റ്റിമൈസ് ചെയ്യാൻ ഇല്ലസ്ട്രേറ്റർ നിങ്ങളെ അനുവദിക്കുന്നു. കുറച്ച് നിറങ്ങളുള്ള സൂചികയിലുള്ള ചിത്രങ്ങൾ GIF ഫോർമാറ്റിൽ സംരക്ഷിക്കപ്പെടുന്നു. പൂർണ്ണ വർണ്ണവും ഗ്രേസ്‌കെയിൽ ചിത്രങ്ങളും ഫോട്ടോഗ്രാഫുകളും ഗ്രേഡിയന്റ് ഫില്ലുകൾ പോലെയുള്ള നിറങ്ങളാൽ സമ്പന്നമായ ഗ്രാഫിക്സും സംരക്ഷിക്കാൻ JPG ഫോർമാറ്റ് ഉപയോഗിക്കുന്നു. സുതാര്യമായ ഏരിയകളുള്ള പൂർണ്ണ വർണ്ണ ചിത്രങ്ങൾക്കായി, PNG ഫോർമാറ്റ് ഉപയോഗിക്കുന്നു, ഇത് സൂചികയിലാക്കിയതും പൂർണ്ണ വർണ്ണത്തിലുള്ളതുമായ ചിത്രങ്ങൾ സംരക്ഷിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, അതേസമയം PNG-8 ഫോർമാറ്റിൽ ഒപ്റ്റിമൈസ് ചെയ്ത ചിത്രത്തിന്റെ പരമാവധി വർണ്ണങ്ങളുടെ എണ്ണം 256 ആണ്. PNG-24 ഫോർമാറ്റിൽ ചിത്രത്തിന് ദശലക്ഷക്കണക്കിന് നിറങ്ങൾ ഉണ്ടാകാം, അതിനാൽ ഇത് JPEG ഫോർമാറ്റിന് സമാനമാണ്. PNG-24-ഉം JPEG-ഉം തമ്മിലുള്ള വ്യത്യാസം, PNG-24 ഫോർമാറ്റിലുള്ള ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യാൻ ഉപയോഗിക്കുന്ന കംപ്രഷൻ രീതി ഗുണനിലവാരം നഷ്ടപ്പെടുന്നതിലേക്ക് നയിക്കുന്നില്ല, എന്നാൽ അതിന്റെ ഫലമായി ഫയൽ വലുപ്പം വർദ്ധിക്കുന്നു. എസ്‌വി‌ജി, എസ്‌ഡബ്ല്യുഎഫ് ഫോർമാറ്റുകൾ ഗ്രാഫിക്‌സ്, ടെക്‌സ്‌റ്റ്, ഇന്ററാക്‌റ്റീവ് ഘടകങ്ങൾ എന്നിവ സംയോജിപ്പിച്ച് ഒപ്റ്റിമൈസ് ചെയ്യാനും കഴിയും.

ഇമേജ് ഒപ്റ്റിമൈസേഷന്റെ ഒരു പ്രത്യേക ഉദാഹരണം നോക്കാം. ഒരു വെബ്സൈറ്റ് ലോഗോ ഇല്ലസ്ട്രേറ്ററിൽ (ചിത്രം 3) വികസിപ്പിച്ചെടുത്തു, തുടക്കത്തിൽ AI ഫോർമാറ്റിൽ സംരക്ഷിച്ചു. വെബിനായി ഇത് ഉടനടി ഒപ്റ്റിമൈസ് ചെയ്യാനുള്ള ശ്രമം നല്ലതിലേക്ക് നയിക്കില്ല, കാരണം ഈ സാഹചര്യത്തിൽ ചിത്രം യാന്ത്രികമായി ക്രോപ്പ് ചെയ്യപ്പെടും, ഇത് രൂപഭേദം വരുത്തിയതിന്റെ ഫലമായി ലഭിച്ച ലിഖിതത്തിന്റെ യഥാർത്ഥ സ്ഥാനം കണക്കിലെടുക്കില്ല (ചിത്രം 4 ഒപ്പം 5).

അതിനാൽ, ഫയൽ=>എക്‌സ്‌പോർട്ട് (ഫയൽ=>കയറ്റുമതി) എന്ന കമാൻഡ് ഉപയോഗിച്ച് ലോഗോ പിഎസ്‌ഡി ഫോർമാറ്റിലേക്ക് എക്‌സ്‌പോർട്ട് ചെയ്യാൻ ശ്രമിക്കാം, സൃഷ്‌ടിച്ച ചിത്രത്തിന്റെ വലുപ്പം 143 കെബി ആയിരിക്കും. തത്ഫലമായുണ്ടാകുന്ന PSD ഫയൽ തുറന്ന് ഫയൽ=>Save for Web കമാൻഡ് ഉപയോഗിക്കുക. ചിത്രത്തിൽ ഉൾപ്പെട്ടിരിക്കുന്ന നിറങ്ങളുടെ പരിമിതമായ എണ്ണം കണക്കിലെടുക്കുമ്പോൾ, ഈ സാഹചര്യത്തിൽ GIF ഫോർമാറ്റ് ഒപ്റ്റിമൽ ആണ്, അതിന്റെ പ്രത്യേക ക്രമീകരണങ്ങൾ തീരുമാനിക്കേണ്ടതുണ്ട്. ക്രമീകരണങ്ങളിൽ പരീക്ഷണം നടത്തുന്നതിലൂടെ, പ്രോഗ്രാമിന്റെ ഡിഫോൾട്ട് കംപ്രഷൻ അൽഗോരിതം സെലക്ടീവാണ് മികച്ച നിലവാരം ഉൽപ്പാദിപ്പിക്കുന്നതെന്ന് നിങ്ങൾക്ക് ഉറപ്പാക്കാൻ കഴിയും. സ്മൂത്തിംഗിനെ സംബന്ധിച്ചിടത്തോളം, ഗ്രേഡിയന്റ് ഫില്ലിന്റെ സാന്നിധ്യം കണക്കിലെടുക്കുമ്പോൾ, നോയ്സ് ജനറേഷൻ നോയിസ് (ചിത്രം 6) ഉള്ള ഒരു അൽഗോരിതം തിരഞ്ഞെടുക്കുന്നതാണ് നല്ലത്. തത്ഫലമായുണ്ടാകുന്ന ഒപ്റ്റിമൈസേഷൻ ഫയലിന്റെ വലുപ്പം 6.729 KB ആയിരിക്കും (ചിത്രം 7), പശ്ചാത്തലത്തിന്റെ സുതാര്യത സംരക്ഷിക്കപ്പെടും, HTML ഫയലിനൊപ്പം (ചിത്രം 8) ചിത്രം GIF ഫോർമാറ്റിൽ സംരക്ഷിച്ചുകൊണ്ട് സ്ഥിരീകരിക്കാൻ എളുപ്പമാണ്. തൽഫലമായി, ഈ ഉദാഹരണത്തിൽ, emblem.html, emblem.gif എന്നീ ഫയലുകൾ Primer1 ഫോൾഡറിൽ ലഭിച്ചു.

ബട്ടണുകൾ

ഗ്രാഫിക്കൽ നിയന്ത്രണ ബട്ടണുകളാണ് ഏതെങ്കിലും വെബ് പേജുകളുടെ രൂപകൽപ്പനയുടെ ഒഴിച്ചുകൂടാനാവാത്ത നിർദ്ദിഷ്ട ഘടകം. അവയില്ലാതെ ഒരു പേജ് സങ്കൽപ്പിക്കുക അസാധ്യമാണ്. ബട്ടൺ ഡ്രോയിംഗ് ഇന്ന് ഒരു പ്രത്യേക വിഭാഗമായി മാറിയിരിക്കുന്നു, കൂടാതെ ഏറ്റവും സങ്കീർണ്ണമായ ഓപ്ഷനുകൾ സൃഷ്ടിക്കാൻ ഇല്ലസ്ട്രേറ്റർ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, മെഷ് ഒബ്‌ജക്‌റ്റുകളായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്ന ബട്ടണുകൾ കൂടാതെ/അല്ലെങ്കിൽ ഓവർലേ മാസ്‌ക്കുകൾ ഉപയോഗിച്ചുള്ള ബട്ടണുകൾ പതിവുള്ളതിനേക്കാൾ വളരെ ആകർഷകമായി കാണപ്പെടുന്നു.

ഇല്ലസ്ട്രേറ്ററിൽ ഒരു വൃത്താകൃതിയിലുള്ള, കോൺവെക്സ് ബട്ടൺ സൃഷ്ടിക്കുന്നതിനുള്ള ഓപ്ഷൻ പരിഗണിക്കുക. അനിയന്ത്രിതമായ നിറം (ചിത്രം 9) നിറച്ച ഒരു സർക്കിളിന്റെ രൂപത്തിൽ ഒരു വെക്റ്റർ ഒബ്‌ജക്റ്റ് വരച്ച് ഒബ്‌ജക്റ്റ് => ഗ്രേഡിയന്റ് മെഷ് സൃഷ്‌ടിക്കുക (ഒബ്‌ജക്റ്റ് => ഗ്രേഡിയന്റ് മെഷ് സൃഷ്‌ടിക്കുക) എന്ന കമാൻഡ് ഉപയോഗിച്ച് അതിനെ ഒരു മെഷാക്കി മാറ്റുക, നാല് വരികളും നാലെണ്ണവും വ്യക്തമാക്കുന്നു. നിരകൾ, കൂടാതെ രൂപഭാവ ലിസ്റ്റിൽ, 60 ന് തുല്യമായ ഹൈലൈറ്റ് കേന്ദ്രത്തിലേക്ക് ഓപ്‌ഷൻ തിരഞ്ഞെടുക്കുന്നു (ചിത്രം 10). ഡയറക്ട് സെലക്ഷൻ ടൂൾ തിരഞ്ഞെടുത്ത് ഒബ്ജക്റ്റിന്റെ മുകളിൽ ഇടത് കോണിൽ ക്ലിക്ക് ചെയ്യുക, അവിടെ സ്ഥിതിചെയ്യുന്ന ആങ്കർ പോയിന്റുകൾ തിരഞ്ഞെടുക്കുക (ചിത്രം 11). Swatches പാലറ്റിൽ (ചിത്രം 12) തിരഞ്ഞെടുത്ത് അനുബന്ധ സെല്ലിന്റെ നിറം വെള്ളയിലേക്ക് മാറ്റുക.

എലിപ്‌സ് ടൂൾ എടുത്ത്, മുമ്പ് സൃഷ്‌ടിച്ച സർക്കിളിന്റെ മധ്യഭാഗത്ത് മൗസ് മാർക്കർ സ്ഥാപിക്കുക, Alt, Shift കീകൾ അമർത്തിപ്പിടിച്ച്, പഴയതിന് മുകളിൽ പുതിയ സർക്കിൾ നീട്ടുക, അങ്ങനെ അത് പഴയതിനേക്കാൾ 1-2 പിക്‌സൽ വലുതായിരിക്കും. വശങ്ങൾ. 1-2 പിക്സൽ വീതിയുള്ള ഒരു കറുത്ത ബോർഡർ (സ്ട്രോക്ക്) നൽകുകയും ചുവപ്പ് മുതൽ വെള്ള വരെയുള്ള ദിശയിൽ ഒരു റേഡിയൽ ഗ്രേഡിയന്റ് നിറയ്ക്കുകയും ചെയ്യുക (ചിത്രം 13). സൃഷ്ടിച്ച വെക്റ്റർ ഒബ്‌ജക്റ്റ് 1-2 പിക്സലുകൾ വലത്തോട്ടും താഴോട്ടും വലിച്ചിടുക, തുടർന്ന്, തിരഞ്ഞെടുക്കൽ നീക്കം ചെയ്യാതെ, അതിൽ വലത്-ക്ലിക്കുചെയ്ത് സന്ദർഭ മെനുവിൽ നിന്ന് ക്രമീകരിക്കുക=>പിന്നിലേക്ക് അയയ്ക്കുക തിരഞ്ഞെടുക്കുക. ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്ന ബട്ടണിനുള്ള ഫലം ശൂന്യമായിരിക്കും. 14.

ചട്ടം പോലെ, ഏതെങ്കിലും വെബ് പേജിൽ ഒരേ തരത്തിലുള്ള നിരവധി ബട്ടണുകൾ ഉണ്ട്, വ്യത്യസ്തമാണ്, ഉദാഹരണത്തിന്, അവയിൽ വരച്ച അമ്പടയാളങ്ങളുടെ ദിശയിൽ മാത്രം, സൈറ്റിന് ചുറ്റുമുള്ള ചലനത്തിന്റെ ദിശയെ സൂചിപ്പിക്കുന്നു. രണ്ട് ബട്ടണുകൾ ഉള്ള ഏറ്റവും ലളിതമായ കേസ് നമുക്ക് പരിഗണിക്കാം, അതിലൊന്ന്, താഴേക്കുള്ള അമ്പടയാളം ഉപയോഗിച്ച്, അടുത്ത പേജിലേക്ക് നീങ്ങുന്നതിനെ അർത്ഥമാക്കും, മുകളിലുള്ള അമ്പടയാളമുള്ള ബട്ടൺ മുമ്പത്തേതിലേക്ക് നീങ്ങുന്നു എന്നാണ് അർത്ഥമാക്കുന്നത്. ഒരു അമ്പടയാള ടെംപ്ലേറ്റ് എന്ന നിലയിൽ, പോളിഗോൺ ടൂൾ ഉപയോഗിച്ച് വരച്ച ഒരു സാധാരണ ത്രികോണം എടുക്കാം, കറുപ്പ് ചായം പൂശി, കൂടുതൽ ഫലത്തിനായി, ഒരു മെഷ് ഒബ്‌ജക്റ്റായി രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു. ബട്ടണിലേക്ക് അമ്പടയാളം നീക്കുക, അലൈൻ പാലറ്റിലെ അനുബന്ധ ബട്ടണുകൾ ഉപയോഗിച്ച് പരസ്പരം ബന്ധപ്പെട്ട എല്ലാ വസ്തുക്കളുടെയും സ്ഥാനം ക്രമീകരിക്കുക. തത്ഫലമായുണ്ടാകുന്ന ബട്ടണുകളിൽ ആദ്യത്തേത് ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 15. ഡ്യൂപ്ലിക്കേറ്റ് ലെയർ ലെയറുകൾ എന്ന കമാൻഡ് തിരഞ്ഞെടുത്ത് ബട്ടൺ ഉപയോഗിച്ച് ലെയറിന്റെ ഒരു പകർപ്പ് ഉണ്ടാക്കാം, അതിന്റെ ഫലമായി നമുക്ക് രണ്ട് സമാന ലെയറുകൾ ലഭിക്കും. തുടർന്ന് ലെയറിന്റെ പകർപ്പിലെ അമ്പടയാളം തിരഞ്ഞെടുത്ത് സന്ദർഭ മെനുവിൽ നിന്ന് Transform=>Rotate Transformation=>Rotate എന്ന കമാൻഡ് തിരഞ്ഞെടുത്ത് 180° തിരിക്കുക. ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്ന അതേ ബട്ടൺ നമുക്ക് ലഭിക്കും. 16. ഒരു പ്രോജക്റ്റിനായി ഒരേ തരത്തിലുള്ള എല്ലാ ബട്ടണുകളും ഒരു ഫയലിൽ വ്യത്യസ്ത ലെയറുകളിൽ സംഭരിക്കുന്നത് കൂടുതൽ സൗകര്യപ്രദമാണെന്ന് ദയവായി ശ്രദ്ധിക്കുക, ഇത് ഈ കേസിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്നു.

ഇപ്പോൾ നിങ്ങൾ ഓരോ ബട്ടണിന്റെയും ഒപ്റ്റിമൈസ് ചെയ്ത പതിപ്പുകൾ സംരക്ഷിക്കേണ്ടതുണ്ട്. ആദ്യം താഴെയുള്ള പാളി അദൃശ്യമാക്കുക, ഈ സാഹചര്യത്തിൽ മുകളിലെ പാളിയിലെ ബട്ടൺ സംരക്ഷിക്കപ്പെടും. File=>Save for Web കമാൻഡ് തിരഞ്ഞെടുക്കുക, ബട്ടൺ ഒപ്റ്റിമൈസേഷൻ പാരാമീറ്ററുകൾ കോൺഫിഗർ ചെയ്യുക, ഉദാഹരണത്തിന്, ചിത്രം. 17, സേവ് ബട്ടണിൽ ക്ലിക്ക് ചെയ്ത് ഒരു ഫയലിന്റെ പേര് നൽകുക. ആത്യന്തികമായി സംരക്ഷിച്ച ബട്ടൺ ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 18. ഇപ്പോൾ താഴത്തെ ലെയറിലേക്ക് ദൃശ്യപരത തിരികെ നൽകുക, മുകളിലെ പാളി അദൃശ്യമാക്കുക, രണ്ടാമത്തെ ബട്ടണും അതേ രീതിയിൽ സംരക്ഷിക്കുക, അതിന് മറ്റൊരു പേര് നൽകുക. ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 19.

ഇപ്പോൾ അവശേഷിക്കുന്നത് വെബ് പേജിൽ ബട്ടണുകൾ സ്വീകാര്യമാണെന്ന് ഉറപ്പുവരുത്തുകയും അവയെ ഒരു ഇഷ്‌ടാനുസൃത പേജിൽ സ്ഥാപിക്കുകയും ചെയ്യുക എന്നതാണ് (ചിത്രം 20). തൽഫലമായി, ഈ ഉദാഹരണത്തിൽ, ചിത്രങ്ങളുടെ ഫോൾഡറിൽ (Primer2 ഫോൾഡർ) Primer2.html എന്ന ഫയലും രണ്ട് ഗ്രാഫിക് ചിത്രങ്ങളും ലഭിച്ചു.

വേണമെങ്കിൽ, ഒപ്റ്റിമൈസേഷൻ പ്രക്രിയയിൽ ഒരു ബട്ടൺ ഒരു സ്ലൈസാക്കി മാറ്റുന്നത് എളുപ്പമാണ്. ഈ സാഹചര്യത്തിൽ, File=>Save for Web (File=>Save for Web) എന്ന കമാൻഡ് തിരഞ്ഞെടുത്ത് ഒപ്റ്റിമൈസേഷൻ പാരാമീറ്ററുകൾ സജ്ജമാക്കിയ ശേഷം, ടൂൾ പാലറ്റിൽ നിന്ന് Slice Select ടൂൾ തിരഞ്ഞെടുത്ത് ചിത്രത്തിൽ ഇരട്ട-ക്ലിക്കുചെയ്യണം. സീരിയൽ നമ്പർ 1 (ചിത്രം 21) ഉള്ള ഒരു സ്ലൈസായി യാന്ത്രികമായി മാറുക. വീണ്ടും ഇരട്ട-ക്ലിക്കുചെയ്യുന്നത് സ്ലൈസ് ഓപ്ഷനുകൾ വിൻഡോ തുറക്കും, അതിൽ നിങ്ങൾ ഒരു ലിങ്ക് വ്യക്തമാക്കുകയും സ്ലൈസിന്റെ പേര് ഓപ്ഷണലായി മാറ്റുകയും വേണം (ചിത്രം 22), തുടർന്ന് ഒപ്റ്റിമൈസ് ചെയ്ത ചിത്രം സംരക്ഷിക്കുക. ഈ കേസിലെ ഫലം Primer3.html (ചിത്രം 23), Primer3.gif (Primer3 ഫോൾഡർ) എന്നീ ഫയലുകളായിരിക്കും.

സംവേദനാത്മക ഘടകങ്ങൾ

ഒരു പേജിന് ജീവൻ നൽകാനുള്ള ഒരു മാർഗ്ഗം, മൗസിന്റെ പെരുമാറ്റത്തെ ആശ്രയിച്ച് അവയുടെ രൂപഭാവം (അല്ലെങ്കിൽ അവസ്ഥ) മാറ്റുന്ന ഡിസൈൻ ഘടകങ്ങൾ അവതരിപ്പിക്കുക എന്നതാണ് അല്ലെങ്കിൽ, മറ്റ് ചില സാഹചര്യങ്ങൾ ഉണ്ടാകുമ്പോൾ, സ്കെയിലിംഗ്, സ്ക്രോളിംഗ്, ലോഡിംഗ്, പിശകുകൾ മുതലായവ.

അത്തരം ഘടകങ്ങളിൽ, ഏറ്റവും പ്രശസ്തമായത് റോൾഓവറുകൾ (ഇംഗ്ലീഷ് റോൾ ഓവർ റോൾ ഓവർ, ടേൺ ഓവർ എന്നിവയിൽ നിന്ന്) മൗസിന്റെ സ്വാധീനത്തിൽ രൂപം മാറ്റുന്ന ഘടകങ്ങളാണ്. സാധാരണ റോൾഓവറുകളുടെ ഉദാഹരണങ്ങൾ ആനിമേറ്റഡ് ബട്ടണുകളാണ്. മറ്റ് വെബ്സൈറ്റ് നാവിഗേഷൻ ഘടകങ്ങൾ സൃഷ്ടിക്കുമ്പോൾ പലപ്പോഴും റോൾഓവറുകൾ ഉപയോഗിക്കാറുണ്ട്. വാസ്തവത്തിൽ, ഏതൊരു റോൾഓവറും ഒന്നല്ല, നിരവധി (നാല് വരെ) ചിത്രങ്ങളാണ്, അവ ഓരോന്നും ഒരു നിർദ്ദിഷ്ട ഇവന്റുമായി യോജിക്കുന്നു. പ്രധാന ഇവന്റുകൾ ഇനിപ്പറയുന്നവയായി കണക്കാക്കപ്പെടുന്നു: സാധാരണ അവസ്ഥ, മൗസ് കഴ്‌സർ ഒരു മൂലകത്തിന് മുകളിൽ ഹോവർ ചെയ്യുക, കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ ഇടത് മൌസ് ബട്ടൺ താഴേക്ക് അമർത്തുക. സൈദ്ധാന്തികമായി, ക്ലിക്ക് ചെയ്‌തതിന് ശേഷം ഇടത് മൌസ് ബട്ടൺ ക്ലിക്ക് ചെയ്യുക, ബട്ടൺ റിലീസ് ചെയ്‌തതിന് ശേഷം മുകളിലേക്ക്, സജീവ സോണിൽ നിന്ന് പുറത്തുപോകുമ്പോൾ ഔട്ട് തുടങ്ങിയ ഇവന്റുകൾ ഉൾപ്പെടാം. എന്നിരുന്നാലും, പ്രായോഗികമായി, അവ പലപ്പോഴും ആദ്യത്തെ മൂന്നോ രണ്ടോ ഇവന്റുകൾക്കായി മാത്രം ഘടകം മാറ്റുന്നതിന് പരിമിതപ്പെടുത്തിയിരിക്കുന്നു.

ക്ലാസിക് റോൾഓവറുകൾ

ക്ലാസിക്കൽ അർത്ഥത്തിൽ, ഒരു റോൾഓവർ എന്നത് GIF ഫോർമാറ്റിലുള്ള ഗ്രാഫിക് ചിത്രങ്ങളുടെ ഒരു പരമ്പരയാണ്, അതിനനുസരിച്ചുള്ള HTML കോഡും, അതിന് നന്ദി, മൗസിന്റെ സ്വഭാവത്തെ ആശ്രയിച്ച്, ബ്രൗസർ വിൻഡോയിൽ ഒരു ചിത്രം മറ്റൊന്നിനെ മാറ്റിസ്ഥാപിക്കുന്നു.

ക്ലാസിക്കൽ അർത്ഥത്തിൽ റോൾഓവറുകൾ നേരിട്ട് സൃഷ്ടിക്കാൻ ഉദ്ദേശിച്ചുള്ളതല്ല ഇല്ലസ്ട്രേറ്റർ, എന്നാൽ അവയ്ക്ക് പ്രാരംഭ ഘടകങ്ങൾ വികസിപ്പിക്കാൻ ഇത് സഹായിക്കും. ഈ കേസിലെ ആശയം ആദ്യ സംഭവത്തിന് അനുയോജ്യമായ ഇമേജ് ഉപയോഗിച്ച് ഒരു ലെയർ സൃഷ്ടിക്കുക എന്നതാണ്. തുടർന്ന് ലെയറിന്റെ ഒരു പകർപ്പ് ഉണ്ടാക്കുക, രണ്ടാമത്തെ ഇവന്റുമായി പൊരുത്തപ്പെടുന്ന തരത്തിൽ ചിത്രം രൂപാന്തരപ്പെടുത്തുക തുടങ്ങിയവ. തത്ഫലമായുണ്ടാകുന്ന മൾട്ടിലെയർ ഇമേജ്, സംരക്ഷിച്ചിരിക്കുന്ന പാളികളുള്ള ഒരു PSD ഫയലിലേക്ക് കയറ്റുമതി ചെയ്യുന്നു, അതിന്റെ അടിസ്ഥാനത്തിൽ ഇമേജ് റെഡി പ്രോഗ്രാമിൽ ഒരു റോൾഓവർ സൃഷ്ടിക്കപ്പെടുന്നു. മറ്റ് പല കേസുകളിലുമെന്നപോലെ, ഇല്ലസ്ട്രേറ്റർ ഉപയോഗിക്കുന്നതിന്റെ പ്രയോജനം, വെക്റ്റർ ഗ്രാഫിക്‌സ് രൂപാന്തരപ്പെടുത്തുന്നതിനുള്ള സൗകര്യത്തോടൊപ്പം മറ്റ് സോഫ്‌റ്റ്‌വെയറുകളിൽ ലഭ്യമല്ലാത്ത രസകരമായ നിരവധി സവിശേഷതകളാണ്.

മൗസിന്റെ സ്വഭാവമനുസരിച്ച് നിറം മാറുന്ന ഒരു ലിഖിത രൂപത്തിൽ ഒരു റോൾഓവർ സൃഷ്ടിക്കാൻ ശ്രമിക്കാം. ഇല്ലസ്ട്രേറ്റർ തുറന്ന് കറുപ്പ് നിറച്ച വൃത്താകൃതിയിലുള്ള ദീർഘചതുരത്തിന്റെ രൂപത്തിൽ ഒരു ആകൃതി സൃഷ്ടിക്കുക (ചിത്രം 24), അതിന്റെ ഒരു പകർപ്പ് ഉണ്ടാക്കി സ്ക്രീനിന്റെ ഒരു സ്വതന്ത്ര ഭാഗത്ത് സ്ഥാപിക്കുക. ദീർഘചതുരത്തിന്റെ ആദ്യ പകർപ്പ് കേന്ദ്രത്തിൽ ഒരു ഹൈലൈറ്റ് ഉള്ള ഒരു മെഷ് ഒബ്‌ജക്‌റ്റിലേക്ക് പരിവർത്തനം ചെയ്യുക (കമാൻഡ് ഒബ്‌ജക്റ്റ്=>ഗ്രേഡിയന്റ് മെഷ് ഒബ്‌ജക്റ്റ് സൃഷ്‌ടിക്കുക=>ഗ്രേഡിയന്റ് മെഷ് സൃഷ്‌ടിക്കുക), നാല് വരികളും പത്ത് നിരകളും വ്യക്തമാക്കുന്നു (ചിത്രം 25). ദീർഘചതുരത്തിന്റെ രണ്ടാമത്തെ പകർപ്പ് സജീവമാക്കുക, ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ ഏകദേശം ഒരു ഗ്രേഡിയന്റ് ഫിൽ ആയി സജ്ജമാക്കുക. 26. മെഷ് ഒന്നിന് മുകളിൽ ഗ്രേഡിയന്റ് ഒബ്‌ജക്റ്റ് ഓവർലേ ചെയ്യുക, ഗ്രേഡിയന്റ് ഒബ്‌ജക്റ്റിന്റെ അതാര്യത ഏകദേശം 80% ആയും വലുപ്പം ഏകദേശം 1 പിക്‌സൽ ആയും കുറയ്ക്കുക, ഒടുവിൽ ഒരു ബമ്പിന്റെ പ്രഭാവം അനുകരിക്കുക. തുടർന്ന് വസ്തുക്കളുടെ മുകളിൽ ലിഖിതം അച്ചടിക്കുക. അതിന്റെ യഥാർത്ഥ രൂപത്തിൽ, അതിന് ഒരു വെളുത്ത നിറം ഉണ്ടായിരിക്കട്ടെ, അത് സാധാരണ അവസ്ഥയുമായി പൊരുത്തപ്പെടും (ചിത്രം 27), തുടർന്ന് റോൾഓവർ അവസ്ഥ മാറുമ്പോൾ, ലിഖിതത്തിന്റെ നിറം മാറും, ഉദാഹരണത്തിന്, മൗസ് മാർക്കർ ചെയ്യുമ്പോൾ പച്ച അതിന് മുകളിലൂടെ ഹോവർ ചെയ്യുന്നു (ഓവർ സ്റ്റേറ്റിന് മുകളിൽ) കൂടാതെ മൗസ് ബട്ടൺ അമർത്തുമ്പോൾ നീലയിലേക്ക് (താഴ്ന്ന നില).

ഈ ഘട്ടത്തിൽ ലെയേഴ്സ് പാലറ്റ് ശ്രദ്ധിക്കുക, അതിൽ ഒരൊറ്റ പാളി മാത്രമേയുള്ളൂ. ലെയേഴ്സ് പാലറ്റ് മെനുവിൽ നിന്നുള്ള ഡ്യൂപ്ലിക്കേറ്റ് ലെയർ കമാൻഡ് ഉപയോഗിച്ച് ഈ ലെയറിന്റെ രണ്ട് പകർപ്പുകൾ ഉണ്ടാക്കുക; പാലറ്റിൽ മൂന്ന് ലെയറുകൾ ഉണ്ടാകും (ചിത്രം 28). പിന്നെ ലെയറിന്റെ ആദ്യ പകർപ്പിൽ ലിഖിതത്തിന്റെ നിറം പച്ചയിലേക്കും രണ്ടാമത്തെ പകർപ്പിൽ നീലയിലേക്കും മാറ്റുക (ചിത്രം 29). തൽഫലമായി, റോൾഓവറിന് ആവശ്യമായ ശൂന്യത ലഭിക്കും.

സൃഷ്ടിച്ച ചിത്രം PSD ഫോർമാറ്റിലേക്ക് കയറ്റുമതി ചെയ്യുക, പാളികൾ സംരക്ഷിക്കുക, ഫയൽ=>എക്സ്പോർട്ട് കമാൻഡ് ഉപയോഗിച്ച് RGB കളർ മോഡൽ തിരഞ്ഞെടുക്കുക (ചിത്രം 30). ഇമേജ് റെഡി പ്രോഗ്രാമിൽ സൃഷ്ടിച്ച PSD ഫയൽ തുറക്കുക (ചിത്രം 31 ഉം 32 ഉം). ആനിമേഷൻ പാലറ്റ് മെനുവിൽ നിന്ന് ലെയറുകളിൽ നിന്ന് ഫ്രെയിം ഉണ്ടാക്കുക എന്ന കമാൻഡ് തിരഞ്ഞെടുത്ത് ലെയറുകളെ അടിസ്ഥാനമാക്കി ഫ്രെയിമുകൾ സൃഷ്ടിക്കുക. ആനിമേഷൻ വിൻഡോ ചിത്രം പോലെ കാണപ്പെടും. 33. ഈ സാഹചര്യത്തിൽ, റോൾഓവർ പാലറ്റിൽ ഒരു സാധാരണ അവസ്ഥ ആദ്യം സൃഷ്ടിക്കപ്പെടും.

തുടർന്ന്, ആനിമേഷൻ വിൻഡോയിൽ, ഇൻഡ്യൂസ്ഡ് സ്റ്റേറ്റിന് അനുയോജ്യമായ ഫ്രെയിം തിരഞ്ഞെടുക്കുക, കൂടാതെ ലെയർ പാലറ്റിൽ ലെയർ 1 കോപ്പി ലെയർ സ്വയമേവ തിരഞ്ഞെടുക്കപ്പെടും (ചിത്രം 34). റോൾഓവർ പാലറ്റിലേക്ക് പോയി, റോൾഓവർ സ്റ്റേറ്റ് സൃഷ്ടിക്കുക ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക (ഒരു റോൾഓവർ അവസ്ഥ സൃഷ്ടിക്കുക) ചിത്രം. 35, ഇത് റോൾഓവർ പാലറ്റിൽ (ചിത്രം 36) ഓവർ സ്റ്റേറ്റ് സ്റ്റേറ്റ് പ്രത്യക്ഷപ്പെടുന്നതിന് കാരണമാകും. അതേ രീതിയിൽ ഒരു ഡൗൺ സ്റ്റേറ്റ് സൃഷ്ടിക്കുക. റോൾഓവർ പാലറ്റിൽ സാധാരണ നില സജീവമാക്കുക, സാധാരണ അവസ്ഥയുമായി പൊരുത്തപ്പെടേണ്ട ഫ്രെയിമുകൾ ഒഴികെ ആനിമേഷൻ പാലറ്റിലെ എല്ലാ ഫ്രെയിമുകളും ഇല്ലാതാക്കുക. തൽഫലമായി, ഓരോ റോൾഓവർ അവസ്ഥയ്ക്കും ആനിമേഷൻ പാലറ്റിൽ ഒരു ഫ്രെയിം മാത്രമേ ഉണ്ടാകൂ (ചിത്രം 37, 38, 39).

അരി. 38. ഇമേജ്, ആനിമേഷൻ വിൻഡോ, ഓവർ സ്റ്റേറ്റ് സ്റ്റേറ്റിനായുള്ള ലെയറുകളുടെയും റോൾഓവർ പാലറ്റുകളുടെയും കാഴ്ച

ടൂൾബാറിലെ ഡിഫോൾട്ട് ബ്രൗസറിലെ പ്രിവ്യൂ ബട്ടണിൽ ക്ലിക്കുചെയ്‌ത് ബ്രൗസർ വിൻഡോയിലേക്ക് പോയി ഫലം പരിശോധിക്കുക (ചിത്രം 40). അതിനുശേഷം, ഫയൽ=>സേവ് ഒപ്റ്റിമൈസ്ഡ് കമാൻഡ് ഉപയോഗിച്ച് ഫയൽ സേവ് ചെയ്യുകയും HTML, ഇമേജുകൾ (*.html) ഓപ്ഷൻ വ്യക്തമാക്കുകയും ചെയ്യുക. തൽഫലമായി, ഈ ഉദാഹരണത്തിൽ, ചിത്രങ്ങളുടെ ഫോൾഡറിൽ Primer4.html എന്ന ഫയലും ഗ്രാഫിക് ചിത്രങ്ങളുടെ ഒരു ശ്രേണിയും ലഭിച്ചു.

അരി. 40. റോൾഓവർ ഘടകം ഉള്ള ബ്രൗസർ വിൻഡോ

SVG റോൾഓവറുകൾ

എക്സ്എംഎൽ സ്റ്റാൻഡേർഡിനെ അടിസ്ഥാനമാക്കി സൃഷ്ടിച്ച കൂടുതൽ പ്രചാരമുള്ള എസ്വിജി (സ്കേലബിൾ വെക്റ്റർ ഗ്രാഫിക്സ്) ഫോർമാറ്റ്, പ്രത്യേക റോൾഓവറുകളിൽ വിവിധതരം സംവേദനാത്മക ഘടകങ്ങൾ നേടാനും നിങ്ങളെ അനുവദിക്കുന്നു, എന്നാൽ പ്രായോഗികമായി ഇത് തികച്ചും വ്യത്യസ്തമായി നടപ്പിലാക്കുന്നു. സംവേദനാത്മക SVG റോൾഓവറുകൾ സൃഷ്ടിക്കുന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്, ക്ലാസിക്ക്കളിൽ നിന്ന് വ്യത്യസ്തമായി, അനുബന്ധ HTML കോഡ് പൂർണ്ണമായും സ്വയമേവ സൃഷ്ടിക്കപ്പെടുമ്പോൾ, JavaScript ഭാഷയെക്കുറിച്ചുള്ള അറിവും ഒബ്ജക്റ്റ്-ഓറിയന്റഡ് പ്രോഗ്രാമിംഗിന്റെ അടിസ്ഥാന തത്വങ്ങളെക്കുറിച്ചുള്ള ധാരണയും ആവശ്യമാണ്.

എസ്‌വി‌ജി ഒബ്‌ജക്‌റ്റുകൾക്കൊപ്പം പ്രവർത്തിക്കാൻ ഒരു പ്രത്യേക പാലറ്റ് എസ്‌വി‌ജി ഇന്ററാക്‌റ്റിവിറ്റി ഉണ്ട്, അത് വിൻഡോ => എസ്‌വി‌ജി ഇന്ററാക്‌റ്റിവിറ്റി (വിൻഡോ => എസ്‌വി‌ജി ഇന്ററാക്‌റ്റിവിറ്റി) ചിത്രം ഉപയോഗിച്ച് എളുപ്പത്തിൽ തുറക്കാൻ കഴിയും. 41.

ഒരു ഇന്ററാക്ടീവ് ബട്ടണിന്റെ ഉദാഹരണം ഉപയോഗിച്ച് ഒരു റോൾഓവർ സൃഷ്ടിക്കുന്നതിനുള്ള ഈ ഓപ്ഷൻ നമുക്ക് പരിഗണിക്കാം, നിങ്ങൾ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ ലിഖിതത്തിന്റെ നിറം കറുപ്പിൽ നിന്ന് നീലയിലേക്ക് മാറുകയും മൗസ് സജീവ സോണിൽ നിന്ന് പുറത്തുപോകുമ്പോൾ വീണ്ടും കറുപ്പായി മാറുകയും ചെയ്യും.

വൃത്താകൃതിയിലുള്ള അരികുകളുള്ള ഒരു ചതുരാകൃതിയിലുള്ള ബട്ടൺ സൃഷ്‌ടിച്ച് അതിന് അനുയോജ്യമായ ഒരു ഗ്രേഡിയന്റ് ഫിൽ തിരഞ്ഞെടുക്കുക, ഉദാഹരണത്തിന് ചിത്രം. 42. സുതാര്യത പാലറ്റിലെ ബട്ടണിന്റെ സുതാര്യത ക്രമീകരിക്കുക. ഈ ഉദാഹരണത്തിൽ, അതാര്യത മൂല്യം 50% ആയി സജ്ജീകരിച്ചിരിക്കുന്നു. ബട്ടണിന്റെ ഒരു പകർപ്പ് ഉണ്ടാക്കുക, ഇരുണ്ട പച്ച നിറത്തിൽ പൂരിപ്പിക്കുക (ചിത്രം 43), തുടർന്ന് ഒബ്‌ജക്റ്റ് => ഗ്രേഡിയന്റ് മെഷ് സൃഷ്‌ടിക്കുക എന്ന കമാൻഡ് ഉപയോഗിച്ച് അതിനെ ഒരു മെഷ് ഒബ്‌ജക്റ്റിലേക്ക് പരിവർത്തനം ചെയ്യുക, നാല് വരികളും പത്ത് കോളങ്ങളും വ്യക്തമാക്കി, രൂപഭാവ ലിസ്റ്റിൽ (കാണുക) ടു സെന്റർ ഓപ്ഷൻ തിരഞ്ഞെടുത്ത് ഹൈലൈറ്റ് മൂല്യം 100 ആയി സജ്ജീകരിക്കുക. മെഷ് ഒബ്‌ജക്റ്റ് ഉള്ള ലെയറിന്റെ അതാര്യത ഏകദേശം 40% ആയി കുറയ്ക്കുക (ചിത്രം 44). ഗ്രേഡിയന്റിനു മുകളിൽ ഒരു മെഷ് ഒബ്‌ജക്റ്റ് വയ്ക്കുക, ബട്ടൺ ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നതുമായി സാമ്യമുള്ളതാണ്. 45.

അരി. 44. ഒരു ബട്ടണിന്റെ പകർപ്പ് ഒരു മെഷ് ഒബ്‌ജക്‌റ്റാക്കി മാറ്റുക

ഉദ്ദേശിച്ച ലിഖിതത്തോടുകൂടിയ ബട്ടൺ പൂർത്തിയാക്കി അലൈൻ പാലറ്റിലെ അനുബന്ധ ബട്ടണുകൾ ഉപയോഗിച്ച് അതിന്റെ സ്ഥാനം ക്രമീകരിക്കുക. തത്ഫലമായുണ്ടാകുന്ന ചിത്രത്തിൽ മൂന്ന് വസ്തുക്കൾ പരസ്പരം സൂപ്പർഇമ്പോസ് ചെയ്ത ഒരു പാളി അടങ്ങിയിരിക്കും (ചിത്രം 46). ഷെഡ്യൂൾ ചെയ്‌ത ഇവന്റുകൾ ഒരു ടെക്‌സ്‌റ്റ് ഒബ്‌ജക്‌റ്റുമായി ആപേക്ഷികമായിരിക്കും, അതിനാൽ സൗകര്യാർത്ഥം, ഒബ്‌ജക്റ്റിൽ ഇരട്ട-ക്ലിക്കുചെയ്ത് ഒരു പുതിയ പേര് നൽകി അതിന്റെ പേര് ടെക്‌സ്‌റ്റായി മാറ്റുക. അതുപോലെ, ലെയർ പേര് ലെയർ 1 ൽ നിന്ന് ലെയറിലേക്ക് മാറ്റുക (ചിത്രം 47).

ഇവന്റ് പ്രോസസ്സിംഗിൽ JavaScript നടപടിക്രമങ്ങളുടെ ഉപയോഗം ഉൾപ്പെടുന്നു, അതിനാൽ ഈ നടപടിക്രമങ്ങൾ വിവരിക്കുന്ന ഒരു ഫയൽ നിങ്ങൾ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്. ഇതിനെ Events.js എന്ന് വിളിക്കുന്നു, നിങ്ങൾ Adobe Illustrator ഇൻസ്റ്റാൾ ചെയ്യുമ്പോൾ സാമ്പിൾ ഫയലുകൾ\സാമ്പിൾ ആർട്ട്\SVG\SVG ഫോൾഡറിൽ ഡിസ്കിലേക്ക് സേവ് ചെയ്യപ്പെടും. Events.js ഫയൽ ബന്ധിപ്പിക്കുന്നതിന്, JavaScript ഫയലുകൾ SVG ഇന്ററാക്റ്റിവിറ്റി കമാൻഡ് ഉപയോഗിക്കുക (ചിത്രം 48). അടുത്തതായി, നിങ്ങൾ ചേർക്കുക ബട്ടൺ ക്ലിക്കുചെയ്ത് നിങ്ങളുടെ ഹാർഡ് ഡ്രൈവിൽ ആവശ്യമുള്ള ഫയൽ കണ്ടെത്തേണ്ടതുണ്ട്. URL ഫീൽഡിൽ അവന്റെ പേര് ദൃശ്യമാകുമ്പോൾ (ചിത്രം 49), പൂർത്തിയായി ബട്ടൺ ക്ലിക്കുചെയ്യുക.

അരി. 48. JavaScript ഫയലുകൾ കമാൻഡ് തിരഞ്ഞെടുക്കുന്നു

അടുത്തതായി, ടെക്‌സ്‌റ്റ് ഒബ്‌ജക്റ്റിനായി മൗസ് ഇവന്റുകളോടുള്ള പ്രതികരണം നിങ്ങൾ നിർവചിക്കേണ്ടതുണ്ട്. ടെക്സ്റ്റ് ഒബ്ജക്റ്റ് തിരഞ്ഞെടുക്കുക, SVG ഇന്ററാക്റ്റിവിറ്റി പാലറ്റിന്റെ ഇവന്റ് ഫീൽഡിൽ, ഇവന്റ് ഓൺമൗസ് ഓവർ elemColor (evt, "ടെക്സ്റ്റ്", "#3333FF") തിരഞ്ഞെടുക്കുക, ഇത് അർത്ഥമാക്കുന്നത് ടെക്സ്റ്റ് ഒബ്ജക്റ്റിന് മുകളിൽ മൗസ് ആയിരിക്കുമ്പോൾ, അതിന്റെ നിറം ഇതിലേക്ക് മാറും എന്നാണ്. നീല (ചിത്രം 50). മൗസ് സജീവമായ ഏരിയയിൽ നിന്ന് പുറത്തുകടന്നതിന് ശേഷം ടെക്‌സ്‌റ്റ് നിറം കറുപ്പിലേക്ക് മാറുന്നതിന്, നിങ്ങൾ മറ്റൊരു ഓൺമൗസ് ഔട്ട് ഇവന്റ് സൃഷ്‌ടിക്കേണ്ടതുണ്ട്, അത് SVG ഇന്ററാക്റ്റിവിറ്റി പാലറ്റിന്റെ ഇവന്റ് ഫീൽഡിൽ തിരഞ്ഞെടുക്കുക. തുടർന്ന് ആക്ഷൻ ലൈനിൽ elemColor (evt, "ടെക്സ്റ്റ്", "#000000") എന്ന വാചകം നൽകുക, ഇത് നിറം കറുപ്പിലേക്ക് തിരികെ നൽകും (ചിത്രം 51).

അരി. 51. ടെക്സ്റ്റ് ഒബ്‌ജക്റ്റിനായുള്ള SVG ഇന്ററാക്റ്റിവിറ്റി പാലറ്റിന്റെ അന്തിമ രൂപം

File=>Save as (ഫയൽ=>ഫയൽ തരം SVG ഫോർമാറ്റ്) എന്ന കമാൻഡ് ഉപയോഗിച്ച് സൃഷ്ടിച്ച റോൾഓവർ ഒരു SVG ഫയലായി സംരക്ഷിക്കുക, തുടർന്ന് ചിത്രം 52-ൽ കാണിച്ചിരിക്കുന്നതുപോലെ SVG ഫയൽ സേവ് ചെയ്യുന്നതിനുള്ള ഓപ്‌ഷനുകൾ സജ്ജമാക്കുക. സംരക്ഷിച്ചതിന് ശേഷം, നിങ്ങൾക്ക് ഒരെണ്ണം മാത്രമേ ലഭിക്കൂ. ഒരു ക്ലാസിക് റോൾഓവറിന്റെ കാര്യത്തിലെന്നപോലെ, SVG എന്ന വിപുലീകരണമുള്ള ഒറ്റ ഫയൽ, രണ്ടല്ല, ഈ സാഹചര്യത്തിൽ Primer5.svg (Primer5 ഫോൾഡർ) എന്ന ഫയൽ ലഭിച്ചു. എന്നിരുന്നാലും, റോൾഓവർ ശരിക്കും പ്രവർത്തിക്കുന്നതിന്, നിങ്ങൾ അധികമായി പകർത്തേണ്ടതുണ്ട്. JavaScript നടപടിക്രമങ്ങളുടെ വിവരണത്തിൽ നിന്നുള്ള Events.js ഫയൽ. ഇതിനുശേഷം, നിങ്ങൾക്ക് റോൾഓവറിന്റെ പ്രവർത്തനക്ഷമത പരിശോധിക്കാം, ഫലം ചിത്രം 53-ൽ കാണിച്ചിരിക്കുന്നതുപോലെ കാണപ്പെടും.

SVG ആനിമേഷൻ

ആനിമേഷൻ കൈമാറാനും SVG ഫോർമാറ്റ് ഉപയോഗിക്കാം. ലളിതമായ ഒരു ആനിമേറ്റഡ് ഘടകം സൃഷ്ടിക്കാൻ ശ്രമിക്കാം (ഈ സാഹചര്യത്തിൽ ഇത് കമ്പനിയെക്കുറിച്ചുള്ള വിവരമായിരിക്കും), നിങ്ങൾ മൗസ് അനുബന്ധ ഗ്രാഫിക് ഒബ്‌ജക്റ്റിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ സ്ക്രീനിൽ ദൃശ്യമാകുകയും ഇന്ററാക്ടീവ് എലമെന്റിൽ നിന്ന് മൗസ് നീക്കം ചെയ്യുമ്പോൾ അപ്രത്യക്ഷമാവുകയും ചെയ്യും.

ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ഗ്രാഫിക്, ടെക്സ്റ്റ് ഒബ്ജക്റ്റുകളുടെ ഏകദേശം ഇനിപ്പറയുന്ന ശ്രേണി സൃഷ്ടിക്കാം. 54. ലെയേഴ്‌സ് പാലറ്റിലെ അടുത്ത ഒബ്‌ജക്റ്റിന്റെ പേരിൽ തുടർച്ചയായി ക്ലിക്കുചെയ്‌ത് ആവശ്യമുള്ള പേര് നൽകി സൃഷ്‌ടിച്ച എല്ലാ ഒബ്‌ജക്റ്റുകളുടെയും പേര് മാറ്റാം (ചിത്രം 55). ചിത്രത്തിൽ ഹൈലൈറ്റ് ചെയ്തിരിക്കുന്നവ ശ്രദ്ധിക്കുക. 56 ഒബ്‌ജക്‌റ്റുകൾ Text1, Text2, Text3, Path1 എന്നിവ എല്ലായ്‌പ്പോഴും ദൃശ്യമാകും, കൂടാതെ മറ്റുള്ളവയെല്ലാം Text1 ഒബ്‌ജക്റ്റിന് മുകളിൽ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ മാത്രം.

അരി. 54. ചിത്രത്തിന്റെ യഥാർത്ഥ കാഴ്ച

SVG ഇന്ററാക്റ്റിവിറ്റി പാലറ്റിൽ നിന്നുള്ള JavaScript ഫയലുകൾ കമാൻഡ് ഉപയോഗിച്ച് JavaScript നടപടിക്രമങ്ങൾ വിവരിക്കുന്ന Events.js ഫയൽ ഉൾപ്പെടുത്തുക, ചേർക്കുക ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക, നിങ്ങളുടെ ഹാർഡ് ഡ്രൈവിലെ ആവശ്യമുള്ള ഫയലിലേക്ക് ചൂണ്ടിക്കാണിച്ച്, പൂർത്തിയായ ബട്ടൺ ക്ലിക്ക് ചെയ്യുക.

Text1 ഒബ്‌ജക്റ്റിനായി മൗസ് ഇവന്റുകളോടുള്ള പ്രതികരണം നിർവചിക്കുക. എസ്‌വി‌ജി ഇന്ററാക്‌റ്റിവിറ്റി പാലറ്റിന്റെ ഇവന്റ് ഫീൽഡിൽ ടെക്‌സ്‌റ്റ് ഒബ്‌ജക്റ്റ് തിരഞ്ഞെടുക്കുക, ഓൺമൗസ് ഓവർ ഇവന്റ് തിരഞ്ഞെടുത്ത് ചുവടെയുള്ള വരിയിൽ ടെക്‌സ്‌റ്റ് elemShow(evt, "Text4") നൽകുക; elemShow(evt, "Path2") . തൽഫലമായി, മൗസ് Text1 ഒബ്‌ജക്റ്റിന് മുകളിലായിരിക്കുമ്പോൾ, Text4, Path2 ഒബ്‌ജക്റ്റുകൾ ദൃശ്യമാകും. ഒരു ഇവന്റ് സംഭവിക്കുമ്പോൾ നിരവധി പ്രവർത്തനങ്ങൾ നടത്തേണ്ടതുണ്ടെങ്കിൽ, അവ ";" ചിഹ്നം ഉപയോഗിച്ച് വ്യക്തമാക്കണം എന്നത് ശ്രദ്ധിക്കുക. തുടർന്ന് onmouseout ഇവന്റിനായി സമാനമായ ഒരു പ്രവർത്തനം നടത്തുക, അതിനുള്ള വാചകം നൽകുക, അതായത് ഒബ്‌ജക്റ്റുകൾ മറയ്ക്കുക (ചിത്രം 57).

ഫയൽ=>Save as കമാൻഡ് ഉപയോഗിച്ച് ഫലം ഒരു SVG ഫയലായി സംരക്ഷിക്കുക, ഫയലിന്റെ പേര് വ്യക്തമാക്കുക, ഫയൽ തരം ഫീൽഡിൽ SVG ഫോർമാറ്റ് തിരഞ്ഞെടുക്കുക, തുടർന്ന് ചിത്രം അനുസരിച്ച് SVG ഫയൽ സംരക്ഷിക്കുന്നതിനുള്ള ഓപ്ഷനുകൾ സജ്ജമാക്കുക. 58. സംരക്ഷിച്ചതിന് ശേഷം, Primer6.svg ഫയൽ ലഭിക്കും (Primer6 ഫോൾഡർ). Events.js ഫയൽ ഈ ഫയലുള്ള ഫോൾഡറിലേക്ക് പകർത്താൻ മറക്കരുത്. നിങ്ങൾ സൃഷ്ടിച്ച ഫയൽ പ്രവർത്തിപ്പിക്കുകയാണെങ്കിൽ, ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്ന ഫലം നിങ്ങൾ കാണും. 59. നിങ്ങൾക്ക് ആവശ്യമുള്ളത് ഇതാണ്. ലോഡുചെയ്യുമ്പോൾ ടെക്‌സ്‌റ്റ് 4, പാത്ത് 2 ഒബ്‌ജക്‌റ്റുകളുടെ പ്രാരംഭ രൂപം മാത്രമാണ് ഞങ്ങളുടെ പ്ലാനുകളിൽ ഉൾപ്പെടുത്താത്തത്. ഈ പോരായ്മ ഒഴിവാക്കാൻ, രണ്ട് ഒബ്‌ജക്റ്റ് ഡാറ്റയും ഒരേസമയം തിരഞ്ഞെടുത്ത് അവയ്‌ക്കായി ഒരു പ്രവർത്തനം സൃഷ്‌ടിക്കുക elemHide(evt, "Text4"); elemHide(evt, "Path2") onload ഇവന്റിൽ (ചിത്രം 60). ഫയൽ വീണ്ടും സംരക്ഷിച്ച് Text1 ഒബ്‌ജക്റ്റിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ മാത്രമേ Text4, Path2 ഒബ്‌ജക്‌റ്റുകൾ ദൃശ്യമാകൂ എന്ന് ഉറപ്പാക്കുക.

GIF ആനിമേഷൻ

ആനിമേറ്റഡ് ജിഫുകൾ ഉൾപ്പെടെ വെബ് ആനിമേഷൻ ഇല്ലാതെ ഏതൊരു വെബ് പേജും ചിന്തിക്കാൻ കഴിയില്ല. അവ സൃഷ്ടിക്കുന്നതിനുള്ള ഓപ്ഷനുകളിലൊന്ന് Adobe ImageReady ആപ്ലിക്കേഷൻ ഉപയോഗിക്കുക എന്നതാണ്, ഇത് മറ്റ് കാര്യങ്ങൾക്കൊപ്പം, ലെയറുകളിൽ നിന്ന് ആനിമേഷൻ സൃഷ്ടിക്കാൻ അനുവദിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, അഡോബ് ഇല്ലസ്‌ട്രേറ്റർ ഉൾപ്പെടെ വിവിധ ആപ്ലിക്കേഷനുകളിൽ മൾട്ടിലെയർ ഇമേജ് തന്നെ തയ്യാറാക്കാം.

വിൻഡോ=>ചിഹ്നങ്ങൾ കമാൻഡ് ഉപയോഗിച്ച് തുറന്ന ചിഹ്നങ്ങളുടെ പാലറ്റിൽ നിന്നോ അല്ലെങ്കിൽ വിൻഡോ=> ചിഹ്ന ലൈബ്രറി കമാൻഡ് ഉപയോഗിച്ച് തുറക്കാൻ കഴിയുന്ന സിംബൽ ലൈബ്രറികളിലൊന്നിൽ നിന്നോ ഉള്ള ഘടകങ്ങളെ അടിസ്ഥാനമാക്കി ഒരു ആനിമേഷൻ സൃഷ്ടിക്കുന്നത് വളരെ എളുപ്പമാണ്. ).

ഉദാഹരണത്തിന്, ഏതെങ്കിലും ചിഹ്ന വസ്തുവിന്റെ വലുപ്പം വർദ്ധിപ്പിക്കാൻ ഞങ്ങൾ ശ്രമിക്കും; ഒബ്ജക്റ്റ് വർദ്ധിപ്പിക്കുന്ന പ്രക്രിയയുടെ പ്രധാന ഘട്ടങ്ങൾ പ്രത്യേക പാളികളിൽ സജ്ജീകരിച്ചിരിക്കണം. ആദ്യം, സിംബൽ ഒബ്‌ജക്‌റ്റുകൾ ഒന്നിനു മുകളിൽ മറ്റൊന്ന് വയ്ക്കുക, തുടർന്ന് ഓരോ തുടർന്നുള്ള ഒബ്‌ജക്റ്റിന്റെയും വലുപ്പം വർദ്ധിപ്പിക്കുക, ഉദാഹരണത്തിന് ചിത്രം. 61. തൽഫലമായി, ലെയേഴ്സ് പാലറ്റിൽ (ചിത്രം 62) നിരവധി വസ്തുക്കളുള്ള ഒരു പാളി സൃഷ്ടിക്കപ്പെടും. നിങ്ങൾ ഈ ചിത്രം PSD ഫോർമാറ്റിലേക്ക് നേരിട്ട് എക്‌സ്‌പോർട്ടുചെയ്യുകയാണെങ്കിൽ, അത് ഒന്നും നൽകില്ല, കാരണം ഒരു ലെയർ മാത്രമേയുള്ളൂ, സ്വാഭാവികമായും, ImageReady പ്രോഗ്രാമിൽ PSD ഫയൽ തുറക്കുമ്പോൾ, ഒരു ലെയർ മാത്രമേ ഉണ്ടാകൂ. അതിനാൽ, നിങ്ങൾ ആദ്യം വസ്തുക്കൾ വ്യത്യസ്ത പാളികളിൽ സ്ഥാപിക്കണം. ഇത് വ്യത്യസ്ത രീതികളിൽ ചെയ്യാം; ലെയേഴ്സ് പാലറ്റിൽ ആദ്യം ലെയർ 1 തിരഞ്ഞെടുത്ത് റിലീസ് ടു ലേയർ കമാൻഡ് ഉപയോഗിക്കുക എന്നതാണ് ഏറ്റവും എളുപ്പമുള്ള മാർഗം. ഓരോ വസ്തുക്കളും അതിന്റേതായ ലെയറിലേക്ക് മാറ്റപ്പെടും, പക്ഷേ അവയെല്ലാം ലെയർ 1 ൽ നെസ്റ്റ് ചെയ്യും. അതിനാൽ, നിങ്ങൾ എല്ലാ നെസ്റ്റഡ് ലെയറുകളും ലെയർ പാലറ്റിന്റെ മുകളിലേക്ക് സ്വമേധയാ വലിച്ചിടേണ്ടതുണ്ട്, അങ്ങനെ അവ ലെയർ 1 ലെയറിന് മുകളിലായിരിക്കും, തുടർന്ന് ഇപ്പോൾ ശൂന്യമായ ലെയർ 1 ലെയർ ഇല്ലാതാക്കുക (ചിത്രം 63). ചിത്രം പിഎസ്‌ഡി ഫോർമാറ്റിലേക്ക് ഫയൽ=>എക്‌സ്‌പോർട്ട് കമാൻഡ് ഉപയോഗിച്ച് ചിത്രം എക്‌സ്‌പോർട്ട് ചെയ്യുക. 64.

ഇമേജ് റെഡി പ്രോഗ്രാമിൽ സൃഷ്ടിച്ച PSD ഫയൽ ലോഡ് ചെയ്യുക (ചിത്രം 65, 66). പാളികളുടെ പാലറ്റ് മെനുവിൽ നിന്ന് ആനിമേഷൻ മേക്ക് ഫ്രെയിമുകൾ തുറക്കുക. തൽഫലമായി, അഞ്ച് ഫ്രെയിമുകൾ സൃഷ്ടിക്കപ്പെടും, അവയിൽ ഓരോന്നും അതിന്റേതായ ലെയറുമായി പൊരുത്തപ്പെടും, കൂടാതെ ആനിമേഷൻ പാലറ്റ് വിൻഡോ ചിത്രം 1 ലെ പോലെ കാണപ്പെടും. 67.

ഇതിനുശേഷം, ഈ സാഹചര്യത്തിൽ സൃഷ്ടിച്ച ഓരോ ഫ്രെയിമുകളുടെയും ദൈർഘ്യം സജ്ജമാക്കുക, എല്ലാ ഫ്രെയിമുകളുടെയും ദൈർഘ്യം 0.2 സെ. തുടർന്ന് ഫയൽ=>സേവ് ഒപ്റ്റിമൈസ്ഡ് (ഫയൽ=>ഒപ്റ്റിമൈസേഷൻ ഉപയോഗിച്ച് സംരക്ഷിക്കുക) എന്ന കമാൻഡ് ഉപയോഗിച്ച് ഒപ്റ്റിമൈസേഷൻ ഉപയോഗിച്ച് ആനിമേഷൻ സംരക്ഷിക്കുക. തത്ഫലമായുണ്ടാകുന്ന ഫലം ചിത്രം പോലെയാകാം. 68.

ഇല്ലസ്‌ട്രേറ്ററിന്റെ ലൈവ് ബ്ലെൻഡ്‌സ് ഫംഗ്‌ഷനുകൾ ഉപയോഗിക്കുന്നതിന് ഇമേജ് റെഡിയിൽ എളുപ്പത്തിൽ ആനിമേഷനായി പരിവർത്തനം ചെയ്യാവുന്ന ശൂന്യതകൾ ലഭിക്കുന്നത് കൂടുതൽ സൗകര്യപ്രദമാണ്. Illustrator, ImageReady എന്നിവയുടെ ഈ സംയുക്ത ഉപയോഗം GIF ആനിമേഷനുകൾ സൃഷ്ടിക്കുന്ന പ്രക്രിയയെ ഗണ്യമായി വേഗത്തിലാക്കുന്നു.

ഉദാഹരണത്തിന്, രണ്ട് അനിയന്ത്രിതമായ മൾട്ടി-കളർ ഒബ്ജക്റ്റുകൾ വരയ്ക്കുക, തുടർന്ന് അവയെ ഉചിതമായ പാരാമീറ്ററുകൾ ഉപയോഗിച്ച് ഒരു ബ്ലെൻഡ് ലിങ്ക് ഉപയോഗിച്ച് ബന്ധിപ്പിക്കുക (ചിത്രം 69). ആനിമേഷൻ സൃഷ്ടിക്കാൻ ഈ ഫയൽ നേരിട്ട് ഉപയോഗിക്കുന്നത് അസാധ്യമാണ്, കാരണം ചിത്രം ഒരൊറ്റ ലെയറിലാണ് (ചിത്രം 70). അതിനാൽ, നിങ്ങൾ ആദ്യം ബ്ലെൻഡ് ഒബ്ജക്റ്റിന്റെ ഓരോ ഘടകങ്ങളും ഒരു പ്രത്യേക ലെയറിൽ സ്ഥാപിക്കേണ്ടതുണ്ട്. ഇത് ചെയ്യുന്നതിന്, ലെയേഴ്സ് വിൻഡോയിൽ, ലൈൻ തിരഞ്ഞെടുക്കുക, അതിന്റെ മുകളിൽ വലത് കോണിലുള്ള കറുത്ത അമ്പടയാളത്തിൽ ക്ലിക്കുചെയ്ത് പാലറ്റ് മെനു സജീവമാക്കുക, കൂടാതെ ലെയറുകളിലേക്കുള്ള റിലീസ് കമാൻഡ് തിരഞ്ഞെടുക്കുക (ചിത്രം 71). Shift കീ അമർത്തിപ്പിടിക്കുക, സൃഷ്ടിച്ച ലെയറുകൾ തിരഞ്ഞെടുത്ത് അവയെ ലെയർ 1 ലെയറിന് മുകളിൽ വയ്ക്കുക, തുടർന്ന് ലെയർ 1 ലെയർ തന്നെ ഇല്ലാതാക്കുക, ഫലമായി അതിനെ ട്രാഷിലേക്ക് നീക്കുക, ലെയറുകൾ പാലറ്റ് ചിത്രം 1-ലെ അതേ രൂപമെടുക്കും. 72.

അരി. 70. ലെയേഴ്സ് വിൻഡോയുടെ പ്രാരംഭ അവസ്ഥ

File=>Export കമാൻഡ് ഉപയോഗിച്ച് സൃഷ്ടിച്ച ഫയൽ PSD ഫോർമാറ്റിലേക്ക് കയറ്റുമതി ചെയ്യുക. ഇമേജ് റെഡി പ്രോഗ്രാമിൽ സൃഷ്ടിച്ച PSD ഫയൽ തുറക്കുക (ചിത്രം 73). ഇല്ലസ്ട്രേറ്ററിൽ സൃഷ്ടിച്ച എല്ലാ ലെയറുകളും ലെയറുകൾ വിൻഡോയിൽ ദൃശ്യമാകും (ചിത്രം 74), ആനിമേഷൻ വിൻഡോയിൽ ഇപ്പോൾ ഒരു ഫ്രെയിം മാത്രമേ ഉണ്ടാകൂ.

പാലറ്റിന്റെ മുകളിൽ വലത് കോണിലുള്ള കറുത്ത അമ്പടയാളത്തിൽ ക്ലിക്കുചെയ്‌ത് ആനിമേഷൻ പാലറ്റ് മെനു സജീവമാക്കുകയും പാളികളിൽ നിന്ന് ഫ്രെയിം ചെയ്യുക കമാൻഡ് തിരഞ്ഞെടുക്കുക. ഫലമായി, ഈ ഉദാഹരണത്തിൽ, അഞ്ച് ഫ്രെയിമുകൾ സൃഷ്ടിക്കപ്പെടും, കൂടാതെ ആനിമേഷൻ പാലറ്റ് വിൻഡോ എടുക്കും ചിത്രം അനുസരിച്ച് ഫോം. 75. ഷിഫ്റ്റ് കീ അമർത്തിപ്പിടിച്ചുകൊണ്ട് എല്ലാ ഫ്രെയിമുകളും തിരഞ്ഞെടുത്ത് ഈ ഉദാഹരണത്തിൽ ഉചിതമായ ഫ്രെയിം ദൈർഘ്യം സജ്ജമാക്കുക, ഓരോ ഫ്രെയിമിനും ഒരേ സമയം 0.2 സെ. തുടർന്ന് ഫയൽ ടൈപ്പ് ലിസ്റ്റിൽ ഇമേജുകൾ ഒൺലി (*.gif) എന്ന ഓപ്‌ഷൻ സെറ്റ് ചെയ്യുക, File=>Save Optimized (File=>Save with optimization) എന്ന കമാൻഡ് ഉപയോഗിച്ച് ഒപ്റ്റിമൈസേഷൻ ഉപയോഗിച്ച് ഫയൽ സേവ് ചെയ്യുക. ആനിമേഷൻ ചിത്രം പോലെയായിരിക്കും. 76.

കൂടുതൽ രസകരമായി തോന്നുന്നത് ചലനമല്ല, ബ്ലെൻഡ് ഒബ്ജക്റ്റുകളുടെ സുഗമമായ വലുപ്പം മാറ്റലാണ്. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഇതിനകം സൃഷ്ടിച്ച മിശ്രിത സംക്രമണം ഉപയോഗിക്കാം. ഈ സാഹചര്യത്തിൽ, ഓരോ ബ്ലെൻഡ് ട്രാൻസിഷൻ എലമെന്റിനും വെവ്വേറെ ലെയറുകൾ സൃഷ്ടിച്ച ശേഷം, അലൈൻ പാലറ്റിന്റെ (ചിത്രം 77) തിരശ്ചീന അലൈൻ സെന്റർ, വെർട്ടിക്കൽ അലൈൻ സെന്റർ ബട്ടണുകൾ ഉപയോഗിച്ച് എല്ലാ വസ്തുക്കളും പരസ്പരം മുകളിൽ വയ്ക്കുക.

സൃഷ്ടിച്ച ഫയൽ PSD ഫോർമാറ്റിലേക്ക് എക്‌സ്‌പോർട്ട് ചെയ്യുക (ഫയൽ=>എക്‌സ്‌പോർട്ട് ഫയൽ=>എക്‌സ്‌പോർട്ട്) കൂടാതെ ഇമേജ് റെഡി പ്രോഗ്രാമിൽ സൃഷ്ടിച്ച PSD ഫയൽ തുറക്കുക (ചിത്രം 78). ലെയറുകളെ അടിസ്ഥാനമാക്കിയുള്ള ആനിമേഷൻ ഫ്രെയിമുകൾ സൃഷ്ടിക്കുക (ലെയറുകളിൽ നിന്ന് ഫ്രെയിമുകൾ നിർമ്മിക്കുക) അവയ്ക്ക് അനുയോജ്യമായ കാലയളവ് തിരഞ്ഞെടുക്കുക (ചിത്രം 79). തുടർന്ന്, ആനിമേഷൻ കൂടുതൽ ഫലപ്രദമാക്കുന്നതിന്, നിലവിലുള്ള ഫ്രെയിമുകൾ പകർത്തുക, പക്ഷേ വിപരീത ക്രമത്തിൽ, അങ്ങനെ ചിത്രം ആദ്യം വർദ്ധിക്കുകയും കുറയുകയും ചെയ്യുന്നു, അങ്ങനെ ഒരു സർക്കിളിൽ (ചിത്രം 80). തുടർന്ന് ഒപ്റ്റിമൈസേഷൻ ഫയൽ സേവ് ചെയ്യുക (ഫയൽ=>സേവ് ഒപ്റ്റിമൈസ് ചെയ്ത ഫയൽ=>ഒപ്റ്റിമൈസേഷൻ ഉപയോഗിച്ച് സംരക്ഷിക്കുക). തത്ഫലമായുണ്ടാകുന്ന ആനിമേഷൻ ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 81.

അരി. 80. ഫ്രെയിമുകൾ ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്തതിന് ശേഷമുള്ള ആനിമേഷൻ വിൻഡോയുടെ അവസ്ഥ

അരി. 81. പൂർത്തിയായ ആനിമേഷൻ

അടുത്തിടെ, വെബ്സൈറ്റുകളിലും ആപ്ലിക്കേഷനുകളിലും എസ്വിജി (സ്കേലബിൾ വെക്റ്റർ ഗ്രാഫിക്സ്) ഗ്രാഫിക്സിന്റെ വിവിധ തരത്തിലുള്ള ആനിമേഷൻ വളരെ ജനപ്രിയമായിട്ടുണ്ട്. ഏറ്റവും പുതിയ എല്ലാ ബ്രൗസറുകളും ഇതിനകം തന്നെ ഈ ഫോർമാറ്റിനെ പിന്തുണയ്ക്കുന്നു എന്നതാണ് ഇതിന് കാരണം. SVG-നുള്ള ബ്രൗസർ പിന്തുണയെക്കുറിച്ചുള്ള വിവരങ്ങൾ ഇവിടെയുണ്ട്.

ഭാരം കുറഞ്ഞ Jquery പ്ലഗിൻ Lazy Line Painter ഉപയോഗിച്ച് SVG വെക്റ്റർ ആനിമേഷന്റെ ഏറ്റവും ലളിതമായ ഉദാഹരണം ഈ ലേഖനം ചർച്ചചെയ്യുന്നു.

ഉറവിടം

ഈ ടാസ്ക് പൂർത്തിയാക്കാനും പൂർണ്ണമായി മനസ്സിലാക്കാനും, HTML, CSS, JQuery എന്നിവയെ കുറിച്ചുള്ള അടിസ്ഥാന അറിവ് അഭികാമ്യമാണ്, എന്നാൽ നിങ്ങൾക്ക് SVG ആനിമേറ്റ് ചെയ്യണമെങ്കിൽ ആവശ്യമില്ല) നമുക്ക് ആരംഭിക്കാം!

ഞങ്ങൾ പിന്തുടരേണ്ട ഘട്ടങ്ങൾ ഇവയാണ്:

ശരിയായ ഫയൽ ഘടന സൃഷ്ടിക്കുക

പ്ലഗിൻ ഡൗൺലോഡ് ചെയ്ത് ബന്ധിപ്പിക്കുക

അഡോബ് ഇല്ലസ്‌ട്രേറ്ററിൽ രസകരമായ ഒരു ഔട്ട്‌ലൈൻ ചിത്രം വരയ്ക്കുക

ഞങ്ങളുടെ ചിത്രം ലേസി ലൈൻ കൺവെർട്ടറിലേക്ക് പരിവർത്തനം ചെയ്യുക

തത്ഫലമായുണ്ടാകുന്ന കോഡ് main.js-ലേക്ക് ഒട്ടിക്കുക

രുചിക്കായി കുറച്ച് CSS ചേർക്കുക

1. ശരിയായ ഫയൽ ഘടന സൃഷ്ടിക്കുക
Initializr സേവനം ഇതിന് ഞങ്ങളെ സഹായിക്കും, ഇവിടെ താഴെയുള്ള ചിത്രത്തിലെന്നപോലെ പാരാമീറ്ററുകൾ തിരഞ്ഞെടുക്കേണ്ടതുണ്ട്.

• ക്ലാസിക് H5BP (HTML5 ബോയിലർ പ്ലേറ്റ്)
• ടെംപ്ലേറ്റ് ഇല്ല
• വെറും HTML5 ശിവ്
• ചെറുതാക്കിയത്
• IE ക്ലാസുകൾ
• Chrome ഫ്രെയിം
• തുടർന്ന് ഡൗൺലോഡ് ക്ലിക്ക് ചെയ്യുക!

2. പ്ലഗിൻ ഡൗൺലോഡ് ചെയ്ത് ബന്ധിപ്പിക്കുക

ഇനീഷ്യലൈസർ ഏറ്റവും പുതിയ ജെക്വറി ലൈബ്രറിയുമായി വരുന്നതിനാൽ, ലേസി ലൈൻ പെയിന്റർ പ്രൊജക്റ്റ് റിപ്പോസിറ്ററിയിൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യേണ്ട ആർക്കൈവിൽ നിന്ന്, ഞങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് 2 ഫയലുകൾ മാത്രമേ കൈമാറേണ്ടതുള്ളൂ. ആദ്യത്തേത് 'jquery.lazylinepainter-1.1.min.js' (പ്ലഗിൻ പതിപ്പ് വ്യത്യാസപ്പെടാം) ഫലമായുണ്ടാകുന്ന ഫോൾഡറിന്റെ റൂട്ടിലാണ് ഇത് സ്ഥിതിചെയ്യുന്നത്. രണ്ടാമത്തേത് example/js/vendor/raphael-min.js ആണ്.

ഞങ്ങൾ ഈ 2 ഫയലുകൾ js ഫോൾഡറിൽ സ്ഥാപിക്കുന്നു. ഞങ്ങൾ അവയെ main.js-ന് മുമ്പായി ഞങ്ങളുടെ index.html-ലേക്ക് ഇനിപ്പറയുന്ന രീതിയിൽ ബന്ധിപ്പിക്കുന്നു:

3. Adobe Illustrator-ൽ രസകരമായ ഒരു ഔട്ട്‌ലൈൻ ചിത്രം വരയ്ക്കുക

ഇല്ലസ്ട്രേറ്ററിൽ ഞങ്ങളുടെ ഔട്ട്‌ലൈൻ ചിത്രം വരയ്ക്കുക (ഇത് ചെയ്യാനുള്ള എളുപ്പവഴി പെൻ ടൂൾ ആണ്)

ഞങ്ങളുടെ ഡ്രോയിംഗിന്റെ രൂപരേഖകൾ അടയ്ക്കാതിരിക്കേണ്ടത് ആവശ്യമാണ്, കാരണം ഞങ്ങളുടെ ഫലത്തിന് നമുക്ക് ഒരു തുടക്കവും അവസാനവും ആവശ്യമാണ്

ഫില്ലുകൾ ഉണ്ടാകരുത്

പരമാവധി ഫയൽ വലുപ്പം - 1000×1000 px, 40kb

ഒബ്‌ജക്റ്റ്>ആർട്ട്‌ബോർഡുകൾ>ആർട്ട്‌ബോർഡ് ബൗണ്ടുകൾക്ക് യോജിച്ച ഒബ്‌ജക്റ്റിന്റെ അതിരുകളിലേക്ക് ഒരു ക്രോപ്പ് ഉണ്ടാക്കാം

SVG ഫോർമാറ്റിൽ സംരക്ഷിക്കുക (സ്റ്റാൻഡേർഡ് സേവിംഗ് ക്രമീകരണങ്ങൾ നല്ലതാണ്)

ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് അറ്റാച്ച്മെന്റിലെ ഐക്കണുകൾ ഉപയോഗിക്കാം.

4. നമ്മുടെ ചിത്രം ലേസി ലൈൻ കൺവെർട്ടറിലേക്ക് പരിവർത്തനം ചെയ്യുക
ചുവടെയുള്ള ചിത്രത്തിലെ വിൻഡോയിലേക്ക് നിങ്ങളുടെ ഐക്കൺ വലിച്ചിടുക.
രൂപരേഖയുടെ കനം, നിറം, ആനിമേഷൻ വേഗത എന്നിവ കോഡിൽ തന്നെ മാറ്റാൻ കഴിയും, അത് പരിവർത്തനത്തിന് ശേഷം ദൃശ്യമാകും!

5. തത്ഫലമായുണ്ടാകുന്ന കോഡ് main.js-ലേക്ക് ഒട്ടിക്കുക
ഇപ്പോൾ ലഭിക്കുന്ന കോഡ് ശൂന്യമായ main.js ഫയലിൽ ഒട്ടിക്കുക
ഓപ്ഷനുകൾ:
സ്ട്രോക്ക്വിഡ്ത്ത് - ഔട്ട്ലൈൻ കനം
സ്ട്രോക്ക് കളർ - ഔട്ട്ലൈൻ നിറം
ദൈർഘ്യ പാരാമീറ്ററിന്റെ മൂല്യങ്ങൾ മാറ്റുന്നതിലൂടെ നിങ്ങൾക്ക് ഓരോ വെക്റ്ററിന്റെയും ഡ്രോയിംഗ് വേഗത മാറ്റാനും കഴിയും (സ്ഥിരസ്ഥിതി 600)

6. രുചിയിൽ കുറച്ച് CSS ചേർക്കുക
index.html-ൽ നിന്ന് ഒരു ഖണ്ഡിക നീക്കംചെയ്യുന്നു

ഹലോ വേൾഡ്! ഇത് HTML5 ബോയിലർപ്ലേറ്റ് ആണ്.

അതിനുപകരം ഞങ്ങളുടെ ആനിമേഷൻ നടക്കുന്ന ഒരു ബ്ലോക്ക് ഞങ്ങൾ തിരുകുന്നു

അപ്പോൾ ഞങ്ങൾ main.css ഫയലിലേക്ക് കുറച്ച് CSS ചേർക്കുന്നു, അത് മനോഹരമായി കാണപ്പെടും:

ബോഡി (പശ്ചാത്തലം:#F3B71C; ) #ഐക്കണുകൾ (സ്ഥാനം: സ്ഥിരം; മുകളിൽ:50%; ഇടത്:50%; മാർജിൻ: -300px 0 0 -400px; )

എല്ലാ ഫയലുകളും സംരക്ഷിക്കുക.
ഇപ്പോൾ ഒരു ആധുനിക ബ്രൗസറിൽ index.html തുറന്ന് പ്രഭാവം ആസ്വദിക്കൂ.

പി.എസ്. ഒരു ലോക്കൽ മെഷീനിൽ പ്രവർത്തിക്കുമ്പോൾ, ആനിമേഷന്റെ ആരംഭം കുറച്ച് സെക്കൻഡ് വൈകിയേക്കാം.

അഡോബ് ഇല്ലസ്‌ട്രേറ്ററും ആഫ്റ്റർ ഇഫക്റ്റുകളും
ഇമ്പോർട്ടും ലളിതമായ ആനിമേഷനും ഹലോ. ഇന്ന് നമ്മൾ ആഫ്റ്റർ ഇഫക്റ്റുകളിൽ ലളിതമായ ആനിമേഷനാണ് നോക്കുന്നത്.

ഉറവിടങ്ങൾ: അഡോബ് ഇല്ലസ്‌ട്രേറ്റർ സിസി
Adobe After Effects CC

ഇല്ലസ്ട്രേറ്ററിൽ വരച്ച് പഠിക്കാൻ തുടങ്ങാം.

വരയ്ക്കാം
1) പശ്ചാത്തലമായി ഒരു മഞ്ഞ ദീർഘചതുരം വരയ്ക്കുക

ചിത്രം 1 - ദീർഘചതുരം

2) ഒരു സർക്കിൾ വരച്ച് അതിൽ ഒരു ഗ്രേഡിയന്റ് പൂരിപ്പിക്കുക
നമുക്ക് സർക്കിളിൽ കുറച്ച് പ്രവർത്തിക്കാം:
- കോണ്ടൂരിലെ താഴത്തെ പോയിന്റ് ഇല്ലാതാക്കുക, ഞങ്ങൾക്ക് ഒരു ആർക്ക് ലഭിക്കും;
- ഒരു നേർരേഖ വരയ്ക്കുക, കമാനത്തിന്റെ അടിഭാഗം അടയ്ക്കുക, നമുക്ക് ഒരു അർദ്ധവൃത്തം ലഭിക്കും

ചിത്രം 2 - 1) സർക്കിൾ വരയ്ക്കുക; 2) ഗ്രേഡിയന്റ്; 3) പോയിന്റ് ഇല്ലാതാക്കുക

3) ഒരു ദീർഘചതുരം വരച്ച് അതിന്റെ പകർപ്പ് ഉണ്ടാക്കുക
- ഒരു ചാരനിറത്തിലുള്ള ദീർഘചതുരം;
- മറ്റൊരു ദീർഘചതുരം ഇരുണ്ട ചാരനിറമാണ്
4) കിരണങ്ങളുടെ എണ്ണം 3 ആയി സജ്ജീകരിച്ച് ഒരു നക്ഷത്രചിഹ്നത്തിൽ നിന്ന് ഒരു ത്രികോണം വരയ്ക്കുക

ചിത്രം 3 - 1) നേരായ വെളിച്ചം; 2) നേരായ ഇരുണ്ട; 3) ത്രികോണം

5) പേനയും ലളിതമായ രൂപങ്ങളും ഉപയോഗിച്ച് ഒരു പൂച്ചയെ വരയ്ക്കുക

ചിത്രം 4 - 1) തല; 2) കഴുത്ത്; 3) ശരീരം; 4) കാൽ; 5) വാൽ

ഇപ്പോൾ ഏറ്റവും പ്രധാനപ്പെട്ട നിമിഷം
നമുക്ക് ചിത്രങ്ങൾ ലെയറുകളായി വിതരണം ചെയ്യാം (ആനിമേറ്റുചെയ്യുന്നത് ഒരു പ്രത്യേക ലെയറിലാണ്)

ചിത്രം 5 - എല്ലാ ചിത്രങ്ങളും (പ്രധാന പാളികളിൽ ചുവപ്പ് അടയാളപ്പെടുത്തുക)

അത്രയേയുള്ളൂ, ഇപ്പോൾ നമുക്ക് സംരക്ഷിക്കാം.
സേവ് സെറ്റിംഗ്സ് നോക്കാം

ചിത്രം 6 - സംരക്ഷിക്കുക

ഇനി അടുത്ത ഘട്ടം. അഡോബ് ഇല്ലസ്ട്രേറ്റർ അടച്ച് ഇഫക്റ്റുകൾക്ക് ശേഷം തുറക്കുക.

ആഫ്റ്റർ ഇഫക്റ്റുകളിലേക്ക് ഇറക്കുമതി ചെയ്യുക
ഫയൽ - ഇറക്കുമതി - ഫയൽ - ഞങ്ങളുടെ സംരക്ഷിച്ച ഇല്ലസ്ട്രേറ്റർ ഫയൽ തിരഞ്ഞെടുക്കുക.
ഇല്ലസ്ട്രേറ്ററിൽ നിന്ന് ലെയറുകൾ ഇറക്കുമതി ചെയ്യാൻ നമുക്ക് തിരഞ്ഞെടുക്കാം; നമ്മൾ ഫൂട്ടേജ് ഇടുകയാണെങ്കിൽ, ലയിപ്പിച്ച ലെയറുകളുള്ള ഒരു ചിത്രം ലഭിക്കും, പക്ഷേ ഞങ്ങൾക്ക് അത് ആവശ്യമില്ല.

ചിത്രം 7 - രചനയായി ഇറക്കുമതി ചെയ്യുക

അത്രയേയുള്ളൂ, ഇറക്കുമതി ചെയ്തു.
ഇനി നമുക്ക് എന്താണ് ഉള്ളതെന്ന് നോക്കാം. കോമ്പോസിഷനിൽ ഡബിൾ ക്ലിക്ക് ചെയ്യുക, അതുവഴി അത് തുറക്കുകയും ഞങ്ങൾ ലെയറുകൾ കാണുകയും ചെയ്യുന്നു (എല്ലാം ശരിയായി ചെയ്താൽ, നിരവധി ലെയറുകൾ ഉണ്ടാകും). നമുക്ക് ഇത് ലഭിക്കുന്നു, ചിത്രം കാണുക

ചിത്രം 8 - ഓപ്പൺ കോമ്പോസിഷൻ

ഇപ്പോൾ നമ്മൾ ഇന്ന് ഇവിടെ വന്നത് ആനിമേഷനാണ്.

ആഫ്റ്റർ ഇഫക്റ്റുകളിൽ ആനിമേഷൻ
പാൻ ബിഹൈൻഡ് ടൂൾ (കുറുക്കുവഴി - Y) ഉപയോഗിച്ച് അമ്പടയാളത്തിന്റെ മുകളിൽ റൊട്ടേഷൻ പോയിന്റ് സജ്ജമാക്കുക. ഞങ്ങൾ ഒരു പോയിന്റ് എടുത്ത് ആവശ്യമുള്ളിടത്തേക്ക് നീക്കുക. തൽഫലമായി, ഇത് ഇതുപോലെ കാണപ്പെടും.

ചിത്രം 9 - പാൻ ടൂളും ലെയറുകളും

അത്രയേയുള്ളൂ, ഇപ്പോൾ നമുക്ക് ആനിമേഷനായി ലെയറുകളിലേക്ക് പോകാം.
ഞങ്ങൾക്ക് ഒരു Arrow, Head_cat ലെയർ ആവശ്യമാണ്.
നമുക്ക് അമ്പടയാളത്തിൽ നിന്ന് ആരംഭിക്കാം.
നമുക്ക് ലിസ്റ്റ് വികസിപ്പിക്കാം, അത് കണ്ടെത്തി ക്ലോക്കിൽ ക്ലിക്ക് ചെയ്യുക. അതിനാൽ ഞങ്ങൾ ആദ്യ പോയിന്റ് പൂജ്യം സെക്കൻഡിൽ സജ്ജമാക്കി. ആനിമേഷൻ ആകെ 2 സെക്കൻഡ് നീണ്ടുനിൽക്കും.
അതിനാൽ, നിങ്ങൾ ചെയ്യേണ്ട ക്രമീകരണങ്ങൾ ഇവയാണ് (ഞങ്ങൾ മൊത്തത്തിൽ 3 പോയിന്റുകൾ ഇടും):

രണ്ടാമത്	0	1	2
	+66	- 70	+66

ഇത് ഇങ്ങനെയായിരിക്കും:

ചിത്രം 10 - റൊട്ടേഷൻ അമ്പടയാളം

ഇനി നമുക്ക് പൂച്ചയുടെ തല ആനിമേറ്റ് ചെയ്യാം.
നമുക്ക് head_cat വികസിപ്പിക്കാം, സ്ഥാനം കണ്ടെത്താം .
ഇവിടെ 4 ഡോട്ടുകൾ ഉണ്ടാകും.
മറ്റുള്ളവരെ ബാധിക്കാതെ അവസാനത്തെ കോർഡിനേറ്റ് മാത്രം മാറ്റും.

രണ്ടാമത്	0.1	0.17	1.12	2.0
സ്ഥാനം	689.3	729.3	729.3	689.3

നമുക്ക് ചിത്രം നോക്കാം.

ചിത്രം 11 - സ്ഥാനം തല

അതിനാൽ, ആനിമേഷൻ തത്വം ഇതുപോലെയായിരുന്നു. അമ്പടയാളം വശങ്ങളിൽ നിന്ന് വശത്തേക്ക് നീങ്ങുന്നു, അത് പൂച്ചക്കുട്ടിയെ സമീപിക്കുമ്പോൾ, അത് തല അകത്തേക്ക് വലിക്കുന്നു, അൽപ്പനേരം ഈ സ്ഥാനത്ത് തുടരുന്നു, തുടർന്ന് അതിനെ അതിന്റെ സ്ഥാനത്തേക്ക് തിരികെ കൊണ്ടുവരുന്നു.

അവസാന ഘട്ടം

ഉത്പാദനം
നിങ്ങളുടെ ജോലിയിൽ നിന്ന് ഒരു പൂർത്തിയായ ഉൽപ്പന്നം നിങ്ങൾ സൃഷ്ടിക്കേണ്ടതുണ്ട്.
മെനുവിലേക്ക് പോകുക - റെൻഡർ ക്യൂവിൽ ചേർക്കുക
റെൻഡർ പാനൽ തുറക്കുകയും ഔട്ട്പുട്ട് മൊഡ്യൂളിൽ (രണ്ട് ക്ലിക്കുകൾ) ഔട്ട്പുട്ട് ഫോർമാറ്റ് തിരഞ്ഞെടുക്കുക. ഞാൻ *.mov എടുത്തു

ചിത്രം 12 - റെൻഡർ ചെയ്യുക

RENDER ബട്ടണിൽ ക്ലിക്ക് ചെയ്ത് ഫലം നേടുക (പാത്ത് വ്യക്തമാക്കാൻ മറക്കരുത്).
അത്രയേയുള്ളൂ.

എല്ലാവർക്കും ഹായ്! ഇന്ന് ഞാൻ അഡോബ് ഇല്ലസ്‌ട്രേറ്റർ പ്രോഗ്രാമിന്റെ കഴിവുകൾ വിവരിക്കാൻ ശ്രമിക്കും, അത് ഫ്ലാഷിന്റെ കഴിവുകളുമായി താരതമ്യം ചെയ്യുന്നു. ഇത് പ്രോഗ്രാമിന്റെ ആഗോള വിശകലനമായിരിക്കില്ല, മറിച്ച് ഈ പ്രോഗ്രാമിൽ ഞാൻ കണ്ടെത്തിയ ചില രസകരമായ സവിശേഷതകളുടെ വിവരണമാണ്. എല്ലാം ഒരു പോസ്റ്റിൽ പോസ്റ്റ് ചെയ്യുന്നതിനായി ഞാൻ പഠിച്ചപ്പോൾ ഓരോ കഷണം വിവരങ്ങൾ ശേഖരിച്ചു. ഞാൻ ഇല്ലസ്ട്രേറ്ററിന്റെ അതിപരിചയമുള്ള ഒരു ഉപയോക്താവല്ലെന്ന് ഞാൻ ഉടൻ സമ്മതിക്കും, കഴിഞ്ഞ ആറ് മാസമായി ഞാൻ ഇത് വരയ്ക്കാൻ മാത്രമാണ് ഉപയോഗിക്കുന്നത് (അതിന് മുമ്പ് ഞാൻ എല്ലാം ഫ്ലാഷിൽ വരച്ചു). ചിത്രകാരൻ സങ്കീർണ്ണമാണെന്നും എല്ലായ്പ്പോഴും അവബോധജന്യമല്ലെന്നും പലരും പരാതിപ്പെടുന്നു. ഒരു പരിധിവരെ, ഫ്ലഷിനുശേഷം ഈ പ്രോഗ്രാം സങ്കീർണ്ണമാണെന്ന് ഞാൻ സമ്മതിക്കുന്നു. എന്നാൽ ഇവിടെ പ്രധാന കാര്യം ഉപേക്ഷിക്കുകയല്ല, പഠനം തുടരുക എന്നതാണ്. രണ്ടാഴ്‌ചയ്‌ക്ക് ശേഷം ഒരു ചിന്ത ഉയർന്നുവരുന്നു, മുമ്പ് ഇത് കൂടാതെ ഞാൻ എങ്ങനെ കൈകാര്യം ചെയ്തു!

അപ്പോൾ, ചിത്രകാരനെ കുറിച്ച് എനിക്ക് എന്താണ് ഇഷ്ടപ്പെട്ടത്, ഫ്ലാഷിൽ ഇല്ലാത്തത് എന്താണെന്ന് ഞാൻ കണ്ടെത്തി?
1. ഞാൻ ഏറ്റവും ലളിതമായി തുടങ്ങും, എന്നാൽ അതേ സമയം ആവശ്യമാണ്. ഫ്ലാഷിൽ വസ്‌തുക്കൾ ഒരു സർക്കിളിൽ ക്രമീകരിക്കാൻ ശ്രമിക്കുക. മുമ്പ് ഒരു ഡെക്കോ ടൂൾ ഉണ്ടായിരുന്നു, പക്ഷേ അത് നീക്കം ചെയ്തു, പ്രത്യക്ഷത്തിൽ അനാവശ്യമായി കണക്കാക്കി. കൈകൊണ്ട് ചെയ്യുന്നത് കൂടുതൽ രസകരമാണെന്ന് ഞങ്ങൾ തീരുമാനിച്ചു. ഇല്ലസ്ട്രേറ്ററിന് ഈ ഫംഗ്‌ഷൻ ഉണ്ട്: ഇഫക്റ്റ് - ഡിസ്റ്റോർട്ട് & ട്രാൻസ്‌ഫോം - ട്രാൻസ്‌ഫോം.

എല്ലാം വേഗത്തിലും ലളിതവുമാണ്; ക്രമീകരണങ്ങളിൽ ഞങ്ങൾ മൂല്യങ്ങൾ (വസ്തുക്കൾ തമ്മിലുള്ള ദൂരം, പകർപ്പുകളുടെ എണ്ണം) സ്വയം സജ്ജമാക്കുന്നു.

2. സിഗ്-സാഗ്

അതിലും ലളിതവും എന്നാൽ ഉപയോഗപ്രദവുമായ കാര്യം. ഇത് ഒരു ചെറിയ കാര്യമാണെന്ന് തോന്നുന്നു, പക്ഷേ ഫ്ലാഷിൽ നിങ്ങൾ കൈകൊണ്ട് വരയ്ക്കണം, ഇല്ലസ്ട്രേറ്ററിൽ ഇത് നിമിഷങ്ങളുടെ കാര്യമാണ്.

3. വസ്തുക്കളുടെ രൂപഭേദം (വാർപ്പ്)

ഫ്ലാഷിൽ ഇതുപോലെ ഒന്നുമില്ല. ചുവടെയുള്ള ഉദാഹരണത്തിൽ, ലളിതമായ രൂപങ്ങൾ രൂപഭേദം വരുത്താനുള്ള 2 വഴികൾ മാത്രമേ ഞാൻ കാണിച്ചിട്ടുള്ളൂ (ഇഫക്റ്റ് - വാർപ്പ് - ആർക്ക്/ഫിഷ്). വാസ്തവത്തിൽ, പ്രോഗ്രാമിന്റെ ഏറ്റവും പുതിയ പതിപ്പിൽ അവയിൽ 15 എണ്ണം ഉണ്ട്.

4. കോണുകളുടെ ഓട്ടോമാറ്റിക് റൗണ്ടിംഗ് (വൃത്താകൃതിയിലുള്ള കോണുകൾ)

നിങ്ങൾക്ക് ഇത് സ്വമേധയാ ചെയ്യാൻ കഴിയും: ഒരു ഗ്രാഫിക് ഒബ്‌ജക്റ്റിൽ, തിരഞ്ഞെടുക്കുമ്പോൾ, ഒരു വെളുത്ത ഡോട്ടും ഒരു വൃത്താകൃതിയിലുള്ള വര ചിഹ്നവും മൂലയിൽ (എല്ലാ കോണുകളിലും) ദൃശ്യമാകും. ഞങ്ങൾ മൗസ് ഉപയോഗിച്ച് വലിച്ചിടുകയും നിങ്ങളുടെ അഭിരുചിക്കനുസരിച്ച് ക്രമീകരിക്കുകയും ചെയ്യുന്നു.

എന്നാൽ ഇത് ആകൃതികൾക്ക് മാത്രമേ ബാധകമാകൂ, പെൻസിൽ ലൈൻ ഉപയോഗിച്ച് ഞങ്ങൾ ഇത് കുറച്ച് വ്യത്യസ്തമായി ചെയ്യുന്നു - ഞങ്ങൾ ഒരു റൗണ്ടിംഗ് ഇഫക്റ്റ് പ്രയോഗിക്കുന്നു (ഇഫക്റ്റ് - സ്റ്റൈലൈസ് - റൗണ്ട് കോണുകൾ). പുറത്തുകടക്കുമ്പോൾ നമുക്ക് അതേ ഫലം ലഭിക്കും.

5. പരുക്കൻ

ഇഫക്റ്റ് ലളിതമായ ആകാരങ്ങളിൽ പ്രയോഗിക്കുന്നു (ഇഫക്റ്റ് - ഡിസ്റ്റോർട്ട് & ട്രാൻസ്ഫോം - റഫൻ). ലോ-പോളി 3D മോഡലുകളോട് സാമ്യമുള്ള ഒന്നാണ് ഔട്ട്പുട്ട്. ഇത് രസകരമാണെന്ന് ഞാൻ കരുതുന്നു :) ഏറ്റവും പ്രധാനമായി, ഇത് വളരെ ലളിതമാണ്.

6. പുക്കർ & ബ്ലോട്ട് (വലിക്കലും വീർക്കലും)
ചുവടെയുള്ള ചിത്രത്തിലെ ഉദാഹരണം:

7. ഫോം വിപുലീകരണം (ഓഫ്‌സെറ്റ് പാത്ത്)

ഫ്ലാഷിന് ഒരു എക്സ്പാൻഡ് ഫിൽ ഫംഗ്ഷൻ ഉണ്ട്; ഇല്ലസ്ട്രേറ്ററിൽ നിന്ന് വ്യത്യസ്തമായി പെൻസിൽ ലൈനുകളിൽ ഇത് പ്രവർത്തിക്കില്ല.

8. ബ്രഷുകൾ (ആർട്ട് ബ്രഷ്, പാറ്റേൺ ബ്രഷ്, സ്കാറ്റർ ബ്രഷ്)
ഉദാഹരണങ്ങൾക്കൊപ്പം ചുവടെയുള്ള ചിത്രം നോക്കുക:

9. ടെക്സ്ചർ ബ്രഷ്

കൂടാതെ, ഇല്ലസ്ട്രേറ്ററിൽ ഞാൻ എഴുതിയ നിരവധി ടെക്സ്ചർ ബ്രഷുകൾ ഉണ്ട്, അവ ഫ്ലാഷിന്റെ പുതിയ പതിപ്പിൽ എങ്ങനെ പ്രത്യക്ഷപ്പെട്ടു -. അഡോബ് ആനിമേറ്റിൽ ബ്രഷുകൾ ഉപയോഗിക്കുന്നത് വളരെ മന്ദഗതിയിലാണെന്ന് ശ്രദ്ധയിൽപ്പെട്ടു. അത്രയേയുള്ളൂ:(

10. ഇതൊരു യഥാർത്ഥ ട്രിക്ക് ആണോ എന്ന് എനിക്ക് ഉറപ്പില്ല, പക്ഷേ ബ്ലോബ് ബ്രഷ് എന്ന രസകരമായ പേരുള്ള ഒരു ബ്രഷിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. ടൂൾബാറിൽ സ്ഥിതി ചെയ്യുന്ന ഇത് ഉപയോഗിക്കാൻ വളരെ നല്ല ബ്രഷ് ആണ്. ഇതിന് ഒരു കൂട്ടം ക്രമീകരണങ്ങളുണ്ട്, എനിക്ക് ഇത് സാധാരണയേക്കാൾ കൂടുതൽ ഇഷ്ടമാണ്. വാക്കുകളിൽ അതിന്റെ ഗുണങ്ങൾ വിശദീകരിക്കാൻ പ്രയാസമാണ്, ഒരിക്കൽ അത് പരീക്ഷിക്കുന്നത് നല്ലതാണ്.

10.ഗ്രിഡിലേക്ക് വിഭജിക്കുക

മറ്റൊരു ഉപയോഗപ്രദമായ കാര്യം സ്പ്ലിറ്റ് ടു ഗ്രിഡ് (ഒബ്ജക്റ്റ്-പാത്ത്-സ്പ്ലിറ്റ് ടു ഗ്രിഡ്) ഫംഗ്‌ഷൻ ആണ്.ആകാരം തുല്യ ഭാഗങ്ങളായി മുറിക്കാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് നമ്മെ എന്താണ് ഓർമ്മിപ്പിക്കുന്നത്? അത് ശരിയാണ് - ഒരു ബഹുനില കെട്ടിടത്തിലെ ജാലകങ്ങൾ. ഡ്രോയിംഗിന് ഇത് ഒരു രസകരമായ കാര്യമാണെന്ന് ഞാൻ കരുതുന്നു, ഉദാഹരണത്തിന്, നഗര പ്രകൃതിദൃശ്യങ്ങൾ;)

ഇല്ലസ്ട്രേറ്ററിൽ അവതരിപ്പിച്ചിരിക്കുന്ന മറ്റൊരു ഉപയോഗപ്രദമായ ടൂൾ, ഒരുപക്ഷേ അതിന്റെ ആദ്യ പതിപ്പിന് ശേഷം. അതിന്റെ സഹായത്തോടെ നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയും, ഉദാഹരണത്തിന്, മരം ടെക്സ്ചറുകൾ:

12. നീക്കുക (വലത്തേക്ക് - രൂപാന്തരപ്പെടുത്തുക - നീക്കുക)

ഒരു വസ്തുവിനെ ഒരു നിശ്ചിത ദൂരത്തിൽ സ്ഥാനഭ്രഷ്ടനാക്കുന്നു. വേണമെങ്കിൽ, തിരശ്ചീനമായി / അല്ലെങ്കിൽ ലംബമായി തിരഞ്ഞെടുത്ത ഒബ്‌ജക്റ്റിൽ നിന്ന് ആവശ്യമുള്ള അകലത്തിൽ സ്ഥാപിക്കുന്ന ഒരു പകർപ്പ് നിങ്ങൾക്ക് ഉടനടി സൃഷ്ടിക്കാൻ കഴിയും. ഫ്ലാഷിന്റെ മുൻ പതിപ്പിന് ഈ ഫംഗ്‌ഷൻ നിർവഹിക്കുന്ന ഒരു പ്ലഗിൻ ഉണ്ടായിരുന്നു. നിർഭാഗ്യവശാൽ, അതിന്റെ പേര് ഞാൻ ഓർക്കുന്നില്ല.

തടസ്സമില്ലാത്ത പാറ്റേണുകൾ സൃഷ്ടിക്കുന്നതിന് ഇല്ലസ്ട്രേറ്റർ വളരെ സൗകര്യപ്രദമാണ് (ഒബ്ജക്റ്റ്-പാറ്റേൺ-മേക്ക്). യുടെ സൃഷ്ടിയോടെ ഞാൻ എത്ര ക്രോധത്തോടെയാണ് മിന്നലിൽ സങ്കീർണ്ണത വികസിപ്പിച്ചെടുത്തത് എന്ന് ഞാൻ ഓർക്കുന്നു. ഇല്ലസ്‌ട്രേറ്ററിന്റെ SS 2015 പതിപ്പിൽ, എല്ലാം ഓട്ടോമേറ്റഡ് ആണ്; കുറച്ച് ഗ്രാഫിക് ഘടകങ്ങൾ കയ്യിലിരിക്കെ, ഡസൻ കണക്കിന് വ്യതിയാനങ്ങളിൽ ഒരു പാറ്റേൺ സൃഷ്‌ടിക്കാൻ ഒരു കൂട്ടം ക്രമീകരണങ്ങൾ നിങ്ങളെ സഹായിക്കും. പ്രോഗ്രാമിന്റെ മുൻ പതിപ്പുകളിൽ, ഇതുവരെയുള്ള ഫ്ലാഷിലെന്നപോലെ എല്ലാം സ്വമേധയാ ചെയ്യേണ്ടതുണ്ട്.

(ശ്രദ്ധിക്കുക - ഒബ്ജക്റ്റ് - എക്സ്പാൻഡ് അപ്പിയറൻസ് ഫംഗ്ഷൻ ഉപയോഗിച്ച് പാറ്റേൺ വെക്റ്റർ എഡിറ്റ് ചെയ്യാവുന്ന ഒബ്ജക്റ്റാക്കി മാറ്റാം.

14. ഒബ്ജക്റ്റ് മൊസൈക്ക്

നിലവിലുള്ള ഒരു ചിത്രത്തെ അടിസ്ഥാനമാക്കി ഒരു വർണ്ണ പാലറ്റ് സൃഷ്ടിക്കുന്നു. ചിത്രീകരണത്തിലേക്ക് (ഓപ്പൺ) നിങ്ങൾ ഇഷ്ടപ്പെടുന്ന ചിത്രം ഇമ്പോർട്ട് ചെയ്യുക, തുടർന്ന് ഒബ്ജക്റ്റ് - ഒബ്ജക്റ്റ് മൊസൈക്ക് സൃഷ്ടിക്കുക. ക്രമീകരണങ്ങളിൽ ഉയരത്തിലും വീതിയിലും വിഭജനത്തിന്റെ ആവൃത്തി ഞങ്ങൾ വ്യക്തമാക്കുന്നു.

ഔട്ട്പുട്ടിൽ നമുക്ക് ലഭിക്കുന്നത്:

15. ബ്ലെൻഡ്

ഗ്രേഡിയന്റുകൾ സൃഷ്ടിക്കാൻ ഉപയോഗിക്കുന്നു. ചിത്രത്തിലെന്നപോലെ നിങ്ങൾക്ക് ഘട്ടം ഘട്ടമായുള്ള സംക്രമണങ്ങൾ സൃഷ്ടിക്കാൻ കഴിയും. ഞാൻ ഇത് പലപ്പോഴും ഉപയോഗിക്കുമെന്ന് ഞാൻ പറയില്ല, പക്ഷേ ഇത് ആർക്കെങ്കിലും ഉപയോഗപ്രദമാകും. ലളിതമായ പശ്ചാത്തല ചിത്രങ്ങൾ സൃഷ്ടിക്കാൻ ഇത് ഉപയോഗിക്കാമെന്ന് എനിക്ക് തോന്നുന്നു.

വസ്തുക്കളെ ക്ലോൺ ചെയ്യാനും ഈ ഉപകരണം ഉപയോഗിക്കാം. രണ്ട് ഒബ്‌ജക്റ്റുകൾ പരസ്പരം അകലത്തിൽ വയ്ക്കുക, ബ്ലെൻഡ് ഓപ്ഷനുകൾ പ്രയോഗിക്കുക, ഘട്ടങ്ങളുടെ എണ്ണം തിരഞ്ഞെടുക്കുക (ക്ലോൺ ചെയ്ത വസ്തുക്കളുടെ എണ്ണം).

16. ബിൽഡ് ഷേപ്പ് ടൂൾ. പ്രാകൃതങ്ങളുമായി പ്രവർത്തിക്കാൻ വളരെ സൗകര്യപ്രദമായ കാര്യം. ഫ്ലാഷിൽ, ഇത് എനിക്ക് സൗകര്യപ്രദമല്ലെന്ന് തോന്നി.

സെഗ്‌മെന്റുകൾ ഇല്ലാതാക്കാൻ Alt അമർത്തിപ്പിടിച്ച് തിരഞ്ഞെടുത്ത സെഗ്‌മെന്റുകളിൽ ക്ലിക്കുചെയ്യുക. തിരഞ്ഞെടുത്ത നിരവധി ഏരിയകളിൽ മൗസ് വലിച്ചിടുകയാണെങ്കിൽ - കണക്ഷനുകൾ.

ആഡ്-ഓൺ എന്നത് സ്വയമേവ മുറിക്കാനും ബന്ധിപ്പിക്കാനും മറ്റും സഹായിക്കുന്ന ഒരു ഉപകരണമാണ്. ഹൈലൈറ്റ് ചെയ്ത ഫോമുകൾ. എന്നെ സംബന്ധിച്ചിടത്തോളം, ഇത് വളരെ സൗകര്യപ്രദമല്ല; ഞാൻ പലപ്പോഴും ബിൽഡ് ഷേപ്പ് ടൂൾ ഉപയോഗിക്കുന്നു.

(ആർട്ട്ബോർഡുകൾ)

18. കസ്റ്റം ടൂൾ പാനൽ

നിങ്ങളുടെ സ്വന്തം ടൂൾബാർ സൃഷ്ടിക്കാനുള്ള കഴിവ്, അനാവശ്യമായവ ഉപേക്ഷിക്കുക, നിങ്ങൾ ഉപയോഗിക്കുന്നവ മാത്രം തിരഞ്ഞെടുക്കുക.

ഫ്ലാഷിൽ, ആർട്ട്ബോർഡുകൾ, അതായത് സീനുകൾ (സീൻ 1,2,3..) വെവ്വേറെ സ്ഥിതിചെയ്യുന്നു, നിങ്ങൾ അവയ്ക്കിടയിൽ മാറേണ്ടതുണ്ട് (Shift+F2). ഇല്ലസ്ട്രേറ്ററിൽ, അവയെല്ലാം നിങ്ങളുടെ കൺമുന്നിൽ സ്ഥാപിക്കാവുന്നതാണ്. ഒരേ ഡ്രോയിംഗിന്റെ നിരവധി പതിപ്പുകൾ നിങ്ങൾ നിർമ്മിക്കുമ്പോൾ ഇത് സൗകര്യപ്രദമാണ്, അതിനാൽ എല്ലാ ഓപ്ഷനുകളും താരതമ്യത്തിനായി നിങ്ങളുടെ കൺമുന്നിലുണ്ട്.

19.ഗ്രാഫിക് ശൈലികൾ ഉപയോഗിക്കുന്ന ഐസോമെട്രിക്സ്

ഗ്രാഫിക് ശൈലികൾ (ഗ്രാഫിക് ശൈലികൾ) ഉപയോഗിച്ച് 1 ക്ലിക്കിൽ (അല്ലെങ്കിൽ കൂടുതൽ കൃത്യമായി, 3 ക്ലിക്കുകളിൽ, കാരണം ഞങ്ങൾക്ക് 3 വശങ്ങളുണ്ട്;) ഉപയോഗിക്കാതെ ഐസോമെട്രി സൃഷ്ടിക്കുക എന്നതാണ് അവസാന കാര്യം. ഇത് എങ്ങനെ ചെയ്യാമെന്ന് ഞാൻ അടുത്ത തവണ വിവരിക്കും.

ഒരു വസ്തുവിനെ ഒരു ചിഹ്നത്തിലേക്ക് സംരക്ഷിക്കാനുള്ള കഴിവാണ് ചിത്രകാരന് ഫ്ലാഷുമായി പൊതുവായുള്ളത്, അതുപോലെ തന്നെ ഈ ചിഹ്നം ഫ്ലാഷിലേക്ക് മാറ്റാനും കഴിയും (ഇറക്കുമതി ഉപയോഗിച്ച് ഫ്ലാഷ്.ഐയിൽ ഫയൽ തുറക്കുക - ഘട്ടത്തിലേക്ക് ഇറക്കുമതി ചെയ്യുക).
ഇല്ലസ്ട്രേറ്ററിലെ ചിഹ്നത്തിന് ഫ്ലാഷിലെ അതേ ഗുണങ്ങളുണ്ട്.
ഉപസംഹാരമായി, ഇല്ലസ്ട്രേറ്ററിൽ, എന്റെ അഭിപ്രായത്തിൽ, ഇത് ഫ്ലാഷിനെക്കാൾ താഴ്ന്നതാണെന്ന് ഞാൻ എഴുതും. അതെ, അതെ, അങ്ങനെ ഒരു കാര്യമുണ്ട്. ഇതാണ് ഫിൽ ടൂൾ (പെയിന്റ് ബക്കറ്റ്). ഇല്ലയിൽ ഞാൻ എത്ര ശ്രമിച്ചാലും അത് ഫ്ലാഷിൽ കൂടുതൽ സൗകര്യപ്രദമാണ്.
എന്റെ കുറിപ്പുകൾ നിങ്ങൾക്ക് ഉപയോഗപ്രദമായെങ്കിൽ അല്ലെങ്കിൽ നിങ്ങളുടേതായ എന്തെങ്കിലും ചേർക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അഭിപ്രായങ്ങളിൽ സ്വാഗതം! എല്ലാവർക്കും ആശംസകൾ;)