animation

More about GIF

Photoshop ဟာသူ႔တစ္ခုထဲဆိုရင္ Animation လုပ္ငန္းစဥ္ကိုမေဆာင္ရြက္ႏိုင္ပါဘူး။ ဒါေၾကာင့္ Image Ready software ရဲ့အကူအညီ နဲ့သာ ဖန္တီးႏိုင္ပါတယ္။ Image Ready ဟာအမ်ားအားျဖင့္ Photoshop ကို install လုပ္ကထဲကပါ၀င္တဲ့ Software ပါ။ Image Ready ကိုအသံုးမျပဳမီ Animation ရဲ့အေျခခံသေဘာေလးေတြကိုအရင္ၾကည့္ၾကရေအာင္ပါ။ Photoshop ႏွင့္ Image Ready တို႔ကိုအသံုးျပဳျပီး ဖန္တီးမဲ့ File ေတြဟာအမ်ားအားျဖင့္ GIF ေလးေတြပါ။ Photoshop's file formats မ်ားအေၾကာင္းသင္ခန္းစာမွာ ဒီ File type အေၾကာင္း အနည္းငယ္ေရးထားပါတယ္။ အခု အဲဒီ GIF အေၾကာင္းကိုဆက္ေျပာခ်င္ပါေသးတယ္။ သူတို႔ေတြကိုအဓိကအားျဖင့္ Web Page ေတြအတြက္ ရည္ရြယ္တာပါ။ File size ေသးငယ္လို႔ web page ေတြမွာသံုးရင္ download time ကိုနဲေစပါတယ္။ Page တစ္ခုကို လွ်င္ျမန္စြာဖြင့္ႏိုင္တဲ့ သေဘာပါ။ GIF မွာအဓိကအားျဖင့္ ႏွစ္မ်ိဳးရွိပါတယ္။

၁) Still GIF (သူက လႈပ္ရွားမႈမရွိတဲ့ပံုေသပါ)
ဒီမွာေတာ့ေျပာစရာေထြေထြထူးထူးမရွိေတာ့ပါဘူး။ File>Save As... ကိုႏွိပ္ျပီးရင္ ေပၚလာမယ့္ Save As Dialog box ရဲ့ Format မွာ CompuServe GIF[*.GIF] အမ်ိဳးအစားကိုေရြးေပးလိုက္ျပီး Save button ကိုႏွိပ္လိုက္ရံုပါပဲ။ GIF Options မွာလာျပတဲ့ Normal နဲ႔ interlaced မွာၾကိဳက္ရာတစ္ခုေရြးေပးရပါမယ္။ ( Normal ကေတာ့ web page ေတြမွာ ပံုကိုDisplay ျပတဲ့အခါ အေပၚမွေအာက္သို႔ တေျဖးေျဖး download လုပ္ရင္းျပတဲ့နည္းပါ။ Interlaced ဆိုတာကေတာ့ File ကို download လုပ္ရင္း horizontal line အစင္းေလးေတြနဲ့display ျပပါတယ္၊ ၾကည့္လို႔ ပိုေကာင္းပါတယ္)

၂) Animated GIF (သူကေတာ့ လႈပ္ရွားမႈပါတဲ့ file ပါ)
ဒီအမ်ိဳးအစား GIF မွာ Frame ေတြအမ်ားအျပားပါ၀င္ႏိုင္ပါတယ္၊ အဲဒီ Frame ေတြကိုအစဥ္လိုက္ Display လုပ္ျပေနတာေၾကာင့္ Animation အျဖစ္ျမင္ႏိုင္တာပါ။ ေအာက္ကပံုကိုၾကည့္ပါ Frame ၁၀ ခုပါ၀င္ပါတယ္။

ဒီ Frame ၁၀ ခုကို ၁ ကေန ၁၀ အထိ အစဥ္လိုက္ တစ္ခုခ်င္းစီဆက္တိုက္ျပလိုက္ရင္ ဒီပံုလိုျဖစ္လာမွာပါ။ ေျပာစရာတစ္ခုရွိေသးတာက Frame ေတြဆံုးသြားရင္ အစက Frame ကိုျပန္ေရာက္သြားပါတယ္။ အျမဲ Loop ျဖစ္ေနပါတယ္၊ ဒါမွအျမဲတမ္းလႈပ္ရွားေနတဲ့ပံုေလးျဖစ္မွာပါ

Frame တစ္ခုနဲ႔တစ္ခုၾကားက ၾကာခ်ိန္ကိုေတာ့ Frame Delay Time လို႔ေခၚပါတယ္၊ အခုပံုဟာဆိုရင္ Frame ေတြအားလံုးဟာ Delay Time 0.1 second ရွိပါတယ္။ Delay မ်ားရင္ပိုၾကာျပီး Delay ေပးမထားရင္ေတာ့လႈပ္ရွားတာကျမန္ေနမွာပါ။ Animation ျပဳလုပ္ပံုေတြကိုေတာ့ ေနာက္သင္ခန္းစာမ်ားမွာ အေသးစိတ္ ဆက္လက္ေဖာ္ျပေပးပါ့မယ္။

Animation Method1 (Frames from Layers)

ImageReady မွာ Animation ကိုအဓိကအားျဖင့္ အပိုင္းႏွစ္ပိုင္းခြဲျပီးေလ့လာရေအာင္ပါ။ ဒီ Tutorial မွာေတာ့ပထမတစ္ခုျဖစ္တဲ့ Frame from Layer ဆိုတဲ့ Method နဲ့စရေအာင္။ PhotoShop မွာ New Document ကို 200 Pixel ပတ္လည္နဲ့ စျပီး Create လုပ္ပါတယ္။ ေနာက္ျပီး Image file ေလး ၉ ခုကိုဖြင့္ျပီး New Document ထဲကို Layer အသစ္မ်ားအျဖစ္Move Tool သံုးျပီး ဆြဲထည့္ပါမယ္။ အခုသံုးထားတဲ့ Image file ေလးေတြကေတာ့ ကားတစ္စီးကိုေဘးပတ္ပတ္လည္ကေန ျမင္ရတဲ့ပံုေလးေတြပါ။ Layer ၉ ခုနဲ့ Background Layer ရွိေနပါျပီ။ အဲဒီ Layer ၉ခုကိုဆြဲျပီးသြားရင္ Background Layer ကို Delete လုပ္ပါမယ္။ အခုဆိုရင္ ပံုမွာျပထားတဲ့အတိုင္း Document ဟာ Layer 1 ကေန Layer 9 အထိရွိေနပါတယ္။ Sample File ကို Download လုပ္ပါ။

ဒီအေျခအေနမွာပဲ ImageReady ထဲကို၀င္ရေအာင္ (Ctrl+Shift+M) ကိုႏိွပ္ပါ။ ဒါမွမဟုတ္လဲ File>Jump to>Adobe ImageReady ဆိုလဲရပါတယ္။ Tool Box ရဲ့ေအာက္ဆံုးက Button ေလးကိုႏွိပ္လဲ ImageReady ကိုေရာက္ပါတယ္။ ဒါဆိုရင္ ImageReady မွာေစာေစာက လုပ္ထားတဲ့ Layer ၉ခုနဲ့ File ေလးပြင့္လာမွာပါ။ ImageReady မွာ Frame တစ္ခုကေတာ့ Default ျမင္ရမွာပါ။ Animation Palette မွာၾကည့္ပါ။ အကယ္၍ Animation Palette ကိုမေတြရရင္ေတာ့ Window>Animation menu သို႔သြားပါ။ အဲဒီ Animation Palette ရဲ့ ညာဘက္အေပၚနားမွာ Triangle ေလးတစ္ခုေတြ႔မွာပါ၊ အဲဒီ Triangle ေလးကိုႏွိပ္ျခင္းအားျဖင့္ Popup menu တစ္ခုထြက္လာမွာပါ၊ ဒီ Menu ထဲကမွ Make Frames From Layers ဆိုတဲ့ Menu ကိုေရြးလိုက္ရင္ သင္ရဲ့ Animation palette မွာ Frame ကိုးခုေရာက္လာမွာပါ။

