القرب من الماوس بطريقة جميلة

السلام عليكم , درس اليوم عن القرب من الماوس بطريقة جميلة
يعني لورسمت مثلا مربع او كرة , وتريد لهذه الكرة ان تتبع الماوس بطريقة يعني بطيئة وحلوه
شوف مثال الدرس


مثل ما تلاحظون في المثال الكرة تتبع الماوس بطريقة بطيئة
لعمل هذه الحركة ,
1)- نرسم شكل , اي شكل نريد " مربع , دائرة " الي نريده



2)- نجمع الشكل في سبرايت

)- نسمي السبرايت بأسم mbo مثلا

4)- نجمع السبرايت mbo في سبرايت اخر ونسمي بحيث يصبح مثل الشكل التالي

5)- الان نذهب الى نافذة السكربت تبع السبرايت ونضيف هذا الكود

الكود:

onEnterFrame() {
difY = _ymouse - mbo._y;
difX = _xmouse - mbo._x;
speedY = difY * 0.3;
speedX = difX * 0.3;
mbo._y = mbo._y + speedY;
mbo._x = mbo._x + speedX;
}

جرب العمل واكيد راح يشتغل معك
الأن راح اشرحلك الكود الى في الاعلى
اولا ناخذ بداية الكود وهي جملة

onEnterFrame() { }

في معناها تعني عند اي فريم با الفلاش
لكن هذه الجملة مهمه جدا عشان الكود وراح ابين لك اهميتها في نهاية الكود
الان خلينا نبعد شوية عن الكود وعن السويش وندخل شوية با الرياضيات ^_^
في بعض المسائل في الرياضيات , وخصوصا ً في الهندسة , يعطيك مسئلة ويقول لك
مثلا , أثبت ان المستقيم ل1 // ل2 " المستقيم ل1 يوازي المستقيم ل2"
ويعطيك قانون على اساسة تثبت هذه المعادلة
وفي اغلب الاحيان يكون الحل يبدء با الفرضيات , مثلا نقول :
نفرض أن ل1 = 5 , أذن لابد أن ل2 = 5
اها الحين نرجع لدرسنا , نحن الان عدنا معادلة , وهي الشكل الموجود داخل السبرايت mbo
والماوس , نريد الان أن نجعل السبرايت يلحق الماوس حيث ماراح وحيث ما جاء
راح نستخدم مصطلحين ثابتين لايمكن تغييرهما وهما : X , _Y_
هذان يعبران عن المحور الصادي والسيني ,
لتعرف اكثر عن هذا المحوران اطلع على هذا الموضوع
شرح المحاور (Y) , (X)
الدرس هذا بسيط جدا , وراح افصله تفصيل راح تفهمه انشاء الله
اولا قبل لا ندخل با الدرس , خلونا نرجع للمدرسة شوية ^_^ " مشتاق للمدرسة "
وبا الذات في الرياضيات " صدمه "
كلنا نعرف في الهندسة ان هناك محورين لا ثالث لهما هما المحور السيني والمحور الصادي
شوف هذه الصورة وراح تفهم قصدي

نحن ندرس الرياضيات با اللغة العربية ونرمز للمحور السيني بـ " س " والمحور الصادي بـ " ص "
لكن با اللغة الانجليزية يرمزون للمحور السيني بـ " X " والمحور الصادي بـ " Y "
وبما انو نحن نعمل على الكمبيوتر وعلى برنامج با اللغة الانجليزية لذلك لا بد ان نستغني عن لغتنا العربية شوية
, أذن من الان وصاعد اذا شرف الرمز " Y " انت عارف ايش يقصد , والرمز " X " انت ادرى به
هذا با النسبة للرياضيات في المدراس , اما على برنامج السويش وفي البرمجة با الأكشن سكربت
الامر لا يختلف كثير , المحور السيني يرمز له بـ " Y_ " والصادي " X_ "
لاحظ الشرطه " _ " قبل الرمزين , هكذا يعبر عن المحورين في البرمجة في السويش , وفي لغة الاكشن سكربت بشكل عام
الأن راح اعطيك مثال با الرياضيات , المثال يقول :
عبر عن النقطه " mbo " في مخطط بياني با القيم التالية :
Y = 3 , X = 5
طبعا الحل سهل جدا شوف الحل في هذه الصورة

