فلیش فلیش ویب ڈیزائننگ (حصہ پنجم اور آخری حصہ )

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

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

حصہ پنجم اور آخری حصہ .... PART 5 & LAST PART​

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

”فلیش ویب ڈیزائننگ“ کورس کے حصہ پنجم اور آخری حصّے میں خوش آمدید!..
انشاء اللہ !۔ ۔ ۔ کورس کے پانچویں حصے میں آپ سیکھیں گے:
٭۔ ۔ ۔ Introduction Section مکمل کرنا
٭۔ ۔ ۔ About Section مکمل کرنا
٭۔ ۔ ۔ Links Section مکمل کرنا
٭۔ ۔ ۔ Invisible Button تیار کرنا
٭۔ ۔ ۔ Contact Section مکمل کرنا
٭۔ ۔ ۔ بیک گراؤنڈ تیار کرنا ​

نوٹ : کورس کے پانچویں حصے میں ہم انشاء اللہ اپنی بنیادی فلیش ویب سائٹ مکمل کر کے اُسے کسی بھی ویب سرور پر اپلوڈ کر نے کے لئے تیار ہونگے!​

عزیز اُردو ویب ممبرز !۔ ۔ ۔ حصہ’’4‘‘ میں ہم نے فوٹو گیلری سیکشن مکمل کر لیا تھا ۔ ۔ ۔ اب ہم اپنی فلیش ویب سائٹ کے بقیہ سیکشنز میں موا د یا Content ایڈ کرنا شروع کر یں گے۔ ۔ ۔ کورس کے پانچویں حصے میں ہم بقیہ تمام سیکشنز کو بھی مکمل کریں گے!۔ ۔ ۔ انشاء اللہ!۔ ۔ ۔ !۔ ۔ ۔ چلیں کام شروع کرتے ہیں!۔ ۔ ۔​

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

٭۔ ۔ ۔ اب content لیئر میں Intro فریم لیبل کے نیچے ایک کی فریم کا اضافہ کریں اور وہاں پچھلے سبق میں بتائے گئے طریقے کے مطابق ایک ڈائنیمک ٹیکسٹ باکس بنائیں۔اُس ٹیکسٹ باکس کے Instance Name کے خانے میں intro_text ٹائپ کریں اور ڈاکیومنٹ کی لائبریری سے اسکرول بار کمپونینٹ ڈریگ کر کے اس ٹیکسٹ باکس کے اوپر ڈال دیں۔ ٹیکسٹ باکس کی بقیہ سیٹنگ کے لئے کورس کا حصہ 4 ملاحظہ کریں۔​

 

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

٭۔ ۔ ۔ اس ٹیکسٹ باکس میں اپنا مطلوبہ ٹیکسٹ کاپی پیسٹ کر لیں۔ اس کے بعد اس پورے ٹیکسٹ باکس کو اسکرول بار سمیت گرافک سمبل یا مووی کلپ سمبل میں کنورٹ کر دیں تاکہ وہ ہماری لائبریری کا حصہ بن جائے۔ اگر آپ چاہیں توامیجز وغیرہ سے اس سمبل کو مزید دلکش بنا سکتے ہیں۔تصویر ملاحظہ کریں۔​

About Section مکمل کرنا:
٭۔ ۔ ۔ اب content لیئر میں about فریم لیبل کے نیچے ایک کی فریم کا اضافہ کریں اور وہاں پچھلے سبق میں بتائے گئے طریقے کے مطابق ایک ڈائنیمک ٹیکسٹ باکس بنائیں۔اُس ٹیکسٹ باکس کے Instance Name کے خانے میں about_text ٹائپ کریں اور ڈاکیومنٹ کی لائبریری سے اسکرول بار کمپونینٹ ڈریگ کر کے اس ٹیکسٹ باکس کے اوپر ڈال دیں۔ ٹیکسٹ باکس کی بقیہ سیٹنگ کے لئے کورس کا حصہ 4 ملاحظہ کریں۔​

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

​

 

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

Links Section مکمل کرنا:
فوٹو گیلری سیکشن تو ہم پہلے ہی مکمل کر چکے ہیں، لہٰذا اب ہم لنکس سیکشن کی طرف بڑھیں گے۔ اس سیکشن میں اسکرول بار اور ڈائینیمک ٹیکسٹ باکس کی ضرورت نہیں۔ یہاں چونکہ ہمیں لنکس تیار کرنے ہیں اور لنکس بہت سارے بھی ہوسکتے ہیں۔ اب سوچنے کی بات ہے کہ کیا ہم ہر لنک کے لئے الگ الگ بٹن سمبل تیار کریں گے؟۔ ۔ ۔ جی نہیں!۔ ۔ ۔ ہم ایک invisible بٹن سمبل تیار کریں گے اور جس ٹیکسٹ کو ہمیں بطور لنک استعمال کرنا ہوگا ، اس کے اوپر ہم اس بٹن سمبل کو ڈال دیں گے!۔ ۔ ۔ حیران مت ہوں!۔ ۔ ۔ ابھی ہم یہی کرنے جارہے ہیں!۔ ۔ ۔

٭۔ ۔ ۔ سب سے پہلے content لیئر میںlinks فریم لیبل کے نیچے ایک کی فریم کا اضافہ کریں اور وہاں اپنا مطلوبہ ٹیکسٹ ٹائپ کریں۔ خیال رہے کہ اب ڈائنیمک نہیں بلکہ Static Text استعمال کر نا ہے۔ اب اس ٹیکسٹ کو گرافک یا مووی کلپ سمبل میں کنورٹ کر دیں۔ ۔ ۔ تصویر ملاحظہ کریں۔

٭۔ ۔ ۔ اب اس نئے سمبل میں ایک نئی لیئر کا اضافہ کریں اور اسے buttons کا نام دے دیں۔

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

 

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

Invisible Button تیار کرنا:
٭۔ ۔ ۔ اب Insert>New Symbol... کے ذریعےCreate New Symbol کے ڈائلاگ باکس کو اوپن کریں اور اس میں تصویر کے مطابق خانہ پری کریں۔ Button کو سیلیکٹ کرنا مت بھولیے!۔ ۔ ۔ تصویر ملاحظہ کریں۔

٭۔ ۔ ۔ جب آپ بٹن ایڈیٹنگ موڈ میں داخل ہوں تو Up،Over اورDown فریمز کو جوں کا توں چھوڑ دیں اور Hit فریم میں ایک کی فریم کا اضافہ کر لیں۔

٭۔ ۔ ۔ اب لائبریری پینل سے hitArea نامی سمبل ڈریگ کر کے Hit لےئر میں ڈال دیں۔ شاید آپ کو یاد ہو۔ یہ سمبل ہم نے کورس کے حصہ 3 میں تیار کیا تھا!۔ ۔ ۔ تصویر ملاحظہ کریں۔

 

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

٭۔ ۔ ۔ اب Scene 1 میں واپس آجائیں اور content لیئرمیں لنکس سیکشن میں واپس آجائیں۔ اب جیسا کہ ہم نے اس سیکشن کو سمبل میں کنورٹ کر دیا تھا اور buttons لیئر کا بھی اضافہ کیا تھا۔ آپ اس لیئر میں رہتے ہوئے لائبریری سے invisible_btnکو ڈریگ کر کے اس ٹیکسٹ کے اوپر ڈال دیں جسے آپ بطور لنک استعمال کرنا چاہتے ہیں۔ آپ دیکھیں گے اس بٹن کو فلیش Aquaکلر میں دکھا رہا ہے!۔ ۔ ۔ تصویر ملاحظہ کریں۔

​

٭۔ ۔ ۔ اب اس invisible_btn پر رائٹ کلک کر کے تصویر کے مطابق ایکشن اسکرپٹ ٹائپ کریں۔جتنے ٹیکسٹ کوہائی لائٹ کیا گیا ہے ، وہاں اپنا مطلوبہ URL ٹائپ کر دیں۔​

 

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

٭۔ ۔ ۔ اب اوپر بتائے گئے طریقے کے مطابق جتنے لنکس آپ بنانا چاہتے ہیں۔ انھیں بنالیں ۔ مگر بٹن میں موجود ایکشن اسکرپٹ میں URL تبدیل کرنا مت بھولیے گا!۔ ۔ ۔ جب تمام لنکس تیار ہوجائیں گے تو ہماری ویب سائٹ کا لنکس سیکشن بھی مکمل ہوجائے گا۔ تصویر ملاحظہ کریں۔

 

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

Contact Section مکمل کرنا:
اس سیکشن میں میں بھی آپ Static Text کا استعمال کرتے ہوئے مطلوبہ ٹیکسٹ ٹائپ کریں۔ لنکس کے لئے یا تو نئے بٹن تیار کر لیں یا اگر چاہیں توinvisible_btn سے ہی کام چلا لیں۔ ایسا کرنے سے فائل کے سائزپر بھی اثر نہیں پڑے گا اور آپ کی ویب سائٹ کا ایک اور سیکشن بھی مکمل ہوجائیگا!۔ ۔ ۔ طریقہ کار تو سارا بتایا جا چکا ہے۔ آپ اُسی طریقے کے مطابق عمل کرتے ہوئے اس سیکشن کو بھی مکمل کریں۔ مزید خوبصورتی کے لئے امیجز کا بھی اضافہ کیا جا سکتا ہے۔ ۔ ۔ نمونے کے طور پر تصویر ملاحظہ کریں۔ اس میں کورس کے پچھلے بیان کردہ طریقے کے مطابق ہی عمل کیا گیا ہے!

بیک گراؤنڈ تیار کرنا:
اب ہماری ویب سائٹ تقریباً مکمل ہو گئی ہے۔ مگر ایک لیئر ابھی بھی خالی ہے اور وہ ہے بیک گراؤنڈ لیئر!۔ ۔ ۔ آئیے اب اسے بھی مکمل کر لیتے ہیں!۔ ۔ ۔​

٭۔ ۔ ۔ بیک گراؤنڈ لیئر کے فریم 10 میں ایک کی فریم کا اضافہ کریں اورRectangle Tool(R) پر کلک کر دیں۔ اس کے بعدRound Rectangle Radius پر کلک کر کے ڈائلاگ بکس میں 25 ٹائپ کر دیں۔ اس سے rectangle کناروں سے تھوڑا سا گول ہو جائے گا!۔ ۔ ۔ تصویر ملاحظہ کریں!۔ ۔ ۔​

٭۔ ۔ ۔ اب تصویر کے مطابق ایک گول کناروں والا rectangle بنالیں!۔ ۔ ۔ اسے بعد میں سمبل میں کنورٹ کر دیں اور اس کا نام border رکھ دیں۔​

٭۔ ۔ ۔ اب آپ Modify>Document کے ذریعے ڈاکیومنٹ کا بیک گراؤنڈ#FF9900کلر کا کر دیں۔ ۔ ۔ کیونکہ یہ ہماری ویب سائٹ کی تھیم سے مطابقت رکھتا ہے۔ ۔ ۔ تصویر ملاحظہ کریں۔​

 

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

٭۔ ۔ ۔ اب Ctrl+Enterدبا کر اپنی فلیش مووی کو ٹیسٹ کریں۔ ۔ ۔ لیجئے آپ کی ویب سائٹ تیار ہے!۔ ۔ ۔
تصویر ملاحظہ کریں!۔ ۔ ۔

 

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

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

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

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

حرفِ آخر:
اُمید ہے آپ کو کورس کا پانچواں اور آخری حصہ پسند آیا ہوگا۔کورس کے اس حصے میں ہم نے ویب سائٹ مکمل کر لی ہے!۔ ۔ ۔ ہماری ایک سادہ مگر خوبصورت ویب سائٹ تیار ہے!۔ ۔ ۔ اب اگر ہم چاہیں تو اس ویب سائٹ کو کسی بھی ویب سرور پر اپلوڈ کر سکتے ہیں!۔ ۔ ۔ ۔ ۔ ۔​

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

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

 

[kutkutariyaan]

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

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

 

[عدنان شاہد]

ماشااللہ بھائی بہت اچھا اور زبردست کام ہے آپکا