Illustrator හි සජීවිකරණ සාදන ආකාරය. Adobe illustrator හි ඉඟි සහ උපක්‍රම: Illustrator හි උපක්‍රම. Illustrator හි චිත්රක නිර්මාණය කිරීමේ හැකියාව (Adobe Flash හා සසඳන විට). Illustrator හි SVG ගොනුවක් සකස් කිරීම

Web Graphics Optimization

ග්රැෆික් තොරතුරුපෙළට වඩා බොහෝ සෙමින් සම්ප්‍රේෂණය වන අතර, පින්තූර පැටවීමේ කාලය ඒවායේ ප්‍රමාණයට සමානුපාතික වේ ග්රැෆික් ගොනු. එබැවින්, වෙබ් පිටු වේගයෙන් පූරණය කිරීම සඳහා කුඩා ප්‍රමාණයේ කාවැද්දීමට අවශ්‍ය වේ ග්රැෆික් රූප, ඔවුන්ගේ ප්‍රශස්තිකරණය තුළින් සාක්ෂාත් කරගනු ලැබේ. රූප ප්‍රශස්තිකරණය එහි පරිවර්තනය ලෙස වටහාගෙන ඇති අතර, මෙම අවස්ථාවේ දී අවශ්‍ය රූපයේ ගුණාත්මකභාවය පවත්වා ගනිමින් අවම ගොනු ප්‍රමාණයක් සහතික කරයි, එය මූලික වශයෙන් ග්‍රැෆික් රූපවල වර්ණ ගණන අඩු කිරීම, සම්පීඩිත සහ විශේෂ ගොනු ආකෘති භාවිතා කිරීම සහ තනි තනිව සඳහා සම්පීඩන පරාමිතීන් ප්‍රශස්ත කිරීම මගින් සාක්ෂාත් කරගනු ලැබේ. රූප කොටස්.

Illustrator සතුව විවිධ පෙරදසුන් ක්‍රම සමඟින් ප්‍රශස්තිකරණ ක්‍රියාවලිය ඉක්මන් සහ කාර්යක්ෂම කරන රූප ප්‍රශස්තකරණ මෙවලම් ඇත. පෙරදසුන මඟින් ප්‍රශස්තිකරණය කළ රූපය තත්‍ය කාලීනව පෙනෙන්නේ කෙසේද යන්න පිළිබඳ තරමක් නිවැරදි අදහසක් ලබා දෙයි, එය ප්‍රශස්තිකරණ ප්‍රතිඵලය ඇගයීමට සහ නිවැරදි සැකසුම් සාර්ථකව තෝරා ගැනීමට උපකාරී වේ. ඔබට Illustrator හි සෘජුවම සාදන ලද පින්තූර දෙකම ප්‍රශස්ත කළ හැකිය, සහ වෙනත්, උදාහරණයක් ලෙස, වෙබ් අඩවියක තැබිය යුතු ඡායාරූප.

ගොනු මෙනුවෙන් එකම නමේ විධානය මඟින් හඳුන්වනු ලබන, වෙබ් සඳහා සුරකින්න කවුළුව තුළ ප්‍රශස්තකරණ පරාමිතීන් සකසා ඇත. වැඩසටහන ඔබට පෙරදසුන් මාතයන් හතරෙන් එකක් භාවිතා කිරීමට ඉදිරිපත් කරයි, නමුත් දෙකක් ප්‍රශස්තකරණයේ ගුණාත්මකභාවය තක්සේරු කිරීම සඳහා වඩාත් සුදුසු වේ:

• 2-Up (විකල්ප දෙකක්) නිශ්චිත සැකසුම් වලට අනුකූලව මුල් සහ ප්‍රශස්ත කළ රූපය එකවර බැලීම (රූපය 1);
• 4-Up (විකල්ප හතරක්) මෙම ප්‍රකාරයේදී, දර්ශන තොටුපළ ජනේල හතරකට බෙදා ඇත (රූපය 2) මුල් රූපය සහ ප්‍රශස්ත එකෙහි අනුවාද තුනක් ප්‍රදර්ශනය කිරීම සඳහා: පළමු අනුවාදය සකසා ඇත්තේ ප්‍රශස්තිකරණ අගයන් මත පදනම්ව, සහ අනෙක් දෙක වත්මන් ප්‍රශස්තිකරණ සැකසුම් වල වෙනස්කම් වේ.

විවිධ ප්‍රශස්තකරණ සැකසුම් සහ ඒවායේ පසුකාලීන දෘශ්‍ය සංසන්දනය සමඟ රූප සුරැකීමේ අවශ්‍යතාවය ඉවත් කරන බැවින්, හොඳම ප්‍රශස්තිකරණ විකල්පය සොයා ගැනීම සඳහා කාලය සැලකිය යුතු ලෙස ඉතිරි කර ගැනීමට මාතයන් දෙකම ඔබට ඉඩ සලසයි. මීට අමතරව, විවිධ සම්බන්ධතා විකල්පයන් යටතේ ප්රශස්ත රූපයේ ගුණාත්මකභාවය පමණක් නොව, එහි විශාලත්වය සහ පැටවීමේ කාලයද ඇගයීමට හැකිය. සංසන්දනය කිරීම සඳහා, වඩාත්ම පහසු මාදිලිය 4-Up (විකල්ප හතරක්) වන අතර එමඟින් රූපයේ ගුණාත්මකභාවය සහ එහි ප්‍රමාණය මත සම්පීඩනය හෝ palette අඩු කිරීමේ බලපෑම දෘශ්‍යමය වශයෙන් ඇගයීමට සහ අවසානයේ හොඳම ප්‍රශස්තිකරණ පරාමිතීන් තීරණය කිරීමට ඔබට ඉඩ සලසයි.

Illustrator ඔබට GIF, JPG, PNG-8 සහ PNG-24 ආකෘතිවලින් පමණක් නොව SWF සහ SVG වලින්ද වෙබ් චිත්‍රක ප්‍රශස්ත කිරීමට ඉඩ සලසයි. කුඩා වර්ණ සංඛ්‍යාවක් ඇති සුචිගත රූප GIF ආකෘතියෙන් සුරකිනු ලැබේ. JPG ආකෘතිය පූර්ණ-වර්ණ සහ අළු පරිමාණ රූප, ඡායාරූප, සහ Gradient Fills වැනි වර්ණ-පොහොසත් ග්‍රැෆික්ස් සුරැකීමට භාවිතා කරයි. විනිවිද පෙනෙන ප්‍රදේශ සහිත පූර්ණ-වර්ණ රූප සඳහා, PNG ආකෘතිය භාවිතා කරනු ලැබේ, එමඟින් ඔබට සුචිගත සහ සම්පූර්ණ-වර්ණ රූප සුරැකීමට ඉඩ සලසයි, PNG-8 ආකෘතියේ දී ප්‍රශස්ත කළ රූපයේ හැකි උපරිම වර්ණ ගණන 256 වේ. PNG-24 ආකෘතියේ රූපයට මිලියන ගණනක් වර්ණ තිබිය හැකි අතර, එය පෙනෙන්නේ එබැවිනි JPEG ආකෘතිය. PNG-24 සහ JPEG අතර වෙනස වන්නේ PNG-24 ආකෘතියේ පින්තූර ප්‍රශස්ත කිරීම සඳහා භාවිතා කරන සම්පීඩන ක්‍රමය ගුණාත්මකභාවය නැතිවීමට හේතු නොවන නමුත් එහි ප්‍රතිඵලයක් ලෙස ගොනු ප්‍රමාණය වැඩි වීමයි. SVG සහ SWF ආකෘති ග්‍රැෆික්ස්, පෙළ සහ අන්තර්ක්‍රියාකාරී සංරචක ඒකාබද්ධ කරන අතර ප්‍රශස්ත කළ හැක.

අපි සලකා බලමු නිශ්චිත උදාහරණයක්රූප ප්රශස්තකරණය. අපි හිතමු වෙබ් අඩවි ලාංඡනයක් Illustrator (රූපය 3), මුලින් සුරකින ලද්දේ AI ආකෘතියෙන්. වෙබය සඳහා එය වහාම ප්‍රශස්ත කිරීමට උත්සාහ කිරීම යහපත් දෙයකට මඟ පාදන්නේ නැත, මන්ද මෙම අවස්ථාවේ දී රූපය ස්වයංක්‍රීයව කපා හරිනු ඇත, එමඟින් විරූපණයේ ප්‍රති result ලයක් ලෙස ලැබෙන සෙල්ලිපියේ සැබෑ පිහිටීම සැලකිල්ලට නොගනී (රූපය 4 සහ 5)

එබැවින්, ගොනුව => අපනයනය (ගොනුව => අපනයනය) විධානය සමඟ PSD ආකෘතියට ලාංඡනය අපනයනය කිරීමට උත්සාහ කරමු, සාදන ලද රූපයේ විශාලත්වය 143 KB වනු ඇත. ලැබෙන PSD ගොනුව විවෘත කර File=>Save for Web විධානය භාවිතා කරන්න. රූපයට සම්බන්ධ සීමිත වර්ණ ගණන සැලකිල්ලට ගනිමින්, මෙම නඩුවේ GIF ආකෘතිය ප්රශස්ත වේ, නිශ්චිත සැකසුම් තීරණය කළ යුතුය. සැකසුම් සමඟ අත්හදා බැලීමෙන්, ඔබට එය සහතික කළ හැකිය හොඳම ගුණාත්මකභාවයවැඩසටහනේ පෙරනිමි සම්පීඩන ඇල්ගොරිතම, Selective ලබා දෙයි. සුමට කිරීම සම්බන්ධයෙන් ගත් කල, ශ්‍රේණියේ පිරවුමක් තිබීම නිසා, ශබ්ද උත්පාදන ශබ්දය සහිත ඇල්ගොරිතමයක් තෝරා ගැනීම වඩා හොඳය (රූපය 6). ප්‍රතිඵලයක් ලෙස ලැබෙන ප්‍රශස්තිකරණ ගොනුවේ ප්‍රමාණය 6.729 KB (රූපය 7) වනු ඇත, පසුබිමේ විනිවිදභාවය ආරක්ෂා වනු ඇත, එය HTML ගොනුව සමඟ GIF ආකෘතියෙන් රූපය සුරැකීමෙන් සත්‍යාපනය කිරීමට පහසුය (රූපය 8). මෙහි ප්‍රතිඵලයක් ලෙස, මෙම උදාහරණයේදී, emblem.html සහ emblem.gif යන ගොනු Primer1 ෆෝල්ඩරය තුළ ලබා ගන්නා ලදී.

බොත්තම්

ඕනෑම වෙබ් පිටුවක සැලසුමේ අනිවාර්ය අංගයක් වන්නේ චිත්‍රක පාලන බොත්තම් ය. ඔවුන් නොමැතිව පිටුවක් සිතාගත නොහැකිය. බොත්තම් ඇඳීම අද විශේෂ ආරක බවට පත් වී ඇති අතර, Illustrator ඔබට වඩාත් සංකීර්ණ විකල්ප නිර්මාණය කිරීමට ඉඩ සලසයි. උදාහරණයක් ලෙස, දැල් වස්තු ලෙස නිර්මාණය කර ඇති බොත්තම් සහ/හෝ උඩින් ආවරණ සහිත වෙස් මුහුණු සාමාන්‍ය ඒවාට වඩා ඉතා ආකර්ෂණීය ලෙස පෙනේ.

