فلیش فلیش ویب ڈیزائننگ (حصہ سوم)

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

شروع اللہ کے نام سے جو بڑا مہربان ، نہایت رحم فرمانے والا ہے۔​

حصّہ سوم....PART 3​

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

”فلیش ویب ڈیزائننگ“ کورس کے حصہ سوم میں خوش آمدید!...
انشاءاللہ !....کورس کے تیسرے حصے میں آپ سیکھیں گے:
٭۔ ۔ ۔ نیوی گیشن مینو کے لئے ٹیکسٹ بٹن تیار کرنا
٭۔ ۔ ۔ Button سمبل کی مختلف حالتوں(States) کو سمجھنا اور بٹن سمبل تیار کرنا
٭۔ ۔ ۔ Button سمبل میں ایکشن اسکرپٹنگ کرنا
٭۔ ۔ ۔ ’’ایکٹو‘‘ سیکشن کی نشاندہی کے لئے گرافک مارکر تیار کرنا​

حصہ’’2‘‘ میں ہم نے اپنی ویب سائٹ کے مختلف حصوں میں گھومنے پھرنے کے لئے نیوی گیشن مینو تیار کرنا شروع کیا تھا اور ٹیکسٹ بلاکس بناکر کام ختم کر لیا تھا۔اس حصے میں ہم ان ٹیکسٹ بلاکس کو بٹن سمبل میں کنورٹ کرینگے اور پھر اس میں ایکشن اسکرپٹنگ بھی کرینگے تاکہ وہ بطور لنکس کام کر سکیں اور جب ہماری ویب سائٹ تیار ہوجائے گی تو یوزرز اُن بٹنوں پر کلک کر کے ہماری ویب سائٹ میں گھوم پھر بھی سکیں گے!۔ ۔ ۔ چلیں کام شروع کرتے ہیں!۔ ۔ ۔​

٭۔ ۔ ۔ سب سے پہلے فلیش پروگرام چلائیں اور وہی فائل کھولیں جو آپ نے کورس کے حصہ ’’2‘‘ میں تیار کی تھی۔

٭۔ ۔ ۔ اب Arrow Tool(V) کی مدد سے Menu لےئر کا frame 10 سیلیکٹ کریں۔اس فریم میں موجود Introduction ٹیکسٹ بلاک کو منتخب کریں اور کی بورڈ پر F8دبا کر ٹیکسٹ بلاک کو سمبل میں کنورٹ کر دیں۔ ڈائلاگ باکس میں تصویر کے مطابق خانہ پری کر کے اسے بٹن سمبل میں کنورٹ کریں۔

٭۔ ۔ ۔ اب اس نئے بٹن سمبل پر ڈبل کلک کر کے سمبل ایڈیٹنگ موڈ میں داخل ہوں۔ آپ دیکھیں گے کہ مووی کلپ سمبل کے برعکس بٹن سمبل میں صرف چار فریمز موجود ہیں۔ آئیے ان چاروں Button States کو سمجھنے کی کوشش کرتے ہیں۔​

Up: جب یوزر اس بٹن پر ماؤس لائے بغیر دیکھے گا تو اسے بٹن ایسا دکھائی دے گا۔
Over: جب یوزر اس بٹن پر ماؤس پوائنٹر لائے گا۔
Down: جب یوزر اس بٹن پر کلک کر ے گا۔
Hit: فلیش اس State کو بطور ’’لنک ایریا‘‘ استعمال کرتا ہے۔ یعنی جب ماؤس پوائنٹراس جگہ موجود مواد کے اوپر آئے گا، تب بٹن ایکٹو ہوگا ورنہ نہیں۔ دوسرے الفاظ میں یہ جگہ ’’Hot Spot‘‘ ہوگی!​

٭۔ ۔ ۔ Over فریم کو ایسا ہی رہنے دیں اور Over فریم پرکی فریم کا اضافہ کر کے ٹیکسٹ بلاک کا کلر پروپرٹیز پینل میں#990000 رکھ لیں تاکہ وہ ہماری ہیڈنگ کے رنگ جیسا ہوجائے۔​

