فلیش فلیش میں پری لوڈر (Preloader) بنانا

شروع اللہ کے نام سے جو بڑا مہربان ، نہایت رحم فرمانے والا ہے۔
فلیش میں پری لوڈر (Preloader) بنانا
MAKING PRELOADER IN FLASH
اُردو ویب کے عزیز ممبرز!....السلام علیکم!

انشاء اللہ !۔ ۔ ۔ اس ٹیوٹوریل میں آپ سیکھیں گے:
٭۔ ۔ ۔ فلیش میں پری لوڈر (Preloader) بنانا​
Preloader کیا ہے؟
پری لوڈر بنیادی طور پر مددگار (Usability Aid) ایڈ ہوتا ہے۔ ان کا مقصد فلیش مووی یا ویب سائٹ کو وزٹ کرنے والوں کو آسانی فراہم کرناہوتا ہے۔جب تک اصل مواد وزیٹر کے پاس لوڈ نہیں ہو جاتا ، پری لوڈر یوزر کو ایک محتاط اندازہ دیتا رہتا ہے کہ فلاں فلیش مووی کتنی دیر میں لوڈہو جائے گی!۔ ۔ ۔ یہ ایسا ہی ہے جو کسی بھی سافٹ ویئر کی انسٹالیشن کے دوران نظر آتا ہے!۔ ۔ ۔ یہ اس لئے بھی ضروری ہے کیونکہ ہر کسی کو تیز رفتارانٹرنیٹ سروس میسر نہیں ہوتی!۔ ۔ ۔ اور بہت سے لوگ موڈیم کا استعمال کر رہے ہوتے ہیں ۔ پری لوڈر سے ہم وزیٹرکو ایک محتاط اندازہ دے سکتے ہیں تاکہ وہ Frustration کا شکارہو کر کہیں ہماری ’’محنت‘‘ سے بنائی گئی فلیش مووی کو لوڈ ہونے سے پہلے ہی بند نہ کردے!۔ ۔ ۔ (مسکراتے ہوئے)۔ ۔ ۔ آئیے پری لوڈر بنانا سیکھتے ہیں!​


[flash]http://www.urduweb.org/flash/preloader.swf[/flash]​

آپ اس ٹیوٹوریل میں یہ پری لوڈر بنائیں گے!


Preloader Animation مووی کلپ بنانا: ٭۔ ۔ ۔ سب سے پہلے فلیش پروگرام چلائیں اورایک مووی کلپ سمبل
Insert>New Symbol تیار کریں اور تصویر کے مطابق خانہ پری کریں۔​


preloader1.png
 
٭۔ ۔ ۔ اب اس مووی کلپ میں Layer 1 کا نام actions رکھ دیں ۔ اس لیئر میں فریم10 میں ایک کی فریم کا اضافہ کریں ۔ اب فریم 1 اور فریم10 دونوں پر رائٹ کلک کر کے ایکشن پینل کھولیں اور تصویر کے مطابق دونوں فریمز میں
کوڈ:
[/FONT][FONT=Urdu Naskh Asiatype][COLOR=blue][B]stop(); [/B][/COLOR]
ایکشن ٹائپ کر دیں۔


preloader2.png


٭۔ ۔ ۔ اب اسی مووی کلپ میں ایک اور لیئراضافہ کریں اور اس میں اپنی مرضی سے کوئی بھی چیز بنائیں جسے آپ پری لوڈر کے طور پر’’ بھرتے‘‘ ہوئے دیکھنا چاہتے ہوں۔اسے گرافک سمبل میں کنورٹ کر دیں!۔ ۔ ۔ جیسے میں نے ایک دل بنایا ہے جو آہستہ آہستہ بھرتا ہوا نظر آئے گا!۔ ۔ ۔ (جوں جوں فلیش مووی لوڈ ہوگی!)۔ ۔ ۔ تصویر دیکھئے!​


preloader3.png
 