GIF file ေလးေတြဟာ Frame ေတြနဲ့ ဖြဲ႔စည္းထားေၾကာင္းေဖာ္ျပျပီးသားပါ။ ဒီတစ္ခါမွာ Animation Palette ကေနပထမဆံုး Frame1 ကို select လုပ္ျပီး Layer Palette ကိုၾကည့္လိုက္ပါ။ Layer1 ရဲ့ Visible ကိုပဲဖြင့္ထားျပီး က်န္တဲ့ Layer ေတြအားလံုးဟာ Visible icon မ်က္လံုးေလးေတြ မွိတ္ထားတာကိုေတြ႔ရမွာပါ။ အဲဒီလိုပဲ Frame2 မွာလဲ Layer2 ကိုပဲဖြင့္ျပီး က်န္တာေတြေဖ်ာက္ထားမွာပါ။ Frame9 ဆိုရင္ Layer9 ပဲျမင္ရျပီး က်န္တဲ့ Layer ေတြကိုပိတ္ထားမွာပါ။ ဒါကိုၾကည့္ျခင္းအားျဖင့္ Frame တစ္ခုမွာ Layer ေတြအမ်ားအျပားပါ၀င္ႏိုင္တယ္ ဆိုတာသိႏိုင္ပါတယ္။ Animation Palette မွာ Plays / stops animation ဆိုတဲ့ Button ကို Click လုပ္လိုက္ရင္ Document Window မွာ ပံုေလးေတြ လႈပ္ရွားေနတာကို ျမင္ရမွာပါ။

အခုျမင္ေနရတဲ့ Animation ကျမန္ေနပါတယ္။ ဒါေၾကာင့္နဲနဲၾကာေစဖို႔အတြက္ frame delay time ကိုတိုးေပးရမွာပါ။ Animation Palette က frame ေတြရဲ့ေအာက္မွာ 0 sec လို႔ေရးထားတဲ့စာေလးေတြကိုျမင္ရမွာပါ၊ ဒါကိုသံုးျပီး Frame delay time ကို Adjust လုပ္မွာပါ။ အခု Frame 1 ကို Select လုပ္ျပီး Shift+ Frame9 ကိုႏွိပ္ပါ၊ Frame ကိုးခုစလံုးကိုေရြးလိုက္တာပါ။ ျပီးရင္ ေအာက္ေျခနားက 0 sec ဆိုတဲ့ စာေလးကို ႏွိပ္ရင္ ေပၚလာတဲ့ Menu ကေန 0.5 ကိုေရြးပါ၊ အခုဆိုရင္ Animation ေလးဟာအရင္ကလိုမျမန္ေတာ့ပါဘူး။

အခုဆိုရင္ ပံုေလးကို GIF အျဖစ္ Optimize လုပ္ေပးဖို႔ပဲက်န္ပါေတာ့တယ္။ ဒီအတြက္ File>Save Optimized ကိုေရြးပါ၊File Name ေပးျပီး Save as type မွာလဲ Image Only ကိုေရြးပါ၊ Setting ကိုေတာ့ Default ပဲထားပါ၊ ျပီးရင္ Save လုပ္ပါ။ ဒါဆိုရင္ Animated GIF ေလးတစ္ခု ရပါျပီ။

Animation Method2 (Tweening) PART 1

Animation method2 ျဖစ္တဲ့ Tweening Method ကိုဆက္ရေအာင္။ Tweening ဆိုတာက In betweening ဆိုတာရဲ့ အတိုေကာက္ပါ။ Frame တစ္ခုနဲ႔တစ္ခုၾကားမွာရွိတဲ့ တန္ဖိုးေျပာင္းလဲျခင္း ေတြကိုတြက္ခ်က္ေပးတဲ့ Method တစ္ခုပါ။

ဥပမာအားျဖင့္ အရာ၀ထၱဳတစ္ခုကို ဘယ္ဘက္မွညာဘက္သို႔ ေရြ႔သြားတဲ့ပံုစံျပဳလုပ္ခ်င္တယ္ ဆိုပါစို႔။

Frame ႏွစ္ခုကိုဖန္တီးေပးပါမယ္။ ပထမ Frame မွာေတာ့ ထိုအရာ၀ထၱဳကိုဘယ္ဘက္မွာထားျပီး ဒုတိယ Frame မွာေတာ့ ထိုအရာ၀ထၱဳ ကိုညာဘက္မွာထားေပးလိုက္ပါမယ္။

ျပီးရင္ေတာ့ ၾကားထဲမွာလိုခ်င္တဲ့ Frame ေတြကိုတစ္ခုစီျပဳလုပ္ေနစရာမလိုပဲ အလြယ္တကူဖန္တီးျပီးသားျဖစ္သြားေစတဲ့ နည္းလမ္းတစ္ ခုပါ။ လက္ေတြ႔စလုပ္ရေအာင္။ Sample File ေလးကို Download လုပ္ပါ။ Sample File ကို ImageReady မွာဖြင့္ပါ (သို႔) PhotoShop မွာဖြင့္ျပီး Jump To ImageReady လုပ္လဲရပါတယ္။

ဦးစြာ New Frame တစ္ခုကိုဖန္တီးပါမယ္။ Animation Palette ရဲ့ Popup menu ကိုေခၚပါ ျပီးရင္အေပၚဆံုးမွ New Frame Menu ကိုေရြးပါ။ ဒါဆိုရင္သင့္ရဲ့ Animation မွာ Frame ႏွစ္ခုျဖစ္လာပါျပီ။

Animation Palette မွာဒုတိယ Frame ကို Select လုပ္ပါ။ ျပီးရင္ Document Window မွာ Move Tool သံုးျပီး Layer1 ကိုဘယ္ဘက္ သို႔ဆြဲေရြ႔ပါ။ Hotizontal Align ျဖစ္ခ်င္ရင္ေတာ့ Move လုပ္ေနစဥ္မွာ Shift Key ကိုသံုးျပီးေရြ႔ပါ။ အခုဆိုရင္ Frame ႏွစ္ခုမွာရွိတဲ့ပံုေလးဟာ ဘယ္မွာတစ္ခု ညာမွာတစ္ခု ျဖစ္သြားပါျပီ။ ျပီးရင္ Animation Palette ရဲ့ေအာက္ေျခက Tweens Animation Frames Button ကိုClick လုပ္ပါ။