٭۔ ۔ ۔ اب اگر آپ چاہیں تو Down فریم میں بھی ٹیکسٹ کے رنگ میں تبدیلی کر لیں ورنہ ایسے ہی رہنے دیں اور Hit فریم میں کی فریم کا اضافہ کر لیں۔​

٭۔ ۔ ۔ اب Rectangle Tool(R) کی مدد سے ایک ایسا rectangle ٹیکسٹ کے گرد بنائیں جس سے وہ ٹیکسٹ بلاک چھپ جائے ۔ خیال رہے کہ اس کے لئے آپ کوئی بھی رنگ استعمال کر سکتے ہیں کیونکہ یہ صرف Hit Area ہے اور یوزر کو یہ دکھائی نہیں دے گا۔ تصویر دیکھئے!۔ ۔ ۔ نوٹ کیجئے کہ Hit Area بناتے وقت صرف Fill کلر استعمال کیا گیا ہے اور Strokeکلر کو لاک کر دیا گیا ہے۔​

٭۔ ۔ ۔ اچھا! ۔ ۔ ۔ اب جو rectangle آپ نے بنایا ہے ، اُسے آپ سیلیکٹ کر کے کی بورڈ پر F8 دبا کر گرافک سمبل میں کنورٹ کر دیں اور اس کا نامhitArea رکھ دیں۔ یہ اس لئے کیا جارہا ہے کیونکہ ہم اسی گرافک کو دوسرے بٹنوں کے لئے بھی استعمال کریں گے۔​

٭۔ ۔ ۔ اب آپEdit>Document کے ذریعے سمبل ایڈیٹنگ موڈ سے دوبارہ Main Timeline(Scene 1) پر واپس آ جائیں، اپنے ڈاکیومنٹ کو محفوظ کر لیں اور Ctrl+Enter دبا کر اپنی فلیش مووی کو ٹیسٹ کریں۔ اگر آپ نے بتائے گئے طریقے پر عمل کیا ہے تو آپ دیکھیں گے کہ Introduction ٹیکسٹ بلاک اب ایک بٹن میں تبدیل ہو چکا ہے جو پوائنٹر کے لانے سے رنگ بھی تبدیل کر رہا ہے!۔ ۔ ۔​

٭۔ ۔ ۔ اب ہم اس بٹن میں تھوڑی سی ایکشن اسکرپٹنگ کریں گے تاکہ یہ بٹن کام بھی کرے !۔ ۔ ۔ اس کے لئے آپ IntroButtonپر رائٹ کلک کر کے Actions پر کلک کریں اور ایکشن پینل میں تصویر کے مطابق کوڈ ٹائپ کر دیں۔ (ٹائپ کرنے کے لئے ایکسپرٹ موڈ استعمال ہوتا ہے ورنہ نارمل موڈ)​

٭۔ ۔ ۔ اب جس طرح آپ نے Introduction بٹن تیار کیا ہے بالکل اسی طرح آپ باقی بٹن بھی تیار کریں۔آپ کے پاس کل پانچ بٹن تیار ہونے چاہئیں جن کے نام بالترتیب introButton ، aboutButton، photoButton،linksButton اورcontactButton ہوں۔​

ٹوٹکا: hitArea سمبل کو Free Transform Tool کی مدد سے بقیہ ٹیکسٹ بلاکس کے سائز کے مطابق چھوٹا بڑا کریں۔​

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

٭۔ ۔ ۔ اب جس طرح ہم نے پہلے introButton میں ایکشن اسکرپٹنگ کی تھی، اسی طرح بقیہ چار بٹنوں میں بھی(جو آپ نے تیار کر لیے ہیں) ہو بہو وہی ایکشن اسکرپٹنگ ان بٹنوں کے ایکشن پینل میں ٹائپ کر دیں۔ صرف gotoAndStop("intro"); میں intro کی جگہ متعلقہ فریم لیبلز کے نام ٹائپ کر دیں جو آپ نے Main Timeline میں دے رکھے ہیں۔ اُمید ہے کہ آپ ایسا با آسانی کر لیں گے۔ ۔ ۔ انشاء اللہ!۔ ۔ ۔ آپ کی آسانی کے لئے نیچے ہر بٹن پر ڈالے جانے والی ایکشن اسکرپٹنگ الگ الگ موجود ہے۔​