Illustrator හි වටකුරු, උත්තල බොත්තමක් සෑදීමේ විකල්පය සලකා බලන්න. අත්තනෝමතික වර්ණයකින් පුරවා ඇති රවුමක ස්වරූපයෙන් දෛශික වස්තුවක් අඳින්න (රූපය 9) සහ එය දැලක් බවට පරිවර්තනය කරන්න Object => Create Gradient Mesh (Object => Create a gradient mesh), පේළි හතරක් සහ හතරක් සඳහන් කරන්න. තීරු, සහ පෙනුම ලැයිස්තුවේ, 60 ට සමාන කේන්ද්‍ර උද්දීපනය කිරීමට විකල්පය තේරීම (රූපය 10). සෘජු තේරීම් මෙවලම තෝරන්න සහ වස්තුවේ ඉහළ වම් කෙළවරේ ක්ලික් කරන්න, එහි පිහිටා ඇති නැංගුරම් ලක්ෂ්ය තෝරා ගැනීම (රූපය 11). Swatches palette (රූපය 12) තුළ තේරීමෙන් අනුරූප සෛලයේ වර්ණය සුදු පැහැයට වෙනස් කරන්න.

Ellipse ටූල් එක ගෙන, මවුස් මාර්කර් එක කලින් සාදන ලද රවුමේ මැද තබා, Alt සහ Shift යතුරු අල්ලාගෙන, පැරණි එකට වඩා නව රවුම දිගු කරන්න, එවිට එය පැරණි එකට වඩා පික්සල 1-2ක් විශාල වේ. පැති. කළු පැහැති මායිමක් (ස්ට්රෝක්) 1-2 පික්සල් පළලක් ලබා දී එය රතු සිට සුදු දක්වා දිශාවට රේඩියල් අනුක්රමණයකින් පුරවන්න (රූපය 13). සාදන ලද දෛශික වස්තුව පික්සල 1-2 ක් දකුණට සහ පහළට ඇදගෙන යන්න, ඉන්පසු තේරීම ඉවත් නොකර එය මත දකුණු-ක්ලික් කර පිටතට යන්න. සන්දර්භය මෙනුව Arrange=>Send To Back තෝරන්න. රූපයේ දැක්වෙන බොත්තම සඳහා ප්රතිඵලය හිස් වනු ඇත. 14.

රීතියක් ලෙස, ඕනෑම වෙබ් පිටුවක එකම වර්ගයේ බොත්තම් කිහිපයක් ඇත, වෙනස් වේ, උදාහරණයක් ලෙස, ඒවා මත ඇඳ ඇති ඊතල දිශාවට පමණක්, වෙබ් අඩවිය වටා චලනය වන දිශාව පෙන්නුම් කරයි. බොත්තම් දෙකක් තිබීමේ සරලම අවස්ථාව සලකා බලමු, ඉන් එකක්, පහළ ඊතලයක් සහිතව, ඊළඟ පිටුවට ගමන් කිරීම අදහස් කරනු ඇත, සහ ඉහළ ඊතලයක් සහිත බොත්තමක් පෙර එකට ගමන් කිරීම අදහස් කරයි. ඊතල අච්චුවක් ලෙස, අපි සාමාන්‍ය ත්‍රිකෝණයක් ගනිමු, බහුඅස්‍ර මෙවලමෙන් අඳින ලද, කළු පැහැති තීන්ත ආලේප කර, වැඩි බලපෑමක් සඳහා, දැල් වස්තුවක් ලෙස ද නිර්මාණය කර ඇත. ඊතලය බොත්තම වෙත ගෙන ගොස් Align palette හි අනුරූප බොත්තම් භාවිතයෙන් එකිනෙකට සාපේක්ෂව සියලුම වස්තූන්ගේ පිහිටීම සකස් කරන්න. ප්රතිඵලය වන බොත්තම් වලින් පළමුවැන්න රූපයේ දැක්වේ. 15. Duplicate Layer Layers යන විධානය තේරීමෙන් බොත්තම සමඟ ස්ථරයේ පිටපතක් සාදා ගනිමු, ප්රතිඵලයක් වශයෙන් අපට සමාන ස්ථර දෙකක් ලැබෙනු ඇත. ඉන්පසු ස්තරයේ පිටපතේ ඇති ඊතලය තෝරා එය සන්දර්භය මෙනුවෙන් Transform=>Rotate Transformation=>Rotate විධානය තේරීමෙන් එය 180° කරකවන්න. රූපයේ දැක්වෙන පරිදි අපට එකම බොත්තම ලැබෙනු ඇත. 16. එක් ව්‍යාපෘතියක් සඳහා එකම වර්ගයේ බොත්තම් විවිධ ස්ථරවල එක් ගොනුවක ගබඩා කිරීම වඩාත් පහසු බව කරුණාවෙන් සලකන්න, එය මෙම අවස්ථාවේ දී පෙන්නුම් කෙරේ.

දැන් ඔබට එක් එක් බොත්තමෙහි ප්‍රශස්ත අනුවාද සුරැකිය යුතුය. පළමුව, පහළ ස්ථරය නොපෙනෙන ලෙස සකසන්න, මෙම නඩුවේ ඉහළ ස්ථරයේ බොත්තම සංරක්ෂණය වනු ඇත. File=>Save for Web විධානය තෝරන්න, බොත්තම් ප්‍රශස්තිකරණ පරාමිති වින්‍යාස කරන්න, උදාහරණයක් ලෙස, රූපයේ දැක්වෙන පරිදි. 17, සුරකින්න බොත්තම ක්ලික් කර ගොනු නාමයක් ඇතුළත් කරන්න. අවසානයේ සුරකින ලද බොත්තම රූපයේ දැක්වේ. 18. දැන් පහළ ස්ථරයට දෘශ්‍යතාව නැවත ලබා දී, ඉහළ ස්ථරය නොපෙනෙන ලෙස සකසා, දෙවන බොත්තම ඒ ආකාරයෙන්ම සුරකින්න, එයට වෙනත් නමක් ලබා දෙන්න. ප්රතිඵලය රූපයේ දැක්වේ. 19.

දැන් ඉතිරිව ඇත්තේ බොත්තම් වෙබ් පිටුවේ තරමක් පිළිගත හැකි බව සහතික කර ඒවා අභිරුචි පිටුවක තැබීමයි (රූපය 20). මෙහි ප්රතිඵලයක් වශයෙන්, මෙම උදාහරණයේ දී, Primer2.html ගොනුව සහ රූප ෆෝල්ඩරයේ (Primer2 ෆෝල්ඩරය) ග්රැෆික් රූප දෙකක් ලබා ගන්නා ලදී.

අවශ්ය නම්, ප්රශස්තිකරණ ක්රියාවලියේදී බොත්තමක් පෙත්තක් බවට පත් කිරීම පහසුය. මෙම අවස්ථාවෙහිදී, File=>Save for Web (File=>Save for Web) විධානය තෝරා ප්‍රශස්තිකරණ පරාමිති සැකසීමෙන් පසු, ඔබ මෙවලම් පුවරුවෙන් Slice Select මෙවලම තෝරා රූපය මත දෙවරක් ක්ලික් කරන්න, එය අවසානයේ සිදුවනු ඇත. අනුක්‍රමික අංක 1 (රූපය 21) සමඟ ස්වයංක්‍රීයව පෙත්තක් බවට පත් වේ. නැවත වරක් දෙවරක් ක්ලික් කිරීමෙන් Slice Options කවුළුව විවෘත වනු ඇත, එහිදී ඔබට සබැඳියක් සඳහන් කිරීමට අවශ්‍ය වන අතර, පෙත්තෙහි නම විකල්ප වශයෙන් වෙනස් කිරීමට සිදුවේ (රූපය 22), ඉන්පසු ප්‍රශස්ත කළ රූපය සුරකින්න. මෙම නඩුවේ ප්රතිඵලය වනුයේ Files Primer3.html (රූපය 23) සහ Primer3.gif (Primer3 ෆෝල්ඩරය).

අන්තර් ක්රියාකාරී මූලද්රව්ය

පිටුවක් ජීවයට ගෙන ඒමට එක් ක්‍රමයක් නම් එහි වෙනස් කරන නිර්මාණ අංග හඳුන්වා දීමයි පෙනුම(හෝ තත්වය) මූසිකයේ හැසිරීම මත පදනම්ව හෝ, වෙනත් ඕනෑම අවස්ථාවකදී, අඩු වාර ගණනක්: පරිමාණය, අනුචලනය, පැටවීම, දෝෂ, ආදිය.

එවැනි මූලද්‍රව්‍ය අතර වඩාත් ප්‍රසිද්ධ වන්නේ මූසිකයේ බලපෑම යටතේ පෙනුම වෙනස් කරන රෝල්ඕවර් (ඉංග්‍රීසි රෝල් ඕවර් රෝල් ඕවර්, ටර්න් ඕවර් වලින්) මූලද්‍රව්‍ය වේ. සාමාන්‍ය පෙරළීම් සඳහා උදාහරණ සජීවිකරණ බොත්තම් වේ. වෙනත් වෙබ් අඩවි සංචාලන අංග නිර්මාණය කිරීමේදී රෝල්වර්ස් බොහෝ විට භාවිතා වේ. යථාර්ථයේ දී, ඕනෑම පෙරළීමක් එකක් නොවේ, නමුත් (හතර දක්වා) රූප කිහිපයක්, ඒ සෑම එකක්ම නිශ්චිත සිදුවීමකට අනුරූප වේ. ප්රධාන සිදුවීම් පහත පරිදි සැලකේ: සාමාන්ය සාමාන්ය තත්වය, මූලද්‍රව්‍යයක් මත මූසික කර්සරය සැරිසැරීම සහ කර්සරය එය මත තබා ඇති විට වම් මූසික බොත්තම පහළට එබීම. න්‍යායාත්මකව, ක්ලික් කිරීමෙන් පසු වම් මූසික බොත්තම ක්ලික් කිරීම, බොත්තම මුදා හැරීමෙන් පසු ඉහළට, සක්‍රීය කලාපයෙන් ඉවත් වන විට පිටතට යන සිදුවීම් සම්බන්ධ විය හැකිය. කෙසේ වෙතත්, ප්රායෝගිකව, ඒවා බොහෝ විට පළමු සිදුවීම් තුන හෝ දෙක සඳහා පමණක් මූලද්රව්යය වෙනස් කිරීමට සීමා වේ.

සම්භාව්ය පෙරළීම්

සම්භාව්‍ය අර්ථයෙන්, පෙරළීම යනු GIF ආකෘතියේ ග්‍රැෆික් රූප මාලාවක් සහ ඊට අනුරූප HTML කේතයකි, එයට ස්තූතිවන්ත වන අතර, මූසිකයේ හැසිරීම අනුව, බ්‍රව්සර් කවුළුව තුළ එක් රූපයක් තවත් ප්‍රතිස්ථාපනය කරයි.