Tween Dialog မွာေတာ့ ပံုပါအတိုင္း Option ေတြကိုယူပါ။ Tween With ဆိုတာက ဘယ္ Frame နဲ့ Tween လုပ္မလဲဆိုတာကို ေျပာတာပါ။ အခု Previous Frame ကိုေရြးလိုက္တဲ့အတြက္ အေရွ႔က Frame ကိုဆိုလိုပါတယ္။ Frames to Add ဆိုတာက ဒီ Frame ႏွစ္ခုၾကားမွာ Frame ဘယ္ႏွစ္ခုထပ္ထည့္မလဲကိုေျပာတာပါ။ အခု 10 ကိုေရြးလိုက္တဲ့အတြက္ Frame ၁၀ ခုေပါင္းထပ္ထည့္မွာပါ။ ဒါဆိုရင္ Animation Palette မွာ Frame ၁၂ ခုျဖစ္လာမွာပါ။ Layers option မွာေတာ့ All layers ဆိုတာက Effect ျဖစ္မွာက Layer အကုန္လံုးလို႔ ဆိုလိုတာပါ။ အကယ္၍ Selected Layer ကိုေရြးခဲ့ရင္ေတာ့ Select လုပ္ထားတဲ့ (သို႔) Active ျဖစ္ေနတဲ့ Layer ကိုပဲ Effect ျဖစ္မွာပါ။ Parameters ကေတာ့ ဘယ္အရာကို Animation effect အျဖစ္ေဆာက္ရြက္ေစမလဲကိုဆိုလိုတာပါ။ အခု Position ကိုေရြးထားတဲ့ အတြက္ Layer1 ရဲ့ Move ျဖစ္သြားတဲ့ ေျပာင္းလဲျခင္းကို Animation ျဖစ္ေစမယ့္သေဘာပါ။ Opacity ကေတာ့ Fading in or out ကိုဆိုလိုတာျဖစ္ျပီး Effect ကေတာ့ Layer Style ရဲ့ Value ေတြကိုဆိုလိုတာပါ။ အကယ္၍ ဒီေနရာမွာ Parameters ရဲ့ Options ေတြအကုန္လံုး Select လုပ္ခဲ့လည္းဘာမွထူးမွာမဟုတ္ပါဘူး။ ဘာလို႔လဲဆိုေတာ့ အခုအသံုးျပဳေနတဲ့ Layer မွာအဲဒီ ေျပာင္းလဲျခင္းေတြ မပါ၀င္လို႔ပါ။

Frame အားလံုးကို Select လုပ္ျပီး Frame delay time ကို 0.1 sec ေလာက္ထားေပးပါ။ ျပီးရင္ File>Save Optimized လုပ္ေပးပါ။ ျပဳလုပ္ပံုေတြကေတာ့ အရင္ Tutorial အတိုင္းပါပဲ။ ဒါဆိုရင္ ပံုေလးဟာဘယ္မွညာကိုသြားေနပါျပီ။

အခုဒီပံုေလးကိုဘယ္မွညာ ညာမွဘယ္ အျပန္အလွန္သြားတဲ့ပံုေလးလုပ္ၾကည့္ရေအာင္။ လြယ္ပါတယ္ Animation Palette မွာ Frame 1 ဟာ ဘယ္ဘက္အစြန္ဆံုးမွာရွိပါတယ္၊ Frame 12 ကေတာ့ ညာဘက္အစြန္ဆံုးမွာရွိပါတယ္။ ဒါေၾကာင့္ ဘယ္မွညာ ကိုအလြယ္တကူ Tween လုပ္ထားတာပါ။ အခုဘယ္မွညာအျပင္ ညာကေနဘယ္ကိုပါသြားခ်င္ေသးေတာ့ Frame 1 ကို Copy ကူး Frame 12 ေနာက္မွာထားျပီး Tween လုပ္ေပးရံုေလးပါပဲ။

Animation Palette မွာ Frame 1 ကို Select လုပ္ပါ။ ျပီးရင္ Animation Palette ရဲ့ Popup Menu ကေန Copy Frame ကိုေရြးပါ။ ျပီးရင္ Frame 12 ကို Select လုပ္ပါ၊ Animation Palette ရဲ့ Popup Menu ကေနပဲ Paste Frame လုပ္ပါ။ Paste Frames Option ေပၚလာမွာပါ။

Paste Method မွာေတာ့ Paste After Selection ကို Choose လုပ္ျပီး Ok ႏွိပ္ေပးပါ။ ဒါဆိုရင္ Frame 13 ေပၚလာမွာပါ။ Frame 13 နဲ့ Frame 12 ကိုလည္းအထက္မွာေျပာခဲ့တဲ့နည္းအတိုင္း Tween လုပ္ေပးလိုက္ပါဦး။ ဒါဆိုရင္ Animation ပံုေလးကိုအခုလိုျမင္ရမွာပါ။

Animation Method2 (Tweening) PART 2

ဒီတစ္ခါေတာ့ ပံုေလးေတြကိုတစ္ပံုေပ်ာက္သြားလိုက္ တပံုေပၚလာလိုက္ပံုစံေလးလုပ္ရေအာင္ပါ။ ေရွ့က Tutorial ရဲ့အဆက္ျဖစ္တဲ့ အတြက္အေသးစိတ္ကိုမေရးေတာ့ပါဘူး၊ လိုအပ္သေလာက္ပဲေရးသြားမွာပါ။ Sample File ကို Download လုပ္ပါ။ ျပီးရင္ ImageReady မွာဖြင့္ပါမယ္။

Default အေနနဲ႔ Frame1 ကိုေတြမွာပါ။ Layer Palette ကိုၾကည့္ပါ Layer3 ခုရွိပါတယ္၊ အဲဒီထဲကမွ Layer1 ရဲ့ Opacity ကို 100% ထားျပီး က်န္ Layer ၂ ခုကိုေတာ့ 0% မွာထားပါ။

New Frame အသစ္ေခၚပါ။ အဲဒီ Frame2 မွာ Layer2 တစ္ခုထဲရဲ့ Opacity ကို 100% ထားျပီး က်န္တဲ့ Layer ေတြကိုေတာ့ 0% ပဲထားပါ။ အဲဒီအတိုင္းပဲ New Frame တစ္ခုထပ္ေခၚပါဦး၊ ျပီးရင္ Frame3 ရလာတဲ့အခါမွာ Layer3 ရဲ့ Opacity ကို 100% ထားျပီးေတာ့ က်န္တဲ့ Layer ေတြကိုေတာ့ 0% ပဲထားပါ။ Animation Palette ကိုၾကည့္ရင္ ဒီလိုျမင္ေနရပါျပီ။

Frame1 ရဲ့ Opacity အေနနဲ႔ Layer1 = 100%, Layer2 = 0%, Layer3 = 0%

Frame2 ရဲ့ Opacity အေနနဲ႔ Layer1 = 0%, Layer2 = 100%, Layer3 = 0%

Frame3 ရဲ့ Opacity အေနနဲ႔ Layer1= 0%, Layer2 = 0%, Layer3 = 100% အသီးသီးျဖစ္ပါတယ္။

ျပီးရင္ေတာ့ Tween Method ကိုသံုးျပီး Animate လုပ္ၾကည့္ပါမယ္။ Frame1 ကို Select လုပ္ပါ၊ Tween လုပ္ပါမယ္။ Option ေတြကေတာ့ပံုပါအတိုင္းပါပဲ။ Parameters မွာေတာ့ Opacity ကိုေရြးထားပါတယ္။

အခုတစ္ခါေနာက္ဆံုးက Frame8 ကိုSelect လုပ္ျပီး Tween လုပ္ပါဦး။ Option ကလဲပံုပါအတိုင္းပဲယူပါ။ Frame ေတြကေတာ့ ၁၃ ခုအထိျဖစ္လာမွာပါ။

ေနာက္တစ္ဆင့္ကေတာ့ Frame1 ကို Copy လုပ္ျပီး Frame13 ေနာက္မွာ Paste လုပ္ပါ။ (အေသးစိတ္ျပဳလုပ္ပံုကိုေတာ့ေရွ့ Tutorial တြင္ၾကည့္ပါ၊ Paste Method မွာေတာ့ Paste After Selection ကိုေရြးရမွာ သတိျပဳပါ)။ Frame14 ေပၚလာပါျပီ၊ သူ႔ကိုလဲ Frame13 မွာ Tween လုပ္တဲ့အတိုင္းျပဳလုပ္ပါဦး။

Frame delay time ကိုေတာ့ Frame1,7,13 တို႔ကို 0.5 sec ယူျပီးက်န္တဲ့ Frame ေတြကိုေတာ့ 0.2 sec ပဲထားပါ။ Animation ကို Play ၾကည့္္ရင္ဒီလိုပံုကိုျမင္ေနရမွာပါ။ ျပီးရင္ေတာ့ Optimize လုပ္လိုက္ရံုပါပဲ။

ဒီမွာတစ္ခုသတိထားေစခ်င္တာက ပံုေလးသံုးပံုဟာ တစ္ခုျပီးတစ္ခုေပၚေစဖို႔အတြက္ Tween ကိုသံုးထားတာအျပင္ အဆံုး Frame ကေန အစကိုျပန္ Loop ပတ္တဲ့အခါမွာ ပံုဟာရုတ္တရက္ေျပာင္းသြားတာမ်ိဳးမျဖစ္ေအာင္ Frame1 ကို copy လုပ္ျပီး Tween တစ္ခါထပ္လုပ္ရတာပါ။ သတိထားမိေလာက္မယ္ထင္ပါတယ္။

ေအာက္မွာျပထားတဲ့ ပံုေလးကိုၾကည့္ျပီး ဘယ္လိုပံုစံဖန္တီးထားတယ္ဆိုတာကို စဥ္းစားၾကည့္ၾကပါဦး။ လြယ္ပါတယ္ ခဏေလးနဲ႔ အေျဖရႏိုင္ပါတယ္။ Animation သင္ခန္းစာမ်ားမွာ ေဖာ္ျပထားတဲ့နည္းေတြကိုပဲ အသံုးျပဳထားတာပါ။ သင္လည္းအလြယ္တကူနဲ႔ဖန္တီးႏိုင္မွာပါ။ ဘယ္လိုပံုစံေလးဖန္တီးမလဲဆိုတာသာအေရးၾကီးတာပါ။

အကယ္၍မ်ား သင့္မွာခ်စ္ခင္သူတစ္ေယာက္ရဲ့ ေမြးေန႔ အတြက္ Birthday Card ေလးကိုေပးဖို႔ရွိလာခဲ့ရင္ Ready Made Online Ecard ေတြကိုေပးမယ့္အစား အခုလိုမ်ိဳး ကိုယ္ပိုင္ Creation ေလးနဲ႔တစ္ခုေလာက္ဖန္တီးၾကည့္ပါလား။

Animation Method2 (Tweening) PART 3

႐ႈပ္႐ႈပ္ရွက္ရွက္ GIF Animation Text

ဒီ Tutorial မွာ ခပ္႐ႈပ္႐ႈပ္ GIF Animation Text တစ္ခုကို အလြယ္ကူဆံုးနည္းနဲ႔ ဖန္တီးတာကို ေျပာျပပါမယ္။ အသံုးျပဳသြားမယ္
Software ေတြကေတာ့ Photoshop နဲ့ Image Ready ပဲျဖစ္ပါတယ္။ ေနာက္ဆံုးရလိုတဲ့ Output File Type က (*.gif) ျဖစ္ပါတယ္။

၁) အဲဒီအတြက္ လိုအပ္တဲ့ပံုကို Photoshop မွာဖန္တီးပါမယ္။

၂) အဲဒီ Text ကို (Ctrl +J) သို႔မဟုတ္ Duplicate Layer လုပ္ပါ။ ၿပီးလွ်င္ Opacity=75% ထားၿပီး အထက္ဘက္ကို Moveလုပ္ပါ။ မူရင္း
Text နဲ႔ သိပ္အကြာႀကီးကို မေ႐ႊ႕ပါနဲ႔။ ဒါဆို ပံုအတိုင္းေတြ႕ရမွာ ျဖစ္တယ္။

၃) အဆင့္၂ မွာျပဳလုပ္ခဲ့တဲ့အတိုင္း ေအာက္က Layer_1 ကို Select လုပ္၊ Duplicate, Opacity 75% နဲ႔ Move ေနာက္ထပ္ ၃ႀကိမ္ လုပ္ပါမယ္။ ဒါေပမယ့္ ယခုအေခါက္ေတြမွာေတာ့ အထက္ကို မလုပ္ဘဲ ေအာက္ဘက္ရယ္၊ ဘယ္ဘက္နဲ႔ ညာဘက္ကို လုပ္ပါမယ္။ အဓိကကေတာ့ အရပ္ေလးမ်က္ႏွာကို ျဖန္႔ထြက္သြားတဲ့ပံုစံကို လိုခ်င္လို႔ပါ။

ၿပီးရင္ေတာ့ အဲဒီအေပၚက Layer ၄ခု ကို Layer တစ္ခုတည္းျဖစ္ေအာင္ Merge Down လုပ္ပါ။ အဲဒီေလးခုတဲြကို Step_1 လို႔ နာမည္ေပးပါ။

၄) အဆင့္၃ မွာ လုပ္ခဲ့သလိုပဲ ေအာက္က Layer_1 ကို Duplicate, Opacity နဲ႔ Move လုပ္ပါမယ္။ ဒီတစ္ေခါက္မွာေတာ့ Move လုပ္ရမယ့္ အကြာအေ၀းေတြက အဆင့္၃ မွာ လုပ္ခဲ့တဲ့ Layer ေတြရဲ႕ ႏွစ္ဆ အကြာအေ၀းျဖစ္ပါတယ္။ ၿပီးရင္ အဲဒီ Layer ၄ ခုက Merge Down လုပ္ၿပီး Step_2 လို႔ နာမည္ေပးပါ။ ပံုအတိုင္း ေတြ႕ရမွာ ျဖစ္တယ္။

၅) အထက္က အဆင့္၄မွာ လုပ္ခဲ့တဲ့အတိုင္း ေနာက္ထပ္ ႏွစ္တဲြထပ္လုပ္ပါမယ္။ Step_3 နဲ႔ ွStep_4 ဆိုၿပီးေတာ့ ျဖစ္ပါတယ္။

၆) ၿပီးလွ်င္ေတာ့ အဲဒီ File ကို Save လုပ္ပါ။ ၿပီးလွ်င္ Image Ready ကို ေခၚၿပီးေတာ့ ထို Fileကို ဖြင့္ပါ။ Animation Palette ကိုၾကည့္ပါ။ အကယ္၍ သင့္ Image Ready မွာ အရန္သင့္ရွိမေနဘူးဆိုရင္ (Window > Animation) ကိုေခၚရပါမယ္။ အဲဒီေနာက္ ပထမဦးဆံုး Slideမွာေတာ့ Background Layer နဲ႔ အေပၚက Layer_1 ကိုသာဖြင့္ပါမယ္။

၇) ၿပီးလွ်င္ New Frame တစ္ခုကို ေခၚပါ။ ဒီတစ္ခါမွာေတာ့ Layer_1 ကိုပိတ္ၿပီး Step_1 ကိုဖြင့္ပါ။

၈) ဒီအဆင့္အတိုင္း ေနာက္ထပ္ New Frame ေတြကို လုပ္ပါ။ အဲလိုလုပ္တဲ့အခါမွာ Frame ေတြကို တစ္ပတ္လည္ loop ျဖစ္ေအာင္ဖန္တီး ရပါမယ္။ ဒီ Tutorial မွာ ဖန္တီးထားတဲ့ Frame ေတြနဲ Layer ေတြရဲ႕ အေနအထားကို အစအဆံုး ေျပာရမယ္ဆိုရင္...

Frame ၁ ၂ ၃ ၄ ၅ ၆ ၇ ၈
Layer Layer1 Step_1 Step_2 Step_3 Step_4 Step_3 Step_2 Step_1

ၿပီးရင္ေတာ့ Frame_1 ကို Delay Time ကို 1.0 Seconds မွာထားပါမယ္။ က်န္တဲ့ Frame ေတြကိုေတာ့ ခပ္သြက္သြက္ပဲျဖစ္ေစခ်င္လို႔ (No Delay/ 0 Second) မွာထားပါတယ္။

ျပီးရင္ GIF ေျပာင္းလိုက္ရံုပါပဲ (Save Optimized)။ ဒီအတိုင္းေတြျမင္ရမွာပါ။

ေနာက္ထပ္ နမူနာတစ္ခုကို ေအာက္မွာေတြ႔ႏိုင္ပါတယ္။ နမူနာ File ကေတာ့ Move အျပင္ Scale ကိုပါေျပာင္းထားပါတယ္။

ေဖာင္း ၀ ႀကီး Animation Text

Gif Animation ေတြကိုဖန္တီးရတာ သိပ္ေပ်ာ္ဖို႔ေကာင္းပါတယ္။ ဒီတစ္ေခါက္ Tutorial ကို တခ်ိဳ႕က ေဖာင္းလာတာ၊ တခ်ိဳ႕က ၀လာတာ၊ တခ်ိဳ႕က ႀကီးလာတာတဲ့။ အဲလို အမ်ိဳးမ်ိဳးေခၚၾကေလသတဲ့။ အသံုးျပဳသြားမယ့္ Software ေတြက Photoshop နဲ႔ Image Ready တို႔ပဲျဖစ္တယ္။

၁) အဲဒီအတြက္ လိုအပ္တဲ့ Background နဲ႔ Text ကို Photoshop မွာ႐ိုက္ပါ။ Text Effect ကိုေတာ့ သင့္စိတ္ႀကိဳက္ထည့္ေပါ့ေနာ္။

၂) ၿပီးရင္ေတာ့ Text Layer ကို (Layer > Duplicate Layer) သို႔မဟုတ္၊ (Ctrl + J) ကိုႏွိပ္ၿပီး ေနာက္ထပ္ Layer ၅ခု Duplicate လုပ္ပါမယ္။ Duplicated Layer ေတြထဲကမွ Copy_1 ကိုသာဖြင့္ၿပီး Original Layer ရယ္ က်န္တဲ့ Layer ေတြကိုပါ မ်က္လံုးပံုေလးႏွိပ္ၿပီး ခဏေဖ်ာက္ထား ပါမယ္။

၃) Marquee Tools ထဲက Elliptical Marquee Tool ကို ေ႐ြးပါ။

ၿပီးရင္ ဖြင့္ထားတဲ့ Text ရဲ႕ ဘယ္ဘက္အစြန္ဆံုးနားကို Selection လုပ္ပါမယ္။ Complete Circle ရေအာင္ Shift ဖိၿပီးေ႐ြးပါ။ Space bar ကိုဖိရင္ေတာ့ ေ႐ြးရင္းနဲ႔ ေ႐ႊ႕လို႔ရပါလိမ့္မယ္။ Selection အ႐ြယ္အစားကေတာ့ Text တစ္ခုလံုး အလ်ားရဲ႕ ငါးပံုတစ္ပံု 1/5 ခန္႔ျဖစ္ပါတယ္။

၄) အဲဒီ Selection လုပ္ထားတဲ့ Text ကို (Filter > Distort > Spherize) လုပ္ပါ။ Amount = 100% ထားပါမယ္။ ဒါဆိုပံုအတိုင္းေတြ႕ရပါမယ္။

၅) ၿပီးရင္ အဲဒီ Layer ကို ခဏေဖ်ာက္ၿပီး သူ႔အေပၚက Layer Copy_02 ကို ဖြင့္ပါ။ Layer ကို Select လုပ္ဖို႔လည္း မေမ့ပါနဲ႔။ Marquee Selection ကို ညာဘက္သို႔ေ႐ြ႕ပါမယ္။ ၿပီးရင္ အထက္ကအတိုင္း (Filter > Distort > Spherize) လုပ္ပါမယ္။ ေနာက္ဆံုးလုပ္ခဲ့တဲ့ Filter ျဖစ္လို႔ (Ctrl + F) လုပ္ရင္လည္းရပါတယ္။ ဒီေနရာမွာ သတိထားရမွာက Marquee ကို Move လုပ္တဲ့အခါမွာ Tool Selection ဟာ Move Tool (V) ထဲကို ေရာက္မေနဖို႔ပါပဲ။ Marquee Selection ေတြထဲမွာပဲေ႐ြးထားရပါမယ္ (Selection ကိုေရြ႔ခ်င္ရင္ Selection tools မ်ားျဖစ္ေသာ Marquee, Lasso, Magic wand တို႔ျဖင့္သာေရြ႔ရပါမယ္)။ ဒါဆို ပံုအတိုင္းေတြ႕ရမွာပါ။

၆) အဲဒီအတိုင္းပဲ က်န္တဲ့ Layer ၃ခုကိုလည္း တလွည့္စီဖြင့္ၿပီး Spherize Effect ထည့္သြားပါမယ္။ ဒါဆိုေအာက္ပါအတိုင္းေတြ႕ရမွာပါ။ Text ဟာ ဘယ္ဘက္က ညာဘက္ကိုေ႐ြ႕ၿပီး အလွည့္က် ေဖာင္းသြားတာကိုေတြ႕ရပါမယ္။

၇) ၿပီးရင္ ဒီပံုကို Save လုပ္ၿပီး Image Ready ကေနျပန္ဖြင့္ပါမယ္။ Frame Order ကေတာ့ အထက္ကအတိုင္း အစဥ္အလိုက္ပဲျဖစ္ပါတယ္။ Frame Rate အေနနဲ႔ Original Text ကို 1.0 sec ထားၿပီး က်န္တဲ့ Copy Layer ေတြကိုေတာ့ 0.2 sec မွာ ထားပါမယ္။ ၿပီးသြားရင္ေတာ့ Gif File အေနနဲ႔ေျပာင္းၿပီး save လုပ္ပါမယ္။ ေအာက္ပါအတိုင္းေတြ႕ရမွာပါ။

ဒီ Tutorial က Text ေတြအတြက္သာမဟုတ္ပါဘူး။ သင္ႀကိဳက္ႏွစ္သက္ရာပံုကိုျပဳလုပ္လို႔ရပါတယ္။ ပိန္တာ၊ ခ်ိဳင့္သြားတာမ်ိဳးလိုခ်င္ရင္ေတာ့ (Filter > Distort > Pinch) သို႔မဟုတ္ Spherize ကိုပဲ Negative Amount ေပးလိုက္လို႔ရပါတယ္။ သင့္ခ်စ္သူ ဒါမွမဟုတ္ သင္ဟာ ပိန္လြန္းလို႔ အားငယ္ေနသလား။ ေဖာင္း၀ႀကီး Animation နည္းကို အသံုးျပဳပါလို႔ အၾကံေပးခ်င္ပါတယ္။

Animation ads

တစ္ခုေသာေန႔လည္ခင္းတြင္ လြန္စြာမွအလုပ္မ်ားေနသူတစ္ဦးထံသို႔ သူ၏မိတ္ေဆြတစ္ေယာက္အလည္လာမိရာ . . .
HTN: ေဟ့လူဘာေတြအလုပ္မ်ားခ်င္ေယာင္ေဆာင္ေနတာတုန္း
KZO: ဟာဆရာဟန္သစ္ျငိမ္ပါလားဗ်၊ ခင္ဗ်ားသိလားက်ဳပ္အခုအလုပ္အသစ္ေျပာင္းလုပ္ေနျပီဗ်၊
HTN: ေဟာဗ်ာ ဘာအလုပ္တုန္း၊ မေကာင္းမႈေတြမလုပ္ေတာ့ပါဘူးလို႔ ခင္ဗ်ားကတိေပးထားတယ္ေနာ္။
KZO: ဟာဗ်ာဆရာကလဲ အခုလုပ္ေနတာက ကားပြဲစားကုမၸဏီပါဗ်ာ၊ ကားေတြကိုယ္တိုင္ေရာင္းတယ္ ၀ယ္တယ္ သူမ်ားကားေတြကိုလည္း လက္ခံေရာင္းေပးျပီး ပြဲခယူတယ္။ မေကာင္းမႈမဟုတ္ပါဘူး၊ ကုမၸဏီကအခုမွစေထာင္ထားတာ၊ အဲဒီေတာ့ website မွာေၾကာ္ျငာဖို႔အတြက္ Animation ေလးတစ္ခုလုပ္ေနတယ္။
HTN: တယ္ဟုတ္ပါလား က်ဳပ္ကိုလည္းျပပါဦး၊
KZO: အခုသံုးခ်င္တဲ့ပံုေတြ Layout ခ်ျပီးသြားျပီ၊ Animation လုပ္ဖို႔ပဲက်န္ေတာ့တယ္။ ဒီမွာ (download sample file here) အဲဒီ File ကိုဖြင့္လိုက္ရင္ back, car1, car2, car3 ဆိုျပီး Layer ေလးခုေတြ႔ရမယ္။ ပထမဆံုး car1 ဆိုတဲ့ Layer ကို Duplicate လုပ္လိုက္မယ္ဗ်ာ၊ ျပီးရင္ car1 copy ဆိုတဲ့ Layer ကလြဲလို႔ က်န္တဲ့ Layer ေတြကိုခဏ ေဖ်ာက္ထားလိုက္မယ္။

HTN: ဘာလို႔ေဖ်က္တာတုန္းဗ် ဒီအတိုင္းဆက္လို႔မရဘူးလား
KZO: ဒီတိုင္းမေဖ်ာက္ပဲထားလဲ ရပါတယ္ဗ်၊ မ်က္စိထဲရွင္းေအာင္ပါ။ ျပီးရင္အဲဒီ car1 copy ဆိုတဲ့ Layer ကို Filter>Blur>Motion Blur ေပးလိုက္ပါမယ္။ Setting ေတြကေတာ့ Angle: 90 နဲ႔ Distance: 50 ေပးလိုက္မယ္၊ အခုဟာက ကားေလးကို အေပၚေအာက္သြားျပီး ေပ်ာက္သြားတဲ့ စတိုင္မ်ိဳးလိုခ်င္ေတာ့ Angle ကို အေပၚေအာက္သြားတဲ့ 90 ေပးရတာဗ်ာ၊ Distance ကေတာ့ ၾကည့္ေကာင္းတဲ့ အေနေပါ့ဗ်ာ။

KZO: အခု car1 copy Layer ကို Motion Blur လုပ္ျပီးသြားေပမယ့္ ေအာက္ေျခက စာသားေတြကို Blur ရဲ့ Area ေတြမပါလာေအာင္ Marquee သံုးျပီး အခုလို Selection လုပ္ျပီး ဖ်က္လိုက္မယ္ဗ်ာ။

KZO: က်န္တဲ့ car2, car3 Layer ေတြကိုလည္း ဒီအဆင့္ေတြအတိုင္းပဲ Duplicate လုပ္ျပီး Motion Blur Filter ေပးလိုက္ပါဦး၊ အဲဒီေနာက္ ေအာက္ေျခစာတမ္းကို လာထိရင္ဖ်က္လုိက္တာေပါ့၊ ဒါဆိုရင္ Layer စုစုေပါင္း ၇ ခုျဖစ္သြားျပီ။ back Layer ကိုပဲ Visible on ထားျပီး က်န္တဲ့ Layer ေတြကိုပိတ္ထားလိုက္မယ္။

KZO: အခု Photoshop ကလုပ္ထားတာေတြျပီးေတာ့ ImageReady ထဲကိုသြားရေအာင္ (Ctrl+Shift+M)။ Animation Palette ကိုၾကည့္ရင္ Frame1 ကိုေတြ႔ရမယ္၊ အဲဒီ Frame မွာ back, car1 ဆိုတဲ့ Layer ႏွစ္ခုကို visible on ထားျပီးက်န္တာေတြကို ပိတ္ထားလိုက္ပါဦးမယ္ Frame duration ကေတာ့ 2 sec ထားလိုက္မယ္။

KZO: ျပီးရင္ New Frame တစ္ခုထယူပါဦးမယ္၊ အဲဒီ Frame မွာေတာ့ car1 ဆိုတဲ့ Layer ကို Move tool နဲ႔ အေပၚနဲနဲတိုးေပး လိုက္မယ္။ ေနာက္တစ္ခါလဲ New Frame ထပ္ယူျပီးေတာ့ အဲဒီ car1 Layer ကိုပဲ ေနာက္ထပ္ အေပၚနဲနဲ ထပ္တိုးေပးမယ္။
HTN: ဟာခင္ဗ်ားလုပ္မွာကို က်ဳပ္ရိပ္မိျပီ Layer ေတြေအက္ဆင္းျပီးေပ်ာက္မသြားခင္အေပၚကိုနဲနဲတိုးျပီးမွ ေအာက္ကို၀င္ေပ်ာက္သြား ဟုတ္တယ္မွတ္လား။
KZO: ဟုတ္ပါ့ ဒီပံုစံလိုမ်ိဳးဗ်။

KZO: အဲဒီအစီအစဥ္အတိုင္းပဲ က်န္တဲ့ Layer ေတြကိုလည္း လိုက္လုပ္ေပးမယ္ဗ်ာ၊ ဒီလိုပံုစံအတိုင္းျဖစ္မယ္။

Frame	ဖြင့္ရမည့္ Layer မ်ား		Duration
1	back	car1	2 sec
2	back	car1 အေပၚနဲနဲတိုး	0 sec
3	back	car1 အေပၚနဲနဲတိုး	0 sec
4	back	car1 copy	0 sec
5	back		0.2 sec
6	back	car2 copy	0 sec
7	back	car2	2 sec
8	back	car2 အေပၚနဲနဲတိုး	0 sec
9	back	car2 အေပၚနဲနဲတိုး	0 sec
10	back	car2 copy	0 sec
11	back		0.2 sec
12	back	car3 copy	0 sec
13	back	car3	2 sec
14	back	car3 အေပၚနဲနဲတိုး	0 sec
15	back	car3 အေပၚနဲနဲတိုး	0 sec
16	back	car3 copy	0 sec
17	back		0.2 sec
18	back	car1 copy	0 sec