[FONT=Courier New][SIZE=4][COLOR=magenta][B]// For introButton[/B][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=4][COLOR=blue][B]on (release) {[/B][/COLOR][/SIZE][/FONT]
[B][SIZE=4][FONT=Courier New][COLOR=blue]gotoAndStop("intro");[/COLOR][/FONT][/SIZE][/B]
[B][SIZE=4][FONT=Courier New][COLOR=blue]}[/COLOR][/FONT][/SIZE][/B]
[FONT=Courier New][SIZE=4][COLOR=magenta][B]// For aboutButton[/B][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=4][COLOR=blue][B]on (release) {[/B][/COLOR][/SIZE][/FONT]
[B][SIZE=4][FONT=Courier New][COLOR=blue]gotoAndStop("about");[/COLOR][/FONT][/SIZE][/B]
[B][SIZE=4][FONT=Courier New][COLOR=blue]}[/COLOR][/FONT][/SIZE][/B]
 
[FONT=Courier New][SIZE=4][COLOR=magenta][B]// For photoButton[/B][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=4][COLOR=blue][B]on (release) {[/B][/COLOR][/SIZE][/FONT]
[B][SIZE=4][FONT=Courier New][COLOR=blue]gotoAndStop("photo");[/COLOR][/FONT][/SIZE][/B]
[B][SIZE=4][FONT=Courier New][COLOR=blue]}[/COLOR][/FONT][/SIZE][/B]
[FONT=Courier New][SIZE=4][COLOR=magenta][B]// For linksButton[/B][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=4][COLOR=blue][B]on (release) {[/B][/COLOR][/SIZE][/FONT]
[B][SIZE=4][FONT=Courier New][COLOR=blue]gotoAndStop("links");[/COLOR][/FONT][/SIZE][/B]
[B][SIZE=4][FONT=Courier New][COLOR=blue]}[/COLOR][/FONT][/SIZE][/B]
[FONT=Courier New][SIZE=4][COLOR=magenta][B]// For contactButton[/B][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=4][COLOR=blue][B]on (release) {[/B][/COLOR][/SIZE][/FONT]
[B][SIZE=4][FONT=Courier New][COLOR=blue]gotoAndStop("contact");[/COLOR][/FONT][/SIZE][/B]
[B][SIZE=4][FONT=Courier New][COLOR=blue]}[/COLOR][/FONT][/SIZE][/B]

نیوی گیشن مینو کے لئے مارکر گرافک تیار کرنا:
اب ہم ایک مارکر گرافک کا اضافہ کریں گے تاکہ یوزر کو معلوم ہو سکے کہ وہ اس وقت ویب سائٹ کا کون سا سیکشن وزٹ کر رہا ہے۔ اس مقصد کے لئے ہم ایک black square بنائیں گے جو ’’ایکٹو‘‘ سیکشن کے برابر میں نظرآئے گا۔شروع میں یہ مارکر Introduction ٹیکسٹ کے برابر میں نظرآئے گا۔ پھر جن بٹنوں پر یوزرز کلک کریں گے ، یہ بلاک وہاں شفٹ ہوتا رہے گا۔​

٭۔ ۔ ۔ Main Timeline میں menu لیئر سے نیچے ایک نئی لیئر بنائیں اور اس کا نام marker رکھیں۔​

