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

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

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

حصّہ دوم....PART 2​

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

”فلیش ویب ڈیزائننگ“ کورس کے حصہ دوم میں خوش آمدید!...
انشاءاللہ !....کورس کے دوسرے حصے میں آپ سیکھیں گے:
٭....فلیش ویب سائٹ کی ہیڈنگ تیار کرنا
٭....فلیش میں فائل امپورٹ کرنا، فالتو لیئرز کو لاک کرنا، Movie Clip تیار کرنا
٭.... Motion Tween بنانا، عام لیئر کو Mask لیئر میں تبدیل کرنا،Align Panel کا استعمال
٭....ویب سائٹ کا نیوی گیشن مینو تیار کرنا
٭....ٹیکسٹ ٹول کی مدد سے ٹیکسٹ ٹائپ کرنا ​

اچھا جناب !....حصہ” 2“ میں آپ نے فلیش ویب سائٹ کا ”ڈھانچہ“ تیار کیا تھا۔ کورس کے اس حصے میں ہم اس ڈھانچے میں کچھ ”گوشت پوشت“ کا اضافہ کریں گے۔ آپ جانتے ہیں کہ کسی بھی ویب سائٹ میں لوگو ، مونوگرام یا ہیڈنگ کی کتنی اہمیت ہے۔ اگر ویب سائٹ کا مونوگرام یا لوگو خوبصورت بنا ہوا ہو تو وزیٹر پر اس کا بڑا اچھا تاثر پڑتا ہے، کیونکہ یہ ہر پیج پر دکھائی دیتا ہے۔ جیسا کہ ہماری اس پیاری سی ویب سائٹ ”اُردو ویب“ کا لوگو آپ ہر پیج پر سب سے اوپردائیں طرف دیکھتے ہیں!....چلیے!....ہم بھی اپنی فلیش ویب سائٹ کی ہیڈنگ بنانے کی کوشش کرتے ہیں!....

ویب سائٹ کی ہیڈنگ تیار کرنا: ویسے تو ہیڈنگ یا سرخی تیار کرنا آپ پر منحصرہے کہ آپ اسے کیسا بنانا چاہتے ہیں؟....اگر آپ کسی اور سافٹ ویئر مثلاََ فوٹو شاپ ، کورل ڈرا وغیرہ میں اچھے ہیں تو آپ اپنی ویب سائٹ کا لوگو یا ہیڈنگ اس سافٹ ویئر میں تیار کر کے فلیش میں امپورٹ کر سکتے ہیں۔یہاں بھی ہم ایسا ہی کرنے جارہے ہیں۔ تو آیئے شروع کرتے ہیں!....

٭....سب سے پہلے فلیش پروگرام چلائیں اور وہی فائل کھولیں جو آپ نے کورس کے حصہ ”1“ میں تیار کی تھی۔
٭....اب نیچے موجود آگ کے منظر والی فائل(fire.jpg) کو اپنے کمپیوٹر میں محفوظ کر لیں۔

 

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

 

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

٭.... اب دوبارہ فلیش پروگرام میں آئیں اورFile>Import to Library کمانڈ کے ذریعے fire.jpgفائل کو اپنے فلیش ڈاکیومنٹ کی لائبریری میں محفوظ کر لیں۔​

٭....اب Timeline میں موجودheading لیئر پر رائٹ کلک کریں اور کھلنے والے مینو میں Lock Others پر کلک کر دیں۔ اس سے سوائے ہیڈنگ لیئر کے تمام لیئرز پر ”تالے“ لگ جائیں گے۔

ٹوٹکا: فلیش میں آپ جب بھی کسی ایک لیئر میں کام کر رہے ہوں تو اوپر بیان کردہ طریقے کے مطابق بقیہ لیئرز کو لاک کر دیا کریں تاکہ کہیں غلطی سے اس لیئر کا مواد آپ کسی اور لیئر میں نہ ڈال دیں!

٭....اب Insert>New Symbol پر کلک کریں اور کھلنے والے مینو میں تصویر کے مطابق خانہ پری کریں۔

٭....ایسا کرنے سے آپ مووی کلپ سمبل ایڈیٹنگ موڈ میں چلے جائیں گے۔ آپ سب سے پہلے اس مووی کلپ کی Layer 1 کا نام کورس کے پہلے حصے میں بتائے گئے طریقے کے مطابق fire رکھ دیں۔ اب ڈاکیومنٹ کی لائبریری کھولیں(F11) اور اس میں سے fireوالی تصویر ڈریگ کر کے اسٹیج کے درمیان میں ڈال دیں۔
٭....اب ایک اور لیئر بنائیں اور اس کا نام text رکھ دیں۔ اس لیئر میں Text Tool (T) کی مدد سے مندرجہ ذیل ٹیکسٹ fire والی تصویر کی بائیں جانب ٹائپ کریں۔ٹیکسٹ کی تمام سیٹنگ نیچے دیے گئے اسکرین شاٹ کے مطابق رکھیں۔​

MY HOME PAGE​

 

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

٭....اب text لیئر کے Timeline میں frame 20 پر رائٹ کلک کر کے Insert Frame پر کلک کر دیں ۔
٭....اب fire لیئر میں آ جائیں اور اس کے frame 20پررائٹ کلک کر کے Insert Keyframe پر کلک کر دیں۔ اس کے بعد fire والی تصویر کو ڈریگ کر کے بائیں جانب اس طرح لے جائیں کہ اوپر والا ٹیکسٹ جیسے پہلے تصویر کے انتہائی بائیں جانب تھا اب تصویر کے انتہائی دائیں جانب نظر آئے۔ تصویر دیکھیے!

٭....اب fire لیئرکےTimeline میں کہیں بھی رائٹ کلک کریں اور کھلنے والے مینو میںCreate Motion Tween پر کلک کریں۔ ایسا کرنے سے ہلکے جامنی رنگ کی تیر fire لیئر کے Timeline میں بن جائے گی۔ اسے فلیش کی زبان میں ”Motion Tween“ کہتے ہیں اور یہ ایک سمبل کو ایک جگہ سے دوسری جگہ لے جانے کے لیے بے حد زبردست فیچر ہے!
٭....اب Timeline میں text لیئر کے نام پر رائٹ کلک کریں اور کھلنے والے مینو میں Mask پر کلک کریں۔ آپ دیکھیں گے کہ ایسا کرتے ہی دونوں لیئرز کو نہ صرف تالے لگ جائیں گے بلکہ ان کے آئی کونز بھی تبدیل ہو جائیں گے۔ حیرانی کی بات یہ ہوگی کہ آگ والا منظر غائب ہو گیا ہوگا اور ہمارے ٹیکسٹ کے ”اندر“ نظر آ رہا ہوگا۔ تصویر دیکھیے!​

 

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

٭....لیجئے جناب!....اب ہماری ہیڈنگ تیار ہے۔ آپ Edit>Document کرکے مووی کلپ سمبل ایڈیٹنگ موڈ سے باہر نکل آئیں اور ایک بار پھر لائبریری کھولیں۔اس میں اپنی تیار کردہ مووی کلپ(heading_mc) کو ڈریگ کر کے heading لیئر میں ڈال دیں۔ اب اگر آپ چاہیں تو Properties Panelکے ذریعے اپنی ہیڈنگ کا سائز ڈبل کر سکتے ہیں، یعنی اس کی لمبائی اور چوڑائی چھوٹی بڑی کر سکتے ہیں۔

ٹوٹکا: ہیڈنگ مووی کلپ پر رائٹ کلک کریں اور کھلنے والے مینو سے Panels>Align پر کلک کریں۔اب تصویر کے مطابق بٹنوں پر ترتیب وار کلک کریں۔ ایسا کرنے سے آپ کی ہیڈنگ مووی کلپ اسٹیج کے سب سے اوپر درمیان میں ہو جائے گی!

ویب سائٹ کا نیوی گیشن مینو تیار کرنا :
ہماری ویب سائٹ اس وقت تک بےکار ہے جب تک اس میں گھوما پھرا نہ جا سکے ۔ اسے ”نیوی گیشن“ کہتے ہیں۔ ہم اب اپنی ویب سائٹ میں ایسے ہی ایک نیوی گیشن مینو کا اضافہ کریں گے!....
٭....ایک اور نئی لیئر”menu“ کے نام سے بنائیں اور اسے actions لیئر سے نیچے رکھ دیں۔ اب بقیہ لیئرز کو لاک کر دیں اور menu لیئر کے frame 10 میں ایک keyframe ڈال دیں۔
٭....اب frame 10 میں Text Tool(T) کی مدد سے Properties Panel میں تصویر کے مطابق سیٹنگ رکھ کرINTRODUCTION ٹائپ کریں۔ اس ٹیکسٹ کو ہیڈنگ سے ذرا سا نیچے رکھیں۔

 

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

٭....بالکل اسی طرح آپ علیحدہ علیحدہ چار ٹیکسٹ بلاکس اور تیار کریں جن میں بالترتیبABOUT،PHOTO GALLERY،LINKS اور CONTACT لکھا ہوا ہو....ان تمام ٹیکسٹ بلاکس کے درمیان مناسب فاصلہ ہو۔ اس سلسلے میں آپ Align Panel کی مدد حاصل کر سکتے ہیں۔آپ کا اسٹیج تصویر کے مطابق دکھائی دینا چاہئے!....​

نوٹ: ہم اس ویب سائٹ میں افقی یا Horizontal Navigation بنائیں گے۔ اگر آپ چاہیں تو عمودی یا Vertical Navigation بھی بنا سکتے ہیں ۔ اس کے لئے آپ تمام ٹیکسٹ بلاکس کو عموداََ رکھیں گے۔ خیال رہے کہ بعد میں ہم ان ٹیکسٹ بلاکس کو Button Symbols میں تبدیل کر دینگے یعنی یہ ٹیکسٹ بلاکس بطور لنکس کام کریں گے!​

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

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

” فلیش ویب ڈیزائننگ“ کورس کا دوسرا حصہ (PART 2) مکمل ہوا!​

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

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

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