Illustrator යනු සම්භාව්‍ය අර්ථයෙන් සෘජුවම පෙරළීම් නිර්මාණය කිරීම සඳහා අදහස් නොකෙරේ, නමුත් එය ඔවුන් සඳහා මූලික අංගයන් වර්ධනය කිරීමට උපකාරී වේ. මෙම නඩුවේ අදහස වන්නේ පළමු සිදුවීමට අනුරූප වන රූපය සමඟ ස්ථරයක් නිර්මාණය කිරීමයි. ඉන්පසු ස්තරයේ පිටපතක් සාදා දෙවන සිදුවීමට ගැලපෙන පරිදි රූපය පරිවර්තනය කරන්න, යනාදිය. ප්‍රතිඵලයක් ලෙස ලැබෙන බහු ස්ථර රූපය PSD ගොනුවකට සංරක්‍ෂණය කර ඇති අතර, එහි පදනම මත Image Ready වැඩසටහනේ පෙරළීමක් සාදනු ලැබේ. Illustrator වැඩසටහන භාවිතා කිරීමේ වාසිය, වෙනත් බොහෝ අවස්ථාවන්හිදී මෙන්, වෙනත් ඒවායේ නොමැති එහි රසවත් විශේෂාංග ගණනාවක් වේ. මෘදුකාංග, දෛශික ග්‍රැෆික්ස් පරිවර්තනය කිරීමේ පහසුව සමඟ ඒකාබද්ධව.

මූසිකයේ හැසිරීම අනුව වර්ණය වෙනස් කරන සෙල්ලිපියක ස්වරූපයෙන් පෙරළීමක් නිර්මාණය කිරීමට උත්සාහ කරමු. Illustrator විවෘත කර කළු පැහැයෙන් පුරවා ඇති වටකුරු සෘජුකෝණාස්‍රයක හැඩයක් සාදන්න (රූපය 24), එහි පිටපතක් සාදා තිරයේ නිදහස් කොටසක තබන්න. සෘජුකෝණාස්‍රයේ පළමු පිටපත මධ්‍යයේ උද්දීපනයක් සහිත දැල් වස්තුවක් බවට පරිවර්තනය කරන්න (විධානය Object=>Create Gradient Mesh Object=>Create Gradient Mesh), පේළි හතරක් සහ තීරු දහයක් සඳහන් කරමින් (රූපය 25). සෘජුකෝණාස්‍රයේ දෙවන පිටපත සක්‍රිය කර රූපයේ දැක්වෙන පරිදි ආසන්න වශයෙන් අනුක්‍රමණ පිරවුමකට සකසන්න. 26. දැලක උඩින් ශ්‍රේණියේ වස්තුව උඩින් ඇතිරිලි කරන්න, අනුක්‍රමණ වස්තුවේ පාරාන්ධතාව 80% දක්වා අඩු කරන්න, සහ ප්‍රමාණය පික්සල 1කින් පමණ අවසානයේ ගැටීමක බලපෑම අනුකරණය කරන්න. ඉන්පසු වස්තූන් මුදුනේ ශිලා ලේඛනය මුද්රණය කරන්න. එහි මුල් ස්වරූපයෙන්, එය සාමාන්‍ය තත්වයට අනුරූප වන සුදු පැහැයක් ගැනීමට ඉඩ දෙන්න (රූපය 27), පසුව පෙරළීමේ තත්වය වෙනස් වූ විට, සෙල්ලිපියේ වර්ණය වෙනස් වේ, උදාහරණයක් ලෙස, මූසික සලකුණ කොළ පැහැයට හැරේ. මූසික බොත්තම එබූ විට (පහළ තත්ත්‍වය) එය මත සැරිසරන අතර (අවස්ථාවට වඩා) නිල් පැහැයට හැරේ.

මෙම අදියරේදී ස්ථර palette වෙත අවධානය යොමු කරන්න, එහි ඇත්තේ එක් ස්ථරයක් පමණි. Layers palette මෙනුවෙන් Duplicate Layer විධානය භාවිතා කිරීමෙන් මෙම ස්ථරයේ පිටපත් දෙකක් සාදන්න; palette තුළ ස්ථර තුනක් ඇත (රූපය 28). ඉන්පසු ස්ථරයේ පළමු පිටපතෙහි ශිලා ලේඛනයේ වර්ණය කොළ පාටට වෙනස් කරන්න, දෙවන පිටපතෙහි නිල් (රූපය 29). එහි ප්රතිඵලයක් වශයෙන්, පෙරළීම සඳහා අවශ්ය හිස් ලබා ගනු ඇත.

සාදන ලද රූපය PSD ආකෘතියට අපනයනය කරන්න, ස්ථර සංරක්ෂණය කරන්න, File=>Export විධානය භාවිතා කර RGB වර්ණ ආකෘතිය තෝරන්න (රූපය 30). ImageReady වැඩසටහනේ සාදන ලද PSD ගොනුව විවෘත කරන්න (රූපය 31 සහ 32). Animation palette මෙනුවෙන් Make Frames From Layers විධානය තේරීමෙන් ස්ථර මත පදනම්ව රාමු සාදන්න. සජීවිකරණ කවුළුව රූපයේ මෙන් පෙනෙනු ඇත. 33. මෙම අවස්ථාවේදී, Rollovers palette තුළ මුලින් තනි Normal තත්වයක් නිර්මාණය වනු ඇත.

ඉන්පසුව, සජීවිකරණ කවුළුව තුළ, ප්රේරණය කරන ලද තත්වයට අනුරූප රාමුව තෝරන්න, සහ ස්ථර 1 පිටපත් ස්තරය ස්වයංක්රීයව Layers palette තුළ තෝරා ගනු ලැබේ (රූපය 34). Rollovers palette වෙත ගොස් Create Rollover state බොත්තම මත ක්ලික් කරන්න (පෙරළීමේ තත්වයක් සාදන්න) fig. 35, එය රෝල්වර්ස් palette (රූපය 36). ඒ ආකාරයෙන්ම Down State එකක් සාදන්න. Rollovers palette හි සාමාන්‍ය තත්වය සක්‍රිය කර සාමාන්‍ය තත්වයට අනුරූප විය යුතු එකක් හැර Animation palette හි ඇති සියලුම රාමු මකන්න. එහි ප්‍රතිඵලයක් වශයෙන්, එක් එක් පෙරළීමේ ප්‍රාන්තය සඳහා සජීවිකරණ පුවරුවේ එක් රාමුවක් පමණක් ඇත (රූපය 37, 38 සහ 39).

සහල්. 38. රූපය, සජීවිකරණ කවුළුව සහ අධි රාජ්‍ය සඳහා ස්ථර සහ රෝල්වර්ස් පැලට් බැලීම

මෙවලම් තීරුවේ පෙරදසුන් පෙරදසුන පෙරදසුන ක්ලික් කර බ්‍රවුසර කවුළුව වෙත යාමෙන් ප්‍රතිඵලය පරීක්ෂා කරන්න (රූපය 40). ඊට පසු, File=>Save Optimized විධානය භාවිතයෙන් ගොනුව සුරකින්න සහ HTML සහ Images (*.html) විකල්පය සඳහන් කරන්න. මෙහි ප්රතිඵලයක් වශයෙන්, මෙම උදාහරණයේ දී, Primer4.html ගොනුව සහ රූප ෆෝල්ඩරය තුළ ග්රැෆික් රූප මාලාවක් ලබා ගන්නා ලදී.

සහල්. 40. Rollover මූලද්‍රව්‍ය සහිත බ්‍රව්සර් කවුළුව

SVG පෙරළීම්

වැඩි වැඩියෙන් ජනප්‍රිය SVG (පරිමාණය කළ හැකි දෛශික ග්‍රැෆික්ස්) ආකෘතිය දෛශික ග්‍රැෆික්ස්), XML ප්‍රමිතිය මත පදනම්ව නිර්මාණය කර ඇති අතර, ඔබට විවිධ අන්තර්ක්‍රියාකාරී මූලද්‍රව්‍ය, විශේෂයෙන් පෙරළීම් ලබා ගැනීමට ඉඩ සලසයි, නමුත් ප්‍රායෝගිකව මෙය සම්පූර්ණයෙන්ම වෙනස් ලෙස ක්‍රියාත්මක වේ. සම්භාව්‍ය ඒවා මෙන් නොව, අන්තර්ක්‍රියාකාරී SVG rollovers නිර්මාණය කිරීම සඳහා, අනුරූප HTML කේතය සම්පූර්ණයෙන්ම ස්වයංක්‍රීයව ජනනය වන විට, JavaScript භාෂාව පිළිබඳ දැනුම සහ වස්තු-නැඹුරු වැඩසටහන්කරණයේ මූලික මූලධර්ම පිළිබඳ අවබෝධයක් අවශ්‍ය බව සඳහන් කිරීම වටී.

SVG වස්තූන් සමඟ වැඩ කිරීම සඳහා විශේෂ palette SVG අන්තර්ක්‍රියාකාරීත්වයක් ඇත, එය විධානය භාවිතයෙන් පහසුවෙන් විවෘත කළ හැකිය කවුළුව => SVG අන්තර්ක්‍රියාකාරීත්වය (කවුළුව => SVG අන්තර්ක්‍රියාකාරීත්වය) fig. 41.

අන්තර්ක්‍රියාකාරී බොත්තමක ​​උදාහරණය භාවිතයෙන් පෙරළීමක් නිර්මාණය කිරීම සඳහා මෙම විකල්පය සලකා බලමු, මූසිකය සැරිසැරීමේදී සෙල්ලිපියේ වර්ණය කළු සිට නිල් දක්වා වෙනස් වන අතර මූසිකය ක්‍රියාකාරී කලාපයෙන් පිටවන විට නැවත කළු බවට පරිවර්තනය වේ.

වටකුරු දාර සහිත සෘජුකෝණාස්රාකාර බොත්තමක් සාදා ඒ සඳහා සුදුසු අනුක්‍රමික පිරවුමක් තෝරන්න, උදාහරණයක් ලෙස රූපයේ දැක්වෙන පරිදි. 42. Transparence palette හි ඇති බොත්තමේ විනිවිදභාවය සකසන්න.මෙම උදාහරණයේදී පාරාන්ධතා අගය 50% ලෙස සකසා ඇත. බොත්තමෙහි පිටපතක් සාදන්න, එය තද කොළ වලින් පුරවන්න (රූපය 43), ඉන්පසු එය දැල් වස්තුවක් බවට පරිවර්තනය කරන්න Object => Create Gradient Mesh විධානය, පේළි හතරක් සහ තීරු දහයක් සඳහන් කරමින්, සහ පෙනුම ලැයිස්තුවේ (බලන්න) To Center විකල්පය තේරීමෙන් සහ Highlight අගය 100 ට සැකසීමෙන්. දැල් වස්තුව සහිත ස්ථරයේ පාරාන්ධතාවය 40% දක්වා අඩු කරන්න (රූපය 44). ග්‍රේඩියන්ට් එකකට උඩින් දැල් වස්තුවක් තබන්න, බොත්තම රූපයේ පෙන්වා ඇති ආකාරයට සමාන වනු ඇත. 45.