٭۔ ۔ ۔ اب بقیہ لےئرز کو لاک کرنے کے بعدmarker لیئر کے frame 10 میں ایک کی فریم ڈالیں۔ اس وہاں Rectangle Tool(R) کی مدد سے ایک چوکور ڈبہ سا بنائیں۔ اس کی سیٹنگ کے لئے تصویر ملاحظہ کریں۔ بعد میں اسے تصویر کے مطابق گرافک سمبل میں بھی marker کے نام سے کنورٹ کر دیں۔اس مارکر گرافک کو تصویرکے مطابقIntroduction ٹیکسٹ کے برابر میں رکھیں۔​

ٹوٹکا: یاد رکھیے!۔ ۔ ۔ جب بھی آپ کوئی نئی چیز فلیش میں بنائیں، پہلے اسے گرافک سمبل میں ضرور کنورٹ کر دیا کریں۔ اس سے آپ نا صرف اسے اپنی فلیش مووی میں متعدد بار استعمال کر سکتے ہیں بلکہ اس سے آپ کی فلیش مووی کا سائز بھی کم رہتا ہے۔​

٭۔ ۔ ۔ اب اب marker لیئر کے frame 20 میں کی فریم ڈالیں اور مارکر گرافک کو جو آپ ابھی Introduction ٹیکسٹ کے برابر میں ہے ۔اُسے وہاں سے ڈریگ کر کے About ٹیکسٹ کے برابر میں ڈال دیں۔ ۔ ۔ تصویر ملاحظہ کریں۔​

٭۔ ۔ ۔ بالکل اسی طرح اسی لیئر میں frame30،40 اور 50 میں کی فریمز کا اضافہ کر کے مارکر گرافک کو ڈریگ کر کے اس فریم میں موجود ٹیکسٹ بلاک کے برابر میں ڈالتے رہیں۔ ۔ ۔ میرا خیال ہے یہ کام کچھ زیادہ مشکل نہیں!۔ ۔ ۔ کیا خیال ہے آپ کا؟۔ ۔ ۔​

٭۔ ۔ ۔ اب Ctrl+Enterدبا کر اپنی فلیش مووی کو ٹیسٹ کریں۔ اگر آپ نے اوپر بیان کردہ طریقے کے مطابق بالکل درست کام کیا ہے تو آپ دیکھیں گے کہ ماؤس پوائنٹر کے لانے سے ہر بٹن کا کلر تبدیل ہو رہا ہے اور کلک کرنے سے مارکر گرافک مطلوبہ سیکشن پر پہنچ جاتا ہے!۔ ۔ ۔ اگر ایسا نہیں ہو رہا ہے تو براہِ کرم آپ کورس کے اس حصے کو دوبارہ پڑھیے اور اطمینان کر لیجئے کہ کہیں آپ سے کوئی غلطی وغیرہ تو نہیں ہوگئی؟۔ ۔ ۔ کوشش کیجئے! ۔ ۔ ۔ شاباش !!!​

٭۔ ۔ ۔ فالحال اتنا ہی!۔ ۔ ۔ باقی کام اگلے حصے میں کریں گے !(انشاء اللہ )اب File>Saveمنتخب کر کے اپنے فلیش ڈاکیومنٹ کو main_300کے نام سے محفوظ کر لیں۔​

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

’’ فلیش ویب ڈیزائننگ‘‘ کورس کاتیسرا حصہ (PART 3) مکمل ہوا! ​

حرفِ آخر:​

اُمید ہے آپ کو کورس کا تیسرا حصہ پسند آیا ہوگا۔شاباش!۔ ۔ ۔ آپ لوگ کافی محنت سے کام کر رہے ہیں اور کورس میں دلچسپی ظاہر کر رہے ہیں۔ابھی تک ہم نے بہت بنیادی کا م کیا ہے۔ اگلے حصوں میں ہم مزید دلچسپ مگر تھوڑا محنت طلب کا م کریںگے ۔ اُمید ہے آپ میرا ساتھ دینگے!۔ ۔ ۔ اگر کوئی بات سمجھ نہ آئی ہوتو براہِ کرم پوچھنے سے مت ہچکچائیے گا!۔ ۔ ۔ کورس کے اگلے حصے تک کے لیے اجازت !۔ ۔ ۔ فی امان اللہ!​

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

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