[ د - م - 14 | 6 ] دورة في أساسيات فلاش - الدرس السادس

[Diamond mas]

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

حياكم الله أيها الإخوة والأخوات مجدداً وأهلاً ومرحباً بكم في الدرس السادس من هذه الدورة المبسطة.
كما أشرنا في درس سابق سننهي هذه الدورة في ثمانية دورس بإذن الله،
ولن يكون الدرس الثامن درساً تعليمياً بقدر ما سيكون تطبيقاً ختامياً للدورة، نوضح فيه كيفية صناعة جسم مبسطة للعبة الفلاشية التي أشرت إليها في مقدمة الدورة.
بإذن الله، بعد صناعة جسم اللعبة سأنشر الكود البرمجي لها وسأوضح كيفية ربط الكود مع الجسم للخروج بالشكل النهائي للعبة.

في مراجعة سريعة للدرس الخامس (http://www.mexat.com/vb/threads/1062148) أذكِّركم ببعض المقتطفات:
شاهدنا في الدرس السابق كيف يتم تدعيم عروض فلاش بالأصوات والصور وتعرفنا على آلية استيراد ملفات فوتوشوب (PSD) والخيارات المتاحة بهذا الخصوص.

تعرفنا أيضاً على ما يُسمى بالرموز (Symbols) وما هي الرموز الثلاثة التي يوفرها لنا البرنامج؛ فتعرفنا على اللقطات الحركية (Movie Clips) والأزرار (Buttons) والرسوم الجرافيكية (Graphics).

وفي نهاية الدرس شاهدتم فيديو يوضح كيفية صناعة لقطة حركية وتوظيفها لصناعة مشهداً لرجال تسير على المسرح.




[[في هذا الدرس]]




سنظهر بعضاً من قوة فلاش في صناعة الحركات، فبعد أن عرفنا مقدار صعوبة صناعة مشهد إذا ما قمنا برسمه إطاراً بإطار..
سنتعرف على تقنية الحركة البينية (Motion Tween) التي يوفرها فلاش ليسهل على المصممين صناعة المشاهد،
ففي هذه التقنية يقوم المصمم بتحديد العنصر الذي ستحدث عليه الحركة وتحديد وضعية الجسم عند ابتداء الحركة ووضعيته عند انتهاء الحركة فقط ويقوم البرنامج بالباقي،
فيقوم فلاش برسم كافة الإطارات البينية -- بين ابتداء الحركة وانتهائها-- لإنتاج حركة منتظمة في أقل وقت وجهد.


أقسام هذا الدرس:




الحركة البينية مقابل التحريك إطار بإطار
في هذه الفقرة سنتعلم تقنية الحركة البينية (Motion Tween) وسنشاهد بالفيديو مدى سهولة صناعة مشهد سقوط الكرة عن درج القبو باستخدام الحركة البينية مقارنة مع ما شاهدناه في الدرس الرابع.

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

تطبيق الدرس
تطبيق ما جاء في هذا الدرس.




http://www.mexat.com/vb/attachment.php?attachmentid=1813144&d=1358680486 (http://www.mexat.com/vb/threads/1054393)

[Diamond mas]

[[ الحركة البينية مقابل التحريك إطار بإطار ]]




في صناعة الرسوم المتحركة الكلاسيكية كان يوجد نوعان من الرسامين؛
رسام رئيسي يقوم برسم الصور الرئيسية من المشاهد المتحركة، ورسام البين بين (Inbetweener).
فلو عدنا لمشهد الكرة النطاطة الذي قمنا بصناعته في الدرس الرابع وحللنا الصور الرئيسية لكانت كالتالي:
- كرة في الأعلى تبدأ بالسقوط.
- الكرة ترتد عن الدرجة الأولى، الكرة ترتد عن الدرجة الثانية، الكرة ترتد عن الدرجة الثالثة... إلى أن تصل الكرة إلى حالة الاستقرار أسفل الدرج.

يقوم الرسام الرئيسي برسم تلك الصور وينتهي دوره هناك،
بعد ذلك يبدأ عمل رسام البين بين ليقوم برسم الصور التي تظهر الحركة بين الصور الرئيسية التي رسمها الرسام الرئيسي،
حيث يقوم برسم عددٍ كافٍ من الصور التي تظهر سقوط الكرة بشكل تدرجي لتظهر على نحو مناسب عند عرضها بسرعة.

في فلاش نحن هم الرسامون الرئيسيون وفلاش يقوم بصناعة الصور البينية (Inbetweening أو tweening).. أي بدور رسام البين بين.
تتوفر في فلاش تقنية اسمها الحركة البينية (Motion Tween) التي من خلالها يعطينا الفرصة لأن نكون الرسامين الرئيسيين، نرسم الصور الرئيسية وهو يقوم بالبينية.
الجدير بالذكر حول هذه التقنية أنها مخصصة لتحريك الأجسام وتغيير بعض خصائصها وليست لتغيير شكلها..
فلو استخدمنا هذه التقنية على كرة بإمكاننا تعديل مكانها وحجمها وشفافيتها وبعض الخصائص الأخرى التي سنتعرف على جزء منها في الفقرة القادمة.

لكن ما لا يمكن صنعه باستخدام هذه التقنية هو تعديل شكل الكرة إلى مربع مثلاً.. أو إظهار نتوء بداخلها يتسع حتى يشقها بالكامل،
في الواقع لا يمكن استخدام هذه التقنية لتغيير الأشكال، لتغيير الأشكال يمكننا استخدام تقنية أخرى اسمها تحويل الأشكال (Shape Tween) وسنتعرف عليها في الدرس القادم.


كيف يمكننا صنع مشهداً باستخدام الحركة البينية؟
كما أشرت قبل قليل هذه التقنية تستخدم للتعديل على خصائص الأجسام ولا تستخدم على الأشكال،
ما أعنيه هو أننا لا نستطيع تحريك أي جسيم إن لم يكن رمزاً (Symbol) من رموز فلاش الثلاثة..
لهذا لصنع حركة بينية علينا تحويل الجسم الذي نرغب بتحريكه إلى رمز.. ومع أننا نستطيع تحريك الأزرار إلا أنه في غالب الأحيان لا يكون ذلك منطقياً،
لهذا يجب تحويل الأجسام إلى لقطات حركية (Movie Clips) أو رسوم جرافيكية (Graphics) لتطبيق الحركة البينية عليها.


نعود الآن بشكل واقعي إلى المشهد الذي رسمناه في الدرس الرابع، شاهدوا الفيديو التالي لكن قبل ذلك هذه بعض الملاحظات:
- يجب أن يكون كل جسم متحرك على طبقة منفصلة حتى نتمكن من التحكم في حركته.
- يتم تحديد الإطار الأول من مشهد الجسم المتحرك عن طريق الضغط عليه بالزر الأيمن للفأرة واختيار (Create Motion Tween)
- يتم تحديد الصور الرئيسية التي نرغب من فلاش برسم صورٍ بينية لها عن طريق تحديد مكان تلك الصور على شريط الزمن ثم تغيير خصائص الأجسام بالشكل المطلوب.

لا بد وأن الشرح كان طويلاً.. لا مزيد من الكلام وأترككم مع الفيديو


http://www.youtube.com/watch?v=jYMolbvDSXA

[Diamond mas]

[[ نماذج الحركة البينية ]]




يمكن تطبيق الحركة البينية على عدة خصائص من خصائص الأجسام، ومن تلك الخصائص:
- موقع الجسم على مسرح العمل.
- مساحة الجسم وانحرافه أو انبعاجه.
- دوران الجسم.
- لون الجسم وشفافيته أو صبغته.

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

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


http://www.youtube.com/watch?v=P4QKUDKmfEM

[Diamond mas]

[[ تطبيق الدرس ]]




تطبيقنا لهذا الدرس مبني على ما تعلمناه في هذا الدرس وسأطلب منكم اليوم صناعة مشهد لشهاب يشتعل في السماء ثم يحترق ويتلاشى،
لمشاهدة تطبيقي ---الذي قمت به بشكل سريع :مرتبك:--- تفضلوا (هنا (http://justuni.freehostia.com/demos/view/92776537))

وكما أقول دائماً.. ليس عليكم الالتزام بهذا التطبيق بل أتمنى أن تظهروا إبتكاراتكم ولمساتكم الخاصة :أوو:

[Diamond mas]

[[ تطبيقات المشاركين ]]




تطبيق الأخت Mϊяαή (http://www.mexat.com/vb/member.php?u=203013) (هنا (http://justuni.freehostia.com/demos/view/92776538))

تطبيق سنا برق (http://www.mexat.com/vb/member.php?u=693962) (هنا (http://justuni.freehostia.com/demos/view/92776545))

تطبيق الأخت ذات الخمار (http://www.mexat.com/vb/member.php?u=600991) (هنا (http://justuni.freehostia.com/demos/view/92776558))

تطبيق الأخت بِشْر (http://www.mexat.com/vb/members/747155) (هنا (http://justuni.freehostia.com/demos/view/92776566))

[Miran.]

السلام عليكم و رحمة الله

لي عودة بعد التطبيق ان شاء الله :تدخين:

[Diamond mas]

السلام عليكم و رحمة الله

لي عودة بعد التطبيق ان شاء الله :تدخين:
وعليكم السلام ورحمة الله وبركاته

أُولى الواصلين :سعادة2:
بانتظارك :d

[Miran.]

السلام عليكم

درس جميل كالعادة :encouragement:
هذا هو تطبيقي المتواضع :نظارة:
هنا (http://www.gulfup.com/?vlJ7gY)
بانتظار نقدك :تدخين:
و السلام

[Diamond mas]

السلام عليكم

درس جميل كالعادة :encouragement:
هذا هو تطبيقي المتواضع :نظارة:
هنا (http://www.gulfup.com/?vlJ7gY)
بانتظار نقدك :تدخين:
و السلام
وعليكم السلام ورحمة الله وبركاته

الله يسلمك أختي، هذا من ذوقك.. سعيد أنه أعجبك ^_^

تطبيقك أجمل من تطبيقي :ضحكة:
يعطيكِ العافية ::جيد::

تم الرفع (هنا (http://justuni.freehostia.com/demos/view/92776538))

[سنا برق]

مساء الخيرات، كيف حالك أخي ديموند ماس؟

يا له من درس قيّم، فبعد تعذيب ال فريم باي فريم جاء هذا الدرس ليفرج همنا ::سعادة::

مقارنتك بين النوعين أظهرت فوائد كليهما، فرغم أن الفريم باي فريم قد سبب لي نوبات قلبية وأنا أحرك السمكة إلا أنه أعطاني تحكما مطلقا فيها..
بينما الحركة البينية قد مكنتني من إحداث تغيرات محددة على العناصر.

لدي استفسار بخصوص الخاصية ease
لم أتوصل من خلال الفديو إلى مفهوم شامل لفائدتها، هل هي للتحكم بالسرعة (تباطئ وتزايد)؟

تطبيقك جميل جدا، استغرب من أين تستوحي أفكارك!
كلما خطرت لي فكرة أجدها أبعد ما يكون عن إمكانية التطبيق :نوم:
ولكنني حاولت تنفيذها على أية حال وانتهى بي الأمر إلى مخالفة قوانين الطبيعة :ضحكة:

تطبيقي (http://im35.gulfup.com/y12ZS.swf)

أشكرك على رابط الفديوهات المختصة بالرسم والتي قدمتها لي في الدرس السابق، شيء مبهر حقا!
لربما استوحيت بطل مشهدي مما شاهدت (مع فارق التشبيه :d)

تشكر جهودك أخي، بانتظار القادم :)

[Diamond mas]

مساء الخيرات، كيف حالك أخي ديموند ماس؟

يا له من درس قيّم، فبعد تعذيب ال فريم باي فريم جاء هذا الدرس ليفرج همنا ::سعادة::

مقارنتك بين النوعين أظهرت فوائد كليهما، فرغم أن الفريم باي فريم قد سبب لي نوبات قلبية وأنا أحرك السمكة إلا أنه أعطاني تحكما مطلقا فيها..
بينما الحركة البينية قد مكنتني من إحداث تغيرات محددة على العناصر.

لدي استفسار بخصوص الخاصية ease
لم أتوصل من خلال الفديو إلى مفهوم شامل لفائدتها، هل هي للتحكم بالسرعة (تباطئ وتزايد)؟

تطبيقك جميل جدا، استغرب من أين تستوحي أفكارك!
كلما خطرت لي فكرة أجدها أبعد ما يكون عن إمكانية التطبيق :نوم:
ولكنني حاولت تنفيذها على أية حال وانتهى بي الأمر إلى مخالفة قوانين الطبيعة :ضحكة:

تطبيقي (http://im35.gulfup.com/y12ZS.swf)

أشكرك على رابط الفديوهات المختصة بالرسم والتي قدمتها لي في الدرس السابق، شيء مبهر حقا!
لربما استوحيت بطل مشهدي مما شاهدت (مع فارق التشبيه :d)

تشكر جهودك أخي، بانتظار القادم :)
صباح الخيرات والمسرات أهلا بعودتك ^_^

بالفعل، تعتبر هذه التقنية الفرج لما يعانيه المرء مع تقنية إطار بإطار،
أشكرك على كلامك الطيب.. سعدتُ لأنه قد نال إعجابك ::سعادة::

بالنسبة لخاصية الـ Ease فهي تماماً كما وصفتها.. وظيفتها التحكم بتسارع الحركة عند بداية العرض أو تباطئها،
فإذا اخترت قيمة للـ Ease أعلى من 0 تبدأ الحركة سريعة ثم تأخذ بالتباطؤ.. أما إذا كانت القيمة أقل من 0 فستبدأ الحركة بطيئة ثم تأخذ بالتسارع.

أشكرك مرة أخرى، لكن تطبيقاتكم حتى الآن أجمل من تطبيقي :أوو:
لا بد وأنك اتسغرقت وقتاً طويلاً للخروج بمثل هذه النتيجة.. ويظهر في التطبيق إتقانك لما جاء في الدرس بشكل ممتاز ::جيد::

تم الرفع (صائد التفاح (http://justuni.freehostia.com/demos/view/92776545))

العفو، هدفنا تقديم الفائدة، وبتفاعلكم قد نلت المتعة والتسلية ^_^

[ذات الخمار]

اخوي هل طريقة عمل النجمة يتم فيها استخدام الحركة
Create Motion Tween
او
Create Classic Tween

لاني طبقت على الحركة Create Classic Tween

كما في الصورة
http://im36.gulfup.com/33Av8.jpg

وهذا هو التطبيق

http://www.3bsy.com/files/14859.swf

[Diamond mas]

اخوي هل طريقة عمل النجمة يتم فيها استخدام الحركة
Create Motion Tween
او
Create Classic Tween

لاني طبقت على الحركة Create Classic Tween

كما في الصورة
http://im36.gulfup.com/33Av8.jpg

وهذا هو التطبيق

http://www.3bsy.com/files/14859.swf

يبدو لي أنكِ مستخدمة سابقة للبرنامج، فلا بد وأنكِ قد استخدمتِ إصدارات قديمة من برنامج فلاش :rolleyes:
إذا كان ظني صحيح فهي فرصة جيدة لكِ حتى تتعلمي الحركة البينية الجديدة Motion Tween وتتركي الحركة البينية القديمة Classic Tween حيث أن الحركة الجديدة تغني عن القديمة في معظم الأحيان.

تطبيقك جيد وقد وفى بالغرض.. لكنكِ لم تستغلي الحركة الاستغلال الجيد،
فكما هو ملاحظ --في تطبيقك وفي الصورة التي أرفقتيها-- تتحرك النجمة بخطوط مستقيمة فقط!
لكن ماذا عن التحريك بتقوّس أو بخطوط مائلة؟

من الأسهل استخدام الـ Motion Tween في هذه الحالة وعدم استخدام الـ Classic Tween، لذا أطلب منكِ أن تعيدي تطبيقك لكن هذه المرة مع الـ Motion Tween الذي شرحتُها في هذا الدرس،
فلن تحتاجي معها إلى إنشاء كل هذا العدد من الإطارات الرئيسية ;)
.
.

إذا أردتِ تجاوز ما جاء في هذا الدرس لتتعرفي أكثر على الـ Classic Tween فاسألي فقط.. سأحاول تجهيز درس خارجي ونشره في منتدى الدروس إذا اقتضت الحاجة.

لم أقم برفع تطبيقك لأني أريد رفع التطبيق النهائي، فإذا اعتبرتِ هذا التطبيق نهائياً فسأرفعه ^^
تحياتي

[ذات الخمار]

نعم اخي ظنك صحيح سبق لي ان درست دورة لمدة شهر في فلاش 5 القديم
لهذا اجد صعوبة في التعامل مع الفلاشات الحديثة رغم اني استخدمت ثلاثة اصدارات حديثه وهي
فلاش 8 وفلاش cs5 فلاش cs6

ع العموم انا طبقت طريقتك وعملت تصميم بحركة Motion Tween

هذي صورة للشريط الزمني
http://im34.gulfup.com/fa3qM.jpg

وهذي صورة لطريقة تحريك النجمة
اذا كان فيها اخطاء ارجو ارشادي للطريقة الصحيحة جزاك الله خيرا
http://im34.gulfup.com/0R8BL.jpg

وهذا التطبيق
http://www.3bsy.com/files/14867.swf

[Diamond mas]

هل ما زلتِ تجدين صعوبة في استخدام الحركة البينية الحديثة؟

أنا كنتُ ابتدأت تعلمي على فلاش من فلاش 5 وواكبت فلاش MX و 8 من الإصدارات قبل الحركة البينية الحديثة التي تمت إضافتها ابتداءً من Flash CS4،
ونعم، وجدتُ صعوبة في التخلي عن الحركة القديمة رغم أن الحركة الجديدة أسهل.

في الإصدارات القديمة من فلاش كنا نستخدم ما يُعرف بـ دليل الحركة (Motion Guide) وبواسطته كنا نحدد خطوطا متعرجة ونشكلها كما نريد لتسير الحركة طبقها.
فهل تعرفتِ من قبل على دليل الحركة؟


تطبيقك ممتاز ولقد تم الرفع (النجمة الراقصة (http://justuni.freehostia.com/demos/view/92776558)) ::جيد::
تحياتي

[ذات الخمار]

جزاك الله خيرا اخي ..
اي نعم اذكرها وسبق ان عملت تصميم بنفس الحركة

بالنسبة للصعوبة التي واجهتني مع الاصدارات الحديثة
هي في عدم تعودي على الفوارق المختلفة بين الاصدارات الحديثة وفلاش5

لكن بعد متابعتي لدروسك وتطبيقاتي لها بدأت استوعب وافهم اشياء كثيرة كنت اجهلها


جاري تطبيق الدرس السابع حالا ان شاء الله

[Diamond mas]

وإياكم ^_^

الحمد لله.. أتمنى لكِ دوام التطور والنجاح،
تحياتي

[بِشْر]

السَلامُ عَليكُم وَ رحمَة الله ..

و أخيرًا انتهيت ، و جئت بتطبيقي الغشِيم :مرتبك:

هُنا (http://im36.gulfup.com/TfzBK.swf)

في أمآن الله ..

[Diamond mas]

السَلامُ عَليكُم وَ رحمَة الله ..

و أخيرًا انتهيت ، و جئت بتطبيقي الغشِيم :مرتبك:

هُنا (http://im36.gulfup.com/TfzBK.swf)

في أمآن الله ..
وعليكم السلام ورحمة الله وبركاته

يبدو أنكِ قمتِ بتحريك القمر بدل النجم :ضحكة:
تطبيق جيد، وتم الرفع (قمر يجري بين النجوم (http://justuni.freehostia.com/demos/view/92776566))

تحياتي