تعلم معنا التصميم بالسويش.. خطوة خطوة

[الفيزيائية]

بسم الله الرحمن الرحيم

حكمة اليوم:

قال رسول الله صلى الله عليه وسلم: " لن يشبع مؤمن من خير يسمعه حتى يكون منتهاه الجنة " - رواه الترمذي

[الفيزيائية]

تطبيق عمل بطاقة صغيرة بالصوت:



1. أدرج خلفية.
2. ضع الصوت في أول فريم من المشهد باختيار الأمر play sound، ثم من export التي ستظهر على اليمين (راجع الصور السابقة) اختر الصوت.
3. صمم البطاقة بالشكل الذي تريد. في البطاقة السابقة كتبت كلمات البطاقة، وجعلت لها ظلا بأن نسخت النص مرة ثانية وغيرت لونه وأرسلته خلف النص الأول (بتحريكها للأسفل من قائمة outline، بالفأرة أو بالأسهم).
4. من الممكن إدراج زر وأختر له الحدث on press ثم من قائمة action اختر stop sound، ثم اختر الصوت الذي تريد أن يتوقف (فقد يكون عندك أكثر من صوت في العمل أو الفلم الواحد)، وإذا كنت قد استخدمته في نفس الفلم، فستجده في أسفل قائمة export بدون الحاجة لاختيار الملف من جديد.
5. عندما ينتهي الصوت (تستطيع معرفة الفريم الذي ينتهي فيه من (properties) للصوت) ضع زر (إعادة) واختر له الحدث on press ثم الأمر gotoframe 0.
6. هكذا انتهينا من البطاقة، وتبقى صفحة التحميل (laoding):


صفحة التحميل laoding:

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

الطريقة سهلة وتتلخص في:

(1) بعد أن يكتمل العمل، نضيف مشهدا Scene ونرفعها إلى أعلى (من عند outline بواسطة الأسهم) لتكون أول ما يظهر للمستخدم، ونسمها Preloader.
(2) في أول فريم frame 0 of time line، نختار If frame loaded من عند Add Action.
(3) في القائمة على اليمين (في الأسفل) نختار المشهد الأول من العمل وغالبا سيكون اسمه scene 1.
(4) نعود لـ add action ونختار goto frame 0 of scene 1.
(5) نكتب كلمة تدل على التحميل، مثلا (انتظر التحميل، please waite، loading...) ونضيف لها ما نشاء من المؤثرات effects.
(5) في آخر فريم ينتهي عنده مشهد Preloader سنضع الأمر Goto frame 0 of preloader. وفي الفريم الذي يليه سنضع الأمر Preloader content.

الناتج النهائي سيشبه العمل التالي:



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




سنكتفي بهذا القدر اليوم.



الواجب:

قم أو قومي بعمل يشبه التالي (مع صوت الأزرار) إن استطعت إتقانه، سيكون هذا معناه تقدما كبيراً.. تهانينا



لاحظ ولاحظي حدود العمل، وكيف تظهر الكلمات عند النقر على أحد الزرين، كما لاحظوا أيضا كيف يظهر الصوت عند الضغط على أي زر.. حاولوا أن تنفذوا شيئا قريبا من هذا.

[Prof_Saaikq]

مشكورة يا الأخت الفيزيائية على الشرح و الله يعطيك العافية

[الفيزيائية]

العفو أخ Prof_Saaikq

أرجو أن يكون فيها الفائدة للجميع..

[الفيزيائية]

بسم الله الرحمن الرحيم

حكمة اليوم:

قال المتنبي:
ولم أر في عيوب الناس عيباً            كنقص القادرين على التمامِ

[الفيزيائية]

اليوم درسنا سيكون قصيراً، وأعتقد أنه سيكون رائعاً لهواة الرسم خاصة، وسيجدون فيه الكثير والكثير من المتعة

سنترك اليوم قائمة Action (ونعود لها فيما بعد) ولنرجع إلى قائمة layout لنتعلم كيف يمكن رسم صورة ببرنامج سويش:

قلم الرسم  :Bezier

تأملوا معي صورة التفاحة هذه مثلا:



أخترت لكم صورة سهلة.

الآن لندرجها في برنامج سويش من إدراج صورة

لنمسك بالقلم Bezier (بالنقر عليه من القائمة)

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

هذا الشكل قبل إن تتم إغلاق الدوائر (الخطوة قبل الأخيرة)



وهذا الشكل بعد أن تتم إغلاق جميع الدوائر (الخطوة الأخيرة)



والآن لتعديل الرسمة نستخدم الأداة reshap

بمجرد النقر على هذه الأداة من القائمة سيظهر لي الشكل الذي رسمته آنفا وكأنه عبارة عن مجموعة من المربعات، مثل هذه الصورة:



نعود فنقول أن كل المربعات تعبر عن زوايا حادة، وأن الدوائر تعبر عن زوايا منحنية، طبعا أنتم الآن لا تشاهدون أي دوائر.
لنذهب إلى زاوية من زوايا الرسم الذي لا يحتوي على أي مربع، وننقر بزر الفأرة الأيمن ونختار Quadratic

كالصورة:



ستظهر الآن دائرة في المنتصف المسافة بين مربعين، نستطيع أن نحركها كما نريد بالفأرة
وهكذا نستمر بعمل الدوائر حتى تصبح الصورة كلها عبارة عن مربعات ودوائر. كالصورة التالية:



نحن في طريقنا إلى الاحتراف في الرسم..

وقد قمت بتغيير ألوان الرسم من القائمة التي تظهر لي على يمين الشاشة (fill) نختار مثلا radial gradiant ونختار الألوان التي نشاء، ونتحكم باتجاه تدرج الألوان من أداة Fill transform من قائمة layout.


نقوم بتكرار العمل مع باقي أجزاء الصورة..
تأملوا الصورة التالية:



وأخيرا نجمع الصورة grouping as group.

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



قمت بنسخ الصورة أكثر من مرة، وفي كل مرة كنت أعدل عليها قليلا، فالصورة المتحركة السابقة عبارة عن أربع صور، ثم وضعتها وراء بعضها، وأثرت عليها من قائمة effect وكنت أختار place ثم remove لكل صورة، على أن يكون place للصورة الثانية فوق remove للصورة السابقة الأولى، وكان البعد بين كل تأثير وآخر حوالي ثانية.


لعلكم تتساءلون الآن كيف يمكن تحويل هذه الصورة المتحركة إلى صورة بإمتداد .gif والجواب للأسف لا يوجد طريقة مباشرة من برنامج سويش، ولكن يمكنك عمل ذلك بتحويل العمل إلى امتداد .swf ثم تضمينه داخل برنامج فلاش، وهناك يمكن تحويله إلى صورة .gif ولعل الأسهل أن تقوم برسم هذه الصورة رأسا ببرنامج فلاش (إن كنت تريد تحويلها إلى صورة .gif)

أرجو أن يكون درس اليوم مفيداً وسهلا، ولعله يكون كذلك بالتمرين.

والواجب هو القيام بعمل التفاحة المتحركة كالتي ترونها فوق، وتذكروا أن الإتقان مهم جدا هنا، وتذكروا أيضا حكمة اليوم (ولم أر في عيوب الناس عيبا          كنقص القادرين على التمام).


أراكم غدا بإذن الله.

[أبو عبد العزيز]

بارك الله فيك وجزاك خيرا أختي الفاضلة الفيزيائية على هذا المجهود

الرائع والشرح السهل والمفصل والذي أسأل الله أن يجعله في ميزان أعمالك .



ودمتم سالمين. '>

[ابو سلمان]

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

جزاك الله كل خير اختنا الفيزيائية على ما تقدميه لنا

لدي طلب بسيط أرجو أن تتكرمي أو احد من طلابك أو طالباتك الكرام بالقيام به

احتاج بانر دعائي بسيط وبحجم بانر شبكة العلوم العربية الموجود في اعلى المنتديات بمناسبة مشروعنا الجماعي الحالي ( معاً لبناء المكتبة العلمية ) بحيث اذا تم الضغط عليه يوصلنا لتفاصيل المشروع والموجودة في الاستراحة

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

إذا كان ذلك ممكناً وبدون حرج '>

اخوكم / ابو سلمان

[الفيزيائية]

السلام عليكم..

شكرا أستاذ أبو عبد العزيز.. وجزاك الله خيرا..

أستاذ أبو سلمان..

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

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

ونشكر لكم جهودكم الطيبة..

[الفيزيائية]

نبدأ..

بسم الله الرحمن الرحيم

حكمة اليوم:

إذا لم يكن في حوزتك غير مطرقة، فستتعامل مع أي شيء على أنه مسمار

[الفيزيائية]

قبل أن نعود إلى قائمة Action، نريد أن نتعرف على خاصية جدا مهمة في برنامج سويش، وهي كيفية عمل sprite.

SPRITE:
 

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

خلفية متحركة:

(1) سأدرج صورتين في العمل، الواحدة عبارة عن جبال، والأخرى خلفية لسماء زرقاء.
(2) الخلفية سوف أقوم بعمل نسخة أخرى منها لأطولها فأتمكن من تحريكها،
(3) لنلصقها بجانب بعضهما كما في الصورة:


(4) لإزالة الخط الفاصل بينهما، سوف نقلب إحدى الصورتين من modify ثم transform ثم flip horizontal، ولتصبح الصورة:


(5) نريد تجميع الصورتين grouping as shap
(6) نقوم بعمل تأثير الحركة من اليمين إلى اليسار من قائمة effect ثم move وحرك الصورة المجمعة التي أمامك.
(7) ولأننا نريد تحويلهما إلى sprite، سنقوم بالنقر على الزر الأيمن للفأرة واختيار convert to sprite
(7) ستلاحظ أن هناك نافذة أخرى يمكن أن تفتحها من علامة (+) بجانب sprite عند قائمة outline.
( هذه النافذة الجديدة أو sprite تحتوي على مسطرة مختلفة كلية أو مستقلة عن مسطرة المشهد الخارجية، وستجد بالتأكيد التأثير الذي قمت به، ولكنه الآن منفصل عن أي شيء خارج الـ sprite
(9) لإغلاق الـ sprite والعودة إلى الصفحة الأولى، انقر على علامة (-) التي بجانب الـ sprite عند قائمة outline، وستتحول إلى (+) دليلا على أنك الآن خارج الـ sprite.
(10) الخطوة الأخيرة، هي أن أعطي الأمر loop للـ sprite. وستجده على القائمة التي ستظهر على يمين الشاشة (بجانب خصائص الفلم والمشهد..) مادمت محددا على الـ sprite.
تأمل الصورة التالية: (عن السهم الأحمر)


العمل انتهي الآن، سيكون يشبه التالي:


بالطبع يمكنك تبطيء الحركة بزيادة عدد الفريمات للتأثير move.



ما كان سابقا هي فكرة مبسطة، وهناك أفكار أكثر تعقيدا، بل بواسطة الـ sprite نستطيع أن نصنع بعض الألعاب الخفيفة، وأفكار أكثر متعة.. ولكن انتظروا للدروس القادمة بإذن الله.

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


الواجب:
القيام بعمل يشبه التالي:


تهمني الخلفية أكثر من الكلام نفسه.. هل تستطيع أو تستطيعين معرفة فكرتها، وكيف تدور هكذا!!


غدا سنكمل الـ sprite بإذن الله، وسنتعلم كيف يمكن صنع الأقنعة mask، مع عدد من التطبيقات الغاية في الجمال والابتكار.


السلام عليكم

[شروق]

السلام عليكم ورحمة الله وبركاته
اختي كل ما زادت المعلومات تهت اكثر مع ان شرحك مبسط ولكن مثلا في طريقة وضع كثر من صوره عند تطبيقها يغلق البرنامج نفسه بعد اظهار خطأ في البرنامج
كذلك قلتي لمعرفة وقت انتهاء الصوت يكون من قائمة في اليمين export
ولم تظهر القائمه كذلك ؟!
وفي صفحة التحميل بعد كل ما تم يظهر فقط صفحة التحميل عند استعراض المشهد ولا يظهر المشهد التالي الأصلي ؟
اما بالنسبه لرسم التفاحة فحدث ولا حرج  '>  كيف يظهر التدرج بادقه الموجوده في رسمك ما شاء الله دقيق جدا
عارفه اني تعبتك لكن لكي الاجر عند الله  '>

[شروق]

نسيت    كيف نربط ظهور الرقم مع الضغط على الزر المرتبط بالصوت لاني لم استطع عمل ذلك في الواجب  

[الفيزيائية]

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

أهلا أهلا بأختي شروق..

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


إدارج صورة:

(1) سنذهب إلى الشريط الذي في الأعلى ونضغط على إدراج صورة Insert Image



طبعا ستفتح لنا قائمة، ومنها ندرج الصورة المختارة والتي ستكون إما بامتداد .jpg أو .gif أو .bmp

(2) وستظهر لي الصورة بهذا الشكل عند قائمة outline التي هي على يسار الشاشة:



(3) أكرر العملية لإدراج أكثر من صورة، وستظهر لي كلها على القائمة outline (في الصورة السابقة مدرجة فيها صورتين)

[الفيزيائية]

بالنسبة لمعرفة زمن الصوت:

بعد أن تختاري الأمر play sound من قائمة action، ستظهر لك ما يشبه الصورة التالية:



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







** بالنسبة لمشكلة صفحة التحميل، في الحقيقة يصعب علي تخمين المشكلة، قد يكون هناك أمر stop مثلا عند أول فريم من المشهد الأصلي.. أو قد يكون هناك سبب آخر، إن أحببت أن ترسلي لي الملف (ملف السويش الأصلى الذي بامتداد .swi) على بريدي الإلكتروني لعلي أعرف السبب؟؟