٭۔ ۔ ۔ اب اسی مووی کلپ میں ایک اور لیئراضافہ کریں اور اس لیئر کو ڈریگ کر کے سب سے نیچے رکھ دیں۔ یہاں بھی اپنی مرضی سے کوئی بھی چیز بنائیں جسے آپ پری لوڈر کے طور پر’’ بھرتے‘‘ ہوئے دیکھنا چاہتے ہوں۔ ۔ ۔ اسے گرافک سمبل میں کنورٹ کر دیں!۔ ۔ ۔ جیسے میں نے خون بنایا ہے جو سفید دل کو آہستہ آہستہ بھرے گا!۔ ۔ ۔ (جوں جوں فلیش مووی لوڈ ہوگی!)۔ ۔ ۔ تصویر دیکھئے!


preloader4.png
٭۔ ۔ ۔ اس گرافک کو اوپر والے گرافک سے تھوڑا نیچے یا پیچھے رکھیں ۔اب اس لیئر میں فریم 10 میں ایک کی فریم کا اضافہ کریں اور اس کی فریم میں اس گرافک کو ڈریگ کر کے اوپر والے گرافک کے اوپر ڈال دیں۔ خیال رہے کہ یہ گرافک اوپر والے گرافک سے تھوڑا بڑا ہونا چاہئے تاکہ اوپر والے گرافک کو پوری طرح ’’بھر‘‘ لے۔ اب اس لیئر پر رائٹ کلک کر کے Create Motion Tween پر کلک کریں۔ اب آپ کا Timeline اور اسٹیج کچھ اس طرح دکھائی دینا چاہئے!


preloader5.png
 
٭۔ ۔ ۔ اب ایک اور نئی لیئر کا اضافہ کر یں اور اسے ڈریگ کر کے سب سے نیچے لے جائیں۔

٭۔ ۔ ۔ اب اوپر والے گرافک (دل ) کو منتخب کر کے کاپی (Ctrl+C) کریں اور اس نئی لیئر میں آکر Edit>Paste in Place کے ذریعے اسی جگہ پیسٹ کردیں جہاں اوپر والا گرافک موجود ہے!

٭۔ ۔ ۔ اب اوپر والے گرافک (دل) کی لیئر پر رائٹ کلک کریںاور تصویر کے مطابق Mask پر کلک کریں۔


preloader6.png


٭۔ ۔ ۔ لیجئے آپ کی پری لوڈر اینی میشن تیار ہے!۔ ۔ ۔​
 
Preloader Text مووی کلپ بنانا:
٭۔ ۔ ۔ اب آپ Edit>Document کے ذریعے مین ڈاکیومنٹ پر واپس آجائیں ۔
٭۔ ۔ ۔ ایک نئی مووی کلپ Insert>New Symbolتیار کریں اور تصویر کے مطابق خانہ پری کریں۔​
preloader13.png
٭۔ ۔ ۔ اس نئی مووی کلپ میں ایک چھوٹا سا ڈائنیمک ٹیکسٹ باکس بنائیں اور تصویر کے مطابق عمل کریں۔​
preloader7.png
٭۔ ۔ ۔ اب آپ Edit>Document کے ذریعے مین ڈاکیومنٹ پر واپس آجائیں ۔​
 
ActionScripting کرنا:
٭۔ ۔ ۔ اب آپ ڈاکیومنٹ لائبریری سے دونوں مووی کلپس کو ڈریگ کر کے اسٹیج کے درمیان الگ الگ لیئرز میں ڈال دیں۔ پری لوڈر اینی میشن (دل) کو تصویر کے مطابق preloader کا Instance Name دے دیں۔


preloader8.png
٭۔ ۔ ۔ اب پری لوڈر ٹیکسٹ مووی کلپ پر رائٹ کلک کریں اور ایکشن پینل کھول کر تصویر کے مطابق ایکشن اسکرپٹنگ ٹائپ کر دیں۔


preloader9.png
نوٹ : اگر آپ ٹائپ کرنے میں میری طرح سست واقع ہوئے ہیں تو نیچے ساری کوڈنگ موجود ہے۔ کاپی پیسٹ کر لیجئے!!!

