فلیش فلیش میں پری لوڈر (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 تیار کریں اور تصویر کے مطابق خانہ پری کریں۔​

 

[شعیب سعید شوبی]

٭۔ ۔ ۔ اب اس مووی کلپ میں Layer 1 کا نام actions رکھ دیں ۔ اس لیئر میں فریم10 میں ایک کی فریم کا اضافہ کریں ۔ اب فریم 1 اور فریم10 دونوں پر رائٹ کلک کر کے ایکشن پینل کھولیں اور تصویر کے مطابق دونوں فریمز میں

[/FONT][FONT=Urdu Naskh Asiatype][COLOR=blue][B]stop(); [/B][/COLOR]

ایکشن ٹائپ کر دیں۔

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

 

[شعیب سعید شوبی]

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

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

 

[شعیب سعید شوبی]

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

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

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

٭۔ ۔ ۔ لیجئے آپ کی پری لوڈر اینی میشن تیار ہے!۔ ۔ ۔​

 

[شعیب سعید شوبی]

Preloader Text مووی کلپ بنانا:
٭۔ ۔ ۔ اب آپ Edit>Document کے ذریعے مین ڈاکیومنٹ پر واپس آجائیں ۔
٭۔ ۔ ۔ ایک نئی مووی کلپ Insert>New Symbolتیار کریں اور تصویر کے مطابق خانہ پری کریں۔​

٭۔ ۔ ۔ اس نئی مووی کلپ میں ایک چھوٹا سا ڈائنیمک ٹیکسٹ باکس بنائیں اور تصویر کے مطابق عمل کریں۔​

٭۔ ۔ ۔ اب آپ Edit>Document کے ذریعے مین ڈاکیومنٹ پر واپس آجائیں ۔​

 

[شعیب سعید شوبی]

ActionScripting کرنا:
٭۔ ۔ ۔ اب آپ ڈاکیومنٹ لائبریری سے دونوں مووی کلپس کو ڈریگ کر کے اسٹیج کے درمیان الگ الگ لیئرز میں ڈال دیں۔ پری لوڈر اینی میشن (دل) کو تصویر کے مطابق preloader کا Instance Name دے دیں۔

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

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

[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 رکھ دیں۔

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

٭۔ ۔ ۔ اب main سین پر کلک کر کے نئے سین پر آجائیں اور یہاں فریم 1 میں رائٹ کلک کر کے ایکشن پینل کھولیں اور

[B][COLOR=blue]stop();[/COLOR][/B]

ایکشن ڈال دیں۔

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

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

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

 

[شعیب سعید شوبی]

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

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

پری لوڈ ہونے کے دوران اور بعد کے مناظر​

 

[شعیب سعید شوبی]

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

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

”فلیش میں پری لوڈر (Preloader) بنانا“ ٹیوٹوریل مکمل ہوا!​

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

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

اُردو ویب۔۔۔۔۔شعیب سعید شوبی​

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

 

[kutkutariyaan]

بہت بہت شکریہ آپکا.....

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

 

[جاموٹ]

السلام علیکم شوبی بھائی بہت اچھی کلاس ہے میں ابھی اس کی پریکٹس کرتا ہوں۔

 

[ابو کاشان]

بہت مفید چیز ہاتھ آئی ہے۔ شکریہ

 

[مغزل]

بہت خوب شعیب بھیا بہت خوب۔
سدا سلامت رہیں خوش رہیں اور علم بانٹیں
والسلام

 

[قیس]

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

 

[شعیب سعید شوبی]

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

 

[سید اسد رضوی]

پریلوڈر

کیا فلاسھ مای اسیا ھہساکتا ھای کع جایسع ھی پرعلہادعینگ چہمپلعتعت ھہجاعے تہ کھئد با کھئد ایک نعو سیتع ہپعن ھہجاعے

 

[فرحان دانش]

شوبی بھائی کیا بات ہے آ پ کی

 

[شعیب سعید شوبی]

کیا فلاسھ مای اسیا ھہساکتا ھای کع جایسع ھی پرعلہادعینگ چہمپلعتعت ھہجاعے تہ کھئد با کھئد ایک نعو سیتع ہپعن ھہجاعے

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