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

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

logo.gif

حصّہ اوّل....PART 1
اُردو ویب کے عزیز ممبرز!....السلام علیکم!

”فلیش ویب ڈیزائننگ“ کورس کے حصہ اوّل میں خوش آمدید!....
انشاءاللہ !....کورس کے پہلے حصے میں آپ سیکھیں گے:
٭....فلیش ویب سائٹ کی بنیادی تھیم کا فیصلہ کرنا
٭....ویب سائٹ پروجیکٹ کا پلان مرتب کرنا
٭.... فلیش ڈاکیومنٹ کی خصوصیات (Properties) طے کرنا
٭....فلیش میں keyframe، layer،frame، frame labelاور frame comment بنانا
٭....Action Panel میں ایکشن اسکرپٹنگ کرنا

لیجئے جناب !....اس کورس کا باقائدہ آغاز آج سے کر دیا گیا ہے۔ اس سے پہلے کہ ہم اپنے فلیش پروجیکٹ کا آغاز کریں ، ہمیں یہ معلوم ہونا چاہئے کہ ہم اس فلیش پروجیکٹ کے ذریعے کیا پیغام دینا چاہ رہے ہیں؟....ہماری ویب سائٹ کی بنیادی تھیم کیا ہے؟....کیا یہ ایک مکمل فلیش بیسڈ سائٹ ہے؟....یا پھر ہم ایک روایتی HTMLسائٹ میں فلیش کا ”تڑکا“ لگانا چاہ رہے ہیں؟....ظاہر ہے کہ ہم ابھی فلیش کا کورس کر رہے ہیں لہٰذا اس کورس کے دوران ہمارا پورا فوکس فلیش پر ہی رہے گا۔

مگر ہمیں یہ نہیں بھولنا چاہئے کہ فلیش ویب سائٹ اس وقت تک بے کار ہے ،جب تک ہم اسے کسی HTML ویب پیج میں embed نہ کردیں اور یہ بھی کہ ہماری ویب سائٹ کو دیکھنے کے لئے ایک خصوصی فلیش پلگ اِن ویب براؤزر میں موجود ہونا ضروری ہے، جسے ”Flash Player “ کہتے ہیں۔کہنے کا مقصد یہ ہے کہ فلیش ویب ڈیزائننگ اپنے درست استعمال کے لئے روایتی ویب ڈیزائننگ کی محتاج ہے۔ لہٰذا یہ ضروری ہے کہ آپ کو روایتی ویب ڈیزائننگ جیسے HTML یا فرنٹ پیج وغیرہ کی بھی شُدبُد ہو۔ اس طرح آپ اپنی فلیش ویب ڈیزائننگ کو روایتی ویب ڈیزائننگ کے حسین امتزاج کے ساتھ” ایک شاہکار“ بنانے کے قابل ہو سکتے ہیں!

نوٹ: روایتی ویب ڈیزائننگ کے کورسز جیسے HTML اور فرنٹ پیج انٹرنیٹ پر موجود ہیں۔ آپ ساتھ ساتھ ان سے بھی استفادہ حاصل کریں۔ ساتھ ساتھ اگر آپ کور ل ڈرا ، ان پیج اور فوٹوشاپ کے کورسز بھی کر لیں تو یقین جانئے کہ آپ کو فلیش پروجیکٹ کے دوران بہت فائدہ ہو گا!
 
