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

شعیب سعید شوبی نے 'فلیش ٹیوٹوریل' کی ذیل میں اس موضوع کا آغاز کیا، ‏اگست 25, 2007

  1. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

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

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


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

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


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


    [​IMG]
     
    • پسندیدہ پسندیدہ × 3
  2. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

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


    [​IMG]


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


    [​IMG]
     
  3. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

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


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


    [​IMG]
     
  4. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

    مراسلے:
    2,065
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    ٭۔ ۔ ۔ اب ایک اور نئی لیئر کا اضافہ کر یں اور اسے ڈریگ کر کے سب سے نیچے لے جائیں۔

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

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


    [​IMG]


    ٭۔ ۔ ۔ لیجئے آپ کی پری لوڈر اینی میشن تیار ہے!۔ ۔ ۔ ​
     
  5. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

    مراسلے:
    2,065
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    Preloader Text مووی کلپ بنانا:
    ٭۔ ۔ ۔ اب آپ Edit>Document کے ذریعے مین ڈاکیومنٹ پر واپس آجائیں ۔
    ٭۔ ۔ ۔ ایک نئی مووی کلپ Insert>New Symbolتیار کریں اور تصویر کے مطابق خانہ پری کریں۔
    [​IMG]
    ٭۔ ۔ ۔ اس نئی مووی کلپ میں ایک چھوٹا سا ڈائنیمک ٹیکسٹ باکس بنائیں اور تصویر کے مطابق عمل کریں۔
    [​IMG]
    ٭۔ ۔ ۔ اب آپ Edit>Document کے ذریعے مین ڈاکیومنٹ پر واپس آجائیں ۔
     
  6. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

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


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


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

    کوڈ:
    [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]
     
  7. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

    مراسلے:
    2,065
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    ٭۔ ۔ ۔ اب تصویر کے مطابق موجودہ Scene کو preloader کا نام دے دیں اور ایک اور نئے Scene کا اضافہ کریں اور اس کا نام main رکھ دیں۔


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

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

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

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

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

     
  8. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

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

    [​IMG]

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


    [​IMG]
    پری لوڈ ہونے کے دوران اور بعد کے مناظر
     
  9. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

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

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

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

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


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

    منسلک فائلیں:

    • پسندیدہ پسندیدہ × 2
  10. kutkutariyaan

    kutkutariyaan محفلین

    مراسلے:
    225
    بہت بہت شکریہ آپکا.....

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

    جاموٹ محفلین

    مراسلے:
    2
    السلام علیکم شوبی بھائی بہت اچھی کلاس ہے میں ابھی اس کی پریکٹس کرتا ہوں۔
     
    • پسندیدہ پسندیدہ × 1
  12. ابو کاشان

    ابو کاشان محفلین

    مراسلے:
    1,838
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    بہت مفید چیز ہاتھ آئی ہے۔ شکریہ
     
    • پسندیدہ پسندیدہ × 1
  13. مغزل

    مغزل محفلین

    مراسلے:
    17,597
    جھنڈا:
    Pakistan
    موڈ:
    Dunce
    بہت خوب شعیب بھیا بہت خوب۔
    سدا سلامت رہیں خوش رہیں اور علم بانٹیں
    والسلام
     
    • پسندیدہ پسندیدہ × 1
  14. قیس

    قیس محفلین

    مراسلے:
    133
    جھنڈا:
    Austria
    موڈ:
    Amazed
    السلام علیکم
    شوبی صاحب
    آپکے بتائے ہوئے طریقے کے مطابق پری لوڈر بنانے کی کوشش کی ، لیکن وہ آپکے بتائے ہوئے سکرپٹ میں ایرر دیتا ہے۔ اور جو انیمیشن بنائی ہے اسکو رن بھی کرنے سے انکاری ہے اب بتائیں کہ کیا کروں۔ اسوقت میری بینڈ وڈتھ ختم ہے کل انشائ اللہ فائل اپلوڈ کروں گا۔ آپ اسے ایک نظر دیکھ لیجئے گا۔ شکریہ
     
    • پسندیدہ پسندیدہ × 1
  15. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

    مراسلے:
    2,065
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    وعلیکم السلام قیس صاحب!
    اس ٹیوٹوریل کے آخر میں پرجیکٹ فائل بھی منسلک کی گئی ہے۔ آپ اسے ڈاؤن لوڈ کر کے اپنی فائل کے ساتھ موازنہ کر سکتے ہیں۔:)
     
  16. سید اسد رضوی

    سید اسد رضوی محفلین

    مراسلے:
    2
    پریلوڈر

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

    فرحان دانش محفلین

    مراسلے:
    3,078
    جھنڈا:
    Pakistan
    موڈ:
    Breezy
    شوبی بھائی کیا بات ہے آ پ کی
     
    • پسندیدہ پسندیدہ × 1
  18. شعیب سعید شوبی

    شعیب سعید شوبی محفلین

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

اس صفحے کی تشہیر