فلیش فلیش میں اُلٹی گنتی گننے والا ٹائمر بنانا

شعیب سعید شوبی نے 'فلیش ٹیوٹوریل' کی ذیل میں اس موضوع کا آغاز کیا، ‏جون 22, 2010

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

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

    مراسلے:
    2,065
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    فلیش میں اُلٹی گنتی گننے والا ٹائمر بنانا
    Making Countdown Timer in Flash

    ماخذ: LearnFlash.com

    اُردو ویب کے عزیز ممبرز!....السلام علیکم!

    تمہید:
    اس ٹیوٹوریل میں آپ ایڈوبی فلیش میں اُلٹی گنتی گننے والا ٹائمر Timer بنانا سیکھیں گے۔یہ ٹائمر آپ کی مطلوبہ تاریخ کو دنوں، گھنٹوں ، منٹوں اور سیکنڈوں کے حساب سے ظاہر کرے گا یعنی آپ کی مطلوبہ تاریخ میں کتنے دن، گھنٹے، منٹس اور سیکنڈز باقی ہیں؟ پاکستان کا یوم آزادی قریب ہے، چنانچہ اس ٹیوٹوریل میں 14 اگست 2010ء اُلٹی گنتی کے لئے ہمارا ٹارگٹ ہے!


    [flash=http://dl.dropbox.com/u/3711223/sharebox/cdt.swf]quality=high width=500 height=128 parameter=parameter_value[/flash]


    ہمارا ٹائمر کچھ اس طرح کا ہوگا!



    [​IMG]
    ٹائمر کا اسکرین شاٹ

    نوٹ:
    اس ٹیوٹوریل میں ہم ActionScript 2.0 میں ٹائمر بنانا سیکھیں گے۔ اگر آپ ActionScript 3.0 میں ایسا ٹائمر بنانا چاہتے ہیں تو یہ ٹیوٹوریل ملاحظہ فرمائیں!

    [​IMG]


    1. سب سے پہلے ٹیکسٹ ٹول T کی مدد سے ایک ڈائنیمک ٹیکسٹ فیلڈ dynamic text field بنائیں جس میں عارضی طور پر "00:00:00:00" ٹائپ کر دیں۔ عارضی طور پر اس لئے تاکہ ہمیں اندازہ ہو جائے کہ ٹائمر فلیش پلیئر میں کس طرح دکھائی دے گا؟ ٹیوٹوریل کے آخر میں اس عارضی ٹیکسٹ کو حذف کر دیں۔ تصویر کے مطابق نمبرز کے نیچے دن، گھنٹے، منٹ اور سیکنڈ بھی بطور لیبل ٹائپ کر دیں۔ خیال رہے کہ یہ نارمل ٹیکسٹ ہے ڈائنیمک ٹیکسٹ نہیں!

    2۔ اب اس ڈائنیمک ٹیکسٹ کا Instance Name یا نام time_txt رکھ دیں۔ ایکشن اسکرپٹ میں اس ٹیکسٹ آبجیکٹ کو اسی نام سے "پُکارا" جائے گا!

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

    4۔ اب ایمبیڈ بٹن پر کلک کریں ، جس سے کیریکٹر ایمبیڈنگ کا ڈائیلاگ باکس ظاہر ہوگا۔ چونکہ ٹائمر میں صرف نمبرز اور کالن کا استعمال ہوا ہے، اس لئے Ctrl+Click کی مدد سے صرف نمبرز اور علامات کو ہی منتخب کر لیں ۔ مکمل فونٹ ایمبیڈ کرنے سے فائل سائز میں اضافے کا خدشہ ہے! OK کا بٹن دبا کر ڈائیلاگ باکس بند کر دیں۔

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


    5۔ اب ایک اور لیئر بنائیں اور اسے actions کا نام دے دیں۔ اس لیئر کے فریم1 پر کلک کر کے کی بورڈ میں F9 دبا کر ایکشن پینل کھول لیں اور اس میں مندرجہ ذیل ایکشن اسکرپٹ کاپی پیسٹ کر دیں۔

    کوڈ:
    //onEnterFrame allows for a function to be called every tick
    this.onEnterFrame = function() {
        //Stores the current date
        var today:Date = new Date();
        //Stores the Current Year
        var currentYear = today.getFullYear();
        //Stores the Current Time
        var currentTime = today.getTime();
        //Creates and stores the target date
        var targetDate:Date = new Date(currentYear, 07, 14);
        var targetTime = targetDate.getTime();
        //Determines how much time is left.  Note: Leaves time in milliseconds
        var timeLeft = targetTime-currentTime;
        var sec = Math.floor(timeLeft/1000);
        var min = Math.floor(sec/60);
        var hours = Math.floor(min/60);
        var days = Math.floor(hours/24);
        //Takes results of var remaining value.  Also converts "sec" into a string
        sec = String(sec%60);
        //Once a string, you can check the values length and see whether it has been reduced below 2.
        //If so, add a "0" for visual purposes.
        if (sec.length<2) {
            sec = "0"+sec;
        }
        min = String(min%60);
        if (min.length<2) {
            min = "0"+min;
        }
        hours = String(hours%24);
        if (hours.length<2) {
            hours = "0"+hours;
        }
        days = String(days);
        //Joins all values into one string value
        var counter:String = days+":"+hours+":"+min+":"+sec;
        time_txt.text = counter;
    };
    


    نوٹ:
    اگر آپ اُلٹی گنتی کی "ٹارگٹ" تاریخ میں تبدیلی کے خواہاں ہیں تو آپ کو صرف مندرجہ ذیل کوڈ میں تبدیلی کرنی پڑے گی۔ خیال رہے کہ اس ایکشن اسکرپٹ میں اگست کو سال کے 8 ویں مہینہ کی بجائے 7 واں مہینہ ظاہر کیا گیا ہے یعنی 0 جنوری اور 11 دسمبر کو ظاہر کرے گا!

    کوڈ:
    //Creates and stores the target date
        var targetDate:Date = new Date(currentYear,07,14);
    لیجئے آپ کا کام ختم!۔۔۔۔۔۔۔۔اب Ctrl+Enter پریس کر کے اپنے ٹائمر کو اُلٹی گنتی گنتے ہوئے دیکھیں!

    فائنل نمونہ:

    [flash=http://dl.dropbox.com/u/3711223/sharebox/cdt.swf]quality=high width=500 height=128 parameter=parameter_value[/flash]

    اُردو نمونہ:

    [flash=https://dl-web.dropbox.com/get/Flash/UrducountDownTimer.swf?w=f587cb61]quality=high width=500 height=150 parameter=parameter_value[/flash]

    ذرا سے "جگاڑ" سے اس ٹائمر کو اُردوایا بھی جا سکتا ہے!



    [​IMG]
    اسکرین شاٹ


    فلیش میں اُلٹی گنتی گننے والا ٹائمر بنانا ٹیوٹوریل مکمل ہوا!

    پروجیکٹ فائل ڈاؤن لوڈ: آپ کی سہولت کے لئے اس ٹیوٹوریل کی پروجیکٹ فائل (fla ) کو اس ٹیوٹوریل کے آخر میں منسلک کیا جا رہا ہے۔ اسے آپ ڈاؤن لوڈ کر کے اپنی فائل سے اس کا موازنہ کر سکتے ہیں۔خیال رہے کہ یہ فائل صرف فلیش 8 اور CS3 میں ہی کھولی جا سکتی ہے۔ ان سے پرانے ورژنز میں یہ فائل نہیں کھل سکے گی!

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

     

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

    • پسندیدہ پسندیدہ × 4
  2. شمشاد

    شمشاد لائبریرین

    مراسلے:
    205,051
    جھنڈا:
    Pakistan
    موڈ:
    Relaxed
    بہت شکریہ شعیب بھائی۔ بہت عمدہ کاوش ہے۔

    اگر ہو سکے تو فلیش میں اُلٹی گھڑی بنائیں۔
     
    • پسندیدہ پسندیدہ × 1
  3. شعیب سعید شوبی

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

    مراسلے:
    2,065
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    شکریہ شمشاد بھائی۔۔۔۔۔۔لیجئے سعود بھائی نے فلیش مووی بھی ٹیوٹوریل میں شامل کر دی!۔۔۔۔۔۔شکریہ سعود بھائی!
     
  4. محمدصابر

    محمدصابر محفلین

    مراسلے:
    7,159
    جھنڈا:
    Pakistan
    موڈ:
    Brooding
    بہت اچھا ٹیوٹوریل لکھا ہے۔شکریہ شعیب بھائی
     
    • پسندیدہ پسندیدہ × 1
  5. خواجہ طلحہ

    خواجہ طلحہ محفلین

    مراسلے:
    1,692
    جزاک اللہ شوبی بھائی۔
     
    • پسندیدہ پسندیدہ × 1

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