ویب سائٹ پروجیکٹ کا پلان مرتب کرنا: جب آپ ہہ طے کر لیں کہ آپ کی ویب سائٹ کی بنیادی تھیم کیا ہوگی؟ ....اور آپ اپنی سائٹ کے ذریعے کیا پیغام پہنچانا چاہ رہے ہیں ؟....تو اس کے بعد آپ کو اپنی ویب سائٹ کا ایک جامع نقشہ یا پلان مرتب کرنا چاہئے۔کیونکہ یہ بہت ضروری ہے کہ ہر فلیش پروجیکٹ شروع کرنے سے پہلے آپ اپنے پروجیکٹ کا گراؤنڈ ورک ضرور کر لیں۔ گراؤنڈ ورک میں اپنی ویب سائٹ فلو چارٹ یا نقشے کے ذریعے سائٹ کا بنیادی”ڈھانچہ“ تیار کرنا شامل ہے۔ یعنی آپ اپنی سائٹ کے کتنے سیکشنز یا حصّے بنانا چاہتے ہیں....اپنے نقشے میں اس امر کا بھی فیصلہ کر لیں کہ آپ کی سائٹ کا مواد یا Content آپ کی سائٹ کے وزیٹرز کو کیسے دکھائی دے گا؟....آپ کی سائٹ میں وہ کیسے گھوم پھر (Navigate) سکیں گے؟....آپ کی سائٹ کی ہیئت کیسی ہو گی؟....یہ اس لیے بھی ضروری ہے کہ اس سے آپ کو اپنی ویب سائٹ کی ڈیزائننگ کی خوبیوں اور خامیوں کا بھی علم ہو جائے گا اور آپ بہتر طور پر اپنی ویب سائٹ تخلیق کر سکیں گے!

ٹوٹکا: بہتر رہے گا کہ آپ اپنی ویب سائٹ کا بنیادی ڈھانچہ ایک کاغذ پر پینسل کی مدد سے بنا لیں یا اگر آپ چاہیں تو فلوچارٹ سافٹ ویئر یا کوئی بھی دوسرا گرافکس سافٹ ویئر اس کام کے لئے استعمال کر لیں۔

کورس کو تھوڑی مدّت میں مکمل کرنے کے لئے میں آپ کو ایک پرسنل فلیش ویب سائٹ بنانا سکھاؤں گا تاکہ آپ تھوڑے وقت میں زیادہ سے زیادہ فلیش کے بارے میں جان سکیں۔(انشاءاللہ!)....ہماری اس سائٹ کے پانچ سیکشنز یا حصے ہونگے جو کہ مندرجہ ذیل فلو چارٹ میں دکھائی دے رہے ہیں!

flowchart_flash_course.png
 
خبردار!: انشاءاللہ میں آپ کو مندرجہ بالا تمام سیکشنز کو فلیش میں مکمل بنانا سکھاؤں گا!....مگر آپ سے گزارش ہے کہ اس سلسلے میں جلد بازی کا ہر گز مظاہرہ نہ کریں اور جتنا بہت بھی میں اس کورس کے ایک حصے (Part) میں آپ کو سکھاؤں ، آپ اس کی اچھی طرح پریکٹس کریں اور کورس کے اگلے حصے کا انتظار کریں....شکریا!

فلیش ڈاکیومنٹ کی خصوصیات (Properties) طے کرنا: چارٹ کی تیاری کے بعد آپ کو اپنے فلیش ڈاکیومنٹ کی خصوصیات مثلاََ فریم ریٹ، سائز اور کلر کا انتخاب کرنا ہوگا۔ یہ فیصلہ آپ کو اس لیے کرنا ہوگا تاکہ بعد میں آپ کو کہیں کوئی تبدیلی کرنی پڑی تو آپ کو ہر چیز نئے سرے سے کرنی پڑے گی، اس لئے اس کا ابھی سے انتخاب ضروری ہے۔آئیے اب عملی کام کا آغاز کرتے ہیں!....

٭....سب سے پہلے فلیش پروگرام چلائیں اور File>Newیا کی بورڈ پر شارٹ کٹ کی (Ctrl+N) دبا کر ایک نیا فلیش ڈاکیومنٹ کھول لیں۔
٭....اب Modify>Document یا (Ctrl+J) دبا کر Document Properties کا ڈائیلاگ باکس اوپن کر لیں اور اس میں تصویر کے مطابق خانہ پری کریں۔

lesson1_shot1.png
 
Keyframes کے ذریعے مختلف سیکشنز کے فریم لیبل بنانا: فلیش ڈاکیومنٹ کی خصوصیات طے کرنے کے بعد آپ Timeline میں اپنی ویب سائٹ کے مختلف سیکشنز کے نام رکھیں گے ، جسے فلیش کی زبان میں ”فریم لیبل (Frame Label) کہتے ہیں۔ چونکہ ہماری اس پروجیکٹ فلیش ویب سائٹ کے پانچ سیکشنز ہیں، اس لئے ہم Timeline میں مختلف کی فریمز میں فریم لیبل بنائیں گے جو ہماری ویب سائٹ کے مختلف سیکشنز کو ظاہر کریں گے....تو آئیے بناتے ہیں!

٭....Timeline میں دائیں طرف موجود جہاں Layer 1 لکھا ہے ، وہاں ڈبل کلک کر کے labels ٹائپ کر دیں۔
٭....اب Arrow Tool(V) کی مدد سے frame 10کو منتخب کریں اور کی بورڈ پر F6
دبا دیں۔ اس طرح وہاں ایک keyframe بن جائے گا جوایک سفید دائرے کی صورت میں ہوگا۔

ٹوٹکا: اپنے فلیش مواد (Content) کے شروع ہونے سے قبل ہمیشہ چند خالی فریمز ضرور چھوڑیں تاکہ بعد میں اگر آپ کوئی ایفیکٹ یا Preloader وغیرہ ڈالنا چاہیں تو اس کے لیے خالی جگہ موجود ہو۔

٭....Frame 10 کو سیلیکٹ کیے ہوئے Properties Inspector کھولیں اور Frame Label کے خانے میں intro ٹائپ کریں۔ ٹائپ کرنے کے بعد کی بورڈ پر اینٹر دبا دیں۔آپ دیکھیں گے کہ اس طرح کرنے سے Timeline میں frame 10 پر فریم لیبل نظر آنے لگے گا۔
٭....بالکل اسی طرح frames 20، 30،40اور 50 میں بھی بالترتیب about، photo،links اور contactفریم لیبل بنالیں۔
٭....اب فریم 60 سیلیکٹ کریں اور کی بورڈ پر F5 دبا دیں۔ اس طرح آپ کے تما م فریم لیبلز Timeline میں نظر آنے لگیں گے۔اسے ”frame ڈالنا “کہتے ہیں۔تصویر دیکھیے!

lesson1_shot2.png
 
٭....اب آپ Timeline میں تین اور layers (Insert>Layer) بنا لیں اور ان کے بالترتیب actions، headingاور background نام رکھ لیں۔ ان تینوں layers کو آپ ڈریگ کر کے labels سے نیچے رکھ دیں۔
٭....اب آپ actions لیئر میں frame 10 میں ایک keyframe بنا لیں اور اُس کی فریم میں رائٹ کلک کر کے Actions منتخب کر لیں یا پھر کی بورڈ پر F9 دبا کر Action Panel کھول لیں۔
٭....اب کھلنے والے ایکشن پینل میں آپ stop(); ٹائپ کر دیں۔

٭....اب Action Panel بند کر دیں اور actions لیئر کے frame 10 میں رہتے ہوئے Properties Panel میں Frame Label کے خانے میں //stop ٹائپ کر دیں۔// سے فریم لیبل فریم کومنٹ(comment) میں تبدیل ہو جائے گا۔ فریم کومنٹ سے ہمیں اپنے پروجیکٹ کو سمجھنے میں آسانی رہے گی اور ہمیں پتا چلتا رہے گا کہ ”کہاں کیا ہو رہا ہے“۔
٭....آپ کا Timeline اب اس طرح دکھائی دینا چاہئے۔

lesson1_shot3.png

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

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

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

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

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


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

Attachments

  • main_100.zip
    21.4 KB · مناظر: 43

فخرنوید

محفلین
٭....Frame 10 کو سیلیکٹ کیے ہوئے Properties Inspector کھولیں


پراپرٹیز انسپکٹر کس آپشن میں موجود ہے جناب
 
جناب پروپرٹیز پینل فلیش میں Window مینو میں موجود ہوتا ہے۔ یہ عام طور پر کھلا ہوتا ہے۔ اگر کسی وجہ سے بند ہو تو Ctrl+F3 کی بورڈ پر دبا کر ظاہر کیا جا سکتا ہے!
 

kutkutariyaan

محفلین
ما شا اللہ بہت ہی اچھی اور کامیاب شیئرنگ کی آپ نے۔۔۔۔

میری جانب سے ’’ شکریہ‘‘ کا نظرانہ قبول کریں۔۔۔

اّمید کرتے ہیں کہ آپ اِس سلسلے کو جاری و ساری رکھیں گے۔۔۔۔
 
Top