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

    شاطر
    avatar
    ملاك
    Admin

    عدد المساهمات : 14
    نقاط : 32003
    السٌّمعَة : 0
    تاريخ التسجيل : 15/12/2008

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

    مُساهمة من طرف ملاك في الأربعاء يناير 07, 2009 3:18 pm

    السلام عليكم

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


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


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



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



    3)- نسمي السبرايت بأسم 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)
    نحن الان نريد لـ السبرايت 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() { } , في تكراك العملية الحسابية

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

      الوقت/التاريخ الآن هو الأربعاء سبتمبر 20, 2017 8:28 am