شعیب سعید شوبی
محفلین
فلیش میں اُلٹی گنتی گننے والا ٹائمر بنانا
Making Countdown Timer in Flash
ماخذ: LearnFlash.comMaking Countdown Timer in Flash
اُردو ویب کے عزیز ممبرز!....السلام علیکم!
تمہید:
اس ٹیوٹوریل میں آپ ایڈوبی فلیش میں اُلٹی گنتی گننے والا ٹائمر Timer بنانا سیکھیں گے۔یہ ٹائمر آپ کی مطلوبہ تاریخ کو دنوں، گھنٹوں ، منٹوں اور سیکنڈوں کے حساب سے ظاہر کرے گا یعنی آپ کی مطلوبہ تاریخ میں کتنے دن، گھنٹے، منٹس اور سیکنڈز باقی ہیں؟ پاکستان کا یوم آزادی قریب ہے، چنانچہ اس ٹیوٹوریل میں 14 اگست 2010ء اُلٹی گنتی کے لئے ہمارا ٹارگٹ ہے!
ٹائمر کا اسکرین شاٹ
نوٹ: اس ٹیوٹوریل میں ہم ActionScript 2.0 میں ٹائمر بنانا سیکھیں گے۔ اگر آپ ActionScript 3.0 میں ایسا ٹائمر بنانا چاہتے ہیں تو یہ ٹیوٹوریل ملاحظہ فرمائیں!
1. سب سے پہلے ٹیکسٹ ٹول T کی مدد سے ایک ڈائنیمک ٹیکسٹ فیلڈ dynamic text field بنائیں جس میں عارضی طور پر "00:00:00:00" ٹائپ کر دیں۔ عارضی طور پر اس لئے تاکہ ہمیں اندازہ ہو جائے کہ ٹائمر فلیش پلیئر میں کس طرح دکھائی دے گا؟ ٹیوٹوریل کے آخر میں اس عارضی ٹیکسٹ کو حذف کر دیں۔ تصویر کے مطابق نمبرز کے نیچے دن، گھنٹے، منٹ اور سیکنڈ بھی بطور لیبل ٹائپ کر دیں۔ خیال رہے کہ یہ نارمل ٹیکسٹ ہے ڈائنیمک ٹیکسٹ نہیں!
2۔ اب اس ڈائنیمک ٹیکسٹ کا Instance Name یا نام time_txt رکھ دیں۔ ایکشن اسکرپٹ میں اس ٹیکسٹ آبجیکٹ کو اسی نام سے "پُکارا" جائے گا!
3۔ اس ڈائنیمک ٹیکسٹ فیلڈ کو دائیں جانب الائن بھی کر دیں تاکہ ٹیکسٹ اپنی جگہ مستحکم رہے۔
4۔ اب ایمبیڈ بٹن پر کلک کریں ، جس سے کیریکٹر ایمبیڈنگ کا ڈائیلاگ باکس ظاہر ہوگا۔ چونکہ ٹائمر میں صرف نمبرز اور کالن کا استعمال ہوا ہے، اس لئے Ctrl+Click کی مدد سے صرف نمبرز اور علامات کو ہی منتخب کر لیں ۔ مکمل فونٹ ایمبیڈ کرنے سے فائل سائز میں اضافے کا خدشہ ہے! OK کا بٹن دبا کر ڈائیلاگ باکس بند کر دیں۔
نوٹ: یہ ضروری ہے کہ اس ڈائنیمک ٹیکسٹ کو ظاہر کرنے کے لئے ہم جو فونٹ بھی استعمال کر رہے ہیں اسے فلیش فائل میں ایمبیڈ کر دیں تاکہ اگر فلیش مووی دیکھنے والوں کے سسٹم میں وہ فونٹ موجود نہ ہو پھر بھی اسے ٹائمر اسی فونٹ میں دکھائی دے جس میں ہم نے بنایا ہے۔
5۔ اب ایک اور لیئر بنائیں اور اسے actions کا نام دے دیں۔ اس لیئر کے فریم1 پر کلک کر کے کی بورڈ میں F9 دبا کر ایکشن پینل کھول لیں اور اس میں مندرجہ ذیل ایکشن اسکرپٹ کاپی پیسٹ کر دیں۔
نوٹ: اگر آپ اُلٹی گنتی کی "ٹارگٹ" تاریخ میں تبدیلی کے خواہاں ہیں تو آپ کو صرف مندرجہ ذیل کوڈ میں تبدیلی کرنی پڑے گی۔ خیال رہے کہ اس ایکشن اسکرپٹ میں اگست کو سال کے 8 ویں مہینہ کی بجائے 7 واں مہینہ ظاہر کیا گیا ہے یعنی 0 جنوری اور 11 دسمبر کو ظاہر کرے گا!
لیجئے آپ کا کام ختم!۔۔۔۔۔۔۔۔اب Ctrl+Enter پریس کر کے اپنے ٹائمر کو اُلٹی گنتی گنتے ہوئے دیکھیں!
فائنل نمونہ:
[flash=http://dl.dropbox.com/u/3711223/sharebox/cdt.swf]quality=high width=500 height=128 parameter=parameter_value[/flash]
اسکرین شاٹ
فلیش میں اُلٹی گنتی گننے والا ٹائمر بنانا ٹیوٹوریل مکمل ہوا!
پروجیکٹ فائل ڈاؤن لوڈ: آپ کی سہولت کے لئے اس ٹیوٹوریل کی پروجیکٹ فائل (fla ) کو اس ٹیوٹوریل کے آخر میں منسلک کیا جا رہا ہے۔ اسے آپ ڈاؤن لوڈ کر کے اپنی فائل سے اس کا موازنہ کر سکتے ہیں۔خیال رہے کہ یہ فائل صرف فلیش 8 اور CS3 میں ہی کھولی جا سکتی ہے۔ ان سے پرانے ورژنز میں یہ فائل نہیں کھل سکے گی!
حرفِ آخر:
اُمید ہے آپ کو یہ ٹیوٹوریل پسند آیا ہوگا۔ ۔ ۔ اگر اس ٹیوٹوریل میں کسی بات کی سمجھ نہ آئی ہو تو ضرور پوچھ لیجئے گا!۔ ۔ ۔ انشاء اللہ میں آپ کی ضرور مدد کرونگا!۔ ۔ ۔ اب اگلے ٹیوٹوریل تک کے لیے اجازت۔ ۔ ۔ فی امان اللہ!۔ ۔
اس ٹیوٹوریل میں آپ ایڈوبی فلیش میں اُلٹی گنتی گننے والا ٹائمر Timer بنانا سیکھیں گے۔یہ ٹائمر آپ کی مطلوبہ تاریخ کو دنوں، گھنٹوں ، منٹوں اور سیکنڈوں کے حساب سے ظاہر کرے گا یعنی آپ کی مطلوبہ تاریخ میں کتنے دن، گھنٹے، منٹس اور سیکنڈز باقی ہیں؟ پاکستان کا یوم آزادی قریب ہے، چنانچہ اس ٹیوٹوریل میں 14 اگست 2010ء اُلٹی گنتی کے لئے ہمارا ٹارگٹ ہے!
[flash=http://dl.dropbox.com/u/3711223/sharebox/cdt.swf]quality=high width=500 height=128 parameter=parameter_value[/flash]
ہمارا ٹائمر کچھ اس طرح کا ہوگا!
ہمارا ٹائمر کچھ اس طرح کا ہوگا!
ٹائمر کا اسکرین شاٹ
نوٹ: اس ٹیوٹوریل میں ہم ActionScript 2.0 میں ٹائمر بنانا سیکھیں گے۔ اگر آپ ActionScript 3.0 میں ایسا ٹائمر بنانا چاہتے ہیں تو یہ ٹیوٹوریل ملاحظہ فرمائیں!
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);فائنل نمونہ:
[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]
ذرا سے "جگاڑ" سے اس ٹائمر کو اُردوایا بھی جا سکتا ہے!
ذرا سے "جگاڑ" سے اس ٹائمر کو اُردوایا بھی جا سکتا ہے!
اسکرین شاٹ
فلیش میں اُلٹی گنتی گننے والا ٹائمر بنانا ٹیوٹوریل مکمل ہوا!
پروجیکٹ فائل ڈاؤن لوڈ: آپ کی سہولت کے لئے اس ٹیوٹوریل کی پروجیکٹ فائل (fla ) کو اس ٹیوٹوریل کے آخر میں منسلک کیا جا رہا ہے۔ اسے آپ ڈاؤن لوڈ کر کے اپنی فائل سے اس کا موازنہ کر سکتے ہیں۔خیال رہے کہ یہ فائل صرف فلیش 8 اور CS3 میں ہی کھولی جا سکتی ہے۔ ان سے پرانے ورژنز میں یہ فائل نہیں کھل سکے گی!
حرفِ آخر:
اُمید ہے آپ کو یہ ٹیوٹوریل پسند آیا ہوگا۔ ۔ ۔ اگر اس ٹیوٹوریل میں کسی بات کی سمجھ نہ آئی ہو تو ضرور پوچھ لیجئے گا!۔ ۔ ۔ انشاء اللہ میں آپ کی ضرور مدد کرونگا!۔ ۔ ۔ اب اگلے ٹیوٹوریل تک کے لیے اجازت۔ ۔ ۔ فی امان اللہ!۔ ۔
اُردو ویب۔۔۔۔۔شعیب سعید شوبی