සහල්. 44. බොත්තමක ​​පිටපතක් දැල් වස්තුවක් බවට පත් කරන්න

අපේක්ෂිත ශිලා ලේඛනය සමඟ බොත්තම සම්පූර්ණ කර Align palette හි අනුරූප බොත්තම් භාවිතයෙන් එහි පිහිටීම සකස් කරන්න. ප්රතිඵලය රූපයේ එකිනෙකට ඉහලින් ඇති වස්තූන් තුනක් සහිත එක් ස්ථරයක් අඩංගු වනු ඇත (රූපය 46). උපලේඛනගත සිදුවීම් පෙළ වස්තුවකට සාපේක්ෂ වනු ඇත, එබැවින් පහසුව සඳහා, වස්තුව මත දෙවරක් ක්ලික් කර නව නමක් ඇතුළත් කිරීමෙන් එහි නම Text ලෙස වෙනස් කරන්න. ඒ හා සමානව, ස්ථරයේ නම ස්ථරය 1 සිට ස්ථරය දක්වා වෙනස් කරන්න (රූපය 47).

සිදුවීම් සැකසීමට JavaScript ක්‍රියා පටිපාටි භාවිතය ඇතුළත් වේ, එබැවින් ඔබ මෙම ක්‍රියා පටිපාටි විස්තර කරන ගොනුවක් ඇතුළත් කළ යුතුය. එය Events.js ලෙස හඳුන්වනු ලබන අතර ස්ථාපනය කිරීමෙන් පසු Sample Files\Sample Art\SVG\SVG ෆෝල්ඩරය තුළ තැටියට සුරැකේ. Adobe වැඩසටහන්චිත්ර ශිල්පියා. Events.js ගොනුව සම්බන්ධ කිරීම සඳහා, JavaScript ගොනු SVG අන්තර්ක්‍රියාකාරී විධානය භාවිතා කරන්න (රූපය 48). ඊළඟට, ඔබ එකතු කරන්න බොත්තම ක්ලික් කර ඔබේ දෘඪ තැටියේ අවශ්ය ගොනුව සොයා ගත යුතුය. ඔහුගේ නම URL ක්ෂේත්රයේ දිස්වන විට (රූපය 49), Done බොත්තම ක්ලික් කරන්න.

සහල්. 48. JavaScript ගොනු විධානය තේරීම

ඊළඟට, ඔබට පෙළ වස්තුව සඳහා මූසික සිදුවීම් සඳහා ප්‍රතිචාරයක් අර්ථ දැක්විය යුතුය. පෙළ වස්තුව තෝරන්න, SVG අන්තර්ක්‍රියාකාරී තාලයේ සිදුවීම් ක්ෂේත්‍රය තුළ, mouseover elemColor (evt, "Text", "#3333FF") සිදුවීම තෝරන්න, මෙයින් අදහස් කරන්නේ මූසිකය පෙළ වස්තුවට ඉහළින් ඇති විට එහි වර්ණය වෙනස් වන බවයි. නිල් (රූපය 50). මූසිකය සක්‍රිය ප්‍රදේශයෙන් ඉවත් වූ පසු අකුරු වර්ණය කළු පැහැයට හැරවීම සඳහා, ඔබට තවත් onmouseout සිදුවීමක් නිර්මාණය කිරීමට අවශ්‍ය වනු ඇත, එය SVG අන්තර් ක්‍රියාකාරීත්වය palette හි සිදුවීම් ක්ෂේත්‍රයෙන් තෝරන්න. ඉන්පසුව ක්‍රියාකාරී රේඛාවේ elemColor (evt, "Text", "#000000") යන පෙළ ඇතුළත් කරන්න, මෙය වර්ණය කළු පැහැයට හැරේ (රූපය 51).

සහල්. 51. පෙළ වස්තුව සඳහා SVG අන්තර් ක්‍රියාකාරීත්වයේ තලයේ අවසාන පෙනුම

සාදන ලද පෙරළීම SVG ගොනුවක් ලෙස File=>Save as (File=>File type SVG ආකෘතියෙන්) සුරකින්න, පසුව SVG ගොනුව සුරැකීමේ විකල්ප රූප සටහන 52 හි පෙන්වා ඇති පරිදි සකසන්න. සුරැකීමෙන් පසුව ඔබට ලැබෙන්නේ එකක් පමණි. SVG දිගුව සහිත තනි ගොනුවක් මිස දෙකක් නොව, සම්භාව්‍ය පෙරළීමකදී මෙන්, මෙම අවස්ථාවේදී Primer5.svg (Primer5 ෆෝල්ඩරය) ගොනුව ලැබුණි.කෙසේ වෙතත්, පෙරළීම සැබවින්ම ක්‍රියාත්මක වීමට නම්, ඔබ අතිරේකව පිටපත් කළ යුතුය. Events.js ගොනුව ජාවාස්ක්‍රිප්ට් ක්‍රියා පටිපාටි විස්තරයෙනි.මෙයින් පසු, ඔබට පෙරළීමේ ක්‍රියාකාරීත්වය පරීක්ෂා කළ හැක ප්‍රතිඵලය රූපය 53 හි පෙන්වා ඇති ආකාරයට දිස්වේ.

SVG සජීවිකරණය

සජීවිකරණය ප්‍රකාශ කිරීමට SVG ආකෘතිය ද භාවිතා කළ හැක. සරල සජීවිකරණ මූලද්‍රව්‍යයක් නිර්මාණය කිරීමට උත්සාහ කරමු (මෙම අවස්ථාවේදී එය සමාගම පිළිබඳ තොරතුරු වනු ඇත), ඔබ මූසිකය අනුරූප ග්‍රැෆික් වස්තුව මත තබා ඇති විට තිරය මත දිස්වන අතර ඔබ අන්තර්ක්‍රියාකාරී මූලද්‍රව්‍යයෙන් මූසිකය ඉවත් කරන විට අතුරුදහන් වේ.

රූපයේ දැක්වෙන පරිදි පහත දැක්වෙන ග්‍රැෆික් සහ පෙළ වස්තු මාලාව ආසන්න වශයෙන් නිර්මාණය කරමු. 54. Layers palette හි ඇති ඊලඟ වස්තුවේ නම අනුක්‍රමිකව ක්ලික් කර ඇතුල් කිරීමෙන් නිර්මාණය කරන ලද සියලුම වස්තූන් පහසු ආකාරයකින් නැවත නම් කරමු. කැමති නම(රූපය 55). රූපයේ දක්වා ඇති ඒවා බව කරුණාවෙන් සලකන්න. 56 වස්තු Text1, Text2, Text3 සහ Path1 සෑම විටම දෘශ්‍යමාන වනු ඇත, අනෙක් සියල්ල ඔබ Text1 වස්තුව මත මූසිකය ගෙන ගිය විට පමණි.

සහල්. 54. රූපයේ මුල් දර්ශනය

SVG Interactivity palette වෙතින් JavaScript ගොනු විධානය භාවිතයෙන්, Add බොත්තම ක්ලික් කිරීමෙන්, ඔබගේ දෘඪ තැටියේ අවශ්‍ය ගොනුව වෙත යොමු කිරීමෙන් සහ Done බොත්තම ක්ලික් කිරීමෙන් JavaScript ක්‍රියා පටිපාටි විස්තර කරන Events.js ගොනුව ඇතුළත් කරන්න.

Text1 වස්තුව සඳහා මූසික සිදුවීම් සඳහා ප්‍රතිචාරයක් නිර්වචනය කරන්න. පෙළ වස්තුව තෝරන්න, SVG අන්තර්ක්‍රියාකාරී තලයෙහි සිදුවීම් ක්ෂේත්‍රය තුළ, onmouseover සිදුවීම තෝරන්න සහ පහත පේළියේ elemShow(evt, "Text4") පෙළ ඇතුළත් කරන්න; elemShow(evt, "Path2") . එහි ප්‍රතිඵලයක් ලෙස, මූසිකය Text1 වස්තුවට ඉහළින් ඇති විට, Text4 සහ Path2 වස්තු දෘශ්‍යමාන වනු ඇත. සිදුවීමක් සිදු වූ විට ක්‍රියා කිහිපයක් සිදු කළ යුතු නම්, ඒවා “;” ලකුණ භාවිතයෙන් සඳහන් කළ යුතු බව කරුණාවෙන් සලකන්න. ඉන්පසු onmouseout සිදුවීම සඳහා සමාන මෙහෙයුමක් සිදු කරන්න, ඒ සඳහා පෙළ ඇතුළත් කරන්න, එයින් අදහස් කරන්නේ වස්තූන් සැඟවීම (රූපය 57).

File=>Save as command භාවිතා කරමින් ප්‍රතිඵලය SVG ගොනුවක් ලෙස සුරකින්න, ගොනු නාමය සඳහන් කරමින්, ගොනු ආකාරයේ ක්ෂේත්‍රයේ SVG ආකෘතිය තෝරා, පසුව රූපයට අනුකූලව SVG ගොනුව සුරැකීමේ විකල්ප සැකසීම. 58. සුරැකීමෙන් පසුව, Primer6.svg ගොනුව ලැබෙනු ඇත (Primer6 ෆෝල්ඩරය). Events.js ගොනුව මෙම ගොනුව සහිත ෆෝල්ඩරයට පිටපත් කිරීමට අමතක නොකරන්න. මෙයින් පසු ඔබ coz ධාවනය කරන්නේ නම් මෙම ගොනුව, එවිට ඔබට රූපයේ දැක්වෙන ප්රතිඵලය පෙනෙනු ඇත. 59. ඔබට අවශ්‍ය දේ මෙයයි. අපගේ සැලසුම්වලට ඇතුළත් නොවූ එකම දෙය වූයේ පූරණය වන විට Text 4 සහ Path 2 වස්තු වල මුල් පෙනුමයි. මෙම අඩුපාඩුව ඉවත් කිරීම සඳහා, වස්තු දත්ත දෙකම එකවර තෝරා ඒවා සඳහා ක්‍රියාවක් සාදන්න elemHide(evt, "Text4"); elemHide(evt, "Path2") onload ඉසව්වේ (රූපය 60). ගොනුව නැවත සුරකින්න සහ Text4 සහ Path2 වස්තූන් දැන් පෙනෙන්නේ ඔබ Text1 වස්තුව මත සැරිසරන විට පමණක් බව සහතික කර ගන්න.

GIF සජීවිකරණය

සජීවිකරණ gif ඇතුළුව වෙබ් සජීවිකරණයකින් තොරව ඕනෑම වෙබ් පිටුවක් සිතාගත නොහැකිය. ඒවා නිර්මාණය කිරීම සඳහා ඇති එක් විකල්පයක් නම් Adobe ImageReady යෙදුම භාවිතා කිරීමයි, එය වෙනත් දේ අතර, ස්ථර වලින් සජීවිකරණ නිර්මාණය කිරීමට ඉඩ සලසයි. මෙම අවස්ථාවෙහිදී, බහු ස්ථර රූපයම ඇතුළුව විවිධ යෙදුම්වල සකස් කළ හැකිය Adobe Illustrator.