کوڈ:
[B][COLOR=#708090]// Copy & Paste this ActionScript in Preloader Text Movie Clip 

[/COLOR][/B][/FONT] [FONT=Urdu Naskh Asiatype][COLOR=magenta][SIZE=5][SIZE=2][COLOR=blue][B]onClipEvent (enterFrame) {
if (_root.getBytesLoaded() == _root.getBytesTotal()) {
_root.play();
}
lod = int(_root.getBytesLoaded()*100/_root.getBytesTotal());
_root.preloader.gotoAndStop(Math.ceil(lod/10));
loaded.text = lod add "%";
}[/B][/COLOR][/SIZE][/SIZE][/COLOR][/FONT][FONT=Urdu Naskh Asiatype]
 
٭۔ ۔ ۔ اب تصویر کے مطابق موجودہ Scene کو preloader کا نام دے دیں اور ایک اور نئے Scene کا اضافہ کریں اور اس کا نام main رکھ دیں۔


preloader10.png
ٹوٹکا: نئے سین کے لئے اوپر والی تصویر میں دکھائے گئے بٹن پر کلک کر یں۔ جبکہ سین کا نام بدلنے کے لئے سین کے نام پر ڈبل کلک کریں اور نیا نام ٹائپ کر دیں۔

٭۔ ۔ ۔ اب main سین پر کلک کر کے نئے سین پر آجائیں اور یہاں فریم 1 میں رائٹ کلک کر کے ایکشن پینل کھولیں اور
کوڈ:
[B][COLOR=blue]stop();[/COLOR][/B]
ایکشن ڈال دیں۔

٭۔ ۔ ۔ ایک اور نئی لیئر بنائیں اور یہاں کوئی بھی Image فائل امپورٹ (File>Import )کر لیں۔

٭۔ ۔ ۔ ا ب File>Saveمنتخب کر کے اپنے فلیش ڈاکیومنٹ کو preloader.fla کے نام سے محفوظ کر لیں۔

٭۔ ۔ ۔ اب کی بورڈ پر Ctrl+F12 پریس کریں۔ فلیش ایک فلیش مووی پبلش کر دے گا!۔ ۔ ۔ مگر آپ دیکھیں گے کہ پری لوڈر تو نظر بھی نہیں آیا اور امیج فائل لوڈ بھی ہو گئی۔ اصل میں آپ یہ مووی اپنے کمپیوٹر پر دیکھ رہے ہیں اس لئے اسے لوڈ ہونے میں ذرا بھی دیر نہیں لگی ۔ اگر آپ یہ مووی انٹرنیٹ پر دیکھ رہے ہوتے تو آپ کو پری لوڈر ضرور نظر آتا !۔ ۔ ۔ خیر اگر آپ دیکھنا چاہتے ہیں کہ پری لوڈر کیسا دکھائی دے رہا ہے تو مندرجہ ذیل ہدایات پر عمل کریں۔

 
٭۔ ۔ ۔ کی بورڈ پر Ctrl+F12 پریس کریں۔فلیش دوبارہ مووی ٹیسٹنگ موڈ میں چلا جائے گا اور امیج فائل دکھائی دے گی۔ آپ ونڈو بند نہ کریں اور تصویر کے مطابق View>Show Streaming(Ctrl+Enter) پر کلک کریں۔

preloader11.png

٭۔ ۔ ۔ مبارک ہو!۔ ۔ ۔ ہمارا پری لوڈر درست کام کر رہا ہے!۔ ۔ ۔ تصویر ملاحظہ فرمائیں۔


preloader12.png

پری لوڈ ہونے کے دوران اور بعد کے مناظر
 
خبردار: اس طرح آپ اس پری لوڈر کو کسی بھی فلیش مووی میں ایک نئے سین preloader کا اضافہ کر کے اس میں شامل کر سکتے ہیں۔ اصل مووی کو دوسرے سین میں رکھیں ۔ خیال رہے کہ پری لوڈر سین کو سین پینل میں ترتیب میں سب سے اوپر رکھنا ضروری ہے!۔ ۔ ۔ ورنہ پری لوڈر کام نہیں کرے گا!

نوٹ: آپ کی سہولت کے لئے preloader.fla اس ٹیوٹوریل کے اختتام پر zip فارمیٹ میں رکھ دی گئی ہے۔ اسے آپ ڈاؤن لوڈ کر کے اپنی فائل سے اس کا موازنہ کر سکتے ہیں۔

”فلیش میں پری لوڈر (Preloader) بنانا“ ٹیوٹوریل مکمل ہوا!
ایک گزارش!۔ ۔ ۔ اگر ان ٹیوٹوریلز سے آپ کو فلیش سیکھنے میں مدد مل رہی ہے تو براہِ کرم مجھے بس اپنی دعاؤں میں ضرور یاد رکھیے ! ۔ ۔ ۔ اللہ تعالیٰ ہم سب کے علم میں اضافہ فرمائے اور اپنے علم کو دوسروں کو بانٹنے کی توفیق عطا فرمائے!۔ ۔ ۔ آمین!

حرفِ آخر:
اُمید ہے آپ کو یہ ٹیوٹوریل پسند آیا ہوگا۔ فلیش کے اس ٹیوٹوریل میں ہم نے یہ سیکھا کہ فلیش میں پری لوڈر کیسے بنایا جاتاہے؟۔ ۔ ۔ اگر اس ٹیوٹوریل میں کسی بات کی سمجھ نہ آئی ہو تو ضرور پوچھ لیجئے گا!۔ ۔ ۔ انشاء اللہ میں آپ کی ضرور مدد کرونگا!۔ ۔ ۔ اب اگلے ٹیوٹوریل تک کے لیے اجازت۔ ۔ ۔ فی امان اللہ!۔ ۔ ۔


اُردو ویب۔۔۔۔۔شعیب سعید شوبی
خبردار: یہ " فلیش ٹیوٹوریل " اردو محفل کے لئے تیار کیا گیا ہے ۔ اس کا مواد نقل کرنے سے قبل اجازت حاصل کرنا ضروری ہے۔
 

Attachments

  • preloader.zip
    62.4 KB · مناظر: 31

kutkutariyaan

محفلین
بہت بہت شکریہ آپکا.....

اتنی اچھی شیرنگ پر میری جانب سے ’’ شکریہ ‘‘ قبول کریں...
 

قیس

محفلین
السلام علیکم
شوبی صاحب
آپکے بتائے ہوئے طریقے کے مطابق پری لوڈر بنانے کی کوشش کی ، لیکن وہ آپکے بتائے ہوئے سکرپٹ میں ایرر دیتا ہے۔ اور جو انیمیشن بنائی ہے اسکو رن بھی کرنے سے انکاری ہے اب بتائیں کہ کیا کروں۔ اسوقت میری بینڈ وڈتھ ختم ہے کل انشائ اللہ فائل اپلوڈ کروں گا۔ آپ اسے ایک نظر دیکھ لیجئے گا۔ شکریہ
 
وعلیکم السلام قیس صاحب!
اس ٹیوٹوریل کے آخر میں پرجیکٹ فائل بھی منسلک کی گئی ہے۔ آپ اسے ڈاؤن لوڈ کر کے اپنی فائل کے ساتھ موازنہ کر سکتے ہیں۔:)
 
پریلوڈر

کیا فلاسھ مای اسیا ھہساکتا ھای کع جایسع ھی پرعلہادعینگ چہمپلعتعت ھہجاعے تہ کھئد با کھئد ایک نعو سیتع ہپعن ھہجاعے
 
کیا فلاسھ مای اسیا ھہساکتا ھای کع جایسع ھی پرعلہادعینگ چہمپلعتعت ھہجاعے تہ کھئد با کھئد ایک نعو سیتع ہپعن ھہجاعے
اسد بھائی مندرجہ ذیل ربط پر آپ اگر پیج اسکرول کر کے نیچے کی طرف دیکھیں گے تو آپ کوTwo Prealoading Free Courses کے لنکس نظر آئیں گے۔ یہ دونوں فری ٹیوٹوریلز پری لوڈنگ سیکھنے کے لئے بہترین ہیں۔ آپ انھیں فی الفور ڈاون لوڈکرلیں۔ آپ کو نہ صرف آپ کے سوال کا جواب مل جائے گا بلکہ آپ ایکشن اسکرپٹ بھی سیکھ سکیں گے۔ ان میں پروجیکٹ فائلز بھی مفت مہیا کی گئیں ہیں۔
ربط یہ ہے!:)
 
Top