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

[Diamond mas]

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




حياكم الله أيها الإخوة والأخوات في درسنا السابع من دورة فلاش.

في مراجعة سريعة للدرس السادس (http://www.mexat.com/vb/threads/1063326) أذكِّركم ببعض المقتطفات:

تحدثنا في الدرس السابق عن الحركة البينية (Motion Tween)، وكيف يقوم فلاش برسم الإطارات بعد أن نحدد له حالة العنصر قبل بداية الحركة وحالته عند انتهائها،
وقارنا بين الحركة البينية والحركة إطار بإطار وشاهدنا فيديو للمقارنة بين الطريقتين.

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




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




سنتعلم نوعاً جديداً للحركة في فلاش؛ سنتعلم حركة تَحوّل الأشكال!
تحول دائرة إلى مربع.. أو ربما إلى نجمة أو قلب، سمّو ما شئتم من الأشكال ولكم أن تتخيلوا فائدة هذه الحركة.

سنتعرف أيضاً على طريقة تحويل الحروف والنصوص إلى ألوان عن طريق ما يسمى بـ التفكيك (Break Apart)،
سنتعلم أشياء جميلة وتقنيات جديدة لنضيفها إلى ما تعلمناه سابقاً فنكون قادرين على صناعة عروض متكاملة نضع فيها مواهبنا وأجمل ما ننسجه في مخيلاتنا.


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




حركة تحوّل الأشكال
في هذه الفقرة سنتعلم نوع جديد من أنواع الحركة في فلاش، هذا النوع يعرف بـ تحوّل الأشكال (Shape Tween).

إشارة تحوّل الأشكال
في هذه الفقر سنتعرف على آلية إرشاد فلاش والتحكم في عملية التحوّل.

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




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

[Diamond mas]

[[ حركة تحوّل الأشكال ]]




أحياناً نحتاج إلى صنع مشهد عن تحوّل الأشكال؛ كمشهد تحول دائرة إلى رأس قطة على سبيل المثال،
لمثل هذا الغرض تُستخدم تقنية تحوّل الأشكال (Shape Tween)..
لتبسيط الأمور، فلنفرض أننا نريد صنع مشهد لتحوّل شكل دائري إلى نجمة كما في العرض التالي (هنا (http://justuni.freehostia.com/demos/view/92776546))،
لن تفيدنا الحركة البينية في صنعها كونها مختصة بالرموز (اللقطات الحركية، الأزرار، الرسوم الجرافيكية)، ومن الصعب جداً صنع ذات المشهد باستخدام الطريقة اليدوية (إطار بإطار)،
لهذا نستخدم الحركة الشكلية.

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

شاهدوا الفيديو التالي:


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


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

[Diamond mas]

[[ إشارة تحوّل الأشكال ]]




مشاهد تحوّل الأرقام والحروف هي من أكثر المشاهد شهرة حول تحوّل الأشكال،
لنفرض أننا نريد صناعة عداد أرقام، سيكون من الجميل استخدام حركة تحوّل الأشكال على أرقام أثناء تغيرها، فدعونا نصنع مثل هذا العداد.
في البداية سنحتاج إلى إضافة الأرقام باستخدام أداة النص ثم نحوّل النص إلى لون عن طريق الضغط عليه بالزر الأيمن للفأرة ثم اختيار تفكيك (Break Apart)،
ثم نقوم بنفس الخطوات التي قمنا بها في الفقرة السابقة لصنع الحركة (بإمكانكم مشاهدة الفيديو بالأسفل حتى الدقيقة 1:33 دون متابعة الباقي).

إذا اخترتم نوع الخط Arial ستحصلون على نتيجة مشابهة للنتيجة التالية (هنا (http://justuni.freehostia.com/demos/view/92776547))،
لاحظوا كيف أن انقلاب الأرقام قد تم بشكل غريب، فلماذا حصل ذلك؟
يقوم فلاش بما في وسعه لإظهار التحوّل الشكلي على نحو مناسب لكنه كثيراً ما يُخفق في ذلك :ميت:
لهذا السبب تم إيجاد ما يسمى بـ الإشارة أو التلميحة (Hint) التي نحددها له لنخبره كيف يقوم بالتحويل،
هذه الإشارة عبارة عن نقطة نحددها في الإطار الذي تبدأ عنده الحركة ثم نحدد ذات تلك النقطة في الإطار الذي تنتهي عنده الحركة،
والهدف من تلك النقطة هي إخبار فلاش أن الجزء المتحول عند نقطة البداية تلك يجب أن يصبح على النحو الذي حددناه عند نقطة النهاية..
تماماً كأن نقول له أن نقطة البداية تلك يجب أن تتحول إلى نقطة النهاية المحددة،

عند تحديد تلك الإشارات سنحصل على النتيجة التالية (هنا (http://justuni.freehostia.com/demos/view/92776548))



http://www.youtube.com/watch?v=84yA71gQfD0

ملاحظتان:

- عند إضافة إشارة على إطاريّ البداية والنهاية للتحوّل الشكلي ستظهر دائرة باللون الأحمر وعليها حرف (من a إلى z)،
يتغير لون الدائرة إلى الأصفر في إطار البداية والأخضر في إطار النهاية ليشير أن النقاط قد تم تحديدها بنجاح.

- عند تفكيك (Break Apart) نص يحتوي على أكثر من حرف يتم فصل كل حرف من تلك الحروف إلى نص منفصل،
ولتحويل تلك الحروف إلى ألوان نقوم بالتفكيك مجدداً.. أي أن علينا تفكيك النص مرتين!

[Diamond mas]

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




لا أريد الضغط عليكم خصوصاً مع ظروف الامتحانات لهذا سأطلب منكم تطبيق ما جاء في الفيديو الثاني وحسب.

[Diamond mas]

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






تطبيقا الأخت أنـدلس (عداد فيلم كلاسيكي (http://justuni.freehostia.com/demos/view/92776549) | أشكال متحولة (http://justuni.freehostia.com/demos/view/92776550))

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

تطبيقا الأخت Mϊяαή (http://www.mexat.com/vb/member.php?u=203013) (تحويل الأشكال (http://justuni.freehostia.com/demos/view/92776552) | تحويل الأرقام (http://justuni.freehostia.com/demos/view/92776553))

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

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

[Simon Adams]

وعليكم السلام ورحمة الله وبركاته
درس خفيف لطيف وسريع ::سعادة::

<- خرجتُ قبل أسبوع من الدرس الرابع حركة الكرة بالإطار البطيء :غياب:

تمّ تطبيق الدرس والحمدُ لله
يتبقى لي الدرسين 5,6 :جرح:

هنا (http://www.gulfup.com/?9GUPQc) تطبيق العداد وهنا (http://www.gulfup.com/?FYSlqC) تحوّل الأشكال

+ حاولت تحويل شكل لحرف وكان الحرف يخرج من الشكل لكن الشكل نفسه ثابت فحاولت جعل الشكل يتحول لكلمة وجزأتها بـ break apart لكن لم تعمل الحركة :موسوس:؟
لابد من وجود شكل واحد يتحول لشكل آخر مختلف في نفس الطبقة؟

[Diamond mas]

^
أهلا بعودتك ^_^

إذا انتهيتِ من الدرس الرابع معناها ما ظل عليكِ حاجة فيها تركيز وفهم :D
ومع هذا الدرس بنكون انتهينا من المقرر، بقي التعرف على بعض الأوامر البرمجية وصنع اللعبة :رامبو:
بس بجد، محتويات الدرس الخامس والسادس هي من أهم الأشياء التي يجب تعلمها ^_^

بالنسبة للجزء الأول من السؤال: "حاولت تحويل شكل لحرف وكان الحرف يخرج من الشكل لكن الشكل نفسه ثابت"
لم أستطع تخيل ما جرى.. ربما لو ترفقين التطبيق؟! :مرتبك:

أما الشق الثاني فملاحظتك في محلها وشكراً على التنبيه لهذا النقطة ::جيد::
عند تفكيك نص يحتوي أكثر من حرف يتم تفكيك النص ووضع كل حرف من تلك الحروف في نص منفصل، أي أن عليكِ تفكيك النص مرتين :D

ويجب الانتباه إذا ما تم استخدام حروف عربية في النص!
حيث أن علينا استخدام نوع النص TLF Text بدلاً من الـ Classic Text، وإلا ستظهر الحروف منفصلة (أ ن د ل س)،
لتحويل نوع النص إلى TLF Text قومي باختيار أداة النص ثم من أعلى لوحة الخصائص قومي بتغيير Classic Text إلى TLF Text، بعد ذلك سيتم التفكيك بنجاح لكن مع التفكيك مرتين أيضاً ;)


بالطبع يمكن استخدام التحوّل على أكثر من شكل على نفس الطبقة (مثلاً: شكل يتجزأ إلى عدة أشكال)،
مع أن التحكم في الناتج سيكون صعباً إلى حدٍ ما.. إلا أن ذلك متاحاً.

تم الرفع:
- عداد فيلم كلاسيكي (http://justuni.freehostia.com/demos/view/92776549)
- أشكال متحولة (http://justuni.freehostia.com/demos/view/92776550)

[Miran.]

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

[سنا برق]

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

درس جميل كما عودتنا :)

قمت بعمل بعض التجارب على ال break apart
وتوصلت إلى أنه يرجع الرمز إلى شكل عادي..

وفهمت أن ال shap tween لا يعمل على غير الأشكال..

خصوصا أنني حاولت إستخدام خاصية shap tween على ال symles فلم تكن متاحة..

وقد حدث بأن رأيت تلك النقاط التي تحدث عنها (خلل في عملية التحويل)،
كان الخلل في أن شق بدء الحركة كان شكل وشق نهايتها كان رمز،
وما أن عدلت الشق الثاني حتى تحولت النقاط إلى سهم :)

قمت بتجريب الخاصية التي تعلمناها اليوم على الرسوم، النتيجة غير متقنة رغم إستخدامي للكثير من ال hint

تطبيقي (http://im31.gulfup.com/11zh3.swf)

[Diamond mas]

أهلا ^_^
التطبيق والممارسة على هذا الدرس مهم جداً، لا بد وأنك قد استمتعت بالتجربة :D
أجل بالضبط.. فـ Break Apart يقوم بالتفكيك، فإذا كان العنصر رمزاً قام بتفكيكه إلى أجزاءه الأساسية ::جيد::
كل نوع من أنواع الحركة يختص بعمل معين، لهذا يجب استخدام الحركة البينية أو التحريك إطار بإطار مع الرموز :سعادة2:

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

تم الرفع (لا تحقرن صغيراً في مخاصمة.. إن البعوضة تدمي مقلة الأسد (http://justuni.freehostia.com/demos/view/92776551))

تحياتي

[Miran.]

السلام عليكم

اسففففة على التأخر الشديد هذه المرة xS
1 (http://www.gulfup.com/?G5SK1j)
2
(http://www.gulfup.com/?D9MT2A)
بانتظار نقدك ^^
في امان الله

[Diamond mas]

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

ما في داعي للاعتذار، أقدّر أن لديكِ ظروفك ^^

تم الرفع ::جيد::

- تحويل الأشكال (http://justuni.freehostia.com/demos/view/92776552)
- تحويل الأرقام (http://justuni.freehostia.com/demos/view/92776553)

تحياتي

[ذات الخمار]

تطبيقي لتحول الاشكال - تعاقب الليل والنهار

هنــا (http://www.3bsy.com/files/14871.swf)

تطبيقي لحركة العداد مع مؤقت الساعة طبعا الساعة مالها علاقة بالعداد

هنــا (http://www.3bsy.com/files/14862.swf)

[Diamond mas]

تطبيقات جميلة، سلمت الأيادي ::جيد::

تم الرفع:
- تعاقب الليل والنهار (http://justuni.freehostia.com/demos/view/92776559)
- عداد مع مؤقت ساعة (http://justuni.freehostia.com/demos/view/92776560)

تحياتي

[بِشْر]

تَم التطبِيق ،

هُنا (http://im42.gulfup.com/0PNJF.swf)

شُكرًا لَك على الدَرس الرآئع :أوو:

[Diamond mas]

تَم التطبِيق ،

هُنا (http://im42.gulfup.com/0PNJF.swf)

شُكرًا لَك على الدَرس الرآئع :أوو:
يظهر من التطبيق أنكِ لم تستخدمي الإشارات (Hints) :rolleyes:

تم الرفع (عداد (http://justuni.freehostia.com/demos/view/92776567))

العفو ^_^
تحياتي

[The Giant 01]

مشكور على الدرس الجميل تم تنفيذ تغير الاشكال بنجاح اما الجزءالخاص بتغير الارقام كان ناجح حتى جزئيه hintsلان الجزء
من قائمه shape لم ينشط التطبيق هنا (http://www.mediafire.com/download/7eq71ki1mkeqke0/Pictures.rar)

[Diamond mas]

مشكور على الدرس الجميل تم تنفيذ تغير الاشكال بنجاح اما الجزءالخاص بتغير الارقام كان ناجح حتى جزئيه hintsلان الجزء
من قائمه shape لم ينشط التطبيق هنا (http://www.mediafire.com/download/7eq71ki1mkeqke0/Pictures.rar)
العفو أخي ^_^

تطبيق النجمة جيد ::جيد::
بالنسبة لمشكلتك مع الـ hints.. يجب أن تكون على إطار رئيسي قبل إضافة الـ hint، في حال كان مؤشر شريط الزمن على إطار عادي لن تظهر خيارات إضافة/حذف hint

[The Giant 01]

شكرا done هنا (http://www.mediafire.com/download/4lkl9ryn4t78abg/%D8%AA%D8%BA%D9%8A%D8%B1_%D8%A7%D9%84%D8%A7%D8%B1% D9%82%D8%A7%D9%85.rar)

[Diamond mas]

شكرا done هنا (http://www.mediafire.com/download/4lkl9ryn4t78abg/%D8%AA%D8%BA%D9%8A%D8%B1_%D8%A7%D9%84%D8%A7%D8%B1% D9%82%D8%A7%D9%85.rar)

العفو.. تطبيقك ممتاز ::جيد::

[كودي محمد]

شكرا .. فعلا دروسك مفيدة

[Diamond mas]

شكرا .. فعلا دروسك مفيدة
العفو.. وأهلاً بكِ ^_^