Window=>Symbols විධානය සමඟින් විවෘත කරන ලද, Symbols palette වෙතින් හෝ Window=>Symbol Libraries විධානය භාවිතයෙන් විවෘත කළ හැකි එක් සංකේත පුස්තකාලයකින් මූලද්‍රව්‍ය මත පදනම්ව සජීවිකරණයක් නිර්මාණය කිරීම ඉතා පහසුය. ).

උදාහරණයක් ලෙස, අපි ඕනෑම සංකේත වස්තුවක ප්‍රමාණය වැඩි කිරීමට උත්සාහ කරමු; වස්තුව වැඩි කිරීමේ ක්‍රියාවලියේ ප්‍රධාන අදියර වෙනම ස්ථර මත සැකසිය යුතුය. පළමුව, සංකේත වස්තූන් එකකට ඉහළින් තබන්න, ඉන්පසු එක් එක් වස්තුවේ ප්‍රමාණය වැඩි කරන්න, උදාහරණයක් ලෙස රූපයේ දැක්වෙන පරිදි. 61. ප්රතිඵලයක් වශයෙන්, බොහෝ වස්තූන් සහිත එක් ස්ථරයක් ස්ථර palette තුළ නිර්මාණය වනු ඇත (රූපය 62). ඔබ මෙම රූපය PSD ආකෘතියට කෙලින්ම අපනයනය කරන්නේ නම්, එය කිසිවක් ලබා නොදේ, එහි ඇත්තේ එක් ස්ථරයක් පමණක් වන අතර, ස්වාභාවිකවම, ඔබ ImageReady වැඩසටහනේ PSD ගොනුව විවෘත කරන විට, එහි ඇත්තේ එක් ස්ථරයක් පමණි. එමනිසා, ඔබ මුලින්ම විවිධ ස්ථර මත වස්තූන් තැබිය යුතුය. මෙය කළ හැකිය විවිධ ක්රමලේසිම ක්‍රමය තමයි මුලින්ම Layer palette එකේ Layer 1 තෝරලා Release to Layer කියන විධානය භාවිතා කිරීම. එහි ප්‍රතිඵලය වනුයේ එක් එක් වස්තුව තමන්ගේම ස්තරය වෙත ගෙන යනු ඇත, නමුත් ඒවා සියල්ලම 1 වන ස්ථරයේ කැදලි වනු ඇත. එම නිසා, ඔබට පසුව ලේයර් 1 ස්ථරයට ඉහලින් ඇති පරිදි සියලුම කැදැලි ස්ථර ලේයර් පැලට් එකේ ඉහලට අතින් ඇදගෙන යාමට සිදුවනු ඇත, ඉන්පසු දැන් හිස් වූ 1 වන ස්ථරය මකා දමන්න (රූපය 63). රූපයේ දැක්වෙන පරිදි සැකසීම් සමඟ File=>Export විධානය භාවිතයෙන් පින්තූරය PSD ආකෘතියට අපනයනය කරන්න. 64.

ImageReady වැඩසටහනේ සාදන ලද PSD ගොනුව පූරණය කරන්න (රූපය 65 සහ 66). Animation Make Frames From Layers palette මෙනුව විවෘත කරන්න. එහි ප්‍රති result ලයක් ලෙස, රාමු පහක් සාදනු ලබන අතර, ඒ සෑම එකක්ම තමන්ගේම ස්තරයට අනුරූප වන අතර, සජීවිකරණ පුවරුවේ කවුළුව රූපයේ මෙන් පෙනෙනු ඇත. 67.

මෙයින් පසු, මෙම නඩුවේ සාදන ලද එක් එක් රාමු වල කාලසීමාව සකසන්න, සියලු රාමු සඳහා කාලසීමාව 0.2 s ලෙස සකසා ඇත. ඉන්පසු File=>Save Optimized (File=>Save with optimization) විධානය භාවිතා කරමින් ප්‍රශස්තිකරණය සමඟ සජීවිකරණය සුරකින්න. ප්රතිඵලය රූපයට සමාන විය හැක. 68.

Illustrator හි Live Blends කාර්යයන් භාවිතා කිරීම සඳහා ImageReady හි සජීවිකරණයට පහසුවෙන් පරිවර්තනය කළ හැකි හිස් තැන් ලබා ගැනීම වඩාත් පහසු වේ. Illustrator සහ ImageReady මෙම ඒකාබද්ධ භාවිතය GIF සජීවිකරණ නිර්මාණය කිරීමේ ක්‍රියාවලිය සැලකිය යුතු ලෙස වේගවත් කරයි.

නිදසුනක් ලෙස, අත්තනෝමතික බහු-වර්ණ වස්තු දෙකක් අඳින්න, ඉන්පසු සුදුසු පරාමිතීන් සමඟ මිශ්ර සබැඳියක් සමඟ ඒවා සම්බන්ධ කරන්න (රූපය 69). රූපය තනි තට්ටුවක් මත ඇති බැවින් සජීවිකරණය නිර්මාණය කිරීම සඳහා මෙම ගොනුව කෙලින්ම භාවිතා කළ නොහැක (රූපය 70). එමනිසා, ඔබ මුලින්ම මිශ්ර වස්තුවේ එක් එක් මූලද්රව්යය වෙනම ස්ථරයක් මත තැබිය යුතුය. මෙය සිදු කිරීම සඳහා, ස්ථර කවුළුව තුළ, රේඛාව තෝරන්න, එහි ඉහළ දකුණු කෙළවරේ කළු ඊතලය මත ක්ලික් කිරීමෙන් palette මෙනුව සක්රිය කරන්න, සහ ස්ථර අනුක්රමයට මුදා හැරීමේ විධානය තෝරන්න (රූපය 71). Shift යතුර ඔබාගෙන සිටින්න, සාදන ලද ස්ථර තෝරා ඒවා 1 වන ස්ථරයට ඉහළින් තබන්න, ඉන්පසු 1 වන ස්ථරය මකා දමන්න, එහි ප්‍රතිඵලයක් ලෙස එය කුණු කූඩයට ගෙන යාම, ස්ථර palette රූපයේ දැක්වෙන ආකාරයටම ගනු ඇත. 72.

සහල්. 70. ආරම්භක තත්වයස්ථර කවුළු

File=>Export විධානය භාවිතයෙන් සාදන ලද ගොනුව PSD ආකෘතියට අපනයනය කරන්න. ImageReady වැඩසටහනේ සාදන ලද PSD ගොනුව විවෘත කරන්න (රූපය 73). Illustrator හි සාදන ලද සියලුම ස්ථර ස්ථර කවුළුවෙහි දිස්වනු ඇති බව කරුණාවෙන් සලකන්න (රූපය 74), සහ සජීවිකරණ කවුළුවේ දැනට ඇත්තේ එක් රාමුවක් පමණි.

palette එකේ ඉහළ දකුණු කෙළවරේ ඇති කළු පැහැති ඊතලය මත ක්ලික් කිරීමෙන් Animation palette මෙනුව සක්‍රිය කර Make Frames From Layers විධානය තෝරන්න, එහි ප්‍රතිඵලයක් ලෙස, මෙම උදාහරණයේදී, රාමු පහක් සාදනු ලබන අතර, සජීවිකරණ palette කවුළුව විසින් ගනු ලැබේ. රූපයට අනුකූලව ආකෘතිය. 75. Shift යතුර ඔබාගෙන සිටින අතරතුර සියලුම රාමු තෝරන්න සහ මෙම උදාහරණයේ සුදුසු රාමු කාලසීමාව සකසන්න, එක් එක් රාමුව සඳහා තත්පර 0.2 ක එකම කාලය ගත වේ. ඉන්පසු File=>Save Optimized (File=>Save with optimization) විධානය භාවිතා කර ප්‍රශස්තිකරණය සමඟ ගොනුව සුරකින්න, ගොනු වර්ග ලැයිස්තුවේ Images Only (*.gif) විකල්පය සැකසීම. සජීවිකරණය රූපයට සමාන වනු ඇත. 76.

වඩාත් සිත්ගන්නා කරුණක් ලෙස පෙනෙන්නේ චලනය නොව, මිශ්‍ර වස්තූන්ගේ සුමට ප්‍රමාණය වෙනස් කිරීමයි. උදාහරණයක් ලෙස, ඔබට දැනටමත් නිර්මාණය කර ඇති මිශ්‍ර සංක්‍රාන්තිය භාවිතා කළ හැකිය. මෙම අවස්ථාවෙහිදී, එක් එක් මිශ්‍ර සංක්‍රාන්ති මූලද්‍රව්‍ය සඳහා වෙන වෙනම ස්ථර සෑදීමෙන් පසු, පෙළගස්වන පුවරුවේ තිරස් පෙළගස්වන මධ්‍යස්ථානය සහ සිරස් පෙළගැස්වීමේ මධ්‍යස්ථාන බොත්තම් භාවිතයෙන් සියලුම වස්තූන් එකිනෙක මත තබන්න (රූපය 77) .

සාදන ලද ගොනුව PSD ආකෘතියට අපනයනය කරන්න (File=>Export File=>Export) සහ සාදන ලද PSD ගොනුව ImageReady වැඩසටහනේ විවෘත කරන්න (රූපය 78). ස්ථර මත පදනම්ව සජීවිකරණ රාමු සාදන්න (ස්ථර වලින් රාමු සාදන්න) සහ ඒවා සඳහා සුදුසු කාල සීමාවක් තෝරන්න (රූපය 79). ඉන්පසුව, සජීවිකරණය වඩාත් ඵලදායී කිරීමට, පවතින රාමු පිටපත් කරන්න, නමුත් ප්රතිලෝම අනුපිළිවෙලින් රූපය පළමුව වැඩි වන අතර පසුව අඩු වන පරිදි රවුමක (රූපය 80). ඉන්පසු ප්‍රශස්තිකරණ ගොනුව සුරකින්න (File=>Save Optimized File=>Save with optimization). එහි ප්රතිඵලයක් වශයෙන් සජීවිකරණය රූපයේ දැක්වේ. 81.

සහල්. 80. රාමු අනුපිටපත් කිරීමෙන් පසු සජීවිකරණ කවුළුවේ තත්වය

සහල්. 81. නිමි සජීවිකරණය