حلو الان هذا شرحنا كله هو استذكار للرياضيات في المدرسة , الان نجي وندخل على السويش ماكس , وفي التطبيق العملي
لو لاحظت في برنامج السويش وعلى اطراف مساحة العمل راح تلقى ارقام بشكل عمودي وافقي , تبدء من الصفر والى مالا نهاية
طبعا الأرقام با الشكل العمودي تمثل المحور " Y " والأرقام با الشكل الأفقي تمثل المحور " X "

لو لاحظنا في اسفل البرنامج وعلى اليمين راح نلقى ارقام تتغير بحسب مكان الماوس
هذه الارقام تمثل المحورين X , Y

الان جرب وارسم مربع على مساحه العمل , سمية بأسم mbo مثلا , مع تفعيل خيار target

اجعل المربع في يمين مساحة العمل بهذا الشكل :

الان نفتح نافذة السكربت للمشهد Scene_1 , ونكتب هذا الكود بعد امر
onEnterFrame() {
}طبعا عند كتابة الكود في السويش لا بدا أن يبدء بأحد اوامر Frame

وبعد احد الاوامر نكتب ما نريد من اكواد , نحن الان راح نستخدم الامر onEnterFrame
لا تسئلني لماذا هذا الأمر يبغاله شرح تاني
الان نحول نافذة السكربت اذا كانت Gudid الىExpert

ونكتب هذا الكود

mbo._Y = 0
اولا كلمة mbo ترمز للمربع , لانو نحن أسمينا المربع بأسم mbo , حتى يكون له رمز نكتبه با الكود
والرمز " Y_ " معروف ايش معناه ولا حظ النقطه بين mbo و Y_
هذه النقطه للربط ,
نستنج ذلك عندما نريد ان نضع اي شكل او اي سبرايت على محور بقيمة معينة اولا نكتب اسم الشكل ثم نتبعه
بنقظه ثم نكتب نوع المحور " Y أو X " ثم نضع القيمة القيمة بعد علامة =
الكود با الشكل النهائي راح يكون كذا


onEnterFrame() {
mbo._y=0;
}

الان جرب واعمل معاينة للفلاش وشوف هل يبقى المربع على المكان الى وضعته انت عليه ام يتغير
اكيد راح تلاحظ انه صعد للأعلى ,
نحنا عملنا قيمة المربع على المحور " Y "
الان انت من خلال فهمك للدرس حاول انك تعمله على المحور " X "

حاول تعمل تطبيقات عدة وغير في كل مره تعمل فيها التطبيق , وشوف النتائج ,

هذا با النسبة للأشكال , اما با النسبة للماوس يكتب اولا المحور ثم يتبع بكلمة " mouse "
مثل كذا " Xmouse_ "
طبعا هذا على المحور " X " والمحور " Y " بدل X نحط Y فيصير
" Ymouse_"
الان لو رحنا على نافذة السكربت للمشهد Scene
وكتبنا هذا الكود بعد الجملة onEnterFrame
كتبنا
mbo._x = _xmouse
الكود النهائي بيكون :

onEnterFrame() {
mbo._x=_xmouse;
}


طبعا لو ركزت في الكود واضح من مكتوبه , واذا انت ركزت في الشرح راح تفهم معناه

حلو لغاية كذا نكون انتهينا من الدرس , وراح اعطيكم تمرين ^_^
تمرين سهل جدا يدل على فهمك للدرس
التمرين يقول :
ارسم مربع صغير , واجعله يتبع الماوس
كما يوضح لك المثال التالي