KZO: ျပီးရင္ေတာ့ ထံုးစံအတိုင္းပဲ File>Save Optimized လုပ္လိုက္ရင္၊ က်ဳပ္ရဲ့ ကားေၾကာ္ျငာေလးကို ဒီလိုျမင္ရျပီေလဗ်ာ

HTN: ဟာမိုက္တယ္ဗ်ာ၊ ခင္ဗ်ားကုမၸဏီအတြက္ ေၾကာ္ျငာေကာင္းေကာင္းေလးလုပ္ဗ်ာ။ ဒါမွခင္ဗ်ားကားေတြ မ်ားမ်ားထြက္မွာ
KZO: ခင္ဗ်ားေရာ ကားေလးတစ္စီးေလာက္၀ယ္ပါဦးဗ်ာ က်ဳပ္ဒီေန႔ေစ်းဦးေပါက္ေလးရခ်င္တယ္။
HTN: ဟာ . . . က်ဳပ္ကားမလိုအပ္ေသးဘူးဗ်ာ။
KZO: ခင္ဗ်ားအတြက္မဟုတ္ဘူးေလ ကိုမ်ိဳးဟိန္းေဇာ္ မဂၤလာေဆာင္မွာ လက္ဖြဲ႔ဖို႔ေျပာတာ . . . . . . . . + - * / + . . . ။

ဤသို႔ျဖင့္ ပြဲစားၾကီးေက်ာ္ဇင္ဦး၏ ကုမၸဏီသည္ေစ်းဦးေပါက္ ကားအေရာင္းတည့္သြားေလေတာ့သည္။

Wipe Transition

အခုတစ္ခါျပဳလုပ္ၾကမယ့္ Animation တစ္ခုကေတာ့ Layer Mask ကိုအသံုးျပဳျပီးေတာ့ Wipe Transition တစ္ခုဘယ္လိုျပဳလုပ္မယ္ ဆိုတာပါပဲ၊ Layer Mask မွာ အျဖဴေရာင္ဟာ Layer ရဲ့ Pixel ေတြကို Show လုပ္ျပီး အနက္ေရာင္ကေတာ့ Hide လုပ္ေပးတာကိုသိျပီးျဖစ္မွာပါ။ အခု Sample File ေလးကို Download လုပ္ျပီး PhotoShop မွာဖြင့္ၾကည့္လိုက္ရေအာင္။

Layer Palette ကိုၾကည့္ရင္ Background Layer အပါအ၀င္ စုစုေပါင္း Layer ေလးခုရွိပါတယ္၊ အဓိကေျပာခ်င္တာက Lady ဆိုတဲ့ Layer မွာ Layer Mask ဖံုးထားတာကိုေတြ႔မွာပါ၊ အဲဒီ Layer Mask မွာအေရာင္ဟာ ဘယ္တျခမ္းမွာအျဖဴေရာင္ရွိျပီး ညာဘက္မွာေတာ့ အနက္ေရာင္ ရွိေနပါတယ္ ဒါ့အျပင္ အလယ္မွာေတာ့ အျဖဴ ကေန အနက္ေရာင္ကို Gradient ဧရိယာနဲနဲေလးေျပးထားတာ ကိုေတြ႔မွာပါ။ အဲဒီ Layer Mask နဲ႔ Layer ကို Link လုပ္မထားပါဘူး။ Layer သက္သက္ Layer Mask သက္သက္ ေရြခ်င္တဲ့အတြက္ေၾကာင့္ ဒီလိုလုပ္ထားရတာပါ။

အခု Image Ready ကိုကူးသြားပါမယ္ ( Ctrl + Shift + M )။
အဆင့္(၁) Image Ready ရဲ့ Animation Palette (Window>Animation) မွာ Frame1 ကို ေတြ႔မွာပါ။ အဲဒီ Frame1 မွာ Background Layer ကလြဲျပီးက်န္တဲ့ Layer ေတြကိုေဖ်ာက္ထားလိုက္ပါမယ္၊ Frame duration ကိုေတာ့ 0.5 sec ေပးလိုက္ပါမယ္။
အဆင့္(၂) အဲဒီေနာက္မွာ New Frame တစ္ခုယူပါမယ္ (Frame2)၊ line ဆိုတဲ့ Layer ကိုပါ visible on လိုက္ပါမယ္။ Frame Duration ကိုေတာ့ 1 sec ထားေပးပါ။
အဆင့္(၃) အခု Frame3 ကိုအသစ္ယူျပီးေတာ့ lady Layer ကိုပါ visible on လုိက္ပါမယ္။ အေရးအၾကီးဆံုးအဆင့္ပါ၊ Layer palette ကိုၾကည့္ပါ အဲဒီကေန Layer Mask ကို Active ျဖစ္သြားေအာင္ Click လုပ္ပါမယ္။ ျပီးရင္ Move tool သံုးျပီးေတာ့ လူပံုေလးေပ်ာက္သြားတဲ့ အထိ ဘယ္ဘက္ကိုေရြေပးပါ။ Horizontal အတိုင္းေရြမွာပါ၊ Mouse ကိုေရြ႔ေနတုန္းမွာ Shift Key ႏွိပ္ထားျခင္းျဖင့္ Straight line အတိုင္း Move လုပ္ႏိုင္ပါတယ္။ Frame Duration ကေတာ့ 0 sec ပါ။

အဆင့္(၄) New Frame တစ္ခုထပ္ယူပါမယ္၊ Frame4 ပါ။ ဒီအဆင့္မွာေတာ့ Frame3 နဲ့ေျပာင္းျပန္ပါ၊ အရုပ္ေလးေပၚလာေအာင္လို႔ Layer Mask ကို Move tool သံုးျပီး ညာဘက္ကိုျပန္ေရြ႔ရမွာပါ။ လူပံုတစ္ခုလံုးေပၚတဲ့အေနအထားအထိပါ။ Frame Duration ကလဲ 0 sec ပါပဲ။
အဆင့္(၅) ဒီအဆင့္မွာေတာ့ Tween လုပ္ဖို႔ပါပဲ၊ Frame4 ကို Select လုပ္ထားစဥ္မွာ Animation Palette ရဲ့ Pop up menu ကေန Tween ကိုေရြးလိုက္ပါမယ္။ Setting ေတြကိုပံုပါအတိုင္းပဲယူလိုက္ပါမယ္။

အဆင့္(၆) ေနာက္ဆံုးက Frame14 ကို Frame Duration 1 sec ေပးလိုက္ပါမယ္။ က်န္တာဘာမွမလုပ္ပါဘူး
အဆင့္(၇) New Frame (Frame15) တစ္ခုထပ္ယူပါမယ္၊ ဒီမွာေတာ့ Text Layer ကို Visible ဖြင့္လိုက္ပါမယ္၊ Frame Duration ကို 2 sec ေပးလိုက္ပါမယ္။
ေနာက္ဆံုးမွာေတာ့ File>Save Optimized လုပ္ျခင္းျဖင့္ ေအာက္ပါ Animation sequence ေလးတစ္ခုကိုရပါလိမ့္မယ္။

ဒီလို Animation မ်ိဳးကို Web Page ေတြမွာ ေတြ႔ျမင္ေနၾကပါ။ မိမိရဲ့ အေတြးေပၚမူတည္ျပီး ပံုစံ အမ်ိဳးမ်ိဳး Animate လုပ္ႏိုင္ပါတယ္။ Idea ေကာင္းရင္ေကာင္းသလိုေပါ့၊ ဒီ Tutorial ကေတာ့ Wipe Transition ကိုနမူနာေပးရံုေလာက္ပါပဲ။