ආයුබෝවන් සියල්ලටම! අද මම Adobe Illustrator වැඩසටහනේ හැකියාවන් විස්තර කිරීමට උත්සාහ කරමි, එය Flash හි හැකියාවන් සමඟ සංසන්දනය කරයි. මෙය වැඩසටහනේ ගෝලීය විශ්ලේෂණයක් නොව, මෙම වැඩසටහනේ මා සොයාගත් රසවත් විශේෂාංග කිහිපයක් පිළිබඳ විස්තරයකි. ඔක්කොම එක පෝස්ට් එකකින් දාන්න හිතාගෙන පාඩම් කරන ගමන් කෑලි කෑලි එකතු කරගත්තා. මම Illustrator හි සුපිරි පළපුරුදු පරිශීලකයෙකු නොවන බව මම වහාම පිළිගනිමි, මම එය පසුගිය මාස හය තුළ චිත්‍ර ඇඳීම සඳහා පමණක් භාවිතා කළෙමි (ඊට පෙර මම ෆ්ලෑෂ් හි සියල්ල ඇන්දෙමි). බොහෝ අය මැසිවිලි නඟන්නේ නිදර්ශනකරු සංකීර්ණ බවත් සෑම විටම බුද්ධිමය නොවන බවත්ය. යම් දුරකට, ෆ්ලෂ් කිරීමෙන් පසු මෙම වැඩසටහන සංකීර්ණ බව මම එකඟ වෙමි. නමුත් මෙහි ප්රධානතම දෙය වන්නේ අත්හැරීම නොව, දිගටම අධ්යයනය කිරීමයි. සති දෙකකට පසු, සිතුවිල්ල පැන නගී, මම මීට පෙර එය නොමැතිව කළමනාකරණය කළේ කෙසේද!

ඉතින්, නිදර්ශන ශිල්පියා ගැන මා කැමති වූයේ කුමක්ද සහ ෆ්ලෑෂ් නොමැති බව මා සොයාගත්තේ කුමක්ද?
1. මම සරලම දේ සමඟ ආරම්භ කරමි, නමුත් ඒ සමඟම අවශ්ය වේ. ෆ්ලෑෂ් හි වස්තු රවුමක සැකසීමට උත්සාහ කරන්න. මීට පෙර Deco Tool එකක් තිබුනා, නමුත් එය ඉවත් කර ඇත, පෙනෙන විදිහට අනවශ්ය ලෙස සලකනු ලැබේ. එය අතින් සිදු කිරීම වඩාත් විනෝදජනක බව අපි තීරණය කළෙමු. Illustrator හට මෙම කාර්යය ඇත: Effect - Distort&Transform - Transform.

සෑම දෙයක්ම ඉක්මන් හා සරල ය; අපි සැකසුම් තුළ අගයන් (වස්තු අතර දුර, පිටපත් ගණන) සකසන්නෙමු.

2. Zig-zag

ඊටත් වඩා සරල, නමුත් කෙසේ වෙතත් ප්රයෝජනවත් දෙයක්. එය කුඩා දෙයක් ලෙස පෙනේ, නමුත් ෆ්ලෑෂ් හි ඔබ අතින් ඇඳීමට සිදුවේ, Illustrator හි එය තත්පර ගණනකි.

3. වස්තූන් විකෘති කිරීම (Warp)

Flash එකේ මේ වගේ දෙයක් නෑ. පහත උදාහරණයේ දී, මම සරල හැඩතල විකෘති කිරීමට ක්‍රම 2 ක් පමණක් පෙන්වමි (Effect - Warp - Arc/Fish). ඇත්ත වශයෙන්ම, ඔවුන්ගෙන් 15 ක් ඇත නවතම අනුවාදයවැඩසටහන්.

4. කොන් වල ස්වයංක්‍රීය වටකුරු (වටකුරු කොන්)

ඔබට එය අතින් කළ හැකිය: ග්‍රැෆික් වස්තුවක් මත, තෝරාගත් විට, සුදු තිතක් සහ වටකුරු රේඛා ලකුණක් කෙළවරේ (සියලු කොන් වල) දිස්වේ. අපි මූසිකය සමඟ ඇදගෙන එය ඔබේ රසයට සකස් කරමු.

නමුත් මෙය අදාළ වන්නේ හැඩතලවලට පමණි, පැන්සල් රේඛාවක් සමඟ අපි එය ටිකක් වෙනස් ලෙස කරන්නෙමු - අපි වටකුරු බලපෑමක් යොදන්නෙමු (බලපෑම - ශෛලීගත කිරීම - වටකුරු කොන්). පිටවීමේදී අපි එකම ප්රතිඵලය ලබා ගනිමු.

5. රළු

බලපෑම සරල හැඩතල සඳහා යොදනු ලැබේ (Effect - Distort&Transform - Roughen). ප්‍රතිදානය අඩු බහු ත්‍රිමාණ මාදිලිවලට සමාන දෙයකි. මම හිතන්නේ එය සිසිල් ය :) සහ වඩාත්ම වැදගත් දෙය නම්, එය ඉතා සරල ය.

6. පුකර් සහ පිම්බීම (ඇදීම සහ ඉදිමීම)
පහත පින්තූරයේ උදාහරණය:

7. ආකෘති පුළුල් කිරීම (Offset Path)

ෆ්ලෑෂ් සතුව Expand Fill ශ්‍රිතයක් ඇත; එය Illustrator මෙන් නොව පැන්සල් රේඛා සමඟ කිසිසේත් ක්‍රියා නොකරයි.

8. බුරුසු (කලා බුරුසු, රටා බුරුසු, විසිරුම් බුරුසු)
උදාහරණ සමඟ පහත පින්තූරය බලන්න:

9. වයනය බුරුසුව

Illustrator ද බොහෝ වයනය බුරුසු දක්වයි, ඒවා මා ලියූ සහ ඒවා දිස් වූ ආකාරය නව අනුවාදයසැණෙළිය - . Adobe Animate හි බුරුසු භාවිතා කිරීම ඉතා මන්දගාමී බව නිරීක්ෂණය විය. ඒක තමයි:(

10. මෙය සැබෑ උපක්‍රමයක් දැයි මට විශ්වාස නැත, නමුත් මට Blob Brush යන විහිලු නාමය සහිත බුරුසුවක් කෙරෙහි අවධානය යොමු කිරීමට අවශ්‍යයි. මෙවලම් තීරුවේ පිහිටා ඇති මෙය භාවිතා කිරීමට ඉතා හොඳ බුරුසුවකි. එහි සැකසුම් රාශියක් ඇත, මම එයට සාමාන්‍ය එකට වඩා කැමතියි. වචන වලින් එහි ප්රතිලාභ පැහැදිලි කිරීමට අපහසුය, එය වරක් උත්සාහ කිරීමට වඩා හොඳය.

10.Grid වෙත බෙදීම

තවත් ප්‍රයෝජනවත් දෙයක් තමයි Split to Grid (Object-Path-Split to Grid) ශ්‍රිතය.එය ඔබට හැඩය සමාන කොටස් වලට කපා ගැනීමට ඉඩ සලසයි. මෙය අපට මතක් කර දෙන්නේ කුමක් ද? ඒක හරි - උස් ගොඩනැගිල්ලක ජනේල. මම හිතන්නේ එය ඇඳීම සඳහා සිසිල් දෙයක්, උදාහරණයක් ලෙස, නගර භූ දර්ශන;)

තවත් එකක් ප්රයෝජනවත් මෙවලමක්, එහි පළමු නිකුතුවේ සිට බොහෝ විට නිදර්ශකයේ විශේෂාංග කර ඇත. එහි ආධාරයෙන් ඔබට නිර්මාණය කළ හැකිය, උදාහරණයක් ලෙස, ලී වයනය:

12. චලනය (දකුණට - පරිවර්තනය - චලනය)

වස්තුවක් නිශ්චිත දුරකින් විස්ථාපනය කරයි. අවශ්ය නම්, තෝරාගත් වස්තුවෙන් තිරස් අතට / හෝ සිරස් අතට අපේක්ෂිත දුරින් තබා ඇති පිටපතක් ඔබට වහාම නිර්මාණය කළ හැකිය. ෆ්ලෑෂ් හි පෙර අනුවාදයක ප්ලගිනයක් තිබුණි මෙම කාර්යය. අවාසනාවට, මට එහි නම මතක නැත.

Illustrator බාධාවකින් තොරව රටා නිර්මාණය කිරීම සඳහා ඉතා පහසු වේ (Object-Pattern-Make). ගේ නිර්මාණයත් සමඟම මම කෙතරම් කෝපයෙන් පරිණතභාවය වර්ධනය කර ගත්තද යන්න මට මතකයි. Illustrator හි SS 2015 අනුවාදයේ, සියල්ල ස්වයංක්‍රීයයි; සැකසීම් සමූහයක් ඔබට ග්‍රැෆික් මූලද්‍රව්‍ය කිහිපයක් අතැතිව, වෙනස්කම් දුසිම් ගණනක රටාවක් නිර්මාණය කිරීමට උපකාරී වේ. තව දුරටත් පෙර අනුවාදමෙතෙක් Flash හි මෙන් සියලුම වැඩසටහන් අතින් සිදු කළ යුතු විය.

(සටහන - Object - Expand Appearance ශ්‍රිතය භාවිතයෙන් රටාව දෛශික සංස්කරණය කළ හැකි වස්තුවක් බවට පත් කළ හැක.

14. වස්තුව මොසෙයික්

පවතින පින්තූරයක් මත පදනම්ව වර්ණ මාලාවක් නිර්මාණය කිරීම. ඔබ කැමති පින්තූරය නිදර්ශනයට ආයාත කරන්න (විවෘත), පසුව වස්තුව - වස්තු මොසෙයික් සාදන්න. සැකසුම් තුළ අපි උස සහ පළල බෙදීමේ සංඛ්යාතය නියම කරමු.

ප්‍රතිදානයේදී අපට ලැබෙන්නේ:

15.Blend

අනුක්‍රමික නිර්මාණය කිරීමට භාවිතා කරයි. ඔබට පින්තූරයේ මෙන් පියවරෙන් පියවර සංක්‍රාන්ති නිර්මාණය කළ හැකිය. මම එය නිතර භාවිතා කරන බව මම නොකියමි, නමුත් එය කෙනෙකුට ප්රයෝජනවත් විය හැකිය. එය සරල පසුබිම් රූප නිර්මාණය කිරීමට භාවිතා කළ හැකි බව මට පෙනේ.

මෙම මෙවලම වස්තූන් ක්ලෝන කිරීමට ද භාවිතා කළ හැක. වස්තු දෙකක් එකිනෙකින් දුරින් තබා Blend Options යොදන්න, පියවර ගණන තෝරන්න (ක්ලෝන කරන ලද වස්තූන් ගණන).

16. Build Shape Tool. ප්රාථමිකයන් සමඟ වැඩ කිරීම සඳහා ඉතා පහසු දෙයක්. සැණෙකින්, එය මට පෙනුනේ, එය අඩු පහසුවකි.

කොටස් මකා දැමීමට Alt අල්ලාගෙන තෝරාගත් කොටස් මත ක්ලික් කරන්න. අපි සරලව තෝරාගත් ප්රදේශ කිහිපයක් මත මූසිකය ඇදගෙන ගියහොත් - සම්බන්ධතා.

ඇඩෝන යනු ස්වයංක්‍රීයව කැපීම, සම්බන්ධ කිරීම යනාදිය උපකාර වන මෙවලමකි. උද්දීපනය කළ ආකෘති. මා සම්බන්ධයෙන් ගත් කල, එය එතරම් පහසු නැත; මම බොහෝ විට Build Shape Tool භාවිතා කරමි.

(කලා පුවරු)

18. අභිරුචි මෙවලම් පැනලය

ඔබේම මෙවලම් තීරුවක් නිර්මාණය කිරීමේ හැකියාව, අනවශ්‍ය ඒවා ඉවත දැමීම සහ ඔබ භාවිතා කරන ඒවා පමණක් තෝරා ගැනීම.

Flash හි, artboards, එනම් දර්ශන (දර්ශන 1,2,3..) වෙන වෙනම පිහිටා ඇති අතර ඔබ ඒවා අතර මාරු විය යුතුය (Shift+F2). Illustrator හි, ඒවා සියල්ලම ඔබේ ඇස් ඉදිරිපිට තැබිය හැකිය. ඔබ එකම චිත්‍රයේ අනුවාද කිහිපයක් සාදන විට එය පහසු වේ, එවිට සියලු විකල්පයන් සැසඳීම සඳහා ඔබේ ඇස් ඉදිරිපිට ඇත.

19.Graphic Styles භාවිතා කරන සමමිතික

ඒවගේම අන්තිම දේ තමයි ඒක ක්ලික් 1කින් (හෝ වඩාත් නිවැරදිව, ක්ලික් කිරීම් 3කින්, අපිට පැති 3ක් තියෙන නිසා;) graphic styles (Graphic Styles) භාවිතා නොකර සමමිතිය නිර්මාණය කරන එක. මෙය සිදු කරන ආකාරය මම ඊළඟ වතාවේ විස්තර කරමි.

නිදර්ශකයට ෆ්ලෑෂ් සමඟ පොදු වන්නේ වස්තුවක් සංකේතයකට සුරැකීමේ හැකියාව වන අතර, මෙම සංකේතය පහසුවෙන් ෆ්ලෑෂ් වෙත මාරු කළ හැකිය (ආයාත කිරීම - වේදිකාවට ආනයනය කිරීම භාවිතා කර flash.ai හි ගොනුව විවෘත කරන්න).
Illustrator හි ඇති සංකේතය Flash හි ඇති සමාන ගුණාංග ඇත.
අවසාන වශයෙන්, මම Illustrator හි ලියන්නෙමි, මගේ මතය අනුව, එය ෆ්ලෑෂ් වලට වඩා පහත් ය. ඔව් ඔව් එහෙම එකක් තියෙනවා. තවද මෙය පිරවුම් මෙවලම (Paint Bucket) වේ. Illa හි එය භාවිතා කිරීමට මම කොතරම් උත්සාහ කළත්, එය ෆ්ලෑෂ් හි වඩාත් පහසු වේ.
මගේ සටහන් ඔබට ප්‍රයෝජනවත් වී ඇත්නම් හෝ ඔබට ඔබේම දෙයක් එකතු කිරීමට අවශ්‍ය නම්, අදහස් දැක්වීමේදී සාදරයෙන් පිළිගනිමු! සැමට සුබ පැතුම්;)