المثال في العرض على الموقع مخربط
حمله عندك وشوفه
لتحميل المثال أضغط يمين الماوس هنا ثم حفظ بأسم
نحن الان نريد لـ السبرايت mbo يتساوي مع الماوس
طبعا التساوي راح يكون على المحاور " Y " , " X "
في هذه الجملة من الكود
difY = _ymouse - mbo._y
افترضنا قيمة وهي تمثلها كلمة " difY "
هذه القيمة تساوي
_ymouse - mbo._y
وتعني عملية رياضياتيه ^_^
ymouse تعبر عن المحور الصادي للماوس
mbo._y تعبر عن المحور الصادي للسبرايت mbo
لو ترجمنها ممكن نقول
difY = المحور الصادي للماوس - المحور الصادي للسبرايت mbo
حيث difY قيمة نحن افترضناها
ايضا الجملة
difX = _xmouse - mbo._x
معناها نفس الكلام الى فوق بس على المحور السيني الى هو " X "
هذه الجملة
speedY = difY * 0.3
ايضا افتراضية نحن افترضنا قيمة وسميناها speedY
ولو ركزت في الجملة شوية راح تفهمها على طول
حيث speedY = ناتج طرح المحور الصادي للماوس من المحور الصادي للسبرايت mbo
ولذي سمينا هذه المعادلة با difY
اذاdifY = speedY مضروب في " 0.3 "
هذه الاشارة " * " تعبر عن الضرب
وهذه الجملة في الكود
speedX = difX * 0.3;
نفس الكلام الى فوق بس على المحور الصادي " Y "
اما هذه الجملة
mbo._y = mbo._y + speedY
اعتقد انها واضحه
تعني ان السبرايت mbo على محوره الصادي يساوي
نفسه زائد قيمة speedY
وقيمة speedY مشروحه فوق
ايضا هذه الجملة
mbo._x = mbo._x + speedX;
تعني الجملة سابقتها بس على المحور السيني " X "

الية عمل هو اولا , مثلا كان السبرايت على محوره الصادي =50 وعلى المحور السيني = 20
mbo._y = 50 , mbo._x = 20
وكان الماوس على المحور الصادي = 130 وعلى المحور السيني = 110
xmouse = 110 , _ymouse = 120_
الغرض من الكود الى فوق هو ان يساوي السبرايت mbo الماوس على محوريه السيني والصادي
تعال نحسب في الجملة الاولى :
difY = _ymouse - mbo._y
نعوض عن القيم با الارقام , راح يكون با الشكل التالي
difY = 130 - 50
ناتجه معروف هو 80
وفي هذه الجملة
difX = _xmouse - mbo._x
نعوض عن القيم با الارقام , راح يكون با الشكل التالي
difX = 110 - 20
الناتج راح يكون 90
وفي هذه الجملة
speedY = difY * 0.3
نعوض عن القيم با الارقام , راح يكون با الشكل التالي
speedY = 80 * 0.3
والناتج راح يكون 24
والجملة التي تليها
speedX = difX * 0.3
نعوض عن القيم با الارقام , راح يكون با الشكل التالي
peedX = 90 * 0.3
الناتج راح يكون 27
الان من العمليات السابقة طلعت لنا النتائج التالية:
difY = 80 , difX = 90
speedY = 24 , speedX = 27
وفي الجملة التالية:
mbo._y = mbo._y + speedY
نعوض عن القيم با الارقام , راح يكون با الشكل التالي
mbo._y = 50 + 24
الناتج راح يساوي 74
والجملة التي تليها :
mbo._x = mbo._x + speedX
نعوض عن القيم با الارقام , راح يكون با الشكل التالي
mbo._x = 110 + 27
والناتج راح يكون 137

وراح نطلع من المعادلة با النتائجة التالية :
mbo._x = 137 , mbo._y = 74
وهذه النتائجة لا تتساوى ابدا مع الماوس
فهل الكود خاطئ , طبعا لا
الان هنا يأتي اهمية الجملة الأولى
onEnterFrame() { }
فائدة هذه الجملة انها تعيد العملة مرات عدة الى ان يتساوي
المحور الصادي والسيني للسبرايت مع المحور الصادي والسيني للماوس , اي ان :
mbo._x = _xmouse , mbo._y = _ymouse
وفي كل عملية حسابية تتغير قيمة mbo._x و قيمة mbo._y
في العملية الاولى والتي حسبناها نحن كانت النتائج با الأعلى
واذا حسب المسئلة مره اخرى با القيم الجديدة , راح تتطلع لك نتائج جديدة
وتعيد الحساب مره اخرى , الى ان يتساوى الطرفين وهنا تصبح قيمة المسئلة = صفر
وهنا تكمن اهمية onEnterFrame() { } , في تكراك العملية الحسابية

ارجو ان تكون الفكرة وصلة , طبعا هذا الكود بسيط جدا ابسط ما تتصور , وابسط من هذا الكلام كله
بس حبيت افصل فيه اكثر عشان اخواني المبتدئين يفهمون ايش يعملون , و ليس نسخ ولص من غير فهم
النسخ واللصق العشوائي والتقليد الأعمى لا ينتج الأبداع

اعذروني على الاطالة