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

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

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

​

حصہ چہارم....PART 4​

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

”فلیش ویب ڈیزائننگ“ کورس کے حصہ چہارم میں خوش آمدید!...​

انشاء اللہ !۔ ۔ ۔ کورس کے چوتھے حصے میں آپ سیکھیں گے:
٭۔ ۔ ۔ فوٹو گیلری سیکشن کے لئے فوٹو سلائیڈ شو بنانا
٭۔ ۔ ۔ فوٹو سلائیڈ شو میں استعمال کے لئے تصویریں تیار کرنا
٭۔ ۔ ۔ فوٹو مووی کلپ میں بٹن کا اضافہ کرنا
٭۔ ۔ ۔ نئی Content لیئر تیار کرنا
٭۔ ۔ ۔ فوٹو مووی کلپ میں Description Text کا اضافہ کرنا
٭۔ ۔ ۔ Dynamic Text Field تیار کرنا
٭۔ ۔ ۔ ScrollBar کمپونینٹ استعمال کرنا
٭۔ ۔ ۔ ٹیکسٹ فیلڈاور اسکرول بار کمپونینٹ کی پروپرٹیز تبدیل کرنا

عزیز اُردو ویب ممبرز !۔ ۔ ۔ حصہ’’3‘‘ میں ہم نے نیوی گیشن مینو مکمل کر لیا تھا ۔ ۔ ۔ اب ہم اپنی فلیش ویب سائٹ میں موا د یا Content ایڈ کرنا شروع کر یں گے۔ ۔ ۔ کورس کے چوتھے حصے میں ہم فوٹو گیلری سیکشن مکمل طور پربنائیں گے!۔ ۔ ۔ انشاء اللہ!۔ ۔ ۔ فلیش میں نہایت آسانی کے ساتھ ایک فوٹو سلائیڈ شو بنایا جاسکتا ہے جس سے کسی بھی فلیش پروجیکٹ میں چار چاند لگ جاتے ہیں۔ مگر اس سلسلے میں ایک احتیاط بھی ضروری ہو جاتی ہے کہ ہم ضرورت سے زیادہ تصویروں کا استعمال اپنے فلیش پروجیکٹ میں ہر گزنہ کریں کیونکہ اس سے ہماری فلیش مووی کا سائز بہت زیادہ بڑھ سکتا ہے!۔ ۔ ۔ چلیں کام شروع کرتے ہیں!۔۔۔

فوٹو گیلری سیکشن کے لئے فوٹو سلائیڈ شو بنانا: ​

فوٹو سلائیڈ شو میں استعمال کے لئے تصویریں تیار کرنا:
نوٹ :اس سے پہلے کہ ہم فوٹو سلائیڈ شو تیار کریں۔ آپ کو اس فوٹو سلائیڈ شو کے لئے کچھ تصویریں ضرور تیار کر لینی چاہئیں۔ اس کے لئے آپ کے پاس اوّل تو چند تصویریں موجود ہوں، پھر اس کے بعد کسی بھی Bitmap Editor جیسے ایڈوبی فوٹوشاپ کے ذریعے ان تصویروں کو نیچے دی گئی چیک لسٹ کے مطابق تیار کر لیں ۔

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

٭۔ ۔ ۔ آپ کے پاس کم از کم پانچ images تیار ہونے چاہئیں جن میں سے ہر امیج کا سائز ہمارے فلیش ڈاکیومنٹ سے کم ہو۔ اس ویب سائٹ کے لئے 240*320 پکسل کے امیجز بہتر رہیں گے۔
٭۔ ۔ ۔ خیال رہے کہ آپ کی تصاویر JPEG یا PNG فارمیٹ میں ہونی چاہئیں کیونکہ یہ سائز اور کوالٹی میں بہتر ہوتی ہیں۔
٭۔ ۔ ۔ اپنی تصاویر کو sequence میں نام دیں جیسے photo1،photo2،photo3،photo4 اورphoto5۔ اس سے آپ ان تصاویر کو ایک ساتھ فلیش ڈاکیومنٹ میں امپورٹ کر سکیں گے۔

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

٭۔ ۔ ۔ اب Insert>New Symbol کے ذریعے مووی کلپ سمبل بنائیں جس کا نام photo_mc رکھیں۔

٭۔ ۔ ۔ فلیش فوراً سمبل ایڈیٹنگ موڈ میں چلا جائے گا۔ اس نئے مووی کلپ سمبل کی Layer 1 کو photos کا نام دے دیں۔

٭۔ ۔ ۔ اب اس نئی لےئر میں رہتے ہوئے File>Import... کمانڈ کے ذریعے اپنی تصاویر کے فولڈر میں جائیں اور photo1 پر کلک کر کے OK کردیں۔تصویر ملاحظہ کریں۔

 

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

٭۔ ۔ ۔ اگر آپ نے تصاویر کو اوپر بیان کردہ طریقے کے مطابق ایک sequence میں نام دیا ہے تو ایک ڈائلاگ باکس اوپن ہوگا۔ آپ اس میں Yes پر کلک کر دیں۔تصویر ملاحظہ کریں۔

​

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

فوٹو مووی کلپ میں بٹن کا اضافہ کرنا:
٭۔ ۔ ۔ اب مووی کلپ میں ایک اور لیئر بنائیں جس کا نام actions رکھیں اور اس کے frame 1 میں رائٹ کلک کر کے Actions Panel کھولیں اور stop(); ایکشن ڈال دیں تاکہ ہماری فوٹوسلائیڈ شو خود بخود لوپ ہونا نہ شروع ہو جائے۔
٭۔ ۔ ۔ اب ایک اور نئی لیئر کا اضافہ کریں اور اس کا نام buttons رکھیں اور فلیش میں موجود بٹن لائبریری میں سے NextاورPrevious کے دو بٹن اس لیئر میں ڈال دیں۔یا اگر آپ چاہیں تو خود بھی ایسے دو بٹن بنا سکتے ہیں۔ان دونوں بٹنوں کو تصاویر سے نیچے دائیں بائیں رکھ دیں۔تصویر دیکھیں۔

 

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

ٹوٹکا: اپنے فوٹو البم کو مزید دلکش اور خوبصورت بنانے کے لئے آپ فلیش ویب ڈیزائننگ کورس کے حصہ ۲ کے مطابق ماسک لےئر کے ذریعے تصاویر کے گرد ایک ماسک بنا سکتے ہیں جس کی مدد سے تصویر کو ایک ’’گول کھڑکی‘‘ سے دکھائیں۔ مثال کے طور پر تصویر ملاحظہ کریں۔

٭۔ ۔ ۔ اب آپ Next Button پر رائٹ کلک کر کے ایکشن پینل کھولیں اور اس میں مندرجہ ذیل ایکشن اسکرپٹ ٹائپ کر دیں۔

٭۔ ۔ ۔ بالکل اسی طرح Previous Button کے ایکشن پینل میں مندرجہ ذیل ایکشن اسکرپٹ ٹائپ کر دیں۔

 

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

نئی Content لیئر تیار کرنا:
٭۔ ۔ ۔ اب آپEdit>Document کے ذریعے سمبل ایڈیٹنگ موڈ سے دوبارہ Main Timeline(Scene 1) پر واپس آ جائیں۔

٭۔ ۔ ۔ یہاں آپ ایک اور نئی لیئر بنائیں اور اس کا نام contentرکھ دیں۔ اس لیئر کو marker لیئرسے نیچے رکھیں۔

٭۔ ۔ ۔ اس نئی لیئر کے frame 30 یعنی photo نامی فریم لیبل کے نیچے ایک کی فریم کا اضافہ کریں۔

٭۔ ۔ ۔ اب آپ کی بورڈ پر F11 دبا کر لائبریری پینل کھولیں اور photo_mc مووی کلپ کو ڈریگ کر کے اسٹیج کے درمیان میں بائیں جانب رکھیں۔اس کے علاوہ Timeline میں frame 40 میں کی بورڈ پر F7 دبا کر ایک Blank Keyframe ڈال دیں ۔ اس سے ہوگا یہ کہ ہماری فوٹو سلائیڈ شو والی مووی کلپ صرف Photo Gallery سیکشن ہی میں دکھائی دے گی ، جہاں اُسے دکھائی دینا چاہئے۔تصویر ملاحظہ ہو!

 

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

فوٹو مووی کلپ میں Description Text کا اضافہ کرنا:
آپ نے فوٹو سلائیڈ شو تو تیار کر لیا مگر اس میں ابھی بھی ایک چیز کی کمی ہے اور وہ ہے تصاویر کی تفصیل یعنی وہ تصاویر کس کی ہیں ؟ اور کہاں کی ہیں؟ وغیرہ۔ ۔ ۔ ویسے یہ بہت ضروری تو نہیں ہے مگر اس کے بغیر ہماری فوٹو گیلری تفصیل کی محتاج رہے گی!
٭۔ ۔ ۔ اب آپ photo_mc مووی کلپ پر ڈبل کلک کر کے سمبل ایڈیٹنگ موڈ میں داخل ہوں۔اب وہاں ایک نئی لیئر description کے نام سے بنائیں اور اسے buttons لیئر سے نیچے رکھیں۔

Dynamic Text Field تیار کرنا:
٭۔ ۔ ۔ اب اس لیئر میں Text Tool(T)کی مدد سے ایک Dynamic Text Field ڈریگ کر کے بنائیں ۔ اسے بالکل تصویر کے مطابق ڈرا کریں اور Properties بھی وہی رکھیں۔

 

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

٭۔ ۔ ۔ ٹیکسٹ باکس ڈرا کرنے کے بعد اسے سیلیکٹ کیے ہوئے Properties Panel میں Character بٹن پر کلک کریں اور تصویر کے مطابق All Characters پر کلک کر کے Done کر دیں۔ اس سے وہ فونٹ فلیش مووی میں امبیڈ ہو جائے گا اور ٹیکسٹ صاف ستھرا دکھائی دے گا۔

کاپی پیسٹ کرنا:
٭۔ ۔ ۔ اب آپ کسی بھی ورڈ پروسیسر جیسے Microsoft Word میں کوئی بھی ٹیکسٹ ٹائپ کریں اور وہاں سے اس ٹیکسٹ کو کاپی کر کے اس ڈائنیمک ٹیکسٹ باکس میں پیسٹ کر دیں۔

ٹوٹکا: فلیش کے بجائے کسی ورڈ پروسیسر میں ٹیکسٹ ٹائپ کر نے سے ایک فائدہ یہ ہوگا کہ آپ Spelling بھی چیک کر سکیں گے ! ویسے ورژن 8 میں Spell Check کا آپشن بھی موجود ہے!

ScrollBar کمپونینٹ استعمال کرنا:
فلیش میں Component ان بنی بنائی مووی کلپس کو کہتے ہیں جو خود بخود کام کرتی ہیں اور ہم انہیں کسی بھی فلیش ڈاکیومنٹ میں با آسانی استعمال کر سکتے ہیں۔ ان کے اندر پہلے سے ایکسن اسکرپٹ موجود ہوتی ہے جو ان مووی کلپس کو کام کرنے میں مدد دیتی ہے۔ اس کے علاوہ ہم ان کمپونینٹس میں تبدیلی بھی کر سکتے ہیں!

 

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

٭۔ ۔ ۔ text_1 ٹیکسٹ فیلڈ میں موجود ٹیکسٹ کو اسکرول کرنے کے لئے ہمیں ScrollBar کمپونینٹ استعمال کرنا ہو گا۔ یہ اطمینان رکھتے ہوئے کہ آپ description لےئر کے فریم 1 میں موجود ہیں ، Components Panel کھولیں اور اس میں موجود ScrollBar کمپونینٹ کو تصویر کے مطابق ٹیکسٹ فلیڈ کے بالکل دائیں جانب ڈریگ کر کے چھوڑ دیں۔اس سے آپ دیکھیں گے کہ اسکرول بار کمپونینٹ ٹیکسٹ فیلڈ میں خود بخود چپک گیا ہے!۔ ۔ ۔ اگر ایسا نہ ہوا ہو تو دوبارہ اس عمل کو دہرائیے اور اس وقت تک آگے نہ بڑھیے جب تک اسکرول بات کمپونینٹ ٹیکسٹ فیلڈ سے چپک نہ جائے!۔ ۔ ۔

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

 

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

ٹیکسٹ فیلڈ کی پروپر ٹیز تبدیل کرنا:
٭۔ ۔ ۔ description لیئر کے frame 2 میں ایک کی فریم کا اضافہ کریں۔ اس سے فریم 1 میں موجود چیزیں فریم 2 میں کاپی ہو جائیں گی۔

٭۔ ۔ ۔ اب Dynamic Text Field کو منتخب کریں اور یہ اطمینان رکھتے ہوئے کہ آپ نے اسکرول بار کمپونینٹ کو نہیں ’’چھیڑا‘‘ ہے، Properties Panel اوپن کریں اور Dynamic Text Field کا Instance Name تبدیل کر کے text_2 رکھ دیں۔ تصویر ملاحظہ کریں۔

٭۔ ۔ ۔ اب ٹیکسٹ فیلڈ میں فریم 1 کا ٹیکسٹ ڈیلیٹ کر دیں اور اس میں حسبِ منشا دوسرا ٹیکسٹ کسی ورڈ پروسیسر سے کاپی کر کے پیسٹ کر دیں۔​

اسکرول بار کمپونینٹ کی پروپرٹیز تبدیل کرنا:
٭۔ ۔ ۔ ایسا کر لینے کے بعد اسکرول بار کمپونینٹ کو منتخب کریں اور پروپرٹیز پینل کھولیں۔ اس میں تصویر کے مطابق text_1 کی جگہtext_2 ٹائپ کر دیں۔​

٭۔ ۔ ۔ اب بالکل اسی طریقے سے جتنے ڈسکرپشن ٹیکسٹ فیلڈ آپ بنانا چاہتے ہیں ، ان کے Intance Names تبدیل کر تے رہیں اور ساتھ ساتھ ان میں موجود ٹیسٹ بھی تبدیل کرتے رہیں۔ ۔ ۔ اسکرول بار کمپونینٹ کی پروپرٹیز بھی اسی مناسبت سے تبدیل کرنا مت بھولیے!۔ ۔ ۔​

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

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

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

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

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

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

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

 

[kutkutariyaan]

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

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