මෑතකදී, වෙබ් අඩවි සහ යෙදුම්වල SVG (පරිමාණය කළ හැකි දෛශික ග්‍රැෆික්ස්) ග්‍රැෆික්ස් වල විවිධ ආකාරයේ සජීවිකරණ ඉතා ජනප්‍රිය වී ඇත. මෙයට හේතුව සෑම දෙයක්මයි නවතම බ්‍රව්සර්දැනටමත් මෙම ආකෘතියට සහය දක්වයි. SVG සඳහා බ්‍රවුසර සහාය පිළිබඳ තොරතුරු මෙන්න.

සැහැල්ලු Jquery ප්ලගිනය Lazy Line Painter භාවිතා කරමින් SVG දෛශික සජීවිකරණයක සරලම උදාහරණය මෙම ලිපියෙන් සාකච්ඡා කෙරේ.

මූලාශ්රය

මෙම කාර්යය සම්පූර්ණ කිරීමට සහ සම්පූර්ණයෙන් අවබෝධ කර ගැනීමට, HTML, CSS, Jquery පිළිබඳ මූලික දැනුම යෝග්‍ය වේ, නමුත් ඔබට SVG සජීවීකරණය කිරීමට අවශ්‍ය නම් අවශ්‍ය නොවේ) අපි ආරම්භ කරමු!

තවද අප අනුගමනය කළ යුතු පියවර මේවාය:

නිවැරදි ගොනු ව්යුහය සාදන්න

ප්ලගිනය බාගත කර සම්බන්ධ කරන්න

Adobe Illustrator හි සිසිල් දළ සටහන් පින්තූරයක් අඳින්න

අපගේ රූපය Lazy Line Converter බවට පරිවර්තනය කරන්න

ලැබෙන කේතය main.js වෙත අලවන්න

රස බැලීමට CSS ටිකක් එකතු කරන්න

1. නිවැරදි ගොනු ව්‍යුහය සාදන්න
Initializr සේවාව අපට මේ සඳහා උපකාරී වනු ඇත, එහිදී අපට පහත පින්තූරයේ මෙන් පරාමිති තෝරා ගත යුතුය.

• Classic H5BP (HTML5 බොයිලේරු තහඩුව)
• සැකිල්ලක් නැත
• හුදෙක් HTML5 Shiv
• කුඩා කර ඇත
• IE පන්ති
• Chrome රාමුව
• ඉන්පසු එය බාගත කරන්න ක්ලික් කරන්න!

2. ප්ලගිනය බාගත කර සම්බන්ධ කරන්න

initializr අලුත්ම Jquery library එකත් එක්ක එන නිසා Lazy Line Painter project repository එකෙන් බාගන්න ඕන archive එකෙන් අපිට අපේ project එකට transfer කරන්න තියෙන්නේ files 2ක් විතරයි. පළමුවැන්න නම් 'jquery.lazylinepainter-1.1.min.js' (ප්ලගින අනුවාදය වෙනස් විය හැක) එය ප්‍රතිඵලයක් ලෙස ලැබෙන ෆෝල්ඩරයේ මූලයේ පිහිටා ඇත. දෙවෙනි එක තමයි example/js/vendor/raphael-min.js.

අපි මෙම ගොනු 2 js ෆෝල්ඩරය තුළ තබමු. අපි ඒවා පහත ආකාරයට main.js වලට පෙර අපගේ index.html වෙත සම්බන්ධ කරමු:

3. Adobe Illustrator හි සිසිල් දළ සටහන් පින්තූරයක් අඳින්න

Illustrator හි අපගේ දළ සටහන් චිත්‍රය අඳින්න (මෙය කිරීමට පහසුම ක්‍රමය Pen Tool වේ)

අපගේ චිත්‍රයේ සමෝච්ඡයන් වැසී නොයෑම අවශ්‍ය වේ, මන්ද අපගේ බලපෑම සඳහා අපට ආරම්භයක් සහ අවසානයක් අවශ්‍ය වේ

පිරවුම් නොතිබිය යුතුය

උපරිම ගොනු විශාලත්වය - 1000×1000 px, 40kb

Object>Artboards>Fit To Artboards Bounds යන වස්තුවේ මායිම්වලට බෝගයක් සාදා ගනිමු.

SVG ආකෘතියෙන් සුරකින්න (සම්මත ඉතිරිකිරීමේ සැකසුම් හොඳයි)

උදාහරණයක් ලෙස, ඔබට ඇමුණුමේ ඇති අයිකන භාවිතා කළ හැකිය.

4. අපගේ රූපය Lazy Line Converter බවට පරිවර්තනය කරන්න
පහත පින්තූරයේ ඇති කවුළුව වෙත ඔබගේ නිරූපකය ඇදගෙන යන්න.
ඝනකම, දළ සටහනේ වර්ණය සහ සජීවිකරණ වේගය කේතය තුළම වෙනස් කළ හැකිය, එය පරිවර්තනයෙන් පසුව දිස්වනු ඇත!

5. ලැබෙන කේතය main.js වෙත අලවන්න
දැන් අපි ලැබෙන කේතය හිස් main.js ගොනුවකට අලවන්න
විකල්ප:
strokeWidth - දළ සටහන් ඝණකම
strokeColor - දළ සටහන් වර්ණය
කාල පරාමිතියෙහි අගයන් වෙනස් කිරීමෙන් ඔබට එක් එක් දෛශිකයේ ඇඳීමේ වේගය වෙනස් කළ හැකිය (පෙරනිමිය 600)

6. රස කිරීමට CSS ටිකක් එකතු කරන්න
index.html වෙතින් ඡේදයක් ඉවත් කිරීම

හෙලෝ වර්ල්ඩ්! මෙය HTML5 බොයිලේරු වේ.

ඒ වෙනුවට අපි අපගේ සජීවිකරණය සිදු වන බ්ලොක් එකක් ඇතුළු කරමු

ඉන්පසුව අපි main.css ගොනුවට CSS කිහිපයක් එකතු කර එය ලස්සනට පෙනෙන්නෙමු:

ශරීරය (පසුබිම:#F3B71C; ) #අයිකන (ස්ථානය: ස්ථාවර; ඉහළ:50%; වමේ:50%; ආන්තිකය: -300px 0 0 -400px; )

සියලුම ගොනු සුරකින්න.
දැන් නවීන බ්‍රවුසරයක index.html විවෘත කර එහි බලපෑම භුක්ති විඳින්න.

පී.එස්. ආරම්භ කරන විට දේශීය යන්ත්රයතත්පර කිහිපයක් සඳහා සජීවිකරණය ආරම්භයේ ප්රමාදයක් තිබිය හැක.

අද අපට අසාමාන්ය දෙයක් තිබේ Adobe පාඩමචිත්ර ශිල්පියා. මොකද මේ පාර අපි හදන්නේ ස්ථිතික පින්තූරයක් නෙවෙයි, නියම සජීවිකරණයක්. සිතන්න, එය සමඟ හැරෙනවා Adobe භාවිතා කරමින්චිත්‍ර ශිල්පියාට කාටූන් අඳින්නත් පුළුවන් :)

තවද මේ සඳහා අපට කිසිවක් අවශ්ය නොවේ. ස්ථර නිසි ලෙස සංවිධානය කිරීම සහ අවසාන කාර්යය swf ආකෘතියට අපනයනය කිරීම, එහිදී එක් එක් ස්ථරයක් සජීවිකරණ රාමුවක් බවට පරිවර්තනය වේ. අද නිබන්ධනයේදී අපි රෙට්රෝ චිත්‍රපටයක විලාසයෙන් ගණන් කිරීමේ සජීවීකරණයක් අඳින්නෙමු. ප්‍රතිදානය මෙම ගණන් කිරීම සහිත ෆ්ලෑෂ් වීඩියෝවක් විය යුතුය.

ඔබ කළ යුතු පළමු දෙය නම් අනාගත සජීවිකරණය සඳහා අවශ්‍ය සියලුම අංග අඳින්න. මෙය සිදු කිරීම සඳහා, වෙනම ලේඛනයක, මම චිත්‍රපට රාමුවක ස්ථාන දෙකක්, යොමු කිරීම සඳහා කවයක්, වෙනම අංශවලට කපා, පෞරාණිකත්වයේ බලපෑම එකතු කිරීම සඳහා වයනය සහ සිරස් සීරීමක් මෙන්ම සියලුම සංඛ්‍යා සහ ශිලා ලේඛන.