Dissolve Transition

အရင္တစ္ေခါက္က Layer Mask ကိုအသံုးျပဳျပီး Wipe Transition တစ္ခုကိုဖန္တီးအျပီးမွာ အခု Dissolve Transition တစ္ခုကိုလည္း ဖန္တီးၾကည့္ရေအာင္။ ပထမဦးဆံုးေျပာခ်င္တာကေတာ့ Layer ေတြရဲ့ Blending mode အေၾကာင္းပါ၊ PhotoShop မွာ Layer ေတြကိုအသံုးျပဳ တဲ့အခါမွာ Layer Blending Mode ဟာအေရးၾကီးပါတယ္၊ အခု Tutorial အတြက္ေတာ့ တျခားေသာ Mode ေတြကိုခဏေလးထားျပီး အခု Dissolve mode အေၾကာင္းေျပာရမွာပါ။ အခု PhotoShop မွာ Background Layer ကိုအျဖဴထားျပီး Layer1 ကိုေတာ့ေအာက္မွာျမင္ရတဲ့ ပံုေလးထားလိုက္ပါတယ္။

Layer Palette ကိုသြားျပီး Layer1 ရဲ့ Blending mode ကို Dissolve လို႔ေျပာင္းလိုက္ပါမယ္၊ ပံုကိုအခုေနၾကည့္လိုက္ရင္ေတာ့ ဘာမွာမထူးေသး ပါဘူး၊ ဒါေပမယ့္ အဲဒီ Layer1 ရဲ့ Opacity ကို 50% ေလာက္ထားၾကည့္လိုက္ပါမယ္။

ဒါဆိုရင္ေတာ့ Layer1 ဟာၾကည္ၾကည္လင္လင္ ျမင္ရမွာမဟုတ္ေတာ့ပါဘူး တခ်ိဳ႔ေသာ Pixel ေတြဟာေပ်ာက္သြားျပီး Background Layer ရဲ့ အျဖဴေရာင္ၾကီးကိုေတြ႔ရမွာပါ၊ Layer1 ရဲ့ Opacity နဲေလေလ Background Layer ရဲ့ဧရိယာမ်ားမ်ားေပၚလာေလေလပါပဲ။ အဲဒီ Layer1 ရဲ့ Opacity ကိုကစားၾကည့္ပါ လြယ္လြယ္သေဘာေပါက္မွာပါ။

ဒီအေျခခံေလးကိုပဲ အသံုးျပဳျပီးေတာ့ ကြ်န္ေတာ္တို႔ Image Ready မွာ Animation လုပ္ၾကည့္ၾကမွာပါ။ အခုေပးထားတဲ့ Sample file ကို Download လုပ္ျပီး PhotoShop မွာဖြင့္လိုက္ရေအာင္။ Background နဲ႔ Layer1 ဆိုျပီး Layer ႏွစ္ခုပါတာကိုေတြရမွာပါ။ Layer1 ရဲ့ Blending mode ကို Dissolve ကိုေရြးလိုက္ပါမယ္၊ျပီးရင္ Image Ready ကိုသြားရေအာင္ ( Ctrl + Shift + M )။

Image Ready ရဲ့ Animation Palette မွာ Frame တစ္ခုကေတာ့ Default ရွိေနမွာပါ၊ အခု New Frame ႏွစ္ခုအသစ္ထပ္ယူပါမယ္၊ စုစုေပါင္း ၃ ခုျဖစ္သြားပါျပီ။ Layer1 ရဲ့ Opacity ေတြကိုေတာ့ Frame1 မွာ 0% Frame2 မွာ 100% နဲ႔ Frame3 မွာ 0% အသီးသီးထားလိုက္ပါမယ္။

ဒါဆိုရင္ Tween လုပ္ဖို႔ အဆင္သင့္ျဖစ္ေနပါျပီ၊ Frame2 ကို Select လုပ္ျပီး Animation Palette ေအာက္ေျခက Tweens animation frames ဆိုတဲ့ခလုပ္ေလးကိုႏွိပ္လိုက္ပါမယ္၊ Setting ေတြကေတာ့ ေအာက္ပါအတိုင္းပါပဲ။

ျပီးရင္ေနာက္ဆံုး Frame ျဖစ္တဲ့ Frame8 ကိုလဲ ဒီ Setting ေတြအတိုင္းပဲ Tween လုပ္ပါဦးမယ္၊ ေနာက္ထပ္လုပ္စရာတစ္ခုကေတာ့ Frame duration ပါပဲ။ Frame1 နဲ႔ Frame7 ကို 1 sec ထားျပီးက်န္တဲ့ Frame ေတြကိုေတာ့ 0 sec ပဲထားလိုက္ပါ။ ေနာက္ျပီးေတာ့ Frame7 က Layer1 ရဲ့ Blending mode ကို Normal ထားေပးလိုက္ပါမယ္၊ ( ပံုရဲ့ ေဘးနားက Pixel ေလးေတြ ထင္းသြားေအာင္လို႔ပါ)၊ က်န္တဲ့ Frame ေတြကေတာ့မေျပာင္းပါဘူး Dissolve ပါပဲ။ ေနာက္ဆံုးအဆင့္အေနနဲ႔ Optimize လုပ္လိုက္ရင္ ( File>Save Optimized ) ပံုေလးကို ဒီအတိုင္းျမင္ရမွာပါ။

ဒီ Tutorial မွာ Tween ကစားတာက Opacity ကိုကစားထားတာပါ၊ ဒါေပမယ့္ Blending mode မွာ Dissolve ဟာဆိုရင္ Opacity ကိုလိုက္ျပီး တုန္႔ျပန္မႈေပးပါတယ္။ Opacity မ်ားရင္ Layer ရဲ့ Pixel area နဲနဲဟာ ေပ်ာက္သြားျပီး ေအာက္မွာရွိတဲ့ Layer ေတြေပၚလာပါတယ္၊ Layer ရဲ့ Opacity နဲသြားရင္ေတာ့ Pixel ေတြဟာအမ်ားၾကီးေပ်ာက္သြားျပီး ေအာက္မွာရွိတဲ့ Layer ေတြကိုအမ်ားၾကီးျမင္လာရတာပါ။ ဒီ Opacity ကို Tween လုပ္လိုက္ေတာ့ Dissolve Transition တစ္ခုရလာပါေတာ့တယ္။

အခုဆိုရင္ Dissolve ကိုသံုးျပီး ေအာက္ပါပံုေလးကိုလည္း ဘယ္လိုဖန္တီးရမလဲဆိုတာကို သင္သိႏွင့္ေလာက္ပါျပီ။ သင္ကိုယ္တို္င္လည္း Try ၾကည့္ပါဦး။ MMphotoshop မွာ Animation သင္ခန္းစာ အေတာ္မ်ားမ်ားကို ေရးသားျပီးခဲ့ပါျပီ၊ ၾကံဳရင္လည္း ဆက္လက္ ေရးသားပါဦးမယ္၊ အခုဆိုရင္ သင့္ဖန္တီးမႈစြမ္းအား ေတြကို Animation ေတြအျဖစ္ ဒီသင္ခန္းစာေတြကိုသံုးျပီး အေကာင္အထည္ ေဖာ္ႏိုင္ေလာက္ပါျပီ။