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 ကိုနမူနာေပးရံုေလာက္ပါပဲ။

ၿပီးပါၿပီ ...