අපගේ කාටූනයේ සියලුම කොටස් සූදානම් වූ විට, අපට සජීවිකරණය නිර්මාණය කිරීමට පටන් ගත හැකිය. පහසුව සඳහා, මෙය නව ලේඛනයක සිදු කිරීම වඩා හොඳය. මෙම අවස්ථාවේදී, අපගේ ස්ථර සජීවිකරණ රාමු වල කාර්යභාරය ඉටු කරනු ඇත. පළමු ස්ථරයේදී ඔබට චිත්‍රපට රාමුවක් පිටපත් කළ යුතුය. එය ඔබගේ සේවා ස්ථානය මැද තබන්න.

දැන් දෙවන ස්ථරයක් සාදා එයට පටල රාමුවක් පිටපත් කරන්න, එහි දාර දිගේ සිදුරු ඕෆ්සෙට් එකකින් සාදා ඇත. එය මධ්යයේ ද තැබිය යුතුය.

මෙම ස්ථර දෙකෙන් ඔබට දැනටමත් චලනය වන චිත්රපටයේ සජීවිකරණය ලබා ගත හැකිය. නමුත් පසුව අපට තවත් බොහෝ ස්ථර අවශ්ය වනු ඇත. එබැවින් පළමු ස්ථර දෙක තෝරන්න, පැනල විකල්ප වෙත ගොස් ස්ථර වල පිටපතක් සාදන්න.

ඒ හා සමානව, අපි එහි චලනය නිර්වචනය කරන චිත්රපට රාමු ස්ථර 12 ක් රැස්කර ගත යුතුය.

දැන් අපට සම්පූර්ණ ස්ථර පොකුරක් ඇති අතර ඒවා සියල්ලම දැකිය හැකිය. වැඩ සඳහා සම්පූර්ණයෙන්ම පහසු නොවන ඉහළ ස්ථර පහළ ඒවා අවහිර කරයි යන අර්ථයෙන්. එමනිසා, ලේයර් නාමයේ වම් පසට ඇසක් ඇති අයිකනය මත ක්ලික් කිරීමෙන් ඔබට සමහර ස්ථර අක්‍රිය කළ හැකිය. සියලුම ස්ථර අක්‍රිය කිරීමට හෝ ක්‍රියාත්මක කිරීමට, අක්ෂි අයිකනය මත ක්ලික් කරන අතරතුර Alt යතුර ඔබාගෙන සිටින්න. ස්ථර සක්‍රිය සහ අක්‍රිය කිරීමෙන්, අපගේ අනාගත සජීවිකරණයේ නිශ්චිත රාමුවක පිහිටා ඇති දේ ඔබට හරියටම දැක ගත හැකිය. දැන්, අපට චිත්‍රපටයේ චලනයට සුළු චකිතයක් එක් කිරීමට නම්, ප්‍රති result ලය වන රාමු තරමක් විවිධ දිශාවලට ගෙන යා යුතුය. මෙය සිදු කිරීම සඳහා, ඔබ වැඩ කිරීමට යන ස්තරය පමණක් සක්රිය කරන්න. මේ මොහොතේ, ඉන්පසු රාමුව ඕනෑම දිශාවකට පික්සල කිහිපයක් ගෙන යන්න.

ඔබ සියලු ස්ථර හරහා ගොස් කුඩා මාරුවක් එකතු කළ පසු, ඔබට චලනය වන කවයේ සජීවිකරණය නිර්මාණය කිරීම ආරම්භ කළ හැකිය. මෙය සිදු කිරීම සඳහා, කාටූන් කොටස් සමඟ ලේඛනයෙන් අංශ වලින් සමන්විත රවුම පිටපත් කර එය චිත්රපට රාමුව මත පළමු ස්ථරය මත තබන්න.

ඔබ රවුම තේරීම ඉවත් කළහොත්, එය තනි සමස්තයක් ලෙස පෙනෙනු ඇත. මෙය හරියටම අපට අවශ්යයි.

නමුත් එය එක් එක් අංශ වලින් සමන්විත වන බැවින්, ඒවායේ වර්ණය වෙනස් කිරීමෙන් ඔබට ඉතා ඉක්මනින් සහ පහසුවෙන් සජීවිකරණ නිර්මාණය කළ හැකිය. මෙය සිදු කිරීම සඳහා, මෙම රවුම දෙවන ස්ථරයට පිටපත් කර පළමු අංශය සැහැල්ලු කරන්න. අපගේ චිත්‍රපටය චලනය වන විට සෙලවෙන බව ඔබට මතක ඇති, එබැවින් රවුම හරියටම රාමුවේ මධ්‍යයේ තැබීම කිසිසේත් අවශ්‍ය නොවේ. ඇසින් එය ස්ථානගත කරන්න.

ඒ හා සමාන ආකාරයකින්, ඔබ එක් එක් ඊළඟ ස්ථරයට රවුම පිටපත් කළ යුතු අතර, එක් අංශයක් පෙර වතාවට වඩා සැහැල්ලු වර්ණයකින් පින්තාරු කළ යුතුය. මෙම ස්ථර 12 එක්ව පිරවුම් කවයක් සමඟ චලනය වන චිත්‍රපටයේ සජීවිකරණයක් සාදයි.

ඊළඟට අපි අපේ ස්ථරවලට වයනය එකතු කළ යුතුයි. පළමු ස්ථරය සක්‍රිය කර එහි අමතර කොටස් සමඟ මුල් ගොනුවෙන් වයනය පිටපත් කරන්න.

ඉන්පසු ඊළඟ ස්ථර එකින් එක ඔන් කර එම වයනයම එහි පිටපත් කරන්න. එක් එක් රාමුව තුළ එය වෙනස් ලෙස පෙනෙන පරිදි, එය අංශක 90 ක් කරකවන්න. ඔබ අනුමාන කළ පරිදි, අපි රාමු 12ටම වයනය එක් කළ යුතුයි.

ඔබ දැනටමත් පිටපත් කිරීමෙන් වෙහෙසට පත්ව සිටී නම්, මට ඔබව සතුටු කළ හැකිය - ඉතිරිව ඇත්තේ ඉතා ස්වල්පයකි. අමාරුම කොටස ඉවරයි. ඉතිරිව ඇත්තේ සිරස් සීරීම් එකතු කිරීම පමණක් වන අතර එපමණයි. මෙය සිදු කිරීම සඳහා, අපි නැවතත් මුල් සීරීම පිටපත් කර ස්ථර කිහිපයක අත්තනෝමතික ස්ථානයක තබමු. මගේ නඩුවේදී, සීරීම් පෙනෙන්නේ ස්ථර දෙකකින් පමණි.

දැන් චිත්‍රපට සජීවිකරණය සමඟ ප්‍රධාන චක්‍රය සූදානම් බැවින්, ඉතිරිව ඇත්තේ සංඛ්‍යා එකතු කිරීම පමණි. අපගේ ගණන් කිරීම 3 සිට 1 දක්වා වැඩි වන බැවින් Go !!! යන වචනයට අමතරව, අපට තවත් ස්ථර අවශ්‍ය වේ. 12 නොව, 48 තරම්.

එතකොට හැම දෙයක්ම සරලයි. පළමු ස්ථරය සක්රිය කර එහි අංක තුන දමන්න.

එවිට ඔබට රවුම් සජීවිකරණය අවසන් වන තෙක් මෙම රූපය ඊළඟ ස්ථරවලට පිටපත් කළ යුතුය. ඔබ ස්ථර වල ඊළඟ පිටපතට ළඟා වූ විට, රවුම නැවත සම්පූර්ණයෙන්ම පුරවනු ඇත, ඔබ අංක දෙක තැබිය යුතුය. එලෙසම, අංක එක අපේක්ෂිත ස්ථරවලට පිටපත් කරන්න. ඔබ Go!!! ශිලා ලේඛනය සඳහා අවසාන ස්ථර වෙත ගිය විට, සෙල්ලිපිය අපේක්ෂිත ස්ථරයට පිටපත් කිරීමට පෙර රවුම මකා දමන්න.

සජීවිකරණය සඳහා එපමණයි. මෙහි ප්රධානතම දෙය වන්නේ ව්යාකූල නොවීමයි. ඔබට ස්ථර වලට පහසු නම් කිහිපයක් ලබා දිය හැකිය, නමුත් මම කම්මැලි විය :) තවද, ඔබ ඔබේ කාර්යය අවසන් කළ විට, අක්ෂි නිරූපකය මත ක්ලික් කිරීමෙන් සියලුම ස්ථර නැවත ක්‍රියාත්මක කිරීමට වග බලා ගන්න.

අපනයන සැකසුම් කවුළුව තුළ, අපනයනය ලෙස සැකසීමට වග බලා ගන්න: AI ස්ථර SWF රාමු වෙත. Illustrator ස්ථර සජීවිකරණ රාමු බවට පත් කරන්නේ මෙම විකල්පයයි. ඊළඟට, උසස් බොත්තම ක්ලික් කරන්න.

අමතර සැකසුම් විවෘත වනු ඇත. මෙහිදී ඔබට රාමු අනුපාතය සැකසිය යුතුය. මට තත්පරයට රාමු 12 ක් ඇත. චක්‍රීය සජීවිකරණය සඳහා ලූපින් පිරික්සුම් කොටුව වගකිව යුතුය. එයට ස්තූතියි, වීඩියෝව රවුමක වාදනය වේ. සහ Layer Order: Bottom Up විකල්පය මඟින් පැනලයේ පහළ සිට ඉහළට නිදර්ශක ස්ථර ප්‍රතිනිෂ්පාදනය කරයි. අපි අපේ සජීවිකරණය ගොඩනගා ගත්තේ හරියටම මේ ආකාරයටයි.

ප්‍රතිදානය අපගේ සජීවිකරණය සහිත ෆ්ලෑෂ් වීඩියෝවකි.

Adobe Illustrator හි සරල සජීවිකරණයක් කිරීම බැලූ බැල්මට පෙනෙන තරම් අපහසු නොවන බව දැන් ඔබට පෙනේ.

නමුත් දිගු වීඩියෝ නිර්මාණය කිරීමට හෝ අන්තර් ක්රියාකාරී යෙදුම්තවමත් භාවිතා කිරීමට වඩා හොඳය Adobe Flashහෝ වෙනත් ෆ්ලෑෂ් සංස්කාරක. උදාහරණයක් ලෙස, මම මෙම බළලා පැරණි එකක් තුළ හැදුවා මැක්‍රොමීඩියා ෆ්ලෑෂ්, මම මගේ වැඩ වලදී හාරා ගත්.

එසේම, මෑතකදී HTML5 සහ CSS3 සජීවිකරණ නිර්මාණය සඳහා වැඩි වැඩියෙන් භාවිතා වේ. මෙම කේතය නවීන බ්‍රව්සර් මගින් සහය දක්වන අතර ෆ්ලෑෂ් ප්ලේයරයක් භාවිතා කිරීම අවශ්‍ය නොවේ.

විශේෂයෙන්ම බ්ලොග් සඳහා Roman aka dacascas

ඔබට අලුත් කිසිවක් අතපසු නොකිරීමට අපගේ පුවත් පත්‍රිකාවට දායක වන්න: