فلیش فلیش میں ڈریگ اینڈ ڈراپ گیم بنائیں!

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

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

فلیش میں ڈریگ اینڈ ڈراپ گیم بنائیں!
MAKING DRAG & DROP GAME IN FLASH​

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

تعارف: کوئی بھی گیم بنانے میں پروگرامنگ کے علاوہ بھی بہت کچھ درکار ہوتا ہے۔یہ کئی چیزوں کا مرکب ہوتا ہے ۔ ۔ ۔ جیسے گیم ڈیزائن ، گیم اور کھلاڑی کے باہمی رابطے کا ڈیزائن ( Interaction Design)، بصری اور صوتی ڈیزائن (Visual & Sound Design) اور اسکرپٹنگ یا پروگرامنگ ۔ ۔ ۔ یہ تمام چیزیں مل کر ایک اچھے گیم کی تخلیق کی ضامن ہوتی ہیں۔​

میکرومیڈیا فلیش میں ہم نہایت آسانی سے سادہ مگر دلچسپ گیم تخلیق کرسکتے ہیں۔آج ہم فلیش میں بچوں کا پسندیدہ shape-matchingگیم بنانا سیکھیں گے جسے فلیش کی زبان میں ڈریگ اینڈ ڈراپ (Drag & Drop)کہتے ہیں۔ ۔ ۔ میرا خیال ہے ہم گیم بنانا شروع کرتے ہیں ۔جیسے جیسے ہم بناتے جائیں گے آپ کو گیم پلان کا اندازہ ہوتا جائے گا۔ ۔ ۔ تو چلیں شروع کرتے ہیں۔​

نوٹ: اس گیم کو بنانے کے لیے آپ کے پاس Macromedia Flash MX or Higherہونا ضروری ہے۔ورژن 5یا اس سے کم میں یہ گیم نہیں بن سکتا! شکریا۔​

گیم بنانے سے پہلے یہ ضرور پڑھ لیں: خیال رہے کہ یہ ٹیوٹوریل لکھتے وقت فرض کر لیا گیا ہے کہ آپ کو فلیش پروگرام کی بنیادی باتوں کا بخوبی علم ہے جس میں نئےSymbols & Layersبنانا،مختلف Panelsکا استعمال ،Libraryکا استعمال،Actions Panelکا استعمال اور سادہ Motion Tween & Shape Tweenبنانا وغیرہ شامل ہے۔اگر آپ فلیش کا بنیادی استعمال نہیں جانتے تو براہِ کرم پہلے فلیش پروگرام کے Help مینو میں موجود Tutorials & Lessonsسے استفادہ حاصل کر لیں ، اس پر عبور حاصل ہونے کے بعد ہی اس ٹیوٹوریل کی آپ کو سمجھ آ سکتی ہے۔ شکریا!​

گیم بنانے کا طریقہ:
۱۔سب سے پہلے فلیش میں ایک نیا ڈاکیومنٹ کھولیں(File>New)۔
۲۔اب Toolsمینو میں سے Oval Toolمنتخب کریں اور پیج (Stage)کے درمیان میں 100[L:4 R:235]100پکسل کا ایک دائرہ(Circle) بنائیں۔یہ آپ Properties Panelکے ذریعے کر سکتے ہیں۔اب اس دائرے کو سیلیکٹ کر کے F8دبائیں۔Convert to Symbol کا ڈائیلاگ باکس کھل جائے گا۔ اس میں آپ مندرجہ ذیل خانہ پری کریں اور OKپر کلک کریں۔​

۳۔اب اس دائرے کے چاروں طرف نیلے رنگ کی چوکور بارڈر بن گئی ہے جس کا مطلب ہے کہ دائرہ اب Movie Clip Symbolمیں تبدیل ہوگیا ہے۔آپ اس دائرے کو سیلیکٹ کر کے Transform Panelمیں مندرجہ ذیل خانہ پری کریں۔​

 

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

۴۔دائرے کا سائز کم ہوجائے تو آپ اسے دوبارہ سیلیکٹ کر کے Properties Panel میں اس دائرے کا> <Instance Name(circle_mc)رکھ دیں۔ایسااس لئے کیا گیا ہے تاکہ جب ہم پروگرامنگ کریں تو دائرے کو اس نام سے پکار سکیں۔تصویردیکھیں۔

۵۔اب آپ کلک کریں(Insert>Layer)۔اس نئی layerمیں آپ Library Panel(F11)سے ایک اور Movie Clip Symbolڈریگ کر کے ڈال دیں۔اس بڑے دائرے کو آپ چھوٹے دائرے سے تھوڑا اوپر کی طرف رکھ دیں اور پہلے بتائے گئے طریقے کے مطابق اس کا سائز Transform Panelکے ذریعے 125%اورProperties Panelمیں اس کا ( circleBig_mc)رکھ دیں۔اسپیلنگ کا دھیان رکھیں۔اُمید ہے آپ کر لیں گے۔تصویر دیکھیں۔​

۶۔اب ایک بالکل نیا Movie Clip Symbolبنائیں(Insert>New Symbol)۔اس Symbolکا Instance Nameآپ statusMessage دیں۔اس Symbolکے اندر آپ چھوٹی سی Animationبنائیں جو "Correct"کا پیغام شو کرے۔اس کا پہلا Frameآپ خالی چھوڑ دیں اور پیغام (یا خوبصورت ایفیکٹ)frame 2 اور اگلے framesمیں بنائیں۔اب اسی Symbolمیں ایک نئی layerبنائیں اور فریم ۲ میں Blank Keyframeڈال کر اس فریم کانام correctرکھ دیں۔اسی طرح ایک اور layerکو Actionsکا نام دے کر اس کے frame1میں کلک کر کے F9دبائیں اور کھلنے والے Actions Panelمیں

[FONT=Courier New][COLOR=blue][B]stop();[/B][/COLOR][/FONT]

کی اسکرپٹنگ کر دیں۔ جیسا کہ تصویر میں دکھایا گیا ہے۔​

 

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

۷۔اب دوبارہ Scene 1میں آجائیں اور Libraryسے اس statusMessageکا ایک Symbolڈریگ کر کے ایک نئی Layerمیں ڈالیں ۔اسے Align Panelکے ذریعے درمیان میں کر دیںاور اس کاآپ status_mcرکھ دیں۔

۸۔اب ہمارا شکلیں بنانے کا کام مکمل ہوگیا ہے اور صرف پروگرامنگ یا اسکرپٹنگ کا کام باقی رہ گیا چنانچہ آئیے اب پروگرامنگ کریں۔ ۔ ۔ اس کے لیے Scence 1میں ایک اورLayerبنائیں اور اسے actionsکا نام دے دیں۔اس کا frame 1سیلیکٹ کر کےF9دبائیں اور Actions Panelمیں Expert Modeمیں جا کر تصویر کے مطابق پروگرامنگ کریں۔

 

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

۹۔جب آپ تمام کوڈ نگ یا پروگرامنگ کر لیں تو Actions Panelمیں موجود Check Syntaxکے بٹن پر کلک کر کے چیک کر لیں کہ کہیں آ پ سے اسکرپٹنگ میں کوئی غلطی تو نہیں ہو گئی؟ اگر ہوئی ہو تو درست کر لیں۔ اس کے علاوہ تینوں Movie Clip Symbolsکے Instance Namesآپ نے رکھے ہیں یا نہیں؟ اسپیلنگ درست ہے یا نہیں؟وغیرہ۔ یہ تمام چیزیں اچھی طرح دیکھ بھال کر چیک کر لیں کیونکہ اگر ذرا بھی غلطی ہوئی تو گیم درست نہیں بن پائے گا۔براہ ِ مہربانی اس بات پر ضرور عمل کریں! ۔ ۔ ۔ شکریا۔

۱۰۔چیکنگ کے بعد اپنی فائل کو محفوظ کر لیں۔اب آپ کا گیم تیار ہے۔ اسے Testکرنے کے لیے کی بورڈ پر Ctrl+Enterدبائیں۔

اگر آپ نے گیم کی تخلیق کے دوران کوئی غلطی نہیں کی ہو گی تو آپ یہ محسوس کریں گے کہ:
جیسے ہی آپ چھوٹا دائرہ ڈریگ کر کے بڑے دائرے کے اوپر ڈالیں گے۔وہ بڑے دائرے کے اوپر پڑا رہ جائے گا اور فوراً "Correct"کا پیغام چل جائے گا۔جبکہ اگر آپ چھوٹے دائرے کو بڑے دائرے سے باہر کہیں ڈالیں گے تو چھوٹا دائرہ واپس اپنی سابقہ جگہ پر پہنچ جائے گا۔

پری ویو کا اسکرین شاٹ​

نوٹ: آپ اسی مثال کو سامنے رکھتے ہوئے مزید شکلیں یا تصویریں بنا سکتے ہیں۔ہر شکل کے لیے الگ الگ

[FONT=Courier New][COLOR=blue][B]onPress()[/B][/COLOR][/FONT]

اور

[FONT=Courier New][COLOR=blue][B]onRelease()[/B][/COLOR][/FONT]

طریقہ استعمال کریں۔اسی طرح اگر آپ چاہیں تو "Correct" پیغام کی طرح "Incorrect" پیغام کی ایفیکٹ بھی بنا سکتے ہیں۔اگر آپ فلیش میں ساؤنڈ کا استعمال بھی جانتے ہیں تو اس سے بھی فائدہ اُٹھاکر آپ اپنے سادہ سے گیم کو مزید متاثر کن اور دلچسپ بنا سکتے ہیں۔


حرفِ آخر:
اُمید ہے آپ کو یہ ٹیوٹوریل پسند آیا ہوگا۔اگر کسی بات کی سمجھ نہ آئی ہو تو براہِ کرم پوچھنے سے مت ہچکچائیے گا۔ یہ ذرا مشکل یاAdvanceٹیوٹوریل ضرور ہے اور اُنھی دوستوں کو سمجھ آئے گا جنھیں فلیش پروگرام کی بنیادی باتوں کا بخوبی علم ہے۔اگر آپ کو یہ ٹیوٹوریل بہت مشکل محسوس ہوا ہے تو براہِ کرم اپنی ریپلائز میں یہ ضرور بتائیں کہ آپ فلیش پروگرام کا کونسا پہلو سمجھنا چاہتے ہیں، انشاء اللہ اگر مجھے علم ہوا تو میں ضرور آپ کی مدد کرنے کی کوشش کرونگا۔لہٰذا ۔ ۔ ۔ رائے سے آگاہ کرنا مت بھولئے گا!شکریا!

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

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

 

[محمد وارث]

ارے واہ شوبی صاحب، کیا زبردست ٹیوٹوریل لکھا ہے آپ نے۔

سمجھ خاک نہیں آیا کہ مجھے آ بھی نہیں سکتا، لیکن آپ کی محنت اور لگن نے دل جیت لیا۔

خوش رہیے، ڈٹے رہیے۔

 

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

ارے واہ شوبی صاحب، کیا زبردست ٹیوٹوریل لکھا ہے آپ نے۔

سمجھ خاک نہیں آیا کہ مجھے آ بھی نہیں سکتا، لیکن آپ کی محنت اور لگن نے دل جیت لیا۔

خوش رہیے، ڈٹے رہیے۔

شکریا جناب۔ مگر آپ یہ بھی تو بتائیں کہ کیوں سمجھ نہیں آ سکتا؟

 

[نبیل]

زبردست شوبی۔

 

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

زبردست شوبی۔

بہت شکریا نبیل بھائی حوصلہ افزائی کرنے کے لئے!

 

[sahil786n]

thanks

رے واہ شوبی صاحب، کیا زبردست ٹیوٹوریل لکھا ہے آپ نے۔

 

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

رے واہ شوبی صاحب، کیا زبردست ٹیوٹوریل لکھا ہے آپ نے۔

بہت شکریا ساحل صاحب!۔۔۔۔۔۔۔۔آپ بھی محفل میں آتے جاتے رہیا کیجئے!

 

[kutkutariyaan]

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

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

 

[ابن سعید]

بہت خوب شعیب بھائی۔ فلیش مبتدیوں کے لئے آپ کی محنت قابل ستائش ہے۔

 

[ابو کاشان]

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

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

اور میری جانب سے بھی